.
Flash can be a great asset to any project when used correctly and in the right places. Amazing super tight full Flash microsites inspire us as designers and can make a product stand out amongst its competitors.

Flash is an amazing tool for visually revolutionizing the way a company or product is represented on the Internet, or as an application to revolutionize the way a company does business. As we all know (or hopefully know), sometimes full Flash sites are not always the best option for all clients, content, marketing goals, audiences or situations.

HTML has been around since the beginning and it is still the easiest most accessible format for publishing content on the Web.

This is especially true when dealing with the core informational sites of most small or medium and globally recognized companies looking to sell products, display lots of information and reach the largest possible audiences thru search engines.

Even though it is every designer/developer’s goal to develop the next amazing full Flash, FWA award winning site, the fact still remains that most sites on the internet are and should be HTML based (not 100% Flash) unless otherwise requested by the client.

A few reasons why Flash/HTML hybrid sites are often the best client solutions:

1. Search engine optimized content which is indexed and accessible to all of the major portals and search engines (Yahoo, MSN, Google, etc.)

2. Ability to deep link from a search engine results page to specific content within a site (True deep linked content, not just a sectional page or homepage from a bookmark).

3. HTML sites are more easily accessible to visitors with disabilities (blind people using screen readers, etc.) and the growing trend of properly structured XHTML developed sites open up information to those surfing from cell phones or PDAs.

4. Easily print pages

5. Full use of all of the core browser functionality (Back/Forward/Stop/History/Print/Bookmark)

6. Easy direct linking to deep pages and the ability to easily pull up two pages side by side (ex. two similar products you want to compare on cnet.com) without wading thru all sorts of tiresome transitions and button clicking.

7. The addition of Flash allows you to focus Flash usage for the things it is really good for (wow factor animations, video presentations, robust applications and microsites) while using HTML as a way of providing the information to the visitor on a variety of platforms.

I know some of you are thinking about how some of these things can be hacked or loosely worked around in Flash (printing, back button, bookmarking).

But the fact still remains that the workarounds are not as fully functional as the average HTML centric methods and take a lot more time, organization, planning and thought to accomplish fully in Flash. You’ve got to put a lot of time, effort and thought and be at the top of your game to even come close.

There is a reason why no one to date has developed a full Flash website which accommodates all of the above comments into a site that is functionally superior to a full HTML or hybrid site in accessibility, searchability and functionality for less time and money for a client.

It is not possible, and if it were possible, not every developer/company could deliver such a Flash site easily to the client.

I feel that with the right projects, each medium should be used to its fullest extent on these core sites by combining the best that the two technologies have to offer.

HTML is capable of all of the aforementioned benefits and Flash is an amazing presentation tool. Use the best tool for the job and the client situation (not forcing Flash onto a client simply for the ability to use sounds and motion).

When the two are mixed together there is the opportunity to create highly engaging and accessible sites, which not only allow the client maximum exposure but also maximum impact to their target audience.

With each project you must sit down with the client and assess what is really the best option for their company and the products you will be designing a website around. In the end we must keep the clients goals, desires and expectations as the primary force behind any site.

If a client approaches you wanting a full Flash site with all the bells and whistles and they feel that is the best option for their company, then buckle yourself in and have a fun time.

Smaller clients with search engines, accessibility and content in mind should perceive the hybrid route is the best solution when done correctly. YES, when done correctly.

A poorly engineered hybrid site which disregards certain key points can be just as detrimental to a client as a misguided and ill planned full Flash site can be.

The following mini-tutorial shouldn't be approached as the de-facto means of building a hybrid site.

I will give you tips, hints, snippets of code, a collection of demos and links to other code resources where you can fine tune your knowledge and code library above and beyond this brief overview.

As you know in our line of work the best ways to learn are to tinker and play with the basics to find the best solution for you and a project. This tutorial should be approached simply as an outline for some basic techniques, which you might consider using, and places you should start looking for the more technical items you will need.

Finally, just because you’ve decided to build a hybrid site doesn’t mean your life will be easier than building out a full Flash site. Depending upon the style of hybrid site, you could be in for a walk in the park or a lot of work.

Flash Detection & Implementation Techniques

I have found that most sites with lots of content follow a similar two or three columned layout structure. With hybrid sites, the standard elements usually include a Flash header, Flash sub-navigation on the left with content on the right.

The contents are often enhanced with images animated in small Flash swfs.

Even if this is not the layout you're working with, most hybrid sites (whether we are dealing with a framed site or not) are simple enough in structure to develop swappable static/Flash content and navigation without tons of extra work.

With a little added forethought you can easily have multiple versions of a site.

I've always felt it’s silly to tell a client requesting a hybrid site that a visitor MUST have Flash.

Keep in mind that a company is paying you to add some emotion to their site so it stands out compared to competitors’ sites. This client is also selling information before emotion. If their end-user does not meet the Flash Requirements for the site, it’s more important to show them a fully functional site with alternative content than to show them a semi-functional site.

Simple detection and embed

The first thing to take into consideration when building a hybrid site is ensuring that the user has the most seamless experience possible.

Depending upon your needs a part of delivering that experience is detecting Flash version (or no Flash at all), Platform and Browser Type.

Searching for Flash, OS and Browser detection on Google.com or a resource site like Ultrashock.com will yield numerous results for scripts and methods of detection.

Make sure to find and use the method that works best for you, the project, and your skill-level.

Arguably the best all-around Flash detection and embed script around is the Flash0bject: Javascript Flash detection and embed script by Geoff Stearns and is located at http://blog.deconcept.com/flash0bject/.

For straight up Flash detection, embedding and swapping of images and text with alternate flash content, it is by far the easiest to use and implement. By default the html version of a site exists on the page to be indexed by search engines.

Flash0bject will do the detection for each movie, leaving the html content in place if you do not have flash so that Google will pick up the html content. In addition you can also grab query parameters from the url string using the Flash0bject script and pass them into the flash movie.

The only drawback that I have found with this method is that it lacks the ability to detect things like OS or Browser Type on an individual basis in order to split which content gets delivered to a visitor.

In some situations developers need different levels of detection based upon a client configuration (For Example: LiveConnect Integration).

But if you simply want to replace HTML content with flash content across all Browsers and OS configurations the same then this is your solution.

Comparable to the Flash0bject method is the Macromedia Flash Player Detection Kit located at http://www.macromedia.com/software/flashplayer/download/detection_kit/.

It works about the same as Flash0bject although it is slightly more difficult to understand and implement especially for someone just getting into detection and replacement.

Although no longer supported or updated an older method is Colin Moock’s – MOOCK FPI (Flash Player Inspector) available at http://www.moock.org/webdesign/Flash/detection/moockfpi/.

The script is well commented and with a few minor modifications you can use it to swap multiple areas on the page with Flash/HTML assets based upon Flash Player version detected.

For a standard hybrid site, OS & browser configuration may not be important, but when dealing with framed sites later on, it is beneficial to have such information available.

For those who find themselves in situations where Browser and OS need to be detected there is the WebReference.com browser sniffer located at http://webreference.com/tools/browser/javascript.html.

You will have to view the source on the page to grab the script. I have used it on various projects using frames or when attempting Flash to Flash communication using LiveConnect which only worked on IE and certain versions of Netscape.

In all other situations using the Flash0bject method is recommended.

** An example is located in the hybrid_demo.zip file.

SUPPORTING LINKS:

Flash0bject: Javascript Flash detection and embed script by Geoff Stearns http://blog.deconcept.com/flash0bject/

Macromedia Flash Player Detection Kit

http://www.macromedia.com/software/flashplayer/download/detection_kit/

Colin Moock’s – MOOCK FPI

http://www.moock.org/webdesign/flash/detection/moockfpi/

The Ultimate Javascript sniffer Version 3.03

http://www.mozilla.org/docs/web-developer/sniffer/browser_type.HTML

Non-framed Techniques

Non-framed hybrid sites offer many opportunities for designers to spice up content and navigation without sacrificing accessibility or some of the previously mentioned benefits of having an HTML site.

This is especially true when combined with the Flash detection techniques (discussed earlier), which ensures that no matter what the end user's client configuration that they can view the site without any problems.

Dishing out either a Flash or HTML navigation depending on the client's configuration, takes very little work once you have standardized on a detection script and implementation method.

It just means developing the Flash navigation you want and also cutting up an HTML version for the include file (mentioned earlier). In the long run having both only takes a few minutes longer in the earlier stages of site development and ensures that you have the client's best interest in mind.

It is important that you as the designer/builder are covering all of your bases as far as accessibility is concerned.

Flash navigation and imagery in this manner adds to the overall power of a site without that voice in the back of your head saying "well what about those poor souls who haven't ever upgraded their old browsers or are still running older versions of AOL?"

So now that you have the detection script in place and you are displaying Flash or HTML navigation we are done right? Possibly :).

Skipping Repetitive Animations

Flash allows you to leverage some really fun animation to add to the overall power of a site.

What happens when the animations get annoying to the user as each page is refreshed? Do we pull out some of the animations and make the Flash navigation just a cool looking set of rollovers?

Do we develop two versions of the same navigation for the homepage and the inner pages all so that the user doesn’t get tired of the repeated animation?

Using the Locks of Love site as an example, the homepage has some very fun animations of their logo and the navigation dropping in from the top of the browser.

Unfortunately the same animations that make Flash such a great asset on any hybrid site can quickly get annoying when the user sees the same animation over and over again.

To combat this, a simple technique is to pass a single variable into the Flash movie thru the Flash embed code in the HTML.

For example:

<param name="movie" value="locksoflove_header.swf?skip=1">

* Don’t forget to do the same in the Embed tags

Simply pick a variable name, give it a value and add that after a question mark in both the 0bject and embed tags in the HTML. This passes that variable and its value directly into the root of the Flash movie.

From there all you need is a switch-case or simple If/Else statement inside of Flash somewhere near the front of your movie to set up multiple animation options depending on the value you passed in.

if (skip == '1') {

gotoAndPlay("skipanimation ");

} else if (skip == '2') {

// create as many of these as you want to expand your options

gotoAndPlay("animation1");

} else {

gotoAndPlay("animation1");

}

This is a simple example of a method you can use to build one Flash navigation or movie and have it animate differently on various pages.

Since the Flash navigation will be cached from its first download on the homepage, the selection of which animation to play or skip can be instantaneous depending upon the structure of the FLA and where the if/else statement is.

This allows you to use the same Flash navigation on all pages but allow yourself the ability to play or not play animations or create page specific animations all with one file.

Highlighting & Displaying Specific Content

In the previous example, the animation of a navigation or movie is controlled to reduce a repetitive or annoying motion.

One can easily use this same technique to highlight a specific navigation button, load specific content or display certain items in a movie depending upon which section the page containing the navigation is categorized and much more.

This method was utilized in the Oneill website.

In that particular site the circular navigation on the top right is one single SWF re-used throughout the entire site. Working in conjunction with dynamically generated variables for sport, section, sex, and location passed into the flash embed code, one re-usable SWF is able to highlight section specific navigation buttons based upon it’s location in the site.

For example the only difference in the top right navigation on the following two pages are the sport and sectional variables passed into the SWF. http://www.oneill.com/mens-surf-clothing.php vs http://www.oneill.com/mens-snow-gear.php.

For Example:

<param name="movie" value="locksoflove_header.swf?section=5">

The above embed code could very easily be dynamically generated or hard coded on all HTML pages within a certain section of a site (for example the products section) and coupled with a switch-case, if/else statement or other methods of scripting in flash to highlight, load or animate content specific to a section using one main Flash navigation movie.

For Example:

this["nav"+section].gotoAndPlay("on");

The script above uses the section=5 variable to have a movieclip named “nav5” jump to a frame label inside of it called “on”. Make sure to prepare the FLA by architecting navigation Movieclips with logical instance names (nav1, nav2, nav3, etc…) and the same frame labels on the inside of each clip showing “on” or rollover states.

On the inside of the FLA these Movieclips are triggered with transparent buttons resting above the Movieclips.

Further Possibilities:

loadMovie("animation"+section+".swf", "sectionclip");

The above script takes the sectional variable and loads a second SWF into an empty movieclip allowing you to keep different animations or loops outside of the main movie.

Obviously the code and concept behind my examples are very simple and should be tweaked, modified and expanded upon depending upon your favorite way of organizing the navigation and coding.

The idea is to show how a simple variable (or several variables) passed thru the embed code can trigger complex functions, frame labels, movieclips, content, animations or data in the navigation or movie.

Possibly the easiest way would be to simply set up as many frame labels as you have sections (section1, section2, section3, etc.).

Create all of the buttons and their links and then just use a switch-case or simple If/Else statement to jump to the correct section depending upon what section you passed in thru the embed code.

An example of this concept in action is the O'neill website subnav which changes depending upon the selected sport. http://www.oneill.com/mens-surf-gear.phphttp://www.oneill.com/mens-snow-gear.php (displayed in the top left). vs

