Wabbit / Daelgren in Flash

I had a bug that was nagging me for a while, mainly because it only shows up on Mac and XP machines (neither of which i use for development) and i thought i’d share it here since it’ll show up again for someone somewhere.

Here’s the senario:

You’ve coded up an image request/mp3/url to some data of some kind. Server developers are working and in general make lots of edits to your xml data. Sometimes they assume that entering nothing into a url location is a valid way of stopping a url request, but in general i would remove the node altogether rather than enter nulls into valid data areas, since i believe you shouldn’t ship data that is unnessesary to the ui (to optimize the xml data in this case, since it can grow quite large).

For example:
<url></url>

Now, in most browsers this is just fine, but Firefox 2 is special in that it considers an empty html request as valid and attempts to load the root of the current site instead of ignoring the empty request. This will cause further execution of any request to halt and stop the site.

In general, i hate to validate data — data should be prevalidated before it gets sent to the UI (preferably in the initial data entry action) and you should assume in programming a UI that all data is prevalidated, otherwise you end up in spagetti code situations where you are validating data on a per item case, and can build up a huge unnessary mess of code validating each individual field.

A simple rule for server developers: don’t send to the UI what the UI doesn’t need, prevalidate data entry and ensure the database isn’t muddy. Normalization usually will handle this for you but I’ve seen many SQL db’s that are just straight tables so I know it’s unrealistic to expect in all cases.

So, when this kind of thing comes up, check for empty values in url requests.

I was looking for data on which backend implementation of data services was the best to use in flash, and everyone is talking REST these days and just straight xml data.

But there’s still much to be desired in using a more optimized pipeline, especially when dealing with large amount of data or many concurrent connections or heavy bandwidth utilization. Does the service really scale? Is REST really battle tested? Doesn’t KISS still apply when it comes to online applications that really need to be responsive to the user of the system? I deal with architects with many odd and varied bias’, but in general if you can show them real world tests they’ll come around generally.

I came across an excellent example of many great tests being run realtime at James Ward’s site:

As i’ve been hinting at for months i’ve been working on a presentation system for flash. I’m very close to rolling my first project using the system and having extrapolated what is part of the framework from what is custom development for the project in question is very close to complete you should expect that i’ll have more details related to the effort posted soon.

In the meantime, here’s a short overview of what is included in the system:

• External Font and Styling
• Page description templating
• Navigation and deeplinking support (using swfaddress, swfobject and swffit)
• Animation attributes (using Tweener)
• TextField support
• Loader Extensions
• Sound Extensions
• Broadcaster implementation
• Preloading and asset management
• IPreloader, IComponent, DComponent and additional support classes for building custom controls for use in the presentation system
• Focus on separation of UI and content for easy modification without recompilation of the source (for enhanced stability and reductions of QA cycles required to build a AS3 based Flash site)

This project is at a production ready state, but at this point i would consider the engine at a version 1 RC state. I expect that over the next few months there will be enhancements that will substantially change the core functionality but not the defined templating format or external asset managment requirements.

Keep an eye on this site for more information soon.

I came across a very interesting bug that i’m in the process of working around.

Basically, i’ve created an image gallery with dynamic masks that contain wipes that are transitioned over the individual movieclips.

The stack is composed this way:

Container MC >

    Image MC >

        Loader MC for Loader content

        Mask Sprite (attaches to Loader MC)

        Mask MC is used to transition the effect.

In Flash 9 on PC, there’s no problem and all the wipes execute correctly.

In Flash 9 on Mac, the wipes do not function after the first wipe completes.

In Flash 10 on both platforms, the wipes function as they do on Flash 9 for Mac — which is to say they do not work correctly.

I’m working on a solution for this project which will be a workaround for Flash 9 Mac (and i’m assuming Flash 10), but I don’t like the alternative solution since it’s not as elegant as just doing it all in code and creating masks dynamically.

Needless to say, test on both platforms, and in the newest player when developing, since they don’t all behave the same.

There’s been a few posts recently regarding crossdomain policy changes in Flash 10 affecting S3 users:

