A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11246 Flash Movies | 9 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Gurgen Tagvorian
» Title: Perpetuum Mobile
» Description: It's just a Perpetuum Mobile for you
» More by Gurgen Tagvorian


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 6410 Flash Sites | 0 New Flash Links
What's New | Top 100 Flash Site

Featured Site

» Posted in the Flash Kit Links section
» Title: Atlantis Media Ltd
» Comments: Greg Rudman new media creative & website design - Atlantis Media Ltd


Random Links | Add your own Flash Related Links
Flash Tutorials 1192 Tutorials 7 New Tutorials Added!
What's New | Top100

» How to convert FLV video to MP3 audio for Mac OS
» Join flv videos together with just a few clicks
» How to convert flv file to avi for mac os x
» How to Create Christmas Flash Greeting eCard without programming skills
» How to Create Real Estate Flash Photo Gallery Presentation
» How to burn DVD, VCD, SVCD
» How to convert FLV to ASF with FLV to ASF converter for Mac os X
» 5 ways to convert PowerPoint to video
» How to Make Vista Buttons
» Unknown Tag: Title10
Random Tutorial | Add Site

bbm.netBBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting.

Click here for details »

Senior Web Analytics Engineer
Professional Technical Resources
US-OR-Beaverton

Justtechjobs.com Post A Job | Post A Resume


Tutorials Home What's New Top Rated Submit myTutes Random!

Search Tutorials


Tutorials Tutorials » Interactivity

Categories Simple and secure passwords
Author: Fizscy46 | Website: fgc.250free.com |

 
Page 1
1

I built this as a game to illustrate the food chain. Basically the game had six pictures of different plants and animals that needed to be placed in the correct order.
I wanted the pieces to "slide" back to their original position if they were dropped in the wrong place.
The trick to this is using trigonometry to get the distance of the movie clip being dragged from the point it started from.

To begin:
Create a shape and convert it into a MC(movie clip).
This will be your first draggable clip.
I use 6 in my example.
Create another MC that will be the size and shape of the hit area you want you dragging MC to react to.

Name this hit area MC "Hit1".
You can then set the alpha of Hit1 to 0.

I made them very small in my example.

In a blank layer to the main scene, and add this code to the first frame of your timeline:

MastX = 505;
Y1 = 10;
Y2 = 90;
Y3 = 170;
Y4 = 250;
Y5 = 330;
Y6 = 410;

These are the X & Y coordinates for all 6 of my draggabe MCs.
Since my draggable MCs are lined up vertically I can use 1 X value instead of 6 (which is "MastX").

On the main stage add this code to the first MC that will be draggable:

on (press) { this.startDrag(); }
on (release, releaseOutside) {
 if (this.hitTest(_parent.Hit1)) {
 this._visible = false; _parent.Right +=1;
 _parent.Place.Pic3.play();
 } else {
 this.gotoAndPlay("Move");
 } this.stopDrag();
}

Notice I use "_parent" instead of "_root".
I have found that while _root is a quicker solution in the beginning,
it can cause problems if you decide later that you want to have this movie load into another.
This is just my preferance.

The "on(press)" makes the MC draggable (duh!),
and the "on (release, releaseOutside)" checks to see if it is currently touching the hit area of the "Hit1" MC.

If it IS touching Hit1 when the mouse is released,
the draggable MC makes itself invisible, and then tells a MC named "Pic1" which is embedded in the MC named "Place" to play.
This reveals a larger picture of the one that is in the draggable MC (which is now invisible). The visual effect of this is that the draggable MC has found it's proper place on the stage.
It also adds 1 to the variable "Right".
In the last frame on the MC "Pic1" is a piece of code that checks to see if the maximum number of "Right" answers has been reached, and if it has, it tells a MC on the main stage (which is currently invisible) to play the "game Over" message.

The code for that looks like this:

if(_parent._parent.Right==6){
 _parent._parent.ExitMov.play();
}
stop();

If it seems like I am rushing over this a bit, it is because I want to get to the meat and potatos of this tutorial, which is what happens if the draggable MC is NOT touching the hit area of "Hit1" when the mouse is released.
In this situation the draggable MC will gotoAndPlay the frame "Move" on it's OWN timeline.
The first bit of code it encounters is this:

MyX = this._x;
 MyY = this._y;
 _parent.MyDist = Math.sqrt((MyX-_parent.MastX)*(MyX-_parent.MastX)+(MyY-_parent.Y1)*(MyY-_parent.Y1));

This is the good old Pythagorean Theorm in action, and it gives us the current distance from the original point.
It goes a little like this:
"The square of the hypotenuse of a right triangle is equal to the sum of the squares of the remaining two sides".
If that is not readily understandable (it sure wasn't for me), then I highly recommend getting "Flash Game Design Demystified" by Jobe Makar.
It has an excellent chapter on trig and how it is used in games.
That being said, in the next frame I put this code:

if(_root.MyDist> 1){
 gotoAndPlay(_currentframe +1);
 }else {
 this._x = _parent.MastX;
 this._y = _parent.Y1;
 gotoAndPlay(1);
 }

This checks to see if the draggable MC is currently less than 1 pixel/unit from it's original point, in which case it sets the X and Y to it's original coordinates.
If it is further than 1 pixel/unit from it's starting point then it goes to the next frame which has this code:

currX = this._x;
 currY = this._y;
 targetX = _parent.MastX;
 targetY = _parent.Y1;
 dX = targetX-currX;
 dY = targetY-currY;
 currX += dX/3;
 currY += dY/3;
 this._x = currX;
 this._y = currY;
 gotoAndPlay(_currentframe-2);

This moves the draggable MC and sets up a loop that creates a deminishing return, or easing out effect.

Thats all there is to it.
If you still have questions, feel free to email me.
mark@zingermedia.com
Flash on!

1

» Level Intermediate

Added: : 2003-07-28
Rating: 3.27 Votes: 15
Hits: 1307
» Author
Meh, too lazy!
» Download
Download the files used in this tutorial.
Download (17 kb)
Get conversion and unzipping tools for PC and Mac here!

» Forums
More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.
10 9 8 7 6 5 4 3 2 1
Read or Post Comments
 
   
 

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers