Playbook development with Flash Platform

First of all a big THANKS to Mihai Corlan, Adobe Evangelist, that is helping me during this “journey”.
Everything start last year during MAX when I saw for the first time the new BlackBerry tablet: the Playbook 😀
It looked so nice, I thought that it was really amazing.
So after few months I decide to try… and now, I finally can announce that with Mihai we are working on a book on Playbook application development with Flash Platform!

It’ll be an hard job but I want to do it, I hope to receive useful suggestions and questions about this topic and believe me that I’ll be free to talk with you about that.
It will be a book made by developers for developers so I hope that you’ll enjoy it when will be released this september (more or less).
This book will cover following topics:

  • Build, port and optimize apps for the BlackBerry PlayBook tablet device
  • Work with the PlayBook OS APIs, ActionScript, Flex, AIR and other Flash tools/APIs for PlayBook
  • Build a simple app and consuming data
  • Create multimedia and gaming apps for the BlackBerry PlayBook
  • Debug and optimize your PlayBook app

For any news about this book and about Flash Platform development follow this blog and my twitter or facebook account.

Advertisement

Adobe CookBooks Reader for Android

Hi everyone,

I’ve just released on Android market the CookBooks Reader application where you can read all new recipes about Flash Platform technologies.
It’s FREE and it’s based on Flex 4 and Adobe AIR so remember to download it before download CookBooks Reader.

If you try it, feel free to leave here comments with new features or suggestions…  I’m looking for you! Let’s go Flash Platform geeks! 😛

Flex on mobile: first impressions…

Like you know I love work with mobile and embedded stuff, in particular I love working with Flash Platform on mobile devices.
In latest months I worked on Android and iOS with Flash Professional but in latest weeks I started to work with Flex HERO sdk.
I love so much work with Flex but on mobile I’ve never tried yet.
First impression is that work with Flex on mobile stuff is quite fast respect Flash because it adds a lots of usual features that a mobile application needs.

Splash page

Any mobile application that is called like that, needs a splash page to introduce the real application.
In Flex you can set it very easily directly in main MXML file.
The executable MXML file on mobile project is called ViewNavigatorApplication instead of WindowedApplication like every AIR application, this new class allow you to set splashScreenImage, splashScreenScaleMode and splashScreenMinimumDisplayTime.
Those properties allow you to choose an image file for the splash screen, set its minimum duration and finally how it works in each screen’s dimensions where application runs.

Views

I mention ViewNavigatorApplication, this is a new concept of Flex mobile applications, in fact each application is composed by different View components.
Views are so interesting because they have a lots of things pre-builted like ActionBar, activation and deactivation events, View title, caching data and so on.
Every view is managed by a navigator, with the navigator you can push or pop views (like an array) to change them.
You can also choose how they will be animated, by default you can see a simple slide left or right (depends if you are adding or removing a view).
ActionBar is a new interesting component composed by 3 elements:

  • navigationContent
  • titleContent
  • actionContent

Usually actionBar could be used like a context menu of the view, remember that on mobile development is necessary to go back in the previous mask and also remember that your user doesn’t work on an application like uses a desktop application so shortcuts are so important.

Mobile Components

The new Flex framework “Hero” added optimized components for mobile purpose.
Until now I worked with textinputs, labels and lists that works very well, I tried in 3 different Android phones and performance are quite good.
Another new component added is IconItemRenderer that is an optimized item renderer for list component for example.
This component could be customized with: title, message field, icon and a decorator class that allow you to add for example another image. This is an IconItemRenderer sample where I added also filters (a drop shadow in this case)

Device Interaction & Flex Performance

Another cool thing that allow you to save time is that back button on the smartphone is managed by the application and it automatically goes to the previous view when a user click on hit.
In my few samples I tried to work without using cacheAsBitmap and cacheAsBitmapMatrix to have better performance and believe me that you remain astonished by the performance.
In fact performance are so good, it is so optimized for mobile purpose and everything works well, I tried to add custom effects and filters but performance were amazing too.

Mobile project Architecture

This is my favorite topic, when I started to work on mobile stuff with Actionscript 3 I thought on how to have great performances but with a good architecture that allow me to maintain my application during own life.

So I investigated on how new mobile technologies work and I found that Nokia QT works on mobile with a MVVM architecture, usually instead of controllers you can use delegates but depends of the application.
Working with MVVM architecture and a good design pattern like observer you can solve any problem in a mobile project, performances are perfect and you can optimize your code in the best way you like.
There are other tests that I want to try, the first one will be using Signals instead of Observer, I’d like to know performances in a mobile project (stay tuned :P).

Final Conclusion

The new Flex framework is an interesting step to the future, with this framework I’m sure you can create cool application in few days focusing on details and not on the application skeleton.

I suggest to take a look at Adobe TV, Adobe labs and Adobe Opensource to start work with Flex HERO!

UPDATE

take a look here to the Flex mobile performance

mPresenter: new tool for speakers

I become speaker 4/5 years ago, after 30/40 talks in Italy and around the globe and tons of lessons like instructor, after study how to prepare slides for presentations, after a couple of courses about public speaking and so on, finally this January I started to think about how can I help speakers during own presentation?

When I answered to this question I started to think about mPresenter.

mPresenter is composed by 2 different applications: a mobile application and a desktop one.
Obviously everything is build with Flash Platform: AIR 2, Flex 4 and AIR for Android.
The mobile one allow you to manage your presentation, pointing or drawing on slide, changing them.
Also, it allows you to read notes added in each slide during preso composition.

AIR application allows speakers to make own presentation: moving slides in right position, adding notes to a slides and zooming on it.
You can easily drag and drop images from your OS to mPresenter and create the perfect presentation.
We are working to add new features on this software but for now you can see a preview video on youtube.
I really love if you can give us your feedbacks and suggestions to improve this software and become a really useful utility for all speakers.
We believe in you!

Flash Platform Geeks: new community is born

And YESSSSSS!

In this hot summer, I’m really glad to announce Flash Platform Geeks, a new Flash Platform community made in collaboration with Peter Elst!
Flash Platform Geeks is dedicated to all flash platform lovers like us!
Soon you can see online our website, our forum and so on, I’m really excited about this new adventure

It will be crazy, totally insane and if you go to Flash on the beach this year, believe  me, when I say that you’ll remain astonished!

So please, start to follow us on Twitter, Facebook and Flickr too!
See you around guys and thank you in advance to spread the word and follow Flash Platform Geeks

Creative Suite SDK

Last few months CS5 was presented and few people talked about a new opportunity that is CS5 SDK that allow flex developers to create native panels for Illustrator, Photoshop, InDesign and so on.

There are great opportunities because you can automatize any kind of process in your daily workflow and create your personal panel made with Flex and Actionscript 3.
If you are familiar with JS opportunities for InDesign or Photoshop, you know the power of those solutions but now you can have an interface that help your daily work.
You can also dialog with other softwares like AIR apps or native apps like a Digital Assets Management or again with other panels made with Flex!
So, believe me, now we have new and amazing opportunities with this new SDK.
The most important thing to start develop for those design softwares is to know how they work and then everything will be so natural.

With my company, we start a new project called Creative Suite Panels where people could download or buy new creative suite panels, ask us to develop one or other developers could sell own panels directly from this site (this last service soon).
We’d like to create a panels store where people can buy, sell or simple download new functionalities for own favorite design software.
In Creative Suite Panels you can also download a Flickr panel made for InDesign CS5 that allow you to search images on Flickr, download them and

For more information take a look at cs5 sdk team blog.

Multitouch with Actionscript 3 and AIR 2.0

AIR 2.0 is out with a BETA version on labs since a couple of weeks ago more or less.
It introduces a lots of new features like UDP protocol, Socket server implementation, access to raw micrhophone data, multitouch and gesture support and so on.

When I see multitouch and gesture support I start to think how many devices are touchscreen based and they are growing a lots in those months, so I start to investigate about that features.
First of all I suggest to read a cool article on devnet made by Christian Cantrell, he goes in deep about this new features and give you a lots of information about Multitouch, TouchEvent and gestures.
It’s so interesting because you can see compatibility of that features with different OS also.

In this post, I’d like to share with you a little sample on how you can create an AIR 2.0 application with Flash Builder and test it with a macbook trackpad.
In fact, you can use macbook trackpad gesture because they are supported on AIR and it’s so interesting, for example, if you want to test an application for new Wacom Bamboo pen & touch and you haven’it.
Wacom Bamboo has a new AS3 SDK for Flex and Flash that allow you to work with multitouch and gesture too, it could be so interesting if you don’t have a multitouch for an expo and you want to buy a cheap solution to give a cool interaction for your possible new clients.
Bamboo has also the availability to create “minis” that are applications dedicated to Wacom Bamboo, but you can read more at Wacom developer website.

So, in this sample we load an external image and we use gesture to try our macbook trackpad:

