June 13, 2008

flashy acrostics - tutorial

Category: tech, proof of concept, multimedia, learning — rob @ 12:42 am

someone asked about flash projects for year 9s and i remembered this one - an animated acrostic poem (click the 'start' text).


Its pretty simple, but good for practicing layers and frames and tweens, and the kids seem to like it - so here's the instructions for doing it.

(This was originally done in Flash 5, and it works the same in Flash 8, so i expect it would be same in the later versions).

So, to start with - it needs staggered start and end points for each letter - (see the pic in step 4) .. so here's the process:

(1) set up as many layers as there are letters in your name -add label each layer
(in this case - 4 layers for FRED)
fredd.PNG

(2) on the bottom layer, add a key frame in frame 1, and use the Text tool to type in the first letter ("F') (choose a font of say size 24) .

(3) take the number of letters in your name, and multiply x 10. Fred has 4 letters, so the "magic number" is 40. Go out to the magic number (40 in this case), and add a key frame on the bottom layer.(So the 'F' starts on the stage at Frame 1; and ends at Frame 40 (or whatever your magic number is)

(4) on the second layer, add a keyframe into frame 10, type the second letter ("R" for Fred) , and offset the end point 10 frames on as well (see the pic) , so it is staggered in relation to the layer below.

staggered.PNG

(5) add the remaining letters into the other layers, and continue staggering the start and the end points 1o frames beyond the previous layer. (it doesn't look like the two top layers in the pic have staggered end points, but they do .. have just truncated the screen shot a little ) if you play it now, it will look like this (click the little "start" text at bottom)

so now to add in the rest of the word, and morph them (so 'F' morphs into 'Fruity' for example) :

(6) on the bottom layer, add another key frame 10 frames past the previous end point (now frame 50 for Fred). Edit the text so on this key frame so it has the full word (Fruity, not just F).

(7) Need to break the word into a shape, so its not ordinairy text. Select the text box (click the arrow tool first), then choose "Break-Apart" under the Modify menu, twice. (short cut : control-B twice).

(8) still on the bottom layer, break apart the single letter ('F') on the previous key frame.

(9) Now you can add a shape tween between these two keyframes, to morph the F into Fruity. Here's one method for this - with the "F' keyframe still selected (frame 40 in this case), and the properties window showing (select Window Properties if you need to), select "Shape" out of the "Tween" drop down

shapetween.PNG

(10) all being well there should be a green arrow like this : tween.PNG between the key frames .... if you see the dreaded dashed line then one or other of the keyframes probably wasn't broken apart fully (needs to be done twice to break a word right down to a shape).

(11) so .. .repeat all that (step 6 to 11) on the other layers ..

(12) now add an extra keyframe to each layer so they all end in the same spot - so the end of the movie should look something like this
pad.PNG

(13) from here, you could add images etc on other layers, to come in at appropriate times - an apple appears with the fruity layer etc, and motion tweens around, and maybe sounds, etc - or change the timing, if you want a delay between each letter etc

enjoy

2 Comments »

  1. Thank you so much for this Rob; ‘my girls’ (and myself) will have enormous fun with it. For them, it will be work that doesn’t seem like work.

    Thanks for the generosity.

    Diane

    Comment by Dianne — June 16, 2008 @ 12:10 am

  2. Thanks. I will look forward to using this with my class.
    Carys

    Comment by Carys Freeman — June 16, 2008 @ 1:00 pm

RSS feed for comments on this post. | TrackBack URI

Leave a comment

XHTML ( You can use these tags):
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .