Pathfinder releases version 1 of its Flash Platform microsite (codename Mica)

Sasha Dzeletovic, Thursday, December 4, 2008 @ 1:30 pm

You can see the site here. Come often as it will be updated on a regular basis.

The goal of this site is to shed more light on what is it that we do here at Pathfinder with the Flash Platform.
We would be very grateful to hear feedback about the site from any perspective.

The Site was developed using Flex Builder 3.

We were focusing on several things:

• Presenting our work in a manner that is fast and easy to consume
• Fast loading times of site and content
• Maintaining the same experience on any screen resolution, major browsers and OS’s
• Testing SEO optimization for Flash Platform
• Uniformity and reusability of interaction effects
• Ease of dynamic content maintenance

Presenting our work in a manner that is fast and easy to consume

We decided to present our work mostly using screen casts of apps being used. We thought that this would be the quickest way for our visitor to get a good taste of our work.

Fast loading times of site and content

We used Amazon's Cloud Front CDN to store streaming video content.  Setting up cross domain permissions was a little tricky.  Images loaded from Cloud Front would have a slight delay loading right after initialization of the site, otherwise they acted great. We're still looking into this issue as we think that using Cloud Front is potentially a great approach for storing content like images and videos, at a substantially lower cost than Akamai or Limelight Networks.

All content was optimized for web using Adobe Photoshop and QuickTime Pro. The Site’s interface is entirely created out of vectors, for screen resolution scalability and fast loading times. Vector content is either programatic, either imported from Adobe Illustrator as mentioned in this post.

Maintaining the same experience on any screen resolution, major browsers and OS’s

Flash does take care a lot of this business out of the box.

Though this is a Flex application, we chose to use good ol’ Flash Stage resizing method:
stage.scaleMode = StageScaleMode.SHOW_ALL .

The catch with this one is that your flash movie size (width/height) in HTML has to be 100% or the line will not work.
It turned out that this was not a bad idea at all. It allowed us to focus on one layout of known proportions that will fit any screen size the same way.
Plan B would have been to use the standard Flex constraints system for display objects, but in this case the results were so different (naturally) that the site would have had tremendously different appearance based on screen resolution.

Testing SEO for Flash Platform

As mentioned in this post Google doesn’t index Flash dynamic content. We had to go back to standard SEO techniques for Flash Platform.

To name a couple:

• We embedded a lot of text content in the Flash file itself.
• We filled the HTML wrapper as any HTML page sans the body content.

Uniformity and re-usability of interaction effects

We wanted to have standard effects for particular interactions.
For interaction effects we created various effect classes that would have two parameters in constructor:

• Targeted UIComponent
• Function to be executed at the end of effect.

All the timers and listeners for the effect are stored in the effect class.
First parameter makes the effect useful work for pretty much anything.
Second parameter proved useful for execution based on the effect timing.

Ease of dynamic content maintenance

Since there is not a whole lot of content to be maintained, we decided to have all the content catalogued in two XML files, one for the Case Studies and one for the image gallery. This has proved yet again to be the fastest and easiest way to setup and maintain small scale content.

agile ajax

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment