Flashvalley - Free Flash components

dragNdrop v2

Compatibility	MX 2004, Flash 8, FLASH CS3 (AS2.0 compatibility mode)
Approval	Adobe
Version	2.3
Commercial	Free

Overview

This component is designed for people without an extensive knowledge of actionscript, who want to be able to create highly customizable drag and drop activities with Flash. This can be done by dropping the components onto the movie clips that need to be turned into drags or targets, very much like the behaviors in Director.

By setting up a couple of parameters you can create the most complex drag and drop activities. You can use the variables generated by the component to track down the score and the user answers. These variables can easily be sent to third party applications.

Features

The dragNdrop component package

The dragNdrop component package is composed of 4 distinct elements :

The drag component

The target component

The set up component

The message window

Create drags and targets in seconds

You assign drags and targets by dropping the drag component and the target component on the corresponding movie clips

Tip : if Snap to Objects is enabled in View / Snapping the component will snap to the top left of the movie clip when you release it.

Easy setup

- On the component associated with the draggable movie clip (Fig1) you just need to specify the name of the correct target it should be associated with (Fishbowl in our case here).
- You can specify the name of functions to be called instantly if the drag is released on a correct target or on a wrong target. (WellDone and NotGood in our case).


Fig1

Tip : the parameter target is attributed automatically as soon as the component is released on a movie clip. There are no parameters to set on the target component.

Tip : 2 parameters are passed to the function that is specified in the onCorrect and onIncorrect field. These parameters are the name of the drag and the name of the target it has dropped on. See example below :

function WellDone(myDrag, myTarget){
trace(myDrag+" has been dropped on "+myTarget);
}

Fig2

The main parameters that need to be specified for the dragNdrop activity (Fig2) are :

number of tries : specify how many tries will be given to the user before he is offered the choice to see the correct answers.
test if completed : if this parameter is set to true the user will be prompted if he hasn't completed the activity.
snap to target : if this parameter is set to true the drag will snap on the target it is dropped on.
tween effect : if this parameter is set to true the drags will move smoothly back into position or on their correct spots at the end of the activity.
display answers function : Normally the correct answers are automatically shown by the component but sometimes (especially when there is more than one correct drag per target) you might want to show the correct answers on another frame or even load another swf, this can be done by specifying the name of a function in that parameter field. In our case we call a function named showCorrectResults.

onCorrect : name of the function to call once the activity is completed and the answers all correct
onIncorrect : name of the function to call once the activity is completed and one or more of the answers are incorrect.
onPress : name of a function to call each time the submit button is pressed

Tip : The buttons are nested into the "set parameters here" movie clip, therefore if you want to customize their graphics open that component, the buttons are on frame 2 and on frame 3.

Self contained and scalable

Once you have assigned your drags and targets and set up all your parameters you just need to wrap your activity (assets and components) in a movie clip (Fig3) and to link it to the dragNdrop class (Fig4) ... job done your dragNdrop activity is ready to go :)

	Fig4
Fig3

Tip : It is best to use 3 layers inside your dragNdrop activities, the top one for the components, the middle one for the drags and the bottom one for the targets as shown below :

dragNdrop layers

Tip : All functions called from the components must be placed on the main timeline of the dragNdrop activity not on the _root.

Have a play with the final activity.

You need to have a full version or working demo of Flash
in order to use Flash components.

You can download the manual here.

Compatible with Flash MX 2004, Flash 8, FLASH CS3 (AS2.0 compatibility mode)

HOME > Flash Components > DragNdrop