Developing an efficient website in Flash MX

By: M Tabraiz Feham
Website: www.tabraiz.com

Blog: www.tabraizfeham.blogspot.com

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

Initially Flash was considered as a tool to support the websites with some eye-catching animation, flashy banners and intros. But now that the industry has realized the full potential of Flash, It has become a standard for developing highly professional, interactive and efficient websites. This article discusses some of main aspects, issues and techniques for developing an efficient and optimized website in Flash.

[if !supportEmptyParas] [endif]

Step 1

[if !supportEmptyParas] [endif]

• Know your audience.
• Plan your website thoroughly
• Decide about the website sections, pages and contents
• Decide about the dynamic content and the frequency of update
• Before you sit on Photoshop or any other graphics suit for the website template, it is always a good practice to roughly sketch the website on paper. Play with it and figure out a setting that fits in to your website’s requirements.
• Create the website template and review it.

[if !supportEmptyParas] [endif]

Step 2

[if !supportEmptyParas] [endif]

• Map the website template in Flash
• “Vectorize” the website as much as possible
• Vectorization is very important process for a website, for it to be bandwidth friendly and highly efficient. In vectorization the simpler parts of the website are created using simple flash graphics tools instead of using the sliced images. This brings a major difference in movie size, because an image of 30 Kb could be reduced down to 2 to 3 Kb if vectorized properly.

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !vml][endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

• Create a common set of reusable graphics in separate movie clips. Such as bullets, lines and other related graphics. Use the same movie clips wherever you need them in your movie. This technique reduces the size of the movie to a great extend, because flash renders that particular movie clip as a single entity of the movie library and rest are actually the instances of the same clip. For example, if you use a bullet of 1 Kb 30 times, without defining it as a “Movie Cilp” or “Graphic”, it would consume 30 kb in movie. On the contrary if you make a “Movie Cilp” or “Graphics” of the bullet it would just consume 1 kb regardless of how many times it is used in the movie.

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

Step 3

[if !supportEmptyParas] [endif]

[if !supportLists]a) [endif]Website Architecture

• Design the website to load contents / pages dynamically: The download speed of a Flash website is very crucial. A very hi-fi website with attractive interface & content wouldn't do any good if its download speed is not good, and users shut the browser window as it remains stuck on "loading...”
  So firstly it is very important to divide the different sections of your website on multiple movies, so that the initial content of the website loads faster and other content is loaded as the pages are requested. Lets take an example of how you can achieve this.
• In this example we have a main movie, this movie loads firstly and contains the initial content & links of the website. The pages are loaded on the fly as they are requested. This type of architecture is achieved using simple LoadMovie function. Follow the description of the snapshots below to get some idea about the technique.

[if !supportEmptyParas] [endif]

[if !vml][endif]

This snapshot shows two main sections of the website. The bottom left area is where the other pages / content is loaded residing in external movies.

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !vml][endif]This snapshot shows the initial interface of the website up to 600 frames, then we have frames consequently where the pages are loaded, using the gotoAndPlay, Stop & LoadMovie functions.

[if !supportLineBreakNewLine]
[endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !vml][endif]The snapshot shows how the pages are loaded based on condition. Actually whenever you click on a link, a variable's value is set and then gotoAndPlay command is executed to take the movie to the frame where the variable’s value is evaluated and respective movie is loaded.

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportLists]b) [endif]Runtime Flash library objects sharing

• Flash MX allows us to share the objects across multiple movies at run time. So if you are using a single object or movie clip multiple times in the website, make it a shared object, so once it gets downloaded other movies that are using the same object would not have to download it again. Here is how you can define a movie clip or object a "RunTime Shared Object".

[if !vml][endif]

Right click on any object in the library panel. Select “Linkage Properties” and check on “Export for runtime sharing”

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportEmptyParas] [endif]

[if !supportLists]c) [endif]Put a light "loading" animation at the initialization of the website and in the subsequent movies.

[if !supportEmptyParas] [endif]

Step 4

[if !supportEmptyParas] [endif]

• Keep the frequently updating content in a text or XML file and load it dynamically so that you can update the contents of the website without re-publishing the swf file. Use the LoadVars() function to load data from text files in a text box or dynamic field. On the other hand for more efficient handling of data use the XML object.
  
  [if !supportLineBreakNewLine]
  [endif]

Step 5

[if !supportEmptyParas] [endif]

• While you export the final version of your website make sure that you don't export it to the latest format if you have not utilized the features of Flash MX, or Flash MX 2004. Try to export it to the previous versions so that you reach more audience without having to prompt them to download latest version of flash player.
• Upload & test your website in different browsers on different resolutions. Colors can vary a lot on different monitors so do check the colors.
• Embed your main movie in a web page and add Meta tags and keyword related to your website. These Meta tags would play a vital role in listing your website on search engines.
• Submit your website to search engines