1 Reply Latest reply on Nov 12, 2009 8:38 AM by Tvoliter

    Using swf output in FlashDevelop / ActionScript 3

    NilsSchneider

      Hello,

       

      we creating a game that requires a UI. Our Graphics Artist creates the UI using Photoshop => Catalyst. However, we're unable to access the controls inside ActionScript 3 if the UI swf file ist loaded as a MovieClip. The problem is, a button that is called "Button" in Catalyst, gets the name "Button17" and is located deep down in a DisplayObject tree, something like instance51->Main0->ApplicationSkin2->Group3->Group4->Button17.

       

      Is there any way to access the controls in a standard way so I can be sure to access "Button" and register an event for it? I can register an event for mouse clicks for the whole MovieClip that is called, but the object that is clicked is e.g. called "Button17", like stated above.

       

      Thank you for help,

       

      Nils

        • 1. Re: Using swf output in FlashDevelop / ActionScript 3
          Tvoliter Adobe Employee

          In Flash Catalyst user attach interactions directly to the object they want to cause the interaction. Flash Builder provides some additional flexibility that allows you do handle events at different levels of the display tree. This is more of a coding question for Flash Builder than Catalyst, but I will still explain below:

           

          Flex supports "event bubbling" where an event moves up the display tree hierachy allowing other objects to handle the event. This gives developers the flexability of deciding which level they want to handle events in the UI.

           

          You can put event listeners on parents of your button, and when the button is clicked, the event will "bubble" up and eventually hit your listener. When your listener gets called you can tell which object dispatched the event by looking at the "target" member of the event.

           

          More information is available on this here:

          http://livedocs.adobe.com/flex/3/html/help.html?content=events_08.html

           

          Here is an example I started in Catalyst that brought to Flash Builder. In this example there are three buttons in a nested group structure. I modified the code so that a group handles events for the buttons. The click handler changes the current state to Page2 only when button1 is clicked. Notice that I put the click handler on group1 and in the handler I check the "target" member to see which button caused the click. The important parts are in bold.

           

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:d="http://ns.adobe.com/fxg/2008/dt"
              xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
              backgroundColor="#FFFFFF" height="600"
              preloaderBaseColor="#FFFFFF" width="800">
             
              <fx:Script>
                  <![CDATA[
                      protected function button1_clickHandler(event:Event):void
                      {
                          if( event.target == button1 )
                              currentState='Page2';
                      }
                  ]]>
                 
              </fx:Script>
              <s:states>
                  <s:State name="Page1"/>
                  <s:State name="Page2"/>
              </s:states>
              <fx:DesignLayer d:userLabel="Layer 1">
                  <s:Group  x="157" y="234" id="group1" click="button1_clickHandler(event)">
                      <s:Group x="0" y="0">
                          <s:Group x="0" y="0">
                              <s:Button x="173" id="button3" label="Button3" d:userLabel="Button3" y="0"/>
                              <s:Button label="Button2" x="90" y="0" id="button2" d:userLabel="Button2"/>
                              <s:Button label="Button1" x="0" y="0" id="button1" d:userLabel="Button1" />
                          </s:Group>
                          </s:Group>
                      </s:Group>
                      <s:Rect includeIn="Page2" x="550" y="46" width="200" height="225" id="rect1">
                          <s:fill>
                              <s:SolidColor color="#EE0202"/>
                          </s:fill>
                      </s:Rect>
              </fx:DesignLayer>
          </s:Application>

           

           

           

          Ty