Multimedia Design and Development: Macromedia Authorware [After installing, point out the online tutorial as a good starting

point for learning Authorware] [Note: also install demoUM and PaintShop Pro or Screenhunter] Its called Authorware to suggest the development is at a high level of abstraction: authoring rather than programming, in a virtual machine that treats media types such as text, graphics, sound, video and animation as primitive types, with a visual programming style Macromedia designed Authorware to make it easier for non-programmers Authorware is designed for constructing pieces, not necessarily for creating media elements !ome media assets can be created in Authorware, but rich media asset"graphics, sounds, video, etc "are usually created using other tools Authorware can be used for a variety of purposes, including interactive presentation, simulations, even games, but its primary use is computer-based training #$%&' Authorware package provides models for tutorials, drill, practice and simulation (rovides continual monitoring of user progress) scripts for testing, *udging answers, tracking the percentage of right answers, tracking time spent on pieces, etc Authorware can deliver applications for +in, -, +in./ #-0 and ,1-bit', +in2&34(, Macintosh and over the +++ #with the !hockwave for Authorware plug-in' &he process of creating an application from a pro*ect file is called pac aging A packaged application can be run without access to the Authorware run-time environment +ell be using the non-commercial version5 (arts of the Authorware environment interface 6n top, the standard +indows control bar, menu bar and toolbar Menu options are a good place to start exploring the environment 7reyed out menu options indicate that they arent active til you do something else first &here are e!"oard shortcuts for many commands: see 8elp 9eference 2ote about e!"oard: arrow, home, end, ins, del keys on numeric keypad dont work as expected in Authorware / or 0) use the separate keys for these functions &oolbar buttons for common functions are explained by text boxes if you wait &he Design #indow, below the toolbar, is where the :authoring; is done contains the flowline, which starts out empty Always *ust one flowline per design window #An application can have many design windows, each containing its own flowline ' Authoring starts by dragging icons onto the flowline #<emo' &he hand, called the paste hand, indicates the insertion point for the next icon =ou can change the location of the paste hand with a mouse click, and insert icons &he maximum length of a flowline is the height of its design window) this may seem like an arbitrary constraint, but well see that you can create larger pieces using map icons &he $ool Palette on the left provides building blocks for creating pro*ects !ome of these have to do with media types: text3graphics, sound, video 6thers have to do with controlling interaction) and the flags provide execution control

>ets create some text, by dragging a Displa! icon onto the flowline $licking on the display icon opens a Presentation #indow, where you can view individual media elements or whole pieces $trl-- toggles between (resentation +indow and <isplay +indow Also opens a Displa! $ool Palette, which you can use to create text or graphics $lick on ?A to create text) click on oval to create graphic) 2otice that you can have more than one text or graphic combined in a <isplay icon or you can create several different <isplay icons Why might it be useful to create different Display icons on the same timeline? %etter control over timing of presentation, as well as layering >ets add a #ait icon, set it to a second, then another <isplay icon with different content >ets run our simple piece: Menu: %ontrol &estart, or %trl'& 2ote control over timing of content of different <isplay icons now &he restart option runs from the beginning of the program Why might you want to start from some other place than the beginning? 2ote that there are greyed out options under the $ontrol menu &he flag icons give you finer control: drag the white Start flag onto the flow line &hen select Menu: %ontrol &estart (rom (lag, or %trl'Alt'& &he black Stop flag to the flowline to cause execution to stop at some point, for example, before an icon which has some side effect, such as erasing content Note: If you cant find the !tart or !top flag, *ust click on the &ool (alette@ $licking on the $ontrol (anel icon on the toolbar opens the %ontrol Panel, useful for debugging !imilar to the $ontrol (anel for <irector"the two programs now have similar interfaces >ooks like a A$9 control panel: 9estart from beginning, reset #from flag', stop, pause, play &race window provides an expanded control panel with more tracing control B info I rarely use the $ontrol (anel, but that doesnt mean you wont@ !etting up a (ro*ect: chose Modif!)(ile)Properties to bring up Cile:(roperties dialog box: Dvery Authorware pro*ect has some global properties, set in the (roperties +indow 8ere you can set the $itle #if your piece will have a &itle bar"UM doesnt' =ou can eliminate the &itle and Menu bars for an application via radio "uttons $enter on !creen is a useful option, forcing (resentation +indow to be centered *ac ground color"may want to change to contrast display elements %hroma key is only used with video overlay cards, about which I know little Si+e variable lets you control the physical dimension of the (resentation window ,n &eturn specifies what to do if user Euits, then resumes at a later time Authorware can track user state in a record # 9D$' file in A0+F<A&A folder

