Drag and Drop Theory
drag_and_drop_game_master.fla | |
File Size: | 124 kb |
File Type: | fla |
Getting the "Splash" intro page operational
Put your actual name in the title box
To stop the automatic movement between the two scenes (intro and game), we need to:
To stop the automatic movement between the two scenes (intro and game), we need to:
- on the action layer, go to frame 30, and press F6 to create a key frame. Note that there is now a little circle in frame 30 on the timeline.
- in frame 30 of the action layer, open up the action palette and enter a stop action. Be careful about the case, the brackets, and the semicolon.
stop();
- When we run the movie, you will notice a white background is now visible. This is because all of the other background layers are only visible for one frame. Solution, we need to extend all the other layers to frame 30.
- To do this, highlight frame 30 all the way down the timeline and press F5. (Make sure that you do not have the action layer selected). Note that there is now an empty rectangle icon in each of the frame 30s.
- Run the movie again and you will notice that the background is now visible for all of the frames.
Basic Animation
Let's fix up the animation of the foxes: peeking behind the tree and swinging on the vine
Programming the Button to go to the next scene "Game"
- Click on the "START" button.
- Go to your actions palette, and enter the following code.
on(Press){
gotoAndStop("Game", 1);
}
- Notice the name of the scene is "Game" and we are going to frame 1. It is important that the scene name is spelled exactly the same as it is on our scene list. It is also case sensitive. So watch those capitals.
- Run the program and make sure the button works.
- If you navigate to the "Game" scene, you will notice that the "BACK" button has already been programmed for you. Double check to make sure it works properly.
How To Drag and Drop a Movie Clip Anywhere on the Stage
- Navigate to the "Game" scene.
- Normally we need to create each individual movie clip symbol (or drag a movie clip from the library onto the stage). However, for this exercise, I have provided you with the necessary movie clips representing the various body parts.
- Give the movie clip symbol a meaningful instance name (ex. eyes1). Click on and name "eyes2" and "eyes3"
- On your timeline, go to the Action / ActionScript layer.
- Select frame 1 of the ActionScript layer and enter the following code in the actions palette
eyes1.onPress = function(){
this.startDrag();
}
eyes1.onRelease = function(){
this.stopDrag();
}
In simple words when the movie clip is pressed (onPress action) the drag action occurs and when the mouse is released (onRelease action) the drag ends. It is important to remember that only one movie clip can be dragged at a time. After a startDrag() operation is executed, the movie clip remains draggable until it is explicitly stopped by stopDrag() or until a startDrag() action for another movie clip is called.
Repeat this process for all of the other eye movie clip symbols in your game, being sure to enter the corresponding code onto Frame 1 of your ActionScript layer. Don’t worry, the code will get longer and longer. The great thing about using this method to do your programming is that if you delete a symbol from the stage, your coding is still safe and sound.
You can make the coding even easier by using the “for loops”. More on this later.
An alternative method would be attach the programming to each movie clip itself. The danger here is that if you delete your movie clip symbol from the stage, the coding goes with it. But as the designer of this game, it is your choice which method you want to use.
Before we move on:
- Click on each of the mouths and name as "mouth1", "mouth2", "mouth3"
- Continue for the other parts
• leg1 to leg7
• head1 to head4
• body1 to body3
• tail1
For Loops - an Introduction
- If you recall, for each movie clip, we gave it a unique but meaningful instance name. (ex. eyes1)
- On our actions layer, we then programmed each movie clip individually
left_eyeball.onPress = function()
{
this.startDrag();
}
left_eyeball.onRelease = function()
{
this.stopDrag();
}
- We would repeat this process for all of the other movie clip symbols in the game.
- The problem here is that the code gets longer and longer and there is a lot of copy and pasting involved. There must be a short cut way that would stream line things further.
Introduction to For Loops to Repeat Tasks
- The basic structure of a for… loop would be as follows:
for ( initialize a counter; conditional statement; increment a counter){
do this code;
}
Notice how all the steps of the loop are taken care of in the for loop statement.
Each step is separated by a semicolon: initiliaze counter, conditional statement, and the counter increment.
A semicolon is needed because these are separate expressions. However, notice that a semicolon is not needed after the "increment counter" expression.
- The loop works according to the following principal
- Set a counter variable to some initial value.
- Check to see if the conditional statement is true.
- If the conditional statement is true, execute the code within the loop. If the statement is false, leave the looping mechanism completely.
- Increment a counter at the end of each iteration through the loop.
- Continue this process while the conditional statement is true.
- Here is a simple for loop that would count from 1 to 5 by 1
for (var x = 1; x <= 5; x++)
{
trace (x);
}
// notice that x++ could have been written as x = x + 1
- Here is a simple for loop that would count from 10 to 33 by 3
for (var x = 10; x <= 34; x = x + 3)
{
trace (x);
}
// notice that x = x + 3 could have been written as x += 3
- Not only also have a loop that decrements or has a counter that decreases in value counting backwards. For instance, this loop would count down from 10 to 1 by 1
for (var x = 10; x >= 1; x--)
{
trace (x);
}
// notice that x-- could have been written as x = x - 1
- Here is a simple for loop that would count from 100 to 25 by 4
for (var x = 100; x >= 25; x = x - 4)
{
trace (x);
}
// notice that x = x - 4 could have been written as x -= 4
So How Could We Apply This To Our Game Program
- As we discussed, each part requires the same sections of code to do the dragging and dropping. The only difference being the instance name. This is a lot of doing the same thing over and over.
- What we really want to do is create one looping structure that will allow us to control all of the movie clips or type of movie clips on our stage at one time. For instance, control all 10 arms, all 8 legs, or maybe all 18 parts in total
- Imagine a scene or stage that has a series of rectangle movie clips
- Provide each movie clip with an instance name such as rectangle1, rectangle2, rectangle3, etc.
- On our actions layer, we create a “for” loop to control all of the rectangle movie clips within one structure. Be aware that i, name, and num_rectangle are simple variable names and would be changed to suit your particular program.
num_rectangle = 3; // note that num_rect = specific number of movie clips... this would normally go at the top of the code
for (var i = 1; i <= num_rectangle; i++)
{
var name="rectangle" +i;
_root[name].onPress = function()
{
this.startDrag();
}
_root[name].onRelease = function()
{
this.stopDrag();
}
}
- More complicated: A similar technique could also be used in the following situations within our game.
- At startup, record the initial x and y locations of every single movie clip. Be careful, you need two variables here.
- When the reset button is pressed, return every single movie clip to its’ original position and visibility
- If using tabs to display different types of parts (i.e. arms, legs, noses, etc.), use a for loop to determine whether the other parts need to remain visible or be hidden.
- There are lots of ways for loops can be used within the program, you just have to dare to try.
Creating a "Reset" system
The easiest way to approach this is to create a separate movie clip called “start” or “initialization” and putting all of the reset coding as part of a onClipEvent (load) event.
When the game is loaded, we need the computer to record the initial placement or position of each of our movie clips that represent the parts of our game. For example, for "eyes1", we need to know both its starting x and y coordinates.
So... how do we do this. Note, I am only going to do this for one of the movie clip objects. You will have to figure it out for the rest, either by handling each movie clip individually, or by utilizing for loops. But remember... there is only one "start" or "initialization" movie clip and one "RESET" button needed.
When the game is loaded, we need the computer to record the initial placement or position of each of our movie clips that represent the parts of our game. For example, for "eyes1", we need to know both its starting x and y coordinates.
So... how do we do this. Note, I am only going to do this for one of the movie clip objects. You will have to figure it out for the rest, either by handling each movie clip individually, or by utilizing for loops. But remember... there is only one "start" or "initialization" movie clip and one "RESET" button needed.
- On your main timeline, create a new layer called "start actions". Put it at the top of the list.
- Create / Insert a new movie clip called "start" or "initialization"
- Within the movie clip, create a text box that says start. Try to center the text around the "+" icon. Don't worry about making things look pretty. This clip is not going to be seen by the person playing the game.
- Return to the main scene timeline. If necessary, drag the movie clip from your library onto the stage. Position it so it is just off the stage.
- Click on the movie clip, and go to the action palette and enter the following code. The code tells the computer that when the game is first loaded and before the player starts dragging things around, we need to have the computer remember all of the x and y coordinates for every part / movie clip in our game.
onClipEvent (load) {
_root.eyes1_beginx = _root.eyes1._x; _root.eyes1_beginy = _root.eyes1._y; } |
- Next, we need to create a "RESET" button
- Click on your "RESET" button and enter the following code that will reset the current coordinates of the movie clip "eyes1" to the values that it had before the player started dragging things around.
on(Press)
{ _root.eyes1._x = _root.eyes1_beginx; _root.eyes1._y = _root.eyes1_beginy; } |
- Test your game and make sure that you are able to drag this movie clip anywhere on screen and when you press the "RESET" button that the movie clip returns to its starting position.
- When you are confident that it is working properly, expand the coding so that the onClipEvent(load) and the "RESET" button control all of your movie clips. Remember... make use of for loops to simplify your life.
- When using for loops, you need to utilize the _root command for the variables you previously declared
for (var i=1; i<= _root.nummouth; i++)
{ var name="mouth" +i; var beginnamex = "begin_" +name +"x"; var beginnamey = "begin_" +name +"y"; _root[beginnamex] = _root[name]._x; _root[beginnamey] = _root[name]._y; } |
Assignment Details
In the real world, Mr. Potato Head is a collection of plastic body parts that kids could stick on a real potato to make a funny-looking person. In later years, a plastic potato body was provided.
In our digital version, we will create a drag and drop game similar to Mr. Potato Head. We will provide a collection of accessories that can be selected and positioned over an object body to create an endless range of interesting looking and humorous characters.
If you aren’t into Mr. Potato Head, you could create your own variation. Some ideas include:
Also consider the order of the objects. What should appear behind or in front of another object? For instance, the eyeglasses should appear on top of the eyes, and the legs should appear below or behind the potato body.
Your project must also include a reset button that resets all objects and accessories back to their original positions (Hint: Record the values). If you have included any options to change color, size, rotation, or other properties, your reset button should restore movie clips with their original properties. Consider creating a separate movie clip called “start” or “initialization” and putting all of this reset coding as part of a onClipEvent (load) event.
Unlike the accessories that are drag and droppable anywhere on the game screen, the movement of the main object (the potato) should be restricted to a defined area or region of the screen.
Your completed project must have a music track that plays in the background and can be controlled by play, stop, rewind buttons. (For more advanced projects, you could even control the volume level or allow users to select which song to play)
In our digital version, we will create a drag and drop game similar to Mr. Potato Head. We will provide a collection of accessories that can be selected and positioned over an object body to create an endless range of interesting looking and humorous characters.
If you aren’t into Mr. Potato Head, you could create your own variation. Some ideas include:
- Decorating a Christmas Tree
- Carving or Decorating a Jack-o-lantern
- Designing a customized vehicle (truck, car, motorcycle)
- Designing a rock-star, fashion model, or other character
Also consider the order of the objects. What should appear behind or in front of another object? For instance, the eyeglasses should appear on top of the eyes, and the legs should appear below or behind the potato body.
Your project must also include a reset button that resets all objects and accessories back to their original positions (Hint: Record the values). If you have included any options to change color, size, rotation, or other properties, your reset button should restore movie clips with their original properties. Consider creating a separate movie clip called “start” or “initialization” and putting all of this reset coding as part of a onClipEvent (load) event.
Unlike the accessories that are drag and droppable anywhere on the game screen, the movement of the main object (the potato) should be restricted to a defined area or region of the screen.
Your completed project must have a music track that plays in the background and can be controlled by play, stop, rewind buttons. (For more advanced projects, you could even control the volume level or allow users to select which song to play)