If you don't agree with me now, just wait five years.

<< Previous Page :: Next Page >>

Flash Demo #9: Keyboard Control and Ball Physics

Date/Time Permalink: 04/08/08 08:38:07 am
Category: Flash

Ah, it's about time I picked up Flash again! This demo is the result of 12 grueling hours of scouring every scrap of documentation I could find. I was very determined and pulled an all-nighter, using every method from searching Clusty to groveling through the source code of swfc. But I won: I have finally figured out how to do keyboard control in swfc! Now I will make the job easier for the next seeker of knowledge, so: here's how to control a sprite with the keyboard in SWFTools swfc Flash on Linux. First, the amazingly short code:

.flash bbox=400x400 fps=50

.png marble "../icon_image/marble.png"
.put marble x=200 y=200 pin=center
.sprite Marble
  .frame 1 .put marble pin=center
.end

  .action:

    var Xspeed;
    var Yspeed;
    var velocity;
    var inertia;
    var boundary;
    Marble.onLoad=function()
    {
      velocity=0.45;
      Xspeed=0;
      Yspeed=0;
      inertia=0.98;
      boundary=176;
    };
    Marble.onEnterFrame=function()
    {
      if (Key.isDown(Key.RIGHT))
      {
        Xspeed+=velocity;
      }
      if (Key.isDown(Key.LEFT))
      {
        Xspeed-=velocity;
      }
      if (Key.isDown(Key.UP))
      {
        Yspeed-=velocity;
      }
      if (Key.isDown(Key.DOWN))
      {
        Yspeed+=velocity;
      }

      Xspeed*=inertia;
      Yspeed*=inertia;
      _x+=Xspeed;
      _y+=Yspeed;

      if ((_x>=boundary) || (_x< =(-boundary)))
      {
        Xspeed=(-Xspeed);
        _x+=Xspeed;
      }
      if ((_y>=boundary) || (_y< =(-boundary)))
      {
        Yspeed=(-Yspeed);
        _y+=Yspeed;
      }

    };
  .end
.end

Step-by-step:

  • The image can be anything, even a shape. I make the image into a sprite with one frame and name it "Marble".
  • The actionscript event handlers are attributes of the sprite object itself. Do it exactly this way: "object.onEnterFrame = function()" with curly braces after it and a semi-colon after the closing curly braces! No other method will compile, and the compiler is almost sadistically unhelpful in explaining what's wrong.
  • To set initial attributes such as speed as well as constants such as boundary, declare them first as globals (the lines starting with "var"), then initiate them with "object.onLoad=function()" exactly as you do with the part controlling the keyboard interface.
  • Once you have the sprite ("Marble" in this example) hooked up to the function, using the built-in variables "_x" and "_y" will control the X and Y location of the sprite. Change that value to move the sprite. It's as simple as that!
  • The rest is a breeze. From here, you can follow any actionscript tutorial on the web for controlling how the keyboard affects the motion of the sprite.

As for the physics, I owe a big "thank you" to Emanuele Feronato's excellent site, which hosts all kinds of Flash game tutorials. The link I'm giving goes to the first of a multi-part tutorial on keyboard control and moving a ball with realistic motion. After studying this and adapting it to swfc's methods, I came up with the physics scheme in this demo. The variables work like this:

  • "Xspeed" and "Yspeed" get added to the "_x" and "_y" variables. They change depending on keyboard input, and can be negative or positive. Their values change by adding or subtracting "velocity".
  • "velocity" is treated as a constant. The more you press a key in a given direction, the more times velocity is added to the ball's speed. This is what makes the ball speed up instead of proceeding at a constant rate. To make the ball go faster, raise the value of "velocity".
  • "inertia" is also a constant, and gets factored into the equation every time. By multiplying the ball's speed times a decimal, you ensure that there is a constant drag on the motion, so when you let go of the keys the ball eventually comes to a stop. For creating greater inertia (so the ball slows down sooner), lower the value of "inertia".
  • "boundary", another constant, is how you get it to bounce off the edges of the frame. Even though swfc lets you initialize the stage to (400,400) and place the sprite at (200,200), as far as actionscript is concerned the stage now has the co-ordinates from (-200,-200) to (200,200) with the ball at (0,0). "boundary", then, is the highest value from the center minus the radius of the object you're bouncing. I experimented to find the value that gives the correct bounce affect - your methods may vary depending on what type of object you're using.
  • The part that checks for boundary-breeching simply inverts the sign (positive, negative) of Xspeed and Yspeed and adds them again.
  • Note that actionscript reads the arrow keys independently, so you can make the ball go at any diagonal by pressing two keys at the same time. Furthermore, the velocity is handled separately for each axis.

