Wednesday 29 September 2010

Motion Tween, Flash

Learned
Basic Animation in Flash. How to use the Motion Tween.

Key Points to remember:
  • Every sprite that is to be animated needs to have it's own layer.
  • Layers work the same way as they do in Photoshop (the layer at the bottom will be behind the layer at the top).
  • Key point in the animation are marked with "Key Frames". (Say there is a change in direction then a Key Frame will show where it happens)
  • Any item that you would like to Tween needs to be a "Symbol". This is easily done by selecting the item and pressing the "F8" key.
  • Label every thing. You can easily lose yourself amongst all the Key Frames, Layers and Sprites. Meaningful labels/names make life easier for you.
The Motion Tween feature is a very powerful tool in flash. You can use it not just to move Sprites, but also to change it size over time, rotate it on the spot, to fade in and out (like a ghost) or even a combination of all of these things.

How to do a Motion Tween:
  • Select the item you want to Tween. It can be anything as long as it's a symbol (remember the key point above?)
  • Now right click it and select "Create Motion Tween"
  • Move the item to where you would like it to travel.
  • If it worked then you should notice the following.
  1. There should be Green Line on the screen that starts where the Item was and end where you placed the item.
  2. On the time line you'll be at the frame number that is based on your frame rate (Normally 24fps)
  3. Also in the frame you're in there should be a black diamond symbol (this for all extents and purposes is your Key Frame)
  • Did it work? Good. Now to see your work in motion just press the "Enter" key. Or press the button combo of "Ctrl+Enter". The latter is more preferable as it will show you what your audience will see.
Extra Points
  • To start a new Flash File, open Flash and then select "Actionscript 3.0". This will take you to a blank stage for you to tinkle with.
  • When making Sprites make sure you draw it at the size it is intended to be used at. While you can draw one and then shrink it using the free-form tool it will still retain the original data size, which means longer processing time (not fun for any one). Remember you got the Zoom tool. Use it.
  • If you're using a Mac you zoom in on any area on the screen (this applies to anything outside of flash to like Firefox). To do this just hover the Mouse over where you like to zoom to, then hold "Ctrl" and roll in using the roller ball on the mouse. This is handy to show people certain areas that are needed.
  • Say you want to extend a layer so that it can be seen through out the whole animation but you don't want to tween it (e.g back ground). Well this is easily done by selecting the frame in the layer you would it to appear till and then press "F5". You should have a blank Rectangle appear.
  • Just as "F5" adds a normal frame, "F6" adds an extra Key Frame. This is handy to add a little stop gap between an animation that has to processes going on. Let's give an example. You have a fish growing and moving across the screen. But when it reaches the middle you want it to stop growing but keep moving. But after it's past the middle it starts growing again. You'll need an extra Key Frame to handle that. (BTW the fish needed to stop growing to get past the bollards).
  • There are 3 Symbols in the layers box that can become your best friends if you use them properly.
  1. The eye. This makes that Layer invisible or visible.
  2. The Padlock. This locks or locks the layer. Great to avoid unintended movement of Sprites.
  3. The Coloured Box. Super Handy if you learn how to use it properly. When the box has colour in it everything in that layer has it proper fill colour. However when the box just has it's outline then all the items on the layer also only show their outlines. Useful if you want to move something in relation to a sprite on a higher layer. To change the outline colour you just need to double click on the Box.
And that's it for today's lesson. David also recommended to read "Animation With Scripting For Adobe Flash Professional CS5 Studio Techniques". Try and say that after a shot or two. It gives you great tips for Flash animation but remeber that we're on a games design course, so if your money is tight or you not to interested in animation you might want to think about it.
Oh and if you are looking for it check out Amazon here. However when I was on there last they were sold out of first hand ones.

Currently Listening to Fall Out Boy, Disloyal Order of Water Buffaloes

No comments: