Leonardo França » Adobe AIR http://www.leonardofranca.com Flash Platform, Adobe AIR, ActionScript, Flash, RIA, Flex, Flash Media Server, RED5, Flash Lite, PHP, ZendAMF, AMFPHP, Java, GraniteDS, BlazeDS Thu, 09 Sep 2010 07:01:18 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Motion Detection Webcam with Adobe Flash http://www.leonardofranca.com/index.php/2010/08/27/motion-detecting-webcam-with-adobe-flash/ http://www.leonardofranca.com/index.php/2010/08/27/motion-detecting-webcam-with-adobe-flash/#comments Fri, 27 Aug 2010 10:56:16 +0000 Leonardo França http://www.leonardofranca.com/?p=654

An interesting feature and that few people know the Flash Player or Adobe AIR, is that in addition to access features like the webcam user, it can also detect whether there is movement in the camera. This can be useful if you're implementing a system to stream live and want to save the bandwidth used. For example, the stream will only be published if you have any camera motion.

Flash Player or Adobe AIR, beyond access features such as webcam user can also detect whether there is movement in the camera.

Let's see an example using Adobe Flash Professional CS5 and Flash Builder 4 (using the Flex framework 4).

Adobe Flash Professional CS5

  • Create a file of type ActionScript 3.0
  • Press F11 to open the library, ask to create a new symbol type "video":

    Library->New Video

  • A new window appears, in the name of "cam" and leave the option "Video (ActionScript-controlled)" selected:

    cam

  • Drag the component you just created for the stage and the instance name of "cam", then resize to 320x240.
  • Drag a ProgressBar component's type library of the User Interface. Name the instance "pbar".
  • After that you should have something like this:

    Stage ready to start programming

We have our stage ready to start programming ActionScript 3.0. Let's start with asking the Flash Player to access the webcam and then put the image of the webcam in our component video.

PLAIN TEXT
ACTIONSCRIPT3:
  1. myCam = Camera.getCamera();
  2. cam.attachCamera(myCam);

Now just to make our movie listen to the event "ActivityEvent" Webcam.

PLAIN TEXT
ACTIONSCRIPT3:
  1. myCam.addEventListener(ActivityEvent.ACTIVITY,handlerMotion);

And handlerMotion method, we implement the actions in the ProgressBar.

PLAIN TEXT
ACTIONSCRIPT3:
  1. function handlerMotion(evt:ActivityEvent):void
  2. {
  3.     trace(evt.target.activityLevel);
  4.     pbar.setProgress(evt.target.activityLevel,100);
  5.     if(evt.target.activityLevel <10)
  6.     {
  7.         trace("muito quieto! =õ(");
  8.     }
  9.     else
  10.     {
  11.         trace("eba! festa!!! \\o/\\O/\\o/");
  12.     }
  13. }

See example in operation:

Adobe Flex 4
We will now see an example using Adobe Flex, I'll grab the camera using component VideoDisplay.

  • Create a project of type web (Flex) or Desktop (AIR).
  • Drag a component of type VideoDisplay and another type ProgressBar to the stage.
  • We have something like this:
    PLAIN TEXT
    MXML:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3.                xmlns:s="library://ns.adobe.com/flex/spark"
    4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="450" minHeight="400" width="450" height="400">
    5.     <s:VideoDisplay id="cam" x="48" y="38" width="360" height="240"/>
    6.     <mx:ProgressBar id="pbar" x="125" y="297"/>
    7. </s:Application>

Simply implement the ActionScript programming now, is very similar to the way we did in Flash. We will change little in the ActionScript 3.0 code.

PLAIN TEXT
ACTIONSCRIPT3:
  1. protected function application1_creationCompleteHandler(event:FlexEvent):void
  2. {
  3.     pbar.mode = "manual";
  4.     myCam = Camera.getCamera();
  5.     var vd:Video = new Video(320,240);
  6.     vd.attachCamera(myCam);
  7.     cam.addChild(vd);
  8.     myCam.addEventListener(ActivityEvent.ACTIVITY, handlerMotion);
  9. }
  10.  
  11. private function handlerMotion(evt:ActivityEvent):void
  12. {
  13.     trace(evt.target.activityLevel);
  14.     pbar.setProgress(evt.target.activityLevel,100);
  15.     if(evt.target.activityLevel <10)
  16.     {
  17.         pbar.label = "muito quieto! =õ(";
  18.     }
  19.     else
  20.     {
  21.         pbar.label = "eba! festa!!! \\o/\\O/\\o/";
  22.     }
  23. }

Now, we only apply the logic to be transmitted or not the stream of the webcam user.

DOWNLOAD SOURCE FLEX

More:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Camera.html?allClasses=1

Recommended Books:

Buy Softwares:

]]> http://www.leonardofranca.com/index.php/2010/08/27/motion-detecting-webcam-with-adobe-flash/feed/ 1 Options for Mobile Development http://www.leonardofranca.com/index.php/2010/08/19/options-for-mobile-development/ http://www.leonardofranca.com/index.php/2010/08/19/options-for-mobile-development/#comments Thu, 19 Aug 2010 21:07:56 +0000 Leonardo França http://www.leonardofranca.com/?p=606

Desenvolvimento MobileThe mobile market is one of the fastest growing lately, and with it the demand for applications for this growing niche also bringing one more option for anyone who is a developer and new business opportunities. You developer who likes to keep up, you know exactly what I'm talking about. In this article I gathered some links that those who want to start with mobile development in at least three different platform in which I had lately demands.

The mobile market is one of the fastest growing lately, and with it the demand for applications for this growing niche also bringing one more option for anyone who is a developer and new business opportunities

Among the platforms available for mobile development, we can highlight:

  • Java with JME
  • Nokia Qt, besides being able to use WRT(Web RunTime)
  • Flash Lite
  • Android SDK from Google with the addition of Adobe AIR and Flash Player 10.1
  • IPhone

'll Comment a little bit of each:

Java with JME
JME (Java Micro Edition) is the version that Sun offers for you to program in Java for mobile devices. It offers an enormous range of API's that were made specifically. Has a very complete documentation and several examples. I leave a link how to set up your environment for development JME.

Nokia Qt
Nokia offers Qt, Cross-plaftorm application and UI framework, with specific libraries for mobile devices (such as QTMobility). You program in C++ and there is an interface language like MXML. Has its own IDE and has emulators for Symbian S60, 40 and Symbian^3 beyond Maemo and Meego.

Adobe Flash Lite
Adobe Flash Lite still has space on the market, with a different version of the Flash player with some features specific to mobile devices. The development environment is to own Adobe Flash Professional and Adobe Device Central.

Google Android
Google offers for the Android platform a set of SDK's and emulators for the different versions of its operating system with each passing day it becomes more popular. It has a plugin for you to program in Eclipse, the Android Development Tools(ADT). The language used is Java. From Android 2.2 (Froyo) you have the option to create applications in Adobe AIR, the AIR runtime is installed on the device and you create the application using Adobe Flash Professional (which has an extension to create the files .apk) or Adobe Flash Builder.

Apple IPhone
Who wants to program for iPhone, ipad and the like, Apple provides an SDK. You use the Objective-C language, derived from C, and some interesting libraries developed for working with muiltitouch like Cocoa. We'll find a list of frameworks.

Well, we have options, it behooves us to analyze only that can best serve our customers. Should stay something about Windows Phone 7 because it seems to me very promising and deserves attention too.

Recommended Books:
JME
Beginning Java™ ME Platform (Beginning from Novice to Professional)
J2ME: The Complete Reference
Enterprise J2ME: Developing Mobile Java Applications
J2ME Game Programming (Game Development)

Nokia Qt, C++, Symbian, Meego
Qt for Symbian
S60 (Software Platform): Qt, Nokia 5800 Xpressmusic, S60, Nokia Pc Suite, Python for S60, the Core Pocket Media Player, Nokia E75
Beginning Nokia Apps Development: Using MeeGo, Mobile QT and OpenSymbian
Porting to the Symbian Platform: Open Mobile Development in C/C++ (Symbian Press)

Adobe Flash Lite
AdvancED Flash on Devices: Mobile Development with Flash Lite and Flash 10
Professional Flash Lite Mobile Development (Wrox Programmer to Programmer)
Foundation Flash Applications for Mobile Devices

Android
Hello, Android: Introducing Google's Mobile Development Platform (Pragmatic Programmers)
Android Application Development: Programming with the Google SDK
Professional Android 2 Application Development (Wrox Programmer to Programmer)

IPhone
Beginning iPhone 3 Development: Exploring the iPhone SDK
iPhone Programming: The Big Nerd Ranch Guide (Big Nerd Ranch Guides)
The iPhone Developer's Cookbook: Building Applications with the iPhone 3.0 SDK (2nd Edition)

Windows Phone 7
Learning Windows Phone Programming
Windows Mobile Game Development: Building games for the Windows Phone and other mobile devices (Expert's Voice in .NET)
Programming Windows Phone 7

]]> http://www.leonardofranca.com/index.php/2010/08/19/options-for-mobile-development/feed/ 2 Monetize your AIR applications with Melrose http://www.leonardofranca.com/index.php/2010/07/26/monetize-your-air-applications-with-melrose/ http://www.leonardofranca.com/index.php/2010/07/26/monetize-your-air-applications-with-melrose/#comments Mon, 26 Jul 2010 15:25:48 +0000 Leonardo França http://www.leonardofranca.com/?p=581

This business model has become a fad in the world, you provide your application through a large company, we have examples such as Apple's App Store, Nokia with Ovi Store, Google Android Market. The advantages are many and generate greater confidence for the user and off course that Adobe could not be left out.
Previously called Shibuya, now Adobe Melrose seeks to offer basically three types of services for those who develop applications on Adobe AIR:

  • Try and Buy - When you are developing your AIR application, you simply embed the licensing SWC in your application, enter a few lines of code and specify the price and trial periods online.
  • Monetize -When end user customers purchase your application, the Melrose service keeps track of the income from each of your applications. You get paid at a regular interval, typically once a month.
  • View analytics - Reports are available online via the Adobe Developer Connection site. In this initial release you'll be able to view reporting information regarding revenue, active trials, expired trials and downloads. This information is available for everywhere you use Melrose-not just for downloads from the Adobe AIR Marketplace.

More:
Melrose Labs
Documentation

]]> http://www.leonardofranca.com/index.php/2010/07/26/monetize-your-air-applications-with-melrose/feed/ 0 Using the local database with Adobe AIR http://www.leonardofranca.com/index.php/2010/07/23/using-the-local-database-with-adobe-air/ http://www.leonardofranca.com/index.php/2010/07/23/using-the-local-database-with-adobe-air/#comments Fri, 23 Jul 2010 22:21:20 +0000 Leonardo França http://www.leonardofranca.com/?p=586

We often need our system can store data locally without the need for a robust database as a MySQL or SQL Server, or even that data can be stored locally for later synchronization with a remote database. Adobe AIR offers the possibility of working with database locally, your bank is based on the SQLite database, the more used to this kind of need to be very fast and easy to work with. Was added transaction support in Adobe AIR 2.0.
Let's do a simple example, start with the SQLConnection class, she will be responsible for connecting with our local bank, it is also defined that the database will be used only in memory or whether it created a local file (extension. db).

PLAIN TEXT
ACTIONSCRIPT3:
  1. conn = new SQLConnection();
  2. try
  3.             {
  4.                 conn.open(dbFile);//conn.open(null) passe null para o banco ser criado somente em memoria
  5.             }
  6.             catch(err:Error)
  7.             {
  8.                 trace(ObjectUtil.toString(err));
  9.                 return;
  10.             }

In this case, I am creating a local file to the database. dbfiles is an instance of the File class:

PLAIN TEXT
ACTIONSCRIPT3:
  1. dbFile = File.applicationStorageDirectory.resolvePath("dbFile.db");

Having created our database, we create our table for storing data. We will use the class SQLStatement.

PLAIN TEXT
ACTIONSCRIPT3:
  1. createStmt = new SQLStatement();
  2.             createStmt.sqlConnection = conn;

We will pass by the SQL string to create the table then to be performed by AIR:

PLAIN TEXT
ACTIONSCRIPT3:
  1. var sql:String = "";
  2.             sql += "CREATE TABLE IF NOT EXISTS contato (";
  3.             sql += "    id  INTEGER PRIMARY KEY AUTOINCREMENT,";
  4.             sql += "    nome    TEXT,";
  5.             sql += "    email   TEXT";
  6.             sql += ")";
  7. createStmt.text = sql;
  8. try
  9.             {
  10.                 createStmt.execute();
  11.             }
  12.             catch(error:SQLError)
  13.             {
  14.                 trace("CREATE TABLE error:", error);
  15.                 trace("error.message:", error.message);
  16.                 trace("error.details:", error.details);
  17.                 return void;
  18.             }

We have our database and tables created, let's create a form to enter some data in the database:

PLAIN TEXT
ACTIONSCRIPT3:
  1. insertStmt = new SQLStatement();
  2.             insertStmt.sqlConnection = conn;
  3.             var sql:String = "";
  4.             sql += "INSERT INTO contatos (nome, email) ";
  5.             sql += "VALUES ('"+txtNome.text+"', '"+txtEmail.text+"')";
  6.             insertStmt.text = sql;
  7.            
  8.             try
  9.             {
  10.                 insertStmt.execute();
  11.             }
  12.             catch (error:SQLError)
  13.             {
  14.                 trace("INSERT error:", error);
  15.                 trace("error.message:", error.message);
  16.                 trace("error.details:", error.details);
  17.                 return void;
  18.             }

Now just create the method to execute the select

PLAIN TEXT
ACTIONSCRIPT3:
  1. selectStmt = new SQLStatement();
  2.             selectStmt.sqlConnection = conn;
  3.             var sql:String = "SELECT id, nome, email FROM contatos";
  4.             selectStmt.text = sql;
  5.            
  6.             try
  7.             {
  8.                 selectStmt.execute();
  9.             }
  10.             catch (error:SQLError)
  11.             {
  12.                 trace("SELECT error:", error);
  13.                 trace("error.message:", error.message);
  14.                 trace("error.details:", error.details);
  15.                 return;
  16.             }
  17.            
  18.             var result:SQLResult = selectStmt.getResult();
  19.             dg.dataProvider = result.data;

Following is the complete code:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                        xmlns:s="library://ns.adobe.com/flex/spark"
  4.                        xmlns:mx="library://ns.adobe.com/flex/mx">
  5.     <fx:Script>
  6.         <![CDATA[
  7.             import flash.data.SQLConnection;
  8.             import flash.data.SQLResult;
  9.             import flash.data.SQLStatement;
  10.             import flash.errors.SQLError;
  11.             import flash.events.MouseEvent;
  12.             import flash.filesystem.File;
  13.            
  14.             import mx.utils.ObjectUtil;
  15.            
  16.             private var conn:SQLConnection;
  17.             private var dbFile:File;
  18.             private var createStmt:SQLStatement;
  19.             private var createStatusStmt:SQLStatement;
  20.             private var insertStmt:SQLStatement;
  21.             private var selectStmt:SQLStatement;
  22.            
  23.             override protected function childrenCreated():void
  24.             {
  25.                 super.childrenCreated();
  26.                
  27.                 dbFile = File.applicationStorageDirectory.resolvePath("dbContatos.db");
  28.                 conn = new SQLConnection();
  29.                
  30.                 try
  31.                 {
  32.                     conn.open(dbFile);
  33.                 }
  34.                 catch(err:Error)
  35.                 {
  36.                     trace(ObjectUtil.toString(err));
  37.                     return;
  38.                 }
  39.                
  40.                 createTable();
  41.                
  42.                 btnInsert.addEventListener(MouseEvent.CLICK,addData);
  43.             }
  44.            
  45.             private function createTable():void
  46.             {
  47.                 createStmt = new SQLStatement();
  48.                 createStmt.sqlConnection = conn;
  49.                
  50.                 var sql:String = "";
  51.                 sql += "CREATE TABLE IF NOT EXISTS contatos (";
  52.                 sql += "    id  INTEGER PRIMARY KEY AUTOINCREMENT,";
  53.                 sql += "    nome    TEXT,";
  54.                 sql += "    email   TEXT";
  55.                 sql += ")";
  56.                 createStmt.text = sql;
  57.                
  58.                 try
  59.                 {
  60.                     createStmt.execute();
  61.                 }
  62.                 catch(error:SQLError)
  63.                 {
  64.                     trace("CREATE TABLE error:", error);
  65.                     trace("error.message:", error.message);
  66.                     trace("error.details:", error.details);
  67.                     return void;
  68.                 }
  69.                
  70.                 getData();
  71.             }
  72.            
  73.             private function addData(evt:MouseEvent=null):void
  74.             {
  75.                 insertStmt = new SQLStatement();
  76.                 insertStmt.sqlConnection = conn;
  77.                 var sql:String = "";
  78.                 sql += "INSERT INTO contatos (nome, email) ";
  79.                 sql += "VALUES ('"+txtNome.text+"', '"+txtEmail.text+"')";
  80.                 insertStmt.text = sql;
  81.                
  82.                 try
  83.                 {
  84.                     insertStmt.execute();
  85.                 }
  86.                 catch (error:SQLError)
  87.                 {
  88.                     trace("INSERT error:", error);
  89.                     trace("error.message:", error.message);
  90.                     trace("error.details:", error.details);
  91.                     return void;
  92.                 }
  93.                 getData();
  94.             }
  95.            
  96.             private function getData():void
  97.             {
  98.                 selectStmt = new SQLStatement();
  99.                 selectStmt.sqlConnection = conn;
  100.                 var sql:String = "SELECT id, nome, email FROM contatos";
  101.                 selectStmt.text = sql;
  102.                
  103.                 try
  104.                 {
  105.                     selectStmt.execute();
  106.                 }
  107.                 catch (error:SQLError)
  108.                 {
  109.                     trace("SELECT error:", error);
  110.                     trace("error.message:", error.message);
  111.                     trace("error.details:", error.details);
  112.                     return;
  113.                 }
  114.                
  115.                 var result:SQLResult = selectStmt.getResult();
  116.                 dg.dataProvider = result.data;
  117.             }
  118.  
  119.         ]]>
  120.     </fx:Script>
  121.     <fx:Declarations>
  122.         <!-- Place non-visual elements (e.g., services, value objects) here -->
  123.     </fx:Declarations>
  124.     <s:Group width="100%" height="100%">
  125.         <mx:ViewStack x="0" y="68" id="viewstack1" width="100%" height="198" creationPolicy="all">
  126.             <s:NavigatorContent label="Registros" width="100%" height="100%">
  127.                 <mx:DataGrid id="dg" x="18" y="30" width="100%" height="100%">
  128.                     <mx:columns>
  129.                         <mx:DataGridColumn headerText="ID" width="25" dataField="id"/>
  130.                         <mx:DataGridColumn headerText="Nome" width="200" dataField="nome"/>
  131.                         <mx:DataGridColumn headerText="Email" width="200" dataField="email"/>
  132.                     </mx:columns>
  133.                 </mx:DataGrid>
  134.             </s:NavigatorContent>
  135.             <s:NavigatorContent label="Inserir Registro" width="100%" height="100%">
  136.                 <s:Label x="10" y="10" text="Inserir Registro"/>
  137.                 <mx:Form x="10" y="34" width="100%" height="100%">
  138.                     <mx:FormItem label="Nome:">
  139.                         <s:TextInput id="txtNome"/>
  140.                     </mx:FormItem>
  141.                     <mx:FormItem label="Email:">
  142.                         <s:TextInput id="txtEmail"/>
  143.                     </mx:FormItem>
  144.                     <mx:FormItem>
  145.                         <s:Button id="btnInsert" label="Inserir"/>
  146.                     </mx:FormItem>
  147.                 </mx:Form>
  148.             </s:NavigatorContent>
  149.         </mx:ViewStack>
  150.         <mx:LinkBar x="0" y="35" dataProvider="{viewstack1}">
  151.         </mx:LinkBar>
  152.     </s:Group>
  153. </s:WindowedApplication>

more:
Quick Start: Working asynchronously with a local SQL database (Flex)
Quick Start: Working asynchronously with a local SQL database (Flash)
Quick Start: Working asynchronously with a local SQL database (HTML)
Quick Start: Working synchronously with a local SQL database (Flex)
Quick Start: Working synchronously with a local SQL database (Flash)
Quick Start: Working synchronously with a local SQL database (HTML)

Books:
Adobe AIR Bible (Bible (Wiley))
Adobe AIR in Action

]]> http://www.leonardofranca.com/index.php/2010/07/23/using-the-local-database-with-adobe-air/feed/ 3 Adobe Certified Expert Flex 4 http://www.leonardofranca.com/index.php/2010/07/19/adobe-certified-expert-flex-4/ http://www.leonardofranca.com/index.php/2010/07/19/adobe-certified-expert-flex-4/#comments Mon, 19 Jul 2010 16:22:55 +0000 Leonardo França http://www.leonardofranca.com/?p=577

