Creating Interactive Courseware with Macromedia Authorware Session I Introduction

1
Creating Interactive Courseware with Macromedia
AuthorwareSession I - Introduction

• Steve Bonham
• Center for Excellence in Teaching

2
What is Authorware (AW)?

• AW is an interactive media construction tool that
  uses a Icon-Flowchart interface.
• Simply drag icons from the tool palette to the
  flowline to program.

3
Basic Icons

• Display
• Animation
• Erase
• Wait
• Decision
• Interaction
• Calculation
• Map
• Video
• Audio

Red Use today
Blue AuthorWare 2
4
Display
Tool Palette
The display icon provides a way to present text
/or images on the screen. Dbl-click a display
icon and an edit-able presentation window will
open along with the display tool palette.
Edit-able Presentation Window
5
Animation
The animation icon provides a way to move a
display about the screen. Dbl-click an animation
icon and the animation dialog box will open.
There are a variety of animation types.
AnimationDialog Box
6
Erase
The erase icon provides a way to remove a
display(s) from the screen. Dbl-click an erase
icon and the erase dialog box will open. You can
set cool special effects here.
EraseDialog Box
7
Wait
The wait icon provides a way to pause or delay on
screen action. Delays can be a set time interval
or may require a mouse-click to continue.
WaitDialog Box
8
In the decision structure below any display
(Q1-Q4 each contain a question) will be chosen at
random from any unused path.
Decision
The decision icon provides a way to branch or
route events. Options include Random pathRandom
unused pathSequentiallyCalculated Path
9
Calculation
The calculation icon provides for creating or
modifying the value of variables. These variables
(Score for example) can be used in decision
structures
In the calculation dialog box I created a
variable named Qpath and set its value as any
number between 1 and 4. Say 3 is the number--
the question displayed will be Q3.
10
Interaction
The interaction icon provides a structure for
offering various user inputs including OPTIONTe
xt inputButtonsTransparent Hot
areasDrag-able objects
Sample Interactions
11
Map
The map icon provides for organizing icon
sequences into related groups. The flowline
window does not scroll so one MUST group series
of icons or quickly run out of space. Dbl-click a
Map and it opens a design window with icons
revealed.
12
Display Icon Creation ModeDbl-click the
Background display icon (in the design window) to
edit the object in the presentation window.
Rect Tool
Lets create a landscape with green grass and
blue sky. Maybe a little text too Create a
couple of rectangles with the rect tool first.
13
Display Objects PropertiesWith a rectangle
selected select Windows gt Properties (Get both
Fills Colors palettes open)
14
Color PaletteYou can set the fill line colors
for each rectangle. Create a text box using the
tool palette.
Fill Color
Line/Text Color
15
Display Objects Properties (cont)Create an
filled circle in the Red Ball Display
16
The Wait Icon Dialog BoxDefault Button We
dont want a button
17
The Wait Icon Dialog BoxChange to Time Interval
18
Animation Icon Dialog Box
19
Animation Icon Dialog BoxClick Object Move
Object to Final Position Set Timing
20
The Wait ButtonPause (Ctrl-P) and relocate
button to bottom right
21
Erase Icon Dialog BoxClick Object(s) Ball in
this case
22
Erase Icon Dialog BoxClick Object(s) Red Ball
Background in this case
23
Control gt Play to testCtrl-P (to pause or
proceed)
24
File gt Save
25
Select a group of icons(click-drag box in)
26
Group Icons to Create Map IconModify gt Group
27
Rename Untitled Mapwith a meaningful name
28
Icons Can be Copied and PastedSelect RedBall
Animation Edit gt Copy
29
Click Pointer Below RedBall Animation Edit gt
Paste (the pointer indicates placement)
30
Rename Cloned Map Icon to BlueBall Animation
31
Dbl-click BlueBall Animation Map to open it
32
Rename Red Ball icon to Blue Ball
33
Dbl-click Blue Ball icon to open displayChange
Red fill to Blue fill
34
Control gt Play to testCtrl-P (to pause or
proceed)
35
Drag an Interaction Icon onto the Flow Line
36
Rename Untitled Interaction Icon with Choose a
Color
37
Dbl-click Choose a Color Interaction IconAdd
directions to this display Select Text and
Enlarge it (Text gt Size gt Other)
38
Set your text to 24 Points.
39
Drag the Map Icons to the right of the Choose a
Color Interaction Icon Select the Button
Response Type
40
Select Control gt Play to test Interaction
41
Click the Option Desired
42
Since the Flow of this interaction is set to
repeat forever,we are stuck in this loop
43
Lets pretend that in this interaction- RED is
the correct (exiting) answer. Blue results in
repeating the query.
44
Ctrl-Click the arrow beneath the RedBall Map to
re-route it and make it exit the interaction
and continue down the flowline.
45
What about adding some Feedback?Create a Display
Wait Erase series beneath the interaction.
This will only appear once the correct (Red)
option is selected.
46
Consider how you want the feedback to play out.
Nice Job!
Click to Continue
Erase Feedback
47
So that we dont have to start at the very
beginningPlace the Start flag just before the
Feedback Icon.
48
Select Control gt Restart from Flag
49
The empty Feedback display will open. Select
the Text tool and type your feedback and a
helpful prompt.
50
Close the Feedback tool palette to continue
down the flowline.
51
Click the Continue button.Remember you may pause
here (Ctrl-P) and relocate the button if desired-
then Ctrl-P to proceed.
52
Click the feedback text to identify it as the
target of the erase icon.Click OK.
53
Group the Feedback series of icons to make a
Positive FB Map.
54
Cut the Positive FB Map. Select Edit gt
CutWell paste it into both the RedBall and
BlueBall Animation Maps. Well need to tweak
the incorrect feedback icons a bit.
55
Open the RedBall Animation Map Click at the
bottom of the flowline. Select Edit gt Paste to
paste the Positive FB Map at the end of the
flowline.
56
Open the BlueBall Animation Map Paste the
Positive FB Map at the end of the flowline.
57
Rename the Positive FB Map that is inside the
BlueBall Animation Map Corrective FB
58
Dbl-click the Map Corrective FB to open it so
that we can open and edit the feedback display.
59
Select Control gt Restart and test your project.
60
Summary

• We used Authorware to create an interactive media
  module that includes
• Text/image displays
• Animation of displays
• Erasure of displays
• Pauses
• User interactions (buttons)
• Maps of related icons