Flash 5 guide layers - allow you to easily build animations along pre-defined paths. Beware that a guide layer becomes attached to the all of another layer, meaning that the motion you end up defining, will apply to everything.
You can't guide characters on guide layers. - But you can guide "symbols", and its very easy to convert a char to a "symbol" - just press F8. When trying to snap a symbol to a motion guide, grab it by its reg point (the +), until the transportation circle glues to where you want.
You can have as many guide layers, as you want. - Just make sure you aren't trying to guide a guide layer. The picture shows 4 layers on the stack: 2 regular, and 2 guided.
There are many ways to build smooth paths. - Here, I drew an ellipse, and then cut its lower half.
click on ANY picture to jump to a bigger version.
Macromedia's Flash is becoming a too serious tool... At first, I didn't like it, not because of the technology itself - which has always been great - but because of the potential there is for some people to misuse it. And what is it to "misuse" this technology?!
Flash once was a tool strictly for vectorial animation. Vectorial animation is quite economical on static data, since frames are built on mathematically descriptions, making it possible to tween between sequences: for example, you tell the software what happens on frame x and frame x+10, then Macromedia's beauty, computes the frames it needs to feel and morph the gap. You can't tween wherever you want, but there usually is a way to make it possible.
Unfortunately, what some webmasters did, was to design their websites in nothing but a Flash movie... turning the browser into nothing more than a plug-in host - in these extreme situations, why not JUST distribute the SWF file and allow people to play it at home?
Some other bad uses of Flash, can be found in sites that could have been designed in HTML; ie, they are heavy on the SWF, but then what they do, could be done in plain HTML...
Finally, some websites exploited Flash's great potential for good looking interactivity... but couldn't offer more demanding remote services, due to limitations with the technology... Well, limitations are now nearly over!, thanks to ActionScript - Macromedia's Flash language, available since the product's 4th version, and definitely improved on the current 5th installment.
SWF (shockwave flash) files can be played by a standalone application (the SWF player), or by a browser plug-in, that must be installed, if SWFs are referred from a HTML page.
Today, I post the first of my Flash tutorials, and you'll learn how to make a very simple animation, that happens along a path. The animation shows a letter ('A') moving along a semi-circle, not just snapping to it, but also orienting itself, by doing the proper rotation transform, in order to "ride" the wave.
This tutorial (#01) refers the following topics:
- keyframes
- layers
- guide layers
- motion tweening
- rotation transforms
Despite the use of the 'A' character to show the techniques, you surely can use any other object, such as a circle (that could represent the elliptical movement of the Sun)...
Click here to see the FINAL animation. Click here to download a ZIP file with the SWF movie, the FLA source file and the HTML to test it, on a browser.
Here we go:
#1)
Start a NEW flash movie (File / New).
#2)
You should see the "timeline", the "movie", the "tools" and the "layers". All Flash animations are described in the "timeline", which is divided in frames. You can think of the "timeline", as a regular 8 mm movie, with all its frames.
Each frame will have some basic properties (such as a width and a height), that you can set by right-clicking on the "movie" area. The "tools" window holds the iconic buttons that access to stuff like a pencil, a paint bucket, an object selector, an eraser, and much more. You pick a tool, then you use it on a frame of the timeline. Layers are like transparent sheets: you can draw on top of one, assured that you won't be changing what is below, even if visible.
#3)
On the timeline, left-click (select) on frame 60 of the sole layer you have, then right-click (contextual options) and chose "add frame". Your movie is now 60 frames long, all the same (blank). Select frame 1, on the timeline.
#4)
Chose the text tool, then click on the movie zone, and type a single letter ('A', for example). If you want, try to resize the text box.
Do CTRLˆT (Window / Panels / Character), chose the "text options" tab and make you sure you select "static text". If you want, you can go to the "character" tab and opt for a font and its size.
#5)
Now chose the current layer on the layer stack (usually on left of the timeline), and do Insert / Motion Guide. If you didn't change the layers' names, there should now be a new layer, named "Guide: Layer 1".
Its in this new transparent sheet that you'll draw the path you want the 'A' char to follow. Contents of guide layers DO NOT show up, on the published SWF, and you can switch their visibility off, while editing, by pressing the eye icon.
Chose Insert / Keyframe on the guide layer. Notice that the play head auto-advanced one frame - select and drag the new keyframe, to the left.
Draw the path: you use the pencil tool to draw rather chaotic roads, or closed shapes that you can later cut / join, for more perfect paths. Lets try the circle.
#6)
Keeping the "Guide: Layer 1" layer chosen, select the circle tool; make sure you draw it with NO FILL, but with a visible stroke. Draw the circle wherever you want IN the movie, not worrying about the 'A'. If you want, you can hide the "Layer 1" layer.
Using the object selection tool, select the inferior half of the circle and cut it (press the delete key) - you now have the semi-circle that will define the walking path for the char.
#7)
Make sure the "Layer 1" layer is visible and select it, by left-clicking it, on the layers stack.
Select the 'A' with the object selector tool, and "convert it to a symbol", pressing F8. Chose this symbol to be a "graphic". Name it whatever you want ("symbol_A", for example). We are doing this, because Flash only moves symbols along paths - it doesn't move "free" chars.
Now, make sure that the options for the "select tool", have the "snap to objects" button ON (this button looks like a magnet). Also make sure that the movie play head is on frame 1 of the "Layer 1" layer.
Watch the selected 'A' symbol, and notice its "registration point" which is the '+' spot on its center.Drag the '+' to the left edge of the semi-circle and notice how the small circle snaps there.
#8)
Chose Insert / Create Motion Tween. Notice that the timeline gets filled with a stroked line, meaning that an attempt to achieve a tween animation is yet not complete.
Chose frame 60 (the last one) of the 'Layer 1' layer, and drag the 'A' char to the right extreme of the semi-circle, until its registration point perfectly snaps there, exactly as done in #7).
Notice how the stroked line in the timeline, becomes an arrow that points from the 1st keyframe, to the last one.
#9)
Its done. You can watch the animation using the Control toolbar and pressing the play button, or just by publishing hit, or just by pressing F12 and watching the HTML preview.
#10)
But what you've done is just basic motion tweening along a path. Lets get the 'A' char to "ride" the path. Do as follows:
#A)
Chose frame 1 of the 'Layer 1' layer. Chose the 'A' symbol. Go to the info panel (if its not open, use the Window / Panels menu to open it), select the transform tab, and rotate it -90 degrees.
#B)
Chose frame 30 of the 'Layer 1' layer. Insert a keyframe there - by now, you should have guessed that keyframes are frames that mark a change in the animation flow. Chose the 'A' symbol, the info panel, the transform tab, and set a rotation of 0 (zero) degrees.
#C)
Chose frame 60 of the 'Layer 1' layer. Set a rotation of 90 degrees for the 'A' symbol. Its done.
Play the movie and watch your 'A' riding the wave :).
Each Flash movie keeps a library of components. - You can think of these components, as the cast in Director, or as regular resources, in VC++ programming. Drag them in, when needed. For this first tutorial, the movie's lib features a single symbol...
Make you sure you don't try to snap a char to the motion guide. - That is not possible. First, remember to convert the char to a symbol. Press CTRL+L to check if the movie's library shows the symbol.
Here is our 'A' char on its full wave riding glory. - Its quite simple to achieve, but clearly shows a bit of Flash's potential.
This is where you select to insert a motion guide. - As soon as you chose to create a motion guide, you'll be auto creating a new layer - a guide layer - where the path for motion will live.