Actionscript Artist

Think about the process of filling out a series of forms on a HTML based website. As you move from one screen to the next the screen goes completely white before going to the next screen. The amount of time that the screen goes white depends on you connection speed and the server’s speed. A usability study found that people get a little stressed when the screen goes white. Perhaps they think the signup process is going to crash on them as it probably has in the past. This ranks poorly on the usability scale. Most HTML based forms or applications are multi-page applications. This usually happens when the user’s session expires. This only happens in HTML based applications. There are ways around this using DHTML and other tricks but generally this is a problem for HTML.

If you were to use Flash to make applications then you would not have to reload the screen every time the conditions change. You could do everything on one page that dynamically changes to suit the application. Strike another one up for Flash in the long and controversial debate between Flash and HTML.

Found this game on the Armor Games site. It a platform game with smooth responsive movement and decent music.

I just stumbled upon one of the most impressive uses of Flash I’ve ever seen. Do yourself a favor and check it out and be inspired. It has inspired me like you wouldn’t believe. Anyways, here’s the link: Flash Drum Display.

Effect: You have 2 or more boxes (circles, triangles, whatever). The middle of one is colored, you click on a different box and the middle color slides to the box you clicked with a cool sliding effect (a faded trail). This effect is highly re-usable and easy to implement with different shapes and several of them. Source code included! Concepts: actionscript animation, button press.
The following effect is as follows:

Click here for the source file.

This Flash Tutorial will be presented in a step-by-step format.

1. Open Flash and create a document with size 400X200. Create a three layers and label them as follows:

2. In the boxes layer, draw a square with the border a different color than the inside. I’ll be using a black border with a green inside.

3. Click on the center of the box (the green part), right-click and select “copy” (or just press +c). Click on the “square01″ layer and place the square in the same place by right-clicking and selecting “paste in place” (or just press ++v).

4. Lock all layers, except the “square01″ layer. Click on the square and turn it into a movieclip. Do this by clicking of the tab “insert>new symbol…” (or press F8) and select movieclip. Select the movieclip and put the following actions on the movieclip:

5. Unlock the “boxes’ layer.  Click on the square (select the outline and the middle).  With the box selected, press F8 to turn it into a symbol and select “movieclip”.  Name this movieclip “box01″.  Double-click on the box01 movieclip.  Now select just the middle square (not the outline), turn it into a movie.  Now change the alpha property (located on the properties panel, under the heading “Color:”) to 0.  
6. Go back to the main timeline and copy the box movieclip a few times and name the other boxes: box02, box03, box04, etc.
7. Go to the “Actions” layer and insert the following code:
// box buttons:
// basically we are just defining locX
// and locY to equal the x and y position
// of the box
box01.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box02.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box03.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box04.onPress = function() {
  locX = this._x;
  locY = this._y;
}

Now run your movie and you should have a square that moves to the box that you click on.
8. In order to get the fade effect, we will have to add two more layers below the “square” layer.  Copy the “square” movieclip and paste one copy on each of the two new layers.  Click on each of these copies and change the actionscript in the following way.  Change the speed to a slightly lower number and add the following actionscript after the  code about the speed:
this._alpha = 70;

9. Do this again for the last layer, but make the speed slightly lower than the last layer and add this actionscript:
this._alpha = 40;

Okay, that’s all.  This Flash tutorial is done.   
Feel free to leave me a comment as to how you liked the tutorial.  Also let me know what other tutorials you would like me to post or even what else you’d like to see on this site.


			

In this Flash tutorial you will learn how to make the cannon on the tank rotate wherever the mouse is pointing and shoot whenever the left mouse button is clicked. Topics covered in this tutorial: mouse angle detection, onMouseDown event, duplicateMovieClip, rotation and actionscript controlled motion.

Click here to see the completed swf file.

Begin by downloading the following Flash file: tankPart2_rotation_artillery.fla. This file contains all the movieclips that you will need without the actionscript. We will fill that in during the tutorial.

Edited: Here is the source file.

This tutorial is broken up into two main sections:
i. Cannon Movement

ii. Firing the Cannon

Cannon Movement

