mysql_error
Chicago Creative Design - Web Design, Internet Marketing Chicago
Expand All Menu NodesCollapse all Menu Nodes

Effective Use of Flash Animation

Trade Links With An SEO Guru

Add this page to Favorites

Flash animation offers designers unparalelled opportunities for motion graphics to capture users' imagination. The last few version updates of the program have even added data source reading capabilities, interactive forms, and server interactions. The high quality animations coupled with compact file size make Flash a leader in web delivered motion graphics.

Why Use Flash?

Imagine you own a small business that has primarily served the consumer market. One day, you receive a call from a large company seeking bids for a high-volume contract. You set the appointment and request the meeting room have a computer with an internet connection. You tell your friends and your spouse, who is quite skeptical you will be able to pull off a proper presentation. You show up for your appointment, suavely open your website on the computer, and pull up a Flash presentation outlining, in smoothly flowing pictures and captions, your product and services. The next day, you get a call telling you that you won the contract, and that for a small business, you made one of the most professional presentations they saw. Your spouse takes you to dinner, as promised, where he/she eats crow.

The story above is somewhat fanciful, but not far from the truth. Not only would such a Flash based presentation serve as a constantly available presentation tool for you, but visitors to your website will be able to gain an appreciation of your offerings before they even pick up the phone to call you. Well done Flash incorporated into your website will tell people not only about your offerings, but that your website was professionally done, and that you are serious in your business.

Trade Links With Us! It's free, automatic, and instant!

The Anti-Flash Movement

During one consultation, the potential client said she was not interested in Flash and all that, "it only gets in the way of search engine placement". It's quite likely that we all have, at some point, come across a site that seems to be one large Flash animation. When we click the links or buttons, objects fly around and whirl and come back to a point where we have the same picture again, but the information in the center window of the animation is different. While aesthetically it is not entirely unpleasant, it is true that search engines cannot read any textual or informational content embedded in a Flash animation. A website like the one just described, may appear to be a blank page to our friend the Googlebot. To use Flash effectively while maintaining value for your site, one must intermingle the Flash content with a high amount of old-fashioned, static HTML, or textual content on the page. Another alternative is to place your Flash animation on a secondary page, and create links to it that say someting like "View Slideshow". It is also good practice to offer an alternative version that may be a series of still photos for users who do not have the Flash plug-in, or may be using a dial-up connection when your Flash file is large in KB size. The Flash plug-in has been shipped with popular web browsers since 1999, and the number of high speed connections has increased substantially in the last few years, but there are those using older computers and software, and still dialing-up to connect. This website, for example, uses a combination of Flash menus and textual links on every page to accomodate all users. Use Flash in place of static logos and banners. They can be much more eye-catching and captivating than the static graphics on your competitors' pages.

Alway Use a Pre-Loader

A wonderful thing about Flash is that you can create some fairly complex or visually stunning animations in a fairly compact file size. A very nice Flash animation might come out to be approximately 45-60kb in file size. To get something in the animated .gif format that would even begin to compare would likely require a file that is 300kb in size or more. Even so, as a page is loading and rendering, even a fairly small Flash file might have a sort of "Jerky" playback. To circumvent this, and to ensure that an animation always plays back in the smooth way that I intended it to be seen, I always use a preloader, even when the file size is a puny 10kb or so. This does not neccessarily mean some spinning clock or count-down bar people have to watch for 5-10 seconds while the movie loads. I always break my Flash files into two scenes. The first scene is two frames, and uses either the same background as the web page it will be on, or the same as the main movie. It is two frames long. The second frame is made to be a Key Frame so I can add Action Script to it. The Action Script is:

if (getBytesloaded()==getBytestotal()){
	gotoAndplay("Scene 2",1);
}
else {
	gotoAndplay("Scene 1",1);
}

This code is assuming that the main content of the Flash animation is contained in Scene 2 and begins in frame one. By doing this, the main content of the animation does not begin to play until all of it is loaded in the browser, and that playback is smooth. Combined with a small file size, the web user is none the wiser. Of course, if you feel that your project requires something that may take more than a few seconds to load, it is advisable to provide some sort of alternate content to engage the user while they wait for the smooth playback of the main animation. Hopefully, you can think of something more imaginative than a standard countdown that just begs people to click on the "Skip Intro" link.

That Nasty MSIE Highlight and "Click to Activate"

