More About Drop and Drag

Hello and Hai,

After finish up with four activities, I think I am fall in love with Flash. It is not so hard to learn about Flash. Just keep on practicing and you can do great in Flash. Watch video on tutorial about Flash. Learn step by step. Do not stress yourself. If you are unable or unsuccessful in certain step, just take a deep breath, rest your mind and watch the tutorial again. That is what I am practicing when I am facing difficulties during my Flash lesson. Just enjoy and have fun.

Last week, I have learn some basic of drop and drag. This week, we are being introduced to more advanced drop and drag. But, no apps for this activity. We got handout that guide us on how to do the advanced drop and drag.

Picture above show flash interface of my advanced drop and drag. As u seen, there are five elements on the stage. Pink circle, blue square, 2 green rectangles and next button. When user drag the circle to one of the green rectangle and drop the circle, if the rectangle is the correct place for the circle correct symbol will appear. If the rectangle is not the correct place for the circle it will going back to its original place. It is same for the square. 

Now, let learn step by step on how to develop this interesting application. 

Circle and square on the left side are movie clip symbols whereas rectangles on the right side are movie symbol. Next button is used to navigate into another flash video. 

Steps:

1. Create a movie clip symbol. Insert > New Symbol and Select Movie Clip. Name the symbol as place. 

2. Draw the rectangle in the first frame of the movie clip. Choose rectangle tool and draw the rectangle. Fill it with your desired colour.

3. Then add stop actionscript on the frame.

    

   stop();

4. Add a keyframe in frame 2 by press F6 or right click and choose insert keyframe. Add stop actionscript on the frame. Picture below show the postion of frame 2.

5. Add also a red line as in the picture below in frame 2 in movie clip timeline. 

6. Go back to Scene 1. 

7. Rename the layer 1 as response. This layer hold 2 rectangles which become the place to drop the circle or square.  Open library and drag place movie clip into the stage. Rename the instance as box1. Instance can be found on properties panel. 

8. Drag place movie clip into the stage for the second time. Rename the instance as box2. 

9. Draw circle and square. Convert both of the shapes into symbol which is movie clip symbol. Go to Modify > Convert into symbol> Rename the symbol and choose movie clip for symbol type. 

10. Add new layer and insert stop actionscript. 

11. Right click the circle symbol. Choose Action and insert following actionscript. 

on(press)

{

startDrag(this);

}

on(release)

{

stopDrag();

if ((this._x>341.0) & (this._x<=436.4) & (this._y>=229.3) & (this._y<=236.8)){

_root.box2.gotoAndStop(2);

}else{

_root.box2.gotoAndStop(1);

this._x= 99.5;

this._y= 87.3;

}

}

12. Do the same to the rectangle symbol. 

on(press)

{

startDrag(this);

}

on(release)

{

stopDrag();

if ((this._x>341.0) & (this._x<=422.4) & (this._y>=87.3) & (this._y<=92.3)){

_root.box1.gotoAndStop(2);

}else{

_root.box1.gotoAndStop(1);

this._x= 99.5;

this._y= 229.3;

}

}

Where can you get all the numbers of x and y?

- Move the circle to the highest top left location you will allow user to drop it. See the x and y coordinates for the circle highest left position. Picture below shows how to position the circle at the highest top left and red box show where you can find the value of x and y. 

- Then move the circle to the lowest right hand location you will allow the user to drop it and still receive the correct response. Picture below shows the position of the circle at the lowest right hand location.  

if ((this._x>341.0) & (this._x<=436.4) & (this._y>=229.3) & (this._y<=236.8))

First x = Lowest x coordinate.

Second x = Highest x coordinate

First y = Lowest y coordinate

Second y = Highest y coordinate.

12. For the next button, insert the following actionscript. 

on (relase) 

{

  loadMovieNum ("video.swf", 0);

}

Very fun activity in class. Double fun when I manage to finish this tutorial with succeed. Now, it time to think about our first assignment. See you again. 

-Vicki-