Me so geeky! Me hack you long time!

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

suddenly the moon