{"id":1216,"date":"2015-02-05T14:40:04","date_gmt":"2015-02-05T13:40:04","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=1216"},"modified":"2015-02-05T15:07:35","modified_gmt":"2015-02-05T14:07:35","slug":"geophysic-making-air-shine-thanks-to-feathers","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/geophysic-making-air-shine-thanks-to-feathers\/","title":{"rendered":"Geophysic, making AIR shine thanks to Feathers"},"content":{"rendered":"

Update: The project has been FWA mobile of the day<\/a>! Note that this blog post was written 3 months before its publication.<\/em><\/p>\n

This new project was kind of special for me, I made an iPad application, Geophysic\u00ae<\/a> with one of the best French agency Soleil Noir<\/a> for the famous luxary watches Jaeger-LeCoultre<\/a>. No less!
\nWhen 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.<\/p>\n

<\/p>\n

\"screen480x480\"<\/a>Going Native or AIR?<\/strong>
\nObviously my first choice concerning Geophysic\u00ae 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.<\/p>\n

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.<\/p>\n

Without any doubt, I was more comfortable with AIR so I took this road and I never regretted it at all!<\/p>\n

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

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<\/strong>. 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…!<\/p>\n

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.<\/p>\n

Flash TextField<\/strong>
\nFlash has always been a great tool to display text. Ok, I know it has always been crazy with defaultTextFormat<\/em>, setTextFormat<\/em>… 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!<\/p>\n

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<\/em> since textfield.text<\/em> doesn’t include this information. Have a look on the extension we made<\/a> for Feather’s TextFieldTextRenderer class.<\/p>\n

Animations<\/strong>
\nIf 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.<\/p>\n

Also on the Chapter 3, we used Starling-Extension-Graphics<\/a> 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.<\/p>\n

Transitions<\/strong>
\nI used my beloved Citrus Engine<\/a> 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:<\/p>\n

\/\/we draw our screen content into a bitmap data\r\nvar bmpd:BitmapData = stage.drawToBitmapData(null, false);\r\nvar texture:Texture = Texture.fromBitmapData(bmpd, false, false, _ce.scaleFactor);\r\nvar img:Image = new Image(texture);\r\n\r\nStarling.current.stage.addChild(img);\r\n\r\n_ce.state = newChapter; \/\/the previous state is automatically garbaged thanks to the Citrus Engine\r\nnewChapter.x = stage.stageWidth;\r\n\r\n\/\/ waiting upload\r\neaze(this).delay(2.25).onComplete(function():void {\r\n\teaze(img).to(1, {x:-Starling.current.stage.stageWidth}).easing(Expo.easeInOut);\r\n\r\n\tTweenLite.to(_ce.state, 1, {x:0, ease:ExpoInOut.ease, onComplete:function():void {\r\n\t\ttexture.dispose();\r\n\t\tStarling.current.stage.removeChild(img, true);\r\n\t\tbmpd.dispose();\r\n\t}});\r\n});<\/pre>\n
Video ANE<\/strong>
\nThe 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:<\/p>\n