Comments 0

Document transcript

Quick StartQuick StartKoolMoves takes an approach to Flash™ movie creation that is in tune withthe animation process, because it was designed by a professional animator. Itis a mature animation package with ease of use and power as guidingprinciples. To make animations in KoolMoves all the user has to do is draw orimport shapes or images and then reposition, reshape, and recolor theanimation objects in adjacent key frames to achieve the look you want.KoolMoves automaticallymorphs shapes in between each of the shapes you create to achievesmooth animated motion. It's like putting together a cartoon strip. Each frame contains text,images, shapes, sounds, and actions. For character animation, one frame would have thecharacters in one pose and in the next frame in another pose.The help is written primarily for the advanced/cartooning user interfaces. There is extensivecontext help on major screens. Look forusually in the upper left corner of a screen.Skill Level InterfacesIn the interest of presenting to the user the easiest user interface for his skill level, KoolMoves hasfive user interfaces styles. The user can select which user interface he wants to use from the rightof the top toolbar and also in File > Preferences > View. In Koolmoves 8.0, a new user interface formobile device users was introduced which provides Html5 export capability; Html5 won't be fullysupported by Internet Explorer until version 9 but is well supported by other major web browsers.The following table identifies the mapping between functionality and the five interface styles.Wizards Basic Advanced Cartooning Html5/MobileFlash export x x x xHtml5 export xBanner wizard xSlide show wizard xEffects x x x x xSWF Flash Movie import x x xFull set ofdrawing tools x x xShape point manipulation x x xfile:///C|/KoolMoves/Fun/HTML/Web/index.htm (1 of 5) [5/11/2011 10:44:34 AM]Quick StartDynamic text x xMasking x xAction scripting x xComponents x xFLV Flash Video import x xVariable line width xNon-linear morphing xBones xBasic Skill Level ToolbarsShown below are the toolbars for the Basic skill level with icon explanations.↓Score/timeline Interface styles↓↑Object properties← Select/move shape and text objects on the drawing canvas← Insert text effects templates, buttons, clip art, web interfaces← Insert text← Insert image (photo)← Draw ellipse/circle← Draw rectangle/square← Apply effects to selected shape and text objects← Resize selected shape and text objects← Apply color/gradient/image fills to selected objects↓Elapsed movie time ↓Play moviefile:///C|/KoolMoves/Fun/HTML/Web/index.htm (2 of 5) [5/11/2011 10:44:34 AM]Quick Start↑Current key frame ↑Frame navigation Copy key frame↑Advanced Skill Level ToolbarShown below is the tools toolbar for the Advanced skill level with icon explanations.Select/move objects →← Select/move pointsInsert image, etc. →← Insert library itemInsert component →← Insert text (regular or dynamic)Create movie clip →← Create buttonDraw line →← Draw standard shapes (e.g., circle)Draw point by point →← Draw freehandAdd point to shape →← Delete pointAdd curve →← Apply fill (color, gradient, or image)Apply transform →← Apply effect← Options for selected toolSome of the toolbar icons have a submenu "drawer". Click on the smalltriangle on the toolbar icon or click on the toolbar and hold for a second toget the choices.Most Important ToolsThe following are the most important tools (displayed for the Advanced and Cartooning skill levels).file:///C|/KoolMoves/Fun/HTML/Web/index.htm (3 of 5) [5/11/2011 10:44:34 AM]Quick Start1) A series of three tools,Shape Properties (shownhere),Score/Timeline, andMovie Overview are locatedon the top toolbar. These allow you to view and editanimation objects and their properties.2) Copy this frame tocreate the nextframe. One of the fundamental tasks ofanimation is copying the current frame as astarting point for creating the next frame. KoolMoves supports a fully WYSIWYG editingenvironment. The appearances of the shapes in each key frame are what you see in the Flash™player (except for action script based effects). To repeat this important concept, the process ofcreating an animation involves 1) copying the current key frame to make the starting canvas forthe next key frame, 2) making changes to the shapes in the new key frame, and so on.3) Press the pink VCR-like play button to get a menu of four waysto play the animation. To export your animation as a Flash™ movie,just select File > Export Movie to create a Flash .swf file, a Flash.swf file with accompanying HTML, or to add a Flash animation toan existing web page. It is highly recommended that you read thehelp section onadding an animation to your web page.Tutorials and More Help TopicsYou can view examples created with KoolMoves by going to the Examples folder, in most caseslocated at C:\Program Files\Koolmoves\Examples.There are a number of Help aids under the Help menu bar -- Interactive KoolMoves Tutorials, FAQ,Simple Task Assistant.Following this introduction, a number of topics are provided to guide you through the tasksassociated with creating quality animations in KoolMoves and exporting them to the web.file:///C|/KoolMoves/Fun/HTML/Web/index.htm (4 of 5) [5/11/2011 10:44:34 AM]Quick StartThe tutorials on our support page atwww.koolmoves.com/support.html provide a basicunderstanding of the software and address specific needs. For tough questions, you can tap intothe expertise of many people at once on our forum atwww.flashkit.com/board/forumdisplay.php?forumid=24. The forum is also a great place to shareideas, get feedback, and find out the latest news about KoolMoves, Flash and related topics.Use Help > Update Software to obtain the lastest version.Continuefile:///C|/KoolMoves/Fun/HTML/Web/index.htm (5 of 5) [5/11/2011 10:44:34 AM]MorphingMorphingMorphing is the technique by which shapes in one key frame are smoothly blendedinto corresponding shapes in the next key frame. Morphing is handled by KoolMoveswithout you having to think about it. There is morphing between two key frames whenthe number of tween frames between two key frames is greater than zero. To preventmorphing, set the tween frames in that part of movie to zero. To perform morphingbetween two key frames, KoolMoves must recognize the relationship between shapesin the two key frames. If a key frame at the end of the movie has shapes A and B andthat key frame is copied to the end of the movie, shapes A' and B' in the copied keyframe are related to A and B through the copy process so correct morphing will occur.Morphing occurs between a shape and its single counterpart in the next key frame.There cannot be morphing between a single shape and multiple shapes or vice versa.file:///C|/KoolMoves/Fun/HTML/Web/morphing.htm [5/11/2011 10:44:35 AM]Slide Show WizardSlide Show WizardAccess the slide show wizard by selecting Views > Wizards > New Slide Show or byselecting Wizards tab in upper right. Alternatively, you can select the slide show iconin the components slide out menu in Advanced or Cartooning mode.There are two approaches for creating a slide show -- action script based or slide showbased. The preferred approach is the former. Double-click on the slide show object toedit its properties.In the properties box (obtained by double-clicking on the object), you can add/editslides or set other properties of the slide show.file:///C|/KoolMoves/Fun/HTML/Web/slideshow.htm [5/11/2011 10:44:35 AM]EffectsEffectsUsing KoolMoves General EffectsYou have about half a dozen powerful effects that can be applied to any shape, groupof shapes, text, imported SWF movie, or movie clip (Fade In/Out, Expand, Shrink,Zoom In/Out). The effects are found under Effects menu bar, on the Effects tab of theProperties popup, the Effects view of the Score popup, and for the Basic Skillsinterface on the tools toolbar. First select a shape and then select the effect. Most ofthe effects occur over several key frames and you can specify how many key frameswhen you create the effect or at a later time by using Effects > Modify or by editingthe effect in the Properties popup. You can also combine effects in many cases. Justadd another effect.A special kind of effect calledmotion script uses sophisticated Flash 5, 6, or 8 actionscripting to create the effect. Each of these motion scripts is highly customizable.Motion scripts cannot be combined with other effects.There are also3D effects which have a similar user interface to the motion scripteffect. Each of these 3D effects is highly customizable. 3D effects cannot be combinedwith other effects.The advantage of the regular built in effects like fade in and zoom in is that they canbe applied to any object and they preserve any frame-by-frame user imposed color,shape, and position changes. The advantage of the action script-based effects is thatthey are more unique and are highly parameterized.Shapes with a motion script effect are displayed in the editing screen with asurrounding blue dashed box. Other effects are displayed with a green dashed box.Using Text Effects Templatesfile:///C|/KoolMoves/Fun/HTML/Web/effects.htm (1 of 6) [5/11/2011 10:44:36 AM]EffectsKoolMoves provides a library of text effects templates. Select Libraries > Text Effects.These are regular KoolMoves .fun files which provide the layout and motion paths fortext effects. You enter your text and font selection and the software performs the textand font replacement. Select a text effect from the selection of text effects on the left.You can see the text effect in realtime on the right, superimposed over thebackground movie.Under the animated text effect, there are colored buttons. Each button represents acolor in the template. You can change the colors of the text effect by pressing thesebuttons and selecting different colors.To reposition the text effect on the screen, change the values of the X Offset and YOffset. Zero offsets correspond to a centered position.file:///C|/KoolMoves/Fun/HTML/Web/effects.htm (2 of 6) [5/11/2011 10:44:36 AM]EffectsTo change where the text effect starts relative to the underlying movie, select a StartAt key frame. Frames that exceed the current length of the movie have "added" inparentheses. The button to the right allows you to view that key frame. The text effecthas a natural frame length which is reflected in the End At key frame. You canoverride this if you want to stretch the text effect to cover more of the underlyingmovie. In most cases, you will not need to change the End At key frame. Changingthe End At key frame does not affect the speed of the text effect because as youlengthen the text effect, the tweens for each frame are decreased. To control speedindependent of number of key frames, set the Speed at a setting between Very Slowand Very Fact or change the speed of the main movie (Movie > Movie Speed). TheSpeed setting affects the number of tweens between the frames.To add the text effect to the underlying movie, press Add. You are free to use any ofthe positioning, coloring, and transform tools to edit the text effect at this time or youcan undo the text effect by pressing the Undo button.If you want the last frame of the text effect to play for a long time, increase thenumber of tweens for the previous frame or duplicate the last key frame a number oftimes using Frames > Insert Copy of Frame. Also, you can use Edit > Paste to End ofMovie to paste the text characters in the last frame of the text effect to the remainderof the movie.Creating Your Own Text EffectIt is easy to create your own text effects. The basic principle is to create the stages ofthe text effect in a series of key frames. This example illustrates a series of letterswhich write on the screen starting very large and transparent.In step 1, the text tool is clicked and asingle letter is entered. The size of theletter does not matter because we aregoing to scale it. The letter is shown onthe right.file:///C|/KoolMoves/Fun/HTML/Web/effects.htm (3 of 6) [5/11/2011 10:44:36 AM]EffectsIn step 2, the letter is made transparent using the paint bucket tool.In step 3, the letter is scaledto a very large size using thescaling tool.In step 4, the current key frame is copied and added to the end of the movie.In step 5 in the last key frame, the letter is scaled to the final size usingthe scaling tool.and the transparency is removed using the paint bucket tool.file:///C|/KoolMoves/Fun/HTML/Web/effects.htm (4 of 6) [5/11/2011 10:44:36 AM]EffectsThe current key frame is copied to the end of the movie and theprocess is repeated for the next letter in this case "o". And so on foreach letter. Some fiddling of the sizes of each letter will be necessaryto produce a polished look.When the movie is played, the effect is that each letter appears in sequence. The texteffects you can create are endless.Creating Your Own TransitionIt is easy to create transitions. The basic principle is to create the stages of thetransition in a series of key frames. This example illustrates an image that comes fromthe left into the movie frame as a small transparent image and becomes more opaqueand larger as the image moves to the center of the movie frame. Later, several built-in transitions will be discussed.In step 1, an image is imported usingFile > Import Graphic Image. To startthe transition, the image is dragged tothe left of the movie frame.In step 2, the image is madesmall and transparent usingthe scale and paint buckettools.file:///C|/KoolMoves/Fun/HTML/Web/effects.htm (5 of 6) [5/11/2011 10:44:36 AM]EffectsIn step 3, the current key frame is copied and added to the end of the movie.In step 4, the image is dragged to the center ofthe movie frame in the last key frame.Finally in the last key frame, the paint bucket andscale tools remove the transparency and returnthe image to its original size.When the movie is played, the image slides in from the left from a transparent, smallstate. The transitions you can create are endless.KoolMoves has 6 built-in transitions -- initial fade in, final fade out, initial grow fromnothing, and final shrink to nothing, initial zoom in and final zoom out. They takeeffect at the beginning or end of the shape's life in the movie depending on whetherthe transition is called initial or called final. These transitions can be set in theProperties popup for the selected shape or through the Effects menu bar. Transitionsoccur over a set number of key frames. When a transition is added to a shape, if therearen't enough frames for the transition to occur, frames will be added if the "Addframes if needed" check box is checked. Transitions can be combined, although thefade transitions are not a good combination with drop shadow.Continuefile:///C|/KoolMoves/Fun/HTML/Web/effects.htm (6 of 6) [5/11/2011 10:44:36 AM]Motion ScriptsMotion ScriptsMotion scripts are based on Flash 5, 6 or 8 action scripting that can be applied toalmost any object -- text, an image, a movie clip or a general shape. The motionscript animated effects are not viewable within the KoolMoves main editingenvironment, because the internal display within KoolMoves does not understandaction scripts. All you see is a blue dashed box surrounding the shape. On playing theanimation in the preview window associated with the motion script, in a web browser,or in a stand-alone Flash player, the effect of the motion script will be visible.Because of the nature of these action script-based effects, frame-by-frame changes incolor, shape, and position are ignored by the effect. The position, color, andtransparency from the first frame the shape appears in is used by the effect. Thelength of the effect is determined by the effect itself not by the number of frames theshape appears in.Also, the drop shadow effect does not appear when a motion script effect is applied.Put the text inside a movie clip. Apply the motion script effect to the text. Apply adrop shadow filter to the movie clip (Effects > Filters).If the text is a single letter or if the effect is applied to a non-text object, effectparameters such a left to right or right to left do not apply.You can achieve some level of frame-by-frame changes by embedding the object withthe motion script inside a movie clip and then manipulating the movie clip in position,size or rotational angle.You can combine effects by using movie clips. Put a shape inside a movie and applyeffect 1 to the shape and effect 2 to the movie clip.For those advanced users who want to control the effect from the main movie throughadditional action script commands such as stop(), the name of the movie clip thatencompasses the effect has the same name as the shape in the KoolMoves shape list.If there is an embedded space, the space is removed. This is a short discussion onhow to interact with AS3 motion scriptsboard.flashkit.com/board/showthread.php?t=822701.file:///C|/KoolMoves/Fun/HTML/Web/motionscripts.htm (1 of 2) [5/11/2011 10:44:36 AM]Motion ScriptsYou are able to create your own AS1 motion scripts and use them in your animations.See the readme.txt in the My Scripts folder inside the Motion Scripts folder for moreinformation. You can also create your own AS3 motions scripts; use one of theexisting .xml files in the Motion Scripts AS3 folder as a starting template.file:///C|/KoolMoves/Fun/HTML/Web/motionscripts.htm (2 of 2) [5/11/2011 10:44:36 AM]3D Effects3D Effects3D effects can be applied to text or a general shape. The 3D animated effects are notviewable within the KoolMoves main editing environment. All you see is a blue dashedbox surrounding the shape. On playing the animation in the preview windowassociated with the 3D effect, in a web browser, or in a stand-alone Flash player, theeffect of the 3D will be visible.Because of the nature of these effects, frame-by-frame changes in color, shape, andposition are ignored by the effect. The position and color from the first frame theshape appears in are used by the effect. The length of the effect is determined by theeffect itself not by the number of frames the shape appears in. Also, the drop shadoweffect does not appear when a 3D effect is applied. If the text is a single letter or ifthe effect is applied to a non-text object, effect parameters such a left to right or rightto left do not apply.You can achieve some level of frame-by-frame changes by embedding the object withthe 3D effect inside a movie clip and then manipulating the movie clip in position, sizeor rotational angle.You can combine effects by using movie clips. Put a shape inside a movie and applyeffect 1 to the shape and effect 2 to the movie clip.You are able to create your own 3D effects and use them in your animations. See thereadme.txt in the My Scripts folder inside the 3D Scripts folder for more information.file:///C|/KoolMoves/Fun/HTML/Web/3deffects.htm [5/11/2011 10:44:36 AM]Add Flash Animation to Web PageAdd Flash Animation to Web PageTo run a Flash animation from your web page involves: (1) creating a swf file withKoolMoves and (2) adding javascript and html object and embed statements to yourweb page which reference the swf file. KoolMoves will create these statements foryou. You upload your .swf and .htm/.html files and a special .js (javascript) file,swfobject.js or AC_RunActiveContent.js. This is analogous to creating an image in animage editing tool and adding code to your web page to display this image. TheAC_RunActiveContent.js approach seems to be more robust but it has thedisadvantage that is it more than three times as long. We found that the swfobject.jsapproach can result in an improperly displayed swf in certain 3D animations. If thename of the swf file starts with a number and you use the swfobject.js approach,change the swf file name so it doesn't start with a number.Look under File > Export Movie for a number of different approaches to creating swffiles and adding the necessary code to your web page. We recommend using File >Add Flash Movie to Web Page Wizard which is appropriate for both noviceand expert users.If your interest is animated gifs, useFile > Export Movie > Capture Movie Frame tocapture the portion of the screen inside the movie frame and save as a .bmp. Capturea series of frames (e.g., navigate to a frame, capture the frame, navigate to anotherframe probably the next, capture the frame, and so forth). Use software for creatinganimated gifs to transform the series of bmps into an optimized animated gif. Thereare many such specialized products available. SeeGif Creation.Users of FrontPage, seeUsing KoolMoves with FrontPage.Users of CoolPage, seeUsing KoolMoves with CoolPage.Users of NetObjects Fusion, seeUsing KoolMoves with NetObjects Fusion.A KoolMoves animation can be exported as a Flash™ movie (.swf format) with File >Export Movie > Save as Flash Movie. You can create a stand-alone .swf file, a .swf fileand a .html template file which references the .swf file, or add a Flash animation to anexisting web page. Both swf and html files are needed for the animation to play on theinternet. Movie properties (width and height, speed, background color or image) canbe set with menu items associated with Movie menu bar prior to exporting the files.file:///C|/KoolMoves/Fun/HTML/Web/exporttoweb.htm (1 of 3) [5/11/2011 10:44:37 AM]Add Flash Animation to Web PageKoolmoves can provide you with the necessary javascript code to call the Flash movieas one of the choices in File > Export Movie > Add to Existing Web Page. To replace agif or jpeg image in an existing HTML file with a Flash movie, manually replace the<IMG SRC="....gif" WIDTH="..." HEIGHT="..." BORDER="0" ALT="..."> HTML code inyour existing HTML file with all javascript/object/embed code that KoolMoves and thenpasting over the <IMG code... You can use copy/paste editing capability in your webpage editor or in NotePad. A word of caution: do not paste javascript code onto yourweb page using FrontPage. The code will be pasted into a block of text and thejavascript will not run correctly.The name of the .swf file in the HTML file must be the same as the name of the .swffile on the server. If your server does not accept a .html extension, you can renamethe extension to .htm. It is best not to include spaces in the name as this causesproblems with Netscape browser.Both the .html and .swf files are next sent to your web site by ftp. When you ftp the.swf file to your web site, make sure you send it as a binary file. The .html or .htm filemust be sent as ascii. The better ftp programs like FtpVoyager do this automatically.www.pageresource.com/putweb/ provides assistance in how to ftp your files to yourserver.If you are having trouble getting the animation to play on the internet, these stepsare recommended:1. If you double-click on the .html file generated by KoolMoves on your local disk,does the animation play in your default web browser. If it does, the .html and .swffiles are OK. If it doesn't, your browser may not have Macromedia's Flash player. Goto the web site associated with your browser or towww.adobe.com and download theplayer.2. Upload the KoolMoves generated .html (as ascii) and .swf (as binary) files to yourweb site. Does the animation play on your web site if you go to the KoolMovesgenerated web page? If not, there is a problem in how you sent the files to your website. File > Export Movie > Diagnose Server Problems is a small expert system fordiagnosing these types of problems.file:///C|/KoolMoves/Fun/HTML/Web/exporttoweb.htm (2 of 3) [5/11/2011 10:44:37 AM]Add Flash Animation to Web PageIt is possible to detect if the user is using an Apple product like iPad or iPhone whichwon't play Flash. There are a couple of tricks for redirecting to a non-Flash web site:scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-ipad-and-redirect-to-ipad-version-websitedavidwalsh.name/detect-ipadcss-tricks.com/snippets/htaccess/ipad-detection/.SeeAdd to Web Page Details for more detailed information.Continuefile:///C|/KoolMoves/Fun/HTML/Web/exporttoweb.htm (3 of 3) [5/11/2011 10:44:37 AM]Capture Movie FrameCapture Movie FrameThis function performs a screen capture of the current key frame or all key frames andclips the images to the movie frame. The screen captures are saved in .bmp, .jpg, or.png format. By assembling a series of frames, you can create an animated gif inmany photo editing tools.file:///C|/KoolMoves/Fun/HTML/Web/capture.htm [5/11/2011 10:44:37 AM]Import and Export GifsImport and Export GifsKoolMoves supports import of static GIFs with and without transparency. It does notsupport import of animated GIFs at this time.For transparent images exported from PhotoShop, use 255 color PNG or GIF (withtransparent color, NOT transparent layer!).Use an applications found atwww.swftools.org andwww.segon.com to convert youranimated GIF into a SWF file. Then useimport swf as an object to bring the convertedgif into your KoolMoves animation.KoolMoves does not directly support output of animated GIFs at this time. To converta KoolMoves created swf to an animated gif, you might try iTinySoft Swf2Gif atwww.effectmatrix.com/download.htm or Eltima Swf ToolBox atwww.eltima.com/products/swf-tools/.There are a number of other specialized products for creating animated GIFs. Uleadmakes a nice product called Gif Animator. There are also free products.Capture the KoolMoves animation as a series of screen images usingFile > ExportMovie > Capture Movie Frame and import the image files into your favorite gifcreation tool. With some of the free GIF animators you may need to convert thecaptured images into GIF format using a graphic editor.file:///C|/KoolMoves/Fun/HTML/Web/gif.htm [5/11/2011 10:44:37 AM]Importing SWF Flash MovieImporting SWF Flash MovieA Flash™ movie (swf) can be imported as an object. ToImport a SWF Object either select File > Import Flash Movieas Object or use the import button located with the drawingtools (the last choice in the submenu "drawer"). The SWF Object can be locatedanywhere inside a KoolMove's movie and manipulated like any other symbol.TellTarget actions can issue stop, play and stop sound commands to the imported movie.The movie has its own timeline and cannot beviewed or edited in the KoolMoves editingenvironment. It will display as a rectangle toshow the size and position of your importedSWF and you won t be able to see what thecomplete movie looks like until it is previewed in a web browser or stand-alone Flashplayer. You may scale, squish, rotate, move, apply an effect, and flip a SWF Object.Wherever the SWF placeholder rectangle is moved is where the SWF Object will play.The imported SWF will retain all of its sounds and actions of the SWF that youimported.The imported swf must be in the same directory as the swf referencing it.The imported swf can also be imported as an editable movie. This approach is notperfect. Some of the elements are not currently imported.file:///C|/KoolMoves/Fun/HTML/Web/swfobject.htm [5/11/2011 10:44:37 AM]Tell Target ActionsTell Target ActionsTell Target is a means to communicate across multiple timelines. Any movie cancontrol another movie. Your movie has multiple timelines when1. You create a SWF Object2. You load a movie into a layerThere are three basic Tell Target functions built into KoolMoves.1. Stop2. Play3. Stop SoundsMore will come later. These actions are located in the Advanced section of the AddAction popup menu.The tell target actions work just like regular actions with one difference - you mustdefine a target in the target box. Inside a SWF each target is laid out much like adirectory. To access the curent main movie's timeline you can use: /. This can be usedanywhere to control the current movies timeline. The ../ syntax can also be used tocontrol a higher movie's timeline. So, for example, lets say you want to control themain timeline from an imported SWF Object with Tell Target you would use the ../syntax. For loaded movies the syntax is a little different. To use Tell Target on aloaded movie you use _leveln/ where n is the level of the loaded movie. If, forexample, you want to control a loaded movie in level 1 the target would be: _level1/.To control a SWF Object from the main movie you can use either /Object name or justObject Name.file:///C|/KoolMoves/Fun/HTML/Web/telltargetactions.htm [5/11/2011 10:44:38 AM]Using MicroSoft Front PageUsing MicroSoft Front PageSee this tutorialwww.koolmoves.com/tutorials/kmwithfrontpage.pdf by The CrateDiseño Web.file:///C|/KoolMoves/Fun/HTML/Web/frontpage.htm [5/11/2011 10:44:38 AM]Using CoolPageUsing CoolPageSee this tutorialwww.koolmoves.com/tutorials/kmwithcoolpage.pdf by The CrateDiseño Web.file:///C|/KoolMoves/Fun/HTML/Web/coolpage.htm [5/11/2011 10:44:38 AM]Using NetObjects FusionUsing NetObjects FusionSee this tutorialwww.koolmoves.com/tutorials/kmwithfusion.pdf by FusionMagic.file:///C|/KoolMoves/Fun/HTML/Web/fusion.htm [5/11/2011 10:44:39 AM]Add Animation to Web PageAdd Animation to Web PageBefore filling out this screen, you should have created a Flash animation file (.swf) inthe same directory as the web page you want to display the animation. Next toExisting Web Page, press the browse button identified by the folder icon. Select theweb page that is to receive the Flash animation. Next to Flash Movie, select the filecorresponding to the Flash animation. The animation must be in the same directory asthe web page. You can select to have the animation at the top of the web page or toreplace an existing image. The movie loops option allows you to have the animationplay once or to loop continuously on the web page.Press the Test button on the right to view the animation on the web page. If you seean empty rectangle on the web page where the animation should be, it is likely thatyour web browser does not have the Flash plug-in. You can get plug-ins from browserweb sites or fromwww.adobe.com. Press the Save As button to save the web pagewith the animation placed on it. It is best to select a different name for the web page.If you select the same name, a back up file is created for the unedited web page withthe extension .bak.If you want the Flash animation to be a hyperlink, you will need to add a button to theanimation for the user to click on. The button can be localized like a Click Me button orthe button can be invisible and fill the entire movie. To do the latter: 1) Add arectangle to the first frame that slightly exceeds the bounds of the movie frame. 2)Make the interior of the rectangle transparent. 3) Make the rectangle a symbol andinteractive. 4) Give it a Get URL action and provide your hyperlink destination. 5)Copy the rectangle, go to the second frame, and paste to the end of the movie.file:///C|/KoolMoves/Fun/HTML/Web/addtowebpage.htm [5/11/2011 10:44:39 AM]Add to Web Page DetailsAdd to Web Page DetailsIt is not guaranteed that an exported Flash™ movie can be imported into MacromediaFlash™ for purposes of further editing or that a movie exported from KoolMoves,imported into Flash™, and then exported from Flash™ will have the same behavior asthe original movie exported from KoolMoves.The Flash player can only handle SWF file sizes less than 2 1/2 - 3 MB. When a SWFbecomes around 3 MB in size, it starts doing wierd things. Many times it will crash thecomputer. This is explained herewww.macromedia.com/support/flash/ts/documents/bigflash.htm. If you want tocreate a movie exceeding this size, consider using a lower quality jpeq setting, makingthe sound file smaller, or breaking the movie into pieces and using load movie to loadthe separate pieces.The HTML contains simple instructions (called parameters), and executes the SWF filein the area of your web document where you insert the script. Here is an example oftypical Flash HTML script for embedding swf movie:<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=superWIDTH=560 HEIGHT=60><PARAM NAME=movie VALUE="super.swf"><PARAM NAME=loop VALUE=true><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src="super.swf" loop=truequality=high bgcolor=#FFFFFF WIDTH=560 HEIGHT=60 TYPE="application/x-shockwave-flash"PLUGINSPAGE= "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></OBJECT>file:///C|/KoolMoves/Fun/HTML/Web/exporttowebmore.htm (1 of 3) [5/11/2011 10:44:39 AM]Add to Web Page DetailsNotice that there are both OBJECT and EMBED tags. The OBJECT is for InternetExplorer and the EMBED for Netscape. The parameters are referenced in both areas;and it is these parameters which allow you to do some customizing of your animation.www.macromedia.com/support/flash/ts/documents/tag_attributes.htmlink providesfurther explanation of these tags and others which you can use to customize thedisplay of your animation.The movie parameter references the SWF from your directory. You'll need to uploadthe SWF file to the same directory as your web page. If you place the SWF file in adifferent directory, then you will need to show the path to that directory in thisparameter -- something like flash/super.swf -- assuming flash is the name of thatparticular directory or folder.With the loop parameter you can have the animation play once, or play continuously,by setting it to false or true.The bgcolor parameter can be set to whatever hexadecimal (#FFFFFF format) coloryou need for your web design.The width and height are not parameters in the same sense as the others -- but youcan change these as well. Since the SWF file is scalable, you can make necessarychanges and the animation will smoothly resize to the new dimensions.Either fixed pixel-based or flexible percentage-based dimensioning can be used. Fixeddimensioning (for example, width=300 and height=200) sets the size to the exactpixel dimensions, just like you normally would with an image. However, percentage-based dimensioning -- for example, width=50% and height=50% -- makes the SWFautomatically resize, proportionately, to any browser window size without anydeformations.file:///C|/KoolMoves/Fun/HTML/Web/exporttowebmore.htm (2 of 3) [5/11/2011 10:44:39 AM]Add to Web Page DetailsIn August 2003, a federal court ruled that Microsoft had infringed on a patent relatedto plug-in technology used in Internet Explorer.In response, Microsoft said it would alter how the browser implemented ActiveX, butlater backed away from the switch. Software affected by the patent would includeMacromedia Flash, QuickTime, RealOne Player, Acrobat Reader, Sun's Java VirtualMachine, and Windows Media Player among other applications that embed into Webpages.But following two legal setbacks in its efforts to invalidate the Eolas patent and havethe ruling appealed, Microsoft said in December 2005, it would go ahead with theupdate.The following link explains this issue in more detail:www.adobe.com/devnet/activecontent/articles/devletter.html.Consequently, the OBJECT and EMBED clauses must be enclosed within a javascriptclause to avoid a "click to activate control" message on a web page with a computerthat runs Windows XP SP2 latest updates. The fix is contained in IE ActiveX Fix andJavascript for Html folders. KoolMoves includes the fix in all exported html code.With KoolMoves 7, a newer and simplier approach is offered that combines thejavascript call, embed and object blocks into a single javascript call using swfobject.js.This approach is the default approach and is advocated by Google.file:///C|/KoolMoves/Fun/HTML/Web/exporttowebmore.htm (3 of 3) [5/11/2011 10:44:39 AM]Add Hmtl5 Animation to Web PageAdd Hmtl5 Animation to Web PageSelecting the Html5 for Mobile Users interface provides Hmtl5 export whereas theother interfaces exclusively export as Flash.The new canvas tag in Html5 allows export of animation. This tag will not besupported by Internet Explorer until version 9 but is supported by other major webbrowsers. To test a browser's support of Html5, go tohttp://html5test.com/.Only a subset of KoolMoves functionality is available for Html5 export. The userinterface restricts functionality to what is available but there may be otherfunctionality appearing in the interface which is ignored on export. At this time,gradient fills and non-symbol vector shapes are ignored. If a .fun file is opened in theHtml5 gui that was created with the Flash gui, most likely some fraction of the moviewill not be exported as Html5. Flash at this time and maybe forever providesconsiderably more capability than Html5.Use File > Export/Publish Movie to generate the hmtl code with file dependencies or togenerate a complete web page. Be sure that you copy the three javascript filesreferenced at the top of the web page -- Core.js, Ease.js, and ImageEffect.js -- to theserver with the html page. The files can be found in KoolMoves \ Javascripts for Htmlfolder.It is possible to detect if the user is using an Apple product like iPad or iPhone whichwon't play Flash. There are a couple of tricks for redirecting to a non-Flash web site:scottrockers.com/blog/resources/simple-code-tricks/how-to-detect-ipad-and-redirect-to-ipad-version-websitedavidwalsh.name/detect-ipadcss-tricks.com/snippets/htaccess/ipad-detection/.Continuefile:///C|/KoolMoves/Fun/HTML/Web/exporttohtml5.htm [5/11/2011 10:44:39 AM]DrawingDrawingThere is a rich selection of drawing tools in KoolMoves: freehand, primitive shapes(ellipse, circle, rectangle and square), and shapes/lines drawn point-by-point.Toolbar buttons with arrows in the lower right have drawers (sub-selections). You canview the sub-selections by pressing the toolbar button until the sub-selections appearor by pressing on the triangular arrow in the lower right of the toolbar button. Theselection indicated on the toolbar button is the active selection.The freehand drawing tool allows you to draw like you wouldusing a pencil. The first and last points are automaticallyconnected when you release the mouse. If you don't wantthem to be connected, after the shape is drawn change theClosed property of the shape. The points generated by freehand drawing are curve fitto achieve a modest number of points. You can add or delete points later if needed.The tools for drawing primitive shapes make it easy for youto draw circles, squares, rectangles, and ellipses. You clickthe left mouse button at one corner of the shape you want todraw and drag the mouse to the opposing corner of theshape. Release the mouse and the shape is drawn.At the bottom of the tools window are three options: fillcolor, border or line color, and border or line thickness.These options are present with any of the drawing tools andonce set will remain until changed. Changing these optionsdoes not affect existing shapes already drawn.Shapes drawn point-by-point allow you to control the placementand number of points. You click the left button to define eachpoint and continue until you have completed the shape.file:///C|/KoolMoves/Fun/HTML/Web/drawing.htm (1 of 3) [5/11/2011 10:44:40 AM]DrawingTo add a curve, drag the mouse after clicking to create a point.To finish, you double-click. The first and last points are automatically connected. Ifyou don't want them to be connected, change theClosed property of the shape.There are situations when you wantto have one section of the shapewithout a border (e.g. in drawing anose).Click the left button to define each point and continue until youhave completed the shape. To finish, double-click.After double-clicking, the border is drawn. The fill color is white by default.Use the Shape Fill tool to color the nosewith a flesh color. The border is notconnected between the first and last pointsthat were drawn. If we later want to fill inthe border between the first and last points,change theClosed property of the shape. To remove the nose color and make theinterior of the shape transparent, change theFilled property of the shape. This willgive us a line.Shapes and lines with curves are defined by on-shape pointsand off-shape points (indicated by dashed circles). Technically,curves are quadratic bezier splines. You can change the shapeof the curve by moving selected points, on-shape and off-shape, by dragging or using the arrow keys.file:///C|/KoolMoves/Fun/HTML/Web/drawing.htm (2 of 3) [5/11/2011 10:44:40 AM]DrawingYou can control the appearance of a shapethrough its:1) Fill2) Border thickness3) Border/line color4) Last border segmentLines are shapes that are not filled andhave a border with the last segment notdrawn. Lines can be changed to shapes bysetting the Filled and Closed properties toyes. Text does not have a border.Continuefile:///C|/KoolMoves/Fun/HTML/Web/drawing.htm (3 of 3) [5/11/2011 10:44:40 AM]Shape PropertiesShape PropertiesYou can control the appearance of a shapewith points through its:1) Fill2) Border thickness3) Line color4) Last border segmentTo make the interior of the shapetransparent, select Filled and chooseNo.This shows a shape that is not filled.file:///C|/KoolMoves/Fun/HTML/Web/properties.htm (1 of 3) [5/11/2011 10:44:40 AM]Shape PropertiesTo change the border thickness aroundthe shape or the thickness of a line,select Line Width.This shows a shape with no border (i.e.,line width equal to 0).To set whether the last bordersegment of the shape is drawn or not,select Closed.file:///C|/KoolMoves/Fun/HTML/Web/properties.htm (2 of 3) [5/11/2011 10:44:40 AM]Shape PropertiesThis shows a shape with the last segment notdrawn. When the shape is also not filled, wehave a line.The property dialog for text looksdifferent because text has differentproperties than shapes with points.The color of text can be changed byclicking on the Color property. Adialog that lets you set color willappear. The text, font, font size canbe edited by clicking on the Typeproperty. A dialog will appear inwhich you can edit the text.Assigning button properties and making a non-text shape into a symbol are explainedin the next section.Continuefile:///C|/KoolMoves/Fun/HTML/Web/properties.htm (3 of 3) [5/11/2011 10:44:40 AM]Frame EventsFrame EventsSounds and actions can be added to frames. Select Views > Actions and Sounds oruse the Actions and Sounds tabbed page of the Score View.With this dialog, you can enter sounds and actions associated with frames of theanimation. This is very simple. Select a frame by clicking on its name. Click on the ...button in the Sound group box and browse your file directory to select a MP3 or wavsound file. When the animation plays that frame in your web browser the sound willalso play. There are also a wide range of actions that can be activated when the frameis played. Click on the Add Action + button in the Action group box. This dialog alsoprovides a view of button actions and sounds. Because a button often appears in all ormost of the movie, the button events are listed for only the first frame the buttonappears in.Sounds (MP3 and .wav PCM formats) can be added to KoolMoves movies. There areabout 68 individual wav formats. At this time, KoolMoves only supports PCM type.Press the folder button to select the file location of the sound. Press the sound icon toplay the sound (MP3 sound is played in a web browser window using the Flash plugin).The trash can icon will delete the sound. The waveform icon will show the sound in anaudio editor of your choice once the audio editor has been defined in File >Preferences.If you use the same sound file multiple times throughout the movie, it will bereferenced that many times in the Flash™ movie but only defined once.Sound files tend to be huge which can make the exported swf file huge. To makesound small, take these steps: in a sound editing program convert from stereo tomono and to the smallest sample rate that gives you the quality you need. Shorteningthe sound track also helps.Sounds can also be attached to button states (e.g. moving the mouse over a button oron pressing a button). Seebutton sounds for more information.Sounds do not play when running your animation in KoolMoves' internal player.file:///C|/KoolMoves/Fun/HTML/Web/events.htm (1 of 3) [5/11/2011 10:44:41 AM]Frame EventsIf a sound plays longer than the movie plays and if the movie loops, the sound fromthe first loop will continue playing during the second loop until the sound from the firstloop finishes. The sound effect worsens as the movie continues to loop. To solve thisproblem, add Stop Sound action to the last frame.If your sound file is sampled at a rate other than 5500, 11025, 22050, or 44100, thesound will play in the Flash player at a rate nearest to one of the four rates listedabove.The duration of a sound is indicated in the Actions and Sounds View window and in theActions and Sounds page of the timeline by a sound icon followed by small squares.This is a brief explanation of the frame actions:a) Go to Frame specifies a frame to jump to (if previous or next frame is selected, itcould be a tween frame if that is the adjoining frame)b) Play plays the movie from the current framec) Stop stops the movie at the current framed) Stop Sounds stops all soundse) Load Movie loads a movie (explained more below)f) Unload Movie unloads a movieg) Set Dynamic Text sets the text content of a dynamic text objecth) Load Dynamic Text loads text into a dynamic text object from a .txt file (The textinside the file should start with xx= followed by the body of the text with no quoteswhere xx is the variable name associated with the dynamic text object (e.g. txt1var)for Flash 6/7/8 export or the name of the dynamic text object (e.g. txt1) for Flash 5export or Flash 6/7/8 export with backward compatibility checked in File > ExportSettings)i)FS Commands provides a general method for Flash to send a message to whateverprogram is hosting the Flash playerj) JavascriptIt is important to note that a stop movie action in the first frame is often ignored bythe Flash player. The solution is to create a dummy first frame.file:///C|/KoolMoves/Fun/HTML/Web/events.htm (2 of 3) [5/11/2011 10:44:41 AM]Frame EventsFor use on the web, the URL for the loaded movie can be an absolute or relative URL,but, for testing purposes, all the movies must be in the same directory withoutdirectory or disk drive specifications in their names. When testing a movie using Playin Browser, any HTML and SWF files, referenced by Get URL or Load Movie actions,MUST be in the same directory as the fun file for these button actions to access thesefiles or set the directory for playing the movie in Preferences.In order to daisey chain movies together, you use Load Movie. Create a base moviethat loads in the other media and then loops - make sure that you do not loop in theload movie action. Load your main movie into Level 2 and your background into Level1. Run your movie to the end then use a Load Movie command into Level 2. This willload the new movie into that level. Then create aditional frames and loop back.Load movie loads a movie without closing the current movie. Unless you include in theloaded movie a shape under all other shapes that equals or exceeds the size of themovie frame and that is filled with an opaque color or a bitmap, you will see the firstmovie underneath the loaded movie. The size and speed of the movie are set by themovie at level 0.None of the frame actions function in the KoolMoves internal player.Continuefile:///C|/KoolMoves/Fun/HTML/Web/events.htm (3 of 3) [5/11/2011 10:44:41 AM]Adding Button SoundsAdding Button SoundsSounds (MP3 and .wav PCM formats) can beadded to the over and down states ofbuttons. A sound file can be entered in theshape property dialog near the bottom foreach state. There are about 68 individual wavformats. At this time, KoolMoves onlysupports PCM type.The over state of a button is activated for rollover, roll out, drag over, and drag out mouseevents. The down state of a button isactivated for press and release mouseevents.If you use the same sound file multiple times throughout the movie, it will bereferenced that many times in the Flash™ movie but only defined once.Sound files tend to be huge which can make the exported swf file huge. To makesound small, take these steps: in a sound editing program convert from stereo tomono and to the smallest sample rate that gives you the quality you need. Shorteningthe sound track also helps.Sounds do not play when running your animation in KoolMoves' internal player.file:///C|/KoolMoves/Fun/HTML/Web/btnsounds.htm (1 of 2) [5/11/2011 10:44:41 AM]Adding Button SoundsIf a sound plays longer than the movie plays and if the movie loops, the sound fromthe first loop will continue playing during the second loop until the sound from the firstloop finishes. The sound effect worsens as the movie continues to loop. To solve thisproblem, add Stop Sound action to the last frame.If your sound file is sampled at a rate other than 5500, 11025, 22050, or 44100, thesound will play in the Flash player at a rate nearest to one of the four rates listedabove.file:///C|/KoolMoves/Fun/HTML/Web/btnsounds.htm (2 of 2) [5/11/2011 10:44:41 AM]FS Command ActionFS Command ActionThe FS Command action provides a general method for Flash to send a message towhatever program is hosting the Flash player. This is advanced functionality, not forthe average user.FS Commands are not very reliable as they don't work on many browsers. You areactually better passing the info from the SWF to the browser using javscript. Likewise,you are better off using action script for interactivity. There are a very select fewinstances where this is not the case.In a web browser, FS Command calls the FS Command Javascript function. InDirector, FS Command sends a message interpreted as events by Lingo. InAuthorware, FS Command sends commands to the scripting environment. In VisualBasic and Visual C++, FS Command sends a VB Event with two strings.The FS Command was developed in Flash for 2 reasons.1. To allows SWFs to talk to Live Connect and Active X.2. When tt was implemented IE did not support Javascript: Commands as URLs. Atthat time FS Commands were the only way to pass information to IE 3.0 or lower.The early versions of Flash, Flash 3 or lower, had a very limited scripting environment,to see just how limited download a shareware trial of Flash 3. If you wanted to scriptsomething you had to use FS Commands and Flash Player Methods to do it. Since theauthors of the Macromedia Technotes wrote that the way to communicate with Flashwas through FS Commands all of the following Flash book authors stuck to that story,which is untrue. Most FS Command tutorials on the web confuse FS Commands withFlash Player Methods.FS Commands pass a variable and an argument to the native scripting language. Withthe exception of projector files, which have some limited commands built in, you mustscript the commands yourself. You need to be aware that there is no Active X supportfor IE for Mac, Netscape, Mozilla, and most open sourced browsers. Also Linuxbrowsers are dropping Live Connect. Therefore the use of FS Commands for web pageusage is problematic.file:///C|/KoolMoves/Fun/HTML/Web/fscommand.htm (1 of 4) [5/11/2011 10:44:41 AM]FS Command ActionThe most common use for a FS Command is in the use of projectors. Thesecommands are quite easily called by using the following command words in the FSCommand box and the following arguments in the argument box. It is important thatyou start the command with "FS Command:".Command Arguments:Quit NoneFullScreen True/ FalseAllowScale True/FalseShowMenu True/FalseExec Path of EXE you want launched.Save File NameQuit- Shuts down the PlayerFullScreen- Makes your projector Full Screen if set to true and makes it regular if setto false.AllowScale- Allows your Graphics to scale with the projector or not.ShowMenu- Shows the Projector Menu or eliminates it.Exec- Launches any EXE if you are working on a MAC it launches and applescript. Youmust know the Path of the program. Save- Only available in the Flash 5 StandalonePlayer and may be removed at anytime without notice. It saves all of your variables toa txt file in the root directory.Many projector enhancement programs like Flash Tools, SWF Studio, Swish Canvas,Jugglor, Flashants FMProjector have custom FS Commands built into them. Be sure toread the documentation carefully before implementing one of these specialized FSCommands. Outside of browser non-support for FS Commands, there is one goodreason to use them to communicate with your HTML. This one good reason is that FSCommands do not cause your web browser to click when the command is issued likeJavascript commands do.file:///C|/KoolMoves/Fun/HTML/Web/fscommand.htm (2 of 4) [5/11/2011 10:44:41 AM]FS Command ActionIn order to use FS Commands you must have this on your page:<script=;"javascript;"> function navmovie_DoFSCommand(command, args) {if ( command == "init" ) {var buttons = parent.InternetExplorer ? window.navmovie :window.document.navmovie; if (buttons != null ) {buttons.GotoFrame(parent.targetFrame);// This function ensures that the navigation bar movie is set to the proper// keyframe when it initially loads. The argument init is the name you use// as the command paramter for the action attached to the first keyframe // in thenavigation bar movie.} } // Hook for Internet Explorerif (navigator.appName &&navigator.appName.indexOf("Microsoft") != -1 &&navigator.userAgent.indexOf("Windows") != -1 &&navigator.userAgent.indexOf("Windows 3.1") == -1) {document.write('<SCRIPT LANGUAGE=VBScript>');document.write('on error resume next ');document.write('Sub fscommand_FSCommand(ByVal command, ByVal args) ');document.write(' call fscommand_DoFSCommand(command, args) ');document.write('end sub ');document.write('</SCRIPT> ');}//--></SCRIPT></SCRIPT>Notice that you have to have some VB on your page to catch the FS Commands fromActive X. Now this is important. A FS Command is only a variable and a value whensent to a program. You must build the proper handler for your command andarguments with Javascript.Okay now the final use which is probably the most useful use of FS Commands is forin custom programs that use Flash as the interface such as Authorware and VBprojects.file:///C|/KoolMoves/Fun/HTML/Web/fscommand.htm (3 of 4) [5/11/2011 10:44:41 AM]FS Command ActionThis is handled by the Active X Flash method:FSCommand(command, args)Generated when a FS Command action is performed in the movie with a URL and theURL starts with FS Command :. Use this to create a response to a frame or buttonaction in the Flash movie.file:///C|/KoolMoves/Fun/HTML/Web/fscommand.htm (4 of 4) [5/11/2011 10:44:41 AM]Links, Buttons and SymbolsLinks and ButtonsA shape or text is made into a button by 1) selecting Shapes > Convert to Button or2) right-clicking then select Convert to Button or 3) pressing Button icon (Convert toButton sub menu selection) on Tools toolbar or 4) selecting Is a Button option inProperties popup. A button can serve as a link to another web page but it can bemuch more than that. You can design the button's appearance to change for differentmouse events, and you can program actions like go to another web page on release ofthe button (called GetURL action).A button can dynamically assume in the Flash player or on a web page differentappearances, reflecting whether the mouse is away from the button, over the button(e.g., mouse-over effects), or has pressed the button. You create and edit the threebutton states from the Up/Over/Down buttons at the top of the properties popup.Each state can have its own sound, shape color, etc. A point of confusion, it that theactions for the button -- what the button does like cause the web page to change --are added to only the Up state property page (the state of the button when the mouseis not over it or being pressed). Because the interface is WYSIWYG (what you see iswhat you get), the button appears in the final animation for each frame the buttonappears in the editing environment. In other words, if the button is missing in aframe, it will be missing in the final animation in that frame.If you press the Over button (corresponding tomouse events roll over, roll out, drag over, anddrag out) for the first time, a popup will appearasking you if you want to create the over statefrom a previously drawn state or if you want todraw it from scratch. If you are only changing thecolor of the state, you would select copy the upstate and edit the color from the valuecorresponding to the up state to the value youwant to correspond to the over state.file:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (1 of 6) [5/11/2011 10:44:42 AM]Links, Buttons and SymbolsWhen the Over button is pressed, you can change properties of theover state and edit the shape corresponding to the over state. Afaint image of the shape corresponding to the up state is displayedunder the shape for the over state for alignment assistance.By pressing on the actions property button in theProperties popup for the button, you can assign andedit the actions for the button which may betriggered by different mouse events. By pressing onthe sounds property button, you can assign soundsfor the over and down states.The + button presents you with the possible buttonactions (we will be adding more soon), most ofthem self-explanatory. Each of these actions canrespond to one or more mouse events.file:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (2 of 6) [5/11/2011 10:44:42 AM]Links, Buttons and SymbolsSelecting Get URL, presents us withthis popup. We can select whichmouse events active Get URL action.The URL for the action is filled in. Theover state of a button is activated forroll over, roll out, drag over, anddrag out mouse events. The downstate of a button is activated forpress, release, and release outsidemouse events.On pressing OK, the action is added to thelist of actions associated with this button.Any action can be edited or viewed in moredetail by double-clicking on it or by selectingit and then selecting the properties button(second from the left at the top of thepopup).If we want a roll-over effect when the mouse passes over the square in addition togoing to the URL on mouse release, we add a second action, Mouse Effect, to our listof actions and select Roll Over as a triggering mouse event. Mouse Effect action isunique in that is only controls the appearance of the button with no resulting actiontaken.file:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (3 of 6) [5/11/2011 10:44:42 AM]Links, Buttons and SymbolsOn pressing OK, we see both actionsassociated with this button.This is a brief explanation of the other button actions:a) Go to Frame specifies a frame to jump to (if previous or next frame is selected, itcould be a tween frame if that is the adjoining frame)b) Play plays the moviec) Stop stops the movied) Stop Sounds stops all soundse)Load Movie loads a movie (explained more below)f) Unload Movie unloads a movieg)Print and Print as Bitmap actions provide the cability to print key framesh) Set Dynamic Text sets the text content of a dynamic text objecti) Load Dynamic Text loads text into a dynamic text object from a .txt file (the textinside the file should start with xx= followed by the body of the text with no quoteswhere xx is the variable name associated with the dynamic text object (e.g. txt1var)for Flash 6/7/8 export or the name of the dynamic text object (e.g. txt1) for Flash 5export or Flash 6/7/8 export with backward compatibility checked in File > ExportSettings)j) Send Form Data retrieves text from dynamic text objects and sends it to an urlk)FS Commands provides a general method for Flash to send a message to whateverprogram is hosting the Flash playerl) Javascript m)Tell Target actions provide communication to other moviesfile:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (4 of 6) [5/11/2011 10:44:42 AM]Links, Buttons and SymbolsFor use on the web, the URL for the loaded movie can be an absolute or relative URL,but, for testing purposes, all the movies must be in the same directory withoutdirectory or disk drive specifications in their names. Also, there should be no spaces inthe name as this will cause problems in Netscape web browser. Http:// should not bein the URL for a loaded movie because it will also cause problems with Netscape webbrowser. When testing a movie using Play in Browser, any HTML and SWF files,referenced by Get URL or Load Movie actions, MUST be in the same directory as thefun file for these button actions to access these files or set the directory for playingthe movie in Preferences. Load movie loads a movie without closing the currentmovie. All of the higher levels have transparent backgrounds which allows to see thelayers underneath. Unless you include in the loaded movie a shape under all othershapes that equals or exceeds the size of the movie frame and that is filled with anopaque color or a bitmap, you will see the first movie underneath the loaded movie.The movie background color, size, and speed are set by the movie at level 0. None ofthe button actions function in the KoolMoves internal player.In order to daisey chain movies together, you use Load Movie. Create a base moviethat loads in the other media and then loops - make sure that you do not loop in theload movie action. Load your main movie into Level 2 and your background into Level1. Run your movie to the end then use a Load Movie command into Level 2. This willload the new movie into that level. Then create aditional frames and loop back.The actions for a button cannot vary from frame to frame. If you want a button'sactions to change from one frame to the next, copy and paste the button in the sameframe that contains an instance of the button and then cut and paste this button tothe frame where you want the actions to be different. This procedure creates a buttonthat looks the same as the original but allows you to have different actions. Hopefully,in the future there will be a better solution for this situation.Symbolsfile:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (5 of 6) [5/11/2011 10:44:42 AM]Links, Buttons and SymbolsOne of the principal methods for creating small Flash™ animations is by making asmany shapes into symbols as possible. A symbol is a shape that is shared by othershapes (called instances of the symbol). If you move a point in one instance it will bemoved in all instances throughout the movie (KoolMoves first asks you if you want tochange all instances). If you change the gradient in one instance, all instances will bechanged. And, so on. The exceptions to this are the interior color of the shape, shapeposition, scale and rotate transformations. These four only change the instance actedupon, not all instances. This is dictated by the Flash file format.For simplicity, KoolMoves treats all text shapes as symbols.If you have shapes that appear more than once in a single frame or in multipleframes, then it is advisable to make these shapes into symbols if you do not intend tomove individual points from one frame to the next. In many cartooning situations, youwould want to move points from one frame to the next to make a mouth move tosimulate talking or to made a hand move to simulate waving, etc. so such shapeswould not be good candidates for symbols. If the shape is stationary and undergoesno change throughout the movie, it is not necessary to make the shape into a symbol(KoolMoves will automatically handle this situation). In the future, we will be providinga method to optimally convert shapes into symbols after the animation is complete soit is not necessary to be thinking about this optimization while you are developing ananimation.To make a shape into a symbol, select Yes forthe Symbols property. This should be doneimmediately after creating the shape before acopy is made within a frame or a frame iscopied. Notice that the points to the shapehave a different appearance to indicate thatthese points are potentially shared with othershapes. The symbol instance is edited like anyother shape. If the change affects otherinstances you will be warned.Continuefile:///C|/KoolMoves/Fun/HTML/Web/symbolsbuttons.htm (6 of 6) [5/11/2011 10:44:42 AM]Mouse EventsMouse EventsThere are seven mouse events which buttons are sensitive to:Press - Button is clicked on.Release - Mouse is released after button is clicked on.Release Outside - Mouse is released outside the button after clicking on the button.Roll Over - Mouse pointer moves over a button.Roll Out - Mouse pointer moves outside a button.Drag Over - Button is clicked; without release, mouse pointer is dragged away fromthe button and then mouse pointer is dragged over the button.Drag Out - Mouse pointer is dragged outside a button after clicking on the button.file:///C|/KoolMoves/Fun/HTML/Web/mouseevents.htm [5/11/2011 10:44:42 AM]Load MovieLoad MovieLoad Movie loads a new SWF into the Flash player. This feature can be used to stringtogether multiple SWF files. Because the project is broken up into multiple movies, theindividual SWF files are smaller in size. Smaller files load faster, and manage memorymore efficiently.Flash can play multiple timelines simultaneously. Each timeline is assigned a level.The main timeline is always Level0. Level0 sets the frame rate, background color andframe size for all the other loaded movies. Additional timelines load into highernumbered levels and are displayed in a stacking order with level0 being the bottom-most level. When using the Load Movie action, a level must be specified, to definewhere the SWF will be loaded. If loading one movie only, any level 1 or higher willwork fine.A movie can also be loaded into level0. This will replace the contents of the maintimeline with the loaded movie. This is an effective method of stringing multiple SWFfiles together in a continuously running show.If the loaded movie is loaded into a level, it is positioned relative to the upper leftcorner of the movie that loaded it.Using relative paths with load movie can be confusing. Since any timeline can performa load movie action, what path is the movie being loaded relative to? Is it relative tothe main timeline at _level0? Or is it relative to the timeline that performed the LoadMovie action? The answer is simple: Loaded Movies are always relative to the timelinethat loaded them.file:///C|/KoolMoves/Fun/HTML/Web/loadmovie.htm [5/11/2011 10:44:42 AM]Print and Print as Bitmap ActionsPrint and Print as Bitmap ActionsPrint and Print as Bitmap actions provide the cability to print key frames from withinan animation. Key frames labeled as #P (see Frame Labels) will be printed; otherwise,all key frames will be printed.file:///C|/KoolMoves/Fun/HTML/Web/printaction.htm [5/11/2011 10:44:43 AM]Frame LabelsFrame LabelsTo label a frame, select with the mouse a frame in the list of frames. Click again onthe frame to get a cursor in the label space. Now you can enter a new label.file:///C|/KoolMoves/Fun/HTML/Web/framelabel.htm [5/11/2011 10:44:43 AM]Roll-Over ExampleRoll-Over ExampleThis basic tutorial will define the steps necessary to create asimple roll-over effect using an oval button with a gradient fill.We start by drawing an oval.The oval is given a gradient fill andthe border is removed by settingthe border thickness to zero.The oval is made into a button by 1) selecting Shapes > Convert to Button or 2) right-clicking then select Convert to Button or 3) pressing Button icon (Convert to Buttonsub menu selection) on Tools toolbar or 4) selecting Is a Button option in Propertiespopup. Then the button's response (its actions) to mouse events is defined.To achive a simple roll-over effectwith no other action, select MouseEvent or select none of theevents. If we want an action tooccur when the button is pressed,we would select Get URL, Go ToFrame or whatever the action is.We can have as many actionsoccur responding to mouse eventsas we like. But to achieve asimple roll-over effect which isour current task, we only need toselect Mouse Event.file:///C|/KoolMoves/Fun/HTML/Web/mouseover.htm (1 of 3) [5/11/2011 10:44:44 AM]Roll-Over ExampleWe check Roll Over. If we had a down state defined, we could check Release and/orPress as well.After pressing OK, we return tothe prior popup and see theaction we just defined in the listof button actions. By double-clicking on it we can edit theaction. By selecting "+" we canadd another action.file:///C|/KoolMoves/Fun/HTML/Web/mouseover.htm (2 of 3) [5/11/2011 10:44:44 AM]Roll-Over ExampleNow we are ready to define the over state of the button (the button's appearancewhen the mouse is over the button). We press Over at the top of the propertiespopup. Because the over state has not been defined, we are asked if we want tocreate the over state from another state we have created or if we want to draw itourselves. We select to copy it from the up state (the button's appearance when themouse is not over the button) which is displayed to the left in a dimmed silhouette toprovide us with positioning information. If we had selected the last option to draw itourselves, we would be free to draw any text or non-text shape. If we position theover state with an offset relative to the up state, when the mouse goes over thebutton while the animation is playing the button will shift in position reflecting thatoffset.To make the button's over statedifferent than the up state, wechange the gradient colors of thebutton's over state. We press theUp button at the top of theproperties popup to exit the overstate and we are ready to test theroll-over effect justed created.We select play in stand-alone player. With the mouse away fromthe button we see the gradient color associated with thebutton's up state.With the mouse over the button, we see the gradient colorassociated with the button's over state. Our test is successful!To use as a navigation element, we could place text over the oval. On mousing overthe text, the background oval would change color.Continuefile:///C|/KoolMoves/Fun/HTML/Web/mouseover.htm (3 of 3) [5/11/2011 10:44:44 AM]MaskingMaskingMasking is a very powerful technique. The following illustrates a simple animationexample of letters being revealed from left to right using a gradient and a text mask.We start with a circular shape, no border, that is filled with a gradient. On top of thatwe place a text shape. The text is the mask. Think of it as a cookie cutter. The maskcuts out what is underneath to the extent of its masking depth which in this case is 1.The fill or color of the mask is immaterial. The mask itself is invisible when theanimation plays. In the editing environment, the mask is by default visible.A shape is made into a mask in the property dialog. The depth of the masking effect isalso assigned in the property dialog. Anything except buttons can be made into amask.file:///C|/KoolMoves/Fun/HTML/Web/masking.htm (1 of 2) [5/11/2011 10:44:44 AM]MaskingIn the first frame, the gradient filled shape is positioned to the left of the text. Theframe is copied and the gradient filled shape is positioned to the right of the text.During animation, the gradient will sweep across the text revealing the letters.This is how it looks when the gradient filled shape is underneath the center of the text(in this case the animation would span three key frames).To see the effect of the masking, press Ctrl+M. This is how theanimation will look when this key frame is played. Ctrl+M removesthe masking effect and the mask is made visible again.The shapes dialog identifies masking shapes and shapeswhich are clipped by masks with two different icons. Themask is always on top of the shapes which are clipped bythe mask.Continuefile:///C|/KoolMoves/Fun/HTML/Web/masking.htm (2 of 2) [5/11/2011 10:44:44 AM]SelectionSelectionShape and point selection tools are located on the top part of the left toolbar. Thesetools are used a lot. In addition to providing selection capability, they also allow youto move shapes and points. You can move previously selected shapes or points bydragging the mouse with the left mouse button depressed.One way to select a shape is by clicking on the shapewhen the shape selection tool is active. If you click ona shape with the shift key depressed, you will add toany previous selections.Another way to select one or more shapes is bydragging the mouse across the shapes totallyenclosing them. If you drag the mouse with theshift key depressed, you will add to any previousselections.file:///C|/KoolMoves/Fun/HTML/Web/selection.htm (1 of 3) [5/11/2011 10:44:44 AM]SelectionA third way to select one or more shapes is by invoking the list ofshapes (under Shapes) and selecting from that list. Shapes areautomatically named as they are created but you can change thename by editing the name in the list.A point can be selected by clicking on the point whenthe point selection tool is active. The selection areaassociated with a point can be set under Points. If youclick on a point with the shift key depressed, you willadd to any previous selections.Onother way to select one or more points is bydragging the mouse across the points totallyenclosing them. The points can be associated withdifferent shapes. If you drag the mouse with the shiftkey depressed, you will add to any previousselections.It is important to appreciate that point and shape selection is very general. You canselect multiple shapes or multiple points. The multiple points can even be associatedwith different shapes. Selected shapes and points can be moved by dragging themouse or by pressing the arrow keys.file:///C|/KoolMoves/Fun/HTML/Web/selection.htm (2 of 3) [5/11/2011 10:44:44 AM]SelectionSelection can also apply over many frames. There are four degrees ofshape and point selection: (1) current frame only (the most common), (2)all frames in the movie, (3) all frames from the current frame to the firstframe, and (4) all frames from the current frame to the last frame.The ability to select over multiple frames is very powerful. For example, ifyou change the color of a shape in the current frame and the shape hasbeen selected over multiple frames, the color change will be applied toeach of the selections. To prevent inadvertent sweeping changes, you arefirst asked if you want to change the other frames. The ability to changeselected shapes and points over multiple frames based on what you arechanging in the current frame applies to most of the functions inKoolMoves -- transformations, shape fills, translation, etc.Sometimes you want to exclude some points from possible selection. An easy way todo this is to select the shape associated with the points you want to select and thenselect the point selection tool. Only the points associated with the previously selectedshape will be visible. To hide shapes or points you can use Shapes > Hide Selection orPoints > Hide Selection. Selecting Shapes > Show Shapes or Points > Show Shapesbrings the shapes or points back. Shapes > Invert or Points >Invert inverts thecurrent shape or point selection.Continuefile:///C|/KoolMoves/Fun/HTML/Web/selection.htm (3 of 3) [5/11/2011 10:44:44 AM]ColoringColoringShapes and text can be filled with a solidcolor (with or without transparency), acolor gradient, or a tiled image. Access tothe Shape Fill dialog is through theshape properties dialog box and the Shape Fill toolon the left toolbar.To fill with a solid color:Select Solid Color at the top of the dialog.You can (1) enter red, green, and blue (all0 to 255 in range) and a transparencyvalue (0 to 100 in range), (2) select withyour mouse from the color wheel (partiallyshown), (3) use red, green, blue, hue,saturation, and lightness sliders (press thebutton on the left under the transparencyvalue), or (4) use an eyedropper (pressthe button on the right under thetransparency value) to select a color fromanother shape on the drawing canvas. To view the shape fill before committing, pressPreview. On OK, the shape fill is applied to all selected shapes.To fill with a color gradient:Select Color Gradient at the top of the dialogbox. A gradient fill is comprised of up to eightcolor pointers. The color associated with theselected color pointer is shown underneaththe gradient definition bar. The color of theselected color pointer (it is the color pointerwhich is depressed) can be changed by (1)entering red, green, and blue values (all 0 to255 in range) and a transparency value (0 to100 in range), (2) selecting with your mousefrom the color wheel (partially shown), (3)file:///C|/KoolMoves/Fun/HTML/Web/coloring.htm (1 of 3) [5/11/2011 10:44:45 AM]Coloringadjusting the red, green, blue, hue, saturation, and lightness sliders.The color gradient can be either linear or radial. Colorpointers can be dragged to the left or right along thegradient definition bar to change the gradient effect.A color pointer can be added by pressing the smallbutton with the plus sign. The mouse cursor turnsinto a color pointer with a + in the middle. Click at aposition on the gradient definition bar. Then changethe color of this color pointer. A color pointer can bedeleted by pressing the small button with the minussign and the selected color pointer is deleted.An example of a selected rectangular shape filled with lineargradient is shown here. Only a shape with points can be filledwith gradient color. To fill text with gradient color break it apartinto a shape with points (Transforms/Break Apart Text).The rotational orientation and position of the gradientfill can be adjusted with Rotate/Shift Gradient Fillunder Transforms.file:///C|/KoolMoves/Fun/HTML/Web/coloring.htm (2 of 3) [5/11/2011 10:44:45 AM]ColoringMoving the center of the gradient fill to the right shifts thegradient to the right.Moving the cursor around the center rotates the gradient.To fill with an image:Select Image at the top of the dialog box. Use the Browse "..." button to locate yourimage file. Bmp, jpeg, tiff, pcx, and png file formats can be imported. Transparency inpng files is ignored at this time. If you use the same image with the same filenamemultiple times throughout the movie, KoolMoves is smart enough to store the imageonly once in the exported Flash™ movie. If the image is larger than the shape, onlythe upper left portion of image will fill the shape. If the image is smaller than theshape in any dimension, the image will tile to fill the shape. Only a shape with pointscan be filled with a image. The transparency of the image can be adjusted with aslider.You can preview the fill by pressing Preview. On pressing OK, the fill, either color,gradient, or image, will be applied to all currently selected shapes and, if the fill iscolor, to all selected text.Continuefile:///C|/KoolMoves/Fun/HTML/Web/coloring.htm (3 of 3) [5/11/2011 10:44:45 AM]Editing and Playing FramesEditing and Playing FramesTo make a movie grow in size, you typically copy your current frame to the end of themovie. In the new frame, you change positions of shapes, move shape points, changecolors, add new shapes, etc. to develop the animation.You can navigate betweenkey frames by moving the frame slider or pressing firstframe, previous frame, next frame, or last frame buttons on either side of the slider.The name of the current key frame is shown on the left.You can display a list of all the key frames using Views > Listof Key Frames. This list can be used for navigating, renamingkey frames, and frame editing (cut, copy, paste, andreversingthe order of frames). To change the position of one or moreframes in the movie or to cut/copy/paste frames, make yourframe selections in the list of frames and use the editingcommands on the right. Shift select to select multiple frames.Paste places the cut or copied frames before the currentlyselected frame. To rename a frame, select the item in the listand click again to get a cursor. Type in the name you want.The window can be resized by dragging the resizing marks inthe lower right.file:///C|/KoolMoves/Fun/HTML/Web/newframes.htm (1 of 2) [5/11/2011 10:44:45 AM]Editing and Playing FramesThe number in the combobox is the number oftween framesbetween the current frame and the next. You generally want thisnumber to be greater than zero so KoolMoves will generatesmooth transitions (calledmorphing) between the key frames. Adding tween frames inmost cases is cheaper than adding key frames in terms of the size of an exportedFlash™ movie, particularly for shapes with many points. Adding tween frames also letsyou control the speed of the movie at a specific frame -- the more tween frames, theslower the transition to the next key frame.KoolMoves has an internal player which plays themovie in a loop. You can also single-step through themovie. You can view the movie in your web browseras a Flash™ movie on a blank web page or in a stand-alone Flash™ player if you have one. You candownload a free Flash player fromAdobe.Continuefile:///C|/KoolMoves/Fun/HTML/Web/newframes.htm (2 of 2) [5/11/2011 10:44:45 AM]Key FrameKey FrameA key frame is a frame that you create yourself. KoolMoves generatestween frames inbetween key frames.When cartoons are drawn by hand, a master animator typically creates the key framesand an apprentice creates the tweens. In KoolMoves, the software generates thetweens.file:///C|/KoolMoves/Fun/HTML/Web/keyframe.htm [5/11/2011 10:44:46 AM]TweenTweenA tween is a frame generated for you automatically by KoolMoves calculated from thepositions and colors of shapes from two key frames. To speed up action between twokey frames, assign fewer tweens. Dramatic effects can be achived with 0 tweens. Toslow down action or to make the animation smoother, assign more tweens.file:///C|/KoolMoves/Fun/HTML/Web/tween.htm [5/11/2011 10:44:46 AM]Reverse FramesReverse FramesFirst display the list of frames (List Frames under Frames menu bar). Select theframes you want to reverse in the list of frames. Select Reverse Frames functionunder Frames menu bar.file:///C|/KoolMoves/Fun/HTML/Web/reverseframes.htm [5/11/2011 10:44:46 AM]ReshapingReshapingThe heart of animation is movement. Movement is achieved by changing shapes fromone frame to the next. Change can take many forms: moving a shape from oneposition to another, moving or transforming points associated with a shape, changingthe color of the interior or border of the shape, adding or removing points from theshape. KoolMoves provides a number of tools to accomplish all these tasks withoutgetting in the way of your creativity.To move a shape or a group of shapes is simple. Select theshape or group of shapes with the shape selection tool anddrag the mouse. For fine precision movement, you can usethe arrow keys. The combination of shift plus an arrowkeys produces a movement of 10 pixels.To move a point or a group of points is equally simple.Select the points with the point selection tool and dragthe mouse. For fine precision movement, you can use thearrow keys.Shapes and lines with curves are definedby on-shape points and off-shape points(indicated by dashed circles). You canchange the shape of the curve bymoving the points.To add a point to the boundary of a shape use theInsert Point tool (whether the shape has a borderor not or whether the fill is a color or a bitmap).file:///C|/KoolMoves/Fun/HTML/Web/reshaping.htm (1 of 5) [5/11/2011 10:44:47 AM]ReshapingYou get a cursor that indicates when you are allowedto add a point. It looks like this when you are not ona boundary line.And it looks like this when you are on a boundary line.Click the mouse and a point is added.Without releasing the mouse, you can drag thepoint to a new position.To delete a point on the boundary of ashape use the Delete Point tool.You get a cursor that indicates when you areallowed to delete a point. It looks like this whenyou are not on a point.file:///C|/KoolMoves/Fun/HTML/Web/reshaping.htm (2 of 5) [5/11/2011 10:44:47 AM]ReshapingAnd it looks like this when you are on a point.Click the mouse and the point is deleted.To change the boundary of a shape from astraight line to a curved line, use the AddCurve tool.You get a cursor that indicates when you are allowedto add a curve. It looks like this when you are not ona straight boundary line.And it looks like this when you are on a straightboundary line.file:///C|/KoolMoves/Fun/HTML/Web/reshaping.htm (3 of 5) [5/11/2011 10:44:47 AM]ReshapingClick the mouse and a curve is added.Without releasing the mouse, you can drag the curvepoint to a new position.To scale, rotate, flip horizontally or vertically, slant,squish, or create perspective on one or more selectedshapes or one or more selected points, use one of thetransform tools.Most of the tools present a set of handles that youcan drag in different directions to achive the effect