Tutorial: how to make a smooth movement code in As3

2009-01-26T16:53:00.000-08:00

In this tutorial I will lead you through coding a dynamic and easy adjustable movement code. When the coding is done you will have a code that you can use for many applications where you have to move a movieClip around your stages. And this only with adjusting 4 movieClip names.

Let’s start:

First of we are going to define the variables that we need. We will give them a Boolean as declaration. We got 4 basic directions, these will be also our variables: left, right, up and down.

The code should look like this:

var moveLeft:Boolean = false;
var moveRight:Boolean = false;
var moveUp:Boolean = false;
var moveDown:Boolean = false;

When where done with declaring the variables, we will add 3 eventlisteners;
1. One to look for a keydown
2. One to look for a keyup
3. And the last one to activate the function that actually moves your movieClip

It should look like this:

stage.addEventListener(KeyboardEvent.KEY_UP, reportKeyUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
stage.addEventListener(Event.ENTER_FRAME, EnterFrame);

After this we will write the functions that should be executed when the eventlistener is triggered.

This function will be triggered when there is a keyup and it will also set for witch key it has to listen. The code should look like this:

function reportKeyUp(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = false;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = false;
}
if (event.keyCode == Keyboard.UP) {
moveUp = false;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown = false;
}
}

This function will be triggered when there is a keydown and it will also set for witch key it has to listen.

The code should look like this:

function reportKeyDown(event:KeyboardEvent):void { if (event.keyCode == Keyboard.LEFT) { moveLeft = true; } if (event.keyCode == Keyboard.RIGHT) { moveRight = true; } if (event.keyCode == Keyboard.UP) { moveUp = true; } if (event.keyCode == Keyboard.DOWN) { moveDown= true; } }

In the last function we will describe what there has to happen when the Boolean is true/ what witch key has to do.

It should look like this:

function EnterFrame(event:Event):void { if (moveLeft) { mc.x += 5; } if (moveRight) { mc.x -=5; } if (moveUp) { mc.y -=5; } if (moveDown) { mc.y +=5; } }

(mc stands for the instance name of your movieClip and the 5 stands for the pixels that the movieClip has to move in the direction that you wish)

Now your code is done. The code will accept multiple keydowns.
Expl.: You can go up and left at the same time.

Here is all the code you just wrote:

//Defining the variables
var moveLeft:Boolean = false;
var moveRight:Boolean = false;
var moveUp:Boolean = false;
var moveDown:Boolean = false;

//Adding Event listeners
stage.addEventListener(KeyboardEvent.KEY_UP, reportKeyUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
stage.addEventListener(Event.ENTER_FRAME, EnterFrame);
//Key Up Function
function reportKeyUp(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = false;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = false;
}
if (event.keyCode == Keyboard.UP) {
moveUp = false;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown = false;
}
}
//KeyDown function
function reportKeyDown(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = true;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = true;
}
if (event.keyCode == Keyboard.UP) {
moveUp = true;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown= true;
}
}

//Enter Frame Function (this happens over and over repeatedly)
function EnterFrame(event:Event):void {
if (moveLeft) {
ijsBergen.x += 5;
}
if (moveRight) {
ijsBergen.x -=5;
}
if (moveUp) {
robot.y -=5;
}
if (moveDown) {
robot.y +=5;
}
}

I hope your enjoyed the tutorial and see you soon guys!

Download PDF

Tutorial how to make Mac icons with Photoshop.

2009-01-26T04:02:00.000-08:00

We will need a few programs to make the icons:

- Icon Composer (Xcode--> a add on of Mac for developers) to bad itʼs
a download of 900 Mb but the tools that in there are the Mb worth.
Download: http://developer.apple.com/TOOLS/xcode/

- Icns2Rsrc (a small conversion program)
Download: http://rapidshare.com/files/189204278/Icns2Rsrc.zip

First you will need a designer tool to make the design of your icon.
I will choose for adobe illustrator.
When your done with the design just import it to Ps.

After you placed it in Photoshop. Delete the white background layer. Then go
to save as and select save as .TIFF with the options, “Layers” unchecked and
“As A Copy” checked. A TIFF Options dialogue box should appear after hitting
the save button. Itʼs important to have Compression set to “None” and “Save
Transparency” checked. This way, the icon comes out exactly as you
intended.
Now we startup Icon Composer. Just drag and drop your .TIFF file in it and it
will resize to the different sizes of Mac icons.
Just take save as and save it. Now you will have a .icns file.

Just open Icns2Rsrc go to file>> open and select your .icns file and save
again into a .rsrc file.

Your icon is finished now.

To insert it into a map just select your .rsrc file and open info (cmd+i).
Click on the icon and copy it (cmd+c). Select the folder you want to put the
icon on. Open the info window and select the icon and paste (cmd+v) your
own icon in it. Just close your info panel and done.

If it does not appear instantly you can restart finder or reboot your mac.

Download PDF

Webdesign & Development

Tutorial: how to make a smooth movement code in As3

Tutorial how to make Mac icons with Photoshop.