12 Flash Bugs to look for

Flash websites, apps, and widgets require a different eye when checking them for quality assurance, when compared to a traditional site.  Below are the top 12 code-based problems, easily missed by traditional processes. 

1. Create computer performance personas
First of all, just like with any web-project you need to define who you’re designing for.  Make 3 to 5 personas of likely or desired users and what they’re technology limitations are. 
? Examples of Personas
? Work Surfer - T1 connect - Dell Laptop less than 2 years old
? Affluent Hardwired -  Cable - High-End, Mac Laptop
? Coffee Shop - Wireless Access - Avg PC Laptop
? College Kid - DSL Shared Network Access - New PC Laptop
? Farmer - Dial-up - 5 yr old desktop
? From your targeted personas, do a bit of research as whether or not you’re fully, partially, or supporting elements such as monitor dimensions, connection speeds, and graphic processor speed.  Use that info for elements 2-6, they’re at the top for a reason.

2. Processor load
By far the biggest issue with Flash-based microsites looking to push the limits is thinking not of the load time, but the GPU speed of the end user. Not estimating the work you’ve left for Flash to figure out client-side can easily lad you down the path of some of the MOST OBNOXIOUS Flash experiences still online.  There may be plenty of scientific or technical ways to test the amount of strain, but the most important facts is this:
? For any persona you are targeting no website should ever claim more than 40% of the processor capacity. 
? Consider GPU processor optimization
? Avoid animating gradients or gradient overlays, and transparent PNG/GIF (which are converted to BMP)  Flash video display gets processor heavy the same way Video files increase in file size the more pixels that need to be recalculated the larger the strain.
? Rasterize Vector graphics and import as BMP.  While you might think of raster graphics as a filesize hog, you can actually see a significant performance savings when you flatten particularly complex vectors.
? Ensure you are Caching Movieclips as Bitmaps, or blitting, where appropriate

3. Download size/bandwidth
Question the payload.  It undoubtedly loads great when it downloads from your T3 ad agency connection, or even your cable connection at home, otherwise you would have already thrown up a red flag.
? More than 25 seconds for any persona and you’re definitely pushing your consumer’s patience. 
? Be sure that Reduce unnecessary image quality, consolidate fonts to as few as possible.
? Identify if you really need to load everything you’re loading before the website reveals.  Otherwise download those in the background, or load specific sections based on user interaction after the initial page has been displayed
? Part of webpage loading is psychological Preloader Psychology
? Stage the initial preload.  Have the HTML load some external resources, with a simple loading animated GIF, then, have the Flash preloader start-up.  Make each group of elements that are loaded,
? Psychologically people want to see the download go faster and faster.  So do what you need to feed them that perceived progress.  ;)  Play with the math in the displayed progress,

4. Please telling me that you’re QA’ing in a server environment that you’re deploying in.  Please? 
Flash microsites can be easily running off of 5 or more server groups.  Your html may be hosted on the main website’s Content Management System, while your primrary graphics and SWF’s on a mirrored content delivery system, your css library may come from Google Code, video streaming from YouTubeThere, etc, etc. 
? There are cross-domain, security, and just miscellaneous anger that will arise if you think that you can transition from what works well on your computer or your one-server remote testing, than with 2-3 servers that may be
? DO NOT TEST LOCALLY EVER
? Set it up in a legitimate equivalent to the final publish environment

5. The Reveal
Perhaps the greatest advantage of Flash how easy it is to make a smooth and sexy frist impression.  Don’t miss out. 
? Load components before displaying
? Video Components are among the most likeliest of offenders.  And uncontrolled changing of streaming video can go nuclear, show frames of old videos or give quick flashes of unprofessionalism. 

6. Abrupt transitions
Most things should fade or transition, if it just flips on or off, please question it
? Once again, this is Flash.  And hopefully, we chose a more elegant front-end solution to make a more elegant app.  Transitions don’t have to complex,  but a quick alpha fade never hurt a soul.  So designers and devs, make it happen, QA guys scream murder when it doesn’t. 

7. Click between two/more states quickly
Often times you can seriously confuse a poorly written Flash app just by clicking fast, seriously. 
? For new developers, the simplest mistake to make is to begin parallel processes in code, while not setting up an appropriate set of event listeners to catch every element that is affected by a change.  So the quickest way to break that code is to just click fast, hard and everywhere.  A bunch.  If you notice the menu indicator is incorrect at times, that the video audio is still playing in the background, or that there are multiples of objects overlaid upon one another, now you know why. 

8. Font embedding/Text appearance (Min font size/ anit-aliasing, new TLF style text)
Font embedding is the most unnecessarily complex element of making nearly every flash piece.  At times, every text field, needs to be individually connected in the Flash GUI (twice actually), and again in the ActionScript code.  This is extremely easy to miss when making client revisions, or repeated iterations on the same project file. 
? The designer or developer could have skirted the subject by using a system font, but seriously I’m an Online eArt Director and I’d have to hope that you didn’t settle on Verdana
? Have the designer supply the rasterized design files for comparison
? Different computers have different font sets, and every if the font is not embedded correctly it could reconnect to the font if it’s on the end-user’s computer.  So be sure to try it on Mac/PC and on computers that do not have Adobe Creative Suite products installed on them. 

9. Yellow Rectangular Border is visible
Accessibility focus - Click outside the flash if possible, and click back inside, does anything have a yellow border appear around it?
? This is the tab-focus.  You’re used to it in operating systems, and probably noticed it most if you tab your way through online forms.  Flash Player 10.1 added an accessibility feature, to help with…uh… people requiring yellow boxes, This has been fixed with 10.2, and the market share is for 10.1 is tiny and getting smaller so this won’t be anything to worry about past 2011.

10. Right click menu
Don’t leave menu options that just confuse the consumer
? By Default there are a lot of options that get listed in the right clinet menu wehn you right-click on flash.  You can eliminate the unnecessary ones and make that menu seem a little less scary. 
? The equivalent of “This website was developed by” is still alive and well, and it has gotten classier.  Go ahead and take advantage of it.  (With your client’s blessing of course)

11. Scaling, what happens?
Resize that browser, look for anything confusing or unexpected.
? (In most case the website should look good in an available height/width of 1000x750 to 1900x1000, maybe just 1200x100) 

12. Debugging left on, password protected for AS3 decompiling
Make sure that you can’t download that SWF and decompile your client’s new baby. 
? It’s as simple as a password that no one ever needs to remember.  I’m all for open sharing of code,  we all learned our CSS and HTML abilities from a little code looky-loo.  But if I want to disclose how a Flash site was done, I’ll do the same thing I would if it was done in .NET.  I’ll blog the code, and strip the client-specific info. 

Any questions?  Ask away in the comments section, or contact me directly on twitter: @bluish_yellow