In the last few days I’ve been experiencing weird rendering problems in some websites while using the latest stable version of Firefox (3.0.1) in MAC.

Searching google I found more people having similar issuses like blinking pages when using SWFAddress for Flash in FF3 MAC.

• SWFAddress Help Forum
• Firefox 3 + Adblock = disaster (asfusion blog)
• FF3 breaks SWFAddress (sometimes) on OS X
• Firefox 3 and SWFAddress

In all the cases the solution given for the problem is to add a small delay between the visual transition and the JavaScript interaction of SWFAddress.

After reading all this posts I thought the problem was specific for SWFAddress but my surpsise was when I found similar problems in one of our projects which is not using SWFAddress at all and it is almost 4 years old (AS2). In this specific project we were using ExternalInterface extensivelly.

I have done a small test with just a gradient background and three round corner buttons using ExternalInterface call method to call three different javscript functions and the results are scary:

1) First button (left) calls an alert in javascript using a timeout:

JAVASCRIPT: setTimeout(”alert(’test 1 with timeout’)”, 1000);
FLASH: ExternalInterface.call(”test1″);

2) Second button (middle) calls an alert in javascript:

JAVASCRIPT: alert(”test2 no timeout”);
FLASH: ExternalInterface.call(”test2″);

3) Third button (right) calls scrollTo in javascript:

JAVASCRIPT: scrollTo(0,100);
FLASH: ExternalInterface.call(”test3″);

Second and third button in FF3 MAC makes the flash movie to behave in a weird way when the javascript action is executed.

http://www.lessrain.com/projects/luis/as3/bugs/ff3mac/deploy/

Looking at this results and considering that SWFAddress uses ExternalInterface I can say for now that part of the problem is caused by using the ExternalInterface call method in FF3 MAC (looking at the problem from a flash developer point of view, I don’t know what is happening behind the “Cocoa Firefox” scenes), but maybe the problem goes deeper than this, I don’t know yet, this is only my first attempt to find out the causes of Flash blinking and behaving bad in FF3 MAC.

At the beginning it’s always simple. “Everybody draw crazy airplanes and then fly them.” We wanted a fun experience, no boring modeling session, no nerdy flight simulation.

Just draw an outline, booom!, airplane wing

Flight Lab uses Papervision3D to show 3-D models and these models have to be created in a very specific way. Drawing an arbitrary free hand line is the opposite of that, you can draw everything, in any way. That’s why the Flight Lab builder has to do a lot of interpretations. Did you just draw a correction to an existing outline? Are there intersections? Can we simplify the outline while preserving its characteristic look so the Flash Player has less stuff to compute? Next, Flight Lab has to break up the shape into triangles because Papervision3D only understands models made out of triangles. At the end, we add thickness and create the final model by extruding the outline. We’re done! Now let’s head over to the game.

Fly like birds do and crash like airplanes

Flight Lab gives you the real thing: It’s a 6DOF (degrees of freedom) flight simulator modeled by a physics engine in 3D using rigid body dynamics. Real airplane wings can be described by specific lift and drag coefficients, depending on how quickly and from which angle the air flows over a wing section. That’s what Flight Lab does.

On the other hand you’re flying by flapping wings. The flying experience had to be as physical as possible using as few buttons as possible. So we put a bird into the simulator, added additional forces and offered the user the same control a bird has over its body – if it’s not a chicken. 4 keys, 2 optional keys and one space bar (hint!) oughta be enough for everyone.

Flying Pigs

The flight behaviour depends on the material you choose and the shape of the airplane. But to be honest, we ended up limiting this influence a little bit. As an aviation engineer you just have to design some things exactly the right way or the airplane won’t fly at all. Crazy airplanes can quickly become impossible to handle in a real flight simulator. However, we wanted people to create imaginative planes and fly them in our simulator even though they may never take off in the real world. So we decided on a compromise. Huge wings for example will do what you expect them to do but they can have any shape and any position. In the end though, a well engineered aircraft will still fly better and bring you more score points.

Hand-crafted, with a lot of love

The game itself has a lot of elements running at the same time and a lot of effort went into making this possible. Flight Lab is using Papervision3D 1.5 and builds on the efforts of a vivid open-source community. Nevertheless, there are limits when it comes to creating a game experience of this scale. Nearly every element you see in the game posed a significant problem of its own. Be it quality of graphics, a panorama, a water surface, airplane shadow, clouds, wind or general depth-sorting problems. And often something feasible turned out to be too slow in context. Game logic, stunt analysis, sound and physics simulation quickly add up.

Guest Star

PaperDude! Of course you know him and he’s back big time. He will be acting as your avatar so treat him with respect. His body follows motion capture data from Lord of the Rings and Saturday Night Fever. Real time, baby!

Plus everything else

Next to all this fancy game and 3D stuff, Flight Lab is also a website which offers saving, browsing and sharing airplanes. It’s a Rich Internet Application in the true sense of the word and a site that supports deep linking and browser history. If you want your friend to play the game directly using a specific airplane, just send him the link in the browser address bar.

Flight Lab is a prominent example of what you can do today with Flash Player 9. It was a fun ride and we learned a lot. Let’s see what the future holds, the flying pigs are here to stay.

