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&#8221; + 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.

properties

The properties dialog box will open.

properties dialog box

 

Now select Apollo Build path from the list displayed at the right hand side of the dialog box.

build path

 

Select the Library path by clicking on it.

library path

Now click on Add SWC button.Now the Add SWC dialog box will open up.

add swc

Now click on the Browse button.

choose swc

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.

swc added

Now you will return to the Add SWC dialog box showing the library path. Click OK.

swc added 2

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&#8221;), “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/

 

Download Source file

Download AIR file

 

 

Advertisements