Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Flash Animation Script ( Key Mapping )
646
single,single-post,postid-646,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
movieClip

Flash Animation Script ( Key Mapping )

So you’ve got a MovieClip, it’s animated, and now you want to view/test your animations. The only problem is, you are limited to either scrubbing the timeline or having to compile flash multiple times to view different animations.

Well not anymore!  Thanks to this handy little script.

With this script you will be able to set your MovieClip’s frame labels to any key on the keyboard.  Then when you compile and run, just press the key tied to your animation and watch it play right before your eyes!

This script also supports moving your MovieClip around with the arrow keys, controlling the speed at which it will move, and optionally flipping it horizontally/vertically when changing direction.  This means you could test a character walking around or a flying bird or whatever you want!  This is great for testing your MovieClip with in your project’s environment.

Test your MovieClip animations in an environment!

Enough babbling, lets look at the script!

At the very bottom of this page you will find the entire script.  However, the only portion you need to make edits to is found in between the MAKE EDITS HERE and END EDITS comments as seen in the image.  Let’s take a closer look.

Edit this portion of the script.

The first portion contains variables that can be edited.

The vSpeed and hSpeed variables take a Number which controls how many pixels the MovieClip will translate each frame when using the arrow keys.

The bFlipX and bFlipY take Boolean values which control flipping the MovieClip when arrow keys are pressed.

The sIdleFrameLabel is an optional variable which takes a String value.  This value is a frame label you wish to use for the MovieClip when no keys are pressed and the MovieClip stationary on the screen.  A great animation for this is an idle animation.

The final and most important variable is the mcTarget which takes a MovieClip instance.  Make sure the MovieClip on your stage has an instance name and replace this.movieClipInstance with your instance name in order to control the MovieClip.

Edit these variables.

The next portion is for mapping key’s to animations that have frame labels.  The aKeys[  ] contains the key you want to press and the String value is the frame label of the animation you wish to play on that key press.

So aKeys[LEFT] = “walk” will play the MovieClip’s animation with the walk frame label when the LEFT arrow key is pressed.

You can add and remove as many keys as you like.  Just scroll up the script to see more key values to enter in.

Add and remove key's set to frame labels to play.

Hardcoded ascii keys.

Finally here is the entire script for you to use.  Just drop this code on to your timeline and edit the options for your MovieClip.  Then compile and you are ready to start viewing your MovieClip animations with the simple press of a key!

import flash.display.MovieClip;
import flash.ui.Keyboard;
import flash.events.Event;

var A:uint	   = 65;
var B:uint         = 66;
var C:uint	   = 67;
var D:uint	   = 68;
var E:uint	   = 69;
var F:uint	   = 70;
var G:uint	   = 71;
var H:uint	   = 72;
var I:uint	   = 73;
var J:uint	   = 74;
var K:uint	   = 75;
var L:uint	   = 76;
var M:uint	   = 77;
var N:uint	   = 78;
var O:uint	   = 79;
var P:uint	   = 80;
var Q:uint	   = 81;
var R:uint	   = 82;
var S:uint	   = 83;
var T:uint	   = 84;
var U:uint	   = 85;
var V:uint	   = 86;
var W:uint	   = 87;
var X:uint	   = 88;
var Y:uint	   = 89;
var Z:uint	   = 90;
var LEFT:uint  = 37;
var RIGHT:uint = 39;
var UP:uint	   = 38;
var DOWN:uint  = 40;

var nCurrentAni:int = -1;
var aKeys:Array = new Array();

// -----------------------------------------
/* MAKE EDITS HERE. 

	hSpeed   		- Controls the speed the MovieClip will translate on the x axis when left and right arrow keys are pressed.
	vSpeed  		 - Controls the speed the MovieClip will translate on the y axis when up and down arrow keys are pressed.
	bFlipX   		- Flips the MovieClip's x direction.
	bFlipY   		- Flips the MovieClip's y direction.
	sIdleFrameLabel - An optional frame label to play when an arrow key is released, otherwise stop is applied.
	mcTarget 		- This is the movie clip instance to control.  This name must match an instance name of a movie clip on the stage.
*/
var vSpeed:Number = 5;
var hSpeed:Number = 5;
var bFlipX:Boolean = true;
var bFlipY:Boolean = false;
var sIdleFrameLabel:String = "";
var mcTarget:MovieClip = this.movieClipInstance;

//map keys here

//ex: aKeys[S] = "stop"; This will play gotoAndStop("stop") when the [s] key is pressed.

aKeys[A] = "ambient";
aKeys[W] = "hit";
aKeys[S] = "attack";
aKeys[D] = "death";

aKeys[RIGHT] = "walk";
aKeys[LEFT] = "walk";
aKeys[UP] = "walk";
aKeys[DOWN] = "walk";

//end map keys

// END EDITS
// -----------------------------------------

//START OF SCRIPT -- This code requires no alteration.

this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler, false, 0, true);
this.stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler, false, 0, true);
this.stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);

var bUp:Boolean = false;
var bDown:Boolean = false;
var bLeft:Boolean = false;
var bRight:Boolean = false;

function keyDownHandler($e:KeyboardEvent)
{
	var keyCode:uint = $e.keyCode;

	if (aKeys[keyCode] && nCurrentAni != keyCode)
	{
		mcTarget.gotoAndPlay(aKeys[keyCode]);
		nCurrentAni = keyCode;
	}

	if (!aKeys[keyCode])
	{
		trace("Key "+keyCode+" is not mapped");
	}

	if (keyCode == 38)//up
		bUp = true;
	if (keyCode == 40)//down
		bDown = true;
	if (keyCode == 37)//left
		bLeft = true;
	if (keyCode == 39)//right
		bRight = true;
}

function keyUpHandler($e:KeyboardEvent)
{
	if (nCurrentAni != -1)
		nCurrentAni = -1;

	var keyCode:uint = $e.keyCode;

	if (keyCode == LEFT || keyCode == RIGHT || keyCode == UP || keyCode == DOWN)
	{
		if (sIdleFrameLabel != "")
			mcTarget.gotoAndPlay(sIdleFrameLabel);
		else
			mcTarget.gotoAndStop(0);
	}

	if (keyCode == 38)//up
		bUp = false;
	if (keyCode == 40)//down
		bDown = false;
	if (keyCode == 37)//left
		bLeft = false;
	if (keyCode == 39)//right
		bRight = false;
}

function enterFrameHandler($e:Event)
{
	if (bUp)
	{
		mcTarget.y -= vSpeed;

		if (bFlipY && mcTarget.scaleY < 0)
			mcTarget.scaleY *= -1;
	}
	if (bDown)
	{
		mcTarget.y += vSpeed;	

		if (bFlipY && mcTarget.scaleY > 0)
			mcTarget.scaleY *= -1;
	}
	if (bLeft)
	{
		mcTarget.x -= hSpeed;

		if (bFlipX && mcTarget.scaleX > 0)
			mcTarget.scaleX *= -1;
	}
	if (bRight)
	{
		mcTarget.x += hSpeed;

		if (bFlipX && mcTarget.scaleX < 0)
			mcTarget.scaleX *= -1;
	}
}

//END OF SCRIPT