Animation

And now, the bit you have all been waiting for! Adding animation to your Flash movies is at once a marvellously fun and incredibly tricky affair. If you are feeling a little unsure of your Flash skills so far, I would recommend you go back a little and read through the parts you need to brush up on before you continue.

The key to animation is the SWFDisplayItem object returned by the add() function of your movie object. SWFDisplayItem objects have a variety of functions that allow you to move, rotate, scale, and skew your objects easily. This next example (save it as ming4.php and amend the HTML again) demonstrates how animation works, by modifying our previous font script:

<?php
    $font = new SWFFont("Impact.fdb");
    $text = new SWFText();
    $text->setFont($font);
    $text->moveTo(300, 500);
    $text->setColor(0, 0xff, 0);
    $text->setHeight(200);
    $text->addString("Text is surprisingly easy");

    $movie = new SWFMovie();
    $movie->setDimension(6400, 4800);

    $displayitem = $movie->add($text);

    for($i = 0; $i < 100; ++$i) {
        $displayitem->rotate(-1);
        $displayitem->scale(1.01, 1.01);
        $movie->nextFrame();
    }

    header('Content-type: application/x-shockwave-flash');
    $movie->output();
?>

You should recognise nearly all of that from the previous coverage of fonts. Notice that the $movie->add($text) line has now changed so that the return value is captured and stored in $displayitem.

The entirely new code block follows immediately afterwards - we run through a loop 100 times, each time calling rotate(), scale(), and nextFrame(). I will cover rotate() and scale() in a moment, but first I want to explain nextFrame(). You use nextFrame() each time you want to move forward to the next frame of your Flash animation. Animation works by defining the initial state of the movie, advancing the frame, then specifying changes from the previous frame.

The rotate() function takes a single parameter, which is the floating-point value of the amount to rotate your SWFDisplayItem object from it is current rotation. In our example, I have used -1, which means it adds -1 of a degree of rotation with each frame, which, because of the way Flash rotation works, means that the text rotates in a clockwise manner.

The scale() function takes two parameters - the amount to scale the object's width, and the amount to scale its height. Again, this is based upon its last state, which means that the scaling is compounded and therefore by 0.01 to the size of our text over 100 frames we are almost tripling the size of the object.

So, the entire contents of the for loop translates to "rotate slightly, scale slightly, next frame" one hundred times. See - animation is actually quite simple! Granted, you will find things get harder when you have various different timings going on, but you have a good grounding now at least.

Copyright ©2015 Paul Hudson. Follow me: @twostraws.