FLASHVALLEY DRAGNDROP V3 MANUAL

1. INTRODUCTION
The Flashvalley dragndrop AS3.0 template is designed to simplify the creation of dragndrop activities
in Flash without having to write a lot of code. It only requires a basic understanding of Flash and of
Actionscript 3.

2. FILES AND COMPATIBILITY

The Flashvalley dragNdrop V3 template is written in Actionscript 3.0 and is therefore
ONLY COMPATIBLE WITH ACTIONSCRIPT 3.0 AND FLASH PLAYER 9 MINIMUM.
The Minimum required version of Flash to work with the Flashvalley dragNdrop V3 template is
FLASH CS3.
In the zip package you will find:
- The necessary classes (you can edit them if you wish but make sure to keep a set of template before
you do so)
- The user manual
- a demo called dragndrop3_demo.fla
- an empty ready to go template called dragndrop3.fla

3. WORKFLOW
The DRAGNDROP template is composed of a the following components:
- the target component (yellow dot with a target graphic)
- the drag component (yellow dot with a lightning arrow type graphic)
- a setup element where you can set the generic parameters for the drag and drop
- the submit button
- the reset button
- the feedback window

In order to set up a DragNdrop activity you need to follow the steps below:
1. Open the file dragndrop3.fla. It is a dragndrop template wrapped into a movie clip. It should look like
on the picture below:

2. Double click on the component on the main stage or select EDIT or EDIT IN PLACE.
3. Add the movie clips that you are going to use as drags on the stage on place them on the
drag elements layer. Make sure to give those movie clips an instance name.
4. Drop a little drag component
on every movie clips you have added in step 3.1
5. Add the movie clips that you are going to use as targets on the targets elements
6. Drop a little target component
on every movie clips you have added in step 5. 1
7. Set up the parameters for each individual drag components by selecting the component and setting
its parameters in the parameters panel.
8. If necessary setup your custom functions on the code layer2
10. Set up the generic parameters on the setup component by selecting the component and setting its
parameters in the parameters panel.
1
2

Make sure SNAP TO OBJECTS is checked under VIEW > SNAPPING

Check the section on CUSTOM FUNCTIONS

4. FLASHVALLEY DRAGNDROP V3 PARAMETERS

Parameters are set on the setup component and on the drag components. You dont have to worry
about the target component, it just takes one parameter which is set automatically when you drop it
on a target element. You will be able to modify those parameters by selecting a component and go to
PROPERTIES > COMPONENT PARAMETERS (see pic 5.1)

pic 5.1 (FLASH CS5 component parameters panel)

SETUP PARAMETERS
The setup parameters below are associated with the main activity. Parameters can be separated in 2
categories, general parameters and event parameters.

EVENT PARAMETERS

pic 5.2 (FLASH CS5 component parameters panel)

Event parameters represent references to functions that are called as soon as their respective event is
fired. In the picture 5.2 the function activityCorrect will be called if the user has correctly found all the
correct answers. What you put in that function is up to you. You can trigger a sound, go to a URLetc.
The functions referenced in the parameters panel are explicitly declared on the the
code layer in the wrapper component (see section 6 on DRAGNDROP EVENTS AND CUSTOM
FUNCTIONS)
The event parameters associated with the main component are listed below:
ONCORRECT
That parameter represents the name of the function to be called if the final result of the activity is
correct. That function needs to be defined on the CUSTOM FUNCTIONS layer.
ONINCORRECT
That parameter represents the name of the function to be called if the final result of the activity is
incorrect. That function needs to be defined on the CUSTOM FUNCTIONS layer.
ONSUBMIT
That parameter represents the name of the function that will be called each time the submit button is
pressed. That function needs to be defined on the CUSTOM FUNCTIONS layer.

ONINCOMPLETE
That parameter represents the name of the function that will be called when the submit button is
pressed and the activity is incomplete. That function needs to be defined on the CUSTOM FUNCTIONS
layer.

GENERAL PARAMETERS

(FLASH CS5 component parameters panel)

DRAG NAME (automatic)

