Thomas Palmer
This user hasn't shared any biographical information
Posts by Thomas Palmer
Flash Tutorial 5: A Moving Character Type 1
Feb 1st
This is for action-script 2.0
There are two types of moving character. As I like to classify them, full 2D and semi 2D. This tutorial is for the full 2D type.
(A popular example being the original Mario game.
To make it you need the following:
animations:
-right view standing (1 frame)
-right view walking (standard of 3-4 frames)
-right view jumping (standard of 12 frames (tween up and down))
-right view crouching (1 frame)
(there are no left view because action-script can change it’s direction dynamically).
Detection Scripts:
-Detect the pressing of the UP key
-Detect the pressing of the Down key
-Detect the pressing of the Left key
-Detect the pressing of the Right key
Action Scripts:
-Flip the character
-Make the character jump
-Make the character move left/right
so, how do we set this up you ask?
First, make a movie clip for each of the animations (all 4).
Then, Make a new movie clip called “character” and give it the instance name “character”. Make 4 blank frames in the “character” movie-clip and put one of the animation movie-clips in each of them. Then put the Stop(); command on all of the 4 frames. Now, label each frame as appropriate to its animation “walking” “standing” “jumping” “crouching”.
now It’s time for the action-script! (To be placed in the “character” movie-clip).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | onClipEvent(enterFrame){ if(Key.isDown(Key.RIGHT)){ this._xscale = 100; this._x += 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } }//end Key down RIGHT if(Key.isDown(Key.LEFT)){ this._xscale = -100; this._x -= 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } }//end key down LEFT if(Key.isDown(Key.UP)){ gotoAndStop("jumping"); }//end Key down UP if(Key.isDown(Key.DOWN)){ gotoAndStop("crouching"); }//end key down DOWN }//end on Clip Event |
Now for the last bit of scripting.
Make sure you put the stop command in the last frame of every animation except “walking”;
Now put:
at the first frame of your jumping animation.
and:
Code:
at the end of your jumping animation.
and you’re done!
Flash Tutorial 4: Fun with the Cursor!
Jan 29th
This tutorial is in action-script 2.0
First, lets make a cursor.
Draw a cursor and turn it into a movie clip.
open up the actions window for the movie clip and place this action-script in it:
now go into your first frame’s actions window and type:
congratz! you now have a custom cursor!
but, lets do a little more now.
go into your cursor’s movie-clip and make two dynamic text boxes next to your cursor. now, give one box the instance name mousex and the other the instance name mousey.
now, select your cursor image (not the text boxes) and make it into a movie-clip again, so you have a movie-clip inside a movie-clip. in the actions of your new movie clip, type:
1 2 3 4 | onClipEvent(enterFrame){ _parent.mousex.text = _root._xmouse; _parent.mousey.text = _root._ymouse; } |
Now you can see the coordinates of your mouse!
Flash Tutorial 3: Event Detection
Jan 8th
This tutorial is for action-script 2.0
Commands to be covered: (all commands to be used in movie clips)
Code placed in the { } is executed when the specified condition occurs. For example:
Code:
1 2 3 | on(press){ trace("this happens when the movie-clip is pressed by the mouse"); } |
* load
The action is initiated as soon as the movie clip is instantiated and appears in the Timeline.
* unload
The action is initiated in the first frame after the movie clip is removed from the Timeline. The actions associated with the Unload movie clip event are processed before any actions are attached to the affected frame.
* enterFrame
The action is triggered continually at the frame rate of the movie clip. The actions associated with the enterFrame clip event are processed before any frame actions that are attached to the affected frames.
* mouseMove
The action is initiated every time the mouse is moved.
* mouseDown
The action is initiated when the left mouse button is pressed.
* mouseUp
The action is initiated when the left mouse button is released.
* keyDown
The action is initiated when a key is pressed. Use Key.getCode() to retrieve information about the last key pressed.
* keyUp
The action is initiated when a ky is released. Use the Key.getCode() method to retrieve information about the last key pressed.
* data
The action is initiated when data is received in a loadVariables() or loadMovie() action. When specified with a loadVariables() action, the data event occurs only once, when the last variable is loaded. When specified with a loadMovie() action, the data event occurs repeatedly, as each section of data is retrieved.
* rollOver
The action is initiated when the move clip is rolled over by the mouse.
* rollOut
The action is initiated when the mouse rolls off of the movie clip.
* press
The action is initiated when the mouse presses the movie clip.
* release
The action is initiated when the mouse releases a press on the movie clip.
Flash Tutorial 2
Jan 6th
This tutorial is for actionscript 2.0
commands/statements to be covered:
Definitions:
The stop(); command:
The stop command is used to stop your flash file from moving further in its time-line.
The gotoAndPlay(); command:
The gotoAndPlay command does exactly what it sounds like, it goes to a frame in the time-line, and has the time-line continue playing from there.
The gotoAndStop(); command:
The gotoAndStop command is just like the gotoAndPlay command except once it goes to the designated frame, it stops progressing further in the time-line.
The if(){ } statement:
The if statement is used to restrict a script action from occurring unless a certain requirement or condition is met.
The else if() { } statement:
The else if statement is used after the if statement when the if statements requirement is not met and the programmer wants to check for a different requirement and designate a different response to be taken if the new requirement is met.
The else() { } statement:
The else statement is used after the if statement or else if statement if the programmer wants an action to be executed on the event that none of the requirements listed in the if/else if statement(s) are met.
Usage:
The stop command can only be placed as action-script in a frame. Just write “Stop();” anywhere in the action-script of a frame, and the time-line will stop progressing at that frame.
The gotoAndPlay command can only be placed as action-script in frames or movie-clips. in a frame, all you need to do is place the command in the frame you want to skip from and place the frame number you want to skip to inside the (). for Example: gotoAndPlay(5); placed in a frame will cause the time-line to skip from the frame where the command is written to frame 5 and have the time-line continue to play from there.
If you write this command as action-script in a movie-clip placed in your main time-line, your movie-clip will gotoAndStop(5); instead of your main time-line because movie-clips have time-lines of their own, and the time-line it is placed on is it’s “parent”. to control the main time-line (in this case the movie-clip’s parent) you must access. You can access the parent of a movie-clip simply by typing _parent. before the command. So to control the main time-line from this movie-clip, you can type _parent.gotoAndStop(5); furthermore, if you place yet another movie-clip inside this movie clip, the main time-line becomes the new movie-clip’s parent’s parent. So, to access the main time-line from this movie-clip inside the original movie-clip, just type _parent._parent.gotoAndStop(5); It’s that simple.
To use the if statement, you must first know what requirement or condition you are looking to see is met. You must then know what you want to happen if that condition is met. For example, ill use this script: (to be placed in a frame)
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var Toms_color = "green"; var Arias_color = "blue"; var Jacksons_color = "red"; var Brians_color = "blue"; var Nicks_color = "red"; if(Toms_color == "red"){ trace("Toms color is red"); } if(Toms_color == "blue"){ trace("Toms color is blue"); } if(Toms_color == "green"){ trace("Toms color is green"); } |
As you can see, you type:
1 2 3 | if(*condition*){ *action if condition is met* } |
I used == instead of = because == is used if you want to compare two variables for equivalence. = is used if you want to make a variable equivalent to a different variable.
you can even make if statements like:
Code:
1 2 3 | if(1 + 1 + 1 == 3){ trace("I can do math!"); } |
The else if statement is written just like the if statement. The difference is that there MUST be an if statement or another else if statement before it, and its condition can only be met if none of the conditions before it are met. For example:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var Toms_color = "green"; var Arias_color = "blue"; var Jacksons_color = "red"; var Brians_color = "blue"; var Nicks_color = "red"; if(Toms_color == "red"){ trace("Toms color is red"); } else if(Toms_color == "blue"){ trace("Toms color is blue"); } else if(Toms_color == "green"){ trace("Toms color is green"); } else if(1 + 1 == 2){ trace("this condition will not be met"); } |
because the condition if(Toms_color == "green") is met, the else if statement if(1 + 1 == 2) will not be checked.
If however you change Toms_color to “purple”, the condition if(Toms_color == "green") will not be met, and if(1 + 1 == 2){ will be met.
The else statement MUST be used after an if statement or an else if statement. The else statement will only execute if none of the statements before it are met. For example:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var Toms_color = "Purple"; var Arias_color = "blue"; var Jacksons_color = "red"; var Brians_color = "blue"; var Nicks_color = "red"; if(Toms_color == "red"){ trace("Toms color is red"); } else if(Toms_color == "blue"){ trace("Toms color is blue"); } else if(Toms_color == "green"){ trace("Toms color is green"); } else { trace("Toms color is not red, green, or blue, it is "+Toms_color); } |
Because Toms_color does not equal red,blue, or green, the else statement is triggered, and the trace command is output.
functions that can be used in these statements:
== (is equivalent to)
!= (is not equivalent to)
> (is greater than)
< (is less than)
>= (is greater than or equal to)
<= (is less than or equal to)
you can also shorten your script by placing multiple conditions in one if/else if statement by using && or ||.
using && is almost like saying “and”.
using || is almost like saying “or”.
in &&, all of the conditions must be met.
in ||, only one of the conditions must be met.
For example:
Code:
1 2 3 4 5 6 7 8 9 10 11 | if(1+1==2 && 1+2==3 && 1+3==4){ trace("this will be displayed because all of the statements are true."); } if(1+1==2 && 1+4==3 && 1+3==4){ trace("this will not be displayed because 1 + 4 != 3."); } if(1+1==2 || 1+4==3 || 1+4==4){ trace("this will be displayed because at least one of the statements is true, 1 + 1 = 2"); } |
Flash Tutorial 1
Jan 2nd
To make things easier for those who are new to flash, we will be using actionscript 2.0
Before I explain some action-script, I will briefly describe the flash interface. If you are already familiar with it’s basics, you may skip this.
First, we need to start up flash. Once started, you will see the option to make a new flash document, click it. (If you are using flash CS3, choose to use action-script 2.0)
You now have a blank document open. Here are some things you should notice:
At the very top are the basic options (file, edit, view, insert, etc…) I may refer to those options in other tutorials.
Below this is the time-line. the time-line is broken into frames (labeled at the top from 1 to infinite).
You will notice that to the left of the time-line, are the layers. below the layers you see some small buttons to have layers added or deleted.
Below The time-line and layers, is the main window. This is where all images and objects are displayed. You can put images or objects above other images or objects simply by having them placed in a higher layer.
To the left of the main window you see various tools used for objects in the main window such as (select, moves, line creation, rectangle/circle creation, the paint bucket, etc…)
On the very bottom bar (below the main window) you can choose from options such as the main window’s size, the frame rate, and the background color.
Now that you know some of the basics of the interface, I can explain some basic action-script. these are the commands I will cover:
Now, you may ask, where do I type these commands? Well, in action-script 2.0, you can apply script to many objects such as buttons, movie-clips, and frames. to do this, select the object (by clicking it and seeing that it is “highlighted”) and press your F9 key. or right click and select “actions”.
So, to start this off, go to your tools to the left of the main window, select the rectangle tool and draw a rectangle in the main window. then, choose the black arrow tool(selection/normal cursor) and select your rectangle. Then, you can either right click and select “convert to symbol” or you can press F8. In the popup, write a name for you move-clip and make sure the check-box for “movie-clip” is selected. then press “ok”.
you can now add action-script to this movie-clip. left click it once and press F9 or right click it and select “actions”.
in the window that pops up type the following:
Code:
1 2 3 4 5 6 | onClipEvent(enterFrame){ trace("Hello World"); trace(variable_1); trace(_global.variable_1); trace(_global.variable_2); } |
now, press CTRL + Enter to preview your flash file. you should notice three things.
1. text keeps popping up non-stop
2. you can see “hello world”
3. you see undefined most of the time.
This can all be explained in the code you put into the movie-clip.
I will explain the code line by line:
Because there is only one frame, you will “enterFrame” at whatever speed your frames per second is. (The default is 12, so you whatever you have inside the { } after onClipEvent(enterFrame){ will happen 12 times every second.
The trace command is a useful command for flash developers because it allows us to see when things happen, or what a variable is equal to. It is especially useful because it wont be shown when the document is published. In this case we have (“Hello World”); after it. no matter what you want to output with the trace command, you will always put it in () and end it with ; However, if what you want to output is a string of text, like Hello World, you must put it in double quotes so flash nows that it is just a string of text. hence trace(“Hello World”);.
again the trace command. The difference here however is that there are no double quotes. because of this, flash interprets “variable_1″ as the name of a variable. We have, however, not made a variable so it does not know what value to output. because of this, it will, by default output “undefined”. Meaning that the variables is undefined.
and
This again is the trace command, and again, there are no quotes, so flash will take _global.variable_1 and _global.variable_2 as variable names (that are of course undefined). the difference here though, as I’m sure you have noticed is the “_global.” _global. is placed in front of a variables when it is to be used from any place in your flash document. without it, the variable is restricted to the code where it is defined.
this last bracket is used to close off the onClipEvent(enterFrame){ bracket. Everything between those two curly brackets is supposed to happen “onClipEvent(enterFrame)” or, 12 times a second.
Now, lets make this a little more interesting.
Open up the actions for the movie clip you made and add
Code:
right below onClipEvent(enterFrame){
If you press CTRL + Enter you will see that Hello World and Hello to you too! are both output by the trace commands.
This is because you designated a value for the variable “variable_1″; by using the var command. you made the variable_1 = a string of text by putting the text in double quotes. If you did not use double quotes, it would think Hello to you too was the name of a variable and try to make variable_1 equal it its value (undefined).
Well, now we should finish this off. Exit the actions window for the movie-clip and open the actions window for frame 1 be either right clicking it and selecting “actions” or left clicking it once and pressing F9.
here type the following code:
Code:
1 2 3 | var a_brake = "over the world!" _global.variable_1 = "watcha "+"wanna"+" do?"; _global.variable_2 = "take "+a_brake; |
now, I will explain this line by line:
the var command states that there is a variable named whatever comes after it (in the case “a_brake”). at the same time, we can put = #/variable/”text”. if you want it to equal a number, do not use double quotes. if you want it to equal a variable, do not use double quotes, but if you want it to equal a string of text, put that string of text in double quotes. You can also split this up. First declare the variable exists by saying “var a_brake” and then latter on in the script you can make it equal to something a_brake = #/variable/”text” .
when making a _global. variable, the var command is not needed.
however, everything after it is the same.
here I said it equals “watcha ” (the string of text “watcha “) + “wanna” (the string of text “wanna”) + ” do?” (the string of text ” do?”). when adding string of text together, it appends one after the other, meaning _global.variable_1 will equal “watcha wanna do?”. because this is an _global. variable, it can be accessed by the script in our movie clip.
Here, we say that _global.variable2 equals the string of text “take ” plus the variable a_brake (it’s a variable because there are no quotes around it). because a_brake is a equal to a string of text, it will append it after “take “.
pressing CTRL + Enter should display this.
