Creating Multimedia Demonstrations Using ViewletBuilder Good Afternoon, everybody … Pawan Nayar & Tanvi Malhotra

Agenda Multimedia Creation Tools Uses of ViewletBuilder ViewletBuilder – An Overview In this workshop, we will provide a brief overview of the principles on which all multimedia creation tools are built. We will see how these principles are used in ViewletBuilder and how can we use various features provided in ViewletBuilder to create viewlets (Flash demonstrations created using ViewletBuilder) that can be effectively used for different demonstrative, training, customer support purposes. We will also create a small viewlet during this workshop. Qarbon, the maker of ViewletBuilder, has a stall where you can pick up evaluation copies of ViewletBuilder. You can use this copy to create viewlets when you get back to your workplace. We will keep this session as interactive as possible. Feel free to ask questions as and when you have them. We will try to answer them. However, in the interest of time, if some questions are causing long-winded discussions, we will park them to the end of this workshop. Creating a Viewlet Q & A

Multimedia Creation Tools Macromedia Fireworks Camtasia Studio ViewletCam ViewletBuilder Captivate Depending upon your requirements and budget, you can choose from an array of tools. If you just need a screen recording tool with limited audio and text inserts, then Camtasia Studio and Captivate (formerly RoboDemo) are pretty good options. ViewletCam is developing on the same lines. If you need a relatively more robust tool that allows planned screen-based recording with excellent animation text addition support, then ViewletBuilder is a cool choice. We will cover Viewletbuilder in detail in the rest of this workshop. If you have a top-of-the line animation requirement for creating a high-quality jazzy demonstration for the web or important presentations or real complex multimedia CBTs, then Macromedia Flash in conjunction with Macromedia Fireworks would be a better option. The tool that you use should be determined by your requirements – this emphasizes the need for design and planning even further. Note that as your requirements increase in complexity, so will the price of the tool. A more complex tool will not only be costlier but will also have a higher learning curve and maintenance expense. From that perspective, ViewletBuilder makes a fine choice given the feature-set available, ease of use and its cost. Macromedia Flash

Uses of ViewletBuilder Using ViewletBuilder, you can create demonstrations for: Internal and external training New product feature, datasheets Frequently Asked Questions ViewletBuilder is useful in creating training solutions that need to be deployed on the net. It’s easy to use and depending on the size of your organization and maturity of roles, you can have either technical writers creating demonstrations or have SMEs themselves creating demonstrations explaining product features or complicated procedures. You can also create viewlets that can be used to train internal employees. ViewletBuilder’s power lies in its ease of use and quality Flash output. You can use the Flash content generated by ViewletBuilder to effectively market new features or to explain or animate answers to complicated frequently asked questions. You can also create self-running viewlets for use in websites or even stalls and conferences. If you have an evolved Learning Management System in your organization, then ViewletBuilder can be used to extend the number and reach of learning modules and help in the quick deployment of fresh content over an exciting content base. Integration with LMS

ViewletBuilder – An Overview ViewletBuilder allows you to create quality demonstrations by: Capturing a series of snapshots and animating them Adding text, sound and mouse cursor movements Adding pictures, callouts, shapes, balloons and notes (We will briefly explain the following and have more detailed explanation later.) ViewletBuilder allows you to quickly create projects with a series of snapshots or images. You can either import these images or perform a continual slide-based recording session. Once you have captured the images or imported them, you can add layers of pictures, dynamic callouts, static images, inserted text, balloons or tips. This way you can create build-ups while explaining concepts or procedures. You can also add sound by importing wav or au files. You also have the option of directly recording to a slide. You can record up to 4 minutes of content per slide. You might also have a few slides where you would like to add interactions such as text-entry or clickable hotspots. For example, you might want the user to select a menu command or enter a password. Using interactive features of ViewletBuilder, you can perform these tasks. If you are recording a series of snapshots, then you can animate them by capturing the cursors and mouse movement. The animated movement in viewlets goes a long way in capturing the users’ attention. If you wanna create training applications, then you can also add multiple choice questions. The results, can then be calculated and integrated into any SCORM or AICC compliant system. You can also pre-append or post-append Flash demonstrations. For example, to standardize your viewlets, you might want to append your company logo to all the viewlets. We will cover these in greater detail as we proceed. Adding interactions – mouse click, text-entry, hyperlinks etc Integrating Flash demonstrations and other LMS content

