| There is a great move
towards interactive exercises which are rich in graphical
content. Thus a good skill is to be able to pick up objects
with the mouse and place them at other points in the content.
Flash easily achieves this with its mouse events. For example
the following allows the three elements on the left-hand
side to be picked up and moved around on the movie:
This was achieved by adding an invisible
button in each of the graphics to be dragged with the
event of:
| on
(press) {
startDrag ("");
}
on (release) {
stopDrag ();
}
|
This causes the movie to be dragged when the mouse is pressed
over the movie. It stays dragable until the mouse is released.
This was achieved by interrogating the _droptarget property.
This displays the name of the instance that has received
the dragged movie:
| on
(press) {
startDrag ("");
}
on (release) {
stopDrag ();
trace (this._droptarget);
_level0.layer = this._droptarget;
}
|
Next we can detect where the movies are dragged to, and
make them disappear if they are placed on the correct location:
This was achieved by interrogating the _droptarget property.
This displays the name of the instance that has received
the dragged movie:
| on
(press) {
startDrag ("");
}
on (release) {
stopDrag ();
trace (this._droptarget);
if
(this._droptarget=="/network_layer")
{
_level0.ip._visible=false;
_level0.layer = "Correct";
}
else _level0.layer = "INCORRECT";
}
|
This is the case for the IP instance. If it is dragged
to the /network_layer instance, it will become invisible
using the _visible property.
Next we can add a reset button which restarts the games
and makes everything visible again.
This is achieved by adding the following action script
to the button:
| on
(release) {
_level0.ip._visible = true;
_level0.ip._x = 80;
_level0.ip._y = 100;
_level0.tcp._visible = true;
_level0.tcp._x = 80;
_level0.tcp._y = 150;
_level0.ethernet._visible = true;
_level0.ethernet._x = 80;
_level0.ethernet._y = 200;
}
|
Next we can add a little challenge to the movie, but
updating a clock, which is reset at the start of the task.
The score can also be displayed:
This was achieved by modifying the action on the dragable
objects to:
| on
(press) {
startDrag ("");
}
on (release) {
stopDrag ();
trace (this._droptarget);
if (this._droptarget=="/network_layer")
{
_level0.ip._visible=false;
_level0.correct++;
_level0.layer = _level0.correct;
if (_level0.correct==3) _level0.stop_timer=true;
}
else _level0.layer = "INCORRECT";
}
|
The main variables are initialised at Frame 1 with:
| var
t;
var stop_timer;
var correct=0;
t= new
Date();
start_time=t.getTime();
stop_timer=false;
|
and at Frame 5 the time can be updated with:
| if
(stop_timer==false)
{
t= new Date();
end_time=t.getTime();
trace(end_time);
trace(start_time);
showtime=int((end_time-start_time)/1000);
}
gotoAndPlay
(2);
|
The getTime() method returns the number of milliseconds
since 1 January 1970 (the start time for the PC). The
start_time is set at the start of the movie, or when the
Restart button is pressed. The end_time is the current
time, which along with the start_time is used to determine
the number of seconds passed.
|
Comment received on this design tips
|
| Sat 03/08/2002
09:57
Y'know...if I hadn't spent all these nights slogging
through code and manuals/tutorials by myself, I'd
have "0" appreciation for your efforts.
Man, your site is Class. Maybe I should've started
with some schooling to get this done myself...but
it's not THAT complex: It just makes me wish that
I'd PAID A PROGRAMMER instead of soaking $800.00(US)
into Studio MX.
Mon 17/03/2003 13:00
Ello, Great stuff. it makes far more sense than the
Actionscrips book\'s code. Still struggling to get
it to work with my graphics, though. Any chance you
can mail me the .fla files so i can spot where I\'ve
gone wrong? cheers,
|
|