Code With Design

Going through the code

View the results

For this creation we are first going to need event listeners in the project. An event listener is something that reacts when an event happens. So within the project we have a fade in and fade out button. Both of these buttons have event listeners that are given instructions on what to do when the event occurs. So in this example we are going to use the rotate left event listener which looks as follows.

rotate_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateLeft);

This states that for the instance rotate_left_btn it will add an event listener and that event listener is a mouse event that will take place when the mouse button has been pressed down on. Then it will link to the onRotateLeft function.

//Functions for Rotation
function onRotateLeft(evt:MouseEvent):void {
box.rotation -= 10;
};

Note: Take note that information after two forward slashes is read as a comment and will not effect your code in any way. //Comments end when the line ends.

The function above declares that it is first a function then names it onRotationLeft. After naming the function the code will declare that this function has a mouse event then is posted as void. On the next line we state that we want there to be a left rotation so we use -=10;  then end the function with a closing bracket and a semicolon.

Later in the code we have some new mouse events and function that are not mouse buttons but drag actions with the mouse. Theses are created the same way that the other mouse buttons where, there is a function and an event listener but note the front of the event listener where we declare box at the beginning so it will only work when we click down and drag the box.

The Stage

What you will need on your stage is first a movie clip with an instance name of box. Now you will need the button images, these don’t need to be pretty they just need to be functional. The layout is up to you but if you need an example click the link before the action script code to view the SWF file.

The button instances are as follows:

move_left_btn
move_right_btn
move_up_btn
Move_down_btn

scale_up_btn
scale_down_btn

rotate_left_btn
rotate_right_btn

fade_in_btn
fade_out_btn

toggle_visible_btn

The Action script side of things

//Assigning movements with Functions
function onMoveLeft(evt:MouseEvent):void {
box.x -= 20;
};
function onMoveRight (evt:MouseEvent):void {
box.x += 20;Mouse Events: Controlling a Box
};
function onMoveUp(evt:MouseEvent):void {
box.y -= 10;
};
function onMoveDown (evt:MouseEvent):void {
box.y += 10;
};
//Move Mouse Events
move_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveLeft);
move_right_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveRight);
move_up_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveUp);
move_down_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveDown);
scale_up_btn.addEventListener(MouseEvent.MOUSE_DOWN, onScaleUp);
scale_down_btn.addEventListener(MouseEvent.MOUSE_DOWN, onScaleDown);
//Rotation Mouse Events
rotate_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateLeft);
rotate_right_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateRight);
//Fading Mouse Events
fade_in_btn.addEventListener(MouseEvent.MOUSE_DOWN, onFadeIn);
fade_out_btn.addEventListener(MouseEvent.MOUSE_DOWN, onFadeOut);
//Toggles the Visibility
toggle_visible_btn.addEventListener(MouseEvent.MOUSE_UP, onToggleVisible);
//Functions For Scaling
function onScaleUp(evt:MouseEvent):void {
box.scaleX += 0.1;
box.scaleY += 0.1;
};
function onScaleDown(evt:MouseEvent):void {
box.scaleX -= 0.1;
box.scaleY -= 0.1;
};
//Functions for Rotation
function onRotateLeft(evt:MouseEvent):void {
box.rotation -= 10;
};
function onRotateRight(evt:MouseEvent):void {
box.rotation += 10;
};
//Function For Fade in and Fade Out
function onFadeIn(evt:MouseEvent):void {
box.alpha += 0.1;
};
function onFadeOut (evt:MouseEvent):void {
box.alpha -= 0.1;
};
//Toggle Button to change Visibility
function onToggleVisible(evt:MouseEvent):void {
box.visible = !box.visible;
};
box.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag);
box.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
};
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();

};

Caleb Jonasson