Adobe Air Application using Flash CS3
Wall Script
Wall Script
Wednesday, November 03, 2010

Adobe Air Application using Flash CS3

This tutorial is an introduction to Adobe Air application development using Flash CS3 (or later versions) for them who are unknown to Air applications or just beginners. In this post I want to explain how to develop a business card (desktop application) using some basic tools available in Adobe Flash.

Adobe Air Tutorial

About Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

The basic needs for implementing this article are

1.Installing the Adobe Air Runtime
http://get.adobe.com/air/otherversions/
Download latest version of Adobe Air by choosing your Operating system.
Adobe air download

2.Getting ready Adobe flash to support Air development
(If you are using flash CS3 you have to install the Air extension or if you are using flash CS4 you need not to install any extensions as it is already installed along with CS4 but it is good to get an update)

For flash CS3 install the extension -
http://www.adobe.com/support/flash/downloads.html#flashCS3

For flash CS4 install adobe air update
http://www.adobe.com/support/flash/downloads.html#flashCS4
Air Extensions
Now the environment is ready to develop an air application we need to just move forward to designing phase.

Designing the Contents
Open flash cs3 or cs4 and select adobe air application at the welcome screen.
Air Start

Now a blank document is created with the default dimensions. So we need to change the width and height to 450px and 350px respectively.
To change doc dimensions in the properties panel (Ctrl + F3), click on edit and give width and height.
Air Properties

Now in the TIMELINE (by default we have one layer) create a new one by clicking on New Layer button and rename the layers as contents and actions
New layer

Now select the first key frame in contents layer, and select the Text Tool in the Tools panel draw a text on the blank document.( To select Text tool press short cut key - T)
air tools

9lessons air

Like wise the by keeping the first key frame in contents layer selected add three more text fields (like twitter, facebook, www.9lessons.info ).

9lessons air

Then the next step is to convert all the text labels into buttons.
For converting a text label into button – select a text label and press F8 on the keyboard and give the button name. (Give names like twitter, facebook, lessons)

Convert to symbol

After converting all text labels into buttons we need to give an instant name for every button and this is the most importing step as instant name is the unique identification for an element on the document stage)
For twitter button give instant name as twitter_btn.
For facebook button give instant name as facebook_btn.
For lessons button give instant name as lessons_btn.

air application

Up to this step we completed the designing part of our tutorial and now we need to code our design.
Adding action script to the elements

Now select the first key frame on the actions layer and press F9 to open up Action script panel.
Action panel

Writing the Code
var lessons_URL:URLRequest = new URLRequest("http://www.9lessons.info");
var twitter_URL:URLRequest = new URLRequest("http://www.twitter.com/9lessons");
var facebook_URL:URLRequest = new URLRequest("http://www.facebook.com/9lessons");

twitter_btn.addEventListener(MouseEvent.CLICK, gotoTwitter);
fbook_btn.addEventListener(MouseEvent.CLICK, gotoFacebook);
lessons_btn.addEventListener(MouseEvent.CLICK, goto9lessons);

function gotoTwitter(event:MouseEvent):void{
navigateToURL(lessons_URL, "_blank");
}

function gotoFacebook(event:MouseEvent):void{
navigateToURL(twitter_URL, "_blank");
}

function goto9lessons(event:MouseEvent):void{
navigateToURL(facebook_URL, "_blank");
}

Test the Application
To check our scripts to run press Ctrl + Enter to run our application. If it is running with no errors, the last step is to publish an Air File.

Publishing the Air file

To publish air application Edit the AIR Setting and in the settings give all the details required.
(Note: Without giving a digital Certificate we cannot generate an Air file)
Air Settings
Adobe air digital certificate

adobe air digital certificate

After filling all the data click on Publish AIR File. Now an air file created in the same directory.

air success

Now double click the air icon to install the Application... And then go to Start >
Programs to launch our air application

air output

Final Output
Output 1

Output 2
web notification

8 comments:

  1. Wow Great article! Thanks a lot.
    are you panning to add more functions like a rss feed or show info taken from a db?

    ReplyDelete
  2. waaw.. is it your first post about flash?
    nice work.. :D
    i like it.. keep post about flash that you know.. :D

    ReplyDelete
  3. Its really great tutz about adobe air .. so can we integrate PHP with adobe air?

    thanks

    ReplyDelete
  4. @Buzzknow

    Thanks for your interest in this article. We can integrate PHP with air .. that article will come soon.....

    ReplyDelete
  5. Thanks for the post

    ReplyDelete
  6. great post, got a good intro to adobe - AIR application devlpment. can u please put a post on php integration with adobe-AIR.

    ReplyDelete
  7. I create a facebook app using adove air. But when the after the login on facebook, the login window doesnt close and just say "Success".

    Why is this happening?

    ReplyDelete

mailxengine Youtueb channel
Make in India
X