Create 3D Dioramas in Flash

This tutorial will get you started using scripted animation, and eventually it will make your life easier

Click here to download all files for this tutorial http://twurl.nl/pah6jd

There are still a few areas where classic timeline animation works great (like Flash toons), but for most of us, scripted animation is preferable.
To begin with, your work speed will probably improve. A lot. You will also have much more control over your animations, especially if you have a few running at the same time. And we can almost guarantee that the look and feel of your movies will improve as well.
Flash already has a built-in Tween class that you might want to check out, but we highly recommend getting an external package in favour of a more powerful and less code-heavy engine. There’s been a lot of different ones through the years, but the TweenMax package (http://blog.greensock.com/tweenmaxas3/ for more information) used in this tutorial is quite simple and straightforward. It’s now time to get cracking, so go ahead and open up Flash.

01 Getting started

First of all, create a folder named ‘Diorama’ on your hard drive. Copy both the ‘Assets’ and ‘gs’ folders from the CD to your newly created folder. If you haven’t got a clue what a diorama is, then it might help to Google it to prepare yourself a bit for what’s coming up.

02 Setting up the FLA

Next up, open a new ActionScript 3.0 Flash file. In the Property Inspector, set the stage dimensions to 600 x 950 pixels (H x W), and set the Frame Rate to 25. Save the document as ‘diorama.fla’ in your newly created Diorama folder.

03 Get your assets in

Import your three bitmaps (File>Import>Import to Stage) from the Diorama/Assets folder. Convert each bitmap to a Movie Clip (F8) and name them ‘BG’, ‘Coral’ and ‘Fish’. Then right-click on each bitmap in the Library and choose Properties, then tick the Allow Smoothing checkbox.

04 Stage setup

Select the Fish Movie Clip and make three copies of it (Edit>Copy and Edit>Paste). Do the same with the Coral MC. Select each MC and in the Property Inspector, name them: ‘mcFish01’, ‘mcFish02’, ‘mcFish03’, ‘mcFish04’, ‘mcCoral01’, ‘mcCoral02’, ‘mcCoral03’, ‘mcCoral04’ and ‘BG’.

05 Stage layout

Select all the Movie Clips on the stage (Edit>Select All), right-click and choose Distribute To Layer. Every MC should now be on a single layer in the timeline. Order the layers from top to bottom as: mcCoral01, mcCoral02, mcFish01, mcFish02, mcFish03, mcCoral03, mcCoral04, mcFish04, BG.

06 Stage design

Finally, it’s time to transform and move the Movie Clips around a bit. Use the Free Transform tool (Q) to skew, resize and move the Movie Clips until you have something that looks a bit like a nice fish tank. The fish in the back should be the smallest to keep the right perspective.

Pages: 1 2 3 4