Printed version of the directions only
How to Create a Drag & Drop Interaction Using
Macromedia’s Authorware 5.0 Program
Presented by Bill Odum, Tony Artino, & Fouzia Werner for FSU EME 6415
Getting Started

Open Authorware.

Close the Knowledge Objects
dialog box.

Select File > Save As.

Name the file ISDMODEL and
save it inside the same folder
where you saved the images and
audio file.
Place display icons on the flowline

Drag a display icon from the toolbar to
the flowline.

For this tutorial, name it ISD layout by
typing over the highlighted Untitled text
Import images onto the icons


Double-click on the display icon to open it
in the presentation window.

Select Insert > Image.

Click on the Import button.

Locate and open the ISD file folder previously stored.

Find & select the image called layout.

Check the box labeled Link to File. Be careful not to double-click on
the image. You must click Link to File first.
Click Import > Ok. This will close the properties dialog box. The ISD
Model Diagram will appear in the presentation window as displayed in the
illustration.
3Ware’s Drag & Drop Tutorial
1-9
Printed version of the directions only
Import images onto the icons
(continued)

To center the diagram image on
the screen matching the
illustration, click and drag it.

Close the presentation window.
Repeat similar steps to import the ten
ISD model images.

Drag a display icon onto the
flowline.

Name it Goals.

Double-click on the icon.

Select Insert > Image.

Check the box labeled Link to
File.
Locate and insert Goals.

Move the image to the top right
hand corner matching the
location shown in the illustration.

Close the presentation window.

Import the remaining nine ISD model images, repeating the previous
steps. Their file names and what the icons should be labeled are listed
below.

Place them as shown in the
illustration. You will be able to
modify their position later if
needed.
File Name
Analyz
Revise
Write
Entry
Tests
Strtgy
Matrls
Formtv
Summtv
Label It
Analyze
Revise
Write
Entry
Tests
Strategy
Materials
Formative
Summative
3Ware’s Drag & Drop Tutorial
2-9
Printed version of the directions only
Run your piece

Select Control > Restart.
You should see the
illustration as shown.

Move an object by selecting
and dragging it.

Modify the placement of the
images to match the
illustration.
Group icons & save piece

Close the presentation
window.

Click and drag around all the
display icons to group them.
A dashed moving line will
appear around the icons. See
illustration.

Let go of the mouse. The
icons should all appear dark
to show they have been
selected.

Select Modify > Group.

Name the group ISD images.

Select File > Save to save your work.
3Ware’s Drag & Drop Tutorial
3-9
Printed version of the directions only
Adding text to display icons

Double-click on the ISD Images
map icon to open the ISD images
group.

Drag two new display icons from
the icons toolbar underneath
Summative.

Name them Dick & Carey ISD
Model and Directions as shown in
the illustration.

Select Control > Restart to run the
piece

Select Text > Font > Other > scroll
to locate Arial.

Select Text > Size > 14.

Select Text > Style > Bold.

Double-click on the pointer to open the modes inspector.

Select Transparent to clear the text background.
Type and move text on display icon

Select Window > Inspector > Color.

Select the text-coloring tool labeled as shown in
the illustration.

Choose a brick red color chip
3Ware’s Drag & Drop Tutorial
4-9
Printed version of the directions only
Type and move text on display icon

Click on the “A” button in the toolbox.

Click in the area shown on the presentation window (see illustration).

Type Dick & Carey ISD Model.

Click on the pointer button to move the text as needed.

To modify the size of the length of the text, use the handles
surrounding the text.

Select Control > Restart.

Select Text > Size > 10 pt.

Select Text > Style > Plain.

Select the “A” in the toolbox.

Click in the area shown in the illustration and begin typing the
following directions: Drag each phase of the Dick & Carey ISD
model to its appropriate location on the diagram.

Select Control > Restart. The text should appear as shown in the
illustration.
3Ware’s Drag & Drop Tutorial
5-9
Printed version of the directions only
Target area interaction

