AS3 05 - Interactivity with stage. My First spaceship

We have learned how to trace to the output tab, how to listen to keyboard strokes and how to create symbols and create instances in the stage in AS3. In this tutorial we will look into interactivity in the stage. It’s simply a combination of previous tutorials so just take a look see at them if you find this one rather err.. confusing.

Create a new Flash File. Draw a simple clown ship shape on stage. Mine look like this…

Not much of a clown ship but it will do. Convert it to symbol with ‘Export for ActionScript’ and put the name ‘myShip’ for the clown… I mean ship. Now once converted, it should appear in the library like this…

Now delete the original shape on stage. Yes… delete it! Select it and delete. Don’t worry… it has been immortalized in the form of a symbol in the library… well until you delete the symbol.. hmmm. Ok now the stage is empty. We will use AS3 to fill it with the clown ship.

Right click and select ‘Action’ on Frame1 to bring up the ActionScript Editor. (Actually this is not the best way to do this… I will explain in future like few years down the road. but it should be ok for now). Create an instance of the clown ship on stage.

var clownShip:myShip = new myShip; //yes… the name clownship is catching on!!!
addChild(clownShip);

‘//’ Simply puts the characters after ‘//’ as comment until the end of line. It’s good for forgetful programmers to comment so that they may refer to their codes easily and equally easy to be stolen and reuse…

You can test the movie now by pressing ‘CTRL+ENTER’. Your clownship appears to be on top left corner of the stage. Position it near bottom middle…

clownShip.x = stage.stageWidth/2;
clownShip.y = stage.stageHeight - 40;

Now this will cause a little overhead to the processing power. Why? Because we could have set the x (horizontal) and y (vertical) position of the clownShip before we add it into the stage (addChild). Currently we add it to stage (default at 0,0) then move it to half of the stage’s width and 40 pixel from the bottom of the stage.. meaning the flash player needs to first position it at 0,0 and then reposition it at stageWidth/2, stage.stageHeight-40…. 2 steps of rendering the clown shape on stage.

We could go around this by re-arranging the codes as below

var clownShip:myShip = new myShip;
clownShip.x = stage.stageWidth/2;
clownShip.y = stage.stageHeight - 40;

addChild(clownShip);

This way, the flash player only needs to render the clownShip once at stageWidth/2, stage.stageHeight-40.

Big deal, we got tons of processing power… that’s what we all thought. But it is these small things that eat up the processing power itty bitty by itty bitty and if you loop the above statement by 1000 times, those will be an additional 1000 steps the flash player needs to take. Now, since the force is strong with this clown…, once we got the clownShip where we wanted it to start with, we need to add an event listener. You do remember how to do that don’t you? In the AS editor, add in these lines of wisdom codes.

stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKey);

The listener will call the function listenKey each time a key is pressed. Now lets put in the listenKey function…

function listenKey(event:KeyboardEvent)
{
if (event.keyCode == 32) {
trace('I have pressed the spacebar');
}
}

This function receives keyboard event and if you look carefully the keyboard keys are referred to by numbers. It’s ok, you just need to memorize all keys and their corresponding key code (keyCode). For example, the ‘spacebar’ holds the keyCode of 32, the ‘up arrow’ holds 38, down 40, left 37 and right 39. Now if you got a key which you would like to find out its key code, you can add this line to the code…

trace(event.keyCode);

…in the listenKey function. So basically the function would look like this…

function listenKey(event:KeyboardEvent)
{
trace(event.keyCode);
if
(event.keyCode == 32) {
trace('I have pressed the spacebar');
}
}

Try to test run the movie, remember to check the ‘Disable Keyboard Shortcut’ from the test movie window and press any key to see their corresponding key codes being displayed in the output (debug) window in the flash app. Hmm…. There is another thing called charCode instead of keyCode. Try reading about it in the help section. Now that was redundant…

By now you should be able to know whichever key codes for any keys you wish to know to really want to know, you know. Now lets move on to moving the clown left and right via the keyboard. First you detect the left and right arrow keys…

function listenKey(event:KeyboardEvent)
{
if (event.keyCode == 32) {
}
if (event.keyCode == 37) { //Left arrow
}
if (event.keyCode ==
39) { //Right arrow
}
}

…then you add or minus from the current clown’s horizontal position… here…

function listenKey(event:KeyboardEvent)
{
// trace(event.keyCode);
if (event.keyCode == 32) {
// trace('I have pressed the spacebar');
}
if (event.keyCode == 37) { //Left arrow
clownShip.x = clownShip.x
- 3
}
if (event.keyCode == 39) { //Right arrow
clownShip.x =
clownShip.x + 3
}
}

What happened here is I minus the x position of the clownShip by 3 pixels whenever I press the left key and add 3 pixels to it whenever I press the right key. What are pixels you say? They are actually related to pixies, fairies and all sorts of mythical beast as if I know lots about… tiny dots on screen. Your screen resolution goes by pixels, 800x600, 1024x780… stuffs like that.

Now try to test run the movie. Move the clown around. Does it work? Well if it does, it is not looking good. A bit on the sluggish side I would say, especially on the start. Well, what went wrong? The whole damn tutorial went wrong! What happened was the delayed input of the keyboard thanks to the operating system… (yes blame it on Microsoft) … actually it’s because of these features you don’t get mulllltiiipllleee letters appearing when we type something. Now let’s make that point valid. Open your ‘Notepad’ and hold down a key…. you notice that it repeats only after certain interval. That was what was happening. We will er… tackle this issue once I find out in the next tutorial. Meanwhile try to make the clown move up and down.