Finishing the Imports Procedurally, it’s a good idea to have all your actors in the scene before animating them. Once you become familiar with SwishMiniMax, you might want to bring your actors to the scene all at once—you can do this by multiple-selecting SWF files in the Import box. But for now, let’s keep it simple and keep the actors in the proper order for the animation. One at a time, import the yellow, the orange, and the magenta pegs, then import the mask, and finally import the shadow object. You should have no problem aligning them. With SwishMiniMax’s Selector tool (it’s the same as CorelDRAW’s Pick tool), first select the name of an actor from the Outline list, place the Selector tool in the scene window, and after 924 CorelDRAW X5 The Official Guide FIGURE 28-13 The brick imported object is in the scene, on top of the background you created. Order of objects in scene Timeline it turns into a four-headed “move” cursor, move the objects. Then import the MP3 file as an actor to the scene: File | Import to Stage | Sound. Then press CTRL+S! How to Move an Actor This section will be the most demanding for users who have never worked with a timeline or a video application. Here is the strategy, and then you’ll actually work through the procedure as tutorial steps: ● The concept is to make first the left peg, then the middle, and finally the right magenta peg come out of the holes. So first, position all the pegs in a retracted state. ● These peg actors are in the scene, but not on the stage yet. This is admittedly a confusing screen convention, but it’s the way Flash animates things. So after the pegs are in their first frame position, on its track on the timeline, right-click the first frame, and then choose Place from the pop-up menu. You’ve placed the actor (the peg) in its initial position. ● You want to move the peg up and to the left over time, so you right-click anywhere to the right of the little Place icon on its track (the traffic light icon), and then choose Move from the right-click menu. ● You now move the actor: you click the last segment of the Move segment on the track—the diamond dot at the right end of the arrow—and then you put your Selector tool in the window and move the object. You’ll see a preview line over the object in the scene window indicating its movement. ● If you want to change this movement at the beginning or end, you need to click either the Place icon at the beginning, or you need to be at the diamond marker at the end of the Move segment. At any point in between, you cannot move the actor. ● To move where the movement starts, you drag the Move marker on the track in the timeline. ● To make an object move slower or faster along the path you’ve created, you need to increase or decrease the number of frames for the transition. To do this, click-drag either the head or the tail of the Move marker. You know your cursor is in position when the cursor changes to a double-headed arrow with a brace between the arrows. So much for explanations: the best way to get results is by actually doing these moves. Creating Animation 1. Begin by selecting the orange round peg at left. On its track on the timeline, right- click the first frame, and then choose Place from the pop-up menu. CHAPTER 28: Basic HTML Page Layout and Publishing 925 28 2. Click Frame 2 on the track in the timeline. Right-click and then choose Move. By default, this puts a 10-frame movement segment on the track, which is too frenetic for a 30 fps animation, but you’ll correct that in a moment. 3. Click the end of the Move event, at the diamond dot. Ill 28-18 4. Put your cursor in the scene window, and then carefully move the orange peg up and left so it sticks out of the brick. 5. Click the tail of the Move event on the track, and then drag it out to about Frame 20. The Move event marker should tell you how many frames you have the move specified for in parentheses. 926 CorelDRAW X5 The Official Guide 6. As a reward for getting this far, click the Play button below the main menu bar. Then click the Stop button and get back to work! 7. Repeat step 1 with the yellow and magenta animation tracks. 8. For the yellow peg, click over Frame 3, and then right-click and choose Move from the menu. Click the last frame of the Move event, and then move the yellow peg in the scene, as you did with the orange peg in step 4. 9. Drag the track out to about 20 frames in duration so that Move ends at about Frame 39. 10. Do the Magenta peg’s animation now. Start the Move at Frame 30, and end it at about Frame 58. 11. File | Save. Keep it open. Gosh: all the action is over with at Frame 60, and we have a whole 60 frames to spare. This is by design! In the sections to follow, you’ll add a fancy animated piece of text, and then add the music to make a perfectly timed Flash video. Applying a Canned Effect In addition to the Place and Move commands on the pop-up menu, this menu is also a handy shortcut to accessing canned scripts that auto-animate object properties. The shadow object is a perfect example of an element that’s in need of a certain scripted effect. It would be too time-consuming to animate the movement of the shadow so it’s in synch with the movement of the pegs apparently casting the shadow—what will work almost as well is to fade it in. Here’s how to script an event using a SwishMiniMax preset. Using the Fade in Preset 1. The precise entry point and duration of the shadow object fading in is based on your artistic taste, or on having had experience in traditional animation. Click the shadow object in the Outline panel first. 2. Click at about Frame 15 on the shadow’s track on the timeline to move the current time to Frame 15. 3. Right-click over Frame 30, and then on the pop-up menu, choose Fade | Fade In. Because this object is making its stage appearance by fading in, the Place marker is not needed for this track. Play the movie back now to see how you’re doing, and to amaze anyone watching over your shoulder. CHAPTER 28: Basic HTML Page Layout and Publishing 927 28 Ill 28-19 Adding and Animating Text Here’s the part where not using CorelDRAW text as a graphic begins to make sense. You can access any installed system font in SwishMiniMax via the Text tool and the Properties panel. Let’s cut to the chase now and add text, and then animate it. No one knows this is Solutions, Inc.’s logo. Yet. 928 CorelDRAW X5 The Official Guide Text as Flash Actor 1. Choose the Text tool from the toolbox. 2. Move the current time to Frame 54 on the timeline. 3. Marquee-drag a text box below the design in the scene window. It’s perfectly okay if objects overlap in a Flash composition, and it’s okay to drag a large defined area. “Large” is easier to correct later than making a box that’s too small for your text— then you have to resize the box. 4. Type Solutions, Inc. in the open text field in the scene window. 5. Choose a typeface in the Properties panel, then choose a point size, choose center alignment from the Text Justification drop-down, and finally, click The Color Of The Text button to reveal the palette of web-compatible colors. Choose a bright gold. Ill 28-20 6. File | Save. Now, with the Selector tool, right-click over Frame 54 on the text track in the timeline, and hover over Appear Into Position. Don’t freak out over the arm’s length of preset animation scripts here. Save some for future use, and choose any of the presets that end in the word “in,” such as Burn In, Blur In, or Flip And Shrink In. Make this action about 20 frames long. CHAPTER 28: Basic HTML Page Layout and Publishing 929 28 The Color Of The Text button 7. File | Save. Ill 28-21 Adding the Finishing Touches Because you added the MP3 file as an actor to this project, it’s placed on the timeline, and if you locate it for a moment, you’ll see a faint red stripe on its track, which tells you in absolute frame count (at 30 fps) where it ends, which is at Frame 120. Now ensure that the longest-duration actor in the scene stays on stage until the music is over. This forces the Flash video you’ll export shortly to keep the audio in synch with the video, and the other placed actors will inherit this duration because they’ve appeared and have no cue to disappear until the animation loops back to Frame 1. Setting an Overall Flash Video Duration 1. The text entered the scene last, so it’s a good candidate for the Place command. Make the current time 120 frames by clicking the timeline. 930 CorelDRAW X5 The Official Guide 2. Right-click over Frame 128 on the Solutions, Inc. track. It’s just a little after the end of the MP3 music. 3. Choose Place. Done! It’s time to go live with this hot piece of motion picture entertainment! 4. Press CTRL+E (File | Export…SWF). 5. Choose a name and location for the saved Flash file, click Save, and then save one last time in SwishMiniMax; then you can close the program. Ill 28-22 CHAPTER 28: Basic HTML Page Layout and Publishing 931 28 Gather as many friends as possible, and then seat them around your monitor. Get popcorn, and break out the non-alcoholic sparkling grape juice. What you’ve just exported is only 68K (some typefaces are larger and not as entertaining), yet it has music and plays for 4 seconds at any size dimensions you set up a web page for to place this media. If you have Firefox or any Internet browser other than IE Explorer, just drag the file icon into an open browser window to play it. Alternatively, you probably have Adobe Flash Player 10 installed—an application or your browser might have installed it for you. If the icon is a page with a big “f” on it, it’s associated with Adobe’s Flash Player, and all you need to is double-click the icon to play it. The End-Of-Book Special The preceding tutorial is by no means the end of this chapter or The Official Guide. You have some serious playtime ahead of you! In the ZIP archive you downloaded is the finished SWI SwishMiniMax file you can load in SwishMiniMax to verify that you did everything like the steps showed, plus: ● Several other “ambient” MP3 sound files for your use in the future. These are completely free for commercial and private use, created by the author, so there are no sticky encumbrances with royalty-free online music or commercial restrictions. ● A full-frame animation of the Solutions, Inc. logo. This SWF file was created as a movie from a 3D modeling and rendering program. Full-frame animations are larger than vector animations because every frame is totally different from the previous one. If you have a movie you’d like to turn into a Flash file with SwishMiniMax, give this experiment a go with Solutions 3D.swf first. All you need to do is follow the steps in this chapter with SwishMiniMax, but import the Solutions 3D.swf as an animated movie clip, exactly as you did with the CorelDRAW exported SWF still vector images. ● The finished SWF files can be found in the Gallery subfolder of the ZIP archive, for viewing and examining. Figure 28-14 shows two different versions of the Solutions, Inc. assignment. If you don’t have the typeface Variex installed on your computer, SwishMiniMax will inform you that the typeface the author used is unavailable. This is okay—let SwishMiniMax substitute a font, probably Arial, and you can choose a different typeface as you experiment with the file. As far as embedding Flash files to play in an HTML document you’ve exported from CorelDRAW, SwishMiniMax provides the HTML code snippet if you choose File | Export | SWF+HTML. However, you do need to know a little about HTML code to manually insert the code so the movie plays on your CorelDRAW exported web page. Alternatively, if you really want moving content on your website, consider a free HTML editor such as the one 932 CorelDRAW X5 The Official Guide offered by Coffee Cup software. You can import your CorelDRAW exported file, and perform a little embedding with the WYSIWYG editor. The last word in animation is that as a designer, it’s probably best to turn your work over to a webmaster or other expert in HTML coding, and to ask them to embed your work on an HTML page. You’ve learned a lot in this chapter; don’t overdo it! This chapter has shown you how to take just about any media on a CorelDRAW page, be it a drawing, a photo, or text, and make your design compatible as a web page. With links, your web page connects you to a community and keeps you connected with business associates, friends, and potential customers you haven’t even met yet. CHAPTER 28: Basic HTML Page Layout and Publishing 933 28 FIGURE 28-14 Flash files can contain static vector objects and also can contain complete full-frame animations. . Outline list, place the Selector tool in the scene window, and after 924 CorelDRAW X5 The Official Guide FIGURE 28-13 The brick imported object is in the scene, on top of the background you created. Order. now move the actor: you click the last segment of the Move segment on the track the diamond dot at the right end of the arrow—and then you put your Selector tool in the window and move the object in the Import box. But for now, let’s keep it simple and keep the actors in the proper order for the animation. One at a time, import the yellow, the orange, and the magenta pegs, then import the