Geophysic, making AIR shine thanks to Feathers

Update: The project has been FWA mobile of the day! Note that this blog post was written 3 months before its publication.

This new project was kind of special for me, I made an iPad application, Geophysic® with one of the best French agency Soleil Noir for the famous luxary watches Jaeger-LeCoultre. No less!
When I was a student, Soleil Noir was the best French agency and we all dreamed to work there! So you could imagine how fun it was to work with them! As a luxury brand, Jaeger-LeCoultre, has a very high expectation of the final product. Combined with Soleil Noir’s graphic designers, it results in a top quality iPad application.

screen480x480Going Native or AIR?
Obviously my first choice concerning Geophysic® was the technology. The client wanted only an iPad application, so no cross-platform needed at all. As I read the specs, my intuition was to go for pure Objective-C, but as I went down the list, I had doubts.

There were multi-languages support (English, French, Spanish, German, Chinese and Japanese) via an XML with HTML support for multiple-fonts, exponent, links, multi-color text etc. There was also leading, letter spacing on typography, dynamic text field background color, etc. We must have scrolling functionality controlling exactly the position (it wasn’t always a screen sized), parallax, complex animations and deep video support.

Without any doubt, I was more comfortable with AIR so I took this road and I never regretted it at all!

screen480x480-1Feathers
The client expected the app to be blazing fast. So I used Stage3D via Starling. The complex part was on all the UI: slider, list, scrolling text, panel, screen scrolling etc. Since several years I followed Feathers which is a Starling library for UI inspired by iOS default one. I already used it a bit for Alef, for list, but I didn’t like its API. Anyway I knew it was the way to go.

Feathers is not easy to get started with : complex API, the factory design pattern everywhere, some properties don’t provide IDE’s auto-completion etc. But mother of god, it works, it just work like a charm. All the default behavior clone perfectly iOS one, and we may change parameters in no time. So kudos Josh! Also thanks to be so open-minded, asking for feedbacks, discussing your API choices…!

I used Feathers 2, performances are awesome. I may scroll at 60 FPS a long chapter having 14000px height (on an iPad 3 retina) with many scrollable text, parallax on images, fullscreen slideshow etc.

Flash TextField
Flash has always been a great tool to display text. Ok, I know it has always been crazy with defaultTextFormat, setTextFormat… but in terms of features which other technology can compete? And with its html support you may combine fonts change, color, size etc. However Starling doesn’t use Flash TextField and so there isn’t html support. It doesn’t matter, Feathers may use native Flash Textfield: it creates the TextField, turns it into a texture and upload it onto the GPU for using with Starling. Performances are awesome! Full htmlText support and we may also use leading and letter spacing. I know doing this via Objective-C and Xcode is a crazy nightmare. Flash, you (still) rock!

We’ve also added support to link in html with many paragraph and the ability to draw quad behind letters (see slideshow caption). It was complex to parse the htmlText since textfield.text doesn’t include this information. Have a look on the extension we made for Feather’s TextFieldTextRenderer class.

Animations
If you give a look to the Chapter 1, you will encounter a nice animation on the family tree. It is interactive. That would have been another complex thing to do with Objective-C. We use Flash Pro to create components with familty tree informations and position them on a MovieClip. Then we export a SWC. At runtime we parse the SWC and create the according textures. That was a quick process, I wouldn’t imagine to do that with Objective-C.

Also on the Chapter 3, we used Starling-Extension-Graphics to create donuts-like and make them grow at runtime. Sure it could be done in Objective-C but it’s way faster to do that in Flash.

Transitions
I used my beloved Citrus Engine for all the state process, sounds etc. Something really complex was to have smooth transitions between chapters. When you know chapter size you know that you won’t be able to have two chapters at the same time and make a quick transition. So I used like a “cache” system:

//we draw our screen content into a bitmap data
var bmpd:BitmapData = stage.drawToBitmapData(null, false);
var texture:Texture = Texture.fromBitmapData(bmpd, false, false, _ce.scaleFactor);
var img:Image = new Image(texture);
 
Starling.current.stage.addChild(img);
 
_ce.state = newChapter; //the previous state is automatically garbaged thanks to the Citrus Engine
newChapter.x = stage.stageWidth;
 
// waiting upload
eaze(this).delay(2.25).onComplete(function():void {
	eaze(img).to(1, {x:-Starling.current.stage.stageWidth}).easing(Expo.easeInOut);
 
	TweenLite.to(_ce.state, 1, {x:0, ease:ExpoInOut.ease, onComplete:function():void {
		texture.dispose();
		Starling.current.stage.removeChild(img, true);
		bmpd.dispose();
	}});
});

Video ANE
The big deal of this application coded with AIR was videos. I had to display video with content above. Also in the last Chapter, there are several videos running at the same time. Now let’s have a look on what AS3 offer concerning video:

  • Flash display list Video object is not efficient.
  • StageVideo may not have any things related to Starling on top of it and may only have 1 Video playing (on mobile).
  • Using an HTML wrapper would be really inefficient.
  • VideoTexture is still not available on mobile.

Dammit! VideoTexture would be the perfect solution but it isn’t available on mobile at the moment. So? Let’s go native thanks to AIR Native Extension! Have a look on my Video ANE. Displaying video on Objective-C side gives me awesome performances! However since Objective-C is on top of Flash I can’t put any AS3 object on my video. So I coded a whole part in the ANE for giving bitmapdata from Flash to Objective-C to create an image and even display animations in Objective-C. Then being able to remove them etc. That was quite funny 😉
Obviously this part would have been done faster if the whole project was in Objective-C, but without any doubt I did the project way faster with AIR than if I used Objective-C.

AIR shine and other tech?
I’m really happy to use AIR daily. Once we will have the VideoTexture and workers (for concurrency on iOS) features I don’t see anything missing to AIR & Starling with Feathers. And when you know the whole project runs fine on Android (except the video native stuff), desktop and web, you don’t look back to native.

And you what do you think ? Which other tech could have done this app without pain? Xamarin?

11 thoughts on “Geophysic, making AIR shine thanks to Feathers

  1. Amazing app, congrats.

    but the app is crashing on chapter8 on iPad 2.
    It happen one I click on the video in home page and if I navigate through the app.

  2. Congrats! Care to share your secret sauce to make scrolling text perform well? I haven’t been getting good performance on my scrolling textfields when I use Feather’s ScrollText .

  3. Great, thanks for sharing.

    Small suggestion:

    char = htmlText.charAt(htmlPos).toLowerCase();

    in findHtmlSection function makes short links don’t work properly: bit.ly , t.co.

Leave a Reply

Your email address will not be published. Required fields are marked *