Lucas the Frog: Episode 3

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

Lucas the Frog: Episode 2

Cartoon Update: New Short, Dead Tom

I've just finished posting my latest short called Dead Tom.  I made it while I was practicing with my drawing tablet. Hope you enjoy it. www.houselifecartoons.com/deadtom.html

Lucas the Frog

Ray's Top 10: Flash Tips

Lately I've been wondering, "what do people really want to read about?" and then it hit me. Flash animation tips would interest me so why not everyone else. So here it goes.

10. Tweens are over rated. If you really want a good complex animation you should really go frame by frame.

9. Remember to change your frame rate for smoother animations. 30 fps (Movie quality) and 34 fps (TV quality.)

8. Don't underestimate the power of masks. They can really help out for scrolling animations.

7. Action Script is your friend. It's useful in condensing your time line.

6. Organize all of your symbols in your library from the beginning. It makes it a lot easier to find things later on.

5. Always add a way to change the quality of your movie. You never know what kind of computer your viewers will be using.

4. Don't go overboard with gradients. Nothing shows that your a noob more than using gradients where a single color would suffice.

3. Only use up to 3 different fonts on one project. If you use any more than 3 you will start to lose the sense of unity.

2. If you're making a big project in flash, draw out your plans on paper first before ever touching the computer. I promise that your projects will come out looking twice as good as they would have otherwise.

1. If you're going to make something, GO ALL OUT! Don't hold back because you don't know how to do something. Look up tutorials on-line, there are a lot of helpful ones out there.

Side Scroller Tutorial part 3: Carrying Variables

In part 3 of this tutorial I'm going to teach you how to carry one variable from one scene to the next. It's actually pretty easy once you've gotten the hang of it.

1. Ok, first create a dynamic text box, in the instance name box type something like "lives."

2. Then in the box marked var, type the same word that you typed in the instance name box and add a "_1" to the end of it. For example, "lives_1"

3. Now on the main time line select the frame and click the Actions tab type,

stop ();

lives.text = 3;

4. Now test your movie and you'll see that the number 3 shows up in the dynamic text box. Note: It's important to remember to put ".text" after the name of your variable so that Flash will recognize it.

5. Create a new scene, on the stage create another dynamic text box and name it "lives" in the instance name box and in the var box name it "lives_2"

6. On the timeline select the frame and in the Actions tab type this,

stop ();

var lives_2 = lives_1;

This coding tells Flash to make "lives_2" equal to "lives_1"

7. Now test your movie. The first scene will say 3. Now on the tool bar press "play" to go to the next scene. you will see that it also says 3. Try changing the number in the first scene to make sure it's being carried over to the next. Note: This coding can only be used in a linear oriented game. (Or in other words, games where you can't revisit previous levels.) 

Other than carrying points from one level to the next you can also use it to display scores from previous levels in one place. Just make enough dynamic text boxes, label them in the var box and on the actions tab set them equal to the score you want them to show.

House Life Adventures Update

It's been awhile since I've posted anything. So I thought I would show you what I've been working on for the past couple of months. For toughs of you that follow this blog you'll remember that awhile back I announced the beta of my Platform game "House Life Adventures." After which several people tested the first level of the game. since the betas release a lot of aspects of the game have been changed. Difficulty levels have been dropped, check points have been added, and the screen now follows your character when you jump (instead of having the screen suddenly jump up when your character hits it) , and sound leveling has been changed. Other than that I have added 3 new levels to the game, and an over world.

The first level is the original beta level called "Mungul Jungle." Much of this level remains the same. Some background graphics have been updated to match the new levels overall look.
The second level is called "Cliff Top Panic." This level focuses on the players ability to grab on to ledges to reach new heights.
The third level, "River Side Dive" is all about water elements. In this level the player must learn to deal with waterfalls, and creepy spiders.
The fourth level "Lake Bottom Tarrance" is your classic underwater level. This level is by far the most challenging due to the fact that the player's attack ability is disabled.

