Drag and Drop - Information |
|
|
|
|
|
If
you would rather work on this section from paper
- download a pdf of this page from here. |
|
Adapting
the text label text |
|
|
- Open the Library window using F11 if
it is not in view.
- Double-click on one of the text labels in the
library e.g. word1.
- Use Ctrl and + if you need
to magnify the movie clip.
- We will start by altering the text so, lock
the background layer
in the Timeline window.
- Click on the text (you will see the blue outline
to show that it is selected).
- Use the Properties window
to alter font, font size, font colour etc. Don't
alter the type of text (it should be left as Static
Text).
- Hold down the Ctrl key and
tap E to stop editing the text
and to see how the changes you have made affect
how the text looks on the stage.
- Remember that you may have to alter the size
of the backgound shape if you have changed the
size of the text (see the information on Adding
draggable labels instruction 12 onwards).
|
|
|
|
Adapting
the text label background |
|
|
|
I
decided that it would be most useful if all the
backgrounds could be adapted together since I
generally want them to be the same colour or
all transparent. The backgrounds are not therefore
edited inside each text label movie clip. Instead,
there are two other movie clips called background and shape in
the library; background is used
to change transparency of the text label background
and shape is used to change the
colour. |
|
|
- Double-click on the background movie
clip in the library and magnify it if necessary.
- There is only one object in the centre. It
should be selected (blue border) but click around
until you find it if it isn't.
- Look down at the properties window
and look for the Alpha property
in the Color (Colour!) list.
- Use the slider to change the property e.g.
0% to make the background transparent and 100%
to make it fully opaque.
- Use Ctrl and E to
end editing and test the movie to find out the
effect of changing the property.
|
|
|
|
- Double-click on the shape movie
clip in the library and magnify it if necessary.
- Again, there is only one object in the centre.
It looks a little different when it is selected
because it is a filled shape and not a movie
clip.
- Look down at its properties window.
There are two properties, the line colour and
style (this has a red line through it because
this shape does not have a border) and the fill
colour.
- Click on the fill box next to the paint pot
and a colour chooser will appear. It also has
some fill effects at the bottom.
- Use Ctrl and E to
end editing and test the movie to find out the
effect of changing the property.
- You can change the background shape altogether.
Click on the shape and tap the Delete key
to remove it.
- Use the drawing tools in the toolbar to
draw a new shape. Experiment with the oval tool,
using the Properties window
to change fill colour and line colour and width.
- If
you select the rectangle tool,
the Options section at the bottom
of the toolbar gives you a dialog to produce
rounded corners.
- Remember that you will probably have to go
back to the individual text label movie clips
to change the size of the shape in the background layer
so that the text neatly fits the new background
shape.
|
|
|
|
Changing
the target boxes |
|
|
|
The
information page in adding
target boxes (instruction
3 onwards) explains that you can alter the size
of each box individually. However, all the boxes
are instances of the box movie
clip in the library and so any change we make to
that movie clip, will be reflected in all the boxes. |
|
|
- Double-click on the box movie
clip in the library and then magnify the view
if you need to.
- The box (lines and fill) are grouped together.
This makes them easier to move about and resize
but you can't edit each part separately. Make
sure that the shape is selected (blue outline?)
and then either right-click and select Break
apart or hold down the Ctrl key
and tap B.
- Something to note here is that the shape has
a registration point - shown by the small cross.
The drag and drop code relies on this being at
X = 0 and Y = 0 so that it can calculate where
to place the dropped text label in its centre.
Make sure that you check this before finishing
any editing, just type zeros into the boxes in
the Properties window.
- You can now alter the line and fill using the Properties window
as described in the section above. You can also
get rid of the box and replace
it with any shape you like but don't forget about
the registration point.
|
|
|
Changing
the movie's background |
|
|
|
You
have already seen how to replace the background
with an image in the information page on adding
an image to the background.
These instructions deal with changing the background
and border colours. |
|
|
- Click onto frame 1 of the background layer.
The background already has a border and a fill
and they will both be selected.
- Single click somewhere off the stage and then
back on to the fill so that it is not selected
but the border is selected
(see image right).
- Use the Properties window
to change the border properties (line colour,
thickness and style).
- When you are happy with the appearance of the
border, use Ctrl G to group
the 4 lines. This will help separate them from
the fill so that it can be dealt with separately.
However, if you want to edit them again, you
will have to use Ctrl B to break
them apart first.
- Now click once on the background so that the
fill is selected and use its properties to alter
its appearance.
- Again you can tidy up by using Ctrl
G to group the background (and separate
it from the border) and then use Ctrl
B whenever you want to edit it. If
this places the fill group in front of the
border group use Modify > Arrange... > Send
backward to sort it out.
|
|
|
Editing
the buttons |
|
Buttons
are special movie clips with a different timeline
that reflects the way they work. The aim here is
to change the look of the buttons but leave their
function the same.
However, there is nothing to
stop you deleting a button that you don't
want the user to operate (e.g. the show button).
Simply click on it on the stage and use the Delete key
to remove it. The button's symbol movie clip
will still be in the library if you change your
mind. |
|
- Double-click on the reset button
in the library. When it appears in the editing
window, you will see that it has two parts, a
text box (selected in the image right) and its
bounding box. Each of these elements are in their
own layer in the timeline.
|
|
|
|
- The timeline has four frames. This particular
button only used two of them. The frames contain
the state of the button when the mouse is not
over it (up), when the mouse
is over the button (over), when
the mouse button is clicked (down)
and finally an opportunity to create an invisible
area which the button responds to if you don't
want it to be whole button (hit).
|
|
|
|
- Edit the button by clicking into the particular
frame for the particular layer you want to alter
and then use the normal toolbar tools and properties
window to make your changes. The best way to
learn is to play about, changing colours and
fonts. You can do the same sort of things that
you have learnt about for the background, targets
and text labels.
A top tip if you want to alter the font
is to work in the up frame for
the text layer and then copy that
frame (right-click > copy
frames). Paste it into the Over frame
so that the text is identical and then alter
it's colour etc.
|
|
|
- To add a Down state to the
button where the text shifts position slightly,
right-click on the Down frame
in the text layer.
- Select Insert Keyframe from
the menu. A keyframe is a frame that
can contain different objects to other keyframes.
- Now click onto the text box in the edit area
and then use the keyboard arrows to nudge it
down and to the right. One tap right and one
down should do it.
- Create a keyframe in the Down frame
of the box layer as above so
that the button has a background when it is clicked.
Notice that the contents of the Over frame
are copied by default.
- If you test the movie, the button should now
have its extra state to give the user a signal
that they have clicked.
|
|
|
|
Adding
extra stuff |
|
|
|
It
is likely that you might want to add some other
things to help the user or just decorate the movie.
This section involves creating another layer (because
it keeps things organised) and gives you the chance
to try adding something new to it. |
|
|
- Select the background layer
(because you want a new layer above it) and then
click on the new layer button
bottom left in the layers list (or select Insert > layer).
- The new layer will be named by default. Double-click
onto its name and rename it decoration.
- Click on frame 1 of the new layer decoration to
ensure that any new items end up on the right
layer. Another way to achieve this is to click
on the little padlock above the list to lock
all the layers and then click on the padlock
in the decoration layer to unlock
it.
- Select the Text tool in the
toolbar and use the crosshair cursor to draw
a text box out on the stage.
- Type some text into the box (do it now, an
empty box disappears) and then alter the style
of the text to suit its purpose.
- If you want to get the box to wrap, select
the Text tool again, click into
the text box and then use the cursor to grab
the square resize handle (top right) and move
it left to force the text to wrap.
|
|
|
|
The
decoration layer is a good place
to put other things such as a jpeg school logo.
Use the instructions given in the earlier section
- adding an
image to the background to import the image.
If the activity is a matching exercise where
you want a set of images, each with a target
box beside it and a text label to match with
it, put the images on the decoration layer
so that they sit over the background but behind
the objects being dragged around. |
|
|
Changing
the score popup |
|
|
|
If
you have made it through this far, you
have already used the tools needed to change the
way that the score popup looks.
The only new idea
is why the score does not appear at the start
of the movie but magically appears when the user
clicks on the score button.
If you look at the score layer,
you will see that the keyframe that contains
the score popup is all the way over to the right.
Click on that keyframe and there is is.
Without going into it in too much detail, when
the user clicks on the score button, the code
that is triggered by this event instructs the
movie to jump to the frame labelled score. This
reveals the score. When the user then clicks
on the popup's OK button, another bit of code
is triggered which instructs the movie to jump
back to the frame labelled start. |
|
|
- To edit
the way the popup looks, double-click on the movie
click called scoreboard in the
library.
- It is made up of four objects, all on their
own layer in its timeline.
- Most of them are objects that you are probably
getting to be familiar with. The background is
a rectangle, you will need to break it apart
to edit the line and fill. There is a text box
(You scored) and a button. You can edit all these
using the instructions given earlier in this
instruction sheet.
- However, the middle (empty) box is new. It
is a text box but all the ones we have used so
far are static (i.e. you put
text in and it stays the same as the movie runs).
This one is dynamic. It doesn't
have any text inside it (yet) but it does have
a code variable called _root.scorePercent attached
to it. The code in the movie changes the value
of this variable and the box shows whatever value
it has at that moment in time.
So, even though it looks empty, you can still alter
the text properties and whatever value is displayed
will use them.
|
|
|
|
Changing
how the scoring works |
|
|
|
It
might not always be appropriate to have the score
as a percentage. It might make more sense to show
it as a simple mark out of the total possible.
This involves a tiny bit of code editing (since
the code for this is already in the original
template file). |
|
|
- Click
onto frame 1 of the scripts layer
and press F9 to bring up the code
window.
- Scroll down until you find the code below.
It is near the bottom of the editable region.
// this variable sets how the score is displayed
// 1 = percentage (50%), 2 = score out of total
(5/10)
var scoreType = 1;
- Alter the value (in red) to display the score
as is most appropriate.
|
|
|
Changing
when the scoring is shown |
|
|
|
The
default setting is for the score to be shown when
the user clicks on the score button.
You might decide that it is better if the score
is shown all the time and so the user gets instant
feedback. There are other ways this can be done
- a message that pops up saying "Well done" or
a big green tick appears for a few seconds. |
|
|
- Click onto frame 1 of the scripts layer
and press F9 to bring up the
code window.
- Scroll down until you find the code below.
It is near the bottom of the editable region.
// this variable sets if the score is shown
in a dialog or all the time
// 1 = dialog, 2 = continuously
var scoreDialog = 1;
- Alter the value (in red)
to display the score differently.
|
|
|
Changing
what happens when the user is wrong |
|
|
|
Finally,
there are a number of other options that you
might want to consider.
The first is a setting already
in the template that counts how many times the
user tries a particular label and then can be
instructed to only credit the score if the label
was used correctly the first time.
Bring up the code window for frame 1 of the scripts layer.
Scroll down until you find the code below and
then change the value of the attempts variable
(in red).
// this variable sets if you allow the user
to have multiple attempts for each word
// 1 = yes, 2 = no (only scores first time)
var attempts = 2;
The variable is set to only allow one attempt
by default. |
|
|
The
second idea is to indicate which answers are wrong
when the user clicks on the score button.
The incorrect answers return to their starting
point so that the user can try again. Try the three
different values for the sendWordBack variable
to see how this works. |
|
//
this variable sets if a wrong answer goes back
to its starting position
// 1 = go back, 2 = stay, 3 = stay until select
score
var sendWordBack = 3; |
|
Another
option is to have a confirmation tick or cross
appear each time a label is dropped. If you
hunt around you will find an apparently empty
movie clip on the stage called message.
Have a look at its symbol in the library. The text layer
is the one to edit if you would prefer a different
message.
The option is editied in code in the same way
as the other examples above. |
|
//
this variable sets if you want the tick or cross
to appear
// 1 = yes, 2 = no
var tick = 2; |
|
Finally,
you might want the movie to shuffle the text labels
each time it is played or reset. The option to
select this is given in the text code shown below. |
|
//
this variable sets if the text labels are randomised
// 1 = yes, 2 = no
var randomWords = 2; |
|
There
is one other option. The information on that
one can be found in the section on adapting the
template for different types of activities. |
|
Timing
the activity |
|
The
template contains the code to time the activity
by default. All you have to do is choose if the
user sees the stopwatch control.
Bring up the code window for frame 1 of the scripts layer.
Scroll down until you find the code below and
then change the value of the displayWatch variable
(in red). |
|
//
this variable sets if the stopwatch will be used
var displayWatch = true; |
|
The
function runs the stopwatch until it calculates
that all the answers are correct. This means that
if you have set the scoreDialog variable to 1,
the user has to click on the score button before
it checks it and turns off the stopwatch (if the
score is 100%). |
|
Back
to the menu page |
|