Available today is the certification exam of Adobe Flex 4 (Flex 4 # ACE Exam 9A0-129) since July 16, Now you have 59 questions related to Creating a User Interface (UI), Flex system architecture and design, Programming Flex applications with ActionScript, Interacting with data sources and servers and Using Flex in the Adobe Integrated Runtime (AIR)
You need at least 67% to pass.
The proof is performed in authorized centers online by Adobe and you mark the exam through sites Prometric or Pearson VUE
More details:
http://partners.adobe.com/public/ace/main.html
http://partners.adobe.com/public/en/ace/ACE_Exam_Guide_Flex4.pdf
http://www.pearsonvue.com/adobe
http://www.prometric.com

]]> http://www.leonardofranca.com/index.php/2010/07/19/adobe-certified-expert-flex-4/feed/ 0 BR Conference http://www.leonardofranca.com/index.php/2010/07/12/br-conference/ http://www.leonardofranca.com/index.php/2010/07/12/br-conference/#comments Mon, 12 Jul 2010 16:27:35 +0000 Leonardo França http://www.leonardofranca.com/?p=570

BR Conference


BR Conference 2010 is the first event held in Brazil on RIA (Rich Internet Application) and ColdFusion.
With the support of Adobe Systems Inc's and share some of the best and most renowned professionals in the world the tools and technologies ColdFusion, Flex, AIR, Flash Media Server and LiveCycle, BR Conference 2010 is an event created by developers for developers.
Learn more ...

]]> http://www.leonardofranca.com/index.php/2010/07/12/br-conference/feed/ 0 Flash Camp Brasil = Success!!! http://www.leonardofranca.com/index.php/2010/01/18/flash-camp-brasil-sucess/ http://www.leonardofranca.com/index.php/2010/01/18/flash-camp-brasil-sucess/#comments Mon, 18 Jan 2010 14:49:32 +0000 Leonardo França http://www.leonardofranca.com/?p=531

Flash Camp Brasil - I've been there!!!

Flash Camp Brasil - I've been there!!!


The event was unprecedented in Brazil, the Flash Camp Brasil, occurred in the last days 15 and 16 in Maceió, Brazil.
To begin with, was an adventure can go to the event, with tickets and expensive hotel crowded, but it is something that would not miss for the world.
I was staying in a hostel and lucky for me, on the morning of day 15, shared a post from the street, and my notebook with a damaged battery, I decided to go to the hotel of the event to familiarize myself with the way.
The path to the hostel to the hotel was closer than imagined, having only to wait anxiously for 7 hours until the event start.
While waiting and sitting on the couch with a provision making(ufa!!!), reunion the Gabriela Zaninetti, Marketing Manager of Adobe Systems Brasil, soon after going to the place of lecture and mini-courses, met Demian Borba was already in full swing in the last preparations for the event and introduced me to Filipe Cunha of Globo.com, sorry that did not to attend the mini-course it. Who was it was also Pedro Taranto(we almost ran into the airport).
Shortly after the Gabi introduced me to Fabricio Manzi, guy who knew the years and only in the event I can finally meet you in person. Then I had the opportunity to meet Tiago Venegas, with whom he later exchanged ideas on Flash Media Server, Cássio Souza, Technical Director Gringo and Diego of COC, after some talk time, arrivesIgor Costa, another so that the web and knew I had the opportunity to meet personally, I played a little Mortal Kombat vs DC Comics and took a beating by Neto Leal.
A few minutes before the event, entering the auditorium, reunion the Lee with whom I had a quick conversation about our trips were.
In between I had the opportunity to meet Beck Novaes, in which I showed a bit of a speech that would do the next day. At the end of the event, I know Bruno Ribeiro who told me about the project that won the mini ignite.

About the sessions
First day
Well, full auditorium, all fully prepared and Demian opened the event with an exciting presentation on EFM and how did your dream to make a Flash Camp in Brazil.

Joshua Hirsch Minister of Technology of the Big Spaceship, commented on how your company works and has demonstrated some very interesting projects in which the developer program so even in the latest stage of the project, first you need to buy a machine to smoke.

The second lecture was the Daniel Morena Creative Director of the Agency 32 Bits, about 1.0 Enhanced Reality, that really surprised me, systems showed he made a few years with the Flash Platform using multitouch when not imagined that. I could personally give my congratulations to Daniel Morena.

Second day
O segundo dia se iniciou com a palestra do Sam Rivello, CEO of RMC, biology compared with programming, demonstrated in a simple and objective simulation of biological behavior in programming in Flex 4.

The second lecture was that of Igor Costa, and relaxed and animated, it showed 40 differences considered significant change between Flex 3 and Flex 4.

Tiago Venegas began his lecture by explaining what's new in Flash Media Server 3.5, demonstrated vorttice, a tool conference that owes nothing to the Adobe Connect, also shown as is done dynamic stream.

Next, Lee explained some news about Flash Player 10.1 and created an example using the Adobe Flash CS5 exporting directly to a native application for IPhone.

The presentation of Cássio Souza began with a story about how the way you work in, then explained design pattern State Machine. You may have used State Machine and did not know.

Daniel Dura told the story of the multitouch and demonstrated how it can be worked in Flash Platform.

The talk of closure of the event was dedicated to the Beck Novaes about OutBox, and in my opinion, was closed on a high note, was simply fantastic, I think one of the best speeches of the event.

This was a summary on how fast it was my adventure in Flash Camp Brasil and the ultimate feeling is that it was very worthwhile, Maceió was perfect for the event and a cry marked the Flash Camp Brasil: "sa porra!!!".

See more pictures:
http://www.garagem.com.br/novo_garagem/eventos/flashweb/1024/index.php?cd_evento=1227

]]> http://www.leonardofranca.com/index.php/2010/01/18/flash-camp-brasil-sucess/feed/ 0 Launching an installed AIR application from the browser http://www.leonardofranca.com/index.php/2009/09/17/launching-an-installed-air-application-from-the-browser/ http://www.leonardofranca.com/index.php/2009/09/17/launching-an-installed-air-application-from-the-browser/#comments Thu, 17 Sep 2009 03:47:24 +0000 Leonardo França http://www.leonardofranca.com/?p=484

I needed implements in my project, a particularity interesting, a web application (Flash) launching an Adobe AIR application. First i thought use LocalConnection Class, but could not implement without the Adobe AIR application was launch.
The job was left aside until I remembered the Adobe Media Player does just that, if you already have it installed on the computer, it just open the application.

Adobe AIR has a file called air.swf(http://airdownload.adobe.com/air/browserapi/air.swf) that contains an API to faclitate the interaction between runtime and some Adobe AIR application from a web page. To do this you must load the air.swf for the same domain of your web application, is possible:

  • Checking if the runtime is installed.
  • Checking from a web page if an AIR application is installed.
  • Installing an AIR application from the browser.
  • Launching an installed AIR application from the browser.

Let the examples, first i will create a new project type Desktop Application in Flex Builder, this applcation will be appened by browser later. I need to configure the applicationID and publisherID, without these parameters, the application will be not open.
The applicationID is configured when you create the project or later int the id tag of your file .xml.

PLAIN TEXT
XML:
  1. <id>br.com.leonardofranca.files.lauchApp</id>

For publisherID, we need to use a digitally signing. I will set up a profect so for the purpose of exemplification (password is 123). I will simply have access to publisherID after instaling my Adobe AIR application.
The last detail is to use the allowBrowserInvocation tag.

PLAIN TEXT
XML:
  1. <allowBrowserInvocation>true</allowBrowserInvocation>

The xml configuration file will be as below:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.5">
  3.     <id>br.com.leonardofranca.files.lauchApp</id>
  4.     <filename>lauchApp</filename>
  5.     <name>lauchApp</name>
  6.     <version>0.0.1</version>
  7.     <initialWindow>
  8.         <content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
  9.     </initialWindow>
  10.     <allowBrowserInvocation>true</allowBrowserInvocation>
  11. </application>

And our mxml:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             private function init():void
  6.             {
  7.                 trace(NativeApplication.nativeApplication.applicationID);
  8.                 trace(NativeApplication.nativeApplication.publisherID);
  9.                 txtPubId.text = NativeApplication.nativeApplication.publisherID;
  10.             }
  11.         ]]>
  12.     </mx:Script>
  13.     <mx:TextInput x="76" y="148" id="txtPubId"/>
  14. </mx:WindowedApplication>

Now let the party will be responsible for making the call to open the application. I created a project type Web Application in Flex Builder. As explained above, this application needs to load the air.swf for the domain to the call the method launchApplication passing the parameters applicationID and publisherID.
Is has not mystery, folows the complete code.

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             //pubId 3BED015FE1C51F1CC6917068F43243AD4716981F.1
  6.            
  7.             private var airSWF:Object;
  8.            
  9.             private function init():void
  10.             {
  11.                 //Loading the air.swf file
  12.                 var airSWFLoader:Loader = new Loader();  
  13.                 var loaderContext:LoaderContext = new LoaderContext();  
  14.                 loaderContext.applicationDomain = ApplicationDomain.currentDomain;
  15.                  
  16.                 airSWFLoader.contentLoaderInfo.addEventListener(Event.INIT, onInit);
  17.                 airSWFLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  18.                 airSWFLoader.load(new URLRequest("http://airdownload.adobe.com/air/browserapi/air.swf"),loaderContext);
  19.                  
  20.                  
  21.                  btn.addEventListener(MouseEvent.CLICK,lauchApp);
  22.             }
  23.            
  24.             private function onInit(e:Event):void  
  25.             {
  26.                 airSWF = e.target.content;
  27.             }
  28.            
  29.             private function onComplete(e:Event):void  
  30.             {
  31.                 btn.enabled = true;
  32.             }
  33.            
  34.             private function lauchApp(evt:MouseEvent):void
  35.             {
  36.                 var appID:String = "br.com.leonardofranca.files.lauchApp";
  37.                 var pubID:String = "3BED015FE1C51F1CC6917068F43243AD4716981F.1";
  38.                 var arguments:Array = ["launchFromBrowser"]; // Optional
  39.                 airSWF.launchApplication(appID, pubID, arguments);
  40.             }
  41.  
  42.         ]]>
  43.     </mx:Script>
  44.     <mx:Button id="btn" label="Lauch App" x="192" y="169" enabled="false"/>
  45. </mx:Application>

We should have the following result:

Abrindo um aplicativo em Adobe AIR pelo browser

Launching an installed AIR application from the browser

DOWNLOAD SOURCE 1

DOWNLOAD SOURCE 2We

References:
Installing and running AIR applications from a web page:
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7e15.html
Sobre o applicationID:
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff1.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7c9c
Sobre o publisherID e certificados digitais suportados pelo Adobe AIR
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff0.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7cca

Translations:
Português do Brasil

]]> http://www.leonardofranca.com/index.php/2009/09/17/launching-an-installed-air-application-from-the-browser/feed/ 0 Adding an icon in the System Tray with Adobe AIR http://www.leonardofranca.com/index.php/2009/08/21/adding-an-icon-in-the-system-tray-with-adobe-air/ http://www.leonardofranca.com/index.php/2009/08/21/adding-an-icon-in-the-system-tray-with-adobe-air/#comments Fri, 21 Aug 2009 20:30:35 +0000 Leonardo França http://www.leonardofranca.com/?p=496

Sometimes you need your application to rum in "background" simply enter it with an icon int the systray of your computer. Adobe Air supports thos functionality, is possible use the interaction both the right and left mouse button.
Let's take a pecture for all our example, like this: brick
Will carry the image in our application using the Loader class, so the loading is complete, will be adding to the system tray using the property NativeApplication.nativeApplication.icon.bitmaps.

PLAIN TEXT
ACTIONSCRIPT3:
  1. public function init():void
  2. {
  3.     var icon:Loader = new Loader();
  4.     icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
  5.     icon.load(new URLRequest("brick.png"));
  6. }
  7.  
  8. private function iconLoadComplete(event:Event):void
  9. {
  10.     NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData];
  11. }

Running the application. see the picture next to the windows clock. Let's add a tooltip:

PLAIN TEXT
ACTIONSCRIPT3:
  1. public function init():void
  2. {
  3.     var icon:Loader = new Loader();
  4.     icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
  5.     icon.load(new URLRequest("brick.png"));
  6.         var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
  7.     if (NativeApplication.supportsSystemTrayIcon)
  8.     {
  9.         systray.tooltip = "to aqui ô!!! o/";
  10.     }
  11. }

Running the program will se the icon apperting in system tray, when passing the mouse over the tooltip.
Now we implement the action for when the user click right mouse button. We will use NativeMenu and NativeMenuItem, is very similar to that already used in Flash Player. We instantiate the class and add an event to select action:

PLAIN TEXT
ACTIONSCRIPT3:
  1. var iconMenu:NativeMenu = new NativeMenu();
  2. var aboutCommand:NativeMenuItem =  iconMenu.addItem(new NativeMenuItem("blablabla"));
  3. var webCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Ir para o blog"));
  4. webCommand.addEventListener(Event.SELECT,goURL);
  5. iconMenu.addItem(new NativeMenuItem("",true));//separator
  6. var exitCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Exit")); exitCommand.addEventListener(Event.SELECT, closeApp);

Now cheking if the operating system support system tray:

PLAIN TEXT
ACTIONSCRIPT3:
  1. if (NativeApplication.supportsSystemTrayIcon)
  2.                 {
  3.                     var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
  4.                     systray.menu = iconMenu;
  5.                 }

Complete code:
DOWNLOAD

Reference:
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7dcc.html

Recommended Books:


Translations
Português do Brasil

]]> http://www.leonardofranca.com/index.php/2009/08/21/adding-an-icon-in-the-system-tray-with-adobe-air/feed/ 0 Creating custom windows with Adobe AIR http://www.leonardofranca.com/index.php/2009/08/21/creating-custom-windows-with-adobe-air/ http://www.leonardofranca.com/index.php/2009/08/21/creating-custom-windows-with-adobe-air/#comments Fri, 21 Aug 2009 19:00:03 +0000 Leonardo França http://www.leonardofranca.com/?p=474

