list script and flowchart

list script and flowchart

• 1.
  Creating Scripts, Flowcharts& Storyboards A successful multimedia presentation depends heavily on its design. The most fundamental type of presentation communicates a single message to a small, receptive audience. Most often presentations consist of a delivery of a sequence of messages of varying importance to an audience with varying degrees of interest level and responsiveness. The design goal then changes to delivering the messages with proper effectiveness to the correct portions of the audience. Content design is the single most important element of any multimedia presentation. If you don’t know what you are trying to communicate, you can’t communicate it. To understand your content it is imperative to semantically connect the related aspects into a map or network of modules. A semantic map is a tool that can help us reach that deeper understanding as we quickly list groups of associated ideas. e.g. A Book Is used For Is Like Is made of • Getting Information • Being taken somewhere • Paper • Entertainment • A door to new ideas • Words • Escape • Sentences • Images • Beliefs A concept map is generated in the following manner : More old People People Live Longer World population Grows Multigenerational Families Possible Social Security Crisis Generation Gap Retirement Lasts Longer People Work Longer Cities more Crowded Less Open Land People Consume more Resources
• 2.
  In addition, thereare 4 skeleton maps for Semantic Mapping. The Sequential/Episodic Writing Descriptive Writing The Comparative/Contrastive Writing Classificatory Writing
• 3.
  Once you knowwhat to say, ask yourself how you are going to say it. In multimedia you have five ways : you can write it, illustrate it, wiggle it, hear it, and interact with it. The following section describes all these. For the proper use and synchronization of all these mediums the different teams that work on the various mediums of multimedia must have a common goal and a plan with complete technical or specification architecture for any piece of software planned. These documents are your production plan and technical specification. Three documents that may be proposed for multimedia designing are the flowchart, storyboards and scripts. The flowchart A flowchart is a visual blue print of how the interactive program works. The flowchart is typically used by the interactive designer and programmer to determine how and when each media elements will appear to the person using the application. The Storyboards : A storyboard is an expression of everything that will be contained in the program - what menu screens will look like, what pictures (still and moving) will be seen when and for how long, what audio and text will accompany the images, either synchronously or hyperlinked. Typically, storyboards may be written documents and off-the-shelf storyboard pads for TV and video formats, adaptable for multimedia, are available. The storyboard is everything that can be seen or heard or experienced by the end-user of the multimedia program. It's more than a test-of-concept model, and just short of the final product specification document. Scripts Scripts are normally used by the production team. Scripts are also used by the programmer and graphic artist to understand more about the tone and flow of the application. Each of these documents is an important team communication tool. These documents verify that all of the team members are working toward the same goals. They are the best to find difficulties in programming, graphic art design, video production or interactive design before they must become entrenched in the application. [ If a button must be available on the screen at all times, for instance, the graphic artist will know that from the storyboard, and will be able to design original artwork to include it. If there is no escape from a certain path in an application, the flowchart will identify that mistake to the interactive designer and the programmer.] These documents are also valuable in the last stage of application development, when documentation must be written prior to publication. If the application is well documented during its development the task is easier at the end.
• 4.
  Storyboards : Storyboarding isa concept, which is taken from film making, where each scene and individual screenshot is sketched and roughed out in the order that it occurs. This will provide an overall structure and plan to the film, which allows the director a distinct idea of where each individual shot fits into the overall movie. A storyboard is a visual representation of your application where you sketch out your ideas and concepts. You can use storyboards to represent still frames, full-motion video, or graphics. In print media, the analogous document may be the draft layout of a newsletter or flyer. Storyboards can start simply as pencil sketches with stick figures, which can be handed over to the artist or designer to illustrate your first ideas. Storyboards help set the tone , and define the flavour of the application. Will your application present clean, uncluttered choices or an invitation to roam and explore information? Are you trying to convey a certain corporate image? Should a logo appear on every screen? Who are the characters in the application? What are the settings? Storyboards are a way to put the team’s creative ideas into a visual presentation. They will progress in stages parallel to the development of the project. Early storyboards may only show full screen images. Later versions will need text and icons to explain the interactions available to the user. The storyboards will also reference the script. Storyboards may also be used as presentations to clients or management, or may be kept internal to the development. You should assign file names to the different multimedia elements for organization and planning purposes. As soon as you acquire an element, it can be catalogued, and the file name placed on the storyboard. These filenames will correspond to filenames in the flowchart. This way all team members can be consist about how they are identifying images or elements. A storyboard does not usually show every screen or element, but shows major categories of screens and how they will work. If you are creating a multimedia encyclopedia, or parts dialog, for example you may create a screen that shows how a text search works, each text search would work exactly the same as any other one. You may also show how text would be highlighted to designate that there is a still associated with it. The placement of any stills, and how audio is assessed will probably only have to be documented one time. Each of these storyboards would then be used by the graphic artist and programmer to create a consistent interface to all the same types of interactions.
• 5.
  The Advantages ofStoryboarding Storyboarding need not take the considerable time that some think it does, depending on how one go about it. And there are significant advantages to be considered. • It helps catalyse feelings about the feasibility of the program idea. If the storyboard looks wrong, the program will too. • Omissions may be spotted as a result of producing the storyboard. There is a document which everyone can point to as a common point of reference, enabling the design team (which includes the client) to say, 'Yes, that is what I meant', or 'No, we've a problem here'. • The storyboard helps focus on the total content of the program, both from the point of view of the overall size of the program, and in discussing user interaction times. • Problems may be spotted from the storyboard, which may have proven more costly to correct at a later stage. A detailed storyboard can save time in writing project documentation, in the production of the product specification document. • Advanced planning can result in templates for the content-writer to work with. This speeds up the content-writing process and makes the production of the storyboard itself so much faster. Measuring the true effectiveness of storyboarding is, of course, problematic. There is a lack of data from commercial developers, and questions must be asked of the reliability of what data is available. Few developers are keen to admit, or even measure, the costs of program revision arising from weaknesses in planning, -- increased costs being added to the client's bill or absorbed as acceptable loss of profit by the developer. But if storyboarding has a role to play in the design process then studying how to go about it the right way must influence product design; Interactive Storyboarding With the increased power and ease-of-use of present multimedia authoring tools, interactive storyboards are now possible as has been developed by HyperCard and Macromedia Director. An interactive storyboard is a working version of the program but produced in an easily adjusted form to material to be added and adjusted without requiring any deep-level programming. Used in conjunction with other design and production documentation (the treatment, flowchart, product specification and individual team-member production briefs), it adds greatly to the development team's understanding of its objectives by providing a common point of reference to illustrate the structure and feeling of the projected software program from the end-user point of view.
• 6.
  An interactive test-of-conceptmodel and an interactive storyboard will differ principally by their level of completeness and also by the purpose for which each is used. The test- of-concept model is produced when the design is at a plastic stage and is an aid to thinking about the problem and arriving at better and best solutions. Thus there may be several test-of-concept models before a final design is fixed on. But once the final design is fixed on, effort should be concentrated on fleshing out the model by developing the content in a detailed way along each of the program's branches and in each of its sections. The storyboard will define largely what needs to be written, what graphics need to be produced, how best to apply transition and other computer effects, and the information playback load on the target-computer delivery system imposed by simultaneously accessing diverse media-types. If the product is an innovative one, the production of the interactive storyboard should precede the production of the product specification document, which enables the prototype to be constructed. This ensures a deeper level of reflection and testing of the methods by which the content is to be delivered before committing to the relatively more expensive production of a prototype. If the program type is not innovative, however, and simply the reapplication of proven strategies and techniques, interactive storyboarding is still of value. In this case, it may occur after the production of a product specification in both instances, it will serve in as an aid in drawing up the briefs which must be produced separately for software, graphics, film and sound-engineer team members. The speed with which storyboards and working models can be created means that it is unimportant whether or not the final software is to be written on the same platform as the authoring tool, although if the final production itself is to be produced using only an authoring tool then it is, of course, desirable to plan and design using the same tool. In the working model pathways can be tested through the material to investigate the look and feel, the consistency and ease of use of the program, even before the complete screen text (if any) has been added. The top-left-hand part of the screen should represent the viewing area to be presented to the end-user. On a 14"-screen, typically, this is all of the storyboard that would be viewable to allow visual impact and cursor-interaction movements to be assessed. On a larger, 16"-screen, say, a wider range of information fields relevant to different parts of program research and production come into view. The program can be customised to conceal those fields, which are not relevant to a particular development team member for the sake of clarity. Printouts are then made, which, along with statements from the interactive designer, document clearly and exhaustively the extent of a program and the detail of what needs to be completed. Using Interactive Storyboarding to Speed-up the Content-writing Phase Content writing is an unpredictable phase at best. The unpredictability arises from uncertainties, which are inherent in any creative process. Where the content writer and the designer are one-and-the-same there are fewer problems, but this is not often the case. A further problem area is where the client is also the content expert/writer. In such instances, forcing the client to keep to project deadlines can be problematic since
• 7.
  development teams' internalscheduling requirements will often be invisible to the client. Anything that can be done to speed up the content-writing phase is to be welcomed. The test-of-concept model helps focus attention on the overall form and approach of the program. This is then extended in functionality to act as a template for the content-writer. A storyboard of every screen in the resource is produced, with blanks to be filled in by the content-writer. These screens can be printed out to allow the content writer to pen in their contributions. Much more interesting and productive is when the content-writer is confident enough to write directly to the storyboard in its interactive form. This involves the content-writer sitting in front of the template version of the program, referring to a printed flowchart, which illustrates the overall structure. The writer navigates through the program as an end-user would, with access to all program sections and levels. The writer then clicks on open text fields on the screen to enter the text to appear at the appropriate part of the screen. The advantages of the technique, which allows content to be composed within an interactive template, are several. • It ensures a systematic approach to the content-writing phase of any project. • A great amount of time is saved in inputting the text which would otherwise have to be transferred from paper to word-processable form, and then passages and captions cut and pasted to the appropriate part of the interactive program. • The technique is useful in motivating the writer by their deeper involvement in the design process. • It also ensures that people are writing with the constraints imposed by the output screen in mind,--avoiding too much text on a screen, say, and making sure that the text-size is readable. In this manner, the writer’s attention is directed to every detail on every screen, which concerns them, and potentially serious omissions are avoided. • Finally, the technique can greatly facilitate the localisation of the program for foreign language markets, since problems of text-translation which affect screen layout are immediately identified in translating directly to given screen areas. Using Interactive Storyboarding to Speed-up Report Document Production A well-produced, computer-generated storyboard can also reduce the time required to produce a product specification document and production briefs, which will differ in each case for programmers, graphic artists, film crews and sound engineers but which require accurate visuals to effectively communicate specific points. As already mentioned, interactive storyboarding enables decisions to be evaluated at an early stage on screen text-fonts, screen layout, image size and resolution, and facilitates the calculation of the file-size of the application. Once these decisions have been made and incorporated into the storyboard, storyboard screens can be output to print in expanded templates which
• 8.
  allow briefing notesto be attached to each screen. Again the argument applies, that an integrated design approach to program modeling and documentation will benefit and speed development. Flowcharts Flowcharts contain the character of the application, and can be read like a blueprint of a house. If you are not the programmer, a flowchart provides you with important information. It visually describes the complexities of the application’s software program flow, and the relationship between the content and the end user. There are basically two types of flowcharts a)the branching, nested menu format and b)the hypermedia type. A flowchart for a multimedia presentation may be linear as here : Flowchart showing the Mix of Media Types A Opening Montage Horizons Wright Brothers Lindbergh Montage Kitty. rtv = Build of images = Motion Video = TitleOpening of montage of sand, kitty, sun, water, seagull Horizons, title, screen Montage of Wright brothers, maxim, zerbe,langley1, langle2, bird1. Real-time Video of take-off at Kitty Hawk Begin montage for Lindbergh section
• 9.
  While the elementsvary, the flow of the presentation has a clear line from start to finish. This way all the visual elements and audio files are catalogued. A presentation may be made interactive. Let us take the same presentation and make it interactive. Till the Introduction it remains the same. Then you have the option to choose information. Simple Interactive Flowchart These illustrations show the interdependency of both storyboard and flowchart. Without the storyboards, the actual navigation devices - menu options, buttons and the visual effects of how the information is presented - is lost. Flowcharts are the character, storyboards are the personality. Opening Montage For Horizons Main Menu Horizons zons Maxim/zerbe 20 s Maxim /zerbe Langley Kitty. rtv Lindberg 1 trimotor Lindberg 2 St.Loui. rtv ww II - 1 ww II - 2 bellxs yeager flyby. avs space. avs Exit to DOSPlanning Simplicity Technology Today
• 10.
  One of themost powerful features of the DVI technology is the ability to give application users unlimited choices in the way that they approach or seek information. Some people have coined the word “hypermedia” to describe this feature. Essentially this capability gives you the power to link certain information (whether text, audio, graphics, full motion video) that shows more detail about a particular topic. Where the linking of various media are involved the flowchart will have to identify the types of interactions. The type of links would be identified and a database of the elements would then be attached to each of the flowcharts used. Here is the flowchart of an interactive training software designed to help new LAN users learn more about the network. The application has a nested menu - the introduction leads you to the main menu. The dark shadow under the menu icon indicates that there is another attached flowchart for that topic. the flowchart shows that there are four menu options. The choice of “Application Software” takes you into a linear presentation and then to a quiz. This flowchart illustrates a remediation path, and the use of nested menus. Sophisticated Interactive Flowchart Craig V.O #20 Main Menu Local Area Networks applications Software #1 LAN in operation How to access Data Files # 1 LAN # 2 LAN # 3 LAN # 4 APP SW # 2 QUIZ LAN OP # 2 LAN in Operation Menu How to # 2 Quiz Quiz Quiz Printing a Document Sending a document over a Modem Applications Software available
