Flex Examples
Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;
private var img:Image;
private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>
<mx:WipeDown id="image_addedEffect" startDelay="100" />
<mx:Parallel id="image_removedEffect">
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
<mx:TileList id="tileList"
dataProvider="{xmlListColl}"
itemRenderer="CustomItemRenderer"
columnCount="4"
columnWidth="125"
rowCount="2"
rowHeight="100"
themeColor="haloSilver"
verticalScrollPolicy="on"
itemClick="tileList_itemClick(event);" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.@thumbnailImage}" />
<mx:Label text="{data.@title}" />
</mx:VBox>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
<image title="Flex"
thumbnailImage="assets/fx_appicon-tn.gif"
fullImage="assets/fx_appicon.jpg" />
<image title="Flash"
thumbnailImage="assets/fl_appicon-tn.gif"
fullImage="assets/fl_appicon.jpg" />
<image title="Illustrator"
thumbnailImage="assets/ai_appicon-tn.gif"
fullImage="assets/ai_appicon.jpg" />
<image title="Dreamweaver"
thumbnailImage="assets/dw_appicon-tn.gif"
fullImage="assets/dw_appicon.jpg" />
<image title="ColdFusion"
thumbnailImage="assets/cf_appicon-tn.gif"
fullImage="assets/cf_appicon.jpg" />
<image title="Flash Player"
thumbnailImage="assets/fl_player_appicon-tn.gif"
fullImage="assets/fl_player_appicon.jpg" />
<image title="Fireworks"
thumbnailImage="assets/fw_appicon-tn.gif"
fullImage="assets/fw_appicon.jpg" />
<image title="Lightroom"
thumbnailImage="assets/lr_appicon-tn.gif"
fullImage="assets/lr_appicon.jpg" />
<image title="Photoshop"
thumbnailImage="assets/ps_appicon-tn.gif"
fullImage="assets/ps_appicon.jpg" />
</gallery>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
deenalex,
You can use the
navigateToURL()function to open new web pages:<mx:Script> <![CDATA[ import flash.net.navigateToURL; private function gotoGoogle():void { navigateToURL(new URLRequest("http://www.google.com/")); } ]]> </mx:Script> <mx:LinkButton label="Google.com" click="gotoGoogle();" />Peter
Thanks peter,
Hi peter,
I got enrolled in project which mainly uses ILog component, i know some thing about ilog. Can you help me out to get some good examples and how to get similar with ilog.
Thanks in advance.
Deenalex.
Hello PeterD,
I saw your example with the TitleWindow and displays an Image control inside it. Is it also possible to add a next and a previous button in a TitleWindow, so when it’s clicked, the TitleWindow shows the next and the previous large image in the xml-file/tilelist?
Kind regards,
Herman
i used this code for image gallery it is working good with the relative adjustments which are to be made mandatorily.will you please let me know the procedure for giving the zooming effect for the image individually.
Hi peter,
I have task to show bottom faced tab navigation, i mean opposite view of normal tab navigation. It depends on style of tab or i have to change codes in normal Tab navigation itself….
Thanks in Advance….
deenalex
Thanks for the codes! It worked fine
I just have a question to ask,
Does anyone know how to make the scroll bar transparent?
Hi, anyone have an idea of how to display images from mysql database instead of xml files? i am using php codes to link between flex and the database. i have insert http service into my main mxml.. and i think i need to add sometimg to my customItemRenderer. hope someone here will be able to help..
Thanks in Advance…
Rina
Hey,
very cool piece of code you got there. I am currently putting together a Flex Image gallery just like it, however I want to streamline everything to give the user a really good experience in terms of speed. I am honestly quite new to Flex Framework itself but know flash pretty well. Just wondered why this file is so big!? I mean I have exported it as a release but the SWF itself is like 268KB. Even the main.swf you put up here is the same so I was just wondering in terms of optimization is there something I am missing? I’d really appreciate it if someone can point me in the right direction.
Thanks for your response
J
I have a problem with the “image_removedEffect”. When the image is clicked, it just disappears, without playing any effect.
Sorry, I did a mistake. The code works fine.
Peter,
I do not understand why it happens like this – when I click my mouse in the TileList container, in the empty space adjacent to the image titled “Photoshop”, that image gets selected. Is it not possible to make that image get selected, only when the mouse is clicked on it?
I’ve try to download the zip Flex project file.
Why flex ask me a libs folder?
Severity and Description Path Resource Location Creation Time Id
unable to open ‘/Users/walterfantauzzi/Documents/Flex Builder 3/TileList_itemClick_test/libs’ TileList_itemClick_test Unknown 1240900800790 3208
How I can use this code to learn how make a gallery XML in flex?
thanks
thanks it really helped me… clear understanding of code..good work..
ryosaeb4,
Yeah, you may need to create an empty /libs/ folder in your Flex project. I think I may have forgotten to publish that empty folder when exporting some of these projects.
Peter
instead of jpgs, i load swfs into the gallery when i click on the thumbnail. i have been racking my brain trying to figure out how to add the close button to the swf that is loaded. what code do i type into flash to make that happen?
Hi, first – your gallery is great! I little tune up code for my gallery and it look beautiful.
But, i’ve read all comments, especially from Herman, because i also want to add prev/next buttons to popup.
As far, no result… Can you give me any idea how to do that?
Is there anyway to prevent the image redraw when you scroll? It has a serious lag on it that I’ve noticed with this type of list component. It would be nice if you could cache the image somehow so the flex app doesn’t have to redraw it when you scroll the list
@Bart,
See Ely Greenfield’s SuperImage example, “Some thoughts on Flex vs. HTML (or…’how I made my Flex List Images stop flickering.’)”, on QuietlyScheming.com.
Peter
how can we scroll images in tilelist slowly,
abhishekchess1@gmail.com
This is great… thanks for the help!
First, I want to say thanks for this wonderful example! It has helped me out a great deal. Next, to know if you could explain how to add text to the function that brings in the fullImage? For example, in the xml file if there is a node called “description” how can data be brought into the item renderer via data.@description ?
thanks peter, for this nice gallery.
it really helped me a lot.
but, is there any possibility to change the itemClick event to a keyDown ?
when i use keyDown instead of itemClick there is a problem with the parameter throwed because the itemClick event throws a ListEvent,
but the keyDown does not. i mean of course because its only keyDown and not itemKeyDown.. but i still dont know how to fix this.
any idea?
can someone other help me?
thanks alot so far (:
martin
@Martin,
Instead of this:
Try this:
Not sure if that will work completely since the code tries to access
img.source = evt.itemRenderer.data.@fullImage;in that event handler, so you may need to tweak it slightly to get the full image source.Peter
well, with only changing the ListEvent to Event it wont work because a normal Event type has no .itemRenderer method. am I right?
I really have no idea how to get the selected item without reading it out through event.itemRenderer.data
@Martin,
Sorry, I don’t have time to verify right now, but maybe try changing this:
To this:
Peter
oh my god, yes of course..
it works.
thanks peter !
Thank you for this sample code.. I am using the Flex Application and am not sure where to put all of these files to make this project run… any chance some one might not mind documenting where to put each piece for example CustomRenderMxml…. where do take the text and save it… whats the path…
@Don,
If you view the source code for the SWF (http://blog.flexexamples.com/wp-content/uploads/TileList_itemClick_test/bin/srcview/index.html), you should see a “Download source (ZIP, 134K)” in the lower, left hand corner. You should be able to download the ZIP file and import it into your Flex Builder 3/Flash Builder 4 and run the application from there.
Peter
Hello Every1,
Does anyone know how to make turn the the thumbnail image into a web URL from the xml file ?
for example if there’s a tag http://www.adobeflex.com for the flex image
hope someone can help me out on this one!
Do you the best way to convert an image into a thumbnail dynamically? Also I am trying to convert from other formats such as .psd.
@bridget,
I don’t know about .PSD files specifically, but ColdFusion has some image manipulation capabilities and can resize images quite nicely. I’m pretty sure you can also look into ImageMagick which is a great image library, which I believe supports .PSD files.
Heey Peter,
i’m trying to reconstruct your Gallery in an Air application.
But doing that, it doesnt recognize CustomItemRenderer.mxml.
1172: Definition CustomItemRenderer could not be found. PortfolioRypens/src/be/Rypens/PortfolioRypens/model/views cmpGallery.mxml
Any idea?
Hi
its nice. but it contain lot problem .actually am give image name through xml. i have 10 xml and am already load and give data to tile list using combo its not work perfectly .some time some images are missed . i dont know wat to do… pls help
I have the same problem! Please help!!
I often get some error when I try to open and close all of the images sequentially using your code: more precisely, when I click on a thumb I can’t get the popup! The program seems to be idle.. Then I refresh the page and I’m able to open/close some pic but it comes again the bug! Any suggestion?
RangeError: Error #2006
The same problem! help pls!
hi petar I am new in flex and i want to make same application which u show in demo but this is not working in my application. I found an error like “Problem finding external XML:gellery.xml”.please help me in this.
thanks in advance
@wasim,
You need to make sure you copy/paste the “gallery.xml” file and put it in the same directory as your *.mxml file.
Also, make sure you spelled the name correctly. It should be “gallery.xml” but your error message says “gellery.xml”.
Peter
Hi..
Am new to flex, can any one help me out..?
in th above example tht is to create image gallery, the code is very intersesting but wanted to know if i have to just copy the codes fully into main.mxml…?
DO let ne know, am getting errors/
Thanks in advance
hi peter ,i saw ur blogs it simply superb to understand
i am new to flex i am trying with basic things ,now i am trying to create a image gallery where images will be displayed and i am trying to achive drag and drop from that gallery to nother canvas can u please help with some code ……
thank u
Hello Peter
I really appreciate this article and it has helped me a lot. I have implemented the code seamlessly but stuck in one simple problem, that is when I call “PopUpManager.removePopUp” example you mentioned, the image is destroyed and the thumbnail or small image displays nothing. Is there any way to retain the image somehow, i am using an object of Bitmap type to set the source