**The method we are going to use to detect the mouse angle is only approximate. Its not perfect, but it is fine for our purposes and for most games or movies that you can create with it.

First familiarize yourself with the project file. Notice the cannon movieclip is named “cannon_mc”. There is also an invisible movieClip named “mouseTarget” Also notice that we have 3 frames in the timeline. In the “Cannon Actions” layer we have 3 keyframes.

1. In the first keyframe place the following action:

startDrag("mouseTarget", true);

This action allows the movieClip “mouseTarget” to follow the mouse around wherever it goes. This is how we will be able to detect the mouse’s position relative to the tank, think of this as the crosshairs of where you will shoot.

2. In the 3rd keyframe place the following action:

gotoAndPlay(2);

By placing this action is frame 3 we have created a continuous loop between the 2nd and 3rd frames. This is necessary so that we can continuously recalculate the mouse’s position.

3. We calculate the mouse angle in the 2nd keyframe. All of the following actions will be placed in the 2nd keyframe of the “Cannon Actions” layer.

i. First we figure out the x and y distances of the mouseTarget from the tank.

// calculate the distance from tank
// to mouse click in terms of (x,y)
xDistance = mouseTarget._x - tank_mc._x;
yDistance = mouseTarget._y - tank_mc._y;

ii. Next we calculate the normalisation factor and use it to determine the mouse angle. I am not going to get into all the details of this mathmatical equation. Basically, normalization is the process of breaking up two values into relative proportions of each other. We use normalisation to figure out the approximate percentage of rotation within each of the four quadrants surrounding the tank. All you need to know is that this formula works in calculating the approximate mouse angle (its not exact, but good enough for this tutorial). Without further ado here is the code:

    // the normalisation factor is equal to
    // the sum of the absolute distances of
    // x and y.
    normalise = Math.abs(xDistance) + Math.abs(yDistance);

    // determine the direction
    if ((xDistance >= 0) && (yDistance >= 0)) {
        mouseDirection = 90 * (yDistance/normalise);
    } else if ((xDistance <= 0) && (yDistance >= 0)) {
        mouseDirection = -90 * (xDistance/normalise) + 90;
    } else if (((xDistance)<=0) && ((yDistance)<=0)) {
        mouseDirection = -90 * (yDistance/normalise) + 180;
    } else {
        mouseDirection = 90 * (xDistance/normalise) + 270;
    }

Okay, thats it for the "Cannon Movement" section. Run your movie and see if it worked!

Firing the Cannon

To uncover the bullet movieClip, first hide the tank and cannon layers ( do this by clicking the on the first dot next to the layer name). Now you should see a little green dot (our bullet). I have named this movieClip "bullet_new". The basic concept behind making the bullet fire is to duplicate the bullet_new movieClip and make it move towards where the mouse was click. Okay lets get started.

i. Click on the second frame of the "Cannon Actions" layer and add the following:

// set mouse values for artillary

// initially these will be "nil,nil" before
// this frame loads
mouse_x = mouseTarget._x;
mouse_y = mouseTarget._y;

These coordinates will be used to tell the bullet where to go. The reason we put them in the second frame is so that the initial bullet_new movieClip will always keep its original coordinates.

ii. Click on the first frame of the "Bullet Actions" layer and add the following actionscript:

    // initialize newBullet which will
    // be used to denumerate the new movieclips
    // created below.
    X = 0;

    onMouseDown = function() {
        X++;
        duplicateMovieClip(”_root.bullet_new”, “_root.bullet_new.bullet” add X, X);
    }

This basically creates a new movieClip named "bullet_new.bulletX". Each mouse click creates a new movieclip. The "X++" is short for "X = X + 1". So each new movieclip has a unique name and identifier. Review duplicateMovieClip in the ActionScript Dictionary if you don't understand this.