Depending upon your skill level you could easily take this simple technique and combine it with dynamically built buttons created from information pulled from an XML file or a database. The possibilities are endless.

Supporting Links:

Different approaches to setting variables in a Flash movie:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14253#querystring

Framed Techniques

Framed sites, when done correctly offer a developer the opportunity for a seamless Flash and HTML experience.

Pages within frames are still fully indexed and accessible through a search engine (when built correctly) unlike a full Flash site where a user is forced to start at the beginning and navigate to a section.

Using frames opens up the opportunity for a persistent Flash (or HTML) navigation, which never refreshes allowing more interesting motion, transitions and emotional experiences.

The introduction of LiveConnect (using JavaScript to have two Flash movies talk to one another) further creates the illusion of a full Flash site with the benefits of an HTML site.

On the surface this is an incredible opportunity, but be warned that it takes more work and forethought to be implemented correctly and may create more headaches than it is worth.

I could dedicate an entire book chapter to the subject of flash & framed site techniques.

Since it is such an extensive topic I will only be able to touch on some of the more important points and provide links to the more technical items where you can do your own research.

Framed SEO Techniques

The biggest factor when making a framed site accessible to search engines is taking advantage of the NOFRAMES tag. At the conclusion of a project, place links to all of the pages in the site on the main index page where the frameset is established.

This allows the search engines to continue deeper into the site rather than stopping at the frames.

Search engines view and rate the contents of this page so it is best to use some of the content from the inner homepage along with any appropriate metatags and keywords.

Even though none of the visitors will see this content, the search engines see it and ranks the page accordingly before continuing on to the interior pages through the links on the page.

Example:

<noframes>

<body>

<p>General description about the website goes here</p>

<p><a xhref="about-us.htm">About Us</a><br>

<a xhref="products-services.htm">Products and Services</a><br>

<a xhref="help.htm">Help</a></p>

</body>

</noframes>

Framed Printing Techniques

The print button on most browsers cannot print frames as easily as you could print a single page hybrid site. To target a specific page in a frameset you would have to click the page or its scrollbar to focus it and then push the print button.

It is unrealistic to expect that each visitor has done this before pushing the browser’s primary print button.

One option is to place a print button on each page clearly visible to the user. This button or link would then work with a custom function to print the content page.

For Example:

<a xhref="javascript:self.print()">Print Page</a>

Unfortunately the JavaScript necessary to print a page is only an option on a PC (not a Mac). To accommodate for Mac users, create a custom Macintosh/PC printing function using variables (for platform type) created from the Browser Detection script (mentioned earlier).

If the variable for a Mac is present, clicking on the print link could create an alert box informing the user that using the button to print is not an option and instructs them on how to print their specific page.

For Example:

function printIt() {

var macprint;

macprint = "Attention Macintosh User. Unfortunately this functionality is not available on the Macintosh OS. Please click the page you would like to print a select print from the browser menu.";

if (is_mac) {

alert(macprint);

} else {

self.print()

}

}

Usage:

<a xhref="javascript:printIt()">Print Page</a>

* This script should reside in an included .js file so it can be accessed by every page in the site.

** An example is located in the hybrid_demo.zip file.

All other users would receive a standard page printing dialogue box. A final option would entail using the JavaScript focus(); function at the end of a page load to focus the content page in the frame.

This would mean that pushing the default browser print button would print the focused page only.

Framed Bookmarking

Bookmarking a page is another feature which loses some of its power in frames and requires a button on each page clearly visible to the user to work with specific pages. This button would then work with yet another custom function to bookmark the content page.

As with the printing script, the JavaScript necessary to bookmark a page is only an option on a PC Internet Explorer browser. People on alternate platforms and browsers will not see anything happen when clicking a custom bookmark button.

To handle such a scenario, create a script similar to the second printing script which essentially instructs anyone not on PC Internet Explorer browser how to bookmark the specific content page.

function bookmarkIt() {

var bookmarktitle = document.title;

var bookmarkurl = document.location;

var netscape

var macintosh

netscape="Attention Netscape Users. To Bookmark this page please click the page you would like to bookmark and press CTRL+D. If you would like to add this page to your Netscape Sidebar, please click OK on the next window which appears.";

macintosh="Attention Macintosh User. To Bookmark this page please click the page you would like to bookmark and press CTRL+D.";

if (window.sidebar&&window.sidebar.addPanel) {

alert(netscape);

window.sidebar.addPanel(bookmarktitle, bookmarkurl,"");

} else if (is_mac) {

alert(macintosh);

} else if (document.all) {

window.external.AddFavorite(bookmarkurl, bookmarktitle);

} else if (window.opera && window.print) {

return true;

}

}

