Title: Repackaging Flickrin to run in AIR

Author: Ashwinee Dash

Description: Flickrin 2.0 is a real world application for searching photos online using Flickr API. Users can save the selected images from the search result.In this article we learn to upgrade this Apollo application to run in the newly upgraded environment named Adobe Integrated Runtime (AIR).

Copyright: 2007, http://www.ashwineedash.com

Link to final application : Flickrin 2.0

Requirements :

a) Adobe Flex Builder 3 Beta

b) AIR Beta Runtime

c) Flickr API Key

d) Flickrin ver 2.0(source files)

e) AS3 corelib

Assumptions if any:

a) You have downloaded and installed Flex Builder 3 Beta.

b) You have already gone through Flickrin ver 1.0 and 2.0 tutorials.

Body of tutorial:

Building the application

Task 1: Creating a new AIR project

Step 1: In the Flex Builder 3.0 go to File > New and select AIR Project.

Figure 1

The New Adobe AIR Project dialog box appears. Type Flickrin in the Project name input box. Choose Other/None as the Server type if it is not already selected. Click Next button to proceed.

Figure 2

Another dialog box appears for specifying the project location. Your project location would be the directory where all the files and folders related to the project will be saved by Flex builder. Select default location (if not already ticked) by ticking in the checkbox Use Default location. The default location would be the Flex Builder Moxie folder in the My Documents folder in the Windows XP environment.

Figure 3

 

Choose the Use default SDK (currently “Flex Moxie M2”) radio button, if it is not already selected.

Click Finish button. The Flex Builder would create the necessary project folders and files.

Step 2

Open the Flickrin.mxml file in any text editor and copy all the code between <ApolloApplication> </ApolloApplication> tags and paste it between <WindowApplication> </WindowApplication> tags in the new Flickrin.mxml file created by the Flex builder.

Make the necessary changes in the following code.

//initial code

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute”>

//modified code

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” xmlns:comp=”components.*” width=”500″ height=”500″>

Step 3

Copy the component and lib folders. Then in the Flex Builder right click on the Flickrin project and select paste.

Figure 4

Step 4: Setting the library path

Flex builder still needs a way to know that corelib is associated with this project. This can be done by setting the library path to the library.

Right click on the project and select properties from the menu. The Properties for Flickrin dialog box opens.

Figure 5

Now select AIR Build Path from the series of options displayed on the left hand side of the properties dialog box.

Now click on the Library path tab.

Figure 6

Click on the Add SWC button. The Add SWC button dialog box will open up.

Figure 7

 

Add SWC button dialog box would open up. In the provided box either type the path of the SWC or click browse button to select the SWC file.

Figure 8

Then click OK button.

Figure 9

Now the library is added and make sure default link type selected is “Merged into code”.

Click OK button.

Task 7: Packaging and distributing the application

It is the easiest thing to do.

Now select Export option from File Menu. The following panel will appear.

Figure 10

The Export dialog box opens up.

Figure 11

 

Select Adobe AIR Package from tree menu displayed. If you cannot see the AIR package option, click on small arrow on the left hand side of the folder icon of Adobe AIR. It will expand to show this option. Click Next to continue.

Figure 12

 

In the Adobe AIR Package Contents dialog box, you can select the contents that will be included in the package. You can also specify a desired location where the application will be saved by clicking the Browse button. Click Finish to create the AIR file in the desired location. The application will be created inside the project folder which is Flickrin in this case.

That’s it.

Your application is now ready to be distributed for AIR runtime.

References:

I would like to recommend you go through the following resources for greater understanding.

1. http://labs.adobe.com/wiki/index.php/AIR:Articles

2. http://labs.adobe.com/wiki/index.php/AIR:Release_Notes

3. https://flnotes.wordpress.com/2007/04/22/saving-photos-from-flickr-to-desktop-in-flickrin-2/

4. https://flnotes.wordpress.com/2007/04/05/flickrin-ver-10-flex-flickr-apollo-mashup-tutorial/Downloads:

Finished Sources

Application

 

Advertisements