Quick Tip: Reveal Your Ad With a Page Curl

In this quick tip I will demonstrate how to create a very easy curl animation for a corner advertisement on your website.

Step 1: Setting Up the Scene

Open a new ActionScript 3.0 Flash File and change its dimensions in the Properties panel to 250 x 250px. Set the frame rate to 30fps.

Step 2: Drawing Rectangle

Create a rectangle (240px by 240px) and place it at coordinates (10, 0). Pick the top-right corner and drag it all down until you see triangle.

Step 3: Rectangle Fill

Go to the color palette and set the outer gradient stops to dark gray (#A6A6A6). The middle gradient stop is lighter (#EEEEEE). Pick the paint bucket tool and drag over the triangle with the shift key held down.

Step 4: Converting to Movie Clip

Select the triangle and press F8. Name this new Movie Clip "curl" and change the registration point to the top-right corner.

Step 5: Preparing Mask and Background

Edit the curl object. Copy the triangle into the new layer (rename it to "bcg" for background) and rotate it 180 degrees. Set the fill color to dark gray (#333333). Create a duplicate layer of the "bcg" layer and rename it to "mask".

Step 6: Creating Curl Animation

Go to the tenth frame and create keyframes in all layers. Right click to first keyframes and select Create Motion Tween. Go to the first frame and select all objects (Ctrl+A). Pick the Free Transform Tool (Q) and make it smaller with Shift key down. It will be the initial state. Set the ease value in all first keyframes to 100.

Step 7: Creating Button

Create new layer and drag it between the bcg and mask layers. Name it "button". Create any logo or graphics you want and convert it to a Button (F8). Give it an instance name "button". Leave the curl object.

Step 8: Masking the Button

Double-click on the Layer Properties button of the mask layer and set the type to "Mask". Set the button layer's type to "Masked".

Step 9: Action Layer

Create a new layer called actions. Go to the tenth frame and create a keyframe. Go to the actions panel (F9) and type in stop();. Do the same in the first keyframe.

Step 10: Curl Object Listeners

Give the curl object on the stage an instance name of curl. In the actions layer on frame 1, open the actions panel (F9). Now we want the curl object to listen when the mouse moves over and out. Type in the following code.