• 11.
  At any pointin this application, a user may come upon a term that will need definition. When a term is selected, the application will immediately show the term and its text definition or audio, graphics, motion video or a combination of two or more media taken from another part of the application itself. The sequencing of the branches are documented on the flowchart which the programmer makes sure that the interactions are possible. Our last example of an application that uses hypermedia concepts is one that is used as an educational piece to teach people , say about semiconductors. The figure below shows how you can choose a topic, which is shown as a graphic representation of an illustration, as the central menu choice. The Chip Menu (CNN) is a jump-off point for more detailed information about i486 microprocessor. The flowchart identifies how a person using the application would get to this particular topic from CN2. Interactions and what information would be needed in a screen are indicated by the programmer. e.g. “Go Back” buttons are provided on elements CN22-CN27. This shows interdependence of flowchart & storyboard. Flowchart shows necessity of button, storyboard gives description of button. Semiconductor Training Flowchart Processors Visible 486 Die Pilot Gallery See next page The 3D spinning animation of the 486 chip goes here, resolving to the last frame,CN20.Then automatically goes to the next frame. Visible 486 This frame prompts the user to click the chip illustration for details. Click to next frame. Visible 486 User can click chip diagram for details. Chip menu CN22 CN21 CN20 CN22-CN27 all contain a “Go back” button to CN21
• 12.
  The two typesof flowcharts may also be combined. The selection depends on the particular application. Writing a script A script for an interactive program is similar to a script that would be used in television or other motion video presentations. The script describes the music (mood, if not selection), the stills to be used, any special effects and the voice over or actor lines. Templates for script writing can vary, depending on the styles of a particular writer. At the least standard conventions are used to note the different elements. In most scripts audio & video are separated. Video includes a description of any still images and motion Video. Audio includes narration, sound effects & music. The script may evolve but at some point, the narration and actor lines have to be completed and locked in. There must be “pick up lines” as a part of the script for the narrator or the actor. e.g. “No, that selection is not correct. Let’s review this subject.” “Make your selection now.” When one writes out the script, it must envisage a layout that has provisions for 5 basic areas : • Title • Action • Narration • Dialogue • Interactive Control Since users reading English normally go from left to right and from top to bottom its better if your information flows in this direction. Interactive controls should preferably be on the right side. Information flow should start at narration, flow through narration, then be supported with dialog. The narration tells them your going to tell them, the animation tells them, the dialog tells them you’ve told them. Some Screen layout designs : Title Action Area Inter- Active Con- trol Narration Icon
• 13.
  Smooth information deliverypath Irregular information delivery path Title Action Area Inter - Activ e Con- trol Narration Dialog Title Narration Active Area Dialog Interactive Controls Title Narration Dialog Action Area Interactive Menu Bar
• 14.
  Position Title : Aheadline comprises of text and graphic content. Text is the words and graphic content includes font, typography, color, and size. Move the heading around the entire screen and see where it looks most comfortable. Some Tips : Use a thick line to work with Vary the thickness and length of the line Keep moving it until you fell the emotions you want to deliver. Don’t be afraid to try odd angles and positions. Position Subtitles and Body copy Begin by placing one or two subtitles around the title. You can try angles, offset copy and island titles. Never mix more than three type sizes on a single place. Some tips : Be aware of the different line sizes and the objects they represent Visually separate your text objects Add more & more lines. Then remove them to see the layout both ways. Vary the weight of headlines as opposed to copy. To begin the process of designing, always choose the exact title or headline, place the headline or title on the proper place of a screen. A headline consists of two components : Text and Graphic content. Text content is simply the words. Graphic content includes font, typography, colour, size and orientation. ACTION This is where all of the action happens. The first job is to deliver information in proper way, the second job is to choose the right Background and texture, and the last one is to choose the proper themes / styles to represent it. NARRATION This is the area where describes what’s going on in the action area. DIALOGUE This is the main body copy. Dialogue contains more information about the contents of the action area. INTERACTIVE CONTROLS This is the area, which helps user to interact with the presentation.
• 15.
  Conclusion Storyboarding was chosenas a focus to illustrate how an integrated approach to the design process can help design teams. If storyboarding has a role to play in the design process then studying how to go about it the right way must influence product design. Indeed, I would argue that, for complex multimedia products and in extended working teams, detailed storyboarding is essential.