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
Tutorials Home
Tutorials » Articles
Developing Efficient & Optimized Website in Flash
