You are currently browsing the category archive for the ‘Tutorials’ category.
Currently it is not posssible to create a screen capture application using AS 3.0 and AIR Beta 1.
I built a demo screen capture application to test the fact.
Here is the screenshot of the application:
Image created and saved by the application:
Here is the code of the application I built to test the fact.
Sorry for being away for a while.
It is a simple example to play .flv files from the local system. Earlier in my Jukebox tutorials I had used a fileOpen component. As the component is no more available for download, I thought of showing this alternative way to access files from local system rather than rewriting the juke box tutorials again.
I hope readers would be ablw to use this concept while building their own mp3 players.
In case there is a problem, just send me a mail (no spam, please) .
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 :
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.
Name of the tutorial: Saving photos from Flickr to desktop in Flickrin 2
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.
Copyright: 2007, http://www.ashwineedash.com
Link to final application (if any):http://www.ashwineedash.com/download/Flickrin_2_app.zip
Requirements :
a) Adobe Flex Builder 2.0.1
b) Apollo Alpha extension for Flex Builder
c) Apollo Alpha runtime
d) Flickr API Key
e) Flickrin ver 1.0(source files)
f) AS3 corelib
Assumptions if any:
a) It is assumed that you have already downloaded and installed Flex Builder 2.0.1.
b) You have some programming background in Actionscript 3.0 and MXML.
c) You have already gone through Flickrin ver 1.0 tutorial
Building the application
Task 1: Creating a new state to display selected image
This state appears when the user clicks on one of the thumbnails and displays the medium sized image of the thumbnail.
Type the following code before the </mx:states> tag to create the new state named “dsplayImage” .
<mx:State name=”dsplayImage” basedOn=”thumbnailView”>
<mx:RemoveChild target='{thumbnailsTile}’/>
<mx:AddChild position=”lastChild”>
<mx:Canvas x=”23″ y=”104″ width=”452″ height=”316″ borderStyle=”solid” borderColor=”#004040″ id=”canvas1″>
<mx:Image id=”coverState” verticalCenter=”-2″ horizontalCenter=”0″ scaleContent=”false” autoLoad=”true”/>
</mx:Canvas>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”28″ y=”78″ text=”Title:” id=”label4″ fontWeight=”bold” fontSize=”11″/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”336″ y=”453″ text=”ashwinee2004@gmail.com” color=”#e4e0c9″ id=”label3″/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
<mx:RemoveChild target=”{label1}”/>
<mx:AddChild position=”lastChild” target=”{label1}”/>
<mx:SetProperty target=”{label1}” name=”x” value=”45″/>
<mx:SetProperty target=”{label1}” name=”y” value=”19″/>
<mx:RemoveChild target=”{label2}”/>
<mx:AddChild position=”lastChild” target=”{label2}”/>
<mx:SetProperty target=”{label2}” name=”x” value=”126″/>
<mx:SetProperty target=”{label2}” name=”y” value=”19″/>
<mx:RemoveChild target=”{searchPanel}”/>
<mx:RemoveChild target=”{label5}”/>
<mx:AddChild position=”lastChild”>
<mx:LinkButton x=”173″ y=”428″ label=”Back to Thumbnail View” click=”currentState=’thumbnailView'”/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”61″ y=”79″ id=”title1″/>
</mx:AddChild>
</mx:State>
The above code creates a new state named “dsplayImage” based on Thumbnail view state. The main purpose here is to show the medium sized image of the thumbnail selected by the user. The image object is placed inside the canvas container for image display. Out of the three label tags, the label with id “title1” displays the title of the image.
Either by clicking on the image itself or using the link button the user can return to the parent thumbnail view.
Clicking on the image method seems cool but first time users may not be able to detect it, so for them the link button is there.
Task 2: Displaying the selected image in dsplayImage view
The user has to click on the image to view the bigger image in dsplayImage view.For this we need to attach a click event to the thumbnail.
Step 1: Adding the click event to the thumbnail
Initial code
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}” />
Modified code
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}” click=”displayImageDetails(event.currentTarget.getRepeaterItem())”/>
When the thumbnail is clicked the displayImage function is called and event.currentTarget.getRepeaterItem() is passed as its parameter.
Step 2: Declare the displayImageDetails function
Add the following code before the </mx:script> tag.
public var selectedCover:Object;
private function displayImageDetails(selectedThumb:Object):void {
currentState=’dsplayImage’;
selectedCover = new Object();
selectedCover = selectedThumb;
title1.text = selectedCover.title;
coverState.load(“http://farm” + selectedCover.farm + “.static.flickr.com/” + selectedCover.server + “/” + selectedCover.id + “_” + selectedCover.secret + “_m.jpg”)
}
The image object need an URL to display the image. In this case the URL is to be formed in the specific format which Flickr api accepts i.e., http://farm%5Bfarm_id%5D.static.flickr.com/%5Bserver_id%5D/%5Bid%5D_%5Bsecret_id%5D_m.jpg
The _m here means medium sized image is to be fetched. For more information visit http://www.flickr.com/services/api
When the thumbnail is clicked it passes all the required info as the parameter to the function. Once the function receives the info, it assigns those info to our generic object selectedCover. The load method of Image object interprets selectedCover object properties and loads the image.
Now save the file and hit Run.
Task 3: Saving the file
Saving the image means writing the image file to the disk.the image loaded can not be saved to the disk without encoding the image into jpeg format.For this we need corelib library.
Step 1: Setting the library path
Get the corelib from http://as3corelib.googlecode.com/files/corelib-.90.zip .We will require it to encode jpgs.Unzip the corelib.zip to a location in your hard disk.
Create a new folder named “lib” by right clicking on the project folder in Navigator panel. Now copy the “corelib.swc” file from the “bin” folder of the unzipped corelib folder.and paste it in the newly created “lib” folder of the project. Flex builder still needs 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 dialog box will open.
Now select Apollo Build path from the list displayed at the right hand side of the dialog box.
Select the Library path by clicking on it.
Now click on Add SWC button.Now the Add SWC dialog box will open up.
Now click on the Browse button.
Choose a SWC File dialog box opens up.Select the corelib.swc file from the lib folder.(Remember you have pasted the file in the Flex Builder) and click on the Open button.
Now you will return to the Add SWC dialog box showing the library path. Click OK.
Now you can see the library added to the Build path libraries.
Step 3: Coding to save the image to the hard disk.
Type the following code within the <mx:script> tags
import adobe.com.images.*
private var file:File;
public function saveImg():void {
file = File.desktopDirectory;
file.addEventListener(Event.SELECT, onFileSave);
file.download(new URLRequest(“http://foo/foo”), “untitled.jpg”);
}
A variable named file is created.When saveImg() method is called it creates a refernce to the user’s desktop.It requests to download a file named untitled.jpg from the bogus http address.Usually when file is downloaded from the browser, the save file dialog box is opened.The location to save file is always the location where the file was last downloaded and the files name and type is always based on the downloaded file. So when we use download method of file object we are opening the file save dialog box.The download method takes two parameters one the url and another the filename .The location to save is pointed to the user’s desktop.When the user chooses a location to save the file, the onFileSave function is called.
Continue adding the following code to the above written code.
public function onFileSave(e:Event):void {
file.cancel();
var bmpData:BitmapData = new BitmapData(coverState.width, coverState.height);
bmpData.draw(coverState);
var jpgEncoder:JPGEncoder = new JPGEncoder();
var jpgBytes:ByteArray = jpgEncoder.encode(bmpData);
var stream:FileStream = new FileStream();
stream.open(file, FileMode.WRITE);
stream.writeBytes(jpgBytes, 0, jpgBytes.length);
stream.close();
The first thing it does is to cancel the file download, as both the url and the file do not exist.
Next it creates a new BitmapData object with the width and height of the image choosen to save.the draw method copies all the pixels information onto the bitmapdata object. JPGEncoder api encodes all pixel data into into jpeg format and a bytearray object is created to contain the jpeg data for writing to the file.
FileStream object opens the file for reading or writing based on filemode defined as READ or WRITE .When WRITE is used the file stream opens the existing file for overwriting.If there is no existing file, it creates one. stream.writeBytes writes the file and stream.close() saves and closes the file.
Now save the mxml file .
Task 4: Adding the “Save” button to save the image.
Now we will add the save button to save the image. So add the following piece of code within the dsplayImage state before </mx:state> code.
<mx:AddChild position=”lastChild”>
<mx:Button x=”421″ y=”77″ label=”Save” click=”saveImg()” height=”19″ color=”#004040″/>
</mx:AddChild>
Now save the file and run it.
Task 7: Packaging and distributing the application
Create the AIR file using Export option from File Menu. Once the file is created ,it can be distributed as such (Details of exporting the file is discussed in Flickrin ver 1 tutorial).
References:
I would like to recommend you go through the following resources for greater understanding.( All the credit for saving images should go to David and Daniel equally for sharing the source codes with us all. Thanks a lot.)
1. http://labs.adobe.com/wiki/index.php/Apollo:Articles
2. Apollo_for_Adobe_Flex_Developers_Pocket_Guide
3. http://blog.everythingflex.com/apollo/
4. Creating a mp3 player in Apollo and Flex 2
5. http://www.danieldura.com/archive/apollo-native-file-dialogs#more-182
6. http://blog.davr.org/2007/03/28/native-file-browse-dialog-in-apollo/
7. https://flnotes.wordpress.com/2007/04/05/flickrin-ver-10-flex-flickr-apollo-mashup-tutorial/
Name of the tutorial: Flickrin ver 1.0 Tutorial
Author: Ashwinee Dash
Description: Flickrin is a real world application for searching photos online using Flickr API.
Copyright: 2007, http://www.ashwineedash.com
Link to final application :http://www.ashwineedash.com/download/flickrin1.0.zip
Requirements :
a) Adobe Flex Builder 2.0.1
b) Apollo Alpha extension for Flex Builder
c) Apollo Alpha runtime
d) Flickr API Key
Assumptions if any:
a) It is assumed that you already have downloaded and installed Flex Builder 2.0.1.
b) You have some programming background in Actionscript 3.0 and MXML.
Body of tutorial:
What is Flickrin?
Flickrin is a real world application for searching photos online using Flickr API. Currently in version 1.0, the user can do a basic keyword search for thumbnails.
What is an API ?
API stands for “Application Programming Interface,”.In other words it means if you build an application which will use services or access resources of a certain application as in this case Flickr, you have to use the specified methods provided in the APIs being used.
How to use API?
To use api you need to obtain an api key. For obtaining the key visit http://www.flickr.com/services/api
Building the application
Task 1: Installation of Apollo extension
Download the Apollo alpha extension (fb_apollo_extensions_win_alpha1.exe) for Flex from http://www.adobe.com/go/getapollo.
Double click on the fb_apollo_extensions_win_alpha1.exe file and follow instructions to complete the installation.
Task 2: Create the apollo project
1 Open Flex Builder 2.0.1. Select File – New – Apollo Project.
2. This will open the New Apollo Project dialog box.In the dialog box Basic option is selected as default , so click the Next button.
3. In the next page of the dialog box, type Flickrin as the project name and leave Use Default Loacation selected. Click the Next button and this will open up the Application XML Properties panel.
In the panel specify the settings as follows:
ID : Flickrin
Name : Flickrin ver 1.0
Publisher : ashwineedash.com (you can use your own name here)
Description: Online Photo search application using Flickr API
Copyright : 2007
The New Apollo Project dialog box should look as shown in figure 1
image goes here
After specifying the details, click Finish button.
The project will be created and opened in the Flex Builder.
In addition to the Flickrin.mxml file you will see another xml file named Flickrin-app.xml. It is the descriptor file for your application.
Task 3 : Building the User Interface.
The finished application has two screens or states as shown in figure 2 and figure 3
(figure 2)
(figure 3)
Step 1 Changing the default look
In the mxml file you will see the following code Flex Builder has written for you.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
</mx:ApolloApplication>
First thing we need to do is to give our application a new look and a specific size. Now type backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500” after layout=”absolute” in <mx:ApolloApplication> tag.
Initial code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
Modified code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
Save the file and run it.You will see the application with the background set to white as shown in figure 4.
figure 4
Step 2 Building the First Screen
We will first create a panel to contain the labels, textinput and button. The labels will display the title of the application. The TextInput will be for typing the search word and the button to start the search.
Type the following code
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
Initial Code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
</mx:ApolloApplication>
Modified code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
</mx:ApolloApplication>
Now we can save the file and run it to see if the screen looks like as expected.
If everything looks OK, we can go for building the second screen.
Step 3 Building the Second State
What is a state?
Actually in flex there no such concept of first screen, second screen and so on. Here you will find a new concept called states. You can think of them as HTML pages or frames in timeline in Flash. In case of HTML, usually the user goes to a next page when he clicks a hyperlink or some kind of button. In case of Flash this page concept is simulated by letting the user move from one frame to another in the timeline. But here the user will move from one state to another.
Each state holds the information of the containers and components that is to be displayed in the stage. This is achieved by removing, adding and modifying the properties of the components and containers.
BaseState is the default state which is created each time a new project is created. Whatever components and containers we add to the Stage becomes part of the Base State by default.
The new state:
Here the thumbnails would appear with the option to search.Refer figure 3.
Type the following code to create the new state
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
The above code creates a new state called “thumbnailView” .The Panel container is resized positioned at the top.The stage size remains same.
Now add the following code before </mx:State> to add the Tile component to display the thumbnails that we request from Flickr .
<mx:AddChild position=”lastChild”>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
</mx:Tile>
</mx:AddChild>
This completes our task of building the User Interface and the complete code should look like as follows:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” xmlns:comp=”components.*” width=”500″ height=”500″>
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
</mx:Tile>
</mx:AddChild>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
</mx:ApolloApplication>
Task 4: Making the connection with Flickr
Let’s first see how our application works.
The user types a keyword in the search text box and then clicks the search button.The application then sends the request with the given parameters and fetches the results.The query result received is in the format of xml. The url of each individual image is to be formed from each record and assigned to the image component for displaying the thumbnails.
We will use flickr.photo.search method to send the request to search for photos with a specific tag to Flickr server.
A word about Flickr API request format
Flickr api requires the request should be sent in the following format
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value
(for details visit http://www.flickr.com/services/api/request.rest.html )
In the same manner the photo search method would be
(for details about parameters visit http://www.flickr.com/services/api/flickr.photos.search.html )
For sending the request we will use methods and properties of HTTPService class.
Type the following code after the </mx:states> tag.
<mx:HTTPService id=”searchFlickr” url=”http://api.flickr.com/services/rest/” method=”GET” showBusyCursor=”true” >
<mx:request xmlns=””>
<method>flickr.photos.search</method>
<api_key>YOUR API KEY HERE</api_key>
<text>{search_tags}</text>
<per_page>20</per_page>
</mx:request>
</mx:HTTPService>
Special Note
In the above code replace your api key with YOUR API KEY HERE in <api_key>YOUR API KEY HERE</api_key> tag, otherwise it will not work.
To initiate the http service create the following function
<mx:Script>
<![CDATA[
import mx.rpc.events.*;
import mx.collections.*;
[Bindable]
private var search_tags:String;
private function startSearch():void {
search_tags = fTags.text;
searchFlickr.send();
currentState = ‘thumbnailView’;
}
]]>
</mx:Script>
Then assign the startSearch() function to the search button.
When the the search button is clicked the startSearch() function is called.this function assigns the string value of the fTags textInput to the search_tags and then makes the http request with given parameters.After sending the request, the state is changed to thumbnailView.
Now we need a way to display all the thumbnails.
Displaying thumbnails from Flickr is a little tricky as the direct url is not provided in the xml file that is received as response to photo search query.The url has to be formed by joining the various attribute values in a specific format. As showing all the images from the query result requires some looping, we can use the repeater component for this task.Though repeater component will do the needful,it still requires a image display component for thumbnail display.
Let’s create the custom image display component.
Task 5: Creating the custom component
Right click on the project Flickrin in the Navigator pane and select New – Folder from the menu. In the New Folder dialog box that will open up type components as folder name and click Finish.
In the same manner right click on the components folder and create a new MXML component.
In the component dialog box type the name ImageDisplay and Base it on Image.Click OK to create the component.
Figure 5
A new fille named ImageDisplay now appears inside components folder.Double click on it to open it in the Flex Builder.
The following code is already written for you.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml” >
</mx:Image>
The Image class has a property called source which takes the url of the image to be displayed.In this case the image to be displayed exists in the Flickr server. The url of the image is to be formed as specified by Flickr api in the following manner
http://farm%5Bfarm_id%5D.static.flickr.com/%5Bserver_id%5D/%5Bid_id%5D_%5Bsecret_id%5D_t.jpg
for completr information visit http://www.flickr.com/services/api/……
Type the following code to declare a variable.
<mx:Script>
<![CDATA[
[Bindable]
public var flickrImageData:Object;
]]>
</mx:Script>
Type the following code inside <mx:Image> tag to form the required url each time the repeater component calls this custom component.
source=”http://farm{flickrImageData.farm}.static.flickr.com/{flickrImageData.server}/{flickrImageData.id}_{flickrImageData.secret}_t.jpg
Now the complete code should look like this
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml” source=”http://farm{flickrImageData.farm}.static.flickr.com/{flickrImageData.server}/{flickrImageData.id}_{flickrImageData.secret}_t.jpg”>
<mx:Script>
<![CDATA[
[Bindable]
public var flickrImageData:Object;
]]>
</mx:Script>
</mx:Image>
Now save the file.
Task 6: Using custom component in main application file
Inside the <ApolloApplication> tag type the following code
xmlns:comp=”components.*”
It links the main application file to the custom component.
Now create a Repeater component and give it an id displayRpt.
<mx:Repeater id=”displayRpt” dataProvider=”{searchFlickr.lastResult.rsp.photos.photo}”>
<comp:ImageDisplay flickrImageData=”{displayRpt.currentItem}” />
</mx:Repeater>
The repeater component needs data source to loop through and in this case the query result happens to our data source. For each record in the data source the ImageDisplay component is called and the record value is passed to its flickrImageData property.
The ImageDisplay component is based on Image component and that means it can load an image provided it has access to the url of the image.
The complete code should look like as follows:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” xmlns:comp=”components.*” width=”500″ height=”500″>
<mx:Script>
<![CDATA[
import mx.rpc.events.*;
import mx.collections.*;
import mx.controls.*;
[Bindable]
private var search_tags:String;
private function prepareSearch():void {
search_tags = fTags.text;
searchFlickr.send();
currentState = ‘thumbnailView’;
}
private function faultHandler(evt:FaultEvent):void {
Alert.show(“error opening file”)
}
]]>
</mx:Script>
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:AddChild position=”lastChild”>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
<mx:Repeater id=”displayRpt” dataProvider=”{searchFlickr.lastResult.rsp.photos.photo}”>
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}”/>
</mx:Repeater>
</mx:Tile>
</mx:AddChild>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
<mx:HTTPService id=”searchFlickr” url=”http://api.flickr.com/services/rest/” method=”GET” showBusyCursor=”true” fault=”faultHandler(event)”>
<mx:request xmlns=””>
<method>flickr.photos.search</method>
<api_key>YOUR API KEY HERE</api_key>
<text>{search_tags}</text>
<per_page>20</per_page>
</mx:request>
</mx:HTTPService>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” click=”prepareSearch()”/>
</mx:Panel>
</mx:ApolloApplication>
Now save the file and run it.
Task 7: Packaging and distributing the application
It is the easiest thing to do.
Select Export option from File Menu. The following panel will appear.
Select Deployable AIR File if already not selected and click Next.
The AIR Deployment Export Wizard appears.It will show all the Apollo projects open in Flex Builder.Now select the Flickrin -app.xml and type the destination where the .air file will be saved.
Then click Finish to create the AIR file in the desired location.
That’s it.
Now the application is ready to be distributed. Let others do some flickrin.
References:
I would like to recommend the following resources for better understanding.
1. http://labs.adobe.com/wiki/index.php/Apollo:Articles
2. Apollo_for_Adobe_Flex_Developers_Pocket_Guide
3. http://blog.everythingflex.com/apollo/
4. Creating a mp3 player in Apollo and Flex 2
Alternative downloads of source file
http://rapidshare.com/files/24437028/Flickrin_1_src_files.zip.html
FlexNotes 
