Groups | Blog | Home
all groups > flash actionscript > november 2005 >

flash actionscript : Drag & drop 2 objects to play movie


alanwallace4
11/12/2005 7:22:29 PM
Hello,
Wasnt too sure what to say in my title.
Anyway, what i would like to do is this..

I have a number of football teams and would like to show the results between
the teams.
So i will have lets say 14 thumbnail team photos (team1.jpg, team2.jpg, etc)
and i would like the user to be able to drag and drop a thumbnail into a
specific area/box (lets say the home box) and then drag and drop another thumb
into another box (the away box). When both boxes contain a team i would like to
display ,in a text field (mytext), the result, line-ups, goalscorers, etc for
the game.
Any help would be very much apreciated
Alan

NSurveyor
11/12/2005 8:34:25 PM
Can you post just a snipit of what the textfile will look like?

--
NSurveyor
:-.-:-.-:-.-:-.-:-.-:-.-:-.-:-.-::-.-:
geocities.com/swf7463/
geocities.com/saif7463/
:-.-:-.-:-.-:-.-:-.-:-.-:-.-:-.-::-.-:
[quoted text, click to view]

kglad
11/12/2005 8:41:24 PM
alanwallace4
11/12/2005 8:45:57 PM
Hello,
Yes, head to head results.
The results and line-ups etc will be loaded from a basic text file (result1.txt, result2.txt,etc).
Cheers
molebhai
11/12/2005 9:00:12 PM
there are many ways to achieve
this i believe is the easiest to understand

you will need to store the team data in each picture.
if team 1's instance name is team1_mc
first give the team an index number
--> team1_mc.ID = 0; ( recommended to start indexes with 0 )
create an array that will contain the data to every other team
--> team1_mc.dataArray = new Array(14); // ( assuming 14 total teams )
team1_mc.dataArray[0] = null // self
team1_mc.dataArray[1] = "team1 vs team2 data text";
team1_mc.dataArray[2] = "team1 vs team3 data text"
do this for all the teams...

and do all that for each team..

now whenever an image is dropped into a box..
- store a reference to the clip that was just dropped
- check if both boxes are filled.
if they are then access the data arrays inside the clips using the ID's


box1 box2
user drops team4_mc into box1
box1.currentTeam = team4_mc
// check if both boxes are full --- nope -- do nothing
user drops team10_mc into box2
box2.currentTeam = team10_mc
// check if both boxes are full --- yup

// show data
display_txt.text = box1.currentTeam.dataArray[ box2.currentTeam.ID ];

------<>end

now this can be a very burdonsome task depending on how much data you
have and how complicated it is and how you want to display it.
so you will probably want to come up with a clever way of storing team
data in different arrays or objects.

the psuedo example i've shown is meant to just give a basic idea.
if you need more specific help i will need to know more about what kind
of data (and how much) you have and how you have set up your stage.

hope this helps;
[quoted text, click to view]

kglad
11/12/2005 9:09:08 PM
NSurveyor
11/12/2005 9:43:50 PM
Put each thumbnail in a MovieClip and look up startDrag, stopDrag, and
_droptarget: these three are key to making it work. You could try something
like:

