We’ve just completed the development of the One Race Wear microsite for our friends Bionic Systems and their client One Industries.
Bionic Systems were responsible for the project and art direction, we added our Flash treatment:
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.
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.
As a little homage to our most popular and seemingly helpful blog post about the Nasty XML load bug in Internet Explorer I created an app that tests the caching behavior of the browser it’s running in.
To recap - Loading XML files in Flash over an SSL Connection in Internet Explorer fails if the “Pragma: no-cache” or “Cache-Control: no-cache” HTTP headers are set in the server’s response.
In AS2 the loading failed silently, in AS3 we at least get an IO Error #2032, which has been discussed several times (see below)
If you want to keep the browser from caching your dynamic content you’ll have to use other means.
Judging from my tests, the best headers to prevent caching without causing errors in IE are: “Cache-Control: no-store” and/or “Expires: Thu, 01 Jan 1970 01:00:00 GMT”.
You can access the test suite here:
Set the headers that you’d like the server-script to return and find out what happens when the same request is sent twice after each other.
Use the Live HTTP Headers Plugin for Firefox if you’d like to see what the server actually returns.
Other interesting insights
PHP sessions
Note that in PHP, as soon as you use sessions with session_start() the no-cache headers are added automatically. You’ll have to replace those headers or turn the default behavior off in php.ini. To replace the headers (found in the comments of the original post, see also the session-cache-limiter function and comments):
session_cache_limiter(’public’);
session_start();
header (”Cache-Control: cache, must-revalidate”);
// or if you still want to prevent caching
header (”Cache-Control: no-store”);
header (”Pragma: public”);
Related links:
As a practical add-on for our loyal Flight Lab users we created a mini hangar widget that users can embed on their blog, social platform profile etc.
We happily used Clearspring as the platform for our widget, just click “Get this and Share” and take it away. If you enter the e-mail address you registered with at Flight Lab, the widget display your own planes to show off your flight machine building skills.
Related Posts:
Red Bull Flugtag Flight Lab
Developing Flight Lab
We’ve recently completed the website for the German/Italian property investment firm Stofanel Investment AG.
A subtle use of Flash and Papervision 3D creates an abstract, dreamy and atmospheric paper space to reflect the company’s vision of a harmonious relationship between nature, architecture, community and self.
The corporate identity we developed in collaboration with yippieyeah is based on botanic patterns (Phyllotaxy) as you would find in the growth patterns of sun flowers for example - it underlines the companies dedication to nature and community.
Regular readers will be pleased to find the site equipped with our usual technical treatment: fully dynamic, browser-button- and deeplink enabled (thanks to SWFAddress) and HTML-version for search engine optimization.
Last Friday we launched the first part of The Memory Project, an online 3D image bank (made with PV3D) of the 21st century ‘cyclorama’ created by artist Jason Bruges.
BBC NEWS: Life in London captured digitally
DESIGN WEEK: O2 to launch Bluebook installation by Bruges.
Bring on the wood and sheet metal! Break out your saw! Cut the pieces to size, assemble them, paint them and… voila! You’ve built your own airplane. Now it’s time to get it off the ground… will it fly…?
As of today, Less Rain’s new 3-D model application with integrated flight simulator, the Red Bull Flugtag Flight Lab, will be online, a 3-part game based on Red Bull’s Flugtag event.
Step One: The fuselage, wings and pitch elevator are cut out of Styrofoam, cardboard, wood or scrap metal. The pieces are then automatically assembled into a 3-D airplane. Material and shape will later play an important role in the machine’s flying properties.
Step Two: Customizing the parts. This can be done by uploading your own photos, designs and patterns or, alternatively, using brushes to paint the machine ‘by hand’. The results might be anything from a realistic looking airplane to an abstract flying artwork.
Step Three: The prospective pilot can test the quality of his custom-designed aircraft and its flying capabilities amidst stunning natural scenery in the 3-D flight simulator. The machine is launched from a floating launch pad using the arrow keys. First the wings beat softly then the plane takes off energetically into the big blue sky.
The goal now is to cover as much distance as possible. To achieve this, users may experiment with acrobatic maneuvers, collect cans of Red Bull to refuel and employ the thermal updrafts – but they must beware of the bumpy crosswinds!
Points are given after each flight for distance covered and piloting style. Loops, drifts, rolls, low-level flight and other maneuvers are rewarded. In addition, the other users rate the plane’s design. A total score is calculated which, if it’s good enough, may be included on a high score table.
Pilots can store their planes in a hangar where they can develop them further or try out new designs anytime. Another unique aspect of the game is that any user can take-off with any airplane and, what’s more, can change and improve it to their own tastes.
The back-end and user administration part of Flight Lab has been developed by Signal7, our partner of choice when it comes to enterprise level, tailor-made database solutions.
Related Links:
Red Bull Flugtag Flight Lab
Pilot avatar motion capture demo and the original Paperdude post
Signal7
Update:
We’re Site of the Day at the FWA! Cheers, Rob!
Update II:
We made it Site of the Month at the FWA! That’s just fantastic, thanks everybody at the FWA!
Update III:
Thank you UltraShock, for the BombShock Award! And we are Adobe Site of the Day for March 4th!
Continue reading: Developing Flight Lab
Public Service Anouncement:
WordPress decided to delete the original post. This is a re-post, meaning the original comments got lost. We’re sorry about that.
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.
Update: This position has been filled. You are still invited to send us your CV, but please use the email address specified, and not the comments section.
We are looking for a versatile Flash developer for full-time employment in our Berlin office with a solid background in object oriented web development and experience in AS3. We are seeking a motivated and confident problem solver with an eye for interaction design and a passion for web technologies.
You will be working in an international team of experienced developers in Berlin, London and Tokyo. Your role involves working closely with our front-end designers and the developer team to implement projects ranging from mini-sites and virals to large scale consumer & corporate websites. You will be working on projects such as:
Requirements
Less Rain is a digital design agency based in London, Berlin and Tokyo. We work independently & across 3 offices, in a multicultural team. Our services are aimed at producing sophisticated, concept driven, tailor made solutions for online communication, ranging from corporate to consumer websites, interactive content creation and online games, from the local to the international. Our client list includes Red Bull, BBC, Getty Images, Stockland Martel, Nike, Mitsubishi, Sega, Panasonic, Volkswagen.
Salary is negotiable dependant on experience.
We’re looking forward to your informative application via e-mail, including a CV and links to recent projects you developed. Please send your application to Thomas Meyer, bewerbung@lessrain.com
For further information about Less Rain visit:
The FIVe3D initiative is an open source code for the conception of interactive vector-based 3D animations developed by Mathieu Badimon.
The classes are written in ActionScript 2.0 and based on the ActionScript 3.0 structure. The FIVe3D system imitates a classicActionScript 2.0 MovieClip organization and provides extra 3D functionnalities.
Related Links:
Interesting BVH mocap importer class for Papervision 3D.
Related posts:
Recent Papervision achievements:
You are currently browsing the archives for the Flash category.
