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.
{ 22 comments… read them below or add one }
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 (:
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
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…
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.
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?
Hello peter , I was reading 1 of your old blog regarding tree control
http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/
while running the application i get two errors ..
1)Access of possibly undefined property dataDescriptor through a reference with static type Tree.
2)Access of possibly undefined property selectedItem through a reference with static type Tree.
Please help me out.
Apoorv
@Apoorv,
Are you modifying the example at all? I tried importing the example ZIP into Flash Builder 4 and compiling using the Flex 3.5 SDK and it worked as expected (although I did have a compiler error which required me to create a /libs/ folder in my project).
Peter
Hey Peter ,
Thnks it worked after downloading source code previously it wasnt working .
I have 1 more query .. Can we add pictures to the directory ? If yes than please guide me .
Like if the person clicks All than also a picture is shown
waiting for your reply
Regards
Apoorv