Here is what
we are aiming for by the end of this section.
If you would rather work from paper - download
a pdf of this page from here.
This
section of the tutorial deals with creating a
set of text labels that can be dragged by the
user and dropped where they belong.
Each label is just a text box with a background
and a small amount of code attached to it so
that it behaves correctly when the user clicks
on it or releases the mouse button. There is
also a bit of code in the movie to help organise
these objects (movie clips).
The template already has two labels (word1 and
word2) to show you the ropes. All you have to
do is create as many extra copies as you need,
repeating the instructions below as many times
as is necessary.
Assuming that you are working your way through
the tutorial and have coastal_features_1.fla loaded,
save it as coastal_features_2.fla.
Saving major revisions with a different name
is good policy, it allows you to go back to an
earlier version when things go pear-shaped.
This
section is quite complicated so save regularly
and don't be afraid to reload a previous version
and try a step again.
To start, you need to work with the library.
This is where Flash puts all the objects in the
movie. You are going to duplicate the object
called word1 in the library and then edit each
duplicate before putting them on the stage so
that they will appear in the movie. Open the
library by pressing the F11 key.
You can tidy the screen a bit by docking the
new window rather than have it floating about
in front of things. Take the mouse pointer over
to the five little dots on the top left of the
library window and drag it over to the right
of the stage. A dark outline shows a place where
it will happily dock with the editor.
Right-click on the Movie Clip called word1 and
select Duplicate from the menu
that appears.
When the Duplicate Symbol dialog appears, change
the name to word3 (this being
the next label's name) and check that the Movie
Clip option is selected. Then click on OK and
the symbol will appear in the library.
We will need five labels for the activity so
repeat this to create word4 and word5.
So,
you now have five labels that can be dragged around
the screen. The trouble is that they don't contain
the text that makes sense for the activity so they
need to be edited.
Double-click on word1 in the
library. The normal stage will disappear and
the movie clip takes its place ready to be edited.
Hold down the Ctrl key and
tap the + key to magnify the
object, making it easier to edit it accurately.
Select the text tool in the toolbar (usually
to be seen on the left of the screen - if it
is not visible, select Window > Tools).
Use the tool to click into the text and place
the cursor. You can then backspace to remove word1 and
replace it by typing wave cut platform (or
your own label for your own activity). The text
will wrap inside the box but don't worry, you
can resize the box to get it to fit properly.
Go back over to the toolbar and select the
Arrow Tool. Take the arrow cursor
over to the text box, to the square handle in
the top right corner. Use the handle to drag
the text box out until it resizes to allow the
text to fit on one or two lines. The choice is
up to you, it probably depends on how much room
you have on the stage.
You should now lock the text layer so that
the rest of the editing will leave it unaltered.
Click onto the background layer
to select the shape behind the text. This gives
it a background for the cursor to hold on to
when it is being dragged.
Select the Free Transform Tool in
the toolbar.
The background shape will show resize handles.
Use them to drag the shape out so that it provides
a background behind all the letters in the text
box. The shape is resized around
its centre and so you may need to change to the
Arrow tool to drag it
correctly over the text. The aim is to get the
shape to occupy the same space as the text.
An alternative to fiddling around with the
Free Transform Tool is to select the text (unlock
its layer first) and then check its width
and height in the properties window. The properties
window should be at the bottom or side of the
screen, if not, you can open it from the Window menu.
Lock the text layer and then select the background
shape.
Type the same width into the Properties window
(W:) to quickly make it the
same width as the text. Repeat this for its height
(H:).
You can nudge the shape around a bit using
the arrow keys as long as it is selected.
A word of caution here. You can edit the background size
and position but don't delete it and add your
own shape. There is a way to do this and instructions
can be found later in the tutorial. The
background shape is a separate movie
clip and it contains the code that allows the
whole text label to be dragged and dropped.
Finally, hold down the Ctrl key
and tap E to stop editing the word1 movie
clip and to return to the stage.
You
will notice that the word1 movie
clip already on the stage has changed to reflect
the editing you did to its description in the
library. The object on the stage is called an instance of
the library item.
If
you have found all of this very tricky, don't
worry because you now need to repeat the procedure
for the other text labels. You will get plenty
of practice!
Edit word2 to contain arch,
word3 to contain stack,
make word4cliff and
word5cave.
Don't forget to resize each of the background
shapes so that each text label can be picked
up by the mouse.
When you have added the correct labels to each
of the text movie clips, drag and drop word3, word4,
and word5 onto the stage and drag
them to a suitable starting point.
So,
you now have a set of text labels to match up with
the features on the diagram. However, Flash needs
a name for each one so that you can refer to them.
Select the label containing the word stack and
then look at the Properties window.
You will see that it is waiting for an instance
name.
Click into the box and type in word3.
You don't have to give it the same name
as the movie clip it is created from in the library
but the code assumes that all the text labels
are named "word" followed by a number, so stick
with this convention.
Repeat this to name word4 and word5.
The
end is now in sight (he lied). You have the labels
and the code can find and refer to them to make
them do clever things like go back to their start
position if the user gets them wrong. When you
test your movie (Control > Test
Movie), they should allow themselves
to be dragged and dropped.
Although
the template takes care of the code needed so
far automatically, I have included the actions
attached to the background of each word movie
clip so that you can see what is going on.
A
mouse click is detected with the first function
and the parent clip (the label) is dragged around
so long as the user doesn't let go of the mouse
button.
If the user does let go, the second function
responds by stopping the drag operation and by
calling a function on the main timeline to check
if it is over a target box.