Integrating Media and Interactivity in Adobe Captivate. June 10 & 11, 2010

Transcription

1 The Rapid Development Tools Intensive: Basic-to- Intermediate Concepts and Techniques 401 Integrating Media and Interactivity in Adobe Captivate

2 Dazzle Technologies Corp. For all your custom creative e-learning needs! Integrating Media and Interactivity in Adobe Captivate Joseph Ganci Dazzle Technologies Corp. June 2010 elearning Guild Online Forums Integrating Media and Interactivity in Adobe Captivate Member, Adobe Captivate Advisory Board Member, Adobe e-learning Advisory Board Join our free lists! Captivate tips: with subject line join to TipsCaptivate@dazzletech.com Authoring Tools tips: with subject line join to TipsAuthoring@dazzletech.com e-learning tips: with subject line join to TipsElearning@dazzletech.com

3 Table of Contents How to Insert and Manipulate Images...1 Cropping...1 Transparency...4 Attaching Audio...6 How to Insert and Set Options for Flash Videos...6 Video Tips...6 Ways to Choose and Include Animation Files...8 The Secret Files...8 What to Include...9 Options...9 Techniques to Insert a Button Interaction and Set Options...9 Types of Buttons...9 Another Secret A Very Important Feature How to Insert a Text Entry Interaction and Set Options They re Not Just for Testing the Learner! A Point of Confusion for Some: The Default Text Option Text Entry Interactions Pause Too Ways to Insert a Click Box Interaction and Set Options The Invisible Areas! Pausing Your Homework Assignment Thank You!... 17

4 How to Insert and Manipulate Images Cropping Often overlooked are the cool cropping features available when importing an image in Captivate. Here are some techniques to remember. 1. Import an image. When you do, you will see some options below the image. 2. When you choose the crop option, you ll be able to select one portion of the image to import. Page 1

5 3. By default, the cropping area will be constrained. You can resize it using the handles around the area, but the aspect ratio won t change. You can change this by deselecting the Constrain proportions checkbox. 4. Here is the cool part. If you zoom in to a portion of the image, you can crop with a lot more accuracy. 5. First, make the cropping area more or less the size you need by placing it over the area you wish to crop. Page 2

6 6. Next, zoom in so that the cropping area is larger. 7. When you click OK, only the cropped area will be imported. 8. You can also crop an image after it has been imported by opening its properties. Page 3

7 Transparency After you ve imported an image, you can further manipulate it by setting its transparency level. This allows you to create some nice effects and to also create watermark images to put in your screen background. Page 4

8 1. Change the Transparency to the level desired. You will immediately see the results in the window. 2. An often overlooked feature is found when you choose Window > Image Edit. Page 5

9 Attaching Audio One cool feature that you can apply to images as well as other objects is the ability to attach audio to the image. Why is this cool? Because the audio will automatically start when the image appears and stop when the image s time is up on the timeline. So you can synchronize sounds to images! You can attach narration to an image of a spokesperson, for instance, or play sound effects of a machine running only when the machine is shown. This is an often overlooked feature that can save lots of time. How to Insert and Set Options for Flash Videos Video Tips Do not link to videos on a server that may not be available later. Either link to videos locally or to a URL that will not change. Stick with Progressive Download Video for the Video Type. This allows videos to start only when they ve buffered enough to run smoothly, similarly to how YouTube videos work. If your videos are only a few seconds long, remove the video skin and select Auto play. Page 6

10 Page 7

11 You can automatically ensure the whole video will be shown by setting the Appear after option to duration of video. Not that this will not extend the timeline, just pause it while the video is playing. You will not see the video playing if you Preview, Play This Slide. You need to preview at least a few slides to see the video play. Video files are always kept external to your Captivate file. They will be included in your published folder as well. In Captivate 5, there is a new feature to cut an imported video across multiple slides, much like you can with audio. Ways to Choose and Include Animation Files The Secret Files OK, so it s not really a secret but I find that the vast majority of Captivate users don t seem to know about the Gallery folder. It is found in the root of where Adobe Captivate is installed on your system, typically c:\program files\adobe\adobe Captivate 4\Gallery. Page 8

12 The Gallery folder contains several folders. One of them is called SWF Animation. It contains animation files separated into four folders. But wait, there s more! You ll also find other SWF animations in the Gallery folder called HotSpots. These are normally used in the Hot Spot quiz question, but there s no reason you can t use these pretty cool little animations anywhere else you like. Take a look in other folders in the Gallery folder too you ll find other SWFs lurking in there ready for you to use outside of their normal uses. Take advantage of these animations! What to Include You can include animation files that are SWF, Animated GIFs, AVI or FLA formats. Create your own or use any that you legally can access. It s normally pretty easy to find animation files, but you want to ensure that they match your instructional design and user interface. AVI files are converted to SWF. Not all AVI files can be converted. FLA files are also published to SWF. Options The transparency level of animations can be set, which means you can actually have an animation be translucent, showing objects below it. You can also include an animation as a moving watermark by setting its transparency level high. All animations you import get saved in the library. You can add audio to animation so that it plays only when the animation is playing. Techniques to Insert a Button Interaction and Set Options Types of Buttons There are three types of buttons in Captivate: Text button: the most common type of button Page 9