So there you have it the next 3 levels of House Life Adventures. Right now I am working on the fifth level "Beach Side Frenzy" and the end of World Boss. I'm hoping to have this new beta uploaded by the end of the month. So look for it's release soon.

Cartoon Update: New Short, Phone Call

Great news everyone, I just completed my latest short toon entitled, "Phone Call" So check it out on the site. www.houselifecartoons.com

Side Scroller Tutorial, Part 2: Enemies, Objects, and Counters

In part 1 of this tutorial you learned how to create your character, some of his movements and the ground and walls. In this section you will learn how to create enemies, objects, and counters. I will also go over some of the coding that I gave you in part 1. So if you haven’t read part 1 you will be very confused. Let’s get started!

1. The first thing you’ll need to do is create a new layer and name it “Enemies.”
2. Next draw you enemy. Once you’ve finished select your enemy, and convert it into a movie clip and name it whatever you want to, it doesn’t really matter.

Note: The reason I like to draw the enemy before turning it into a movie clip is to avoid distortion issues when trying to resize it. If you want to make an enemy with multiple layers, draw the main layer (or the body) first. Then add the other layers after you’ve converted it into a movie clip.

3. Now double click on the enemy movie clip. You should now be inside the movie clip and see a new time line. On the first frame type in the label name “walk.” On the actions tab of that frame type: Stop();
4. Now create another frame, draw your enemy in some sort of a dead position, and label the frame “dead.” On the actions tab type: Stop();
5. Next zoom out to the main timeline and on the actions tab of the enemy movie clip enter this code:

onClipEvent (load) {

enemyspeed = 2;

// this sets the speed your enemy will move at

enemystepsright = 0;

// how far it has moved right

enemystepsleft = 0;

// how far it has moved left

enemydir = "left";

// its direction is set left

}

onClipEvent (enterFrame) {

if (this.hitTest(_root.char.attackpoint)) {

// if it hits the attackpoint in the character MC

enemyspeed = 0;

// its speed is set to 0

enemystepsright = 0;

// how far it has moved right is set to 0

enemystepsleft = 0;

// how far it has moved left set to 0

dead = true;

// dead is true

this.gotoAndStop("dead");

// goto and stop on the dead frame

}

if (this.hitTest(_root.bulleter)) {

// if this hits the bullet (_root.bulleter)

enemyspeed = 0;

// its speed is set to 0

enemystepsright = 0;

// how far it has moved right is set to 0

enemystepsleft = 0;

// how far it has moved left set to 0

dead = true;

// dead is true

this.gotoAndStop("dead");

// goto and stop on the dead frame

}

if (this.hitTest(_root.char) && !dead) {

// if this hits the character and is not dead

_root.char.jumping = false;

// characters jumping state is set false

_root.health.text -= 1;

// health goes down 5

_root.char.health-= 1;

_root.char.gotoAndStop ("injured");

}

if (_root.health.text<=0) {

// if the health is smller 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 233.2

_root.char._y = 124.3;

// the char mc's Y is set to 258.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.sun._x = 184.9

_root.healthbar._x = 177.0

_root.pausescreen._x = 0

_root.dead = false

}

if (_root.lives.text == -1) {

_root.gotoAndPlay(3);

_root._x = 0;

_root._y = 0;

}

if (!dead) {

// if NOT dead

if (enemydir == "right") {

// if the direction (enemydir) is right

enemystepsright += 1;

// its amount of steps (enemystepsright) right goes up 1

this._xscale = -100;

// _xscale (flips character) is set to neg. 100

this._x += enemyspeed;

// its X goes up the value of enemyspeed

} else if (enemydir == "left") {

// otherwise if the direction (enemydir) is left

enemystepsleft += 1;

// its amount of steps (enemystepsright) left goes up 1

this._xscale = 100;

// _xscale (flips character) is set to 100

this._x -= enemyspeed;

// its X goes down the value of enemyspeed

}

if (enemystepsright == 50) {

// if enemystepsright is equal to 100

enemystepsright = 0;

// enemystepsright is set to 0

enemydir = "left";

// direction is set to left

} else if (enemystepsleft == 50) {

// otherwise if enemystepsleft is equal to 100

enemystepsleft = 0;

// enemystepsleft is set to 0

enemydir = "right";

// direction is set to right

}

}

}

