The Effect and the Custom AS3 Class

We present a custom AS3 class, ImageAccordion, that folds and unfolds an image in accordion-pleated fashion. We use the native Flash Player 10 3D methods and achieve a remarkably realistic effect. On click, an image folds or unfolds in a tweened motion. The effect helps to save real estate in your Flash movie. Click the screen shot below to open the Flash movie:

Download

  • Download all source files corresponding to this effect: leo.zip

Below, we comment on the class ImageAccordion that is at the heart of the effect. Download the zip package linked above for the complete, well-commented, and easy to customize source code.

Using the ImageAccordion Class

What you see in the applet linked from the screen shot above, are two instances of ImageAccordion class, one of each image.

The ImageAccordion class extends Sprtite. Its constructor, evoked with the keyword 'new', takes four parameters, three optional:

new ImageAccordion(bd:BitmapData,df:Number=0.5, lf:Number=0, sl:int=10)

The constructor takes four parameters (three are optional). The first parameter is the BitmapData object for your image. You can get it by importing an image to the Library in Flash and linking to AS3 or by embedding in Flex or by loading at runtime. 'df' and 'lf' will be assigned as values for two variables within the class 'darkEdgeFactor' and 'lightEdgeFactor'. Those values will determine the amount of darkening for the bottom edges of the accordion and the amount of lightening for the top edges. 'df' works best if it is between 0 and 1, the larger 'df' the more darkening. Similarly 'lf' works best if it is between 0 and 1. Again the larger 'lf' the more lightening. The default settings work well with light images. The last parameter in the number of wedges in your accordion.

In the fla file corresponding to the example above, we imported the two images to the Library and linked them to AS3 under the names of Leonardo and MonaLisa. Then we created two instances of ImageAccordion, one for each image. Here is the Timeline code that creates the first instance. (The folder flashandmath contained in the zip file has to be in the same folder as your fla file so the class ImageAccordion can be found.)

import flashandmath.as3.ImageAccordion;

var accordion:ImageAccordion=new ImageAccordion(new Leonardo(224,350),0.5,0,14);

this.addChild(accordion);

accordion.x=160;

accordion.y=235;

We rotate the first accordion by 30 degrees and push it back along the z-axis so it becomes smaller and sharper.

accordion.rotationY=-30;

accordion.z=100;

accordion.filters=[new DropShadowFilter(4.0,45,0x999999)];

We do this similarly for MonaLisa, just positon it more to the right and rotate by 30 degrees.

The text that you see on the Stage was created at authoring time, but, of course, you could use dynamic text fields instead and load their content at runtime from an external file.

The ImageAccordion class has two public properties: tweenDownDuration and tweenUpDuration (in number of frames). They are set by default to 50 and 40. You can change it easily. For example, by setting:

accordion.tweenUpDuration=20;

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.