Flash has a strong reputation for creating visually stunning websites, and rightfully so. Just head over to The FWA to see some of the best flash-based websites ever designed. As good as flash is at delivering rich media to the web, there are some serious downsides to consider.

One of the largest drawbacks to flash content is it’s relative invisibility to search engines and accessibility programs. The criticism is true when talking about Flash as a closed platform. The code written is compiled into a SWF, and then embedded online. This makes searching an indexing flash content extremely difficult for most search engines. Accessing Flash content is also a problem for screen readers and other accessibility programs.

These issues, combined with the popularity of the Apple devices, create a lot of hesitancy for companies to fully embrace Flash content in their projects and sirs. I’m going to talk about a few key principals that will help Flash gain visibility and accessibility across multiple platforms, and at the same time make Flash content easier to update and maintain.

Does it need to be Flash?

The first step, of course, is to figure out what content needs to be in Flash, and what does not. There’s no point to constructing a site using flash if the same design can be achieved using more open, standards-compliant code. Once the decisions have been made as to what content will be built in Flash, than it’s time to start thinking along the same lines as proponents of web standards.

Use the Principals of Web Standards

The primary rule in web development today is the separation of content from presentation. The same principal can be applied to Flash projects. Separating the content from the design means updating and maintaining the Flash site will be much easier if the code doesn’t need to be recompiled and edited every time a change needs to be made. Making things like the navigation, links, and photos flexible and external are all great steps to create clean, smart, and flexible projects.

Smart Degradation

If the Flash content and design are properly separated, than re-purposing the content is extremely easy. If the content is in XML format, it can be applied to an XML site-map which will help search engines index the site’s content much easier. In addition, there are browser and platform detection scripts which could allow you to display the XML content in regular HTML format if the browser or device isn’t compatible with Flash. (iPad anyone?) You can also detect older browsers and Flash players. Content can then be delivered in the most efficient way possible to all users.

For example, head over to the BKWLD site on an iPad or iPhone, and you will see that the features on the homepage are still visible and interactive. This helps serve the most people possible the site’s content, no matter what environment they are using to visit the site.

Hybrids

There is also the option of creating hybrid sites, which are very popular because they combine flash elements with standard HTML markup. This allows the user to have a rich experience, as well as giving search engines easy access to the site’s content. Making use of flashvars and XML/JSON add to the flexibility of the site by allowing Flash to communicate directly with the rest of the site.

SWFObject & Deep Linking

Making use of programs like SWFAddress and SWFObject allow the Flash content to be more transparent and visible to search engines. SWFAddress will create a specific URL for each page in a full-browser Flash experience. Knowing what section the user is on, and showing that section in the browser’s address bar allow search engines to look at specific pages, and create extremely accurate analytical reports.

SWFObject is a way to create valid code though the W3C Validation tools. Also, SWFObject has the ability to replace Flash content with a static image, which maintains the visual design if the user doesn’t have flash enabled.

Conclusion

It’s ultimately about choosing the right tool for the right project. Flash has many advantages, which need to be carefully weighed against the areas in which Flash falls short. The ideas described here can certainly help Flash communicate better with browsers, search engines, analytical tools, and accessibility programs.

Recently, a port of OpenCV, a library of object detection functions, was created for AS3 which has sparked a lot of interest and creativity in the flash and flex community. Stemming from this came facial recognition for AS3.

It is often difficult to find useful applications for these new technologies. Luckily, BKWLD was recently approached by .net magazine and was asked to write 2 articles. Jeff Toll, who’s article can be seen in this month’s issue, worked with me to come up with a design for a facial recognition application that will be featured in an upcoming issue of .net magazine. Together we came up with an idea for a virtual window, where the users can essentially fly through a 3D flickr gallery.

For the true experience you can visit the following link (you must have a web cam): http://bkwld.com/headtracking/. If you do not have a web cam, I have uploaded a demo video onto Vimeo at the following link: http://vimeo.com/7092048.

