Section2.1MultimediaAuthoring23FQueFmeBtheokcae国区Frame Edit View Qbje-tHelpGraphieArinationAudoVdeoConrotnteraaHOORNitThis exainple starts up theWindows Calculator.If theuser mininizesthe calcutator and then#trlesto start itup again,the Calculatorlsibrought to the top instead of starting up another instance of it.ffTo usethis inyourtitles,copythefolowingthreelines intofyour frame aswell asthewaichfor.Thenmocifyihe watchlfortowetch for whateverbuttonoreventyouhavedesignatediiwill launchthe calculator.Youdonotneedtousetheficall prograrn tool at the title design level for this to work.WORD wStatus;Copy these 3 lines ofHWND hwnd:ficode into your framecharszMg[00]craphic Fle (calc.bamp)"OpenCale@PanelJiCopythis watchtor into your traine and modlifyitto watchfor whatever event you would ike to launch the caliculator@@Watchfor..."OpenCalc"LButtonClickedthen..insLine10FIGURE2.2:Quest frame.arebasically eventprocedures or procedures triggered bytimer events.Usually,youcan write your own scripts.In a sense, this is similar to the conventional useof the term*"scriptinglanguage"--onethatisconciseand invokes lower-levelabstractions,sincethat is just what one's own scripts do.Director, by Macromedia, is the chief exampleof this metaphor. Director uses the Lingo scripting language, an object-oriented,event-driven language.2.1.2MultimediaProductionA multimedia project can involve a host of people with specialized skills. In this bookwe focus on more technical aspects,but multimedia production can easily involve an artdirector,graphic designer,production artist,producer,projectmanager,writer,userinterfacedesigner, sound designer, videographer, and 3D and 2D animators, as well as programmers
24Chapter2Multimedia Authoring and ToolsKpsksSOEHaJoGFIGURE 2.3: Two cards in a HyperStudio stack.The production timeline would likely only involve programming when the project isabout 40% complete,with a reasonable targetfor an alpha version (an early version thatdoes not contain all planned features) being perhaps 65-70% complete. Typically, thedesign phase consists ofstoryboarding,fiowcharting,prototyping,and usertesting,as wellas a parallel production of media. Programming and debugging phases would be carriedout in consultation with marketing, and the distribution phase would follow.A storyboard depicts the initial idea content of a multimedia concept in a series ofsketches..These are like"keyframes" in a video -- the story hangs from these"stoppingplaces".Afilowchart organizes the storyboards by inserting navigation information-- themultimedia concept's structure and userinteraction.Themostreliable approachforplanningnavigation is to pick a traditional data structure. A hierarchical system is perhaps one of thesimplest organizational strategies.Multimedia is not really like otherpresentations,in that careful thoughtmust be given toorganization ofmovementbetween the"rooms"intheproduction.Forexample,supposeweare navigating an African safari, but we also need to bring specimens back to our museumfor close examination justhow do we effect the transition from one locale to the other?A flowchart helps imagine the solution.Theflowchart phase is followed by development of a detailedfunctional specification.Thisconsistsofa walk-throughofeachscenarioofthepresentation,framebyframe,including all screen action and user interaction.For example, during a mouseover for a character,the character reacts, or a user clicking on a character results in an action.The final partofthe design phase is prototyping and testing. Some multimedia designersuse an authoring tool at this stage already, even if the intermediate prototype will not beused in the final product or continued in another tool. User testing is, of course, extremelyimportantbeforethefinal development phase
Section 2.1MultimediaAuthoring252.1.3MultimediaPresentationInthis section,we briefly outline someeffectstokeep inmind for presentingmultimediacontent as well as some useful guidelines for content design.Graphics StylesCareful thought has gone into combinations of color schemes andhow lettering is perceived in a presentation.Many presentations are meant for businessdisplays, rather than appearing on a screen. Human visual dynamics are considered inregard to how suchpresentations must be constructed.Most of the observations here aredrawn from Vetter et al. [2], as is Figure 2.4.ColorPrinciples and GuidelinesSome color schemes andart styles are bestcombinedwith a certain theme or style. Color schemes could be, for example, natural and floral foroutdoorscenes and solid colors for indoor scenes.Examples of artstyles are oil paints,watercolors,colored pencils,and pastels.Ageneral hint is to notuse too manycolors,asthis canbedistracting.It helpstobeconsistent with theuse of color ---then color can be used to signal changes in theme.FontsForeffectivevisual communication,largefonts(18to36points)arebest,withno more than six to eight lines per screen.As shown in Figure 2.4, sans serif fonts workbetter than serif fonts (serif fonts are those with short lines stemming from and at an angleto the upper and lower ends of a letter's strokes).Figure 2.4 shows a comparison of twoscreen projections, (Figure 2 and3 from Vetter, Ward and Shapiro [2])Thetopfigure shows gooduse ofcolor andfonts.It hasa consistentcolor scheme,useslarge and all sans-serif (Arial) fonts.The bottomfigure is poor,in that too many colors areused, and they areinconsistent.The red adjacentto theblue ishard tofocus on,because thehuman retina cannotfocus on these colors simultaneously.The serif (Times New Roman)font is said to be hard to read in a darkened, projection setting.Finally, the lower rightpanel does not have enough contrast-pretty pastel colors are often usable only if theirbackground is suffciently different.A Color Contrast ProgramSeeing the results of Vetteretal'sresearch, we constructeda small Visual Basic program to investigate how readability of text colorsdepends on colorand the color of the background (see the Further Exploration section at the end of thischapter for a pointer to this program on the text web site. There, both the executable andtheprogram sourcearegiven)The simplest approach to making readable colors on a screen is to use the principalcomplementary color as the background for text. For color values in therange O to 1 (or,effectively, o to 255), if the text color is some triple (R, G, B), a legible color for thebackground is likely given by that color subtracted from the maximum:(R, G,B) =→ (1 R,1 - G,1 -B)(2.1)That is, not only is the color "opposite" in some sense (not the same sense as artists use),but if the text is bright, the background is dark, and vice versa
26Chapter2MultimediaAuthoringandToolswaimediaoRoD0KC22505.TBKSFille Edit PageeppllcationsHeFA-15seeond.clipofmuslcfroma-compactdiscwasdigitizedat.threedifferenfsamplingtates(11.kHz,22khz.and44k2)With8-bit.precisfonTheeffectsofthe.differenf'samplingratesareclearlyaudibleThisTs.a.demonsfrationofthe NyquistTheoremNvguistTheorem.Press ButtontoPlay8-bit Audio ClipTheminimum sampling-Music11kHz++freguencyofianAD.converterwshould be:at-leasttwice.theMusic22kHzfrequency-of-the signal beingMusic44kHzmeasuredscloseVOI中国创国88MimedsTooi0oo38C225 01Bk3nElle Edit Page ApplicationsHelpA15secondelipofmusiefroma.compactdiscwas.digitizedatthreedifferentsamplingrates(1kHz22-kHzand44Hz)withe8-bit precision,Theeffects of the different sainplingrates arecicarlyaudible This is a demonstration of the Nyquist-TheorentaNyousThaoteTheonasaotngMusIc11kHzauencyroh-hAgonVefterarouidboatleastthsMusic22kHzfaqjuhcyoinasignalbejgMusIC44kHzmoasuredooaFIGURE2.4:Colors andfonts.(Thisfigurealsoappears in thecolorinsertsection.)Courtesyof Ron Vetter.In the Visual Basic program given, sliders can be used to change thebackground color.As thebackground changes, the text changes to equal the principal complementary color.Clicking on the background brings up a color-pickeras an alternative to the sliders.If you feel you can choose a better color combination, click on the text.This bringsup a colorpicker not tied to the background color, so youcan experiment. (The text itselfcanalsobeedited.)Alittleexperimentationshowsthatsomecolorcombinationsaremore
Section2.1MultimediaAuthoring27国口区Use the siders to change the window colorofcick onthewindowtouseacolorpicketThetextwillchangeto thewindow'scomplementary colo.Cick on the textto manuslly change itUse the sideis to change the window colororcick onthewindowlo.usea.colorpickeruselidersorcidkwindow to chdD区owcolorHelpClick textboxto changeits colorText200QuitFIGURE2.5:Programto investigate colors and readabilitypleasing than others-for example, a pink background and forest green foreground, or agreen background andmauveforeground.Figure2.5shows thissmall programin operation.Figure2.6 shows a"color wheel",with opposite colors equal to(1-R,1-G,1-B).Anartist's color wheel will notlook the same,as it is based on feel rather than on an algorithm.Inthetraditionalartist'swheel,forexampleyellowisoppositemagenta,insteadofoppositeblue as in Figure 2.6,andblue is instead opposite orange.Sprite AnimationSprites are often used in animation.For example, in MacromediaDirector,thenotion ofaspriteisexpandedtoaninstantiationofanyresource.However,thbasic idea of sprite animation is simple.Suppose we have produced an animation figure,asin Figure 2.7(a). Then it is a simple matter to create a 1-bit mask M, as in Figure 2.7(b),black on white, and the accompanying sprite S, as in Figure 2.7(c).Now we can overlay the sprite on a colored background B, as in Figure 2.8(a),by firstANDing B and M, then ORing the result with S, with the final result as in Figure 2.8(e)Operations are available to carry out these simple compositing manipulations at frame rateand so produce a simple 2D animation that moves the sprite around the frarme but does notchange the way it looks