You can adjust the “enemyspeed”, “enemydir”, “enemystepright”, and “enemystepleft.” Enemystepright and Enemystepleft controls how far the enemy walks left and right, and Enemydir controls the direction in which the enemy starts walking.

6. Now, in order for the enemy to take affect we need to create a health bar a lives counter and a points counter. So first we need to make a few new layers.
7. Create a new layer and name it “counters” Then on that layer create 3 Dynamic text boxes name them, “lives”, “health”, and “score.”

8. Now create another layer and name it Actions. Then on the actions tab enter this code:

stop ();

lives.text = 3;

score.text = 0;

health.text = 50;

char.health=50;

char.pausesreen=1;

_quality = "MEDIUM";

_root._y = 0;

_root._x = 0;

this.onEnterFrame=function(){

healthbar.gotoAndStop(char.health);

if(char.health<=0){

cleanup();

}

}

The code you just typed is meant to give values to your counters. So lives = 3, health = 50 and so on. I’ve also gone ahead and added some other useful coding such as the quality settings, the starting x and y positions, and the health bar coding.

9. Next we need to create a health bar. Create a new layer and name it health bar. Now Draw a bar and convert it into a symbol, name it health bar.
10. Then double click the symbol to enter it. On the first layer count 50 frames and add a key frame.
11. Next move back to the first frame and shrink the bar horizontally until it is barely visible. Now add a shape tween between the key frames.

12. Now back on the main timeline select the health bar symbol and in the instance name box type “healthbar” with no spaces.
13. If you test the movie you will see that when your character comes in contact with the enemy both the health bar and text will decrease, and when your life hits 0 the scene should reset and the lives text should have decreased by 1.
14. Now that we have an enemy and counters we need to add some objects to add points. So, add another layer and name it points. Now draw an object. For simplicity’s sake I’m just going to draw a coin. Next convert it to a symbol and name it coin.
15. Next select the actions tab on the coin symbol and add this code:

onClipEvent (enterFrame) {

if (this.hitTest(_root.char)) {

// if this hits the char (_root.char)

_root.score.text ++;

// _root.score goes up 1

this.gotoAndStop("sound");

if (_root.score.text>=100) {

_root.lives.text ++;

_root.score.text = 0;

}

unloadMovie(this);

// this movie clip is unloaded

}

}

16. To add an extra effect you can add a sound to the object for when you pass over it. To do this, double click the object to enter it. On the frame on the actions tab type, stop(); Then create another frame delete the object in the frame and in the frame instance box type “sound.” And on the actions tab of that same frame type stop(); Now all you need to do is find a sound and place it in the frame.
17. Now whenever you hit one of these objects the points counter will go up one, and when the points text reaches 100 the counter will be reset to zero and the lives text will go up one.
18. Ok, now we have our enemy, and we have our counters. Now all we need is a way to attack the enemy. So, double click on your character to enter it. Now click on the attack frame. It should look something like this.

19. Now drag the coin object from the library and place it over the fist of the character. In the actions tab of the object add this code:

onClipEvent (load) {

_alpha = 0;

}

The Alpha code tells the movie what transparency we want the object to be.

20. Then in the instance name box type “attackpoint.”
21. Now test your movie and when you press the capslock button your character will attack.

Congratulations! You’ve completed part 2 of my Flash side scroller tutorial. Look for part 3 where I will teach you how to add dynamic objects to your level. If you have any questions please feel free to leave a comment.

Favorite House Life Character 2009

It's that time of year again. That's right it's time to choose who is your favorite House Life cartoon character is. So hurry and vote, the polls won't be open forever.

