moock>> randomation slide

/4/ randomated title text

demo: asdgNav-lectureDemo.fla
- scripts: general layer, frame 10. modify element 1 of titles array.
effect is reusable...can be applied to any string of characters

code walkthrough: spawnTitle()

spawnTitle() does the following:
- creates a series of character clips from a string
- places the clips randomly
- gives the clips random animation settings
each clip subsequently animates itself by calling letterFollow() from an enterFrame event.
spawnTitle()'s parameters specify the behaviour of the randomation.
the function's first task is to create a container clip to hold the effect:
_root.attachMovie("emptyClip", "titleEffect" + depth, depth);
- the container clip makes the effect easy to remove, fade, and stack with other effects.
- it also facilitates processing the letters as a group (like shots in asteroids).
we'll be referring to the container clip often, so we store a convenient reference to it in a variable:
var thisEffect = _root["titleEffect" + depth];
then we add any global effect properties to the effect-container clip:
thisEffect.yDrift = yDrift;
- yDrift (applies to all characters) produces a vertical floating effect
next, we break the supplied string into letter clips
for every character in the string, we attach a corresponding single-character clip (show character clip in library):
for (var i = 0; i < theString.length; i++) { thisEffect.attachMovie(fontName, "titleChar" + i, i);
after creating each character clip, we store a convenient reference it:
var thisLetter = thisEffect["titleChar" + i];
then we set the letter clip's dynamic text field to display the appropriate letter:
thisLetter.charOutput = theString.charAt(i);
next we randomly place the letter clip in an initial position within the region:

// Place this character clip randomly on the x axis thisLetter._x = myRandom(xStartLeft, xStartRight); // Place this character clip randomly on the y axis. thisLetter._y = myRandom(yStartTop, yStartBottom);
then we programmatically set each letter's destination, based on getWordWidth() return values.
- thisLetter.destinationX is set to the effect's destinationX + wordWidth
- thisLetter.destinationY is set to the effect's destinationY
for example, if destinationX is 300, then the letters are placed as follows:
```
a          (a goes at 300 + 0)
ac         (c goes at 300 + 8)
act        (t goes at 300 + 8 + 8)
acti       (i goes at 300 + 8 + 8 + 5)
actio      (o goes at 300 + 8 + 8 + 5 + 4)
```
getWordWidth() is a custom function that returns the width of a word by totalling the widths of each of its letters. (we won't look at getWordWidth() in detail--check the related technote).
demo: asdgNav-lectureDemo.fla
- scripts: spawnTitle. add + myRandom (0, 10) to this line:
  thisLetter.destinationY = destinationY;.
finally, we assign each letter its movement properties.
- random speed between minSpeed and maxSpeed (pixels/second):
  thisLetter.speed = myRandom(minSpeed, maxSpeed);
implementation note: make sure to embed font in character clip so text can fade and rotate
the series of character clips is now ready to be animated via letterFollow()

code overview: letterFollow()

letterFollow() moves each letter towards its destination
- fade the clip in based on a stipulated fade duration (400ms for title1, 3000ms for title2)
- determine distance to move, based on:
  - the time elapsed since the last move
  - the clip's speed
- if the distance to move is shorter than the distance to the clip's destination, just move the clip
- if the distance to move is greater than the distance to the clip's destination:
  - put the clip at its destination
  - play the clip's arrival sequence
  - remove enterFrame process clip that's been calling letterFollow()
animation is time-based...plays at same speed on all systems at any frame rate (see programmatic motion lecture)
codebase called "simpleFollow.fla", available at the code depot