Here is the source if your feeling adventurous.
HeadTracking.zip

There are a couple things to note about the source code. First, this was developed using flex, so if you want use it in flash you will have to set HeadTracking.as as your document class. Second, I did not leave my Flickr API key in the source for obvious reasons. So, you will have to apply for a Flickr API key if you don’t already have one and enter it in the init function of the HeadTracking.as class file where it says “Enter your API key here”. If you find any errors in the source code be sure to yell at me in comments.

The following resources were used:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
http://www.quasimondo.com/archives/000687.php
http://www.youtube.com/watch?v=Jd3-eiid-Uw

I don’t often batch import layered files (PSD, PNG) into Flash or even copy graphics into it.  But what I DO find really handy is copying text between the apps.  This worked in CS3 but it’s gotten better (more accurate) in CS4.  You can copy a whole group in and the font, size, and color are all maintained (or close enough, you usually have to nudge line height).  This saves tons of time when you’re populating a whole FLA from a text heavy design while keeping the text editable for the inevitable copy change.  Notice in this video how I can bring in multiple text boxes at a time.

ActionScript is awesome, but developing with it can be tedious. I have compiled a list of 10 resources that I use on a daily basis to help speed up development. I have purposely not included any animation, 3D or physics frameworks because there are far too many to include in a top ten list. If you have any that I didn’t include, feel free to post them. So here we go, listed in no specific order.

Monster Debugger
I’m loving this new debugger. It’s very easy to include in your code and it even has live editing! Moving that sprite over a couple pixels has never been easier.

Degrafa
I’ve been using this a lot lately. If you are doing any skinning in Flex you’re crazy if you aren’t using Degrafa.

Actionscript 3.0 TextMate Bundle
Here at BKWLD we LOVE TextMate. Although I still use Flex while developing with the Flex framework, I use TextMate for all of my Flash projects. The AS3 bundle makes Flash Development a breeze. Imagine being able to create a class file with the constructor, package declaration and custom class comments already there. At BKWLD we have taken it a step further by creating a huge list of custom snippets and templates that work with our AS3 library.

Pure MVC
While there are many great AS3 frameworks out there, this one is my choice. There are better solutions out there as far as frameworks for Flex development go, but the beauty about Pure MVC is that it is compatible with both Flash and Flex.

Flash Tracer
I use this thing all the time! It’s a Firefox add on that enables you to see all the output generated by any running flash swf, even the ones in your browser. It works great for debugging live content. Also, you get to see all the curse words that other developers have “accidentally” left in their trace calls.

Firefox Web Developer Toolbar
Every web developer who uses Firefox should have this. I mainly use it to test various screen sizes with liquid flash layouts.

Flash Player 10 Debugger
An absolute must have for any flash developer. Make sure you have the debugger version and not just the regular flash player.

Tour de Flex
This is really nice Flex component inspector that also allows you to quickly view the documentation of any component you are looking at.

Losum Ipsum Widget
Quick, randomly generated lines of lorum ispum text.

SQLite Admin
A quick and simple tool that allows you to view the structure of any SQLite database and execute queries. This is a great tool for anyone who is developing for AIR.

Visual effects studio OOOii was given the opportunity to create the visual interfaces for JJ Abrams new Star Trek movie. Typically, this is all done in post production and the actors have to pretend they are interacting with a super computer from the future. However, with the power of Flash and AIR, OOOii created numerous interfaces allowing the actors to interact in real time with actual working applications during many of the films scenes. Read more about it on Lee Brimelow’s Flash Blog.

I ran into an issue today with Flash and targeting the div wrapper (when using SWFObject). Basically, there seems to be a bug in Firefox (and possibly other browsers) that causes the applet to reload when changing its display state. I found that instead of using

document.getElementById('flash_div').style.display = 'none';

that by using an explicit dimension you can achieve the same result without restarting the applet:

