Meet my ClueBat. I call it 'HeadOn', because I apply it directly to the forehead.

Creating Flash Animations on Linux - part 6

Date/Time Permalink: 05/12/07 04:08:58 am
Category: Flash

Told yah I'd get back to this! It took some picking around, but I have finally grokked controlling Flash elements with Actionscript, as demonstrated here.

Partly, I owe this to checking out a library book, "Foundation Flash 5" by 'friendsoft', which did give me some enlightenment into how Flash movies are done, even with the obvious handicap.

The "obvious handicap" is that, like nearly every Flash resource guide out there, it's written exclusively with the Adobe Flash IDE in mind. That just comes with the territory with proprietary technology. Hopefully, now that Flash development on the Linux desktop is showing such progress in the last few years, we'll start seeing more FOSS-focused books in the future. At this rate, I'll be ready to write one myself!

[Rant Intermission] And God, how I hate the "IDE-only" mentality. IDE development tools are for after you have mastered the language, even then only if you're building graphical, and even then just to save time. Flash Actionscript is a LANGUAGE, so when you're teaching it, you need to teach it as a LANGUAGE. Not "click here, select that option, now right click for the dialog, select this..."; that doesn't teach anybody a damn thing but how to use that version of that program! [End Rant Intermission]

Anyway, the book helps primarily because they accidentally let a few snippets of code show in screenshot windows every now and then. What helped even more is this code example. That will be obvious when you see how mine's done, because it's really a simplified version of the example I link to.

.flash bbox=300x300

  .font myfont "/usr/X11R6/lib/X11/fonts/TTF/verdana.ttf"
  .png bg "../icon_image/background_leaves.png"
  .png mybee "../icon_image/Bee.png"

  .box button_idle width=50 height=25 color=black fill=white line=1
  .box button_hover width=50 height=25 color=blue fill=gray line=1
  .box button_pressed width=50 height=25 color=blue fill=black line=1
  .text play_text font=myfont text="play" color=red size=25%
  .text stop_text font=myfont text="stop" color=red size=25%

  .sprite bee
    .put mybee
  .end

  .sprite bee_fly
    .put bee pin=center 150 150
    .frame 50
      .change bee pin=center 290 150
    .frame 150
      .change bee pin=center 10 150
    .frame 199
      .change bee pin=center 150 150
  .end

  .button button_play
      .show button_idle as=idle
      .show button_idle as=shape
      .show button_idle as=area
      .show button_hover as=hover
      .show button_pressed as=pressed
      .on_press:
        Play_Bee();
      .end
  .end

  .button button_stop
      .show button_idle as=idle
      .show button_idle as=shape
      .show button_idle as=area
      .show button_hover as=hover
      .show button_pressed as=pressed
      .on_press:
        Stop_Bee();
      .end
  .end

  .put bg
  .put button_play x=10 y=250
  .put play_text 15 270
  .put button_stop x=100 y=250
  .put stop_text 105 270

  .action:
    _root.createEmptyMovieClip("movie",400);
    _root.attachMovie("bee_fly","movie",400);
    movie.stop();

    function Play_Bee()
      {
        movie.play();
      }
    function Stop_Bee()
      {
        movie.stop();
      }
  .end

.end

A little explanation:

  • The first block readies one font and two images. Modify the file names to suit your own needs.
  • The second block readies the button controls. You've seen these before.
  • The third block is necessary for a controlled animation. It just makes a sprite. It's a static image that will move back and forth, nothing to get excited about.
  • The fourth block is the sprite for the animation. You define this in frames just like earlier examples, and the animation is basically considered "embedded"... sort of a subroutine (Bleah! I haven't typed that word in a while!).
  • Blocks five and six create the buttons like you've seen before, but with a new feature: the ".on_press" commands define actionscript functions to be called. Sort of like Javascript, where you can define functions in the head and call them from HTML buttons in the body.
  • The seventh block just pastes everything in. Note that we place the background first. In swfc's sc, the layers are created automatically in the order you drop them. Placing the background last would cover up everything else!
  • And now at the bottom, the magic begins. The two lines starting with "_root" are necessary for every actionscript animation you will write. The second one calls my "bee_fly" sprite that I declared earlier. Our first executed command is "movie.stop();", a method inherited by every movie class. Then the two buttons will be calling our "Play_Bee()/Stop_Bee() functions... whose jobs are obvious.

Note how the bee animation framing is set up. On start, the bee is smack in the middle. I want him to cross the width of the window in 100 frames. So I tell swfc to generate "tweens" in 50 frames to end with the bee touching the right edge (x=290) of our 300-pixel-wide window. Then tween all the way to frame 150 to tag the left edge. Then tween again to 50 more frames less one to end up back at the middle.

Why do I subtract 1 from the final frame? Because it will next end up at "frame zero". If the third frame was 200 instead of 199, the bee would give a more pronounced jerk as it got back to the top of its animation loop.

As I make more progress, I'll start documenting things more and more thoroughly, because I'm heading into very uncharted territory pretty soon. He who first breaks ground must draw the map.

Follow me on Twitter for an update every time this blog gets a post.
Stumble it Reddit this share on Facebook

suddenly the moon