Side Scroller Tutorial Part 4: Interactive Level Objects

Ok part 4 of this tutorial is going to be a bit different than parts 1, 2 and 3. Usually I stick to one object in a tutorial so as not to confuse you, but the following items are relatively small and easy to create compared to the character and the enemies. Don't worry though I'll split up the different objects into different sections so you can tell what I'm talking about. Anyway, here we go.

Springs or other bouncy objects

1. First open your FLA file that you used for parts 1 - 3.

2. On the main time line create a new layer and name it "bounce" (or something. It makes it easier to find later.)

3. Now on the stage draw your bounce object in it's normal state (For this tutorial I've decided to make it a spring.) It should look something like this:

 

4. Select your bounce object, go to "Modify" on the menu bar and click "Convert to symbol." Name it whatever you like and make sure you save it as a movie clip.

5. Now double click the object to enter it. Create a new layer inside the object and name it "Actions." On the first frame of the actions layer add the action: stop ();

6. Go to the layer with your object on it. Create a new keyframe on frame 2. With the frame selected go down to the properties window and type in "bounce" as the Frame label. 

7. Next on that same layer create an animation of your object bouncing up and down. (When we add the code to it the object will stay still until your character touches it. You can also add another layer and put a sound file on it to make it more interactive.)

8. Now that you are done with the animation go back to the main time line. Select your object, go to the actions tab and add this code:

onClipEvent (enterFrame) {
    if (this.hitTest(_root.char.jumppoint)) {
        //This tells flash what part of your character touches the object
        this.gotoAndPlay("bounce");
        //This starts the movieclip on the frame "bounce"
    }
}

9. With your object still selected go the properties tab and give your object the instance name "bounce1."

10. Once the code is placed select your character, and on the actions tab add this code after you see, "onClipEvent (enterFrame) {"

if (_root.bounce1.hitTest(this._x, this._y, true) && jumping && falling ) {
        // if hitting X and Y postion with the ground and jumping or falling
        this._y += 0;
        jump = 25;
        fall = 0;
        jumping = true;
        falling = false;
    }

Note: This code tells flash under what circumstances to allow the character to jump and how high and fast it will go. You can easily change how high your character jumps by changing the "jump" value.

11. Now test you movie. Your character should be shot up into the air when it touches the object. The object should also play when it is hit. You can create several of the same object in a level just remember to change the instance name of each one for example: bounce1, bounce2, bounce3...etc. You will also have to add a new code to your character for each object. This way if you want one object to bounce higher than the others you can just change the code instead of creating a whole new object.

Switches

1.Switches are fairly simple to create compared to bouncing objects. First double click on your ground object you created in part 1. Create a new layer and call it "Switches."

Note: The switch needs to be inside the ground object in order to create a bridge or something that your character will stand on. If you are not going to have your character stand on the result of the switch then you don't need to put it inside the ground object.

2. Now draw a button or lever or something on the ground. Select what you have drawn and go to Modify, "Convert to Symbol." Name it switch or name it after what you want the switch to do like, activate a bridge, show some coins, start a trap or whatever you like. Make sure it's a movieclip and click ok.

3. Double click the switch to enter it. Create a new layer, name it "Actions." On the actions tab of the frame type: stop ();

4. On the layer that your switch is on create a keyframe on frame 2. On this frame draw you switch in it's down or active state. It sould look something like this:

5. Now select frame 2 on the switch layer, go to the properties tab and add the frame label "active."

6. In frames 2 and beyond draw the effect that the switch is going to have. for this tutorial I'm going to make a bridge appear. So in frame 2 draw the bridge, and make sure it is thick enough for your character to stand on. Set the end keyframe for as long as you want the bridge to stay active.

Note: If you want the bridge to remain active and never reset add "stop ();" on the actions layer, on the last keyframe. If it is timed you should put some music or sound on the time line along with it to show when time is getting low.

7. Back out of the switch object but stay inside the ground object. Select the switch and in the actions tab add this code:

onClipEvent (enterFrame) {
    if (this.hitTest(_root.char)) {
        // if this hits the char (_root.char)
        play ();
   
   
    }
}

8. Back out to the main time line and test your movie. the bridge should activate as soon as your character touches it. and disappear when it resets.

Falling to Your Death

Up until now whenever you fall off of an edge you just keep falling and falling. This object will reset your character to the start point.

1. First create a new layer on the main time line and call it "Death."

2. Next create a rectangle that will span the length of all of your holes. Select it, go to Modify, Convert to symbol. Name it "death" and make sure it's a movie clip and click ok.

3. Now select the death object, go to the actions tab and add this code:

onClipEvent (enterFrame) {
    if (this.hitTest(_root.char)) {
        // if this hits the char(_root.char)
        if (!_root.dead) {
            _root.health.text -= 50;
            // health goes down 50
        }
       
        if (_root.health.text<=0) {
            // if the health is smaller than or equal to 0
            _root.dead = true;
            // _root.dead is true
            _root.lives.text -= 1;
            _root.health.text = 50;
            _root.char.health = 50;
            _root._x = 0;
            _root._y = 0;
            // the _roots timeline is set to 0
            _root.char._x = 221.1;
            // the char mc's X is set to 221.1
            _root.char._y = 124.3;
            // the char mc's Y is set to 124.3
            _root.char.speed = 0;
            // characters speed is 0
            _root.lives._x = 8.0
            _root.health._x = 161.0
            _root.score._x = 284.0
            _root.liveslabel._x = 46.0
            _root.healthlabel._x = 179.0
            _root.coinslabel._x = 321.0
            _root.healthbar._x = 177.0
            _root.pausescreen._x = 0
            _root.lives._y = 0
            _root.health._y = 0
            _root.score._y = 0
            _root.liveslabel._y = 0
            _root.healthlabel._y = 0
            _root.coinslabel._y = 0
            _root.healthbar._y = 3
            _root.pausescreen._y = 0
            _root.dead = false
           
    }
if (_root.lives.text == 0) {
            _root.gotoAndPlay(3);
           //put the frame # of your game over screen here
            _root._x = 0;
            _root._y = 0;
}

       
       
       
    }
}

4. Obviously you don't want people to see the bar of death so on the properties tab go to the color pull down menu and select alpha, and set it to 0 to make it invisible.

5. Now test your movie and when your character falls down one of your holes he will reset to the starting point and your lives counter and health counter will reset accordingly.

Well there you have them, 3 basic interactive level objects. In part five I'll teach you how to make the screen follow the character on the Y-axis, how to create an end goal to your level, and how to create a pause screen.

If you have any questions or comments feel free to leave them in the comments section or e-mail me at houselifecartoons@gmail.com