Roll your mouse over to see effect once movie has loaded.

Create a Page Curl Effect in Flash

A widely used effect in Flash is a page curl animation. When the mouse is rolled over the button it looks as though the corner of the picture (or page) is curling up and when it's rolled off, it goes back to its original image.

1. The first thing you need to do is import the image that you're going to have the effect applied to like a photograph or bitmap to the library. The image isn't actually going to curl up - it's going to remain the same. We'll be building the page curl effect on a layer above it.

2. A good thing to do is grab a piece of paper and bring up the right bottom corner and see what shape this makes. This is what threw me off in the beginning. In my head, I had an idea of how the animation should look but it never looked right when I drew it in Flash. That's because what I was creating never happens in reality when the corner of a page is curled up!

Ok, after I got past that, I create the shape of the page curl with the Pen Tool.

First, create a new Movie Clip and name it PageCurlOver. This will be the animation when the mouse is rolled over it.

On the first layer drag out an Instance of your photograph. Make a new layer for the page curl.

Now, with the Pen Tool create the shape of the corner bent up.

  First shape created with Pen Tool

Note: I filled the shape with a Linear Gradient and added a drop shadow.

That's the first part of the page curl but you'll notice we can still see the photograph underneath it. So, use the Pen Tool again and create a shape over the corner of the picture that needs hidden and fill with white with a thin stroke (gray). Put this shape in a layer beneath the first one. Select both shapes, group them and convert them into a graphic or movie symbol. They need to be converted into a symbol before we can Tween them - which is the next step.

Triangle shape over corner of picture

3. Click on Frame 10 in the "curl" layer and insert a keyframe. Now, click back on the first frame and scale down the curl to the bottom corner. Move the privet point to the corner of the picture. (See below.) Doing this lets us scale down the curl in the right direction.

For the starting point, make it transparent (0%).  Select Alpha from the Color menu and set it to 0%.

Create a Motion Tween - Make sure Scale is checked! (You can also play around with the Ease setting to get a smoother animation.)

Click on the last frame of the Tween and add a stop action. F9 > Type in "stop( );" - without the quotes. 

Select both layers and Right-Click > Copy Frames.

Insert > New Symbol > PageCurlUp (Movie Clip).

Select the first frame and Right-click > Paste Frames. This pastes in the frames of the PageCurlOver movie. However, we want this animation to go in the opposite direction, rather than curling up we want it to curl back down. So select all the frame in the curl layer > Right-click > Reverse Frames.

Tip: (Make sure "Scale" is checked in the Properties Panel for the tween.)

The hard part is over!

Now  create the button, Insert > New Symbol > name it Button and make sure Button is selected for the type.

In the Up state drag out the PageCurlUp MC onto the stage and align it in the center.

Insert a Keyframe in the Over state and drag out the PageCurlOver MC and align it with the Up keyframe - you can turn on Onion skinning for this if you need to.

Create a new layer for the invisible button. This is just a rectangle drawn over the picture in the Hit state.

Now, go back to the main scene and drag out an Instance of the Button you just created onto the stage and test the movie.

If you get totally lost or just want to start with the FLA, download it by clicking on the link below. (Right-click and choose Save-Target-As)

Download FLA.