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.

curl.addEventListener(MouseEvent.MOUSE_OVER, forward);
curl.addEventListener(MouseEvent.MOUSE_OUT, backward);

function forward(e:MouseEvent):void {
	stage.removeEventListener(Event.ENTER_FRAME, backAnim);
	stage.addEventListener(Event.ENTER_FRAME, fwdAnim);
}	

function backward(e:MouseEvent):void {
	stage.removeEventListener(Event.ENTER_FRAME, fwdAnim);
	stage.addEventListener(Event.ENTER_FRAME, backAnim);
}

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.

function fwdAnim(e:Event):void {
	curl.nextFrame();
}

function backAnim(e:Event):void {
	curl.prevFrame();
}

Step 12: Click Function

Add the button listener and create a simple click function.

curl.button.addEventListener(MouseEvent.CLICK, clickMe);

function clickMe(e:MouseEvent):void {
	var myURL:URLRequest = new URLRequest("http://www.yourwebsite.com/");
	navigateToURL(myURL);
}

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.

<div id="pageCurl">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="250" height="250" align="middle">
    <param name="movie" value="pageCurl.swf">
    <param name="wmode" value="transparent">
    <param name="quality" value="high">
    <embed src="pageCurl.swf" width="250" wmode="transparent" height="250" align="middle" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed> 
  </object>
</div>

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.

#pageCurl {
  margin: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 250px;
  height: 250px;  
}

Conclusion

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!