Creating Screen Capture Simulations
Learn the basics of creating screen capture simulations. To view a printable version of this course, click here
Site Map
  • 1. Creating a simulation
    1. 1.1 Downloading ViewletBuilder Pro
    2. 1.2 Getting started
    3. 1.3 Preparing to capture snapshots
    4. 1.4 Starting your project
    5. 1.5 Completing your screen capture
  • 2. Editing screen snapshots
    1. 2.1 Viewing your screen snapshots
    2. 2.2 Using the Thumbnails view
    3. 2.3 Deleting and copying extra snapshots
    4. 2.4 Central Screen
    5. 2.5 Shrink central screen
    6. 2.6 Cleaning up mouse moments
    7. 2.7 Using the timeline
    8. 2.8 Annotating your simulation
    9. 2.9 Adding Shapes
    10. 2.10 Adding Audio
    11. 2.11 Playing your screen snapshots
    12. 2.12 Compiling your simulation
    13. 2.13 Optimizing your simulation
  • 3. Importing Flash into ReadyGo WCB
    1. 3.1 Adding graphics
    2. 3.2 Adding Flash
    3. 3.3 Aligning graphics on your page
    4. 3.4 Spanning bullet points
    5. 3.5 Using graphics with blind readers
    • Creating Screen Capture SimulationsCopyright ©  2011 by ReadyGo Inc. All rights reserved
    1.Creating a simulation
    The basics of creating a screen capture simulation
    1. 1.1 Downloading ViewletBuilder Pro
    2. 1.2 Getting started
    3. 1.3 Preparing to capture snapshots
    4. 1.4 Starting your project
    5. 1.5 Completing your screen capture
    1.1 Downloading ViewletBuilder Pro
    To create screen capture simulations, you need simulation software. There are many good simulation tools on the market. In this course, we will modify existing graphics using the free trial version of Qarbon ViewletBuilder.
    1. To get started, go to the Qarbon web site to download ViewletBuilder.
    1. You need to install the ViewletBuilder Professional software on your PC.
    1. If you have not purchased ReadyGo Plus you can still download the full version of ViewletBuilder Pro. The trial version will put a watermark on your finished Flash file.
    It's True! It's True! It will take about 10 minutes to download and install Qarbon ViewletBuilder Pro.
    1.2 Getting started
    After installing ViewletBuilder:
    1. Click the ViewletBuilder Icon on your desktop.
    1. Click New Project found on the left side of the start up screen
      1.3 Preparing to capture snapshots
      ViewletBuilder has a screen that will guide you through the setup required before you can start capturing information.
      1. The default options work well for most projects. You might want to modify some of the default options (discussed on the next page).
            1.3.1 1.3a Starting ViewletBuilder
            <a src="graphics/simulation.swf"></a>
            1.4 Starting your project
            Taking snapshots
            1. After clicking OK, You can grab the dotted line that surrounds your screen. This allows you to minimize what is being shown on your screen.
            1. Double-click to tell ViewletBuilder you are ready to begin capturing information.
            1. All mouse clicks and movements are saved to create a new project.
              1.5 Completing your screen capture
              When you are finished capturing your screen snapshots:
              1. Go to your task bar and click the ViewletBuilder icon.
              1. Your screen snapshots are saved in ViewletBuilder.
              2.Editing screen snapshots
              The basics for editing screen snapshots
              1. 2.1 Viewing your screen snapshots
              2. 2.2 Using the Thumbnails view
              3. 2.3 Deleting and copying extra snapshots
              4. 2.4 Central Screen
              5. 2.5 Shrink central screen
              6. 2.6 Cleaning up mouse moments
              7. 2.7 Using the timeline
              8. 2.8 Annotating your simulation
              9. 2.9 Adding Shapes
              10. 2.10 Adding Audio
              11. 2.11 Playing your screen snapshots
              12. 2.12 Compiling your simulation
              13. 2.13 Optimizing your simulation
              2.1 Viewing your screen snapshots
              The ViewletBuilder Screen shows all views at once. This chapter will discuss the workings of each view.
              2.2 Using the Thumbnails view
              One of the views is Thumbnails. From Thumbnails you can:
              1. View a series of screen snapshots.
              2. Delete screen snap shots
              3. Copy, paste, and move snap shots
              2.3 Deleting and copying extra snapshots
              1. Many times you will have extra snapshots. To delete extra snapshots:
                1. Identify the snapshot you want to delete or duplicate. A blue line will be highlighted around the snapshot.
                2. Click Delete to delete the snapshot.
              2. Click Copy then Paste to add a snapshot.
              2.4 Central Screen
              From the central screen you can:
              1. View mouse movements
              2. Add notes
              3. Add highlights
              4. Watch the movements
              2.5 Shrink central screen
              You can watch each page to make sure the actions play the way you want.
              1. The central screen is initially viewed in full size
              2. To watch screen movements you will want to shrink the screen
              3. Click the magnifying glass icon to make the screen larger or smaller
              2.6 Cleaning up mouse moments
              ViewletBuilder lets you control the mouse movement.
              1. This is what the curser control looks like.
                1. The green circle is where the curser starts.
                2. The red circle is the path and target for the curser moment.
              1. Move the green circle to the location you want the curser to start. Move the red circle to where you want the curser to end.
              1. If you want to have the curser stay on the same target, align the green and red circle. This is used when you want to show mouse clicks on a button.
              1. The curser moves from the green circle to the red circle.

                Note: To make the simulation look natural, we recommend that you have the curser start on a new page in the same location as on the previous page.
              2.7 Using the timeline
              The timeline can be used to control and modify each screen capture.
                1. Each element is displayed in the timeline.
                1. You can shorten the duration or change when the element starts and ends by moving it within the timeline. You can also delete an element from the timeline.
                1. Hints:
                  1. On the cursor path the bar is used to designate when the curser action plays while the diamond is used to show when the sound plays.
                  1. You can synchronize when shapes and notes appear by moving the shape and note bar on the timeline.
                  1. Animation is used to highlight when elements change on a page.
                    1. ViewletBuilder captures changes on the page between clicks. Changes may be a mouse-over or a PowerPoint animation.
                    1. The animation bar is segmented. Each segment represents a changed view on the screen. Move the animation bar or segments within the animation bar to synchronize when elements on a page change.
                2.8 Annotating your simulation
                Annotating a simulation provides the student with additional information.
                1. From the toolbar, click the Notepad option.
                2. A notepad graphic appears.
                3. Type your comments in the Notepad.
                2.9 Adding Shapes
                Shapes are an easy way to highlight a section of your screen.
                  1. Choose the shape option in the toolbar.
                  2. Modify your shape in top toolbar.
                    1. You can identify the fill color and level of opacity.
                    2. You can identify the outline color and size.
                  2.10 Adding Audio
                  Adding audio is simple. All you need is a microphone for your PC.
                  1. To add sound, click the audio icon.
                  1. An audio palette opens.
                  1. Audio's are associated with a specific snapshot.
                  It's True! It's True! For your audio to go quickly and smoothly, you should create a script broken down by each screen snapshot page.
                  2.11 Playing your screen snapshots
                  We will now preview our snapshots.
                    2.12 Compiling your simulation
                    You can now turn your viewlets (snapshots) into a Flash simulation.
                    1. The screen snapshots are converted into a Flash simulation.
                    1. When the compile is complete, you can view your Flash simulation.
                    2.13 Optimizing your simulation
                    You may want to optimize how you want your final simulation to play.
                    1. Click the properties icon, then choose Flash.
                    3.Importing Flash into ReadyGo WCB
                    The basics of importing a Flash file into ReadyGo WCB
                    1. 3.1 Adding graphics
                    2. 3.2 Adding Flash
                    3. 3.3 Aligning graphics on your page
                    4. 3.4 Spanning bullet points
                    5. 3.5 Using graphics with blind readers
                    3.1 Adding graphics
                    Graphics improve the user experience by providing a visual image that supports the text.
                    1. You can add graphics to a bullet page by clicking the Graphic/Audio button.
                    2. You can also add graphics to the front page and side bar, Tell Me More, Try This, and Step-by-Step pages.
                    3. Using the Graphic/Audio button you can easily integrate the following into your course: graphics, audio files, simulations, plug-ins, Java applications, or any other web tool.
                    Tip Tip You can tell if you have added a feature by the check mark in the top left corner of the icon and the icon becomes colored.
                    3.1.1 3.1a About the Graphic Element Type field
                    The graphic tool provides you with many options.

                    Local Figure/Graphic (*.gif, *jpeg, *png, etc.) - You can add any graphic that a browser can display into your course. Select this option when the graphic is on your hard drive or a hard drive on a local area network (LAN) that you can access.

                    Remote Graphic - Use this option when the graphic is on a different web site. This graphic is not integrated directly into the course. The student must have Internet access to the location to see the graphic. An example of a remote graphic is a stock ticker located on a financial site. In this example, since the graphic is constantly changing, it is best to leave it as a remote graphic.

                    Java Applet - A Java Applet is a program that can run on a student's browser. Use this option to integrate simulations into your course.

                    Plug-In (embed) - Voice, video, and many graphics need a plug-in to work. You can integrate any content requiring a plug-in when you choose this option.

                    Local Image + URL - This feature turns a local graphic into a "hot" or linked graphic. When a student clicks on a linked graphic, a new web page or web site is displayed in a separate browser window. This keeps the class sticky by leaving the current page displayed in a window. The student accesses a new location in a new browser window.

                    Advanced/Other (Enter/HTML) - Use this option to integrate anything that runs on the web such as any HTML or JavaScript.

                    3.1.2 3.1b Adding Graphics and Audio
                    Step Instruction What it looks like
                    1 Click the Graphic/Audio button.
                    2 In the Graphic Element Type field, specify the type of media you want to integrate into the course.
                    3 In the Alternate display name field, specify text that is displayed when the student moves the mouse over the graphic in the course.
                    4 Specify the size of your graphic. The default height of -1 and width of -1 allows the browser to display the graphic in its default size.
                    5 Click Select Image to find the graphic on your computer. Select the graphic you want to use and click Open.

                    To see a preview of the graphic you selected, select Preview Graphic.

                    6 Specify how you want the graphic placed on the page.
                    7 To add an audio file to the page, select the Audio check box.
                    8 Select whether the audio file is a local file or is located remotely where you will provide a URL for the file.
                    9 Choose how you want the audio file to play on the page.
                    10 If you selected to insert a local audio file, click Select Audio to find the file on your computer. Select the file you want to use and click Open.

                    If you selected to insert a remote audio file, enter the Remote URL.

                    11 If you selected Play when User Clicks Audio Graphic, you can specify text that is displayed when the student moves the mouse over the audio graphic in the Alternate Display Name field.
                    12 Add any additional options that may be required for the plug-in in the Advanced Optional Instructions field.
                    13 Click Done to save your changes.
                    3.2 Adding Flash
                    This simulation shows you how to add a Flash file to ReadyGo Web Course Builder.
                    1. Remember to choose Plug-In from the Graphic Element Type menu.
                    1. The browser can not read the display size for a Flash file. You must enter the graphic display size. If you do not know the size, a good estimate to start with is 600 x 600. You should center the Flash file.
                      2. <a src="graphics/flash.swf"></a>
                      3.3 Aligning graphics on your page
                      You have three choices when aligning graphics on your page.
                        It's True! It's True! If you choose Center, the bullet point associated with the graphic will be above the graphic.
                        3.4 Spanning bullet points
                        Spanning bullet points lets you associate a graphic with one or multiple bullet points.
                        1. Next to each graphic button is the Span dial. You use this dial to choose how many bullet points you want your graphic to span.
                        It's True! It's True! Spanning lets you better align bullets to graphics.
                        3.5 Using graphics with blind readers
                        Many government agencies need to make their web site friendly to people with disabilities. All ReadyGo courses are already set up to work with blind readers.
                        1. The Alternate display name (Alt tag) is provided so that you can enter explanatory text.
                        1. Since a blind person cannot see the graphic, you need to provide an description of the graphic.
                        It's True! It's True! It is good web etiquette to use the Alt tag for graphics.