http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=675&threadid=1367135&enterthread=y

A little more detail regarding the changes to the top level crossdomain allowing site administrators to control sub directory located crossdomains.

http://neurofuzzy.net/2008/08/27/flash-player-10-will-not-work-with-amazon-s3/

Essentially, using S3’s subdomain feature instead of bucket location (sub directory) allows you to properly control access to your data. There shouldn’t be any issues with this solution but it’s good to be aware of these changes.

Some more info for possible redirection of your domain to another site such as the subdomain on s3:

http://www.carltonbale.com/2007/09/how-to-alias-a-domain-name-or-sub-domain-to-amazon-s3/

I wrote up an explaination of wmode in April on why you should never enable it when building Flash or Flex sites — if you need to overlay DHTML type menus or controls over top of a flash control, you’re probably a great candidate for Flex and building an RIA.

There are pro’s and con’s to RIA development, and insomuch as the SEO community has turned their back on Flash as a viable platform for SEO compatible content (which is very shortsighted and misguided, but who’s going to argue with such frenzied zelots) i generally turn to Flash and Flex to solve problems not be a problem.

I had to justify not turning wmode on. wmode is a very bad thing, as opposed to how AJAX/DHTML devs will always want it on so they can build out more of the site and leave flash in the component level stuff only. Now, i’ve compiled a lot of references at the end, but if i need to correct or attribute anything i’ve missed in this please comment me here, i’ll correct it and make sure you’re properly listed. Also, i’ve come up with a number of my own assumptions from the years of leading application development in windows but some of my observations may be inaccurate but i believe the meaning is correct and clear. I would love Adobe to come up with a white paper that noted these issues and possible alternatives or SEO strategies that in the corporate world we could use that would turn back the barbarians at the gates.

Windowless Mode (WMODE)
Bela Korcsog
April 30, 2008
What is Windowless Mode?
There are three window modes available with the Flash player across most browsers and
platforms. The wmode parameter is available in the object/embed tags used to place the
Flash swf (compiled application) on stage. There are three options available for this
parameter:
“window” (default)
Use the Window value to play a Flash Player movie in its own rectangular window on a
web page. This provides the fastest performance.
The Flash Player is assigned a hWnd resource by default in Windows. This display instance
exists above the html page as rendered and is independently memory managed. Although
this appears as if it is part of the html page, it isn’t actually a member. Flash is at this point
independently managing the rendering of this component on stage and does not rely on
the redraw status of the html page (asymmetrical threading). This independence of the
current DOM allows for the best user experience, at the sacrifice of interaction using DIV
layers. This is why when using this mode you cannot place objects below or above the
flash object and have them appear as expected.
Macintosh browsers work differently and wmode is not required for interation with the swf,
but redraw issues will become evident when interacting with the swf during animated
sequences.
“opaque”
By using the Opaque value you can use JavaScript to move or resize movies that don’t
need a transparent background. Opaque mode makes the movie hide everything behind it
on the page. Additionally, opaque mode moves elements behind Flash movies (for
example, with dynamic HTML) to prevent them from showing through. Animation
performance and video playback will be affected by this setting.
In this mode, the swf content is drawn to the page directly using the intervals associated
with the browsers instance, which can affect performance. In this mode the redraw beacon
is managed by the browser, as opposed to the flash player instance, which can also be
affected by other redraw requests occurring on the page at the same time. This allows the
flash object to be a member of the current page’s z-order and allow elements of the page
to interact with the swf redraw region. The benefit of this option over transparent is that
the browser does not have to draw any elements below the swf on the page on interval,
which does provide an improved experience over the ‘transparent’ option.
“transparent”
Transparent mode allows the background of the HTML page, or the DHTML layer
underneath the Flash movie or layer, to show through all the transparent portions of the
movie. This allows you to overlap the movie with other elements of the HTML page.
Animation performance and video playback will be slower when you use this value.
In this mode the elements that appear below the flash movie are drawn into the
rectangular region where the swf resides on redraw beacon interval, then the contents of
the swf are drawn over top of this bitmap, once per interval. This is the poorest performing
option and should be avoided if possible. Generally there are alternatives that should be
investigated before using this option.
Windowless Mode is available in most modern browsers on all platforms, but behaves
differently in each platform and browser. The most consistent experience with use of Flash
swf’s is to set windowless mode to ‘window’.
Windowless Mode Issues.
Here’s a short list of wmode issues related to various browsers. Windowless mode can be
considered a function of the host browser, and as such has inconsistent behaviour between
different hosts.
Browser legend:
[IE] Internet Explorer, [FF] Firefox, [SF] Safari, [OP] Opera (Wii) [Any]
1. [Any] When using a transition between states the resize effect flashes the final
resize state before resizing (more apparent with wmode set to opaque or
transparent)
https://bugs.adobe.com/jira/browse/SDK-12421
2. [FF] When using wmode=opaque or transparent text input fields do not allow
special characters
https://bugs.adobe.com/jira/browse/SDK-12420
3. [FF] Wheel mouse does not work in Firefox when wmode is set to opaque or
transparent
https://bugs.adobe.com/jira/browse/SDK-12415
4. [Any] Flex TextInput does not gain focus when cursor is in text field of iframe
https://bugs.adobe.com/jira/browse/SDK-12377
5. [IE] Multiple SWF embeds, wmode enabled, fullscreen requested (FP 9.0.115 >), on
exit of fullscreen mode, out of focus flash movies will not be redrawn.
6. [IE] SetInterval will be constrained to enterframe count with wmode enabled. Will
cause redraw and performance issues.
7. [Any] Fullscreen not available with FP 9.0.23 – FP 9.0.100 when wmode enabled.
8. [Any] Animation sequences / Video will stutter and show empty frames (effect
more prevalent in FF). Animated sequences of bitmaps show blank frames (memory issues), video will stutter or skip frames unnecessarily. Generally the issue is related to memory management – with wmode enabled all aspects of the scripting engine is throttled and swapping of memory is
handled poorly.
9. [Any] Text fields may be offset from their natural location during text entry if page
is scrolled.
10. [Any] Text field tabbing will not function if wmode is enabled.

