4 Replies Latest reply on May 13, 2009 1:43 AM by flexynewbie

    Managing several components with the same set of button


      Hi everybody,


      I would like to have in my application a set of videos gathered in one row. Under the videos there are control buttons located. This part is quite simple.


      I would also like the buttons to control the selected video. And this is where the problems begin. Initially, the buttons will manage the first video in a row. However, after selecting another video, the should manage the selected one. I have some dificculties with implementing a function that would override the CLICK attribute of the buttons after selecting a desired video. I am not sure if this is the best approach but don't have other ideas. What is a possible way to do it?


      This is a part of the code:


      <?xml version="1.0"?>
      <!-- Simple example to demonstrate the ViewStack layout container. -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

                  private function activateControls(event:MouseEvent):void

                      if (event.currentTarget.id == "video2")
                          play_button.click = "video2.play()";     // This does not work


          <mx:Canvas width="629" height="236" id="panel_t">
              <mx:VideoDisplay click="activateControls(event);" x="10" y="40" width="198" height="133" source="video/video.flv" id="video1"/>
              <mx:VideoDisplay click="activateControls(event);" x="216" y="40" width="198" height="133" source="video/video.flv" id="video2"/>
              <mx:VideoDisplay click="activateControls(event);" x="422" y="40" width="198" height="133" source="video/video.flv" id="video3"/>

          <mx:Canvas width="629" height="40" id="panel_b">
              <mx:Button label="PLAY" height="40" id="play_button" click="video1.play()"/>
              <mx:Button label="PAUSE" height="40" id="pause_button" click="video1.pause()" x="65" y="0" />
              <mx:Button label="STOP" height="40" id="stop_button" click="video1.stop()" x="138" y="0" />






        • 1. Re: Managing several components with the same set of button
          Muzak Level 3

          You're going about it the wrong way.

          A button component doesn't have a "click" property, it dispatches a "click" event.


          So what you need to do is assign an event handler to the button click event, just like you did for the VideoDisplay instances.

          What you can do is store a reference to the selected VideoDisplay (which is why I mention in your previous thread you don't need the id at all) and use that when a button is clicked.


          private var selectedVideo:VideoDisplay = video1;


          private function activateControls(event:MouseEvent):void {

               selectedVideo = event.currentTarget as VideoDisplay;



          private function playClickHandler(event:MouseEvent):void {




          private function pauseClickHandler(event:MouseEvent):void {






          <mx:Button id="play_button" height="40" label="PLAY" click="playClickHandler(event);>
          <mx:Button id="pause_button" height="40" label="PAUSE" click="pauseClickHandler(event);" />
          <mx:Button id="stop_button" height="40" label="STOP" click="stopClickHandler(event);" />


          Alternativly, you could use the selectedVideo in mxml, but that's usually not a good idea.


          <mx:Button id="play_button" height="40" label="PLAY" click="selectedVideo.play();>


          For instance, in this case, you probably want to stop all other videos before playing the selected one, or some other stuff may need to be done. That can easily be done in the button click event handler.


          As a sidenote, you should look into using a different container than Canvas, for easier auto-layout.

          A VBox might be better suited for displaying the VideoDisplay instances. No need for all the x, y positioning. Same goes for the Buttons, use an HBox container there.

          Control the gaps and padding with verticalGap, horizontalGap, paddingLeft, paddingRight, paddingTop, paddingBottom of the containers, all of which can be set through CSS.

          1 person found this helpful
          • 2. Re: Managing several components with the same set of button
            Gregory Lafrance Level 6

            An easy way to implement what you describe is to create a variable like this:


            private var selectedVD:VideoDisplay;


            Then in your click handler for the VideoDisplay, stop the current video and assign the currentTarget to that variable:





            selectedVD = event.currentTarget as VideoDisplay;


            Then in your video control button click event handlers, reference the currently selected VideoDisplay through the variable:








            In your click handler for the VideoDisplay, where you assign the currentTarget to that variable, you may want to start playing the video there.


            If this answers your question or helps, please mark it as such.

            1 person found this helpful
            • 3. Re: Managing several components with the same set of button

              You can assign a code block to click directly without a event handler. I think its using an anonymous function in that case.

              Greg showed you one way to control the selected video, ill show you another

              create a model for video model

              <video id='myVid' />
              <button click='myVid.play()'/>

              and create an instance of this model in your main app for each video

              (this is not actually controlling 'selected' video but creating buttons only work for its video...)

              • 4. Re: Managing several components with the same set of button
                flexynewbie Level 1

                Hi guys,


                Thank you for your suggestions. At this point of my work I have used the solutions of Muzak and Greq Lafrance which use the same approach.