Flash tutorial: Creating a Flash tunnelling effect.

I know we have said a lot about Flash, and how it should be used sparingly, and with taste.  Those rules still apply, but those of you that want to create graphical effects, this small tutorial, should be a handy one.  So without further a do, lets get on with creating a Flash tunnelling effect.

1 Create a circle.  This will be used as a guide.  So make this layer 1, and lock it.  Now create a new layer, by clicking the icon at the bottom left of the timeline layer.

2 Now make two smaller circles, ensuring you are working on the new layer.  Group these two circles by selecting one circle, and then hold down shift and click the other.  Then click ctl G.  This will group the two circles together.

3 Copy and paste these two circles, and then with the new ones, select the rotation tool, and rotate it 90 degrees. Group them together as you did previously.  Repeat this a few times, but adjust the angles so that no gaps can be seen. 

4  If you feel this is looking good, you can unlock the original layer and delete it, as we were only using that as a guide.

5 Right click on the shape and select “Convert to group”, and name it “circle”.  Make sure it is set to Movie Clip.

Name it “circle”, in the windows properties panel too, to give it an instance name.

6 Repeat step 5 by right clicking on the new movie clip, and save it as, “circle_rotate”, in both Flash, and windows properties panel(instance name).  This creates a movie within a movie.

7 Double click “circle_rotate”, and move the timeframe along to 200, right click, and select “Insert keyframe”.

Drag the mouse from 200 to 1, right click, and select “Motion tween”.

Now go to the windows parameters panel.  The options you can see, allow adjustment of the previously created motion tween. 

We want the shape to spin once in a clockwise direction, so select the CW option, and give it a value of 1.

8) By selecting scene 1, you will return to the main timeline.

Right click on “circle_rotate” and select “Convert to symbol”.  Name it “Tunnel”, set it as a new movie clip, and do the same for the instance name.

9) Double click “tunnel”, and right click, dragging over frames 25 to 60.  Select “Insert Keyframes”.

Then drag over all the frames and select “Create Motion Tween.”

10) Select the new motion tween, then resize “circle_rotate”it to about 10% of its original size.

Ensure its Alpha level is set to 0%, in the windows properties panel.

11) Click on frame 60, and resize it to 300%, leaving the Alpha level at 100%

12) By right clicking over the frames and copy and pasting to a new layer, we now have tunnel animation.  Make sure that all the frames are copied and pasted each time.

It is possible to adjust the angle and positioning of the tunnel, by adjusting the keyframes. 

Speed can be adjusted by playing around with the frame sequences.

As with anything like this, especially RIAs’, just play around and see what you can come up with.  This is a truly creative element to the web, and I hope that if you use Flash, or are thinking about it, you do have the time to experiment.  With a little tweaking, this could be an effect that will impress, and help you become a better Flash user.

We hope this Flash Tutorial:Creating a tunnelling effect, has proved useful, and fun.