Opening a gif in a tree

Question

Hi All,
I'm new to Flex 2 and also Action Script. Been looking at the
code examples online in the Developer's guide, however, they fall
short as to what I am looking for. I need to open an image which is
contained in a tree and display it in a canvas/panel adjacent to
the tree. Sounds simple to me but difficult to find a detailed
example code to get it done. After that, I then need to do the same
with a sound clip and video.
Thanks!
Bob

Answer 1

HI All,
Hope this helps those newbies out there who want to know how
to deal with trees. I got this to work...click on a node which has
a jpg and the picture will appear within an adjacent canvas.
You will obviously have to supply your own jpgs. And only 3
of the nodes are set up in this code to show anything. I do not
have this set up to work with sound/video clips....yet. Also, the
ActionScript could be improved....but hey this was my first crack
at ActionScript!
AND, It is unfortunate that the indentations of the source
code gets all messed up when I submit this reply...apologies.
<!-- Tree control example. -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var selectedNode:Object;
// Event handler for the Tree control change event.
public function treeChanged(e:Event):void {
selectedNode=Tree(e.target).selectedItem;
if (selectedNode.@label == "Alexander") {
showImage();
else if (selectedNode.@label == "Map") {
showMap();
else if (selectedNode.@label == "Document") {
showDocument();
else {
img0.visible = false;
img1.visible = false;
img2.visible = false;
private function showImage():void {
img0.visible=true;
if (img1.visible) {
img1.visible=false;
else if (img2.visible) {
img2.visible=false;
private function showMap():void {
img1.visible=true;
if (img0.visible) {
img0.visible=false;
else if (img2.visible) {
img2.visible=false;
private function showDocument():void {
img2.visible=true;
if (img0.visible) {
img0.visible=false;
else if (img1.visible) {
img1.visible=false;
]]>
</mx:Script>
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Alexander"/>
<node label="Product Management"/>
<node label="Map"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
<node label="Document"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control"
height="75%"
width="75%"
paddingTop="10"
paddingLeft="10"
paddingRight="10"
paddingBottom="10">
<mx:Label width="100%" color="blue" text="Select a node
in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<mx:Tree id="myTree" width="30%" height="100%"
labelField="@label"
showRoot="false" dataProvider="{treeData}"
change="treeChanged(event);"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"/>
<mx:Canvas height="100%" width="70%">
<mx:Image id="img0" visible="false"
source="@Embed(source='Alexander.jpg')" />
<mx:Image id="img1" visible="false"
source="@Embed(source='Map.jpg')" />
<mx:Image id="img2" visible="false"
source="@Embed(source='Document.jpg')" />
</mx:Canvas>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>