|
|
|
|
||||
|
|
If you've created graphics for the Web, you've probably noticed that you have two choices; GIF and JPEG. Sure, there are other formats, but those two are dominant. And they are also both bitmap formats. This tutorial is going to cover another popular format and it works with vectors rather than bitmaps. I'm talking about Macromedia Flash.
Before I get into the step-by-step tutorial about how to create a Flash file, let me first explain why vectors can be useful and why we're going to choose Flash.
Let's first go over the difference between bitmaps and vectors. With a bitmap, the image is broken up into a series of pixels (picture elements). So for a Web graphics that is 150 pixels wide and 150 pixels high, you have a total of 22,500 individual pixels. Each of those pixels can hold any of 16.7 million colors for JPEG files and any of 256 colors for GIF files. So even for a small file, there is a lot of data to be stored. Each of those formats contains a compression routine that makes saving the data much smaller than if it were stored uncompressed. Another limitation is that resizing the file may give undesirable results. If you enlarge the file, it becomes pixelated or stairstepped. Making the image smaller will throw out detail.
But for many things on the Web, bitmaps work great. A Web artist can tweak the images to make the files small while still getting great results. And best of all, the browsers support both formats.
Then there are vectors. If you want to create a shape in vector format, you only have to describe a few data points along a path. Then you can fill the path with any color. So for simple shapes, vector files can be much smaller in size. And they can be scaled to any size you want without a loss of quality.
Programs like Adobe Photoshop, Corel PHOTO-PAINT, Metacreations Painter and JASC Paint Shop Pro are all dedicated to working with bitmaps. Software dedicated to vectors includes Adobe Illustrator, CorelDRAW and Macromedia Freehand.
So we've decided that for a particular Web graphic that a vector image will work best. Maybe it is because the file will be smaller. But another great reason is that a vector image will print text at a much better quality than a bitmap. So our example will be a map where the various roads are all labeled with small text. The text wouldn't be readable as a bitmap, but it will print beautifully as a vector.
One flavor of vector files that works well on the Web is Macromedia Flash. There is the product Flash, which we'll be using a bit later. But there is also the Flash file format which is open to any developer who wants to support it. Both of the major browsers include support for Flash files and a recent study showed that over 100 million people already have Flash support in their browser. So I guess you could say it is pretty darned popular.
Since we'll be using Macromedia Flash for our project, you might want to download the 30-day evaluation version so that you can work along. If you like it, you can order it from within the evaluation version. If you don't like it, it was free.
Another vector format is getting a lot of attention these days. It is called Scalable Vector Graphics (SVG) and is backed by many of the big players in the software industry. Right now, there is no software that will create a file in SVG format and there are no browsers that can display it. Yet companies like Corel have indicated that they have no plans to directly support Flash as they will wait for SVG. That might be great in a couple of years, but it doesn't help us now. So we'll carry on in Flash!
I'm not going to spend a lot of time describing how the map was created, but I'll give you a few tips for preparing a file. Since we know that the file is headed for the Web, we definitely want to use RGB colors. The best way to do this is to use one of the Web-safe palettes that are supplied with CorelDRAW. I always use the Netscape Navigator palette as the Microsoft Internet Explorer palette contains sixteen extra colors that only work in Windows. That is the only difference between the two. You'll also want to keep the image fairly simple. Don't use a bunch of the special effects like Lens because they won't translate well to other file formats.
Once you've got your image finished, we'll need to export it to Adobe Illustrator format. Because Illustrator doesn't have all the features of CorelDRAW, there are some things that just won't export correctly. So if your goal is to create an illustration that you want converted to Flash, try not to use things like pattern fills, transparency and bitmaps. This limitation is frustrating, but it is just something we have to live with.
In CorelDRAW 9's Adobe Illustrator Export dialog box shown at right, there are a few specific settings that are important. First, choose Adobe Illustrator 7.0 format. This flavor of Illustrator supports more CorelDRAW features than the other versions and it works just fine with Flash. If you're using a PC, select PC. For those of you on the Mac, choose Macintosh. Export the Text as Text. This will retain the fonts in your file. Note that we have made sure that all other settings are unchecked. The exception is Include placed images and it is grayed out since we didn't use any images (bitmaps) in the file.
We're going to assume that the file does not need to be edited in Flash. So all we need to do is import the Illustrator file and Publish it to a Flash Movie.
To import the file, choose File | Import. As it comes in, you'll notice that all objects are selected. This is indicated by a gray box around each object. Click away from the objects and everything becomes deselected. If you needed to do minor editing, you could select an object and do the editing here in Flash. We're conquer that in a future tutorial.
Now we need to save the file so choose File | Save. This is so that we can work with it later if needed. But for using it on the Web, we'll need to Publish it. Select File | Publish Settings to get the dialog box shown below.
We want to create three files. A Flash file (SWF), an HTML file (HTML) and a GIF image (GIF). So make sure all three of those checkboxes are checked. We want the SWF as it is the vector image that will be displayed on the Web. The HTML file contains the code needed to display the SWF file. Lastly, the GIF file will be used for visitor's whose browsers can't display the SWF file. You'll see that other files can be created, but we'll just stick with these three for now. Now let's move to the Flash tab of the dialog box shown below.
You might wish to change the Load Order, but I've left it at the default of Bottom Up. This just determines how the image will be drawn. The important change is the Version. It defaults to Flash 4 and we want to change this to Flash 3. Since Flash 4 is fairly new, we want to choose the older format that can be seen by a much larger percentage of users. Now let's move to the HTML tab as shown below.
Here we've kept with the default settings. I suggest that you start with these settings. If you find that you want to change something, go back and change the settings. Lastly, let's move to the GIF tab shown below.
Here you control the settings of the GIF file you created. You might be asking why we are even creating a GIF file. It is really only done as a backup. If someone doesn't have the Flash plug-in and doesn't want to download it, the GIF will display in its place. Again, we stuck with the defaults except for Interlace which we've checked. Go ahead and click OK.
The last step is to choose File | Publish. This will create the SWF, HTML and GIF files you requested. You can either use the HTML file as is to display the Flash file on the Web or you can paste the code into another HTML file.
So that you can see the difference between vector and bitmap, you'll find copies of the Flash file (top image) and the corresponding GIF file (bottom image) below. Note that some of you will see the GIF file twice if you don't have the Flash plug-in. To really see the difference between the two, print this page out. The GIF image will be much more pixelated and the Flash file should look fantastic.
If you aren't convinced by what you see, then look at the file sizes. The Flash file is 7K and can be scaled to any size you want. The GIF file is 14K.
|
|
CorelDRAW X6 Font List · CorelDRAW X5 Font List · CorelDRAW X4 Font List · The Terms of Adobe Photoshop and Corel PHOTO-PAINT · CorelDRAW X3 Font List · Cropping and Rotating Files in Corel PHOTO-PAINT · The Magic of Color Styles · CorelDRAW's Find and Replace Wizard · Shorten Your Design Time with Templates · CorelDRAW's Multi-Faceted Eyedropper Tool · CorelDRAW and Special Characters · The Easy Way to Create Calendars in CorelDRAW · The Wide World of Labels in CorelDRAW · Including Variable Data with Print Merge · Resaving, Resizing & Resampling Files in Corel PHOTO-PAINT · Creating Your Own Fonts in CorelDRAW · The Evils of Using JPEG Files · Speeding Up CorelDRAW 11 and Windows XP · Symbols and Imposition · The Easiest Way to Recreate Logos · A Few Guidelines to Follow · Square Corners Can Be Sticky -- Rounding Corners in CorelDRAW · Creating Complex Shapes Easily with CorelDRAW · Identifying the Mystery Font · Two Ways to Create a Split Front Design · Last Word in Font Management · Calibrating Your Printed Colors with a Color Chart · Graphics Computing in 2001 · Hottest R.A.V.E. In Town · Get the Red Out of Eyes · Secrets of Color Management · Dressing Up Your PDF Files · How Adobe Acrobat Can Make Life Simpler · Why You Want PDF in Your Workflow · Converting a Scanned Logo to Vector in CorelDRAW · Designing 360 Degrees · Customizing Your Interface in CorelDRAW 8.0 · Fitting Text to a Path · Creating Cool Graphs Without a Spreadsheet · From CorelDRAW to Macromedia Flash, A Simple Example · Getting Rid of That Darned White Box · Converting a Bitmap Logo to Vector in CorelDRAW · Finding Clipart with ROMCAT
Xara Xtreme Pro 5.0
Serif WebPlus X2
Xara Web Designer 5.0
Xara Xtreme Pro 4.1
Macromedia Flash MX 2004 Professional
Fuji FinePix 2800 Zoom Digital Camera
Procreate KnockOut 2
Hemera Photo Objects Volume I and II
Wildform SWfx
Macromedia Fontographer 4.1 and FontLab 4
Caligari iSpace v1.5
Xara X
Macromedia Fireworks 4
Web Site Design Made Easy
Alien Skin Eye Candy 4000
Swish 1.51
Macromedia Flash 5
Corel KPT 6
Dreamweaver Ultradev
1st Page 2000
Adobe Illustrator 9
Corel KnockOut v1.5
Xara 3D 4
Cool 3D 3
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