iii. Now for the actionscript to make the "bullet_new" movieclip move. Click on the &"bullet_new" movieclip and insert the following actions onto the movieclip:

    // when the movieclip loads
    onClipEvent(load){
        // Set the variables up to be equal to where mouse is when clicked.
        xDest = _root.mouse_x;
        yDest = _root.mouse_y;

        // Set the alpha visibility to be full.
        this._alpha = 100;
    }

    onClipEvent(enterframe){
        // if the xDest has been changed then
        // move bullet from the cannon to
        // the mouse location
        if ((this._x != xDest)) {
            // move bullet towards mouse click
            this._x += (xDest-this._x)*.1;

            // slowly make bullet disappear
            this._alpha -= 4;
        }

        // See if the yDest has been changed
        if (this._y != yDest) {
            this._y += (yDest-this._y)*.1;
            this._alpha -= 4;
        }
    }

// when the movieclip loads

onClipEvent(load){

// Set the variables up to be equal to where mouse is when clicked.
xDest = _root.mouse_x;
yDest = _root.mouse_y;

// Set the alpha visibility to be full.
this._alpha = 100;

}

onClipEvent(enterframe){

// if the xDest has been changed then
// move bullet from the cannon to
// the mouse location
if ((this._x != xDest)) {

// move bullet towards mouse click

this._x += (xDest-this._x)*.1;

// slowly make bullet disappear
this._alpha -= 4;

}

// See if the yDest has been changed
if (this._y != yDest) {

this._y += (yDest-this._y)*.1;
this._alpha -= 4;

}

}

Okay, thats it! Now test your movie and see if it works.

Add-on to the Tank: Part 1: Basic Movement

If you add all of the code from the last part, then making this work for the movable tank is quite simple.

i. Add the following code to each of your LEFT and RIGHT arrow key press functions:

_root.bullet_new._x = _root.cannon._x;

ii. Add the following code to each of your UP and DOWN arrow key press functions:

_root.bullet_new._y = _root.cannon._y;

iii. Delete the SPACEBAR key press function and of course use the new mouseDown function from Part 2 and delete the one from Part 1.

Thats it, we're done! Here's the final result:

Thank-you for participating in this Flash tutorial.

This tutorial will be presented in a step-by-step format.Click here to preview the finished project. The completed source file is here

1. Download the source file move_tank.fla, extract and open the fla file. In this file you will find all the creative assets involved in this project. However there will be no actionscript in the file. This is what we will be creating in this tutorial.

2. Okay so now you have the opened file ready to go. Take a look around at what is contained in the flash document. On the stage there are two movieclips, the tank which is named “tank_mc” and the bullet which is named “bullet_mc”.

If you double click on the tank you will see its contents. There is the tank graphic and the two tank track movieclips.

Go back to the main timeline. The last element we will look at is the bullet movieclip which is aptly named “bullet_mc”. Double click on it and have a look at its contents. Its simply a motion tween of a bullet going forward and then disappearing at the end. The disappearing tween is done with the alpha property of the bullet movieclip.

Now that you are familiar with all the graphical parts of our project. We can move on.

3. Go back to the main timeline and take a look at the layer named “Actions”. This is where all your actions for the entire project will be located.

**Having all the actions in one convenient place is the industry standard and if you don’t normally do this then you probably should start. The reason for this is that it makes it much easier to go back and edit your project.

Click on the first frame of the actions tabs and open the actionscript window (Shortcut key: F9).

i. We’ll start with the inital conditions. Initially we want the bullet on the stage but we don’t want to see it. So we put the bullet_mc at frame 10 where it’s invisible.

// initial conditions

bullet_mc.gotoAndStop(10);

ii. Okay now for the fun stuff. The following is how you will control your tank with the arrow keys. We start by creating an event, namely the ‘enterFrame’ event. This means that the commands within this statement will be active as soon as this movie loads up and will continue to me active unless we delete the movieclip. First, we will have to define some initial conditions pertaining to the speed of the movement of the tank.

    tank_mc.onEnterFrame = function() {
      // forward and backward motion speed of the tank
      tankSpeed = 5
      // side to side movement of the tank
      sideSpeed = 2
    }