References:

http://blog.headlondon.com/2006/06/02/no-wmode-please-were-british/
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
http://www.lostinactionscript.com/blog/index.php/2007/03/23/flash-on-flash-for-hybridsites/
http://www.dylansmith.info/2008/01/25/nasty-wmode-bug-in-firefox-2/
http://viconflex.blogspot.com/2007/11/using-floating-iframes-in-flex-3-beta.html
http://codingforums.com/archive/index.php?t-95109.htmlhtml
http://justin.everett-church.com/index.php/2006/02/23/wmode-woes/
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg31205.html
http://forum.spreadshirt.net/showthread.php?t=1791
http://www.sephiroth.it/phpBB/showthread.php?t=9268
http://www.themidnightcoders.com/blog/2006/12/mixing-html-and-flex-usingiframe
http://www.flexforum.org/index.php?showtopic=719&pid=1529&mode=threaded&start=#entry1529
http://www.openlaszlo.org/jira/browse/LPP-5482
http://www.digitaljuice.com/community_forums/tm.asp?m=22787

I was asked to define what was possible in using ExternalInterface when developing for our sites. This is good general information and it’s probably a good idea to keep it together in one place.

Essentially, i was asked how we could call functions from Flex/Flash and have values returned to flash. That api is provided in the Flashplayer as the ExternalInterface api. Generally, it’s a very simple process and should be very fast to develop, but there’s very specific requirements on the development of the application and you need to follow them.

Here’s the sample code (in a FlashDevelop project):
javascripttester