My trip through the Rip in the WoW time-space continum AKA: When Warlocks fly

Ok so I usually don't post things about the World of Warcraft on this blog but after what happened to me today I had to write something. So I was on my flying mount in Northrend doing my dailies when I flew over to the Wyrmcrest Temple and noticed that no one was there. Then I checked out Star's Rest and no one was there either.Then the D.E.T.L.A. Encampment and you guessed it, no one there either.Then just for kicks I went to Dalaran to see what would happen and lo and behold no one was there either and even cooler than that, I didn't get kicked off of my mount.

So after about an hour I was kind of getting sick of being the only person in the world, and tried to use my hearthstone but all it did was kick me off my mount. Then something Totally Awesome happened. I jumped and woosh!!! I was flying without a mount!!!!And for my final journey I wanted to see if there really was anything at the whirlpool in the middle of the map. When I got there I was a little disappointed to find nothing. Oh well.

Side Scrollers

Don't you miss the the good old days? The days when you would just sit down pick up the SNES controller and play for hours on end. Games like Donkey Kong Country, or Yoshi's Island. Every now and again I'll go back and replay my favorite childhood games, but lately I've been working on making my own side scrolling adventure game.

It was'nt easy coming up with the actionscript to make it all work but some how I figured it out.
Anyway, since I'm feeling nice and I want my hits to go up (Nudge, nudge, wink, wink) I've decided to write my own side scrolling adventure game tutorial. As I was making my game I searched for as many flash tutorials as I could looking for some of the more complex features that a side scrolling game would have and was dissapointed to find few if any tutorials on the subject. So I've decided that in this tutorial I will supply you with all of the knowledge that I have on the subject. The tutorial will cover everything from basic character creation, movement, object collection and counters, level progression, level objects, and yes even a pause screen. So look for this tutorial starting tomorrow. part one will be ready to read.

In House Life news, the Beta demo for the game is available on the site. So if you want to try it out Click Here

Happy Unicorn Day

Hello everyone. In light of a resent SNL that I saw I've decided to make today Unicorn day!! (Since, you know..., I have so much political power.) Anyway to celebrate the first Unicorn day I thought that I would post a video I found on YouTube. Enjoy.

Bob's new Blog

Not very often do I actually post here (by the way, this is bob, not ryan). Anyway, I'm starting a WoW blog (world of warcraft), if you don't know what that is then get off your butt and join the new (actually old) MMO sensation.

Anyway, it's called Bob's Causal WoW Blog. Come check it out if you play WoW, or even if you don't. Its where I get to be geeky without having someone tell me to shut up. ha!

Bugs

Lately I've been having some issues with the cite that I would like to draw to every one's attention. I think that the the problem could be caused by the version of Flash that the original cartoon was published in, but as of this moment I'm not sure why the problem exists. I'll be sure to keep you all informed of the status of the cite. Hopefully the problem will be resolved soon.

This is where you all say, "Wow! Do you practice being vague?"

Brain Power

I just watched the 60 min. report called Brain power, a wow. I never thought that we would come this far so soon. It's cool to think about. One day people with missing limbs will beable to have moving robotic arms, not too different from Cyborg here. If you want to watch it here's the link. http://www.cbsnews.com/video/watch/?id=4564186n

Rays Top 10: What not to do in a Scary Movie

As I was watching some scary movies this week I've noticed that there are certain things that people always do just before they pay the piper. So I've decided to let you all know in case you find yourselves in a similar situation.

10. Never say "I'll be right back" because you won't.
9. Searching for something with the lights off.
8. Separating from the group (duh!!!)
7. Following a ghost who you think is someone walking funny.
6. Locking yourself in a room with sharp objects.
5. Using a dogie door in a garage door as an escape route.
4. Standing and screaming at the killer.
3. Letting your girlfriend/boyfriend go to the bathroom while you wait in the other room.
2. Poking your head into a closet when you know someone else is in the house.
1. You lose your virginity you lose your life.