First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: M Tabraiz Feham | Website: http://www.tabraiz.com
Developing Efficient & Optimized Website in Flash - By M Tabraiz Feham

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
» Level Intermediate

Added: 2004-12-21
Rating: 4 Votes: 4
(10 being the highest)
» Author
This is Tabraiz, A London Metropolitan University Graduate (External degree programe conducted at College of Digital Sciences (CDS Karachi).Currently working as Web Designer / Developer in Gettech Pakistan -http://gettech.com.pk. Research Interests : e Governance, Data Warehouse, Data Mining, Search Bots / Spiders
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.