Web Workshop: Flash animation

OneClickDog.com created Littlewheel which has won an MTV award for best browser game and it’s no wonder. They’ve taken the old point-and-click game and created some of the most beautiful animation, that tells an interactive story with a challenge of bringing you in-game friends back to life.

AUTHOR: Mark Shufflebottom | Web Designer Issue 180

ANNOTATIONS

Background
The background contains blurred imagery giving a sense of depth to the project and creates a rich environment that becomes very believable.

Point-and-click
The game is a familiar point-and-click that allows users to explore the interface and solve puzzles in order to progress. The white circles give you a clue as to clickable areas that are interactive.

Interactive
The scenery can be interacted with and usually some small detail is overlooked when trying to solve the puzzles.

Silhouette
The silhouette style of imagery gives a very striking look which uses Flash’s flat vector style to great strength instead of being perceived as a
weakness.

Avatar
Your character is a robot who is trying to restore power and life to a city and wake the powerless robot population.

inspiration http://fastgames.com/littlewheel.html

TECHNIQUE
1 Add symbols
Create the player Movie Clip you want to move. Add this to the stage and give it the instance name of ‘player’. Now create a button in the library and add two instances of the button on each side of the stage. Name one ‘walkHere’ and the other ‘walkThere’.

2 Setting up the code
On a new layer, select frame 1 and open the ActionScript editor. Copy in the code as shown into the editor. The irst three lines set up some variables that we will use. The irst is the most important as it will determine the speed at which your player moves. Then we set up listeners to listen for mouse clicks on either of the buttons.

var walkRate = 15;
var targetBuffer = 10;
var clicked:String;
walkHere.addEventListener
(MouseEvent.CLICK, goToPoint);
walkThere.addEventListener
(MouseEvent.CLICK, goToPoint);

3 Move when clicked
After the irst set of code copy in the next code as shown. This is the function that is called when either of the buttons are clicked on. Notice that the player is moved to the position of the mouse when the user clicks the button and this is stored in the targetx and targety variables. The player is then moved by adding the movePlayer listener which is called every frame.

function goToPoint(e:MouseEvent)
:void
{clicked=e.target.name
player.targetx = mouseX;
player.targety = mouseY;
player.addEventListener
(Event.ENTER_FRAME, movePlayer); }

4 Move the player
Add this code under the last. It is called every frame and moves the player towards the target position. You will notice a large if statement, this is checking to see if the player has reached the target and if so the listener is removed so that the player stops moving.

function movePlayer(e:Event):void
{
var pMove:Array = new Array();
pMove = getMovement(player.
targetx,player.targety);
var xinc = pMove[0];
var yinc = pMove[1];
player.x += xinc;
player.y += yinc;
if ((player.x > (player.targetxtargetBuffer)
&& player.x < (player.
targetx+targetBuffer)) &&
(player.y > (player.targetytargetBuffer)
&& player.y < (player.
targety+targetBuffer)))
{
player.removeEventListener(Event
.ENTER_FRAME, movePlayer);
}
}

05 Last code
The inal section of code works out the position increment to move the player to. Once done, hit Return and Enter on the keyboard to see the ile. Click on either of the buttons to see your player move to those points.

function getMovement(thisX, thisY)
:Array
{
var movement:Array = new Array();
var xdiff = (thisX – player.x);
var ydiff = (thisY – player.y);
var diff = Math.sqrt(Math.
pow(xdiff,2) + Math.pow(ydiff,2));
var fraction = walkRate / diff;
var xinc = fraction * xdiff;
var yinc = fraction * ydiff;
movement.push(xinc, yinc, diff);
return movement;
}

COMMENT | What the experts think of the site
Simple gameplay works best
“The beauty of Littlewheel is that it is a very simple game that anyone can play. The whole point of the game is to control a very limited selection of actions until you progress to the next screen. When you inally complete the game it is something that anyone can achieve but it gives you a massive sense of accomplishment because of all the beautiful animation.”
Mark Shufflebottom