Here’s the MXML / AS3 code to execute the test (this is the code from the .zip file attached). For this test you must use the html file from the package as it contains some javascript that is required, as well as the javascript for swfobject:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”>
 <mx:Button x=”37″ y=”77″ label=”Send to Javascript” id=”btnInvoke” click=”start()” />
 <mx:TextInput x=”37″ y=”47″ id=”jsFunction” text=”TestFunction” />
 <mx:TextInput x=”219″ y=”47″ width=”538″ id=”jsParameters” text=”blue,red,green” />
 <mx:Label x=”37″ y=”21″ text=”Javascript Function to Call”/>
 <mx:Label x=”37″ y=”111″ text=”Data returned to flash from javascript”/>
 <mx:Label x=”219″ y=”21″ text=”Value to send”/>
 <mx:TextArea x=”37″ y=”137″ width=”720″ height=”100″ id=”strReturn1″/>
 <mx:TextArea x=”37″ y=”250″ width=”720″ height=”100″ id=”strReturn2″/>
 <mx:Script>
  <![CDATA[
   import flash.external.ExternalInterface;
   
   private var js:String;
   
   private function init ():void {
    ExternalInterface.addCallback ("jsfunctioncall",this.functioncall);
    
   }
   public function start ():void {
    this.js = ExternalInterface.call (this.jsFunction.text, this.jsParameters.text);
    this.strReturn1.text = this.js;
   }
  
   private function functioncall ():void {
    this.strReturn2.text = "jsfunctioncall called (cannot send any parameters in a direct call, but you can execute state changes). To set parameters directly, you must use the first method that enables a callback situation to get the values from a function, but if you wish to execute a stop action or other changes to state of an applicaiton while it runs, a direct function call is better than changes to var values directly.";
   }
  ]]>
 </mx:Script>
</mx:Application>

Using this test you can form your own working code and successfully integrate ExternalInterface into your development. The sample shows two forms of communication, calling a javascript function and recieving a return value, and calling a function from outside of flash.

Lots of posts out there talking about runtime font embedding (first one i saw and thought was intelligent was Scott G Morgan’s breakdown and explaination: http://www.scottgmorgan.com/blog/index.php/tag/fonts/).

My issues came up when using Flash instead of Flex to embed fonts at runtime. Why use Flash at all you ask? Hmm, not sure really, but in general I like to timeline some stuff so it’s more convienient to just have Flash runnig instead of Flex and Flash at the same time (that, and LOTRO of course =).

Also, i wanted the leanest most compact swf file i could get, and i wasn’t sure that Flex would exclude all it’s frameworks from the swf when i compiled so i stuck with Flash for now.

So, anyway, all good fonts load in and work etc, but an interesting thing happened on the way to the colloseum, stylesheets wouldn’t work with fonts that were working fine in textformats. Now, Scott does mention some specifcs about naming etc in Flex, but i figure that the majority of the world still is Flash based, so a general guideline to how to do it properly and have it work every time is important as a reference (because Lord knows, in a few months i’ll forget how this worked).
[Read the rest of this entry...]

Been busy the last few months, and haven’t really posted too mucho about what is new and exciting.

Here’s a few links to enjoy:

http://www.fordvehicles.com/transitconnect/ 
(Bill Shippy helped me when the going got tough. Creatively not inspirational but the architecture is good, and lightweight. I like the deferred downloading and integration of some metrics and incremental updates supported — almost the whole interface is driven by xml data).

http://www.fordvehicles.com/sync/ 
(screen savers only — Lee Felarca and Bill Shippy were the developers on the main site)

http://www.clickbooq.com/
(rewire from PHP to Ruby on Rails — the Flex CMS migration was my baby and it was intense. Originally built by three different development groups (myself included), I took all those divergent styles and coalesced them into a functional rewire and repair)

http://www.airgid.com/
(flash development work for a good friend of mine — it was also kind of intense but enjoyable — and with all the papervision sites going down these days I’m happy we curbed the itch to do it in papervision — it would get lost in the crowd of 3D spinning cubes when really it should be a fast, light sales tool only)

[Read the rest of this entry...]

I’ve got to write about my new laptop! It’s a Dell XPS m1530 and I’m pretty impressed with how it performs. I got a system outfitted with most of what I thought is cool for Vista based laptops these days (I went with Vista and I’m pretty happy with how well it runs).

[Read the rest of this entry...]