3. Conversely, any headlines or other ornate large, short text entries should be artistic text. With the Pick tool, select any text that’s paragraph text but needs to be artistic text, and then choose Text | Convert to Artistic Text. 4. Choose Window | Toolbars | Internet. Select a paragraph text block, and then click the Make Text Web Compatible button. Do this again for any remaining paragraph text blocks. 5. If there is nothing left to link on your web page, click Export HTML. You will not see paragraph text change in any way on your CorelDRAW page; the Make Text Web Compatible button is a toggle—you can select tagged text and then turn off its web compatibility, and this compatibility is just an instruction on how CorelDRAW writes the HTML. You need to look at the finished HTML page in a web browser—on a computer other than your own—to truly see how the web-compatible paragraph text looks. Because web browsers examine your installed fonts, you have no other way to see the text as the rest of the world will see it unless you go through the unpleasant process of temporarily uninstalling several typefaces from your own computer. Use ALT Tags The ALT Comments button on the Internet toolbar is used to provide descriptive information— popularly known as ALT tags—about a graphic for those in your web audience who either are surfing with graphics disabled (it’s a fast way to perform text searches), or have a visual impairment. It’s good “netiquette” to label graphics on a web page with an ALT tag, particularly if your logo is a graphic and it’s the only time it’s seen on a web page. Applying ALT tags takes only a second, and here’s an example: the fictitious SPA-Di-Dah Health Club’s logo is a special typeface and therefore has to go out to the Web as a bitmap graphic. Here, the logo is selected, the ALT Comments button is clicked, and a description of the graphic is typed in. Ill 28-13 914 CorelDRAW X5 The Official Guide A graphic SVG: Export as Vector Objects Scalable Vector Graphics (SVG) are web objects CorelDRAW can both import and export. Since 1999, the SVG file format has been under development by the World Wide Web Consortium (W3C). SVG is based on the text-based Extended Markup Language (XML) for describing 2D vector graphics. All current web browsers except Internet Explorer can directly render an SVG web page element to screen; IE 9 is expected to adopt this capability. One of the most useful properties of an SVG graphic is that it is scalable, with no loss of image detail. This means that you can post a graphic, for example, of directions as a map, and if the SVG file is coded properly into a page, a visitor to your site can enlarge or decrease the size of the map to exactly find a location. Also, SVG files are very small because they are text based, and if a friend or client doesn’t own CorelDRAW, SVG is an ideal medium for sharing graphics, a good alternative to the PDF file format. Open Map.cdr in CorelDRAW now, and follow these steps to see how to export a graphic to the Scalable Vector Graphics file format. Exporting Vectors as Vectors for the Web 1. Select the graphic with the Pick tool, or press CTRL+A to Select All. 2. Choose File | Export (or click the Export button on the standard toolbar). Choose SVG Scalable Vector Graphics (*.SVG), pick a filename and location, and then click Export. 3. Choose Unicode UTF 8 as the encoding method. This produces a smaller file than UTF 16 because it encodes words to 8 bits, eliminating some multilingual parameters used in non-Latin text. 4. In the Export Text area, you can choose to export any text in the selected objects as text or as curves. If you chose UTF 8, you should export as curves if you’ve used non-Latin characters such as those available in fonts such as Arial and Georgia— Chinese and Greek glyphs are present in Unicode fonts. 5. In the Styling Options list box, you can choose to embed a style sheet (a cascading style sheet, CSS) internally or externally with the exported SVG file. If you choose an external style sheet, it’s linked to the graphic and can help a webmaster embed the graphic in a web page. You can also make the SVG part of a rollover button if you check the Link Externally box in the JavaScript area. 6. Choose to embed fonts if you’re using a typeface that’s not web compatible. 7. You can create smooth fountain fill steps by increasing the value using the Fountain Steps box. Doing this increases the saved file size, however. CHAPTER 28: Basic HTML Page Layout and Publishing 915 28 8. Choose the dimensions at which you want the SVG graphic to display in a browser window. It makes no sense, in this example, to make it a small graphic, so a width of 900 pixels is chosen. 9. Export Bitmap is only a relevant field in this export box if objects you’ve selected cannot be interpreted as vectors. Choose this option if you’ve used drop shadows, mesh fills, texture fills, and any effect such as lens effects. You can embed or export the bitmaps-linked files. Embedding the bitmaps makes the SVG file much larger; if you choose to do this, JPEG—a highly compressed image file type—is probably a smarter choice than PNG. 10. Click OK to export the SVG file. If you have Firefox, Safari, Opera, or an Internet browser other the Internet Explorer, try dragging the SVG file into an open browser window to see the results. Ill 28-14 Flash and Web Pages Flash is an openly published media standard, owned by Adobe Systems, that is yet another web-worthy vector file format. If you bought the physical DVD installation of CorelDRAW X5, you have a copy of SwishMiniMax v2.0, and you can make incredibly small animation 916 CorelDRAW X5 The Official Guide files by working between CorelDRAW and SwishMiniMax. If you bought the download version of X5, you didn’t get the animation application, but you can still export non- animating SWF (Flash) vector graphics you can put on the Web. In either case, animation is an exciting part of the Web, and the tutorial that follows guides you through some basic steps on using the Swish animation program. Exploring SWF Files CorelDRAW can add some fill and outline properties to objects that the Flash file format doesn’t support. As with SVG files, if a Flash file can’t write a vector, a bitmap copy of the graphic is included in the exported file. Exporting bitmaps within a Flash file sort of defeats the purpose of this compact vector-enabled file type, so reviewing what can export as vector objects, and what cannot, is a good idea here. Objects and Fills that Flash Supports You can create certain shapes and fills in CorelDRAW that Flash animation can’t handle, and you’re warned of this before you export an animation. The good news is that everything that Flash can handle, CorelDRAW can create. The following list describes what you should and shouldn’t use when making a scene for animation: ● Outline Properties Standard Flash export supports outline width and color, but only rounded line caps and joins for the Flash standard previous to version 8; CorelDRAW’s export filter doesn’t do 8, so press ALT+ENTER, click the Outline tab, and then click Advanced before exporting any outlines, and change the connections to round. Flash does not support dashed lines, arrowheads, or artistic media strokes. However, if your design calls for a fancy outline stroke, you can convert the line to a shape by choosing Arrange | Break Artistic Media Apart, and then delete the parent stroke choosing when an outline is selected. The Export dialog also offers to convert only dashed outlines to be compatible with Flash. ● Fill Properties Flash will render Uniform color fills, plus Linear and Radial fountain fills. A gradient can contain up to eight color transitions (color stops). ● Transparency If you apply transparency to a gradient-filled shape, you are limited to the Uniform transparency type. However, when a shape is filled with a flat (solid) color, you can use Linear and Radial transparency types. ● Text You can use any typeface you have installed. However, if you want fancy text animations, it’s best to type your text directly in SwishMiniMax instead of in your design. SwishMiniMax reads imported vector text as one solid block of graphic and can’t animate individual characters as a single object. CHAPTER 28: Basic HTML Page Layout and Publishing 917 28 ● Bitmaps Photos and digital paintings can be exported to a Flash animation, but they cannot be as efficiently compressed as vector shapes. It’s a good idea to make a copy of high-resolution images at the size you intend to use, in JPEG file format. ● Effects All effects—contours, blends, and envelopes—applied to shapes can be exported; using these effects is a good workaround to certain types of fountain fills that don’t work as a flash vector object. Exporting a Static Flash Vector Design Open Solutions Graphic.cdr in CorelDRAW now. This design has been created in a tricky sort of way to make an interesting animation, but first let’s check out how to export a static, nonmoving Flash file from CorelDRAW. Here’s the procedure and your options. Making a Single-Frame Flash File 1. Select all the objects using the diagonal-drag, marquee technique around the objects. They are on different layers, so CTRL+A doesn’t work here. 2. Click the Export button on the standard toolbar, and then choose SWF - Macromedia Flash (.SWF) from the Save As Type drop-down list. Choose a location for the saved file and name it, and then click Export. 3. On the General tab, bitmap settings are only relevant when objects have fills that the export engine cannot recognize. In your own exporting adventures, use JPG Compression of 0 or 10 percent to preserve the appearance of vector objects that have texture or other non-acceptable fills. 4. Click Objects in the Bounding Box Size area; you have the objects already selected in step 1, so this option is the smart one. 5. Check Convert Dashed Outlines just as a matter of practice. Use Default Fountain Steps is a handy option if your objects have only subtle fills or fewer than 8 color transitions. Unchecking this box can create larger files, but unchecking this box might cause visible banding when you look at the Flash file. 6. The HTML tab really contains only one item of interest: Image Size. If you want to export this graphic at any size, select the size using the spin boxes or by typing a specific value here. 7. If the Issues tab reports that non-RGB colors are in the selection, ignore it. Click OK to export the graphic as a flash media object. 8. Internet Explorer needs the help of a JavaScript to display a Flash file directly in a web browser window, but if you have a copy of Firefox, you can drag the SWF file into its browser pane, and you’ll see the graphic full screen. Also, Adobe’s Flash 918 CorelDRAW X5 The Official Guide Player 10 will display the file if you’ve downloaded the player; chances are good that some application has already fetched it for you and made the file association. Double-clicking the file icon might bring up Flash Player. Ill 28-15 CorelDRAW X5’s Flash Export options aren’t correct on the HTML tab. No Play or Loop options are exported for files that contain no animation. This is why you should read on and learn about SwishMiniMax, which does indeed use sound and full vector animation when it creates an SWF file. Exporting SWFs to SwishMiniMax The documentation for SwishMiniMax 2 will tell you that WMF (Windows Metafile) and SWF files are accepted for import as vector-based media. Unfortunately, the WMF file format is quite limited in translating your handsome CorelDRAW artwork, but SWF files do, indeed, translate your CorelDRAW drawings with quite high fidelity. SwishMiniMax thinks all SWF files are vector movies, but that’s okay; you’re not going to tell SwishMiniMax a word, and your SWF imports will look splendid. The following sections walk you through an example scenario: Solutions, Inc., a fictitious company, wants an animated logo—the block with the three pegs in the Solutions Graphic.cdr file. What do you say you knock their socks off and deliver an animated logo, animated text, and music playing during the animation? Building the Architecture of Animated Graphics Open the Object Manager now to get a better look at the trickery beneath this graphic (Tools | Object Manager). Figure 28-12 shows the composition taken apart: if you move any of the objects marked yellow, orange, or magenta, you’ll see that they appear to fit through the holes in the brick object. The reason this illusion works is that on the top layer in this CHAPTER 28: Basic HTML Page Layout and Publishing 919 28 drawing is a mask that hides the bottom of the brick object; thus, you can duplicate this 2D illusion—making a composition move in “3D” if you build a similar mask group of shapes in compositions of your own that you want to animate. Move the Composition to SwishMiniMax As mentioned earlier, SwishMiniMax will accept CorelDRAW-exported SWF files. The next trick is to export the drawing as six separate objects: the three pegs, the brick, the mask group, and the shadow for the pegs on the brick. Create a new folder on your hard disk for 920 CorelDRAW X5 The Official Guide FIGURE 28-12 Stage a composition with carefully designed objects on layers to create the illusion that objects pass through a hole in other shapes. these project files. Additionally, put the Solutions.mp3 file you downloaded in this new folder—it’s the music for this big-time animation. Select one object at a time, click the Export button on the standard toolbar, and then choose SWF as the File Of Type when you export—make certain Selected Only is checked. Give each export a name you’ll remember; SwishMiniMax understands layers and it’s quite easy to order all six shapes, but you need to select an object before exporting, as shown here, or you’ll wind up exporting the entire page of objects. Ill 28-16 A Taxi-Driver’s Tour of SwishMiniMax The Official Guide cannot possibly comprehensively document SwishMiniMax’s features; the following sections you’ll work through, however, will give you a base education on its animation options. By just following the steps, you’ll learn how to build a basic, finished animation, and use variations on the steps later to build a handsome Flash movie of your own. CHAPTER 28: Basic HTML Page Layout and Publishing 921 28 Setting Up Your SwishMiniMax Stage A number of terms might be new to you after opening SwishMiniMax; there are equivalents in CorelDRAW, but some terms have no equivalents, and they’ll be described as you need to use the features in the tutorials. Two items are of immediate importance, though: ● The Stage Flash movies can have different scenes—scenes are out of the scope of this book to describe—and every scene has a stage. For the purposes of this tutorial, a stage is the drawing window, into which you import and create actors. ● Actors You put several automatable elements on the page (the stage), but the most common one is an actor. Actors in this example are objects: text objects, a background you’ll manually add, and the music MP3 file. ● Frame Rate Digital video usually is measured in frames per second (fps). This frame rate has very little to do with how fast an animation plays, but instead controls how smoothly or jittery a video plays back. If you remember the (relatively!) old NASA footage of spacewalks, the video was at a frame rate of anywhere from 8 to 10 fps. And although the footage was breathtaking, it looks a little on the Keystone Cops side. By default, SwishMiniMax offers you a new video project at 25 fps, which is a good, all-purpose frame rate. If there’s not a lot of dramatic action in a video, you can customize a project to play at 20 or even 12 frames per second. How fast an object moves in an animation depends on how many frames there are between keyframes—you’ll work with keyframes in the examples to follow. Let’s open SwishMiniMax now, define the size and frame rate, and create and import an object or two. Beginning an Animation 1. Click the SwishMiniMax icon to launch it, or use the Windows Start menu to launch it. The very first screen is a wizard, where you pick a default template. Choose the Default template and then click OK. 2. Choose File | Save As, and then save your project to the folder you created with the Flash objects in it. 3. On the Properties panel, click Movie Properties. 4. Here’s the deal: animations can be any time length you like, but this animation will have a soundtrack, which is 4 seconds long. This 4 seconds is something you can’t change, so the concept is to make a 4-second-long animation so both the video and the audio end at the same time. To be on the lazy side here, type 30 in the Frame Rate box (30 frames per second × 4 seconds = 120 frames). Now you know how 922 CorelDRAW X5 The Official Guide long you have to animate on SwishMiniMax’s timeline to make a perfect little flash video that loops continuously while staying in synch with the audio. Ill 28-17 5. As you can see, the Width and Height are predetermined by the Default template, and this is fine: 560 pixels wide × 410 pixels high will work because the Solutions graphic.cdr file was carefully measured beforehand to scale to these dimensions. Usually, it’s a good idea to preplan this way in your own work, but it’s not a showstopper because the SWF files you exported are vector objects, and vector objects can be scaled in SwishMiniMax smoothly, exactly like in CorelDRAW. Click OK to apply the frame rate and close the box. 6. Unless you like black or transparent, this scene could use a background. Let’s make it a circular gradient background, going from a white interior to black at the outside edges. Choose the Rectangle tool from the toolbox, and then drag from upper left to bottom right in the scene window. It’s okay if you go outside the frame a little: Flash files truncate any object area outside of the stage. 7. On the Properties panel, click the Fill drop-down list and choose Gradient. Now click the Gradient Type button and choose the Radial button. 8. To invert the gradient, drag the white marker from its position on the right, nearly over to the black marker at left. Then move the black marker to the far right. Finally, move the white marker to far left. You’re more prone to accidentally delete a marker if you put two in the same position—that’s why you took the extra step here. 9. It’s time to bring the brick—the backmost imported actor—to the stage. Choose File | Import to Stage | Animation. Choose Brick.swf (or whatever you named the brick) from the directory list and then click Open. 10. In the Import dialog, Animated Movie Clip is the only button that needs to be clicked—SwishMiniMax doesn’t know the file isn’t an animation, and you’re not going to tell it. Click Import, save the file again, and take a break for a moment. Your screen should look like the one in Figure 28-13. CHAPTER 28: Basic HTML Page Layout and Publishing 923 28 Click here. Frame rate of animation . drag the SWF file into its browser pane, and you’ll see the graphic full screen. Also, Adobe’s Flash 918 CorelDRAW X5 The Official Guide Player 10 will display the file if you’ve downloaded the. objects: the three pegs, the brick, the mask group, and the shadow for the pegs on the brick. Create a new folder on your hard disk for 920 CorelDRAW X5 The Official Guide FIGURE 28-12 Stage a composition. small animation 916 CorelDRAW X5 The Official Guide files by working between CorelDRAW and SwishMiniMax. If you bought the download version of X5, you didn’t get the animation application, but