To begin, close the presentation window and, if it is still open, close
the ISD Images group.

Drag an interaction icon onto the flowline.

Name it Drag & Drop Interaction.

Drag a sound icon to the right of the interaction icon.

When the Response Type dialog box appears select the Target Area
response type and click OK.

Name the sound icon Goals Sound Feedback.
Import Sound File

Double-click on the sound icon.

When the Sound Icon Properties dialog box appears, select Import and
navigate to the sound file named corrct.

Double-click on the file or single-click and select Import.

Select OK on the Sound Icon Properties dialog box.

Restart the piece.
Response Properties on Drop

On the Target Area tab of the Response Properties dialog box, open
the On Drop drop-down menu.

Select Snap to Center.
Response Properties Status

Select the Response tab of the
Response Properties dialog box
and open the Status drop-down
menu.

Select Correct Response.
Select Target Object

Select the Goals image and
move it to the correct place on
Dick & Carey’s ISD Model. The target area will follow and appear on
top of the Goals image. See illustration.
3Ware’s Drag & Drop Tutorial
6-9
Printed version of the directions only
Target Area Response

Use the handles to enlarge the target area to fit the image.
Complete the Target Area Response

Click OK to close the Response Properties dialog box.

Restart the piece.

Drag the Goals image to the correct place on the diagram.

Close the presentation window and save your work.
Create Additional Target Area Responses

Begin by dragging a sound icon to the right of the Goals Sound
Feedback icon and importing the Correct sound file.

Continue this process, doing it once for each of the nine remaining
components of the Dick & Carey Model.

Name the sound icons using the naming convention shown below.
Image
Name It
Analyze
Analyze Sound Feedback
Revise
Revise Sound Feedback
Write
Write Sound Feedback
Entry
Entry Sound Feedback
Tests
Tests Sound Feedback
Strategy
Strategy Sound Feedback
Materials
Materials Sound Feedback
Formative
Formative Sound Feedback
Summative
Summative Sound Feedback

Double-click on the small arrow just above the sound icon labeled
Analyze Sound Feedback. This opens the Response Properties
dialog box for that icon.

As you open the Response Properties dialog box for each object, select
the matching ISD phase image and drag it to its proper position on the
Dick & Carey ISD Model. Repeat this task for each of the nine
remaining images.
3Ware’s Drag & Drop Tutorial
7-9
Printed version of the directions only
Test Your Target Area Responses

Restart the piece.

Drag each image to its correct position on the Dick & Carey Model
diagram. You should hear the “zap” of the Correct sound as you drag
each item to its target area and release the mouse button.
Creating the catch-all target area
The first step in setting up the catch-all target area is to drag a map icon
onto the flowline.

Select a new map icon from the icon toolbar.

Drag the map icon to the right
of the last sound icon on the
target area flowline (the
Summative Sound Feedback
should be the last one).

Name it Put Back

Double-click on the target area
arrow to open the Response
Properties dialog box for the put
back response.
Open the On Drop menu and select Put Back
Check the box labeled Accept Any Object.


3Ware’s Drag & Drop Tutorial
8-9
Printed version of the directions only

Next, click on the Response tab and change Status to Wrong
Response.

Grab one of the corner handles and resize the box to cover the entire
screen area.

Click OK.
Restart and test your work

Restart your piece to test if this is the case.

Drag an object to an incorrect location and, upon release, it should
float back to its starting point.
Limiting the drag area

In the design window, open the ISD images map icon, and select one
of the Dick & Carey Model display object icons.

Open its Display Icon Properties dialog box by clicking Modify > Icon >
Properties.

Click the Layout tab of the Display Icon Properties dialog box.

Open the Movable menu and select On Screen

Select OK.

Repeat this step for each ISD image separately.

Restart the piece and try dragging the images off the screen.
3Ware’s Drag & Drop Tutorial
9-9