1 Reply Latest reply on Nov 17, 2011 12:29 PM by alinator11

    Importing Buttons as Flex Components

    alinator11 Level 2

      After building out my entire Flex Mobile UI with SWFLoader (to load embedded Flash Pro SWF's) and finding that won't work for deployment to iOS, I'm now importing all my FLA assets from Flash Pro as FX components so that the app will work on both Andriod and iOS. In order to so (per the Flash Pro alerts I get when I try anything different), everything needs to be a MovieClip. That creates a problem where buttons are concerned.


      If you press a Button in my app, it used to change states on its own. Now, I have to do the following:

       

      1. Get reference to the button as a child of the main MovieClip - but button also has to be a MovieClip.

      2. Attach Touch/Mouse listener to button_movieclip.

      3. When button_movieclip is pressed, call "button_movieclip.gotoAndPlay(1);"

      4. Start a timer cause it just sits there blinking if I don't tell the button_movieclip when to stop playing - note that I tried adding FlexEvent.ENTER_FRAME as well as Event.ENTER_FRAME to the button_movieclips (and others) but those events never seem to fire. If I knew when the movieclip had reached the end, I could stop it from playing with a little more (exact) precision.

      5. Test to make sure that the timer runs for just long enough to show one click iteration and then stops the button_movieclip back on frame 1 (gotoAndStop(1)). At Timer(125) I get one iteration of most buttons but at Timer(130) I can see the next press begining.

       

      Example:

       




      private var button_movieClip:MovieClip;



      public function loadExample():void {




      swcAssets:EmbeddedSWC = new EmbeddedSWC();




      my_container.addChild(swcAssets);




      //loop swcAssets, find instance names and cast to




      //appropriate object based on instance name found.




      //...




      for(var i:uint = 0; i < swcAssets.numChildren; i++) {





      if(swcAssets.getChildAt(i).name == "myButton") {











      button_movieClip = MovieClip(swcAssets.getChildAt(i));






      //it comes in playing so stop it from sitting there animating






      //clicks.






      button_movieClip.stop();






      button_movieClip.addEventListener(MouseEvent.CLICK, btnClicked);





      }




      }



      }







      private function btnClicked(event:Event):void {




      button_movieClip.gotoAndPlay(1);




      //button_movieClip will just sit here blinking now...




      var t:Timer = new Timer(125);




      t.start();




      t.addEventListener(TimerEvent.TIMER, stopBtnAnimation);



      }







      private function stopBtnAnimation(event:Event):void {




      event.target.stop();




      event.target.removeEventListener(TimerEvent.TIMER, stopBtnAnimation);




      button_movieClip.gotoAndStop(1);



      }
      
      
      

       

      This is a very hacky way to do this. Is there some way I can just get direct reference to the buttons that have been converted to MovieClips so that the buttons will actually animate when pressed without this Timer hack I've created? Or, alternatively, is there something I need to do to get the button_movieClips to fire when they reach the last frame of their animations?

       

      Also, I try to format my code as "Java" to get rid of the table but for some reason every time I paste the code it shows up as a table anyways...

        • 1. Re: Importing Buttons as Flex Components
          alinator11 Level 2

          I did figure out a work around to both problems.

           

          I still use a timer but now I set the constructor to fire every 1 frame. While I have not been able to attach a listener directly to the child movieclips that tells me when the MovieClip reaches the last frame, I did find that I'm able to test for this state without the listener. Each time my Timer calls the listener, I have it check to see if the child in question has reached the last frame or not. If so, I stop the MovieClip. Works great now.

          private var btnMovieClip:MovieClip;
          btnMovieClip.addEventListener(MouseEvent.CLICK, btnMovieClipListener);
          private var btnClicked:String = "";
          
          public function btnMovieClipListener(event:Event):void {
          if(event.target.name == "myInstance") {
          btnClicked = event.target.name;
          btnMovieClip.gotoAndPlay(0);
          }
          var timer:Timer = new Timer(1);
          timer.start();
          timer.addEventListener(TimerEvent.TIMER, checkFrames);
          }
          
          private function checkFrames(event:TimerEvent):void {
          if(btnClicked == "myInstance") {
          if(btnMovieClip.currentFrame == btnMovieClip.totalFrames) {
          btnMovieClip.gotoAndStop(0);
          event.target.stop();
          event.target.removeEventListener(TimerEvent.TIMER, checkFrames);
          }
          }
          }