Once you've mastered this, the sky's the limit for creating any kind of game. You can add a gravity constant which subtracts from the Y axis for a platform game, or add a thrust constant to the X axis for making a side-scrolling flying object. Using balls with the scheme I set up in this demo would be good for making top-down games such as billiards, golf, air hockey, shuffleboard, or as an Enigma clone.

A Call to Action!: In the open source world, we now have the Gnash project for displaying Flash and the SWFTools kit for creating Flash. As far as I can see, open source effectively owns Flash with Adobe being a commercial substitute. But there are just three sites which are resources for learning about swfc: SWFTools itself, this site which is hosted in France, and... my site right here!

That needs to change. I get searches coming in every week with people looking for information about creating Flash on Linux. The documentation is effectively missing, the other two sites don't even appear to be updating, and the genre of Flash tools on Linux is littered with abandoned projects stuck forever at alpha versions such as f4l. The mailing list at SWFTools is a tiny, struggling limbo where half the questions don't even get answered.

Just look at the thriving online community there is for Adobe's tools - thousands of sites documenting the Adobe creative suite, social sites sharing their tricks and tips, and for open source Flash development - almost nothing! SWFTools could at least use a Wiki.

So, if anybody out there has done anything with swfc, please blog it or post it. You're encouraged to leave a link to your own tutorial or resource or Flash game created with swfc here in the comments, and I'll put together a link list from that. No tutorial or trick is too simple to share; no game is too casual, no bit of help is too minor.

Flash on Linux is an amazing opportunity! Just look at how the simplest casual Flash game gets links galore from social news sites - and Flash developers are in demand and make good money. Just today, the Flash category on Rent-a-Coder has 71 open projects with maximum bids ranging from the mid-hundreds to several thousand dollars; new jobs appear every day. Flash artists also do well at iStockPhoto - even for dumb little abstract banners. Now imagine making the same money that Adobe Flash artists do - but you get all of your tools for free! Flash gaming is one area where Linux actually has a shot at enjoying equal footing - for a change! What I'm saying here, folks, is that there's gold in them thar hills, and I can't carry it all down myself.

an unassuming banner

Update Wah hah! Here's a new site about swfc, just like that!

Aaaaanybody else? Go, Flash-on-Linux! Let a thousand flowers bloom!

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

My Next Flash Project Idea - a Flash Roller-Coaster Ride

Date/Time Permalink: 07/04/07 11:59:35 pm
Category: Flash

This time, don't get your hopes up. I'm just blogging this mostly for me, to get the idea down, and publishing it maybe as a way to goad myself into attempting it.

Imagine a Flash animation that shows the point of view of riding a roller-coaster. Not only is this idea to do that, but to write a program that generates a random coaster! I like to generate 3D landscapes when I can, so that way it surprises me, too.

This isn't so far-fetched as one might think. I could start with POVray: design a series of track sections, in simple unit blocks. Write a script to lay these blocks out in a track. Define ground and sky. Define a series of camera positions around the track. Run it. Save the images in a series. Have another script compile the stills into an animation.

I've done the two halves of this before in other projects. The POVray part - designing a series of blocks which a script then assembles - is how I generated the buildings in wallpapers like this one and this one. More to the method of laying track, it's how I got the walkways and stairs in this one and this one. Before anybody asks, I tossed those scripts out when I moved computers, thinking I'd re-do them better. Dumb, eh?

Anywhere in my gallery where you see apparently endless complexity stretching out to the horizon, that was usually a script. It's awesome because I can just define different camera locations and re-render them, and run around exploring these little worlds my program created.

Anyway, defining a series of renderings and compiling them into a Flash animation is how I did the logo in Flash tutorial four. There you have it: put both concepts together, and you'd have a program that could surprise you with a different roller-coaster ride every time.

Does this sound cool as snow, or what? I hope I get the time to do it.

UPDATE: There's a difference between a pipe dream and actually working out how to do all the pieces. There are problems in implementing this which I have not yet learned how to solve. Don't hold your breath waiting for me to do this.

Anybody out there who is more technically skilled than I is MORE than welcome to do it themselves and leave a link to their implementation in the comments!

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

New Flash Game - Distro Slot

Date/Time Permalink: 07/03/07 07:48:27 pm
Category: Flash

Well, that was quite a bit of work...

After struggling with some new tasks in Actionscript, I have produced a fairly decent Flash slot machine game.

screenshot of Distro Slot Flash game

Yes, I used the logos from 7 well-known Linux distributions as the slot machine symbols. I hope this doesn't come back on me as one of those "seemed like a good idea at the time" type moments.

There's all kinds of hilarious jokes you could make with this idea. What if you set one of these up in real life, and it would pay out in install CDs? Or add a Windows symbol that takes away your credits and breaks the machine...

I included the source code tarball, GPL2ed, for anybody who's interested. This time the source code has two varieties: one plain and one with generous documentation included in comments, for those, like I, who are learning.

