The following example shows how you can create a simple image gallery in Flex using a Tree control and a SWFLoader control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var t:Tree = evt.currentTarget as Tree;
var dataObj:Object = evt.itemRenderer.data;
if (dataObj.hasOwnProperty("@src")) {
swfLoader.source = dataObj.@src;
} else if (t.dataDescriptor.isBranch(t.selectedItem)) {
swfLoader.source = null;
panel.status = "";
}
}
private function tree_labelFunc(item:Object):String {
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
suffix = " (" + item.children().length() + ")";
}
return item.@label + suffix;
}
private function swfLoader_complete(evt:Event):void {
panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
}
]]>
</mx:Script>
<mx:XML id="dp" source="data/dp.xml" />
<mx:HDividedBox width="100%" height="100%">
<mx:Panel width="200" height="100%">
<mx:Tree id="tree"
dataProvider="{dp}"
labelFunction="tree_labelFunc"
showRoot="false"
width="100%"
height="100%"
itemClick="tree_itemClick(event);" />
</mx:Panel>
<mx:Panel id="panel"
width="100%"
height="100%"
backgroundColor="white">
<mx:SWFLoader id="swfLoader"
scaleContent="true"
width="100%"
height="100%"
complete="swfLoader_complete(event);" />
<mx:ControlBar>
<mx:LinkButton label="{swfLoader.source.toString()}" />
</mx:ControlBar>
</mx:Panel>
</mx:HDividedBox>
</mx:Application>
data/dp.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<root>
<gallery label="RIA">
<file label="ColdFusion" src="assets/cf_appicon.jpg" />
<file label="Dreamweaver" src="assets/dw_appicon.jpg" />
<file label="Flash" src="assets/fl_appicon.jpg" />
<file label="Flash Player" src="assets/fl_player_appicon.jpg" />
<file label="Flex" src="assets/fx_appicon.jpg" />
</gallery>
</root>
View source is enabled in the following example.
{ 27 comments… read them below or add one }
Hi Peter,
nice example. Here – as in the tree control in general – I can’t open a branch by clicking on the branches name or icon, but have to aim for the triangle.
Wouldn’t expanding the hit area to open and close branches be a nice tutorial?
Thanks for all your great stuff here
Klaus
Hi,
Really nice example! Thanks!
eternalko
PS. Recently I was remaking (PHP bot parsing the content) such forum
http://eternalko.890m.com/pub/sghforum/Forum.htm
to this
http://eternalko.890m.com/pub/simple_tree.swf
Just to make it easier for ME to read it.
Common structure (:
Klaus Busse,
Done. For more information, see the poorly named “Opening branches by clicking rows in a Tree control in Flex”.
Peter
WOW Peter, that was quick :-)
Thanks!
Klaus
Hi Peter,
When link to swf’s these were full apps not movies and click on the tree several times I get an 1034 error runtime error. Going between images no problem. I am not sure I am inserting the other apps correctly. So how about creating the tree that links to swf’s in the right panel. Just like the component explorer. Nice work.
Thanx
Hi Peter,
I am looking for a simple example of a Tree Control linking to content, rather than an image in the right hand panel.
Pretty much like what eternalko has done here: http://eternalko.890m.com/pub/simple_tree.swf
Would it be at all possible for you to post such an example or point me in the right direction.
Much appreciated!
Declan
I am trying to implement this same example tree code into flex builder 3. I am very new to flex programming and am having a problem when running my code. I feel as if there is something I am doing incorrectly as far as compiling my code to swf files. Also I am confused about where the final html document comes into play. Anyone out there that can help, or at least direct me to where this sort of beginners tutorial may be. Thanks!
How would you edit this app so that the images are not reloaded every time one clicks on the image name in the tree? In other words, only one server hit per image, no matter how many times one views the various images.
Many thanks!!!
Peter,
Take a look at Ely Greenfield’s SuperImage component, “Some thoughts on Flex vs. HTML (or… “how I made my Flex List Images stop flickering.”)”.
Peter
You good sir, are a genius. I’ve been trying to figure out how to get a tree menu to load modules dynamicly. After many fruitless searches I came accross this code which I was able to adapt, and now everything works as it should.
Thank you, thank you, thank you!
ok! about the UNLOAD FEATURE? it does not work in reality…swfLoader does not unload when you try to load new content, it seems like it just become invisible in the back ground still playing movie, sound or whatever it was doing before being replaced…is there a way to get it to really work in a real production as promissed here.
HI peter,
i need your help ,pla help me…
Is there any option to display videos instead of images there while clicking on the link sof treemenu………….
if u give it flash it is much more better for me,bec actually i have a project like this exactly
and i have no time.my client wants flv videos loading dynamically in flash with the help of treemenu in left panel with scroll bar.he wants to edit xml for treemenu afterwards while he paste the videos in folder..
can u help me plz.he wants in swf format..
flex also doesnt matter……….plz help me…save my job…..i will be very thankful to u…..
THANKS
delta,
If you want to play videos instead of images, use the VideoDisplay control instead of the SWFLoader control. Apart from that, I don’t think you’ll need to change any code.
Peter
Hi Perter,
I am very sorry to trouble u again,actually i dont have good knowledge in flex.anyway my client gave few images for background to display in bg of treemenu and bg of videodisplay.i dont know whether it is possible in flex to put those images in bg’s…because in flex the components were used. And in the components background the designs must be used which were given by client..
So can u help me in flash with treemenu(with 2 submenus inside,and one more submenu in the first submenu) which can be edited with xml for menus and linking them to flv files to load inside flash in a flvPlayer component etc…
Please save my job,i am in new job and this is my first project and i dont want to loose my impression…i asked many people nobody could do it…i have hope in u …
I will be very thankful to u if u do this help for me…..
Thanks
delta,
There is an example of setting a background image on a Flex VideoDisplay control at “Setting a background image on a VideoDisplay control in Flex”.
Peter
Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…
i want one more submenu in the list like if i click on the menu folder “ALL” i can see a list.im that there is flash link.if i click on flash link i want one more submenu in that like actionscript etc..how can i make that possible…
how would you do a link so when you click on the large image it would take you to a url?
thanks
flex lover,
You can use the
navigateToURL()method, as seen in the following example:<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import flash.net.navigateToURL; private function img_doubleClick(evt:MouseEvent):void { var urlReq:URLRequest = new URLRequest(evt.currentTarget.source); navigateToURL(urlReq, "_blank"); } ]]> </mx:Script> <mx:Image id="img1" source="http://www.helpexamples.com/flash/images/image1.jpg" doubleClickEnabled="true" doubleClick="img_doubleClick(event);" /> <mx:Image id="img2" source="http://www.helpexamples.com/flash/images/image2.jpg" doubleClickEnabled="true" doubleClick="img_doubleClick(event);" /> </mx:Application>Peter
great, thanks for thant and thanks for the quick reply,
2 other questions.
how can i have an image or the first image be up already?
how do i center the image?
thanks so much
found the image center place
Thanks very much
Hello! Awesome blog, you’ve helped a newbie like me tons :)
I used your code to create a bare bones beginning to my app, with 2 SWFloaders populated via the xml tree (thanks for that!) These 2 SWFLoaders correspond to a content box for lessons, and a virtual tutor box for videos. All of the content are AS3 swfs. I want to place buttons in my content so that I can change out the SWFs in either of the SWFLoaders in the Flex app. Do you know the code I would need in order to do that in my Flex app, as well as in my FLA files?
Dear
Peter -
I got this tree control based image galery demo to compile and run with the latest Gumbo sdk, that is, utilizing the old 2006 name space….. Then with my attempts to move into using the latest Gumbo/Spark based components… I’m finding that apparently that the newer XML document parsing component have also have a recently rearranged there API…. I’ll do more reading, Then I gather there is some problem adding the XML parser resulting to be a member of its parent container??
Im trying to figure out how this XML parsing should now be written with the new Gumbo API, Any assistance in helping bring your example code up to the latest would be great!….P.S. where should I send the Flex zip archives of the revised 3D Action Script example that I took a bit furthe… that is, I pulled the Action Script it’s own “.as” file.??
All the best
-Peter L.
Figured it out, in Gumbo’s MXML an fx:XML object creation tag, must be declared as inside an fx:Declarations open/closing tag pair…. once one makes this adjustment, with a just splendid mix of s:,fx: and mx: name space designators ( kind of drives one crazy guessing which ones to use for any given object, and things could become even more obscure if this name space craziness continues with the Gumbo sdk ) … given these these adjustments this example has been made to execute withing the latest Gumbo sdk….
Let me know where I should send the updated,Gumbo revised, FLEX project archive files..
Cheers
-Peter L.
Hi there;
i want to make a tree control but when i click it i dont want to show image,i want to show other mxml or html sites….how can i make it???
Peter,
I have been looking for an example of a tree that controls a list of images. As the user works his way down the branches of the tree the list filters the images until the final leaf displays a single image. Any suggestions?