Featured Tutorials

swift3d,3D,sci-fi,flash animation,3d flash,swift 3D,flash city,future city,future city model,3d city model,3d city,3ds max,brazil renderer,futuristic city,future world Futuristic city, 3D techniques in Flash

Futuristic city, 3D techniques in Flash

See the tricks behing the advanced Flash animation that was used to bring this futuristic ..

flash tutorials, animated eyes, follow mouse, interactivity,eyes in flash,eyes that follow,eye tracking,animate eyes,photos of eyes,womans eyes Realistic Eye Animation

Realistic Eye Animation

Create animated eyes that blink, wink and following the mouse pointer using Flash...

flash tutorials, iris window, enter button, animated porthole,iris in flash,iris illustration,drawing an iris,iris in flash,flash iris,flash tutorial,iris tutorial Iris Porthole Door Animation in Flash

Iris Porthole Door Animation in Flash

Very cool effect that could be used for an intro or as an enter button for any web site...

photoshop tutorials, gradient filter, photo effects, brand image,gradient mapping,gradients in photoshop,gradient colours,photo gradients,gradient photo,gradient filter,photoshop filters Gradient Mapping

Gradient Mapping

How to transform a standard photograph for use with a specific colour scheme or brand imag..

flash tutorials, fireworks, particle effects, flash animation,fireworks in flash,creating fireworks,fireworks movie,fireworks display,how to create fireworks,flash fireworks tutorial,fireworks tutorial Flash Firework Frenzy

Flash Firework Frenzy

Create a realistic particle based firework display using Flash. This technique was once us..

Featured Videos

Very cool speed painting of Optimus Prime from Transformers in Ad..

Some great tips for how to go about designing your website with s..

Sorenson Squeeze is a great piece fo software that has saved my a..

Heres a tutorial showing off a fancy new scripting feature in dre..

Amazing video from a guy called Johnny Lee, who seems to spend hi..

Creating a 3D Tunnel Effect in Flash

This tutorial will teach you how to create this very cool 3D tunnel effect in Flash using some simple 2D animation techniques.

Download the FLA source file for this tutorial / wipeout_tunnel.zip / Flash 8

1

First you will need to create circle to use as a guide for creating the tunnel segment shape.

Create this on the first layer, then click the padlock icon to lock this layer. Now create a new layer using the icon in the bottom left of the timeline layer panel.

3

Making sure that you are on the newly created top layer, create two smaller circles for my example these where 24x24 pixels.

Now select both of these circles by selecting the first then holding down the SHIFT key and left clicking the other, Now groupd these two items using the CTRL + G keys.

3

Copy and paste this new group to create another set. Now select the roation tool from the left side tool menu and rotate it 90 degrees, and you should end up with something simular to the above.

Now as before select both of these groups and group them together as one using CTRL + G

4

Repeat the previous step another two times this time adjusting the angles so that you fit two smaller circles into the remaining gaps.

If your on the right track you should end up with something simular to the above.

Once your happy you can click on the bottom (locked) layer and delete it as we were only using this as a guide.

5

Now right click on your final grouped shape and select the "Convert To Symbol" option, give it the name "ring" and make sure it is set as a Movie Clip then click "OK".

After creating movie clips its good practice to give it an instance name in the below Windows -> Properties panel so do this now, call it "ring" as before.

6

Once you have created your shape as a movie you will need to perfrom the previous step again, by right clicking on the new "ring" movieclip and selecting the option "Convert To Symbol" this time give it the name of "ring_spin" this will create a movie within a movie.

Also give this an instance name in the properties panel "ring_spin"

7

Now double click on your new "ring_spin" movie and you will enter its timeline containing the "ring" movieclip previously created.

Now move the timeline along to frame 200 and right click on it. Now select the "Insert Keyframe" option.

Next drag over all of the frames from 200 all the way down to 1, once selected right click and choose the "Create Motion Tween" option.

8

With the frames still selected go down to the Windows -> Parameters panel, you will now see a selection of options, this allows you to adjust the previously crated motion tween.

Set the rotate to CW (Clockwise) and we only want this shape to spin once so set the times value to 1.

If you now drag over the frames you should see your new shape spin around in a clockwise direction.

9

Now return to the main timeline by clicking the "Scene 1" button towards the top of the timeline.

Now for the last time right click on your "ring_spin" movieclip and select the "Convert To Symbol" option.

Give it the name "tunnel" and set this as a Movie Clip, Remember to also give this an instance name in the properties panel below.

10

Now the same as before double click on the new "tunnel" movie clip and you will enter its timeline.

Then right click at frames 25 and 60 and "Insert Keyframes"

Now drag over all of the frames, right click and select the "Create Motion Tween" option

11

Select the first frame of your new tween then resize your "ring_spin" shape movie to about 10% of its original size (see above)

Once you have resized it go down to to the bottom Windows -> Properties panel and set its Alpha level to 0%

12

Now click on frame 60 and resize your "ring_spin" shape movieclip to about 300% of its original size (yes really that big) see the above for an example of mine.

You can leave the Alpha level for this frame at 100%

13

Now that we have created the basis for the tunnel animation all that is left is to drag over these frames, then right click "Copy Frames".

Now create a new layer and right click "Paste Frames" but be sure that each time you move all of your newly pasted frames along the timeline I have chosen to do this by 10 frames each time (see above for an example of my final frame sequence.

14

As you can see if you now test your movie your tunnel effect will work, but if you want to be able to angle and direct the movement of your tunnel you will have to edit the position of the keyframes.

The image above shows the how moving the start position of the first frame on each layer towards the desired direction. Each time move it slightly further away I have chosen 10 pixels.

15

You can also adjust the speed and flow of the tunnel animation by slightly adjusting each of the frame sequences.

As you can see from the above image in my final sequence I have adjusted both the position of the start frame and the second frame for each layer, this has created a curve effect in the timeline which results in a slow speed increase for my final tunnel animation.

But feel free to play around with it and see what you can come up with.

16

As you can see from the flash example at the top of this page I have tried out a few different shapes for this effect.

Each one really gives the tunnel a whole new dimension and character, if you download the FLA source you can get hold of these shapes.

 Subscribe to our feed

Send to a friend