Creating a Viewlet Building the Animation Compiling the Viewlet Storyboarding The process of creating a viewlet can be broadly divided into three phases – storyboarding, adding individual elements to create the animation and compiling. Storyboarding is the process of defining visual content as text. It’s equivalent to creating a movie. To create an effective flash demonstration, you must have the flow right. You must know what all you will cover, where and why. The content should build from simple to complex topics. All individual elements that would be used for each slide should be thought of in advance. …(show example here) Once you have created the storyboard, its time to actually start recording, inserting text and pictures, and add various elements of interactivity into the project. Next, define the compilation settings and compile the viewlet. You can view the compiled output and iteratively make changes till such time that you have refined the output to suit the eye, ear and intent.

Creating a Story Board Phase 1 Phase 2 Phase 3 Identifying graphic elements Adding interactivity Scripting text Storyboarding: Provides an idea/overview of the demo Helps assess/evaluate time and effort required to create the demo Assess elements required in terms of graphics, audio and interactivity Helps validate strategy

Building the Animation Creating a project Adding text, color, notes, balloons, shapes, images and audio Adding hyperlinks and zones The broad steps in creating an animation are displayed. We will demonstrate these steps in the next few minutes … Animating cursor movements Compiling the project

Getting Started Screenshot Project Images Project Blank Project Images form the base of every animation. ViewletBuilder allows you to capture a sequence of steps to build a project or import existing images to build a project. Irrespective of the type of project you choose to create, you need to specify the project size first. It is only after this that you start building up on the project. When creating a screenshot project, not only do you define the project size, but also specify the area to be captured and a hotkey to capture the sequence. Once you are done recording, you can press the ViewletBuider icon on the taskbar to stop recording. An images project, on the other hand, allows you to import a series of images which you can then tweak to build-in interactivity. If you are a hard-core creative person or have the ability to create viewlets as you think, you can start with a Blank project. No rules for you, Michelangelo!

Setting up the Animation Adding text, color, notes, balloons, shapes, images and audio We will now show how to add different elements such as text, audio, hyperlinks and zones. … Notice that there are three ways to add text (in fact 4 if you assume you can add a picture); 3 options for adding a picture or shape; and 5 different zones. … There is a separate toolbar for sound. To view it, select the Sound Palette from the View menu. …

Adding Interactivity ViewletBuilder allows you to insert: Hyperlinks Click Zones Text Zones Quiz Zones To add interactivity in ViewletBuilder, you can use the following options. A hyperlink – You can create a hyperlink over a shape or an image. This hyperlink can point to an email address, a website, another viewlet or slide in same viewlet. You can open another window to open the alternate viewlet or web site. Zones – There are 5 zones available. A zone is an area on the screen where we are expecting an action. It could be a mouse-click, a text-entry terminated with the Enter key; a keystroke; a quiz where you select a correct option; or simply a pause zone where pressing Page Forward takes you to next slide. Most zones come with a Feedback loop, where you get a choice to define text feedback for correct and incorrect options; you can control the font and color of the feedback and define what will happen if the person makes a correct or incorrect action. Based on the user’s input, you can go to a different slide, move forward or backward, display score or even send an email. We will now demonstrate how you can use these zones. Keystroke Zones Pause Zones

Animating Cursor Movements Continuity and flow in a captured screen sequence is the key to a good animation. ViewletBuilder helps overcome this hurdle with quality cursor movements. You can capture mouse movements as they occur – irrespective of the project type. ViewletBuilder will capture the starting mouse pointer position, the ending mouse pointer position, the shape of cursor and use its algorithm to have a straight or curvilinear path assigned. You can edit cursors by controlling the circles. The green circle represents the starting point for cursor movement. This is editable. The path represents the track where the cursor will travel and the red circle (non-movable) represents the ending cursor movement. The ending cursor movement for one slide is the starting cursor movement of next slide. You can synchronize the movement across two slides by aligning the starting cursor point with the ending cursor point. Show demonstration …

Compiling the Project Defining Compilation Settings Once you have added all required elements in your project, you can set the compilation settings and compile the project. The compilation settings allow you to define the name of finished project, define the output size, compression quality, assign author’s and company’s name, add a description for the project, add a feedback link, pre-append or post-append flash files and so on. Compilation settings also determine the size of the output flash file. Show demonstration … Compilation settings are often set once but it is recommended that you play with them to identify settings that best suit your requirements. You can now compile and view the project. Bravo! This completes all we had. Let’s now open the floor to questions. …

Q & A