Many of you may have noticed in recent weeks or months, that many Flash animations have begun to show a highlight and a "Click to Activate" tool tip in MSIE. If you prefer another browser and have not seen this, try taking a look at some Flash pages with MSIE. This is yet another reason why it is important to test your pages in numerous browsers. For a designer, this brings the disappointing news that your simple, non-clickable banners may appear to be clickable to people when they really aren't meant to be, or that your beautiful, painstakingly crafted mouseover effect won't work without a click, and users may be getting frustrated finding that they have to double-click to make a Flash link work. This is due to a change that MicroSoft made in it's implementation of ActiveX in MSIE with a recent update. There is a way to fix this issue, and keep your Flash playing smoothly in the latest version of MSIE. The following paragraphs assume knowledge in HTML, JavaScript, and experience in adding Flash animations to web pages.

The first way, and probably the quickest if you are going back through an entire website of numerous pages and many Flash files, uses a single external JavaScript file embedded in all pages where Flash animations appear. To begin, open a blank file in Notepad or a similar text editor. Type in the following code:

theObjects = document.getElementsByTagName("object"); 
for (var i = 0; i < theObjects.length; i++) { 
theObjects[i].outerHTML = theObjects[i].outerHTML; 
}
Save the file as something like "ieupdate.js". Then add the following line of code to all of your HTML documents just before the </body> tag:
<script type="text/javascript" src="ieupdate.js"></script>
Upload the .js file and modified HTML files to your web server. Open the web pages in MSIE, and you should see that the highlight and tool tip no longer appear. The script above, basically, tells MSIE that the ActiveX controls are okay, and can be activated. You may also notice a slight blink around your animation after the page loads and the animation is "activated" in IE (the same thing that would happen if a user clicked to activate). Probably not the smoothest, but as mentioned earlier, the fastest way to make the neccessary change over a large number of HTML pages.

The next method is better to do as you are creating Flash files and inserting them into your pages. I do this with all Flash files I create anymore. If you use Flash, or any one of many other animation creation programs, to create a file called myBanner.swf, you will be given the following HTML code to use:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
 width="468" height="60">
  <param name="movie" value="myBanner.swf">
  <param name="quality" value="high">
  <embed src="myBanner.swf" quality="high"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  type="application/x-shockwave-flash" width="468" height="60"></embed>
</object>

Copy an paste this code, first, into the HTML document where it will reside, then enclose it with the <noscript></noscript> tag. Next, copy the original code into a blank file. Save it as something like myBanner.js. Next, place a backslash in front of all quotation marks. Your code should look something like the following (one line shown only for space considerations):
	<param name=\"movie\" value=\"myBanner.swf\">
You may be able to accomplish this using a search/replace function. At the beginning of every line, add document.writeLn('
	document.writeLn('<param name=\"movie\" value=\"myBanner.swf\">
The next step is to add \n'); at the end of every line.
	document.writeLn('<param name=\"movie\" value=\"myBanner.swf\">\n');
Be very careful and aware of any possible text wrapping, and where the lines really end. When you are working with JavaScript or any other programming language, it is best to disable text wrap in your editor. Save the file myBanner.js. The next, and final, step, is to place the following line of code just before the <noscript> tag in your HTML document:
<script type="text/javascript" src="myBanner.js"></script>
The whole thing will look like:
<script type="text/javascript" src="myBanner.js"></script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
 width="468" height="60">
  <param name="movie" value="myBanner.swf">
  <param name="quality" value="high">
  <embed src="myBanner.swf" quality="high"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  type="application/x-shockwave-flash" width="468" height="60"></embed>
</object>
</noscript>
Now view the page in your browser. You should see your Flash animation in the area where you placed it, and no highlight and no tool tip when you place your mouse over it. In JavaScript programming, like most other programming languages, there are several ways to do something, and there are other options available. Highly advanced programmers familiar with JavaScript and OOP can create an object which is the Flash file, and define properties of the Flash file through methods and properties. This is beyond the scope of this article, but those interested in learning more, may visit MSDN for more information.

Animate Your Work

As one may gather from this article, effictively using Flash animation is somewhat more involved than learning a simple WYSIWYG program and cutting and pasting, "without having to know a single line of code". With good judgement and thorough, conscientious skill development, the results can be well worth it.





Related Links

MSDN ActiveX Info
Internet Marketing Links
Trade Links With Us! It's free, automatic, and instant!
Have a website? Earn money with LinkShare merchants.

Articles Home

Chicago Creative Design specializes in small business website design, small business website development, and small business website hosting. Our websites include built-in internet marketing features and custom CMS solutions. Our rates are affordable. Improve the effectiveness of your current advertising with our print and web design related services, or establish an effective, new presence online and in print. Explore our site to learn more about our services and achievements or Contact us today. Initial consultations are absolutely free.

Recomended Web Design Services Chicago    Angie's List Recommended