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.
07 Last touches
Tint the corals by about ten per cent in any colours you want. To add a feeling of depth, we are going to blur the Movie Clips a bit. The two corals in the front should have the most blur (around ten pixels, high quality), and then you can experiment with the rest.
08 Get the ActionScript
For the ActionScript section of this tutorial, we will use the AS file that came with the CD. Copy ‘Diorama.as’ into the same folder as ‘diorama.fla.’ Now click outside the Stage and in the Property Inspector, add ‘Diorama’ as the Document class.
09 Document class
Open ‘Diorama.as’ and have a quick glance through the code. There are quite a few variables, but it’s not that hard for you to get your head around. Still, there might be a few things that we need to dig deeper into. However, first things first…
10 Imported classes
On line two, start to import the classes used. The first two are the built-in Flash Display and Event packages. Then you have your external Tween and Easing classes. As you can see, you are using the same path to them in Flash as you do in your folder structure (gs>TweenMax).
11 Declare and add MCs
Under the class definition on line nine, set up the Movie Clips to be manipulated within the class. On line 25, assign the newly created MC instances with the MCs on the stage. When adding them to the stage, it must be done in the same order in which we want them on the stage.
12 Setting x and y
It’s important that we remember the x and y properties of each Movie Clip. That’s why each one is assigned a startX and a startY property, starting on line 43. These values will be used when we move the Movie Clips around later on, so that they always find their way back.
13 And a kind of z
Flash doesn’t have a built-in property for a z value as it has for x and y. We will create our own z value for each MC, so we know how far in the fish tank each one is. On line 61, start by setting the value 40 on ‘fish04’, which is furthest away. Then line 30 on ‘coral04’, which is a bit closer, etc.
14 Movie Clip events
Disable the corals for any mouse events on line 70, or else you’ll have a hard time triggering the fish that may be partly overlapped by the corals. On line 75, we are adding mouse rollover/roll-out Event Listeners to all the fish Movie Clips, which we use to trigger functions on line 87 and 90.
15 Glowing fishes
On line 88 in the fish Movie Clip rollover method, we are adding a White Glow filter with 100 per cent Alpha and 20px Blur to the Movie Clip, which quickly fades in on 0.1sec. And on line 91, the rollout triggers a Tween that fades the Glow back to zero per cent Alpha in 0.4sec.
16 Mouse movement
Keep track of mouse movement by adding a MouseEvent Listener to the stage on line 84. This triggers a function that moves the MCs around depending on where you move the mouse. Just position the different Movie Clips’ x and y values in relation to the mouse x and y values.
17 Reposition clips
On line 94, calculate how many pixels the pointer is from the centre on both the x and y axis to get the new position of the Movie Clips. Chuck each Movie Clip’s original x and y properties and the new z value in the TweenMax method to Tween them to their new positions in 1.2sec.
18 Finish off
Now we’re ready to test. Save all files and publish for HTML and you are done! Now you can play around and tweak it in your own way. Maybe add motion blur to the reposition Tweens? Have a look around at http://blog.greensock.com/tweenmaxas3 for a complete description.
Set your own global classpath
A global classpath is shared by all of your Flash documents; great if you want to reuse some of your class’s cross projects.
01 What?
The classpath is the way we locate our classes when we want to import them into our Flash documents. There are two types of classpaths: Global and Document level (which only applies to a single Flash doc).
02 Why?
The obvious benefit of using a Global classpath is that you can keep all of your favourite classes and packages in one place for instant access. This results in less messy project folders and an easier way to keep them updated.
03 How?
Create a folder on your local drive or network. In Flash, open Preferences and choose ActionScript in the left column. Click the ActionScript 3.0 Settings button and then click the Browse To Path button, find the folder you just created and click OK.
No comments:
Post a Comment