ThinkDigit Home
Subscribe to the Newsletter
Search
 
SKOAR!       / SHOPPING
 
 
News / Features / Downloads / Channel 5
 
Feature story
 
Creating an image gallery app with Flash Builder 4 in 10 steps
 
Posted by
Kshitij Sobti
3
564
Posted on: Jul 01, 2010 22:17:13 IST

 
 
 

Introduction

Last time we created an widget which allowed you to search on Twitter, which introduced you to Flex Catalyst, and showed how it could be used to create a rich UI for you application. In this tutorial we will create an application which loads an XML gallery exported from Picasa, and displays the files in a gallery.

Picasa 3 allows one to export their images as a HTML galleries, and also supports an option to export the image gallery as an XML. If you choose to export as XML, Picasa will create an XML file with information about the images you selected to export. The file created by Picasa is quite verbose, and has a lot of detail we wont use, however you can expand your own application to utilize the same.

Our application will read in this data, and manipulate it using E4X (ECMAScript for XML) which is a simple and powerful way of manipulating XML documents. ActionScript 3 treats XML as a native type like any integer or string. We will only use a very small subset of these features.

Exporting the XML from Picasa

The feature we are looking for here is “Export as HTML Page...” which is found in the “Folder” menu item in Picasa. You can select the images you want in your gallery, and use this feature to generate an HTML gallery of the selected images. We will however use this to output an XML index for our gallery instead and develop our own front-end.

Exporting the selected photos as an HTML page with Picasa 3

This option will show a dialog which will allow you to select the options for you export. You can choose the resolution at which the images will be resized, or you can just choose to export them at their original resolution. We will select 800 pixels so that all images have a similar size. Choose where to save it, and in the list of templates, select “XML Code”.

Select to export the photos as “XML Code”

This will take a few minutes depending on the number of images selected, and will launch the XML file in your default editor. Before using this in the application, let us take a look at the XML format of the file:

<?xml version="1.0" encoding="utf-8" ?>
<album>
<albumName>Recently Updated</albumName>
<albumItemCount>24</albumItemCount>
<albumCaption></albumCaption>
<images>
<image>...

We have a root tag of <album> with an <albumName>, a count of the images in the album <albumItemCount>, a caption for the album <albumCaption> and an <images> tag which contains information about each image in an <image> tag.

Here is what the image tag looks like:

<image>
<isFirstImage>false</isFirstImage>
<isPrevImage>true</isPrevImage>
<isLastImage>false</isLastImage>
<isNextImage>true</isNextImage>
<firstImage>images/theresbenjamingualon.jpg</firstImage>
<itemLargeImage> images/reuse.jpg</itemLargeImage>
<nextImage>ewasteopening.jpg<nextImage>
<nextThumbnail>ewasteopening.jpg</nextThumbnail>
<prevImage>theresbenjamingualon.jpg </prevImage>
<prevThumbnail>theresbenjamingualon.jpg</prevThumbnail>
<lastImage>images/hp_laserjet_pro_m1213nf_aio___lr.jpg</lastImage>
<lastThumbnail>thumbnails/hp_laserjet_pro_m1213nf_aio___lr.jpg</lastThumbnail>
<itemWidth>468</itemWidth>
<itemHeight>313</itemHeight>
<itemThumbnailImage>thumbnails/someimagefile.jpg</itemThumbnailImage>
<itemThumbnailWidth>90</itemThumbnailWidth>
<itemThumbnailHeight> 64 </itemThumbnailHeight>
<itemName>someimagefile.jpg</itemName>
<itemNumber513</itemNumber>
<itemOriginalPath>c:somefoldersomeimagefile.jpg</itemOriginalPath>
<itemNameOnly> itemNameOnly UNDEFINED (9)</itemNameOnly>
<itemCaption>someimagefile.jpg</itemCaption>
<itemSize>itemSize UNDEFINED (9)</itemSize>
</image>

In all of this we only need the the <itemThumbnailImage>, <itemLargeImage>, and <itemName>. We can use the caption as well, but for our simple example we will avoid it.

 

 

 

You can download a free trial of Adobe Flash Builder 4 from the Adobe website.

    
Next >
 