* This script should reside in an included .js file so it can be accessed by every page in the site.

** An example is located in the hybrid_demo.zip file.

Usage:

<a xhref="javascript:bookmarkIt()">Bookmark Page</a>(Will only work online)

Loading Correct Content Pages into Frames

Since all of the pages in the site will be indexed by search engines it is important to ensure the base frameset and Flash navigation loads up when the visitor surfs to that page.

Loading the page a user is trying to view in the frameset rather than simply defaulting to the homepage is also important.

In the supporting links at the end of the section I have listed a link which should assist you in the development of the frames loading code.

Flash to Flash Communication with JavaScript

The icing on the cake to any framed hybrid site is the introduction of LiveConnect. LiveConnect is simply the use of JavaScript to pass variables directly into a Flash movie or to have two Flash movies talk to one another across frames or on the same page.

ExternalInterface class in flash 8 does some similar things and should be looked at as well if you need to pass variables into flash via JavaScript.

LiveConnect on a website should never be an essential part of the design or functionality since it is not fully compatible with all browsers (it is with PC IE and some Netscape versions) yet its inclusion adds an extra level of polish, flow and experience to any framed hybrid site.

ExternalInterface also is limited in it’s browser compatibility so read the documentation before implementation.

An example of where LiveConnect would be useful is found in the previous example of a person surfing to an internal page of a website from a search engine results page.

After the page has finished loading into the frameset a sectional variable would be passed from the page (using JavaScript) into the Flash navigation SWF triggering an action or function inside of that SWF.

This action/function could be the highlighting of a button which corresponds to the section that page resides in.

Taking this a step further this variable could trigger a whole series of actions and functions which then span across multiple SWFs on the page or in other frames.

Four examples of Framed hybrid sites utilizing LiveConnect in action are:

2Advanced.net

XS Engineering

Centrality Communications

Skyworks Solutions v1

All of these sites were created at 2Advanced Studios.

Browsing with Internet Explorer on a PC, click around the XS-Engineering site and notice how the content changes and the sub-navigation seamlessly appears and disappears without any page-reloading.

After a few sectional pages have been visited, click the back/forward buttons on the browser to see the content and sub-navigations change/animate seamlessly.

In the case of the Centrality Communications site, even the tagline in the top header re-configures itself depending upon the page/section.

2Advanced.net functions similarly as the highlight above the main navigation changes depending upon the section, as you use your back/forward buttons on your browser.

This helps create the illusion of a full Flash site but with all of the benefits of an HTML site.

To implement LiveConnect or ExternalInterface please go thru and study all of the information provided by Macromedia and other resource sites in the links below.

These are full of tutorials, examples and code, which will get you started on how to pass variables into Flash from the page. On the surface this is an incredible opportunity but be warned that it takes a lot of work and forethought to be implemented correctly especially the first time.

Framed Hybrid Site Supporting Links:

ExternalInterface class in flash 8

http://labs.macromedia.com/wiki/index.php/Flex_Framework:examples:external_interface

Flash 8: Using ExternalInterface

http://blog.deconcept.com/2005/08/16/external-interface/

Using Redirects with frames:

http://scriptasylum.com/tutorials/frameredirect/frameredirect.html

Flash Methods:

http://www.macromedia.com/support/Flash/publishexport/scriptingwithFlash/scriptingwithFlash_03.html

How Flash talks to Javascript:

http://www.moock.org/webdesign/Flash/fscommand/#Flashtojavascript

Flash to Flash Communication thru Javascript

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15683

Flash to Flash Communication:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15692

Control Shockwave or Flash behavior does not work in all browsers:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15431

FSCommand problems in Netscape 6 and Mozilla:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14625


About the author, Shane Mielke
Creative Director, 2Advanced Studios

Shane Seminole Mielke - best known for his portfolio site, and work as Creative Director at 2Advanced Studios, LLC.

When not reclined in front of the computer, Shane enjoys spending time with his wife, natural bodybuilding, coaching High School football, photography outings and getting minimal hours of sleep.

* Thanks to Jonathan Moore, Geoff Stearns and David Buhler for their help and support in writing this article. Big thanks to Rob Ford (FWA) for giving me the opportunity to speak about a topic very close to my heart.


hr
All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact