Thursday, December 09, 2010
The Blog has Moved
Hello everyone!! for the past few months I have been working on the new House Life site, and as of today it is finally done!!! Along with the new look, I have decided that it was time to make the House Life Blog an official part of the web site. So for all future posts just go to House Life Cartoons.com
Tuesday, March 16, 2010
Saturday, February 13, 2010
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:
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
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"
}
}
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"
}
}
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:
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
Monday, February 01, 2010
Wednesday, January 20, 2010
Cartoon Update: New Short, Dead Tom
Tuesday, November 17, 2009
Monday, October 26, 2009
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.
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.
Subscribe to:
Posts (Atom)