19 Replies Latest reply on Jan 27, 2015 12:00 PM by Johninus

    How to create a dialog window over the vedio

    Johninus Level 1

      Should I create a window with button and put it in a new layer, let it pop up when some events are triggered?

       

      Thanks,

        • 1. Re: How to create a dialog window over the vedio
          robdillon Most Valuable Participant

          Yes, you can do that. Just treat the video as any other symbol on the stage.

          • 2. Re: How to create a dialog window over the vedio
            Johninus Level 1

            Thanks, but I tried this

            http://edutechwiki.unige.ch/en/AS3_example_Message_Box


            But nothing is shown up when clicking the button.


            I also tried this, but without the MyPopup class. Thanks,

            actionscript 3 - Flex popup window - Stack Overflow

            MyPopup()

             

            var popup:MyPopup = new popup:MyPopup();

            popup
            .addEventListener(CloseEvent.CLOSE, function(evt) {
              
            PopUpManager.removePopUp(popup);
            });

            PopUpManager.addPopUp(popup, this, true);

            • 3. Re: How to create a dialog window over the vedio
              robdillon Most Valuable Participant

              Showing me those examples really doesn't help me to understand what is not working. Please describe your project, and how you are getting the video to show up on the stage.

              • 4. Re: How to create a dialog window over the vedio
                Johninus Level 1

                button and flvplayback in the layer:

                flvplayback plays the vedio

                click the button, the vedio is paused,

                and pop up a model dialog window --->how to implement this function?

                 

                thanks,

                • 5. Re: How to create a dialog window over the vedio
                  robdillon Most Valuable Participant

                  Create a movieClip that contains the dialog as you want it. Put it in a layer above the layer that contains the video. Place it off the visible area of the stage. Move it on top of the video when you want to see it. Here's an example: http://www.ddg-designs.com/downloads/textOverVideo.zip

                  1 person found this helpful
                  • 6. Re: How to create a dialog window over the vedio
                    Johninus Level 1

                    Thanks, it looks cool! How can I make it as a model dialog? As the user can still click some button over the flvplayback and change something which I don't want. I want the user can only touch the item on the dialog.

                     

                    Thanks, again.

                    • 7. Re: How to create a dialog window over the vedio
                      robdillon Most Valuable Participant

                      Flash doesn't really have a "modal" mode for any of its objects, so you will have to create the effect yourself. You can do that in a number of ways: 1. You can create a boolean variable that is set when the text window moves into position, and then check the value of that variable at every button on the stage. 2. You can create a stage sized movieClip that is set to an alpha value of 0 and place it behind the text window when it moves into position over the video. 3. Add a stage sized movieClip to a new layer in the text window movieClip and then alter the off-stage location of teh text window.

                       

                      Of those three options, the third is the simplest.

                      1 person found this helpful
                      • 8. Re: How to create a dialog window over the vedio
                        Johninus Level 1

                        Thanks, I'm trying the third one about how to add a stage sized movieClip to a new layer in the text window movieClip or create it dynamically.

                         

                        BTW: Is that easier to do by flex? Thanks,

                        • 9. Re: How to create a dialog window over the vedio
                          robdillon Most Valuable Participant

                          Nothing is easier to do in Flex. Flex is just Flash without the timeline and some really ugly code bandaids. In any case, my suggestions are based on the timeline because I thought that is what you are using in your file. You can create a stage sized rectangle, contain it in a sprite object and place it on the stage under your text window using Actionscript, but it's not any simpler nor will it make the file smaller.

                          1 person found this helpful
                          • 10. Re: How to create a dialog window over the vedio
                            Johninus Level 1

                            Thanks, how about this? But it didn't show up when calling the function:

                             

                            test1.fla:

                            btn_msgbox.addEventListener(MouseEvent.CLICK, showmsgbox);

                            function showmsgbox(event:MouseEvent):void

                            {

                                var msgbox:MessageBox = new MessageBox();

                                msgbox.visible = true;

                                msgbox.x = fullscreen_btn.x;

                                msgbox.y = fullscreen_btn.y;           

                            }

                             

                            MessageBox.as:

                             

                            package

                            {

                             

                                import flash.display.Sprite;

                                import flash.text.TextField;

                             

                                public class MessageBox extends Sprite

                                {

                             

                                    function MessageBox():void

                                    {

                             

                                        var msgbox:Sprite = new Sprite();

                             

                                        // drawing a white rectangle

                                        //msgbox.graphics.beginFill(0xFFFFFF); // white

                                        msgbox.graphics.beginFill(0x00000A);

                                        msgbox.graphics.drawRect(0,0,300,20);

                                        // x, y, width, height;

                                        msgbox.graphics.endFill();

                             

                                        // drawing a black border

                                        msgbox.graphics.lineStyle(2, 0x000000, 100);

                                        // line thickness, line color (black), line alpha or opacity;

                                        msgbox.graphics.drawRect(0,0,300,20);

                                        // x, y, width, height;

                             

                                        var textfield:TextField = new TextField();

                                        textfield.text = "Hi there!";

                             

                                        addChild(msgbox);

                                        addChild(textfield);

                                    }

                                }

                            }

                            • 11. Re: How to create a dialog window over the vedio
                              Johninus Level 1

                              One of question for this solution is the box is disappeared when the video is full screen. Is there way to fix it? Thanks,

                               

                              import fl.video.*;

                               

                              videoPlayer.autoRewind = false;

                              videoPlayer.addEventListener(fl.video.VideoEvent.PAUSED_STATE_ENTERED,showText);

                              videoPlayer.addEventListener(fl.video.VideoEvent.STOPPED_STATE_ENTERED,showText);

                                                                                     

                              function showText(event:fl.video.VideoEvent):void {

                                  textWindow.x = 200;

                                  textWindow.y = 200;

                              }

                               

                              textWindow.resumeButton.addEventListener(MouseEvent.MOUSE_UP,playVideo);

                               

                              function playVideo(event:MouseEvent):void {

                                  textWindow.y = -500;

                                  videoPlayer.play();

                              }

                              • 12. Re: How to create a dialog window over the vedio
                                robdillon Most Valuable Participant

                                See this help file for more information about the limited feature set when in full screen mode: Exploring full-screen mode in Flash Player | Adobe Developer Connection

                                 

                                The problems with the code in the previous message:

                                1. If your flash movie is not named MessageBox.swf, then you need to import the .as class before it will be recognized by the movie.

                                2. You are creating a sprite in MessageBox.as, but then you create part of a graphic shape, you are not connecting the graphic to the sprite.

                                3. Then you create a textfield. But it is not connected to the sprite or the shape.

                                 

                                I have no idea what your level of competence with Flash and Actionscript is. In any case, build the simplest possible method, then, when that is successful, you can expand on it and make it more abstract.

                                1 person found this helpful
                                • 13. Re: How to create a dialog window over the vedio
                                  Johninus Level 1

                                  Thanks, I don't know how to complite out MessageBox.swf. I put MessageBox.as file with test1.fla, where I call messagebox class, in the same folder, but I did't put any code to import class MessageBox. It shew me the step point was run into MessageBox.as when calling

                                  var msgbox:MessageBox = new MessageBox();

                                  in debuging mode. Should it mean class MessageBox had been imported and effect?

                                   

                                  The code in aa I copied from wiki

                                  AS3 example Message Box

                                  AS3 example Message Box - EduTech Wiki

                                   

                                  To test the code, I create the simplest possible file test1.fla to create the instance MessageBox and test it.  But I don't know why the pop window didn't show up.

                                   

                                  Thanks, again.

                                  • 14. Re: How to create a dialog window over the vedio
                                    robdillon Most Valuable Participant

                                    If you read through that tutorial, it says at the top that you need to reference this .as file in the main class of your Flash file. This means that you need to put "MessageBox" into the space in the Properties window labeled Class:. The way that this .as file is written, it has a function with the same name as the file itself, the function to generate the textfield will be called when the file loads.

                                     

                                    It will be far simpler to just add a layer to the message box movieClip that will block all of the other available buttons.

                                    1 person found this helpful
                                    • 15. Re: How to create a dialog window over the vedio
                                      Johninus Level 1

                                      Yes, it's:

                                      package

                                      {

                                           .....

                                          public class MessageBox extends Sprite

                                          {

                                       

                                              function MessageBox():void

                                              {

                                       

                                       

                                      Not sure if I understand correctly. The code was run successfuly without error message like “MessageBox could not be found".. I'm supposed the class had been found and imported already. Add a layer to the message box movieClip is simple, but it needs to repeat each time. I want to see if it can be controled all by a class


                                      Thanks,


                                      • 16. Re: How to create a dialog window over the vedio
                                        Johninus Level 1

                                        I have the code to resolve the Scaling issue when the vedio is full screen. Still researching the one (Exploring full-screen mode in Flash Player | Adobe Developer Connection) you refered and see which solution is better.


                                        var videoHDWidth:Number = 1024;

                                        var videoHDHeight:Number = 768;

                                        var videoRegWidth:Number = 550;

                                        var videoRegHeight:Number = 400;

                                        // 3. Create an event handler to toggle full screen

                                        // mode when a button is clicked.

                                        function toggleFullScreen(event:MouseEvent):void {

                                         

                                            // Jump to full screen

                                            if( stage.displayState == StageDisplayState.NORMAL ) {

                                                // Set video to 100% size

                                                flvControl.setSize(videoHDWidth, videoHDHeight);

                                                // Position button

                                                // Activate hardware scaling based on HD state...

                                                stage.fullScreenSourceRect = new Rectangle(0, 0, videoHDWidth, videoHDHeight);

                                                stage.displayState = StageDisplayState.FULL_SCREEN;

                                            }

                                            // Return to normal size

                                            else{

                                                // Set video to regular size

                                                flvControl.setSize(videoRegWidth, videoRegHeight);

                                                // Position button

                                                // Return to normal mode

                                                stage.displayState = StageDisplayState.NORMAL;

                                            }

                                        }

                                         

                                        //fullscreen_btn.addEventListener(MouseEvent.CLICK, toggleFullScreen);

                                         

                                        // 4. Resume normal mode if the Escape button is pressed during full screen

                                        function resumeNormalMode(event:FullScreenEvent):void

                                        {

                                            // The displayState is already 'normal' by the time this

                                            // event fires. This signals that the Escape button was clicked.

                                         

                                            if (stage.displayState == StageDisplayState.NORMAL)

                                            {

                                                // Set video to regular size

                                                flvControl.setSize(videoRegWidth, videoRegHeight);

                                                // Position button ;

                                                // Return to normal mode

                                                stage.displayState = StageDisplayState.NORMAL;

                                            }

                                        }

                                        stage.addEventListener(FullScreenEvent.FULL_SCREEN, resumeNormalMode);

                                         

                                        // 5. Set video parametes

                                        flvControl.align = VideoAlign.CENTER;

                                        flvControl.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;

                                        flvControl.fullScreenTakeOver = false;

                                         

                                         

                                        Thanks,

                                        • 17. Re: How to create a dialog window over the vedio
                                          Johninus Level 1

                                          : It will be far simpler to just add a layer to the message box movieClip that will block all of the other available buttons.

                                           

                                          Can you please show me a example for this? I tried but not sucessful.

                                           

                                          Thanks,

                                           


                                           

                                          • 18. Re: How to create a dialog window over the vedio
                                            robdillon Most Valuable Participant

                                            http://www.ddg-designs.com/downloads/textOverVideo2.zip Look at the second movie, the text window movieClip has an additional layer. The layer's alpha property is set to 0, so you'll have to select it in the timeline to be able to see it.

                                            1 person found this helpful
                                            • 19. Re: How to create a dialog window over the vedio
                                              Johninus Level 1

                                              Thanks, it works great!

                                               

                                              I'm trying the code to fix the scale full screen issue. Error mc is not defined for: mc.contextMenu = fullscreenCM;

                                               

                                              I changed it to: this.contextMenu = fullscreenCM;  without error but it dosen't work out for full screen issue. Thanks,

                                               

                                               

                                              import fl.video.*;

                                              import flash.display.Stage;

                                              import flash.display.StageDisplayState;

                                              import flash.display.*;

                                              import flash.events.*;

                                              import flash.geom.Rectangle;

                                               

                                               

                                              videoPlayer.autoRewind = false;

                                              videoPlayer.addEventListener(fl.video.VideoEvent.PAUSED_STATE_ENTERED,showText);

                                              videoPlayer.addEventListener(fl.video.VideoEvent.STOPPED_STATE_ENTERED,showText);

                                               

                                              function showText(event:fl.video.VideoEvent):void

                                              {

                                                  textWindow.x = 275;

                                                  textWindow.y = 200;

                                              }

                                               

                                              textWindow.resumeButton.addEventListener(MouseEvent.MOUSE_UP,playVideo);

                                               

                                              function playVideo(event:MouseEvent):void

                                              {

                                                  textWindow.y = -500;

                                                  videoPlayer.play();

                                              }

                                               

                                              // functions to enter and leave full screen mode;

                                              function goFullScreen(event:ContextMenuEvent):void

                                              {

                                                  stage.displayState = StageDisplayState.FULL_SCREEN;

                                              }

                                               

                                              // An alternate full-screen function that uses hardware scaling to display the upper left corner of the stage in full screen.

                                              function goScaledFullScreen()

                                              {

                                                  var screenRectangle:Rectangle = new Rectangle(0,0,stage.stageWidth / 2,stage.stageHeight / 2);

                                                  stage.fullScreenSourceRect = screenRectangle;

                                                  stage.displayState = StageDisplayState.FULL_SCREEN;

                                              }

                                               

                                              function exitFullScreen(event:ContextMenuEvent):void

                                              {

                                                  stage.displayState = StageDisplayState.NORMAL;

                                              }

                                               

                                              // function to enable and disable the context menu items,

                                              // based on what mode we are in.

                                              function menuHandler(event:ContextMenuEvent):void

                                              {

                                                  if (stage.displayState == StageDisplayState.NORMAL)

                                                  {

                                                      event.target.customItems[0].enabled = true;

                                                      event.target.customItems[1].enabled = false;

                                                  }

                                                  else

                                                  {

                                                      event.target.customItems[0].enabled = false;

                                                      event.target.customItems[1].enabled = true;

                                                  }

                                              }

                                               

                                              // create the context menu, remove the built-in items,

                                              // and add our custom items

                                               

                                              var fullscreenCM:ContextMenu = new ContextMenu();

                                              fullscreenCM.addEventListener(ContextMenuEvent.MENU_SELECT, menuHandler);

                                              fullscreenCM.hideBuiltInItems();

                                              var fs:ContextMenuItem = new ContextMenuItem("Go Full Screen");

                                              fs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goFullScreen);

                                              fullscreenCM.customItems.push( fs );

                                              var xfs:ContextMenuItem = new ContextMenuItem("Exit Full Screen");

                                              xfs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, exitFullScreen);

                                              fullscreenCM.customItems.push( xfs );

                                               

                                               

                                              // finally, attach the context menu to a movieclip

                                              mc.contextMenu = fullscreenCM;