Pixil.info

Coming up on today’s episode:

How to build an XML slide show gallery with Action Script 3.

Jermbo will be showing you how to make objects move based on your mouse location. There are many different approaches and uses for this, but this tutorial will show you the basics.

Downloads & LinksThe Goodies

• Tutorial Files

First, I want to show you how easy it is to find the middle of the stage. Make a new layer, change layer1 to bg and layer2 to actions. Lock you actions layer and open you actions panel. Quick tip towards the bottom of the actions panel you will see a thumb tack, click on that to “pin the script”. this allows you to move around to other layers and still have access to that script block. Go back to your time line and select the bg layer and head back to the actions panel.

Select the rectangle tool and draw a horizontal rectangle on the screen. make sure its selected and press F8 and the convert to symbol dialog box shows up. give it a name of horizontalLine, and be sure to give it an instance name of horizontalLine as well. Now draw another rectangle, but this time make it vertical. Select it, and convert it to a movie clip, and call this one verticalLine and give it an instance name of verticalLine as well.

Lets try and find the horizontal middle first. to do that we need to set the horizontalLine y location to stage.stageHeight / 2;

horizontalLine.x = 0;
horizontalLine.y = stage.stageHeight / 2; ( be sure that everything turns blue this means you spelt it right )
horizontalLine.width = stage.stageWidth;
horizontalLine.height = 2; 

test the movie and see what happened. So I set horizontalLine to stretched the width of the stage and found the middle of the screen. Now for the vertical middle, this time we need to set the verticalLines x location to stage.stageWidht / 2

verticalLine.x = stage.stageWidth / 2;
verticalLine.y = 0;
verticalLine.width = 2;
verticalLine.height = stage.stageHeight;

Now test the movie and see what we get.. You should get a cross hair that spans the entire stage. We are doing good.

Im just going to moved this off the stage and select the rectangle tool and draw a square. Select the square and convert it to a movie clip by pressing F8. be sure that the registration is in the middle, and give it a name of Square, ( with a capital “S”)

Before we hit ok, click on the advanced drop arrow and in the linkage section click the check box to “Export for ActionScript”.
2 fields now come into focus the class and the base class. and they are filled out. The class filed is populated with the name you gave yore symbol, this is important for you to remember, because this is the name action script is going to be looking for.
go a head and delete that off the stage and go back to you actions panel.

We need to put that square back on stage so i am creating a init function that will do that. I type var square ( lowercase ) data type that to movie clip and equal it to new Square. Next simply addChild to stage…

function init():void{
	var square:MovieClip = new Square();
	addChild(square);
}
init();

Test the movie and lets see what happens. So the movie clip is in the top left of the screen but only the bottom right quarter is showing. Thats good, it did exactly what we told it to do. With out defining an x and y location when we add the movieclip to the stage it puts it a 0,0. and in flashes case thats the top left. So in the init function above the addChild lets define an x and y location.

function init():void{
	var square:MovieClip = new Square();
	square.x = stage.stageWidth / 2;
	square.y = stage.stageHeight / 2;
	addChild(square);
}

Now test the movie and look what we get a box in the middle of the stage. now we can get it to move. Again above the addChild line, add

square.addEventListener(Event.ENTER_FRAME, moveBox);

now go below the add child line and add some space. then start typing.

function moveBox(evt:Event):void{

}

We need to find three things: 1. Where is the middle of the stage, 2. What is the difference between the mouse location and the middle of the stage, 3. We need to convert that into a percentage. Then we need to apply that to the x location. Also I am going to make a speed variable, this way we can have a more control over how fast the movie clip is divine. Lets set that speed variable outside the init function..

var speed:int = 2;

Now go into the moveBox function and lets find those variables.

function moveBox(evt:Event):void{
	var middle:uint = stage.stageWidth / 2;
	var mouseDiff:int = mouseX - middle;
	var percent:Number = mouseDiff / middle;

	evt.target.x += percent * speed;
}

Test the movie and lets see what happens. Awesome I move the mouse further to the left and right the faster it goes.. and toward the middle it slows down and eventually stops. Notice there is nothing to stop it from leaving the screen. Lets set up an if else statement. What these say is, if the movie clip leaves the stage to the left show up on the right and if the movie clip leaves to the right of the stage.. show up on the left..

function moveBox(evt:Event):void{
	var middle:uint = stage.stageWidth / 2;
	var mouseDiff:int = mouseX - middle;
	var percent:Number = mouseDiff / middle;

	if(evt.target.x <= 0 - evt.target.width / 2){
		evt.target.x = stage.stageWidth + evt.target.width / 2;
	}else if(evt.target.x >= stage.stageWidth + evt.target.width / 2){
		evt.target.x = 0 - evt.target.width / 2;
	}

	evt.target.x += percent * speed;
}

Test the movie and see what happens.. sure enough it works.. This same logic can be applied to moving a movieClip up and down as well. Here is the code to get that done.

function moveBox(evt:Event):void{
	var middle:uint = stage.stageHeight / 2;
	var mouseDiff:int = mouseY - middle;
	var percent:Number = mouseDiff / middle;

	if(evt.target.y <= 0 - evt.target.height / 2){
		evt.target.y = stage.stageHeight + evt.target.height / 2;
	}else if(evt.target.y >= stage.stageHeight + evt.target.height / 2){
		evt.target.y = 0 - evt.target.height / 2;
	}

	evt.target.y += percent * speed;
}

Alright there you have, the basics of moving object with actionscript three. Be sure to follow me on twitter and Facebook, and get you free copy of todays project files in the Download & Info tab. Thanks for watching!