document.getElementById('flash_div').style.height = '0px';

Not sure if Firefox 3 addresses this. I’m guessing it does.

EDIT
ARGH. Setting the height to 0 definitely hides it, but little pieces of the flash are still active. Guess it’s an official “bug.”

After recently launching a flash site developed in AS3, a stupid, stupid bug appeared that caused a slight amount of brain trauma. In InternetExplorer 6 the site loaded, and worked fine. But when you would navigate elsewhere and come back to the site, everything was all screwy. The alignment was off and the site wouldn’t initialize. Clear your cache, reload and everything was perfect. So, obviously its a cache problem, and it only occurred in IE6.

Here’s how I had my project set up:

Read the rest of this entry »

So, my thanksgiving break consisted of 4 days of leftovers and HBO On Demand. I also decided to make this nice little thingy. I have been talking about the new SoundMixer class introduced in AS3 for some time now, but I never utilized it. Well, I decided to create an equalizer using the new SoundMixer, Graphics and ByteArray classes introduced in AS3. It’s not too hard and can be implemented in soooo many ways.
http://www.maxrox.com/expirements/equalizer/
Source Code

Taking it one step further, I decided to include a little papervision3d magic. The result ended up looking very cool. It didn’t require an insane amount of code and runs fairly smooth.
http://www.maxrox.com/expirements/3dequalizer/
Source Code

Working with ActionScript 3, we’re finding plenty of bugs that others have found and have experienced some intermittent crashing due to garbage fonts, but yesterday we had a doosy that lasted all day. The site was running fine and frame-rates were great, but we could pretty consistently crash (or at best get a spinning color wheel on ) any browser (safari, firefox, ie 6 + 7, mac, windows) when you closed the window containing the flash movie (closing the browser window with a hot key or clicking the close button). We started by removing all our code; first papervision code, then removing the content that was being displayed, then all embedded fonts … it was pretty stripped down. It was not until the content was removed that the browser crashes subsided. So, we started googling the hell out of “flash player 9 crashes closing window” and randomly came across this post where user nikonratm noted the following:

Tweening the position of a TextField that has a mask, as soon as I close the movie window the program crashes, whether it be in the Flash (CS3) IDE or in a browser.

This was the first instance we had found where the crash was specific to closing the window. So, we went through and removed all masking and no crashes. We then added each mask back and tested and got to a point where we slimmed down the crash culprit as a directly masked text field that had a TextFormat applied to it (also it had embedded fonts, not sure if that had anything to do with it), i.e. a TextField that had a mask applied to it and not a DisplayObject containing a text field with a mask appled to the DisplayObject. You always had to put text inside MovieClips to dynamically mask in AS2 so it seems that either the implementation is faulty in AS3 or just moving or changing the text after it has been masked causes some kind of memory leak (which causes the browser to crash on close). Something like this:

var titleMasked:TextField = new TextField();
titleMasked.mask = gradient;

Perhaps a fix would be to put the text inside a sprite (at this point, I’ve spent so much time I’m not bothering to test it):

var titleSprite:Sprite = new Sprite;
var titleMasked:TextField = new TextField();
titleSprite.addChild(titleMasked);
titleSprite.mask = gradient;

To fix some of these issues, Adobe seems to think downgrading to flash player 8 is a good idea. Should we also go back to AS2 while this is resolved? I’m ready to after yesterday. Their solutions to bugs leave something to be desired. For example, one of their comments regarded the Loader classe’s inability to close streams when uploaded:

You cannot expect an “unloaded” movie to close its net streams automatically.

Well, it may not close the stream automatically, but if you create method called “unload,” I’m going to have the expectation that it’ll unload something. Perhaps there’s an undocumented unloadAndCloseStreamAutomatically.

My doppleganger posted this bitrate calculator for making FLVs. We should refer to this in the future for telling people what to set their compression settings to, instead of my usual “uhhh 400kbs?”