FITC

By Peter Buth (UI Architect), April 2011

What started out as Canada's Flash TM Event about 9 years ago has become a world-wide event around Flash and related design technologies with around 50 events so far. For the 4th time FITC (abbreviation comes from its origin title “Flash In The Canada”) is also held in Europe, namely Amsterdam.

All kinds of Digital Creators meet here to learn about new technologies and to get inspired.

This year's FITC Amsterdam took place March 8th and 9th plus option for an additional full day workshop on March 7th. About 350 participants took the chance to meet each other - some maybe merely came for the 2 evening parties...

7 - March -2011

Starting quite early in the morning and after about 3 hours travelling by train and taxi I finally arrived at the FITC Festival location (http://www.meervaart.nl/) in the western part of Amsterdam - thanks to Deutsche Bahn (and no strikes that day) just in time for my “Flash on devices – workshop” starting at 10 a.m.

After quickly setting up our notebooks Flash Developer Evangelist Paul Trani and Flash Senior Product Manager Tom Barclay (both Adobe) presented a lot of hot stuff around what's up and coming to the Flash Platform. "Flash on devices" was the name of the ~6 h workshop showing how to design for multiple screens - meaning for different screen resolutions and even different platforms. Gaining some hands-on experience with the latest tools to develop for and deploy to smartphones and tablets was extremely cool. Maybe some of the tools & technologies will be seen during this year - some will maybe just remain experimental.

Nevertheless it was exciting to see some new approaches of tackling development for the emerging mobile device landscape - even across different device categories.

One part of it was Adobe AIR 2.6 for Android, which was just recently released for Froyo, Gingerbread and Honeycomb. Besides some performance improvements related to scrolling, H.264 video and GPU accelerated animations also additional Android gestures, Bitmap Capture for StageWebView and support for iOS/iPad have been added, just to name a few enhancements. (http://blogs.adobe.com/air/2011/02/adobe-air-2-6-for-android-is-now-available.html & http://blogs.adobe.com/cantrell/archives/2011/03/everything-new-in-adobe-air-2-6.html)

You might wonder that there is no AIR 2.6 SDK yet (this is targeted to be available within Q2), but the Content Viewer which is part of the Digital Publishing Suite was needed to be made available in order to support creating and viewing digital publication on Android devices.

I'd like to share more of my experiences during this workshop, but unfortunately almost all of the stuff presented today is under NDA, so you need to wait and see later :-)

8 - March - 2011

Early this morning – before I took the shuttle bus to the FITC departing from another hotel nearby – there were already some announcements on Adobe Labs: Adobe Flash Player 10.3 Beta and Wallaby prerelease. So now I am allowed to talk about some of the things I have already seen yesterday 

Using Wallaby it's now possible to convert a single flash authoring file (.fla) to HTML 5, CSS 3 and JavaScript (using Query) files plus a folder containing SVGs and graphic files. You just need to drag and drop the file to the conversion window of Wallaby. In case there are some unsupported features you will be notified in the warnings pane.

When you opened the created HTML file (+ supplementary files) in a Webkit engine powered browser the content will look almost identical to the original Flash file! Of course you cannot expect fancy, ActionScript-loaded files to be completely converted, but at least time line based animations as well as graphical assets will be converted & extracted.

At least for agencies creating animated banner ads this might be extremely useful. This tool also shows that Flash and HTML 5 not necessarily have to be opponents.

Note that sound and video as well as other things like blend modes are not converted, but let's see how this tool will evolve over time and which features will be added in the future! This also depends on feedback and feature requests from the community. So go, get the beta and try out yourselves whether your motion and shape tweens won't be converted too. And maybe also files using Inverse Kinematics might be transformed to something useful... .

As already mentioned also a new beta version of the Flash Player has been released in Adobe Labs. Some of the enhancements: Acoustic Echo Cancellation, Media Measurement and Integration with browser privacy control for local storage. For details please see Adobe Labs.

At 10 a.m. I started my second FITC day joining the "HTMLArraaagh!" presentation by Doug Winnie (Principle Product Manager, Interactive Design, Adobe).

Recognizing that there is a shift in mobile technology towards HTML 5 & CSS3 he recently started to experiment with HTML5 which is often used as an acronym for using a bunch of new technologies like HTML5 Canvas (originally from Apple for dashboard widgets), CSS3 (especially Transitions, Transforms, Animations) and JavaScript.

According to him up to now only 27% of desktop browsers support CSS3 Transformations and HTML5 Canvas while the mobile versions already reach 75% (or even 98% in case of HTML5 canvas) - basically due to the Webkit engine. But IE9 (which shall be available even on Windows Phone 7 later this year) also has great hardware acceleration for many HTML5 related features.  So his key message was "While these technologies might not be as useful today for desktops, they will be an important part of tablet and mobile web design today and in the future."

Most time of the session Doug Winnie basically demonstrated how he started experimenting with CSS3 Transitions & Animations as well as the HTML5 canvas and how he step by step added more functionality to that.

During the Adobe Keynote Adobe Fellow Mark Anders continued with that topic:

The last year has been a wild year for mobile devices and especially tablets: there have been e.g. about 100 announced on CES recently ...

Also HTML 5 was a topic heavily evolving during the last 12 months. Just taking the FITC Amsterdam into account - there has been no HTML 5 related session last year; this year there are 8 sessions and even one full-day workshop!

But Flash has been a big topic, too: Flash player 10.1 to 10.3 and AIR 2.5 (for Android even 2.6) have been announced. Also Beta versions of Flash Catalyst (Panini) and Flash Builder (Burrito) including Flex 4.5 framework (Hero) became available via Adobe Labs - adding support for mobile devices and even multiscreen development.

Mark Anders continued showing some website examples (e.g. http://mckinney.com/) with some animation at that look like Flash content, but actually were HTML 5... . (See some impressive HTML 5 demos also here: http://sebleedelisle.com/demo - use a Browser with Webkit engine).

There is a lot of movement from Flash towards HTML 5 and also Adobe is more investing in that.

One of these investments is the Wallaby tool available on Adobe Labs (see above). Another one is "Adobe Edge Prototype", which is a prototype of a tool for creating animations and transitions using the capabilities of HTML5. It looks similar to Flash Catalyst but is targeted for HTML 5, CSS 3 and JavaScript (instead of the Flash platform). Same as in Catalyst there are Layers, Properties, etc. panels available and a timeline that enables animation of the different elements. In the upper part of the tool the content and the animations can be seen using the Webkit engine. (See e.g. http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/ for a brief preview).

As you might know - in HTML 5 there is only a video tag, but no format information available. Also currently there is no browser that supports both H.264 AND WebM/VP8 formats. Only the Flash Player will support both in an upcoming release.

Mark Anders also presented EaselJS (See some examples from easeljs.com, e.g. http://easeljs.com/examples/sparkles.html) and Zoe (http://easeljs.com/zoe.html) a tool to export swf animations to sprite sheets.

Further demos impressively showed the performance gain for Flash Video when playing with Flash Player 10.2 compared to version 10.1. The latter uses the GPU for decoding but the CPU for presentation while version 10.2 utilizes the GPU for both: Having a look at the CPU load with HW acceleration turned on revealed that it's only 10% (or even less!!) of the CPU load without GPU support!

Besides the Flash Player runtime for the browser there is also the Adobe Integrated Runtime (AIR) for standalone application on Desktop but essential on mobile devices.

As already mentioned lots of new tablet devices have been announced during CES beginning of this year. Most of them will support Flash Player 10.1 and AIR 2.5 (or even have it integrated).

This also strengthens digital media coming to mobile devices. One upcoming product to create publications for tablet devices is the Digital Publication Suite (http://www.adobe.com/products/digitalpublishingsuite/). The actual publication will be displayed using the Content Viewer (an AIR based application running on the iPad as well as on Froyo and Honeycomb OS tablets).

GAMES

Also when talking about games Flash technology is a key player: Many know Flash based games like Farmville by Zynga. More than 65 million daily users on the Zynga gaming platform - with 14 million Farmville users per day - that's really impressive!

http://infographiclabs.com/infographic/zynga-statistics-the-complete-platform-and-revenue-analysis/

And with 3D in Flash games it's getting even more impressive - currently many developed using Papervision3D. But there is more: Away3D (recently 4.0 alpha announced), Sophie 3D, CopperCube, Flare3D - just to name a few tools and engines.

Besides that just 10 days ago Adobe made a preview of "Molehill" available on Adobe Labs which is a bunch of low-level 3D APIs for Flash and AIR that are GPU-accelerated. Molehill shall be release within this year.

For more information please see http://labs.adobe.com/technologies/flashplatformruntimes/incubator/ and http://www.bytearray.org/?p=2555. There are already some engines starting to support the APIs: http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html  and http://blogs.unity3d.com/2011/02/27/unity-flash-3d-on-the-web/ .

FLASH TOOLS

But any news about existing Flash related tools? They will better support development for mobile devices in future versions, too. In the "Flash Professional Sneak" Mark Anders demonstrated some of the planned new features and enhancements like sharing assets between Flash files and on-device debugging.

Furthermore Flex (the open-source framework for building web application) is brought to mobile devices. What started out as separate project (maybe you remember the Flex mobile SDK codenamed "Slider") is now included in version 4.5 of the "normal" Flex SDK (codename: "Hero"), which now targets both mobile and desktop apps with retro-fitting the existing Spark components (introduced with Flex 4 SDK) for mobile. So you can basically use the same Flex component Framework to create standalone AIR apps to targeting Android, iOS and RIM/BlackBerry Tablet OS as well as the PC desktop.

The beta versions of Flash Builder 4.5 ("Burrito") development tool and the Flex 4.5 framework already support creating application for iOS, Android and the BlackBerry Tablet OS (when having installed the Blackberry Tablet OS SDK for Android AIR). For example there are 2 new project types added to Flex Builder: Flex Mobile Project and ActionScript Mobile Project. Selection of one of these enables to either run the app in a mobile device simulator or deploy it to an actual device connected via USB. Moreover many enhancements like quick assist and quick fix are implemented to enable using code templates and easing consistent renaming of variables and function throughout the entire code.

9 - March - 2011

A separate session with Andrew Shorten (Senior Product Manager for Flash Builder) and Deepa Subramaniam (Senior Product Manager for the Flex SDK) was dedicated to the new and upcoming features in Flex, Flash Builder as well as Flash Catalyst used for rapidly building RIAs - also for mobile devices.

Topics have been the development of mobile content and applications, improved development experience for Flex and ActionScript and the robust bi-directional design-developer-workflow (=> Catalyst). XXX demonstrated creating a Mobile Flex project with the additional settings for mobile:  target platform, selecting from application templates (blank, view-based-app, tablet app), option for automatic scaling of apps for different screen densities and setting of permissions (e.g. for Android)

Besides enhancing visual development and per device preview in design mode, multiplatform & multidensity authoring support and  one-click launch or debug on device there
are also more than 25 Coding productivity features in Flash Builder like code templates, metadata code completion, invalid reference live highlighting, quick fix/assist and override/implement methods.

Moreover also performance enhancements have been made with 20% improvement in both compile time and memory usage for really large projects. The next Flash Builder will even have new MXML compiler for further performance improvements.

At the end of the session unfortunately only some minutes were left for a quick look at Flash Catalyst and the improved designer-developer-workflow: the designer starts with a design composition in either Adobe Illustrator or Photoshop which will then be imported to Catalyst. In Catalyst components are created from the artwork, the appearance for different application states is defined as well as the interaction between the components and states. Output is an FXP file (meaning a Flex project) to be imported to Flash Builder where the developer can do further tweaks. This ensures that the developer has the correct graphic assets and at least a working prototype of the application where he also can add access to backend functionality. On the other hand designers can create prototypes without any coding. In the next version of Flash Catalyst

e.g. resizable components add constraints for placement will be included as well as several workflow enhancements – e.g. as the possibility to import projects modified in Flash Builder in Flash Catalyst with compatibility check between both tools.

Let's see whether the final versions of these updated tools will be available still within the first half of 2011...

PlayBook:
One of the devices that Flash tools can be used to develop for is the BlackBerry Playbook - the 7" tablet device RIM announced last fall. As it's not yet available I chose to get first hand information by attend the session about "Building BlackBerry PlayBook Applications with Adobe AIR" by Sanyu Kiruluta (Team Lead for Developer Relations, EMEA at Research In Motion). Unfortunately there was only little information on how to get started development for this device but more about the device itself.

Taking into account the BlackBerry community with more than 55 million global subscribers and 300.000 registered developers (as of October 2010; mainly Java, some for web development) it seem sensible to also take BlackBerry devices into account when developing mobile applications.

Just some keyfacts: The PlayBook is a tablet device with 7" display (1024x600 px resolution) running a 1 GHz dual core processor with 1 GB RAM. It has a 3 MP (front) and a 5 MP (rear) camera, Micro HDMI output, WiFi (R) 802.11 a/b/g/n and several sensors built in. All in all only about 425 g weight.

The Blackberry Tablet OS is built on QNX technology and supports true multitasking as well as multitouxh with up to 4 touchpoits. As the first version does not support mobile data connections you actually need to pair the device via Bluetooth with a BlackBerry phone in order to access email, calendar etc. using push technology. You also cannot transfer e.g. pictures from your BlackBerry phone to the Playbook, as latter does not store them and they are gone after un-pairing the devices. (Probably this will change in the future as I assume there will also come UMTS versions of the PlayBook.)

The PlayBook uses a Webkit browser and fully supports Flash Player 10.1 and AIR 2.5. Besides HTML5 Audio and Video also Adobe Flash Stage Video as well as SQLite can be used.

As mentioned there are some specific touch gestures and interactions only seen on the PlayBook.

Drag/swipe

• from the top of the screen: application specific menu open
• from the bottom top of the screen: display the navigator
• from the left or right of the screen: switch between application
• from the bottom left of the screen: opens the touch keyboard
• from the bottom right of the screen: changes orientation

Though the presentation did not tell much about how you start developing - there is a quite good webpage for Tablet OS Application Development using Adobe AIR  (http://us.blackberry.com/developers/tablet/adobe.jsp) where you find everything you need: Getting Started Guides and other use full information (e.g. the Webcast series about developing for the BlackBerry® Tablet OS SDK for Adobe® AIR®) as well as the links to all required tools for your development platform - no matter whether you use Windows, Mac and Linux OS. But note that you have to register as developer at BlackBerry Developer Zone in order to get access to most of the stuff - though registration is for free. Also you are not charged when submitting apps to the BlackBerry App Market. And maybe you have heard about the notary requirement - that has been completely removed!

Interested in developing for the PlayBook? Then go ahead and download the tools. I already did.

And if you succeed in creating an application and submitting to the BlackBerry App World by March 31st you will even get a BlackBerry PlayBook for free :-)

Ok, now once that you have installed the BlackBerry® Tablet OS SDK for Adobe® AIR® and the BlackBerry PlayBook Simulator - how do you create applications using Adobe technologies? And how can you actually build the same application for different platforms/device with only little additional effort?

I expected the answers from the two other sessions I visited: "Tips and Tricks for Mobile Flash Development" and "Mobile Design and Prototyping for Multiscreen".

In the first one by Paul Trani started with an overview how aspects like continuous growth of processing power for smartphones, tablets and IP TVs, improved bandwidth for internet connections, battery power and display size and resolution have lead to a shift from desktop to mobile computing. So when developing an application we better should start with thinking about the mobile version.

But what are the aspects that should be taken into consideration when designing an application for mobile devices?  There are different device classes with different display resolutions (and pixel densities) and screen orientations. For touch-enabled devices we need to think about size of controls where to place them (and the content) in order not hide content with the hand operating the device. Also not always buttons are needed as gestures could do the same (or even a better) job. What about making use of the device capabilities (e.g. accelerometer, GPS, camera, multitouch, ...)? On orientation changes we need to think about a new layout for the application. Also for the different resolutions applications should not simply resize the content.

Moreover the different platforms have a different user experience (UX). When comparing the controls and on Apple iOS, Google Android and BlackBerry Tablet OS you recognize that they are very different with respect to number and placement. In order not to break the UX our application design needs to take that into account.

The rest of the session - indeed the longest part - Paul was talking about different aspects of optimization for mobile like usage of different graphic types (with respect to memory size and performance), hardware and software rendering, which Flash features better not to use, CPU vs. GPU usage as well as ActionScript-related performance issues – as the session title said: a bunch of tips and tricks when developing for mobile using Flash tools.

Serge Jespers (Senior Developer Evangelist, Adobe) somehow continued where Paul Trani left off. We definitely need all these tips and techniques for developing for mobile but why and how shall we develop for multiscreen? That was his initial question. There are no longer only phones, there are tablets, AIR and Flash enabled TVs, set top boxes, blue ray players etc. And in many cases we want to use the same applications across all these. A good example is Evernote: Maybe you start note taking in the office on your Windows PC, like to add some more notes on your iPhone on your way home in public transport, view them at home on your TV screen or sort them and print some using your Android tablet device while sitting on the couch - always having them in sync on all devices.

But there are several more aspects to think about:

• Do you really need an application or is the browser sufficient?
• Use device specific features for additional functionality.
• Does the app really need to run in the background while doing other tasks?
• Is application data to be shared between the different platforms?
• Ensure that your application has the correct permissions (and only the required ones) in order?

Evernote might be a good example but there are other where one or more of the above aspects was not thought about. Or why is the geo-location not saved together with pictures in Picplz?

Also it might be a good idea not to build a Swiss army knife when several dedicated (but simpler) tools might work even better...

Then Serge showed an example of a simple proof of concept application he create for PC, Android smart phone, Android tablet, Google TV, AIR for TV set top box and BlackBerry Playbook. 1 code base, 6 devices and it took him only about 5 hours to get all of them running. Keep in mind that they use different display resolutions, controls (touch screen, keyboard, remote control, …) and platforms! Basically the user interface and interaction had to be adapted to the different platform and device specifics, but mainly using the same code base. (See also http://www.webkitchen.be/2010/11/12/1-code-base-5-hours-5-devices-powered-by-flash/ and http://www.webkitchen.be/2010/12/08/1-code-base-6-devices-now-including-blackberry-playbook/ for some videos)

The rest of the session he did some live coding demonstrating how he started developing the application. Unfortunately some beamer problems and the lunch break stopped him in the middle of the exercise...

But nevertheless it was quite impressive to see how the Adobe tools support in developing for different devices and platforms. And I became interested in trying out myself ;-)

There have been even more interesting presentations but as most of the time up to four of them ran in parallel I had to make my decisions in advance. What a pity! But there are other interesting conferences to go. Maybe I’ll meet some colleagues at FFK11 (Flashforum Conference) in Cologne April 5th to 8th or during next year’s FITC Amsterdam?

At least this year’s FITC was very inspiring. I'd like to go there again.