March 18, 2006

Cyberspace is the quintessential medium for mystery, conjectures and introspection wrapped up in blogs, conspiracy theories, art and graphics. Creating a lasting impression in the gargantuan cyberspace is indeed a daunting task. Unfortuna- tely, most Flash designers fail to consider the two most important aspects of an interactive experience: content and usability.

Ignoring these aspects, in order to fit into the trends of designing, results in a cornucopia of websites caught at the fork in the road. The nearest road sign reads, “This way to aesthetic trendiness” and the other one says: “That way to a usable interface.” Thus, Flash is only part of a toolkit and not the only tool required to build a successful website.

Vampire creative Flash designs are appropriate for music, film, artist-portfolio, design studio, ad agency, edutainment, and infotainment websites. All other websites require a much subtle design approach, which entails an appropriate balance between content, usability and Flash design achieved by a Flash-HTML hybrid structure. Depending upon the nature and scope of the business, the Flash content can range from 20 per cent to 50 per cent in the hybrid structure.

Some tips and tricks that designers need to consider while designing Flash content are as follows:

— Create Flash movies compatible with older versions of the Flash Player;

— Design simple and clutter-free navigational systems to help viewers easily understand the purpose and structure of the site;

— Decrease the size of the Flash movie to almost 60 per cent of the original size and then scale up its dimensions at the time it is embedded in the web-page. Keeping a library of pixel fonts available, so that the movie text remains sharp and readable when scaled, is a wise approach;

— Try to keep objects made up of lots of vectors on separate layers, since this is the professional way of doing things;

— Place animated objects on different layers than the still ones. This ensures a smoother playback and a smaller file size;

— Label all the layers in a layer-extensive movie to avoid confusion;

— Switch to “Outlines Mode” since it increases the speed of Flash when working on complex animations;

— Ensure that the design of the Flash content matches with the HTML content for a uniform appearance (in terms of fonts, colour schemes, illustrations or other design elements used) throughout the website;

— Provide a printable version of the Flash content. This is quite necessary, as most surfers like to print company and/or product information, forms, educational and instructional material, articles, presentations, and receipts for online purchases;

— Breaking fonts apart is something one should not do, as it increases the size of the swf file;

— Using 30 to 35 per cent JPG compression and a Mono sound setting at 28kbps, export options for a raster intensive Flash animation and ensure a smaller file size;

— Test for usability involving unbiased users to help discover problems that the designer never dreamt existed.

Following are nonconformist yet practical ideas for designing next generation Flash content:

Interface and navigation

New-age interfaces consisting of alien, robotic and industrial age objects (mostly screens) are quite in vogue these days. Some suggestions for designing avant-garde flash interfaces are:

— Metallic serpents forming the border of the interface that have glowing skins and sparkling eyes;

— An hourglass or a fancy bottle with a dancing character appearing on mouse over. The dancing character can be animated in Poser (by using different dance poses at regular intervals), which can then be imported to Flash;

— Drop shadowed logos, Aztec symbols or zodiac signs masked with some animated textures;

— The interior of a spaceship’s control room that has information displayed on its main screen when links are pressed;

— Exquisite three-dimensional shapes created in Photoshop or Photo Impact (with extrude, bevel and drop shadow options) can be used as interfaces in Flash. In addition, 3D objects such as photo frames, mirrors, windshields, mobile screens and clocks can really work wonders;

— Metallic or marble textured hands lifting, carrying or holding the interface screen;

— Human or android heads connected to a space-age monitor. Statues of Greek gods can also be used for this purpose;

— A human cornea displaying information when the eye zooms-in on a mouse-click;

— Posing silhouettes of different characters that change on mouse over. These can be rendered in Poser and exported as swf;

— Different parts of an image can be designed to scatter in different directions on the interface on mouse over.

Animated loops for preloaders

Remember that users are more likely to wait for a Flash animation to download when they are provided with a status indicator (preloader) that shows how long the loading sequence will take to complete. Therefore, it is essential to create interesting and meaningful preloaders.

For instance, animating three concentric circles can really work well for preloaders. The three circles can be tweened to increase in size respectively and then return to their original sizes. In addition, two vertical and three horizontal lines, forming a grid, can be animated using motion tween.

One option can be to animate the horizontal lines in such a way that they keep moving upwards one after the other, while the two vertical lines exchange places with each other at regular intervals.

The motion tween option can also be used to change the RGB percentages of a raster image (converted to a graphic) after every five keyframes for 25 keyframes or more. This colourchanging effect also looks scintillating in a masthead. Remember, the RGB values of the first and the last keyframes should be the same to generate a loop-effect.

Moreover, a vector-based shape (having a gradient that gives a 3-D look) can be animated to change colours or gradients after regular intervals with the help of shape tweening. For an animated loop, the first and the last keyframes should have the same colour or gradient fill.

Background

Different vector-based shapes such as rectangles, squares or triangles with different gradient colours can be combined to form a rectangular background. The key is to use the gradient fills which gel together. Do not forget to decrease the opacity of the background (converted to a movie or graphic) so that it does not overpower the text or mitigate the effect of other design elements.

The advantage of using gradients over solid colours is that when gradients are shape tweened at regular keyframes, they create a rather hypnotic effect. Though simple, this effect still looks fresh, unconventional and arty.

Raster images can also be merged in a specific portion of the vector background for a more out-of-the-box look. Seamless merging can be achieved by changing the opacity as well as the RGB values of the raster image (converted to graphic) and the background.

This largely depends upon the skills of the Flash designer. However, images seamlessly merged over a black background blend well with dark coloured gradients used in the Flash background. Merging surreal or abstract illustrations with the vector background can produce some exquisite results.

Vector images can also be used as backgrounds. An easy yet professional way to do so is to use the pencil tool to trace over the different parts of the imported raster. Then with the help of the bucket-fill tool, different colours or gradients can be dropped over the traced parts of the image as desired.

Remember to use a different layer for the imported image than the one used for tracing work. Furthermore, use the “close small gaps” option for the bucket-fill tool and the “curved line” option for the pencil tool.

Those proficient in 3D digital designs can use their rendered images to develop a digital collage in Photoshop and then use it as a background in Flash. In addition, a 3D background illustration based on the Star Gate style looks remarkable as a Flash interface.

The designer can also develop some vector-based add-ons or animations and place them over the illustration. The add-ons can take the shape of glowing lights, floating vector objects and animated grids.

Tracing over the symbols, shapes or objects in the 3D illustration (background) for masking with animated movies is something worth trying as well. This is, in fact, one of the latest trends in Flash design.

Finally, always remember that the Flash content should add value. It should support the central message of the website and accentuate the content. All designers need to answer the basic question: “Who is the target audience?” To obtain an accurate picture, this question needs to be answered in terms of geography, demography and psychography.

The writer zanearts@ excite.com is an information architect and a trainer

Please Visit our Sponsor (Ads open in separate window)