Animated Iris effect in Flash

This really cool effect is quite simple to create, simply create a circle shape (holding down the shift key to keep aspect ratio)

Then select the line tool and draw a cross from top to bottom left to right.

now put your cursor in the center of the circle (hold down the SHIFT key to keep a 45 degree angle) and draw 4 lines outwards towards the edges.

Next click on the two lines shown above and drag each of them slightly outwards about 5 pixels, you should then end up with a claw type shape.

Now fill this shape with any colour, for mine I have chosen grey. Now right click on the shape and "Create Symbol" give it the name of "door_panel" (Important: make sure that you also set the "Registration" option to the center square)

The reason for setting the registration to center will become clear as you will now need to double click on your new "door_panel" movie clip to enter its timeline.

You will now notice a small cross in the center of your shape (this is the pivot point). You will need to select your shape, then move it so that the cross is at the tip shown above (Be sure to get the cross right on the tip, use the zoom tool if needs be).

You will now need to perform the same step once again. Right click on your newly positioned shape "Create Symbol" give it the name "panel_anim" Set the "Registration" to center and once again position this shape to the pivot point.

This should create a shape within a shape both of which are set to pivot points. (Important Since you have moved a shape within a shape you need to go back to the "door_panel" timeline and reposition the tip on the cross (see above)

If you now return to the main timeline, click on your "iris_panel" movie and select the rotate tool.

Before you move your shape you will need to copy it (CTRL + C) then paste it into position above the other shape (CTRL + SHIFT + V).

Now holding down the SHIFT key click and drag the corner of this new shape around until it snaps into place alongside the other.

Continue this process of copy, paste and rotate and you should end up with something simular to the above.

This was the reason for the pivot point positioning in stage 3, think of it aI bit like drawing a circle with a peice of string and a pencil.

The fact that we have also made this shape a movie clip before copying and rotating means that we can now edit one of these shapes in order to change them all simultaneously.

Just as described in the previous step we are now going to edit a single peice of the iris formation in order to change them all. Right click on the original peice and select edit.

Once in the "iris_panel" timeinline create a circle shape on a new layer, select and delete the inside so you are left with the outline. Now size and position this so that the bottom of the circle is touching the pivot point and the right side touches the far corner (see above).

Next you will need to refine the curve on your shape to match the new circle path that it will follow. Simply use the selection tool, then click and drag this line into place

If you now return to the main timeline you will see that adjusting the line of a single shape has caused a problem with the whole formation.

To fix this all you need to do is double click on one of the shapes then simply adjust the bottom line to meet up with the topline of the shape below.

Now you can either continue editing the "door"panel" timeline as you are with the formation in the background or load it isolated like above using the right click "Edit" option from the main timeline.

Once there right click on frame 30 of the top layer and "Insert Frame" then right click on the layer below once again at frame 30 and "Insert Key Frame". Now click and drag to select the frames in the bottom layer, right click and select "Create Motion Tween"

Click the pad lock icon on the top layer to lock it (this will stop you from accidently selecting it)

Now right click on the layer name e.g. "Layer 2" and select the "Guide" option. This will now give this layer a little hammer icon, this means that this new guide layer is waiting for its follower.

All you need to do it click and drag the bottom layer upwards onto the guide layer this will then link the guide with the motion tweened object on the layer below.

If you have aligned your circle guide correctly with the pivot point your shape should not move after setting the guide, if it does you may need to undo and adjust the pivot.

Make sure that you have frame 30 selected on the first layer, now using the selection tool click and drag the pivot point about half way around the circle guide. (You will notice that the shape now losley grabs and follows the guide circle becuase we have applied the setting).

Now simply grab the far corner of the shape and rotate it until it matches up with the other side of te circle (as shown in the above image.

This animatiion will now be the path taken by every peice of the iris formation.

For my version of this animation I have also selected all of the frames the tween and have added some easing, once selected the Windows -> Properties panel will show an "Ease" option with a slider, (I have set mine right down to -100 in).

If you now return to your main timeline and test your movie you will notice that all peices follow your new path and that it looks very cool.However it dosent quite look like an iris door yet, you will need to create a new layer then on the first frame of that layer draw a circle the same size as your iris formation.

Now right click on this new layers name and select "Mask" this will now only show the below layer within this circle area, now test your movie, isn't that better?

The final stage of the iris itself is to style the "door_panel" a little. First I have set the outerlines to a grey colour i have then copied another version and changed the colour to light grey this created a cool 3D double ine effect (see above)

I have then selected the main area of the shape loaded the "Windows -> Colour Mixer" panel and given this a Linier gradient effect of dark grey into grey (also see above).

This is a pretty simple yet effective way of making things stand out in an almost 3D fashion, it works simular to the double line effect from stage 15. Just create two circles, remove the borders and give them both "Liner" gradient effects using the Windows -> Colour Mixer panel.

Now heres the trick, make sure that both gradients are at oposite angles (shown above) also helps to make them slighly different grey shades to enhance the effect. Circle 2 is also about 15 pixels smaller that circle 1.

Now group both of your circles using the (CTRL + G) keys on each. Then position the smaller one ontop of the bigger one, once you are happy with the position select them both and use the (CTRL + B) keys to break them appart.

Now create a new circle and remove the center so you are just left with the outline, you will once again need to group this before positioning onto the other circles. (Grouping stops the objects interfering with each other until they are in place)

Once you have positioned your new grouped outline onto the other circles, break it appart once again using (CTRL + B). Now select the center of this circle and press the "Delete" key, now also delete the outline itself.

Now select the circles and re-group them (CTRL + G) for the last time. Create a new layer above the iris animation created in the previous steps and copy your new circle borderonto this layer, then position it over the iris animation. All done!