Adobe AIR allows you to customize the windows of their applications, by default, Adobe AIR uses the layout of the windows operating system (Windows, Mac, Linux), in Flex you have the option of using FlexChrome(especially that i am not very fan).
Show a simple example using Adobe Flex, Adobe Dreamweaver CS4 and Adobe Flash CS4.

if you're new to Adobe AIR, i recommend you look this article before proceeding with the tutorial ;)


Adobe Flex

In Flex Builder, create a project of type "Desktop application", by default it will create two files, one .mxml and one .xml responsible for the application settings.
The .xml file, change the follwing tags: systemChrome e transparent.
The final file should be as follows::

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.     <id>AIR-chrome</id>
  4.     <filename>AIR_chrome</filename>
  5.     <name>AIR_chrome</name>
  6.     <version>v1</version>
  7.     <initialwindow>
  8.         <content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
  9.         <systemchrome>none</systemchrome>
  10.         <transparent>true</transparent>
  11.     </initialwindow>
  12. </application>

We configure our application to not use the Windows style operating system which is transparent. If run the application, we see that window appears pattern Flex (FlexChrome). However it is not what we want yet.
In the file .mxml, in WindowedApplication tag, we set the showFlexChrome property to false.

PLAIN TEXT
MXML:
  1. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showFlexChrome="false">
  2. </mx:WindowedApplication>

If we run again, we see that standard window of Flex also disappeared. Now create the rest of the application.
Add a component Canvas, size of your choice, and add three components of type "Button" on stage, important to remember to put a background color of Canvas for your application to be seen.

PLAIN TEXT
MXML:
  1. <mx :Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">
  2.         <mx :Button x="262" y="10" label="_" width="35" id="bot_min"/>
  3.         <mx :Button x="296" y="10" label="M" width="35" id="bot_max"/>
  4.         <mx :Button x="331" y="10" label="X" width="35" id="bot_close"/>
  5. </ mx:Canvas>

Now let's add the actions to minimize, maximize, restore and close the application. For this we have access to own API for Adobe AIR windows. Note that to mazimize and restore, we use a flag to see if the window is maximized or not.

PLAIN TEXT
ACTIONSCRIPT3:
  1. private var isMax:Boolean = false;
  2.  
  3. private function minimizar(e:MouseEvent):void
  4. {
  5.     stage.nativeWindow.minimize();
  6. }
  7.  
  8. private function maximizar(e:MouseEvent):void
  9. {
  10.     if(!isMax)
  11.     {
  12.         stage.nativeWindow.maximize();
  13.         isMax = true;
  14.     }
  15.        else
  16.         {
  17.         stage.nativeWindow.restore();
  18.         isMax = false;
  19.     }
  20. }
  21.            
  22. private function fechar(e:MouseEvent):void
  23. {
  24.     stage.nativeWindow.close();
  25. }

Now to complete a task for which the window can ve dragged witn the mouse.

PLAIN TEXT
ACTIONSCRIPT3:
  1. private function moveit(e:MouseEvent):void
  2. {
  3.     stage.nativeWindow.startMove();
  4.     cv_back.alpha = 0.5;
  5. }

Then just add a function that will make the buttons "listening" these functions. Following is the complete code:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx :WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showFlexChrome="false" creationComplete="init();">
  3.     <mx :Script>
  4.         <![CDATA[
  5.             private var isMax:Boolean = false;
  6.        
  7.  
  8.             public function init():void
  9.             {
  10.                 cv_back.addEventListener(MouseEvent.MOUSE_DOWN, moveit);
  11.                 cv_back.addEventListener(MouseEvent.MOUSE_UP, nomove);
  12.                 bot_min.addEventListener(MouseEvent.CLICK, minimizar);
  13.                 bot_max.addEventListener(MouseEvent.CLICK, maximizar);
  14.                 bot_close.addEventListener(MouseEvent.CLICK, fechar);
  15.             }
  16.            
  17.             private function moveit(e:MouseEvent):void
  18.             {
  19.                 stage.nativeWindow.startMove();
  20.                 cv_back.alpha = 0.5;
  21.             }
  22.            
  23.             private function nomove(e:MouseEvent):void
  24.             {
  25.                 cv_back.alpha = 1;
  26.             }
  27.            
  28.             private function minimizar(e:MouseEvent):void
  29.             {
  30.                 stage.nativeWindow.minimize();
  31.             }
  32.            
  33.             private function maximizar(e:MouseEvent):void
  34.             {
  35.                 if(!isMax)
  36.                 {
  37.                     stage.nativeWindow.maximize();
  38.                     isMax = true;
  39.                 }
  40.                 else
  41.                 {
  42.                     stage.nativeWindow.restore();
  43.                     isMax = false;
  44.                 }
  45.             }
  46.            
  47.             private function fechar(e:MouseEvent):void
  48.             {
  49.                 stage.nativeWindow.close();
  50.             }
  51.         ]]>
  52.     </ mx:Script>
  53.     <mx:Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">
  54.         <mx :Button x="262" y="10" label="_" width="35" id="bot_min"/>
  55.         <mx :Button x="296" y="10" label="M" width="35" id="bot_max"/>
  56.         <mx :Button x="331" y="10" label="X" width="35" id="bot_close"/>
  57.     </ mx:Canvas>
  58. </ mx:WindowedApplication>

Download dos arquivos

Adobe Flash CS4 or CS3

To create application in Adobe AIR with Adobe Flash CS3, you need to upgrade. Visit Adobe AIR Update for Flash CS3 Professional. Adobe Flash CS4 comes with native support for building applications on Adobe AIR.

Create a new file type "Flash File(Adobe AIR)" and add three components of the type "Button" on stage. They are respectively the buttons to minimize, maximize, restore and close. The first time you compile the FLA, it create one file .xml of your application. To configure it, just go to File->AIR Settings...
Edit the information to your preferences, do not forget to check the option Window Chrome as "Custom Chrome(transparent)", its configuration file should look something like the following:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.   <id>com.adobe.example.chrome</id>
  4.   <version>1.0</version>
  5.   <filename>chrome</filename>
  6.   <description />
  7.   <name>chrome</name>
  8.   <copyright />
  9.   <initialwindow>
  10.     <content>chrome.swf</content>
  11.     <systemchrome>none</systemchrome>
  12.     <transparent>true</transparent>
  13.     <visible>true</visible>
  14.     <maximizable>true</maximizable>
  15.     <minimizable>true</minimizable>
  16.     <resizable>true</resizable>
  17.   </initialwindow>
  18.   <icon />
  19.   <customupdateui>false</customupdateui>
  20.   <allowbrowserinvocation>false</allowbrowserinvocation>
  21. </application>

I created a movieclip blue with the name of instance "mc_chrome" to be a background application.
Now putting the actions on the buttons to be placed in the main timeline:

PLAIN TEXT
ACTIONSCRIPT3:
  1. var isMax:Boolean = false;
  2.  
  3. mc_chrome.addEventListener(MouseEvent.MOUSE_DOWN,moveit);
  4. mc_chrome.addEventListener(MouseEvent.MOUSE_UP,nomove);
  5.  
  6. function moveit(e:MouseEvent):void
  7. {
  8.     stage.nativeWindow.startMove();
  9.     mc_chrome.alpha = .5;
  10.     //mc_chrome.blur
  11. }
  12.  
  13. function nomove(e:MouseEvent):void
  14. {
  15.     mc_chrome.alpha = 1;
  16. }
  17.  
  18. ////////
  19. bot_min.addEventListener(MouseEvent.CLICK,minimizar);
  20. function minimizar(e:MouseEvent):void
  21. {
  22.     stage.nativeWindow.minimize();
  23. }
  24. bot_max.addEventListener(MouseEvent.CLICK,maximizar);
  25. function maximizar(e:MouseEvent):void
  26. {
  27.     if (!isMax)
  28.     {
  29.         stage.nativeWindow.maximize();
  30.         isMax = true;
  31.     }
  32.     else
  33.     {
  34.         stage.nativeWindow.restore();
  35.         isMax = false;
  36.     }
  37. }
  38. bot_close.addEventListener(MouseEvent.CLICK,fechar);
  39.  
  40.  
  41. function fechar(e:MouseEvent):void
  42. {
  43.     stage.nativeWindow.close();
  44. }

Download dos arquivos

Adobe Dreamweaver CS4 or CS3

To use the Adobe AIR with HTML/Ajax, i will use Adobe Dreamweaver CS3, but nothing prevents you from using your editor and compile using the Adobe AIR SDK.
With Dreamweaver is possible to have access to API code hints specifies Adobe AIR for JavaScript, simply install the folowing extensions:
Adobe AIR Extension for Dreamweaver

In the item "Site" Dreamweaver will appear two new options (Create AIR File and AIR Application Settings). Create a new HTML document and the Files windows, next to Site->AIR Application Settings. Complete the required information, you will have create one file .xml with the settings of your application, its content should be as below:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.   <filename>air</filename>
  4.   <customupdateui>false</customupdateui>
  5.   <name>airteste</name>
  6.   <id>air</id>
  7.   <version>1</version>
  8.   <initialwindow>
  9.     <content>air.html</content>
  10.     <height>600</height>
  11.     <width>800</width>
  12.     <systemchrome>none</systemchrome>
  13.     <transparent>true</transparent>
  14.     <visible>true</visible>
  15.   </initialwindow>
  16. </application>

We changed the systemChrome for "none" and transparent for "true", the rest is your choice.
Add three buttons in html to be respectively the buttons to minimize, maximize, restore and close:
[html]

[/html]
Now we will create the functions that perform these actions. we note that by accessing the API specifies the Adobe AIR for JavaScript.

PLAIN TEXT
JAVASCRIPT:
  1. <script language="javascript">
  2. var isMax = false;
  3. function minimizar()
  4. {
  5.     window.nativeWindow.minimize();
  6. }
  7.  
  8. function maximizar()
  9. {
  10.     if(!isMax)
  11.     {
  12.         window.nativeWindow.maximize();
  13.         isMax = true;
  14.     }
  15.     else
  16.     {
  17.         window.nativeWindow.restore();
  18.         isMax = false;
  19.     }  
  20. }
  21.  
  22. function fechar()
  23. {
  24.     window.nativeWindow.close();
  25. }
  26. </script>

The logic follows the same that we use in Flex and Flash, a flag for whether the window is maximized or not.
Then we set the buttons to perform the various functions. Following is the complete code:
[html]






[/html]
Download dos arquivos

Create a custom window give a greate freedom for you to create the application with the "face" of the user, is a powerful resource and therefore it should be used with create care, no use having a layout hyper super ultra mega power futuristic and compromisse the usability user.

Recommend:
http://www.adobe.com/devnet/air/

Recommended Books:


Translations:
Português do Brasil

]]> http://www.leonardofranca.com/index.php/2009/08/21/creating-custom-windows-with-adobe-air/feed/ 1 Started with Adobe AIR http://www.leonardofranca.com/index.php/2009/08/21/started-with-adobe-air/ http://www.leonardofranca.com/index.php/2009/08/21/started-with-adobe-air/#comments Fri, 21 Aug 2009 18:30:18 +0000 Leonardo França http://www.leonardofranca.com/?p=464


Adobe AIR (Adobe Integrated Runtime) is a framework for creating Development desktop applications, one level above in relation to the Rich Internet Application (RIA) that already exist. Being able to create an interactivity never before seen in relation to desktop applications and web.
Large companies already use it in full swing since he was still in beta as an example:

Who can develop on Adobe AIR?
The Adobe AIR logo is a sample of this, basing his design on a boomerang, each tip meaning that the developer has the option of programming with Adobe Flash, Adobe Flex and html/ajax:

Alguns recursos disponivéis com Adobe AIR:

  • Any Flash Player API and a exclusive API for javascript;
  • API update automatically;
  • Automatic installation API;
  • support the file system;
  • an application that run on both Windows, Mac or Linux;
  • Use of digital certificate;
  • multidiomas support (from version 1.1);
  • HTML engine based on webkit (the same used in Safari, nokia, google chrome, etc.);

Some features are not available:

  • Execution of external programs;

A first example
Show an example that Ben Forta always likes to demonstrate in his lectures :)
But before, we know about the structure of an application made in Adobe AIR:
In this example I will use the Adobe Flex Buider 3
In the menu "File-> New-> Flex Project" to create a new project.
In the next window is where we determine whether the project will be for the web (with Flex) or desktop (Adobe AIR), select the Adobe AIR.Nas other screens, just click next and finish. Will be created a directory structure like the image below:
Note that besides the file. Mxml created by default, was also created a file-app.xml, and in mxml a new tag, a WindowedApplication.
In the file-app.xml costam general settings of your application such as: name, version, description, directory where it will be installed, transparent window, icons etc.
follows the complete source code mybrowser-app.xml

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.  
  4. <!-- Adobe AIR Application Descriptor File Template.
  5.  
  6.     Specifies parameters for identifying, installing, and launching AIR applications.
  7.  
  8.     xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/1.1
  9.             The last segment of the namespace specifies the version
  10.             of the AIR runtime required for this application to run.
  11.            
  12.     minimumPatchLevel - The minimum patch level of the AIR runtime required to run
  13.             the application. Optional.
  14. -->
  15.  
  16.     <!-- The application identifier string, unique to this application. Required. -->
  17.     <id>mybrowser</id>
  18.  
  19.     <!-- Used as the filename for the application. Required. -->
  20.     <filename>mybrowser</filename>
  21.  
  22.     <!-- The name that is displayed in the AIR application installer.
  23.          May have multiple values for each language. See samples or xsd schema file. Optional.
  24.  
  25. -->
  26.     <name>mybrowser</name>
  27.  
  28.     <!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. -->
  29.     <version>v1</version>
  30.  
  31.     <!-- Description, displayed in the AIR application installer.
  32.          May have multiple values for each language. See samples or xsd schema file. Optional.
  33.  
  34. -->
  35.     <!-- <description> -->
  36.  
  37.     <!-- Copyright information. Optional -->
  38.     <!-- <copyright> -->
  39.  
  40.     <!-- Settings for the application's initial window. Required. -->
  41.     <initialwindow>
  42.         <!-- The main SWF or HTML file of the application. Required. -->
  43.         <!-- Note: In Flex Builder, the SWF reference is set automatically. -->
  44.         <content>[This value will be overwritten by Flex Builder in the output
  45.  
  46. app.xml]</content>
  47.        
  48.         <!-- The title of the main window. Optional. -->
  49.         <!-- <title> -->
  50.  
  51.         <!-- The type of system chrome to use (either "standard" or "none"). Optional.
  52.  
  53. Default standard. -->
  54.         <systemchrome>none</systemchrome>
  55.  
  56.         <!-- Whether the window is transparent. Only applicable when systemChrome is none.
  57.  
  58. Optional. Default false. -->
  59.         <transparent>true</transparent>
  60.  
  61.         <!-- Whether the window is initially visible. Optional. Default false. -->
  62.         <!-- <visible> -->
  63.  
  64.         <!-- Whether the user can minimize the window. Optional. Default true. -->
  65.         <!-- <minimizable> -->
  66.  
  67.         <!-- Whether the user can maximize the window. Optional. Default true. -->
  68.         <!-- <maximizable> -->
  69.  
  70.         <!-- Whether the user can resize the window. Optional. Default true. -->
  71.         <!-- <resizable> -->
  72.  
  73.         <!-- The window's initial width. Optional. -->
  74.         <!-- <width> -->
  75.  
  76.         <!-- The window's initial height. Optional. -->
  77.         <!-- <height> -->
  78.  
  79.         <!-- The window's initial x position. Optional. -->
  80.         <!-- <x> -->
  81.  
  82.         <!-- The window's initial y position. Optional. -->
  83.         <!-- <y> -->
  84.  
  85.         <!-- The window's minimum size, specified as a width/height pair, such as "400
  86.  
  87. 200". Optional. -->
  88.         <!-- <minSize> -->
  89.  
  90.         <!-- The window's initial maximum size, specified as a width/height pair, such as
  91.  
  92. "1600 1200". Optional. -->
  93.         <!-- <maxSize> -->
  94.     </initialwindow>
  95.  
  96.     <!-- The subpath of the standard default installation location to use. Optional. -->
  97.     <!-- <installFolder> -->
  98.  
  99.     <!-- The subpath of the Windows Start/Programs menu to use. Optional. -->
  100.     <!-- <programMenuFolder> -->
  101.  
  102.     <!-- The icon the system uses for the application. For at least one resolution,
  103.          specify the path to a PNG file included in the AIR package. Optional. -->
  104.     <!-- <icon>
  105.         <image16x16></image16x16>
  106.         <image32x32></image32x32>
  107.         <image48x48></image48x48>
  108.         <image128x128></image128x128>
  109.      -->
  110.  
  111.     <!-- Whether the application handles the update when a user double-clicks an update version
  112.     of the AIR file (true), or the default AIR application installer handles the update
  113.  
  114. (false).
  115.     Optional. Default false. -->
  116.     <!-- <customUpdateUI> -->
  117.    
  118.     <!-- Whether the application can be launched when the user clicks a link in a web browser.
  119.     Optional. Default false. -->
  120.     <!-- <allowBrowserInvocation> -->
  121.  
  122.     <!-- Listing of file types for which the application can register. Optional. -->
  123.     <!-- <fileTypes> -->
  124.  
  125.         <!-- Defines one file type. Optional. -->
  126.         <!-- <fileType> -->
  127.  
  128.             <!-- The name that the system displays for the registered file type.
  129.  
  130. Required. -->
  131.             <!-- <name> -->
  132.  
  133.             <!-- The extension to register. Required. -->
  134.             <!-- <extension> -->
  135.            
  136.             <!-- The description of the file type. Optional. -->
  137.             <!-- <description> -->
  138.            
  139.             <!-- The MIME type. Optional. -->
  140.             <!-- <contentType> -->
  141.            
  142.             <!-- The icon to display for the file type. Optional. -->
  143.             <!-- <icon>
  144.                 <image16x16></image16x16>
  145.                 <image32x32></image32x32>
  146.                 <image48x48></image48x48>
  147.                 <image128x128></image128x128>
  148.              -->
  149.            
  150.         <!-- </fileType> -->
  151.     <!-- </fileTypes> -->
  152.  
  153. </application>

Now the code in the mxml application:

PLAIN TEXT
MXML:
  1. <? xml version="1.0" encoding="utf-8"?>
  2. <mx : WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  3.     <mx : HBox width="100%">
  4.         <mx : Label text="ENDEREÇO:" />
  5.         <mx : TextInput width="100%" id="link_txt" text="http://" />
  6.         <mx : Button label="GO" click="h.location=link_txt.text" />
  7.     </ mx : HBox>
  8.     <mx : HTML width="100%" height="100%" id="h" />
  9. </ mx  : WindowedApplication>

Running we have the following result, a browser made in Adobe AIR.

Following, we now generate the executable for this application that can be installed on the pc, noting that only will be installing the Adobe AIR is already installed on your computer.
To generate the executable, do the following: "File->Export->Release Build".
In the first screen, no need to change anything in the next screen we have to configure the digital signature.

If you do not have any license to use, we can create one for testing, click "create" and the following screen appears:

Fill according to your taste, you create a file with the extension. Imbutida p12 to be in application and will be read when you run Adobe AIR application installation on your computer. Click in"Next".
This screen will show the files that you wish to be included in the final application, by default the files are selected .swf and -app.xml.

Just click "Finish" and will create a file with the extension. Air and you have created your first application on Adobe AIR, if you already have Adobe AIR installed on your machine, just go to the directory where the executable was generated and give two clicks.

Enjoy yourself and test the application:
mybrowser

Some references:
DEVNET
Livedocs Flex 3
Adobe AIR resources
AIR for everyone
Business benefits
Browser vs. desktop
Download AIR applications

Recommended Books:


Translations:
Português do Brasil

]]> http://www.leonardofranca.com/index.php/2009/08/21/started-with-adobe-air/feed/ 1 Adobe Certified Expert – Flex 3 with AIR http://www.leonardofranca.com/index.php/2009/07/29/adobe-certified-expert-%e2%80%93-flex-3-with-air/ http://www.leonardofranca.com/index.php/2009/07/29/adobe-certified-expert-%e2%80%93-flex-3-with-air/#comments Thu, 30 Jul 2009 01:48:23 +0000 Leonardo França http://www.leonardofranca.com/?p=456

Finally I did my certification exam Adobe Flex 3, it passed with 80%, even with little time for studying the part of Adobe AIR (especially the database). Are 50 questions in total and a minimum of 67% to pass.

And to help in the studies, following a software done in Adobe AIR with some simulated:
http://www.pxldesigns.com/attest

]]> http://www.leonardofranca.com/index.php/2009/07/29/adobe-certified-expert-%e2%80%93-flex-3-with-air/feed/ 0