Character Walk and Pick Up
BEFORE YOU BEGIN THE TUTORIAL, CLICK ON THIS LINK TO WATCH AN OVERVIEW HOW THIS IS DONE SO YOU DON’T GET LOST:
- First, MAKE SURE YOU RENAME EVERYTHING EXACTLY AS IT SAYS ON THIS TUTORIAL!Create 4 movie clip symbols in your library. The 4 animations you need are your character walking up, down, left and right:
- In each movie clip create 4 types of animation inside. So make keyframes of your character for each specific movement. Here are examples of some walking animations:
- Create another movie clip and this one will be for your coding. Rename this “Character All”(without the quotes).
- Create 8 keyframes inside the Character All movie clip and label them as shown:
Frame 1 – upstill
Frame 2 – up
Frame 3 –downstill
Frame 4 – down
Frame 5 –leftstill
Frame 6 – left
Frame 7 –rightstill
Frame 8 – right
- Now you will place something inside of each of the 8 keyframes you have just created. For frame 1, copy and paste the drawing you made of your character’s up view on it. You are only adding one drawing and NOT the movie clip so that when you are NOT pressing the keyboard, you character will stop walking(basically your character will just stand still, hence the name “upstill”). For frame 2, drag your “up” movie clip on it(this is the animated one). For frame 3, copy and paste the drawing you made of your character’s down view on it. For frame 4, drag your “down” movie clip on it. For frames 5,6,7, and 8, place the appropriate elements considering each name of your labels. (If you are confused, please raise your hand and ask the teacher).
- Goinside of the Character All movie clip, right-click the first keyframe>Actions> type instop(); in the actions window. This will prevent the animation from playing in the beginning until you press the keyboards to make your character move.
- Go back to your main scene, rename your first layer “Character All”(no quotes) and drag your Character Allmovie clip on there. Give the movie clip an instance name of “character”.
- Create a new layer in your timeline(Scene 1) and rename it Hearts. Create two new movie clips and rename one “Big Heart_mc” and the other “Heart_mc”. Inside each movie clip, draw your heart. One heart should be bigger than the other. Drag 9 smaller hearts(Heart_mc) in your main timeline inside the Hearts layer. Go to your library panel and give your Hearts movie clip a Linkage name of “littleHeart”. Also, drag 9 Bighearts(Big Heart_mc) in your Hearts layer. Give an instance name of bh1, bh2, bh3, bh4, bh5, bh6, bh7, bh8, and bh9 for the big hearts.
- Go to soundfxnow.com and find a sound effect to use so when your character picks up the heart, it will play that sound. Make sure to rename the sound file “pickupmusic” and save it in the same location where you have your Flash document saved.
- Create a new layer called Actions in your timeline on your main scene. This is where you will put your coding.
- Copy and paste this code onto your Actions layer:
importflash.events.Event;
importflash.media.Sound;
importflash.events.MouseEvent;
importflash.net.URLRequest;
stop();
stage.focus=stage;
//initialize the Boolean variables for each arrow key
varleftKeyDown: Boolean=false;
varupKeyDown: Boolean=false;
varrightKeyDown: Boolean=false;
vardownKeyDown: Boolean=false;
varreq:URLRequest = new URLRequest("pickupmusic.mp3");
var s:Sound = new Sound(req);
varlastKey:Number=0;
stage.addEventListener(KeyboardEvent.KEY_DOWN,downKey);
stage.addEventListener(KeyboardEvent.KEY_UP,upKey);
stage.addEventListener(Event.ENTER_FRAME,movecharacter);
stage.addEventListener(KeyboardEvent.KEY_DOWN, lastKeyPressed);
//downKey function
functiondownKey(event:KeyboardEvent){
if(event.keyCode==37){
leftKeyDown=true;
rightKeyDown=false;
upKeyDown=false;
downKeyDown=false;
}else if(event.keyCode==38){
leftKeyDown=false;
rightKeyDown=false;
upKeyDown=true;
downKeyDown=false;
}else if (event.keyCode==39){
leftKeyDown=false;
rightKeyDown=true;
upKeyDown=false;
downKeyDown=false;
}else if (event.keyCode==40){
leftKeyDown=false
rightKeyDown=false;
upKeyDown=false;
downKeyDown=true;
}
}
//upKey function
functionupKey(event:KeyboardEvent){
if(event.keyCode==37){
leftKeyDown=false;
}else if(event.keyCode==38){
upKeyDown=false;
}else if (event.keyCode==39){
rightKeyDown=false;
}else if (event.keyCode==40){
downKeyDown=false;
}
}
//check for last key pressed
functionlastKeyPressed(event:KeyboardEvent){
if(downKeyDown==true){
lastKey=1;
}
if (upKeyDown==true){
lastKey=2;
}
if(leftKeyDown==true){
lastKey=3;
}
if(rightKeyDown==true){
lastKey=4;
}
}
functionmovecharacter(event:Event){
//walking animations
if(upKeyDown==true){
character.y-=5;
character.gotoAndStop("up");
}
if(downKeyDown==true){
character.y+=5;
character.gotoAndStop("down");
}
if(leftKeyDown==true){
character.x-=5;
character.gotoAndStop("left");
}
if(rightKeyDown==true){
character.x+=5;
character.gotoAndStop("right");
}
//stand still animations
if (lastKey==0){
character.gotoAndStop("downstill");
}
if (lastKey==1 & downKeyDown==false){
character.gotoAndStop("downstill");
}
if (lastKey==2 & upKeyDown==false){
character.gotoAndStop("upstill");
}
if (lastKey==3 & leftKeyDown==false){
character.gotoAndStop("leftstill");
}
if (lastKey==4 & rightKeyDown==false){
character.gotoAndStop("rightstill");
}
if(character.x<0){
character.x+=25;
}
if(character.x>550){
character.x-=10;
}
if(character.y<0){
character.y+=25;
}
if(character.y>400){
character.y-=10;
}
}
var health: uint=1;
varpickUpsArray: Array =new Array();
varlifeArray: Array=new Array(bh1,bh2,bh3,bh4,bh5,bh6,bh7,bh8,bh9);
for (vari=0; inumChildren;i++){
if(getChildAt(i) is littleHeart){
pickUpsArray.push(getChildAt(i));
}
}
addEventListener(Event.ENTER_FRAME, pickUpItems);
functionpickUpItems(event:Event){
for (var j=0; j<pickUpsArray.length;j++){
if(contains (pickUpsArray[j])){
if(character.hitTestObject (pickUpsArray[j])){
removeChild(pickUpsArray[j]);
health=health+1;
s.play();
}
}
}
}
addEventListener(Event.ENTER_FRAME, capHealth);
functioncapHealth(event: Event){
if (health>lifeArray.length){
health=lifeArray.length;
trace(health);
}
}
addEventListener(Event.ENTER_FRAME,displayHearts);
functiondisplayHearts(event:Event){
for (var k=0; k<health;k++){
lifeArray[k].visible=true;
}
for (var l=health; l<lifeArray.length; l++){
lifeArray[l].visible=false;
}
}
- Test your game(Ctrl+Enter). You should now see your character walking up, down, left, right and pick up hearts as you press the keyboard arrows.
- Upload your SWF file to 3dteacheronline.com