The value of that parameter will be automatically set when you drop the component on a drag
element. The instance name of the drag element will be assigned to that parameter.
CHECK IF COMPLETED (default = true)
If this parameter is checked the results will only be evaluated once all drags have been dropped on a
target EXCEPTED if a drag component is not associated with any correct targets. If you want the result
to be evaluated regardless if the activity has been completed or not just uncheck that parameter.
SINGLE DROP (default = true)
If that parameter is checked only one drag can be dropped on a target, it will automatically snap to the
target x and y position. If more than one drag can be associated with a target make sure to uncheck
that parameter; in that case the final positioning of the answers can be defined using the correctX and
correctY parameters (see below)
TRIES (default = 3)
The value of that parameter determines how many tries is given to the user to find the correct
answers. If set to -1 the user has unlimited tries.
TWEENING (default = true)
If set to false, the animations will be turned off.

DRAG PARAMETERS
As for the setup component, parameters for the drag components are also separated in 2 categories,
general parameters and event parameters.

EVENT PARAMETERS

(FLASH CS5 component parameters panel)

ONPRESS
That parameter represents the name of the function to be called when the user initiate a drag. That
function needs to be defined on the CUSTOM FUNCTIONS layer.
ONRELEASE
That parameter represents the name of the function to be called when the user release a dragged
element. That function needs to be defined on the CUSTOM FUNCTIONS layer.
ONCORRECT
That parameter represents the name of the function to be called if the dragged element is released on
a correct target element. That function needs to be defined on the CUSTOM FUNCTIONS layer.
ONINCORRECT
That parameter represents the name of the function to be called if the dragged element is released on
an incorrect target element. That function needs to be defined on the CUSTOM FUNCTIONS layer.

GENERAL PARAMETERS

(FLASH CS5 component parameters panel)

CORRECT TARGETS
This parameters represents an array containing the correct target(s) that will be associated with the
drag element.
CORRECT X POS
By default the correct answers are shown with the drags aligning themselves on their respective
correct targets at the end of the activity. In some cases you might want to control the positioning
yourself. This parameter let you control the x coordinate of the drag element on its correct target
element when the answers are shown
CORRECT Y POS
By default the correct answers are shown with the drags aligning themselves on their respective
correct targets at the end of the activity. In some cases you might want to control the positioning
yourself. This parameter let you control the y coordinate of the drag element on its correct target
element when the answers are shown

TARGET PARAMETERS
The target component only takes one parameter which is automatically set to the instance name of
the target it is dropped on. see picture below

6. DRAGNDROP EVENTS AND CUSTOM FUNCTIONS

Custom functions can be called automatically after certain type of dragNdrop events have
occurred. For example you might want to trigger a sound each time a drag is released on a correct
answer.
Custom functions are created on the on the 1st frame of the timeline on the code layer
(see picture below).

Those functions are triggered as different dragNdrop events occur.

drag events

generic events

IMPORTANT: If you decide to change the name of the functions make sure also to change their
reference in the component parameters panel.

In the picture 6.1 below you can see that the functions referenced above are implemented on the
time line.

pic 6.1

7. CUSTOM MESSAGES
Textual feedback appears on the screen based on user interactions and answers. those messages
can be edited in the class PARAMETERS.AS (see picture below)

You can entirely customize those messages in the language of your choice, you only need to make sure
to leave the strings with an underscore (_score and _tries) in your messages since they will be
replaced by the according variable in the code.

8. SEQUENCIAL DRAGNDROPS
You can add multiple dragndrop activities in sequence very easily.
WORKFLOW
1. Create all your dragndrops (see tips and tricks section for a quick way of doing that)
2. Add one dragndrop activity per frame
3. make sure to add a stop on the first frame.
You can have a look at dragndrop3_template.fla to and use that file as a template.

9. GENERAL TIPS AND TRICKS

Make sure that the submit button has the instance name submit and the reset button

reset
It is easier to set your drag and target component to snap on their graphic. When it is
enabled they will automatically snap on the top left corner of the graphics they are
dropped on. You can enable snapping by going into VIEW > SNAPPING > SNAP TO OBJECTS

Make sure to keep a copy of the original template, just create a duplicate when you want
to create a new dragndrop activity.

If you are creating more than one dragndrop activity in the same FLA you can quickly create
a new dragndrop by doing the following: copy all the layers of your previous dragndrop (see
pic below). Create a new movie empty movie clip and paste all the layers in that new movie
clip. Set up you dragndrop as indicated in the WORKFLOW section at the beginning of the
manual

If you have any questions, comments or suggestions dont hesitate to drop me an email
me at contact@flashvalley.com