To discuss this article visit its forum entry here

 
Want more? Subscribe to Digit and get the month's most relevant news, feature articles, DVDs with latest softwares and a learning guide called Fast Track.
Leave a comment





 
 

 
 
 
Latest Features
 
 
 
 
Comments 3comments
 
Posted by Frinnaravease on Dec 17,2011
 
Today, considering the Canada Goose Jacket fast life-style that everyone is having, credit cards have a big demand in the economy. Persons throughout every arena are using the credit card and people who not using the credit cards have lined up to apply for one in particular. Thanks for sharing your ideas about credit cards. In these days of austerity and relative stress and anxiety about having debt, some people balk contrary to the idea of making use of a credit card to make acquisition of merchandise and also pay for a holiday, preferring, instead just to rely on the actual tried along with trusted way of making payment - raw cash. However, if you possess the cash on hand to make the purchase fully, then, paradoxically, that is the best time for them to use the card for several motives. One thing is that often one of the most typical incentives for making use of your cards is a cash-back or rebate supply. Generally, you'll get 1-5% back for various purchases. Depending on the credit cards, you may get 1% back again on most expenses, and 5% in return on expenditures made from convenience stores, gas stations, grocery stores and also 'member merchants'. Thanks for these guidelines. One thing I should also believe is that often credit cards supplying a 0% rate often entice consumers along with zero rate, instant authorization and easy internet balance transfers, however beware of the main factor that may void your own 0% easy neighborhood annual percentage rate as well as throw you out into the bad house quickly. Thanks for your concepts. One thing we have noticed is banks in addition to financial institutions have in mind the spending patterns of consumers as well as understand that most of the people max outside their cards around the vacations. They properly take advantage of this Canada Goose Jacket fact and start flooding your inbox and snail-mail box along with hundreds of Zero APR card offers shortly when the holiday season closes. Knowing that when you are like 98% of the American public, you'll leap at the one opportunity to consolidate personal credit card debt and switch balances to 0 apr interest rates credit cards.
 
Posted by Fusswipsper on Dec 15,2011
 
Thanks for the ideas timberland shoes you have shared here. In addition, I believe there are numerous factors that keep your car insurance policy premium lower. One is, to consider buying autos that are inside the good set of car insurance businesses. Cars that happen to be expensive tend to be more at risk of being lost. Aside from that insurance is also depending on the value of your automobile, so the more costly it is, then higher the particular premium you pay. I have observed that car insurance organizations know the automobiles which are susceptible to accidents along with other risks. Additionally they know what type of cars are susceptible to higher risk plus the higher risk they've already the higher the premium charge. Understanding the straightforward basics connected with car insurance will let you choose the right kind of insurance policy timberland boots uk that will take care of your needs in case you become involved in an accident. Many thanks for sharing the particular ideas with your blog. Thanks alot : ) for your post. I would really like to say that the expense of car insurance varies greatly from one insurance plan to another, simply because there are so many different issues which give rise to the overall cost. One example is, the make and model of the motor vehicle will have a significant bearing on the price tag. A reliable old family car will have a lower priced premium compared to a flashy sports vehicle. Thanks for the several tips provided on this website. I have observed that many insurance firms offer timberland boots customers generous savings if they favor to insure several cars with them. A significant quantity of households have several cars these days, especially those with more aged teenage young children still residing at home, plus the savings upon policies can certainly soon begin. So it makes sense to look for a great deal. One thing I'd like to say is that car insurance cancelling is a horrible experience and if you're doing the right things being a driver you'll not get one. Some people do get the notice that they have been officially dumped by their own insurance company and many have to scramble to get added insurance from a cancellation. Inexpensive auto insurance rates are usually hard to get after the cancellation. Understanding the main reasons concerning the auto insurance canceling can help motorists prevent completely losing in one of the most crucial privileges out there. Thanks for the tips shared by means of your blog.
 
Posted by Josh on Jul 29,2010
 
I'm on step 5, just trying to get xml data to display in my list. Nothing appears. I don't know how to tell that my app is properly connecting/seeing/pulling from my xml file. Do I need to create a data service? If so an XML or HTTP service? I notice you have not yet your list still pulls the data from the xml file
 
 


 
 

 
 
 
 
Newsletter Subscription
 
 
 
 
 
 
 
 
 
 
 
 
 
 
http://devworks.thinkdigit.com