3 Replies Latest reply on Aug 12, 2008 2:46 PM by octagonatron

    State not shown when currentState is Envoked

    octagonatron
      Im building a simple mp3 player for a digital music company. The play button has a rollover state and on roll out returns to the starting state(original). Now I have made a state for the on click event and it should on click go to the click state which is the state for when the music is playing, however it does not, instead there's a brief blink and the app returns to the starting state and the rollover state is still being activated on roll over even though the on click function removes the event listeners for the roll over events. Hope you can follow that, here is my MXML and AS:

      --MXML----------------------------------------
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" width="468" height="60" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Script source="stainlessPlayer.as"/>

      <mx:states>
      <mx:State name="play-roll">
      <mx:SetProperty target="{imgPlay}" name="visible" value="false"/>
      <mx:SetProperty target="{imgPlayRoll}" name="visible" value="true"/>
      </mx:State>
      <mx:State name="music-playing">
      <mx:RemoveChild target="{buttonPlay}"/>
      <mx:AddChild position="player">
      <mx:Canvas id="controlsMask" x="0" y="0" width="468" height="60" backgroundImage="img/mask.png"></mx:Canvas>
      <mx:Canvas id="buttonPlaying" buttonMode="true" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="170" height="40" top="9" left="20">
      <mx:Canvas id="buttonPause" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="0" y="0" width="27" height="40" backgroundImage="img/button-pause.png"></mx:Canvas>
      <mx:Canvas id="pause" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="37" y="10" width="58" height="21" backgroundImage="img/pause.png"></mx:Canvas>
      </mx:Canvas>
      </mx:AddChild>
      </mx:State>
      </mx:states>

      <mx:Canvas id="player" width="468" height="60" buttonMode="true" verticalCenter="0" horizontalCenter="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Canvas id="playerScreen" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="333" height="46" top="6" left="122" backgroundImage="img/screen.png"></mx:Canvas>
      <mx:Canvas id="playerMask" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="468" height="60" top="0" left="0" backgroundImage="img/player.png"></mx:Canvas>
      <mx:Canvas id="buttonPlay" buttonMode="true" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="213" height="42" top="9" left="128">
      <mx:Canvas id="imgPlay" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="27" height="40" top="0" left="0" backgroundImage="img/button-play.png"></mx:Canvas>
      <mx:Canvas id="imgPlayRoll" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="27" height="40" top="0" left="0" backgroundImage="img/button-play-roll.png" visible="false"></mx:Canvas>
      <mx:Canvas id="imgPlayText" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="181" height="42" top="-1" left="32" backgroundImage="img/click.png"></mx:Canvas>
      </mx:Canvas>
      </mx:Canvas>


      </mx:Application>

      --AS------------------------------------
      import flash.events.Event;
      import flash.events.MouseEvent;
      import flash.media.ID3Info;
      import flash.media.Sound;

      // Define external MP3 File
      [Bindable] public var urlReq:URLRequest= new URLRequest("music/track.mp3");
      // Define Sound Vars
      [Bindable] public var sc :SoundChannel;
      [Bindable] public var pos :Number;
      [Bindable] public var s :Sound= new Sound();
      [Bindable] public var songPlaying :Boolean= false;
      //[Bindable] public var currentSound :Sound= new Sound();

      private function initApp():void
      {
      // Add event listener for sound file loaded event
      s.addEventListener(Event.ID3, onID3InfoReceived);
      // Load externam MP3 file
      s.load(urlReq);
      }
      private function onID3InfoReceived(event:Event):void
      {
      // Define ID3 Vars and Objects
      var id3:ID3Info= event.target.id3;
      var strID3: String;
      var id3Artist: String;
      var id3Album: String;
      var id3Year: String;
      var id3Track: String;
      var id3SubGenre: String;
      var id3Genre: String;
      // Set ID3 Values
      id3Artist= id3["TPE1"];
      id3Track= id3["TRCK"];
      id3Year= id3["TYER"];
      id3Genre= id3["TCON"];
      id3SubGenre= id3["COMM"];
      // Define event listeners for buttons
      buttonPlay.addEventListener(MouseEvent.CLICK,playMusic);
      buttonPlay.addEventListener(MouseEvent.ROLL_OVER,statePlayRoll);
      buttonPlay.addEventListener(MouseEvent.ROLL_OUT,stateOriginal);
      }
      private function playMusic(e:Event):void {
      buttonPlay.removeEventListener(MouseEvent.ROLL_OVER,stateOriginal);
      buttonPlay.removeEventListener(MouseEvent.ROLL_OUT,statePlayRoll);
      currentState= "music-playing";
      sc= s.play();
      }
      private function statePlayRoll(e:Event):void {
      currentState= "play-roll";
      }
      private function stateOriginal(e:Event):void {
      currentState= "";
      }

      ---End-Source---------------------------------------------

      Anyways, any insight would be very helpful even if its "good god man, you need to redo this from the ground up", thanks! FYI the canvas that's giving me problems is the buttonPlay canvas.
        • 1. Re: State not shown when currentState is Envoked
          Level 7

          "octagonatron" <webforumsuser@macromedia.com> wrote in message
          news:g7qiab$jau$1@forums.macromedia.com...
          > Im building a simple mp3 player for a digital music company. The play
          > button
          > has a rollover state and on roll out returns to the starting
          > state(original).
          > Now I have made a state for the on click event and it should on click go
          > to the
          > click state which is the state for when the music is playing, however it
          > does
          > not, instead there's a brief blink and the app returns to the starting
          > state
          > and the rollover state is still being activated on roll over even though
          > the on
          > click function removes the event listeners for the roll over events. Hope
          > you
          > can follow that, here is my MXML and AS:

          What happens if you use state names that don't contain hyphens?


          • 2. Re: State not shown when currentState is Envoked
            octagonatron Level 1
            good question, all though i would be surprised thats the problem considering the rollover state does work with a hyphen, i will test it later tonight, thanks for the reply!
            • 3. Re: State not shown when currentState is Envoked
              octagonatron Level 1
              nope, still no love, i adjusted the states to have no hyphens and it still doesn't remove the event listeners and still doesn't change state.. help!