Flash Lesson 2: Animation using motion tween
If you have any version of the Flash Player from 5 upwards installed on your browser, then the yellow and blue grid above should show a blue square and a red triangle moving around and changing their opacity.
The animation loops once and then stops, and the frame rate is 15 frames per second. According to the book, animated shapes with changes in the alpha channel (transparency) while moving make a lot of work for the Flash player.
I am working though Mindy McAdams’ book Flash Journalism published by the Focal Press. Lesson 1 was mainly getting used to the drawing tools within Flash; and I found the way that overlapping objects cut at instersection points quite different to most vector drawing software. The answer is to put things on layers – and you have to do that anyway to animate them.
Having worked step by step through Lesson 2 in the book, I have produced this very simple non-interactive animation. The instructions flow quite well, and I had no problems following the Flash MX instructions with the Flash MX 2004 boxes in Flash 8. The only very minor change is that the Actions panel is back under the Window menu item in Flash 8, apparently the panel was moved a level down in the earlier version.
A major part of this lesson was converting a shape into a symbol and then making instances of the symbol. I found that the ‘order’ of the symbol on the stage in a given frame depended on the order in which you dragged the instances onto the stage – as you can see below, the semi-transparent rectangle is ‘above’ the red triangle to the left but ‘below’ the red triangle to the right. In vector drawing software (where the coordinates used to construct the shape are stored rather than the colour of the pixels making the shape) shapes can overlap and most software has tools for changing which shape is ‘above’ another – the drawing tools in MS Word and PowerPoint are a good example. I can’t find how to do that in Flash – perhaps you just drag the symbols onto the stage in the right order!
Having followed the instructions with my own ad-libs, I ended up with four layers and a functioning animation with four key frames on the timeline for each layer. I can see that a sophisticated animation with masked areas and a lot of shapes moving is going to need plenty of layers.
I have also covered the material in the short but vital Lesson 3; exporting the Flash movie. I have left the .SWF file above ‘unprotected’ if you wish to load it back into Flash to see my errors.
I did find drawing the background grid to be hard work – I drew it as separate blue lines each 25 pixels and then I selected and grouped these. Finally, I converted the grid to a symbol so I can have it in the library. I’m sure there is a more efficient way of creating a grid – bear in mind that I drew the verticals first, so of course, when drawing the horizontals, those lines were chopped into small sections as a result of the instersection logic.
Even at this early stage, I can now produce much slicker versions of the Areas and Pythagoras’ flash animations that I made by exporting from Open Office.
Onwards to Lesson 4 and buttons!
Technorati Tags: elearning, maths teaching, teaching