Using different screen size for different videos Flash plugins - Demo 7 / 14
Introduction
This demo shows the animation engine in a real-life situation. We have a playlist where each clip in the playlist is played with a different sized screen. When the clip starts the screen size is adjusted so that it suits each movie clip's dimensions.
JavaScript coding
The trick is to use custom properties in each playlist clip. Those custom properties are used in the onStart event listener on the common clip - which is called for each clip in the playlist. Look at the events documentation for more information.
// custom properties "w" and "h" specify screen dimensions
playlist: [
{url: 'KimAronson-TwentySeconds58192.flv', w:430, h:310},
{url: 'KimAronson-TwentySeconds59483.flv', w:460, h:335},
{url: 'KimAronson-TwentySeconds63617.flv', w:390, h:300}
],
// common clip
clip: {
// this onStart event is triggered for all clips in the playlist
onStart: function(clip) {
// resize the screen based on the custom clip properties
this.getScreen().animate({width: clip.w, height: clip.h}, 3000);
},
// all clips come from the same location
baseUrl: 'http://blip.tv/file/get',
// make all clips shorter so we can see the effect better
duration: 5
},
Take a look at a standalone version of this demo. View its source code to get things going on your page.