AS3 Basics 4 – Dynamic Resizing!

Part 4 of my Actionscript 3 basics is Dynamic Resizing!
Have you ever wanted your flash file to fill the browser, no matter how big or small the user views it? Worry not, as the following code should help you do just that!
[kml_flashembed
fversion=”9.0.0″ movie=”flash-content/StageResize/stageTest.swf” targetclass=”flashmovie” publishmethod=”static” width=”400″ height=”400″]

Get Adobe Flash player

[/kml_flashembed]
No matter what dimensions you view this piece of flash at, the movie clips should stick to the four corners and the middle. Don’t believe me? Try opening it in new window. You can then resize your browser and see it in action.
The following code needs 5 clips on stage, with the names TopLeftClip, TopRightClip, MiddleClip, BottomLeftClip and BottomRightClip. These clips should be centred on their registration points.

//First we set the scaleMode of the stage to NO_SCALE.
//This means that the Flash file is not distorted to try and best fill the browser space.
stage.scaleMode = StageScaleMode.NO_SCALE;
//We also set the StageAlign to TOP_LEFT;
stage.align = StageAlign.TOP_LEFT;

//We add an event listener, which will call the "resizeHandler" function, whenever the stage is resized.
stage.addEventListener(Event.RESIZE, resizeHandler); 

//Here we define the function
function resizeHandler(e:Event):void{	
	//Set the TopLeftClip to the top left of the stage - x = 0, y = 0;
	TopLeftClip.x = 0;
	TopLeftClip.y = 0;
	
	//The TopRightClip to the top right of the stage
	TopRightClip.x = stage.stageWidth-TopRightClip.width;
	TopRightClip.y = 0;
	
	//The MiddleClipto the middle of the stage
	MiddleClip.x=(stage.stageWidth/2)  - MiddleClip.width /2;
	MiddleClip.y=(stage.stageHeight/2) - MiddleClip.height/2;

	//The BottomLeftClip to the bottom left of the stage
	BottomLeftClip.x = 0;
	BottomLeftClip.y = stage.stageHeight-BottomLeftClip.height;
	
	//The BottomRightClipto the bottom right of the stage
	BottomRightClip.x = stage.stageWidth - BottomRightClip.width;
	BottomRightClip.y = stage.stageHeight- BottomRightClip.height;
}

//We then call the function, to make the clips start in the correct positions.
//We pass the function "null", as it is expecting an Event.
resizeHandler(null);

AS3 Basics 3 – Keyboard Events!

Today I’m continuing my AS3 basics series with a post about Keyboard Events.
The following code should get you up and running with Keyboard Events is AS3.

//We add listeners to the stage, listening for key-up and key-down events.
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler );
stage.addEventListener( KeyboardEvent.KEY_UP, keyUpHandler );

//This function will happen for every frame the key is held down.
function keyDownHandler( e:KeyboardEvent ):void {
	//Here, we trace out the details of the key you are pressing.
	//This lets you find out the key-codes of any given key.
	traceEvent(e);
	//The Control buttons's key code is 17, so if the pressed key's keycode equals 17, we trace this out.
	if (e.keyCode==17) {
		trace("You pressed CTRL!");
	}
}

//This function will happen for only when you release a key on the keyboard.
function keyUpHandler( e:KeyboardEvent ):void {
	traceEvent(e);
	//The space bar's key code is 32, so if the pressed key's keycode equals 32, we trace this out.
	if (e.keyCode==32) {
		trace("You released the space bar!");
	}
}

//This trace functions shows us the keyCodes for any key we need. These can then be fitted into the functions above.
function traceEvent( e:KeyboardEvent ):void {
	trace( "---------" );
	trace( "keyCode   ", e.keyCode );
	trace( "charCode  ", e.charCode );
	trace( "character ", String.fromCharCode( e.charCode ) );
	trace( "---------" );
}

A list of all the KeyCodes can be found here.
Note – testing Keyboard Events from within the Flash IDE can often be hard. A lot of keys presses may appear to not work. This is because Flash Player has lots of keyboard shortcuts turned on. For example pressing Control and Enter a second time will run your SWF as a simulated download. If you disable keyboard shortcuts in the Control menu of the Flash Player (see image below) your KeyBoard Events will work, but the shortcuts will not. Just to repeat – this behaviour only occurs in the the Flash IDE, not in browsers or the stand alone player.
Disabling Keyboard Shortcuts in the Flash IDE Flash Player.
Cheers.
Lawrie.

AS3 Basics 2 – Mouse Events!

Number two in my basic Actionscript 3 functionality is MOUSE EVENTS! The following code will show you how to access the mouse’s X and Y position, scroll wheel action and direction and clicking and double clicking.

//Mouse events!
//To use the double click event, you must first enable it for each object you want to use it on. Here we use - 
stage.doubleClickEnabled = true;
//But usually, you would replase "stage", with your movieClip name.

//Here we add event listeners for the mouse events - click, double click, mouse wheel and mouse move.

stage.addEventListener(MouseEvent.CLICK, stageClick);

stage.addEventListener(MouseEvent.DOUBLE_CLICK, dblClick);

stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);

stage.addEventListener(MouseEvent.MOUSE_MOVE, moveMouse);

//And here we add the functions for each of the listeners above.

function stageClick(e:MouseEvent):void{
	trace("clicked the stage!");
}

function dblClick(e:MouseEvent):void{
	trace("double clicked the stage!");
}

function mouseWheel(e:MouseEvent):void{
	trace("Moved the mouse wheel!");
	//Delta is used here to show how much the mouse wheel has moved, and in which direction.
	trace("Moved the mouse wheel "+e.delta +" spaces");
}

function moveMouse(e:MouseEvent):void{
	trace("Moved the mouse to "+ mouseX+","+mouseY);
}

Hope that’s helpful.

AS3 Basics 1 – Buttons!

Reading around blogs and message boards, I’ve noticed quite a lot of people are still using Actionscript 2, especially on gaming sites. It took me quite a while to get up to speed with AS3, but I can’t recommend it enough. Having had to go back and work on some old AS2 projects recently has made me realise what a step forwards AS3 is.
So, with the aim of making the transition a little easier for anyone hoping to start using AS3, I’m going to post a few basic, frequently used code snippets. Today is Making Buttons in AS3. The following code requires a move clip on stage with the instance name of “myButton”.

//Use the hand cursor
myButton.buttonMode = true;

//Add a listener to the button, which will run the function "clickButton" when the button is clicked.
myButton.addEventListener(MouseEvent.CLICK, clickButton);

function clickButton(e:Event):void{
	trace("clicked the button!");
}

//Add a listener to the button, which will run the function "rollOverButton" when the button is rolled over.
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverButton);

function rollOverButton(e:Event):void{
	trace("rolled over the button!");
}

//Add a listener to the button, which will run the function "rollOutButton" when the button is rolled off.
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutButton);

function rollOutButton(e:Event):void{
	trace("rolled off the button!");
}