2 Replies Latest reply on Jul 26, 2006 4:36 PM by ntsiii

    Opening a gif in a tree

    NUMB-LOCK
      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
        • 1. Opening a gif in a tree
          NUMB-LOCK Level 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>
          • 2. Re: Opening a gif in a tree
            ntsiii Level 3
            Nice example. Please do post if you get sound or video working.

            Tracy