1. Code
  2. News

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.

Flash page curl effect

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.

Flash page curl effect

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.

Flash page curl effect

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.

Flash page curl effect

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".

Flash page curl effect

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.

Flash page curl effect

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.

Flash page curl effect

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".

Flash page curl effect

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.

Flash page curl effect

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.

Step 11: Animation Functions

The fwdAnim() and backAnim() functions says to go to the next/previous frame every time you enter new frame. In our case it is 30x per second. Add the following code.

Step 12: Click Function

Add the button listener and create a simple click function.

Now we can embed the SWF into a web page.

Step 13: Embedding on The Website

In the HTML page where you want your ad to appear, embed the SWF into a div with the pageCurl identifier.

Attach the following properties to the pageCurl object in your CSS file. They define the dimensions of your object holder and fix its position to the top right of the page.


That's it! Check out the result by rolling over the top right corner of the page to reveal your advertisement. I hope you find use for this Quick Tip!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.