By the way, two milestones I've conquered here are playing sounds from Flash, and setting a timer. The timer was necessary to get the reels to animate for a while, then stop. Searching for tutorials on getting a timed event in Flash was frustrating; I finally found this site which explains it well. Between that and my example, hopefully the next person trying to figure out how to set a delayed timer event in Flash will have an easier go.

As for the sound, I'm probably not doing it right. The two sounds play too fast and choppy with too much of a delay. I don't know if it's what I'm doing, how my machine set-up is handling it, maybe the Flash plug-in on Firefox has this specific problem, or what? Any advice is welcome.

PS On the math side, it is disgustingly generous. I think the house percentage is something like -50%. I guess it's been a while since I figured odds...

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

My first Flash game

Date/Time Permalink: 06/01/07 10:16:45 am
Category: Flash

While I've been doing all this other rattling around, I also managed to squeak out something that barely resembles a game.

It's called "Code Crackr" and will remind you a little of Mastermind, except I'm bent enough to give it a countdown and make it look like it's attached to a bomb...

game shot

And at the bottom of that page is a source code tarball you can download and build yourself! Saves you the trouble of copy-pasting it out of the blog. Since I'm approaching the time when I can do whole Flash programs, sticking the whole source into a blog post will become less and less practical.

It's pretty basic. Don't look for advanced features 'cuz they ain't there yet! I'm still figuring out how to do stuff.

Oh, yeah, I included the GNU GPL v2 with it... First time I've done that, but once you go handing out tarballs...

UPDATE: 7/3/07 NOW I HAVE ACTUALLY *PUT* THE SOURCE TARBALL ON THE SERVER. So that when you click "Get the source code and image files" you actually, like, get them, y'know???

I can't believe I was that out of it! Watch me on that, will you folks?

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

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

Creating Flash Animations on Linux - part 7

Date/Time Permalink: 05/13/07 01:41:26 am
Category: Flash

Matrix Flash animation in action

Pretty slack today - no interaction with this, just wanted to do my own Matrix-style logo. Be patient; it takes a while to load.