package {


import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;


public class MultiTouchSample {


Multitouch.inputMode = MultitouchInputMode.GESTURE;
private var sq:Sprite;


public function MultiTouchSample() {


sq = new Sprite()
addChild(sq);


this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, scaleObj);
this.addEventListener(TransformGestureEvent.GESTURE_PAN, panObj);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotObj);


var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, addImg);
l.load(new URLRequest("img/sample.jpg"));
}


private function addImg(e:Event):void{
sq.addChild(e.target.content);
sq.scaleY = sq.scaleX = .2;
}


private function rotObj(e:TransformGestureEvent):void{
sq.rotation += e.rotation;
}


private function panObj(e:TransformGestureEvent):void{
sq.x += e.offsetX * 2;
sq.y += e.offsetY * 2;
}


private function scaleObj(e:TransformGestureEvent):void{
sq.scaleX *= e.scaleX;
sq.scaleY *= e.scaleY;
}
}
}

You can see that is so simple work with gesture, a couple of suggestions before starting work with them:

  • remember to verify which gesture are supported on your system, more information you can read on devnet article about multitouch and gesture
  • TransformGestureEvent is event class dedicated to gesture
  • you can use TouchEvent also

Feel free to leave a comment and thank you to visit this blog.

Moving to LiveCycle Collaboration Service

We saw an year ago during San Francisco MAX a great project called COCOMO that allowed developers to take all features in Acrobat Connect (chat, webcam and audio streaming…) and to add in your Flex application with few lines of codes and with this “library” pre-built very easy to use.

This year at MAX in L.A. I followed a very interesting seminar about LiveCycle Collaboration Service (LCCS) that is the final name of the project COCOMO.
LCCS is very interesting for many reasons:

  • easy to use
  • very cheap service
  • very well documented
  • customizable and integrable with own desktop application or RIA made with Flex
  • open new opportunities for customer care solutions and other kind of applications

EASY TO USE

Yes, you can create your application with LCCS integrated with few lines of code. An example?
This is a little conference call environment:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF"
minWidth="400" minHeight="600" xmlns:rtc="AfcsNameSpace">
<mx:Script>
<![CDATA[
protected function startTalk():void{
pubAudio.publish()
}
protected function stopTalk():void
{
pubAudio.stop();
}
]]>
</mx:Script>
<rtc:ConnectSessionContainer id="cSession"
roomURL="https://connectnow.acrobat.com/user/room">
<rtc:authenticator>
<rtc:AdobeHSAuthenticator userName="***********" password="************"/>
</rtc:authenticator>
<mx:VBox width="100%" height="100%" horizontalAlign="center">
<rtc:WebCamera width="320" height="240"/>
<mx:HBox width="100%" horizontalCenter="center">
<rtc:AudioPublisher id="pubAudio"/>
<rtc:AudioSubscriber/>
<mx:Button label="talk" click="startTalk()"/>
<mx:Button label="stop talk" click="stopTalk()"/>
</mx:HBox>
<mx:List dataProvider="{cSession.userManager.userCollection}"
labelField="displayName" width="100%"/>
</mx:VBox>
</rtc:ConnectSessionContainer>
</mx:Application>

That’s cool, isn’t it?
You can download the sample from this link.

CHEAP SERVICE

How much does it cost!? this is the question!
It’s cheap, LCCS is totally free you can download LCCS from Adobe site; like developer you have $15  per month to use for your test, applications and so on.
This is the LCCS “menu”1:

  • 1000 push/messages:  $0.10
  • 1GB live streaming: $0.49
  • user per hours: $0.01

No any additional cost and you don’t maintain anything because you use Adobe servers with LCCS.

VERY WELL DOCUMENTED

When you download SDK you have an AIR application that guide you to use LCCS in your Flex application, you can retrieve there API, SWC for Flex and Flash, you can manage your room and your account so you have a real console for your LCCS applications.

CUSTOMIZABLE INTERFACE AND NEW BUSINESS OPPORTUNITIES

LCCS components could be integrable with your application, so you can create an intranet dashboard with a chat or a VOIP service to communicate with others fellows or maybe you can create an interactive catalogue that help users to choose right product for own requirements.
But not only, you can create collaborative solutions with a shared whiteboard and list of users that could chat or share own ideas via VOIP.
I think that a lots of desktop applications and RIAs could become more interesting with those services and also, if you think, there are many opportunities for your business.

Finally, I think that LCCS could help all developers to make own application more fashionable and useful, but also open new doors for services that are so old.
It’s easy, it’s cheap so why don’t use LCCS?! With my company we start to propose LCCS to our customers and they are so interesting about this technology because it solves some problems in particular

Flash Platform, automotive and industrial marketplace

During my last 6 months I take part in a couple of projects that are focused on Flash Platform and “unconventional devices”.
It seems strange, I know, but what I mean with the term “unconventional devices” ?

I mean that I use Flash Platform on embedded system with the purpose to create interface of industrial machine and automotive world.
Solutions based on Flex and AIR have great success for final customer, in particular because client has a great GUI with a cool user experience and he doesn’t lost any features with the hardware.
In fact we mix a couple of technologies to create those software like Python and C++.
Those tehcnologies make dirty work for us and via Socket or JSON, depends on traffic data, we make a bridge with Flex or AIR.
Performance are very cool, CPU processors move from 45% to 70%, optimization task take a great part of our time.

It was so interesting try for the first time AIR 1.5 on linux OS, we use Gentoo and Ubuntu too and I think they are very strong OS in particular development like this one.
Many people was really shocked in front of powerful of Flash Platform GUI from others developers to our clients, they can find from GPS integration until to a VOIP module made with Ribbit, from a wizard that guide user to interact with industrial machine to customization of GUI at runtime; everything in the same application that doesn’t run in a computer! Really awesome!

I saw during MAX that others companies are moving first steps trough automotive world but with Flash Lite, I think that an Intel ATOM processor has more potential and it’s so cheap for industrial market, when will be release new ARM processors (I think ARM 9…), that will be more powerful and cheap too, and Flash Player 10.1 or AIR 2.0 will have more opportunity to approach new marketplaces and also gives to many people great and easy user interface to work with.

Today Adobe releases in Adobe Labs Flash Player 10.1 and AIR 2.0 public beta, it’s a first steps to new opportunity for Flash Platform developers, many devices implements Flash Player and in future I think there will be many more.
So I’d like in a future, to find many “unconventional devices” with a Flash GUI because NOW we could make the history with those technologies.

A real workflow with Flash Catalyst and Flash Builder

Yesterday I take part of a pre-event labs at MAX called: Creating Application for the Flash Platform where Matt Boles show how to create a real workflow with Catalyst and Flash Builder.

I was interesting in this pre-event because I had some questions in my mind that I answered during this session.

First of all, I’d like to spend a couple of words about Matt Boles; guys Matt rocks! I love so much his training skills, how he explains during the session and also how he moves around the room, bring my attention for the whole duration of the session.
I think one of the best teacher that I ever seen, thank you so much Matt!

So come back on Catalyst and Flex 4; session was interesting and there are some things that I’d like to share with you:

  1. until now and probably also in the final release, if you create your project in Catalyst, then bring it to Flash Builder and start to modify it, you CAN’T go back to Catalyst…
    This is a problem because I’m sure that during a real project there will be some changes to do, so you must do that via Flash Builder Design mode or via code.
  2. Catalyst doesn’t export Flex Modules but only custom components, I talk about that with Matt and he is agree with me, after your work in Catalyst you must create in Flash Builder a Module Container and create modules for each custom components.
    So you’ll study to organize very well your assets during design process.
  3. I think that could be miss a part of a process that is a study of GUI usability, I mean, when you create a RIA or a desktop application you must study how users interact with it so if a designer starts to work on GUI but he doesn’t know how Flex works could be a big problem and you must refactoring the code to add a new functionalities or to group some components.
    Maybe could be useful start project with a meeting where designer and developer (and project manager or producer too) define informations (GUI, functionalities and so on) to create the final application and with a software like Balsamiq, define how to manage all components and custom components.
  4. I was surprise about Flash Builder design view, totally different of Flex Builder 3 one; could be useful when you want to make some little graphic changes at your project.
  5. Very cool news is data wizard of Flash Builder where in few steps you can retrieve remote data and then create VO for your application.
    Associate data to a component is really easy, just a drag ‘n’ drop in design view to a component.

This is a little resume of a day with Flash Builder and Catalyst, in a couple of hours starts the first official day at MAX with a Keynote that I think will be very interesting and with tons of news, so start to take a look at labs. I’m sure that Flash Player 10.1 become your best friend!!!

Obviously, feel free to add comment to this post and we could start an interesting conversation on how is the best way to realize a RIA or desktop app with Flash Platform.
I’m so interesting to know what do you think about that!

See ya 😉