>ets look more at the Displa! icon, particularly to see how we can control the presentation of more interesting graphics +e obtain or create more interesting graphics from other sources Any suggestions? 7raphics programs, such as Adobe (hotoshop, (aint!hop (ro or Macromedia Creehand let you create new graphics >ots of graphics already exists, in clip art collections or on the web !creen capture programs will let you copy graphics from other sources as you see it >ets do a screen caputre: either +indows Alt'PrtSc, (aint!hop (ros facility or !creenhunter #free' !creenhunter or (aintshop (ros screen capture facility gives better Euality and more control &hen paste into into (aint!hop (ro, resiGe it, sharpen it, and save it, to some graphics file format that Authorware can handle, such as a 7IC file 6pen (ile)-mport to see other graphics file options supported by Authorware, such as: +MC #+indows metafile formatHexchanging files between +indows programs' (I$& #Macintosh (icture fileHApple graphics format since -.IJ MacIntosh' 7IC #7raphics Interchange Cile"popular on the web, compressed and lossless' K(D7 #Koint (hotographic Dxperts 7roup"also popular on the web, lossy but smaller' (27 #patent-free replacement for 7IC, lossless, portable, compressed storage' %M( #%itMap"popular in +indows, but uncompressed' &ICC #&agged Image Cile"popular with text publications, uncompressed' (!< #(hotoshopH1J bit graphics, includes multiple channels' Note: once Authorware has imported a graphic, it will port to other platforms, i e , a %M( will display on a Mac 8owever, compression may still be an issue in the siGe of an Authorware application Note: you can also use the +indows clipboard to copy and paste graphics =ou can manipulate the position, siGe or shape of a graphic image using selection handles Lse the pointer tool to show the handles, then move the graphic, then change its siGe Lse Menu).dit)Undo to undo the change =ou can crop or scale images: Dou"le'clic on a graphic to bring up Image (roperties, then select /a!out tab) do some experiments, using numbers and selection handles 2ote: cropping or scaling within Authorware doesnt change the original image, *ust its presentation) so you can restore uncropped, unscaled image easily More about <isplay icon &ext tool #A': $reating a text ob*ect opens up a text-width line =ou can move or change the siGe of this line by grabbing selection handles =ou can set a ta", by clicking above the line =ou can set indentation by moving indent mar er, below the line =ou may enter text directly or import t text via (ile)-mport or cop! and paste =ou may change Cont characteristics via $e0t)(ont, etc : LM uses mostly Arial Lse $e0t)St!les to change alignment =ou can change the color of a text by selecting #indows)-nspectors)%olors #or %trl'1' %rings up a palette, with swatch boxes for text #A' foreground and background colors Lse $e0t)Scrolling $e0t to create text in a scrolling window =ou can define styles to create idioms for an application) note that color can be part of a style &hen you can apply a style to any other text ob*ect

More about <isplay icon drawing tools: Lse the straight line 234 tool to create horiGontal or vertical lines or arrows Lse the diagonal 254 line tool to create lines at any angle #but these may be *agged' Lse the oval, rectangle, rounded rectangle and pol!gon tools to create shapes" hold down the shift key to restrict oval to circles or rectangles to sEuares +ith polygon, single click defines another point) double click closes the last 1 points !elect #indows)-nspectors)/ine #or %trl'/' to bring up Straight /ine $ool >ets you control thickness of line and add arrow heads !ame tool lets you control thickness of ob*ects created by other drawing tools !elect #indows)-nspectors)(ills to bring up &he Cill (alette >ets you control fill property of a oval, rectangle or polygon &he most commonly used Cill options are 2one, &ransparent and !olid 2one: lets you see through an ob*ect to any ob*ect beneath it &ransparent: sets the color to white, which may or may not be transparent !olid: sets the color to a color to the current swatch in the color palette All other Cills are various patterns of &ransparent and !olid fills &ry setting fill to solid and line mode to thickest &ry setting line mode to transparent &ry setting fill to none !elect #indows)-nspectors)Modes to bring up &he Cill (alette >ets you control how an ob*ect displays relative to other ob*ects Most common modes are 6paEue and &ransparent 6paEue #default' mode covers up its background &ransparent mode permits its background to show through Matted mode acts like opaEue, but white space is removed from edges Inverse mode inverted colors against a nonwhite background Drase mode shows only the background through an ob*ects outline 2ote: &ransparent Cill is transparent if the mode is also transparent, else its white &ry setting fill to transparent and mode to transparent &ry setting mode to opaEue, then matted, etc <isplay Icon characteristics: select Modif!)-con)Properties#or %trl'-': %rings up (roperties: <isplay Icon dialog box Displa! tab lets you set an ob*ects layer and transition >ayer refers how an ob*ect appears relative to other overlapping ob*ects Modif!)Send to *ac or Modif!)*ring to (ront are simple ways to change layer /a!er: on <isplay tab lets you set an ob*ects layer to a relative numeric value <efault is M) higher number layers display on top of lower number layers $ransitions: give control over how an ob*ect makes its appearance Lse the Appl! button to see the effect -nternal transitions effects are built in) others reEuire that you ship 4tras in an 4tras subfolder with your piece /a!out tab lets you control positioning of an ob*ect) default is No %hange 6ther positioning options support user-controlled motions"well see how a bit later

&he .rase Icon lets you remove other icons from the presentation +hen an erase icon is opened #by clicking on it', it also opens the (resentation window $lick on the ob*ects that you want to erase +hen the erase icon is encountered on a flow line, it removes all the ob*ects in its list If you want to erase everything but a background graphic, you can use -cons to Preserve If you change your mind, use the &emove button to delete an icon from the list to be erased .rase -con Dialog box lets you set a transition"some are inverses of display transitions Prevent %ross (ade ensures a complete erasure before displaying more ob*ects on flowline &he #ait Icon can either let you control timing or give the simplest form of interaction <efaults to some Ney (ress or a $ontinue button, but can change it to wait for a mouse click or some time limit &ime limit lets you also show a $ountdown clock &he Map icon lets you group many icons into a single icon, thus overcoming physical limit of a flowline &he main flowline is at level -) each map icon increments the level number 2ote that the hierarchy implied by map icon is pretty rudimentary and invisible to user +ell see richer hierarchy when we look at the Cramework icon &he Sound icon lets you add digital sound to a piece =ou already need to have created digitiGed sound with another program, such as !oundDdit Authorware can import +AA #+indows' or AIC #Macintosh' files Cor the LM, we used some +indows system +AA files, got others from web, and had narration files created by another vendor <rag a !ound icon onto the flow line) import a sound from tada6wav) try playing it %&+, where did I find tada wavO Lse +indows find and Dxplorer to copy it 2ote $iming properties" $oncurrency #why is concurrency useful in multimedia? ' (lay #how many timesO', 9ate #playback speed', %egin #UM uses a variable called :audio; set at program startup time or by button', +ait for (revious !ound &he Digital Movie icon lets you add digital video to a piece Again, you already need to have created digitiGed video with another program Aideo production involves video capture, editing and compression #more about this later@' Aideo siGe is almost always less than full screen" why? Authorware can import a variety of video formats: AAI #Audio Aideo Interleaved', M6A #Apple Puicktime', M(D7 #Motion (icture Dxperts 7roup' and C>$ and C>I #Autodesk animations' All but C>$ movies automatically play on top of all other layers@ C>$ movies are internal, so you can have graphics and hot spots on top of the movie 9un through an example: virt76avi #a virtual reality snippet' &o get rid of black frames, change Start frame to / and .nd frame to --M &o slow it down, change &ate to -M fps Insert other movies via Authorware menu: -nsert)Media #Animated 7IC, Clash or Puick&ime movie' &he %alculation icon #8': perform snippets of code in Authorwares script language &ypical uses include setting and testing system and author-defined variables, for example, to control the state of interactive ob*ects /

invoking system functions, for example, to exit Authorware, invoke external programs, perform mathematical computations, generate random numbers, control graphics, cursor and menus, play digitiGed sound, MI<I music, $< audio, etc #indows)9aria"les shows variables #system and author-defined' #indows)(unctions shows functions #system, 4tras, and piece-specific' Aariables and functions are described on-line and in Authorware Lser Manual >ook at top level -nterface and %hapters: setting variables, invoking system functions 2ote how read umach ini invokes 9eadDxtCile#Q$:RRumachRRumach iniQ'Ha hard path Perpetual "uttons: Nnobbys +orld (rogram, (rint !creen, audio button, net button &he -nteraction icon #a big arrow with a Euestion mark inside it' lets a program respond to user input <rag an Interaction icon onto the flow line &hen a <isplay icon onto the flow line #you can drag other icon types as well' &his opens up a dialog box which controls the &esponse $!pe: &here are -- different 9esponse &ypes to choose from: *utton: a simple button interaction, though you can control appearance of button :ot Spot: rectangular portions of a display" have you seen hot spots in web pages? :ot ,";ect: the actual ob*ect is hot, not *ust a rectangle Pros of hot object vs. hot spot? $arget Area: are to which a user may drag an ob*ect) used in drag-and-drop exercises Pull'down menu: lets user select from a menu at the top of a (resentation window =ou can also define separators in a menu and hot keys for a piece %onditional: display content based on some condition, such as the value of a variable D g , if a user has gotten both right answers, navigate tot he next page $e0t entr!: lets user enter input into a text box 1e!'press response: respond to particular keypress inputs Authorware can also check for $trl, Alt, Dsc, functions keys, and so forth $ries limit: force a branch D g , after three wrong tries, display a help dialog box .vent: response to an ob*ect created by an 4tra, such as an Active4 control >ets set up a button: &he small oval above the display on the flow line is the &esponse t!pe: an oval is a button &he Display icon below the oval is the -nteraction &esult: displays if user chooses this button &he path out of the bottom of the <isplay is the &esult path, indicate flow of control &he default loops back above the interaction, so user can tr! again =ou can control each part of interaction: 9esponse type, 9esult icon and 9esult path <rag more icons onto the flow line: the second one copies the first 9esponse &ype $reate content for the different Interaction Result (display) icons and see what happens <ifferent elements can have different Response ypes! +asnt that easyO $hange the Result "aths

<iscuss examples in demoUM: a' &op level buttons illustrate rollover hot spots #showing texts' and hot ob*ect #Nnobby button' b' LM EuiG 9un it, then discuss 9esponse &ype: radio button #from A+, others available' <iscuss &esponse tab, *ranch: $r! again: what does this option do? #hen would we want .0it -nteraction instead? 9esult action: discuss what the map icons do !uppose we want to add a soundO !ound effects available in standard a/l c' <rag and <rop exercise illustrates <rag and <rop responses, and hypertext links #by defining a text style called :ot $e0t' d' &ext entry Ssee Cunction parameter #text entry'T Authorware defines a variable, Dntry&ext, which the calculation icon in turn manipulates $reating your own buttons with the "utton editor: Add an interaction icon to the flowline Add a <isplay icon as a response type and insert some :help; text 2ame the 9esponse icon :8elp; <ouble click on the response type icon #the oval on top' $lick on the *uttons666 button, to view the *uttons dialog box 2ote that the button caption matches the 9esponse icons name &o change the characteristics of a button, click on .dit666 at the bottom 8ere, you can edit the caption, for different states #up, down, inactive or rollover', sound when pushed, location #in 4, = coordinates' =ou can also change the graphical appearance of a button, by inserting your own graphic !tates: Up is when the button is unused, i e , not pushed Down is when it is pushed) Why might we want this to look different? How? ,ver is when the mouse is rolling over the button Disa"led is when the button is inactive, i e , not available >ets look at the states for the LM forward button: Where did this button come from? !omeone created it #using (hotoshopO' and used $raphics% Import to load it into A+ &he Decision icon #a diamond': chooses between different paths or branches in a flowline Cour branch options: Se<uential "ranching 2S4: seEuence through each branch, first path, second path, third, etc &andom "ranching to An! Path 2A4 : randomly pick a branch &andom "ranching to Unused Paths 2U4: randomly pick, except dont revisit a path *ranching "ased on %alculation 2%4: !elect a path based on value of an expression Dxample: a conditional branch on Audio ##hy isn&t this structure necessary?' Another example: conditional branch in !etNnobby(ath Another example: seEuential branch in 2ext icon at end of a screen map icon #hat&s the effect of the se'uential branch?

&he Navigation icon #a triangle' branches to other icons in a piece Most navigation icons are meaningful only in the context of framework icons, so &he (ramewor icon #a curved box' provides a way to structure and navigate through a piece &ypically, you want to organiGe a seEuence of screens or pages as a framework, with navigation buttons to advance forwards and backwards Crameworks can also be used to organiGed higher order structures, i e , to achieve hierarchy <rag a Cramework icon onto a flowline and double click on it 2ote that Authorware automatically creates a default set of eight navigation icons #If you dont like these, *ust delete the decision icon' &he 7ray 2avigation panel is a graphic providing a background upon which buttons are placed Dach navigation icon with a different function has a uniEue look: =o "ac means branch to the most recently visited icon) &ecent how a history of recently visited icons (ind displays a find dialog, searching text in all pages in a title .0it (ramewor does *ust that, returning to another framework (irst page and last page *ust to the first and last icon in this framework Ne0t page and previous page *ump advance or retreat in this framework $lick on a navigation icon to change its behavior, through another dialog box Destination pulldown menu gives you five different options: &ecent framework is how you set up 7o back and 9ecent navigation, to recently visited icons Near"! is relative to a given framework) most commonly used option An!where lets program *ump to any icon in any other framework %alculate lets program *umps to a Icon number #Icon numbers are determined at run-time' D g , 7otoIcon:VW%abbage "stores Icon number for the %abbage icon &hen a calculate navigation icon can *ump to the value in the variable 7otoIcon Search sets up a find dialog, e g , for the UMs find button Dxamples in demoLM: -' In (erpetual %uttons, Cind button 1' In $hapter - framework, rrchap- #note button it controls and condition' and ffchapB W! why is the "ut to star systems button unmarked? ,' In chap- overview framework, forechap-over- #note button it controls and condition' !uppose we want a forward button to branch from the end of one framework to the start of the next frameworkO 8ow do we handle thatO J' $reate a forward navigation to branch from <iff Dngines (robe Puestion 1 to (robe: analytical vs stored /' $reate a backward navigation &his is the tedious part of programming navigation in UM@ Insert other movies via Authorware menu: -nsert)Media #Animated 7IC, Clash or Puick&ime movie'

&he Motion icon lets you create simple animations Cirst put a <isplay ob*ect, which youll want to animate, on the flowline 2ext drag a Motion onto a flowline below the <isplay ob*ect to be animated Cinally, set the motion parameters, in the Properties: Motion -con dialog !imple example: click on an ob*ect and drag it to desired destination, then Preview &here are five different motion types, each with its own set of parameters /a!er box: animation has its own layer, independent of the display ob*ect itself $iming box: time in seconds #or fractions thereof' or rate per inch #i e , UVone inch per U secs' controls how long will the animation takes to play %oncurrenc! box: controls whether to wait or let subseEuent events be simultaneous How does concurrency set up the possibility of more interesting animations? <efault Motion type is Direct to Point, which moves along a straight line from start to destination /a!out box gives fine control over 4,= coordinates of destination Direct to /ine motion uses a variable or expression to control the location of an ob*ect along a line #ny ideas how this might be used? &o create sliders that move along a line >ayout box gives "ase and end values of expression) put variable name in destination field Direct to =rid motion positions an ob*ect within a rectangle, rather than a line, based on two variables setting 4, = coordinates Path to .nd motion lets you create an animation along a path with many points 9un the application up to the Motion icon $lick on the ob*ect to be animated) a path control point #triangle' appears <rag the ob*ect #not the control point triangle' to an intermediate location) release the mouse and drag to the next position) etc Dach mouse release creates a small triangle, called a control point =ou can ad*ust the path by moving individual control points Path to Point motion is similar to (ath to Dnd, with many control points, with control by a variable Authorware supplies a 1nowledge ,";ect that shows a slider effect effect #tr! it>' Advantages of Nnowledge 6b*ects: simplify creation of standardiGed effects, hiding details <isadvantage: Nnowledge 6b*ects that are :locked; prevent us from seeing how it works !o, lets look at an example that shows us the details: ,pen runslide6a?w User mova"le o";ects Motion icons let you create animations that run independent of any user interaction #though a user interaction may have the side effect of changing a variable' Its also possible to let users move <isplay ob*ects: in this case, the knob on the slider $lick on !lider Nnob and look at its properties #Modif!)-con)Properties #or %trl'-' &he /a!out tab shows a few option pertaining to motion: ,n Screen lets the user move the ob*ect anywhere on a screen -n Area and ,n Path add further constraints to where a user can move an ob*ect In Area lets you define a rectangular area in which user may move ob*ect 6n (ath lets you define a path of control points along which user may move ob*ect !lider Nnob uses ,n Path, with a *ase of M, -nitial M, .nd -MM: +hen it moves along the path #set up when title was created', &he value of (ath(osition W :!liderNnob; varies5 well use these values in a moment5 2ext, look at ballHhow does it move in this program? &heres a Motion icon called :bouncing ball; in the flowline, with Path to Point motion Its %oncurrenc! to (erpetual, so we can keep moving after leaving this icon .

Its destination value is (ath(osition W :!liderNnob; : !o now, as !lider Nnob moves, so will :bouncing ball; animation &he path of the animation is seEuence of control points 9un the title: ball follows the slider /i"raries: &he slider example uses a li"rar!, to hold graphics An Authorware library is a file, with 6afl extension, into which simple icons can be stored Cor example, Slider6a?l is a library containing icons for creating a slider graphic <ragging an ob*ect from a library onto a flowline makes a link to a library, not a physical copy 2ote that library links are italici(ed Why put code in libraries? 8elps keep track of common elements used throughout a piece or several pieces +hen common element in library gets updated, they are updated in entire pro*ect, since every reference points to the same ob*ect in the library How could putting objects in a library reduce total application si$e? !ince every reference to a library ob*ect is a link, not a copy of the same ob*ect 8owever, theres a constraint: you cannot store maps, interaction, or navigation icons, only media elements, not logical elements such as maps or decisions =ouve seen how to open a library and use its icons &o view a library thats already open, select #indow)/i"rar! &o open a new library, select (ile)New)/i"rar! &o add content to a library, simply drag an icon from a <esign +indow to a >ibrary window =ou can rename library links on a flowline) i e , rename :)lider *nob; to :handle; 2ote that editing names wont change the link itself 2ote that you cannot modify content of a library link in a <esign +indow %ut you can edit it in its library window &hough you cannot edit the content of an icon in a <esign +indow, you can, however, modify the properties of the icon in the <esign +indow, such as its transition or layer: Modif!)-con =ou can find out the source of a library icon: Modif!)-con)/i"rar! >inks =ou can also view links from a library to code: @tras)/i"rar! >inks Show -con &he UM pro*ect makes extensive use of libraries@ !tandard a/l and libraries for each chapter 6pen this library and look at some of its resources #this is not the whole standard library'

-M

(ackaging an application: when youre done, you can create an executable package@ !elect (ile)Pu"lish)Pac age, which opens up a dialog box of run-time options +ith runtime means you will create an independently executable program, D4D extension also means you must commit to a particular platform #UM no longer uses +in, -' +ithout runtime means you must supply the virtual machine to run your piece, e g , 9unA0w,1 exe #or a Macintosh runtime' these programs in turn call packages with 6AA& extensions >ibraries can also be packaged, with a A0D extension 9esolve broken links"if a link is broken, its usually a bug@ How might this happen? Another possibility is that links are resolved be packaged libraries &ry it: note that there are some broken links in demoUM@ Ive uploaded a couple more examples, which are available via my web page: 8angman and catchit examples come with run-time explanations of the code &hese examples might give you more of an idea what can be done in Authorware

--