Now for the key press movement. We will start with the right arrow key which will control forward movement.

    tank_mc.onEnterFrame = function() {
        // forward and backward motion speed of the tank
        tankSpeed = 5

        // side to side movement of the tank
        sideSpeed = 2

        // if key is down and key = right arrow (Key.RIGHT)
        // then increase the tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.RIGHT)) {
            this._x+= tankSpeed;
        }
    }

    tank_mc.onEnterFrame = function() {
        // forward and backward motion speed of the tank
        tankSpeed = 5

        // side to side movement of the tank
        sideSpeed = 2

        // if key is down and key = right arrow (Key.RIGHT)
        // then increasethe tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.RIGHT)) {
            this._x+= tankSpeed;
        }

        // if key is down and key = left arrow (Key.LEFT)
        // then increase the tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.LEFT)) {
            this._x -= tankSpeed;
        }

        // if up arrow is pressed then move tank
        // up 2 px (sideSpeed)
        if (Key.isDown(Key.UP)) {
            this._y -= sideSpeed;
        }

        // if down arrow is pressed then move tank
        // down 2 px
        if (Key.isDown(Key.DOWN)) {
            this._y += sideSpeed;
        }
    }

Okay now press “ctrl + enter” to run your movie. Notice that you can press more than one arrow at a time and it responds. This is because we used a separate if statement for each arrow key. Had we nested them all in one “if else if” statement we would not have this functionality.

iii. Finally, its time to make our tank fire some artillery. There are two different ways we will make this happen. One is with the “spacebar” and the other is with a left-mouse click. We’ll start with the “spacebar” shooting mechanism. Its basically the same as the arrow key presses.

** This goes in the tank_mc.onEnterFrame with the key presses.

    // if spacebar (Key.SPACE) is pressed then
    // play bullet animation.
    if (Key.isDown(Key.SPACE)) {

        // This code puts the bullet_mc at the end of the
        // cannon barrel.
        bullet_mc._x = tank_mc._x + 22;
        bullet_mc._y = tank_mc._y;

        // this plays the bullet animation. I start at frame 3
        // because then I get the bullet in motion instead
        // of it starting stationary.
        bullet_mc.gotoAndPlay(3);
    }

Now for the mouse click artillery. The following code uses an event called onMouseDown. OnMouseDown executes whenever the mouse is clicked.

    // while left mouse butting is pressed
    onMouseDown = function() {
      // establish bullet position
      bullet_mc._x = tank_mc._x + 22;
      bullet_mc._y = tank_mc._y;

      // play the bullet animation. The reason I start at
      // frame 2 here is because this action is slightly less
      // responsive than the key press function.
      bullet_mc.gotoAndPlay(2);
    }

Alright thats it! Press ctrl+enter to run your movie and see how it all turned out. Stay tuned for the next tank movement tutorial which will be all about rotating the canon and shooting in different directions. The artillery is greatly improved upon in Part 2.

If you enjoyed this tutorial then continue on to The Tank: Part 2: Rotating and Shooting the Cannon

Just found out about the Flash on the Beach Conference in Brighton, UK. Its on the 4th, 5th, and 6th of December this year. The earlybird price of 299 pounds ends on August 25th. This conference will cover various sessions related to Flash 8, Flash 8, Flex 2, Actionscript 3 and Flash Lite 2 as well as audio, game development, open source, actionscript, mobile devices, usability, Flash video, OOP, interface design and more.

Unfortunately I won’t be able to make this conference. The expense is simply too high for a young freelance designer such as myself unless of course, someone is willing to sponsor me. I would be willing to produce a $1000 project to anyone who would like to sponsor my ticket, airfare and accomadation at the Flash on the Beach conference.

Found another great Flash made music video from the animation group MonkeeHub. The band is Nizlopi and the song is called JCB. The animation is this video is incredible and very creative, an inspiration.

This Flash game has been re-built many times, each time evolving into a better, more addicting game. John Cooney of Jmtb02.com is the mastermind behind this simple but engaging game. All you do is move a ball around through crazy obstacles. I got hooked my first time playing, made it up to level 53 and then I had to take a break. Click on the image below to get re-directed to this sweet Flash Game.

I was browsing around and I stumbled upon a Flash made Flick’r viewer. If your like surfing through pictures, then you may like this interface better than using the Flick’r site. Check it out and see for yourself.