13 Image button: made from image files Transparent button: basically an empty area of the screen. Another Secret When you choose Image button, you are shown a drop down list of buttons. In the last section, I wrote about the Gallery folder. In the Gallery folder, there is also a folder called Buttons. Do you see the button above? When you click that, you are brought to the Buttons folder and there you can choose another button. However, notice that the files in the Buttons folder correspond to the image buttons you see in the image above. Page 10

14 Notice that each button has three files associated with it. One represents the down (pressed) state of the button, one represents the up (normal, unclicked) state of the button and one represents the over (rolled over) state of the button. Note too the file naming convention. You can create your own image files to represent the three button states. Name them all the same except the words up, down and over after the last underscore, just as you see in those above. Once you ve created your image files, you can then import any button you like, making it match your user interface or organization standards. In addition, if you put the image files in the Buttons folder, your new button will also appear in the drop down list when you choose an image button. Page 11

15 A Very Important Feature Buttons are interactive elements. Someone can choose to click the button or not to click it. Buttons also pause the timeline, meaning your Captivate file will not proceed past a certain point. That pause feature can be seen visually on the button object in the timeline. You can see that the button s timeline is divided into two areas: Active and Inactive, each given half the time allotted for the button. There is a pause symbol and a vertical line dividing the two areas. Of course, you can extend the time that a button is on the screen to any time length you wish, but it s important to note something about the pause that confuses a lot of Captivate users. The pause in a button will stop the timeline until the learner clicks the button, preventing anything after that on the timeline from appearing. Take a look at the timeline below. If the timeline above represents all the objects on the screen, you can see that immediately a button will appear. Note that the button pauses the timeline at the 1.5 second mark and that nothing else is shown until after that point. That means that the user will only see the button. When the user clicks the button, the timeline will proceed. What happens next? The upleft.swf animation is shown along with another button. The second button pauses at the 3.1 second mark. That means the bundle.jpg image will not be shown until after the user clicks the second button. By the way, note too that the first button will disappear from the stage just before the second button pauses. Page 12

16 How to Insert a Text Entry Interaction and Set Options They re Not Just for Testing the Learner! Text entry boxes can be used in a number of ways: To collect information and save it later (this will be shown in Part 4 of this series). To have the user enter a password and have it show as *****. To mimic a text entry field on a form. A Point of Confusion for Some: The Default Text Option Notice that in the Default text field, I ve placed the word George and that the acceptable correct answers are George Washington or simply Washington. That means that when the text entry box is shown on the screen, it will already have the word George in it before the user types anything. Think of this as a hint for the learner. If the question is Who was the first president of the United States? you ve provided the first name for the learner. The learner in this case can choose to leave the first name there and add the last name or erase the first name and type the last name because we will accept either entry as correct. The question Who was the first president of the United States? is not typed in a Text Entry dialog. Instead, you must put that on the screen using a regular text caption. Finally, many fail to note that they can change the font, size, color, etc. that the user s entry will use. You can change all those aspects by clicking the Font button. Page 13

17 Text Entry Interactions Pause Too Just as is true for button interactions, text entry boxes will also pause the timeline. See the discussion on buttons to learn how this affects playback. Ways to Insert a Click Box Interaction and Set Options The Invisible Areas! Click boxes are invisible areas of the screen. That means that you normally need to have something already on the screen over which you will place a click box. These are typically used to test the user s knowledge but can also be used in place of buttons for menus and other types of screens. For example, let s say we want to ask the user the question as in which of these three phases of e-learning production the Analysis is done. We can insert a Click Box and move it over to the Discovery phase. Page 14

18 We would ask the learner the question (using a text caption) and then let the user click the right answer. Page 15

19 In other words, click boxes are great when you already have something on the screen, such as an image or a text list, and you want the learner to click the correct area. In addition, you can insert more click boxes and have them cover the wrong answers if you wish to give the learner specific feedback as to why a specific choice is wrong when clicked. Pausing By default, click boxes will pause, though you can turn off that option in the Options tab. By default, click boxes will pause, though you can turn off that option in the Options tab. Because they are invisible, click boxes are active the whole time they are on the timeline. You can see that the pause is at the very end of the click box object and cannot be moved. Page 16

20 Your Homework Assignment Your assignment (if you choose to accept it) is to do one or more of the following. If you run into any problems or you have questions, please me your file and questions: I will try to answer within 3 business days. 1. Images: Create an image and edit it using the Image Edit options. Change its transparency level as well and make it a watermark on the screen. Place more than one translucent image on top of one another for interesting effects. Attach audio to at least one image. 2. Video: Insert at least two videos, trying different options for each. 3. Animation: Insert a SWF animation and attach audio to it. Use one or more of the free ones in the Gallery folder. Try using other SWF files too. 4. Buttons: Set up two to three buttons on the stage, staggering them on the timeline so that no two buttons appear on the screen at the same time. Insert images or other elements that are shown and disappear as buttons are clicked. 5. Text Entry: Set up a password screen that tests the user s ability to type the password xyz123kj. Be sure to accept only a correctly capitalized password and that you only show asterisks in the text entry box. 6. Click Box: Set up a diagram or image of your choosing on the screen. Place two or more click boxes in sequence on the timeline so that the learner must click each area in order. For instance, you can use an image of a train with the engine and caboose in the wrong order and ask the user to click each train car in the correct order from front to back (engine first, then another car, then the caboose). Thank You! I appreciate your attendance in my class and hope that you found it useful! me your feedback and suggestions please: jganci@dazzletech.com Page 17