Swap Symbols: Dynamically

July 15, 2006

Scrolling through the newest posts on actionscript.org, I found someone looking to create a dancing game where users can swap the characters body parts using the arrows keys on your keyboard. Today I want to show you how you can swap animated symbols without losing their place or starting from frame 1. You can scroll down to see the finished product or click here.
 

The Setup

To start, we need three movieclips with identical timelines and animation. I created and animated a ball symbol bounding in one step and then duplicated my mcYellow movieclip to create mcBlack and mcRed; once you create your first movieclip, just duplicate them and change a characteristic like its Tint.

Show mcYellow's animated timeline using Union SkinShow duplicated movieclips' mcBlack & mcRed

Now that our movieclips are ready, we will need to add a unique Linkage Indentifier to each movieclip so we can access and load each clip using attachMovie. To enter a unique indentifier;

ID14_1.gif

  • Open the Library's window (CTRL + L)
  • Select and right-click on mcYellow
  • Select Linkage...
  • Choose Export for ActionScript in the Linkage Properties dialog box
  • The Indentifier name will default to the symbols name; mcYellow
  • Repeat these steps for mcBlack & mcRed

 

The Code

Go to the root timeline, change the layers name from Layer 1 to ActionScript and open the Actions window. The first thing we want to do is set where our movieclips will be placed on the stage. I want mine to be placed at the bottom of the stage and in the center because it will enhance the "bounce" effect. Please note: When setting the _x and/or _y positions of a movieclip onto your stage, whether its on the fly or using variables, ensure they reflect the registration point of that movielcip; mine clips' are set center-bottom.

  1. stop();
  2.  
  3. var xp = Stage.width / 2;
  4. var yp = Stage.height;

With the variables set, the next step is to grab a movieclip from the library and place it on the stage using the attachMovie() method from the MovieClip Class; we will attach the black movieclip as our default and give it an instance name of mcBounce.

  1. stop();
  2.  
  3. var xp = Stage.width / 2;
  4. var yp = Stage.height;
  5.  
  6. attachMovie("mcBlack", "mcBounce", 0, {_x: xp, _y: yp});

 
The trick with effect trick is to keep the properties consistent, in order to give you a seamless swap effect. We already decided that mcBounce is the constant instance name, 0 is depth and the position will be based on variables xp and yp. The remaining constants are for controlling mcBounce's timeline. As it stands right now, mcBounce is looping through its own timeline but to complete the effect, we need to control it. We need a variable to represent the timeline, fcount and a variable, fmax, that keeps a record of the total number of frames of mcBounce.

  1. stop();
  2.  
  3. var xp = Stage.width / 2;
  4. var yp = Stage.height;
  5.  
  6. attachMovie("mcBlack", "mcBounce", 0, {_x: xp, _y: yp});
  7.  
  8. var fcount = 1;
  9. var fmax = mcBounce._totalframes;

 
Now that we have all our variables in order, lets take control of mcBounce. What we need is use the onEnterFrame method of the MovieClip class and insert a script that uses fcount to move mcBounce's timeline; we will want to reuse this script every time a swap is made, so its best to put it inside function.

  1. mcBounce.onEnterFrame = doBounce;
  2.  
  3. function doBounce () {
  4.     if (fcount == fmax) { fcount = 1 };
  5.     mcBounce.gotoAndStop(fcount);
  6.     fcount++;
  7. }

The if statement reverts fcount back to 1 if we have reached the end of the timeline. The "control" come from the gotoAndStop method, as it's used to move the timeline according to the value of fcount, which increase by 1 using fcount++
 
Now that mcBounce is animating with our onEnterFrame script, we need to set how we are going to swap the symbols during runtime. As I mentioned in the beginning, this code was used by someone developing a dancing game, so we'll use the left (mcYellow ), right (mcRed) and down (mcBlack) keyboard keys to swap our symbols.

  1. var arrowkeys = new Object ();
  2. arrowkeys.onKeyDown = function () {
  3.     switch (Key.getCode ()) {
  4.     case Key.LEFT :
  5.         attachMovie ("mcYellow", "mcBounce", 0, {_x :x p, _y:yp});
  6.         mcBounce.onEnterFrame = doBounce;
  7.         break;
  8.     case Key.RIGHT :
  9.         attachMovie ("mcRed", "mcBounce", 0, {_x :x p, _y:yp});
  10.         mcBounce.onEnterFrame = doBounce;
  11.         break;
  12.     case Key.DOWN :
  13.         attachMovie ("mcBlack", "mcBounce", 0, {_x :x p, _y:yp});
  14.         mcBounce.onEnterFrame = doBounce;
  15.         break;
  16.     }
  17. };
  18. Key.addListener (arrowkeys);

 

Keyboard Control: left, down, right arrow keys

Tags: , ,

Leave a Reply

You must be logged in to post a comment.