Don't be a wimp; learn to Gimp!

Creating Flash Animations on Linux - part 8

Date/Time Permalink: 05/25/07 01:54:33 am
Category: Flash

I keep getting stronger with Flash the longer I play with it. In fact, it's surprising how fast I'm making progress in it. Actionscript is starting to feel just as comfortable as Javascript or C. Except that with SWFTools, adding in graphics elements is a snap, whereas I was playing with C for *years* before I got a graphical application going in GTK or SDL.

Today: a dice roller. Just click the "roll" button and get a random dice total every time!

Well, let's see the code:

.flash bbox=300x300

# BUILD objects

  .font myfont "/usr/X11R6/lib/X11/fonts/TTF/verdana.ttf"
  .box bg width=300 height=300 color=white fill=white
  .png die_one "../icon_image/die_one.png"
  .png die_two "../icon_image/die_two.png"
  .png die_three "../icon_image/die_three.png"
  .png die_four "../icon_image/die_four.png"
  .png die_five "../icon_image/die_five.png"
  .png die_six "../icon_image/die_six.png"

  .box button_idle width=100 height=40 color=blue fill=blue line=4
  .box button_hover width=100 height=40 color=cyan fill=blue line=4
  .box button_pressed width=100 height=40 color=cyan fill=cyan line=4
  .text button_text font=myfont text="roll" color=white

  .text message font=myfont text="You rolled: " color=black size=30%
  .edittext show_total font=myfont text="#" color=black
    width=35 height=35 readonly variable=die_total size=30%

  .sprite ROLL_A
    .frame 1
      .put die_one
    .frame 2
      .put die_two
    .frame 3
      .put die_three
    .frame 4
      .put die_four
    .frame 5
      .put die_five
    .frame 6
      .put die_six
  .end

  .sprite ROLL_B
    .frame 1
      .put die_one
    .frame 2
      .put die_two
    .frame 3
      .put die_three
    .frame 4
      .put die_four
    .frame 5
      .put die_five
    .frame 6
      .put die_six
  .end

  .button roll_em
    .show button_idle as=idle
    .show button_hover as=hover
    .show button_pressed as=pressed
    .on_press:
      roll_dice();
    .end
  .end

# PUT objects

  .put bg x=0 y=0
  .put ROLL_A x=10 y=10
  .put ROLL_B x=140 y=10
  .put roll_em x=100 y=250
  .put button_text x=100 y=290
  .put message x=10 y=150
  .put show_total x=60 y=150

# ACTION

  .action:
    _root.createEmptyMovieClip("Dice_A",6);
    _root.attachMovie("ROLL_A","Dice_A");
    ROLL_A.stop();
    _root.createEmptyMovieClip("Dice_B",6);
    _root.attachMovie("ROLL_B","Dice_B");
    ROLL_B.stop();

    function roll_dice()
      {
        die_a_value=random(6)+1;
        die_b_value=random(6)+1;
        ROLL_A.gotoAndstop(die_a_value);
        ROLL_B.gotoAndstop(die_b_value);
        die_total=die_a_value+die_b_value;
      }
  .end

.end

As you can see, building objects is the biggest part. I drew the dice in POVray, by the way. The dice are designated as 'A' and 'B'. They work by simply declaring the sprites as six frames each, one for each image. To get a specific dice total, tell actionscript to "dice_movie.gotoAndstop($NUMBER);" Now, we just pick random numbers for each die and tell actionscript to display that frame, then total the numbers together.

That total goes to a variable called "die_total", but where does it display? Way back at the third-from-top build section, I gave swfc an edittext object, made it read-only, and gave it a variable=die_total. That's how you make actionscript write data/strings to the screen.

I'm this close to adding a game section to my site. I haven't had this much fun since I was drawing ANSI art!

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

suddenly the moon