The next Red Bull F1 team strikes back with a brand new website. Our intention was to involve the user in such a way that he is really feeling close to what is happening on the race track.

The relaunch shows the usual Less Rain tuning (friendly Search Engine Optimization (SEO) , Alternate HTML version optimized for ScreenReader, Back Button, Deeplinking).

Sound design by Taeji Sawai, straight from Japan.

Related entries:

• New Red Bull Racing site launched
• Red Bull Formula Una
• Back Button and Deep Links Topic

We just relaunched the Red Bull Formula Una Flash site and freshened it up with animated vector illustrations and a more girly-like atmosphere. Again we took care to support browser back-buttons and deeplinking.

Expect the site to fully come alive in March when the girls apply to cheer up at the GPs of the Formula 1 and do their best to become the Formula Una of one of the 17 countries participating.

Sound Design by Owen Lloyd.

We have recently launched the new Flash site for Haunch Of Venison. It supports the use of browser back-buttons and deeplinking plus friendly Search Engine Optimization (SEO) powered by a complete content management system. An AA Accessible version and language selection are on their way too.

The site functions as a resource for the Gallery’s exhibitions (London, Zürich, Berlin, Athens) as well as documenting the activities of the represented artists. In addition, it provides access to available works for sale, online and offline private views and books & editions.

Related Entries:

• Back button, Deep Links and Dynamic Flash RTL.
• Flash: Back Button and Deep Links Topic.

Less Rain has recently launched the corporate site for Red Bull Israel - one of the few Flash websites to render fully dynamic text in right-to-left layout - including formatting, links and input textfields. It also supports the use of browser back-buttons, deeplinking and bookmarking.

[flash]wp-content/upload/slideshow_rb.swf,450,400[/flash]

The right-to-left algorithm is losely based on Richard Ishida very helpful explanation of the bidi algorithm.

I had looked into other discussions and solutions but wasn't able to make any of them work, or found them to be too restrictive. See also the efforts of Flaraby, g. wygonik, Oddhammer, Quasimondo, FlashRTL.

For more information about the underlying problem visit The Right To Flash

Less Rain created some buttons for the Stuck On Me exhibition - now in Berlin, last year in London.

Tomorrow is the last day! Hurry up and see them at Galerie Walden Kunstausstellungen, Kastanienallee 86, 10435 Berlin, Prenzlauer Berg 12.10.06 – 21.10.06, open daily 2 - 8 PM.

Read the rest of this entry �

UrlKit is an open-source Flex library for browser URL control via deep linking developed by Joe Berkovitz and Todd Rein.

The bad news are Safari known issues, as usual.

Related Posts:

• Flash and Ajax History Support in Safari?
• Ajax and bookmarking, refreshing and going back
• Flash: Back Button and Deep Links Topic

David Bloom has figured out a way to have fragment identifier history in Safari.

Just a Safari fragment identifier history demo

Related Posts:

• Ajax and bookmarking, refreshing and going back.
• Flash: Back Button and Deep Links Topic.

I know this is an old topic, but I feel like posting about it. Since a few months ago I tried to make flash websites a little bit more usable and functional taking advantage of some new Flash 8 features and going back to old topics such as the browser back button support and deep linking support.

So far we have tried to implement this features in the last two projects we have done for redbull with 95% success, as usual MAC and Safari still very problematic.

• Redbull Racing website
• RedBull Racing Deep Link example
• RedBull TrackAttack webiste

Today I found this article in Jens Franke's blog where he points to a good solution for the Back-Button Support which apparently works in Safari.

Realated entries:

• Ajax and bookmarking, refreshing and going back

Other articles:

• Going backwards with Flash (Via cruciallimit blog)
  

It's already a while ago, but I lost track of these crazy modern internet things for a bit: In October Eric Pascarello offered a weblog post and an article about how to use Ajax in an hit-refresh-safe kinda way.

Now, what I like about his approach is that it's very clean and straight forward; a solid and easy to understand solution to a well defined problem. But the interaction problems between browsers and Ajax applications don't stop here. Try hitting the back button, and you'll be disappointed, be it IE or Firefox (as the two don't work, I didn't bother testing other browsers on it).

Luckily there's help, in two ways: Either you take the framework route and choose the dojo toolkit. It's a toolkit that deals with xmlhttprequest on one hand and the representation of state changes on the other, something that generally used to be called DHTML effects.

If you choose to build things yourself, because you consider it too heavy, or for a million other reasons, Mike Stenhouse has written up his approach on fixing refresh, back button and bookmarking over at Content with Style. While he takes pretty much the same approach as the Dojo toolkit (both came out around the same time), he took the time to explain his approach thoroughly, which has been discussed ever since. So, rather than including a bit of a heavyweight js-library in your code, you should be able to build it all yourself after reading his article. Like this, you can reduce the load to only the essential code that you need.

Oh, before you get all excited: None of the back-button solutions work in Safari, and I have yet to see an ajax-fixed-back-button solution for it, in any variation.

Update:
Here's also a little bit more to read about the Dojo approach, and I also found an O'Reilly Article about the same thing all over again, but Brad Neuberg, the author, packed it all nicely into a library and an exhaustive article (which probably leaves no questions open, but I can't read it right now, so you'll have to find out for yourself).