But it was quick and simple to do. Just use the xscreensaver Matrix plugin to generate a few screens of scrolling green random text, paste it into a long Gimp bitmap, have Gimp set the transparency to 50%, use Filter->Map->Make_Seamless (which didn't exactly make it smooth!), use Layers->Colors->Hue_Saturation to make the green more saturated so it stands out from the black background.

In the Flash script, you load this up so that the bottom edge of the bitmap is touching the bottom edge of the frame, then use tweening to have it scroll the bitmap down. The rest is just scripted text effects.

.flash bbox=550x100 fps=50

  .png matrix "../icon_image/matrix2.png"
  .box matrix_box width=651 height=980 fill=matrix line=0
  .font myfont "/usr/X11R6/lib/X11/fonts/TTF/virgo.ttf"
  .gradient textshade:
    0% gray
    50% white
    100% black
  .end
  .textshape logo font=myfont text="Penguin Pete\'s"
  .filled fill_logo outline=logo fill=textshade line=1
  .put fill_logo pin=center x=275 y=50 scale=75%

  .frame 1
    .put matrix_box x=0 y=-880
  .frame 100
    .change matrix_box x=0 y=0

.end

Nothing at all to it! Of course, I could make this look a lot better - this was slapped together in ten minutes for your educational value! Also as a test of scrolling bitmaps - I might try the same trick if I do my idea for a slot machine!

As always, compiled with swfc from the nifty SWFTools collection.

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

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

Everybody Struggles With Technology

Date/Time Permalink: 05/10/07 02:41:21 am
Category: Flash

This is going to be some more about my quest to learn Flash (which I'll talk more about), but I'm not including it in the series itself because I don't have any interesting new tricks to show today.

And that's why it's important to stop and point one thing out: To those of you who look at coders like we have some kind of god-like connection with the machines - guess what? We're mortal too! All of us were once at a point where if anybody asked us if we knew anything about computers, we'd say "I know how to turn one on." By the way, I've forgotten how to turn my computer on. It's Slackware, so I never have to turn it off.

Today, I tried extending from swfc's script code to pure Actionscript, and stumbled around a lot. For one thing, Googling for Flash and actionscript tutorials produces a whole lot of instruction on how to work in the Adobe Flash IDE so it's all "open this menu, use this key combo" stuff that won't work on raw code in Emacs. The Adobe Flash IDE is that which I don't have and wouldn't use anyway. I also wouldn't use a proprietary freeware ap and run it on Wine. Because it's proprietary and (above games and movie players and toys) tools must be (freedom) free or they aren't worth spit. I did find this good site, and some of the tutorials made some sense, but really I didn't make much progress.

I ended up back at these swfc examples which do use some actionscript, and did my "learn by subtraction" routine. The way this works, you copy and paste the whole code, compile it and run. Then go back and select a line or two at a time and delete it or comment it out, and compile/run it again. Whether by compiler error message or by observing what the program does, you learn what each command does. I deconstructed the Eyes example until it was just dots following the mouse. I tried getting print to show up from actionscript itself, instead of from swfc script. No luck.

This may seem completely pointless to blog it, but if I only blog my successes, then I make it look too easy. And that's not fair to others out there, who are also struggling to master technology and break free of the tyranny of proprietary software. This is how people who aren't learned with technology get frustrated and discouraged, because all they find are confident geeks with years of experience who appear to be born with it. If you never catch a geek in a state of Reading That Fabled Manual (or in my case, still searching for the right manual), you might think there was something wrong with you.

There are also people out there who do Flash for a living, have done it for years, and if they come across this post, they just might have a haughty laugh at my expense: here am I, a clueless N00B, at least as far as Flash is concerned. But, see, there's no reason for me to be defensive about it. I'll get there. This is the bridge.

Today's lesson in learning Flash is that I'm not blaming the interface, and I'm not whining in a bulletin board going "Somebody help meeee!", and I'm not throwing a tizzy at people who are better at it than me for being "elitist", and I'm not giving up and saying it's too hard. I just didn't make progress today. Tomorrow, I will get up, snag another cup of coffee, polish off my paid work for the day, and then pop open that editor and wrestle with it some more. Maybe I will have a new hack to post then, or maybe next week. It does not matter how slowly you go, so long as you do not stop.

That's how I learned Basic, C, C++, Assembly, DOS, Bash, awk, sed, Python, Lisp, Tcl/tk, PHP, HTML, XHTML, CSS, POVray, MySQL, and Javascript, and that is how I shall continue to learn Flash tomorrow.

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

Creating Flash Animations on Linux - part 5

Date/Time Permalink: 05/08/07 06:12:24 pm
Category: Flash

The Mad Flasher has struck again. View today's abomination in the eyes of the Web.

It's interactive! The switches switch! The lights light! The snozzberries taste like snozzberries!

This is my first interactive Flash animation... Mostly inspired by this example. In fact, it's the exact same method, done for three switches and bulbs.

Le code listing:

.flash bbox=300x300 fps=50

  .jpeg background "../icon_image/wood_bg.jpg"
  .jpeg off_switch_idle "../icon_image/switch_off_idle.jpg"
  .jpeg off_switch "../icon_image/switch_off.jpg"
  .jpeg on_switch "../icon_image/switch_on.jpg"
  .png bulb_off_1 "../icon_image/bulb_off.png"
  .png bulb_off_2 "../icon_image/bulb_off.png"
  .png bulb_off_3 "../icon_image/bulb_off.png"
  .png bulb_on "../icon_image/bulb_on.png"
  .box b1 width=60 height=100 color=black fill=off_switch_idle
  .box b2 width=60 height=100 color=black fill=off_switch
  .box press1 width=60 height=100 color=red fill=on_switch line=4
  .box press2 width=60 height=100 color=red fill=on_switch line=4
  .box press3 width=60 height=100 color=red fill=on_switch line=4

  .button button1
    .show b1 as=idle
    .show b2 as=hover
    .show bulb_on x=0 y=-125 as=pressed
  .end

  .button button2
    .show b1 as=idle
    .show b2 as=hover
    .show bulb_on x=0 y=-125 as=pressed
  .end

  .button button3
    .show b1 as=idle
    .show b2 as=hover
    .show bulb_on x=0 y=-125 as=pressed
  .end

  .put background x=0 y=0
  .put bulb_off_1 x=20 y=30
  .put bulb_off_2 x=120 y=30
  .put bulb_off_3 x=220 y=30
  .put press1 x=20 y=155
  .put press2 x=120 y=155
  .put press3 x=220 y=155
  .put button1 x=20 y=155
  .put button2 x=120 y=155
  .put button3 x=220 y=155

.end

This is all swfc-compiled code courtesy of SWFTools. No hugger-mugger with POVray or Bash today. I just pre-drew some simple images in Gimp, and you'll notice I didn't try to make them look special. Proof of concept. With a sledgehammer.

I've been meaning to mention along the way, swfc uses its own invented mark-up language. It, too, is still in active development, so documentation is sparse. If you get the source swfc.c, there is a static struct beginning at line 3266 which shows every possible command and parameter in this language. No kidding, in the forums they actually say, "Just read the source for now." However, it can also handle actual Macromedia Actionscript, which would be placed between the .action .end tags.

I can't wait to see what I'll code tomorrow!

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

<< Previous Page :: Next Page >>
suddenly the moon