Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Key Stroke Driven Events

You will need this file to do this tutorial. Test the movie on the right by clicking on the movie then using your arrow keys.

1. Open your file. you will see a movie clip of a soldier on the stage. Click on the soldier and open the properties inspector. This soldier has an instance name of soldier_mc, indicating it is a movie clip. Double click the soldier. Notice the soldier_mc consists of a 4 frame movie where the arms and legs movie under the shoulders and head across the 4 frames, to simulate walking. Also notice there is a single keyframe action for stop.

Click back on the maiin scene1 stage. You will also see a blank movie clip to the left of the stage that appears as a small white circle. We will use this blank movie clip to set up our keyboard actions and therefore it must be somewhere on or off the stage.

Lets get started.

2. Click on the blank movie clip located to the left of the stage. Open your actions panel. We want to set up 4 event handlers, one for each directions, down, left, up, and right, that will be activated by a keystroke of the down, left, up and right arrows. Type in the following:

on(keyPress "<Down>"){
}
on(keyPress "<Left>"){
}
on(keyPress "<Up>"){
}
on(keyPress "<Right>"){
}

3. We have the event handlers setup to handle the four events of four arrow directions. Now we put in the actions between the curley brackets {} for each event. The first thing we want to do is rotate the soldier to face the direction our event will point toward. The original clip faces down, so down will have a _rotation property equal to 0. Which each 90 degree turn clockwise we will add 90 degrees to the roation. We can then turn out soldier to reflect the keystroke down, left, up, right, by changing the property of the clip to show a roation value of 0, 90, 180, 270. Add the following action to the coresponding event handler.

on(keyPress "<Down>"){
    _root.soldier_mc._rotation = 0;
}
on(keyPress "<Left>"){
    _root.soldier_mc._rotation = 90;
}
on(keyPress "<Up>"){
    _root.soldier_mc._rotation = 180;
}
on(keyPress "<Right>"){
    _root.soldier_mc._rotation = 270;
}

Check your syntax by clicking the blue checkmark. When all appears good, test your movie by pressing ctrl enter. Your soldier should turn to face the direction of the arrow you pressed on your keyboard.

4. Next is to move the clip in the direction of the arrow. To do this we can change the value for the _x of the soldier movie clip by a factor of to move left and right, or the _y to move up and down. Add this script to your event handler, where you are adding (+=) or subtracting (-=) from the original value.

on(keyPress "<Down>"){
    _root.soldier_mc._rotation = 0;
    _root.soldier_mc._y += 5;
}
on(keyPress "<Left>"){
    _root.soldier_mc._rotation = 90;
    _root.soldier_mc._x -= 5;
}
on(keyPress "<Up>"){
    _root.soldier_mc._rotation = 180;
    _root.soldier_mc._y -= 5;
}
on(keyPress "<Right>"){
    _root.soldier_mc._rotation = 270;
    _root.soldier_mc._x += 5;
}

Check y our addition by clicking the syntax chaeck mark. Then test your movie to watch your character move by 5 pixels with your arrows.

5. Lastly we want our soldier to show arm and leg movement as if he is marching forward, forward being the new direction we have turned him to. We will ask the movie clip instance, soldier_mc to play its frames. Add this script to each event handler as shown below.

on(keyPress "<Down>"){
    _root.soldier_mc._rotation = 0;
    _root.soldier_mc._y += 5;
    _root.soldier_mc.play();
}
on(keyPress "<Left>"){
    _root.soldier_mc._rotation = 90;
    _root.soldier_mc._x -= 5;
    _root.soldier_mc.play();
}
on(keyPress "<Up>"){
    _root.soldier_mc._rotation = 180;
    _root.soldier_mc._y -= 5;
    _root.soldier_mc.play();
}
on(keyPress "<Right>"){
    _root.soldier_mc._rotation = 270;
    _root.soldier_mc._x += 5;
    _root.soldier_mc.play();
}

Test your syntax and test your movie. You now have a character that will travel around your stage with a walking action, dependant on your keystroke! Let's keep him from falling off the stage!

6. For the left hand arrow event, we can add a condition that if the value of x is < , set it equal to 14(half of the width of the clip). We can add similar conditions for the other events, to limit the movement to the edge of the stage. Below is a sample of the script for a stage that is 550 wide, based on this movie clip that is 28 pixels wide.

on(keyPress "<Down>"){
    _root.soldier_mc._rotation = 0;
    _root.soldier_mc._y += 5;
    _root.soldier_mc.play();
     if (_root.soldier_mc._y > 386){
         _root.soldier_mc._y = 386;
     }
}
on(keyPress "<Left>"){
    _root.soldier_mc._rotation = 90;
    _root.soldier_mc._x -= 5;
    _root.soldier_mc.play();
     if (_root.soldier_mc._x < 14){
         _root.soldier_mc._x = 14;
     }
}
on(keyPress "<Up>"){
    _root.soldier_mc._rotation = 180;
    _root.soldier_mc._y -= 5;
    _root.soldier_mc.play();
     if (_root.soldier_mc._y < 14){
         _root.soldier_mc._y = 14;
     }
}
on(keyPress "<Right>"){
    _root.soldier_mc._rotation = 270;
    _root.soldier_mc._x += 5;
    _root.soldier_mc.play();
     if (_root.soldier_mc._x> 536){
         _root.soldier_mc._x = 536;
     }
}

 

Click on the movie below and test your keystroke.

 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2024 All Rights Reserved
Privacy and Legal