//Array of instance names of the thumbnail MovieClips
thumbnails = [t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, t12, t13, t14];
//Array of team names
teamName = ['Team 1', 'Team 2', 'Team 3', 'Packers', 'Bulls', 'Team 6', 'team
7', '8', '9', '8', '9', '10', 'team 11!', 'team12', 't13', 'tEaM14'];
//Array of 'ids' for each team (corresponds with thumbnails and teamName)
data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
//Set up currently selected teams
home_mc.curT = null;
away_mc.curT = null;
//Set up each thumbnail
for (var t = 0; t<thumbnails.length; t++) {
var cT = thumbnails[t];
cT.ox = cT._x;
cT.oy = cT._y;
cT.data = data[t];
cT.onPress = function() {
this.swapDepths(this._parent.getNextHighestDepth()-1);
this.startDrag();
this.onMouseUp = function() {
if (eval(this._droptarget) == home_mc || eval(this._droptarget) ===
home_mc.curT) {
home_mc.curT._x = home_mc.curT.ox;
home_mc.curT._y = home_mc.curT.oy;
this._x = home_mc._x;
this._y = home_mc._y;
home_mc.curT = this;
if (this == away_mc.curT) {
away_mc.curT = null;
}
} else if (eval(this._droptarget) == away_mc || eval(this._droptarget) ===
away_mc.curT) {
away_mc.curT._x = away_mc.curT.ox;
away_mc.curT._y = away_mc.curT.oy;
this._x = away_mc._x;
this._y = away_mc._y;
away_mc.curT = this;
if (this == home_mc.curT) {
home_mc.curT = null;
}
} else {
this._x = this.ox;
this._y = this.oy;
if (this == away_mc.curT) {
away_mc.curT = null;
} else if (this == home_mc.curT) {
home_mc.curT = null;
}
}
stopDrag();
showResults();
delete this.onMouseUp;
};
};
}
showResults();
function showResults() {
//if home and away teams are selected,
//display their results
if (home_mc.curT && away_mc.curT) {
var home_ind = home_mc.curT.data;
var away_ind = away_mc.curT.data;
var home_name = teamName[home_mc.curT.data];
var away_name = teamName[away_mc.curT.data];
trace('Home: '+home_name);
trace('Away: '+away_name);
//use home/away_ind or home/away_name to
//query for game results
//perhaps a 2D array:
//results[home_ind][away_ind]:Object
//and then display that info
} else {
//otherwise, display error
trace('Both teams have not been selected!');
}
}

alanwallace4
11/12/2005 10:04:56 PM
Hello,
Nsurveyor-
So will this display the result of the game between the 2 selected teams?
Kglad-
I'd probably have a few different text fields which would load up the team
names, results, players who played in the game, goal scorers, man of the match,
referee, etc.
Cheers
Alan
kglad
11/12/2005 11:06:25 PM
the key to your project is how your data are stored. the coding for the drag
and drop is trivial. the coding to display the results once the two teams are
selected is trivial IF the data are easy to retrieve.

but that IF is a big if. you must decide on a data structure before you can
start coding any actionscript. and you should pick your data structure keeping
in mind what it is that you want to retrieve for display in your flash project.
alanwallace4
11/12/2005 11:22:39 PM
Hi,
My data is definitley going to be contained in basic .txt files which are stored in the same directory as the site.
Cheers
alanwallace4
11/13/2005 12:00:00 AM
Hello,
Well, i would be loading a simple .txt file which contained something like
this..

Sunday 13/11/05
The Peacock 6 - 0 Foxhunters

Peacock
1. Alan Wallace
2. Alan Wallace
3. etc,etc.
Goals
Alan Wallace 6
Man of the match
Alan Wallace

Foxhunters
1.noone
2.etc,etc

Just a simple file.
I would be expecting to load it into an empty mc somewhere on my page.
I could do this a lot easier by just listing every game and giving it a
button/link to play the mc but i wanted that extra bit of pzzaz!
Cheers
Alan


kglad
11/13/2005 3:51:11 PM
that's what i thought. storing your data like that won't work with flash and
even if fixed would be a mess to untangle within flash. somebody needs to give
a lot more thought to the storage of those data.

you can store strings in flash. you can store as many strings as you like.
each string is assigned to a variable. if you use a delimiter in the string,
you can parse the string into an array within flash.

those are the basics of storing info in an external text file. the main
problem in your project is storing the info needed within flash in a form that
flash can retrieve and easily apply.
NSurveyor
11/13/2005 5:16:20 PM
I think this may work out for you.

Save your results.txt like so:

&Peacocks,Foxhunters=
date=13/11/05
score=Peacocks win against Foxhunters, 6-0
mvp=Blah Blah Blah
notes=More stuff goes here
&
&Cats,Dogs=
date=13/10/05
score=Cats lose against Dogs, 2-4
mvp=Blah Blah Blah
notes=More stuff goes here
&
&Bugs,Insects=
date=13/09/05
score=Bugs tie with Insects, 3-3
mvp=Blah Blah Blah
notes=More stuff goes here
&
&selectionError=
date=N/A
score=N/A
mvp=N/A
notes=Please select TWO teams to view game results
&
&default=
date=N/A
score=N/A
mvp=N/A
notes=No game took place between these two teams
&

Then, you would have three frames, one for loading, one for displaying the
results, and one frame if there is a loading error. Give the displaying frame
the Frame Label, "teams", and give the error frame the Frame Label, "error"

On the Loading frame, place the following code:

stop();
results = new LoadVars();
results._parent = this;
results.onLoad = function(s){
if(s){
this._parent.gotoAndStop('teams');
}else{
this._parent.gotoAndStop('error');
}
}
results.load('results.txt');

Then, on the teams frame, place the following code:

//Array of instance names of the thumbnail MovieClips
thumbnails = [t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, t12, t13, t14];
//Array of team names (corresponds with thumbnails Array)
teamName = ['Peacocks', 'Foxhunters', 'Cats', 'Dogs', 'Bugs', 'Insects', 'team
7', '8', '9', '8', '9', '10', 'team 11!', 'team12', 't13', 'tEaM14'];
//Set up currently selected teams
home_mc.curT = null;
away_mc.curT = null;
//Set up each thumbnail
for (var t = 0; t<thumbnails.length; t++) {
var cT = thumbnails[t];
cT.ox = cT._x;
cT.oy = cT._y;
cT.data = t;
cT.onPress = function() {
this.swapDepths(this._parent.getNextHighestDepth()-1);
this.startDrag();
this.onMouseUp = function() {
if (eval(this._droptarget) == home_mc || eval(this._droptarget) ===
home_mc.curT) {
home_mc.curT._x = home_mc.curT.ox;
home_mc.curT._y = home_mc.curT.oy;
this._x = home_mc._x;
this._y = home_mc._y;
home_mc.curT = this;
if (this == away_mc.curT) {
away_mc.curT = null;
}
} else if (eval(this._droptarget) == away_mc || eval(this._droptarget) ===
away_mc.curT) {
away_mc.curT._x = away_mc.curT.ox;
away_mc.curT._y = away_mc.curT.oy;
this._x = away_mc._x;
this._y = away_mc._y;
away_mc.curT = this;
if (this == home_mc.curT) {
home_mc.curT = null;
}
} else {
this._x = this.ox;
this._y = this.oy;
if (this == away_mc.curT) {
away_mc.curT = null;
} else if (this == home_mc.curT) {
home_mc.curT = null;
}
}
stopDrag();
showResults();
delete this.onMouseUp;
};
};
}
showResults();
function showResults() {
//if home and away teams are selected,
//display their results
if (home_mc.curT && away_mc.curT) {
var home_ind = home_mc.curT.data;
var away_ind = away_mc.curT.data;
var home_name = teamName[home_mc.curT.data];
var away_name = teamName[away_mc.curT.data];
var query_str = home_name+','+away_name;
} else {
//otherwise, display error
var query_str = 'selectionError';
}
if (!results[query_str]) {
query_str = 'default';
}
var result = results[query_str].split('\r\n').join('&');
var decoder = new LoadVars();
decoder.decode(result);
date_txt.text = decoder.date;
score_txt.text = decoder.score;
mvp_txt.text = decoder.mvp;
notes_txt.text = decoder.notes;
}

On the teams frame, have a filled rectangle (can be as simple as just this)
and convert it to a MovieClip. Give it the instance name, home_mc. Similarly,
make an away_mc. Have your 12 team boxes (as MovieClips), with instance names,
from t1 up to t14. Make sure the team clips correspond with the array in the
above code. And that's about it!
AddThis Social Bookmark Button