Web Class: Flash


 

Flash-- it's as exciting as its name. It makes the Web move, delivers oohs and ahhs in tiny file sizes, and it's easy to learn. Everyone who's anyone is hopping on the Flash wagon, and the sooner you join the better. Just remember that not everyone surfing the Web is looking for glamor and excitement and if you want to get your information across, provide a simple, non-glitzy site as well. It never hurts to have a choice.

This is not a Flash tutorial. Rather, it's an introduction to the world of Flash as well as instructions for including a Flash animation on your website. Read on to find out where to get a free 30-day trial version of Flash 5 and what to do with it once you have it.

Some Benefits of Flash

Flash uses its own player as a plug-in to your browser to display your movie. This means that anyone with a Flash plug-in will be able to see your movie. The latest browsers all come with the player already installed.

Flash movies use vector graphics instead of bitmaps to decrease the file size of your movies. What's the difference? Instead of including information for each pixel in a bitmap, vector graphics include instructions for how to draw the image. So if you have a 50 x 50 pixel square, the vector version would simply say, "draw a square 50 x 50," while the bitmap file would include all 250 pixels of the image. That requires a lot more information, thus a larger file. A bonus feature of vector graphics is that as they are mere instructions for a shape and size, they can be increased in size without distorting your image. Blow up a bitmap image, and you still have the same number of pixels-- which results in a-- not surprising-- pixelated image.

Flash is streamable, which means you don't have to wait for the whole download to start seeing the movie.

Flash includes its own drawing tools. Though they can be a bit tricky to master, these tools are pretty smart. Select the drawing tool, select smooth lines, and your squiggly hand-drawn shape will automatically be smoothed by Flash. You can even edit images that have been imported from other programs.

Not only is Flash fun, but it can be useful too. I created a recipe page in Flash that relies on Flash's button control to navigate through my recipes. Done in plain HTML, each click of a button would take you to a new version of the page which would have to be redrawn each time. In Flash, you simply jump along the timeline, but remain on the same page. Here is my example.

My recipe page is also a great example of something you shouldn't do. Never import text as an image into Flash from Photoshop. I had some images already created of my recipe cards and menus. They look great in Photoshop, but when imported into Flash, they are compressed and look pretty swirly. Notice that the animals look really clear-- they are part of a font that I used within Flash. The text that pops up on the left menus are imported images-- yuck. This takes us to the next feature in Flash.

You have a lot of control over text in Flash. Once text is created, you can turn it into a button, or make it an editable object, or even tween the letters into other shapes.

Get Flashy for Free

Macromedia offers a 30-day trial version of Flash 5 for free. This is a perfect opportunity to learn the program and find out if it is something you'd like to get more involved with. Visit the Trial Download page and try for yourself. The download includes a great tutorial to get you started and the Flash support page offers articles and tech tips.

Once you feel comfortable with the tools and the Flash environment, frequent such sites as FlashZone or Flash Central for tips, articles, and galleries of the latest Flash sites.

Flash Code for Your Site

Unless you happen to have an existing Flash file, you will most likely not need to know the exact code to embed the movie in your website. Flash will do all this and more for you. But you should be familiar with the tags that are involved so you know what you are putting on your site.

Here is the code Flash created for my recipe site with notes explaining why the tags are used and whether you need them:

  • <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=movie1 WIDTH=100% HEIGHT=100%>
    The OBJECT tags should always come first as they are recognized by Internet Explorer, but ignored by Netscape. CLASSID tells Internet Explorer to load the current Active-X plug-in if it is not installed. WIDTH and HEIGHT tell the browser the size of the movie. These sizes can be percentages, or actual pixels.

  • <PARAM NAME=movie VALUE="movie1.swf">
    This parameter tells the browser the name of the movie file that will be used.

  • <PARAM NAME=loop VALUE=false>
    You have the option to loop your movie if you wish. As my Flash movie isn't really a movie-- it doesn't animate at all-- I don't need it to loop.

  • <PARAM NAME=quality VALUE=autohigh>
    You can set the quality of your movie to allow the browser to use antialiasing to smooth things out. If you choose autohigh, the browser can try to antialias as long as the performance is not slowed down.

  • <PARAM NAME=bgcolor VALUE=#660000>
    This sets the background of my movie just as the BGCOLOR tag does in the BODY tag.

  • <EMBED src="movie1.swf" loop=false quality=autohigh bgcolor=#660000 WIDTH=100% HEIGHT=100% TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
    The embed tag is used for Navigator-compatible browsers. Just as the above PARAM tag called the movie tag, so does EMBED's SRC command. Also included in this tag are the width and height, the loop command, the background color and the quality. PLUGINSPAGE tells the browser where to find the Flash player if the user does not have it.

  • </OBJECT>
    The end OBJECT tag must come after the EMBED tag.

I was able to get this code just by choosing the Publish command in the File menu. Flash creates all these tags for you.


Home Information Page HTML Lessons Java Script Lessons