Flash Ken Burns Effect Slideshow

Simple, easy to use Ken Burns Effect, controlled by XML input.

If you use the component inside a website, you can set the component width and height in the HTML.

You can set the starting and ending scale values, as well as 9 positions for the starting and ending states: top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center and bottom-right.

If you wish, you can set the slideshow to pick the positions randomly, and all you need to do is define the scale values you want the images to play between.

If you want to set links to each separate image, you can disable the play/pause button, and add the links to each image in the XML.

You can set the color and transparency of the pause button as well. When you resume playing, the remaining time for the slide is used to move the selected slide to the position where it was moving to, and then it moves to the next slide, just as you set it.


Features:

1. Optional HTML text description.
2. Customizable colors.
3. XML based.

 

Aja Beasley

on 17/11/11

 

Yay! The code was absolutely fine (other than the "deploy/kenburns/"). I had another JS code on my page (just a simple code for the date -- but before the body) & it was so protective that it canceled yours out... Once I got rid of that, everything worked. Thank you! I'll definately be coming back!

 

Corneliu Chitanu

on 20/11/11

We're very glad to see you happy. Enjoy the component!

 

Bartosz Taczek

on 25/11/11

 

Is it possible to enlarge the animation when a web site is zoomed in (by ctrl+)

 

Corneliu Chitanu

on 28/11/11

Hello Bartosz,

Yes, it is possible. You'll need to change the stageW and stageH to 100%, like this:

var stageW = "100%";
var stageH = "100%";


You'll find these variables in our index.html webpage. You can copy the code from that file to embed the component, like this tutorial explains:

http://www.flabell.com/blog/1829/how-t...

Then you'll need to open the Sample.as file.

1. Open Sample.as2. Delete these lines:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

3. Install the fonts that come with the component
4. Open the FLA file from the source folder. Open the projectCS3.fla file, if you use Flash CS3.
5. Press Ctrl+Enter (Cmd+Return on the Mac).

That's it. Use the new SWF file and it's ready.

Also, very important, every HTML element that contains the flash component needs to have its dimension specified in percentages.

321

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Flash Ken Burns Effect Slideshow - change log

Update 28 April 2010

- we fixed a bug that was causing the links to not work on the images, even when the pause button was disabled.

There is currently no additional help provided for this flash component.