Select a paragraph text block, and then click the Make Text Web Compatible button.. You will not see paragraph text change in any way on your CorelDRAW page; the Make Text Web Compatible
Trang 13. 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
Trang 2SVG: 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 pressCTRL+Ato 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
28
Trang 38. 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
Trang 4files 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 pressALT+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
28
Trang 5● 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, soCTRL+Adoesn’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
Trang 6Player 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
28
Trang 7drawing 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
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
Trang 8these 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
28
Trang 9Setting 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
Trang 10long 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
28
Click here.
Frame rate
of animation