9 Replies Latest reply on Mar 6, 2010 4:01 AM by Francisc

    problem in full screen mode air application

    flash search Level 1

       

       

      Hi All

      I am facing some problem in creating an air application. I used fullscreenmode .FULL_SCREEN_INTERACTIVE to maximize the window on load the application was succeeded in some extent. But there is one problem one bottom bar is coming just under the window. can anybody please help me. I am attaching the preview with this.

       

      Thanks and regardsUntitled-1.jpg

        • 1. Re: problem in full screen mode air application
          Francisc Level 3

          Well, this could happen because you have padding specified for one of the containers or the application. If you did not specify the padding for the application, for example, there is a default one and it is not 0.

           

          Secondly, the image container or one of its parents could be set to have an explicit width and height, or not 100%.

           

          Thirdly, the image you want to display is at its full size, anything beyond this point would strech it.

           

          Last but not least, see if one of the points above apply, because if that is the max width the image container is allowed to have and you did not set maintainAspectRatio to false, the bottom border appears beacuse Flex keeps the proportions of the image intact.

          • 2. Re: problem in full screen mode air application
            flash search Level 1

            thank you for your reply in the background i used image i tried it without image but still problem is showing.i used maintainAspectRatio="false" it is now showing some gap only in the left side i m sending the code and image.Untitled-2.jpg

             

            <mx:Panel horizontalAlign="left" id="imagePart" visible="false" includeInLayout="false" borderStyle="none"
                       borderAlpha="0"
                       cornerRadius= "0"
                       headerHeight= "0"
                       borderThickness="0"
                       verticalScrollPolicy="off"
                       paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
                       horizontalScrollPolicy="off"
                       backgroundAlpha= "0" width="100%" height="100%">
                       
                       
                        <mx:Image source="assets/images/{images.getItemAt(currentIndex).file}"
                            showBusyCursor="true" id="imagefile" width="{mainwidth}" maxHeight="{mainheight}" minHeight="{mainheight}" maxWidth="{mainwidth}" minWidth="{mainwidth}" height="{mainheight}" hideEffect="{fadein}"  x="0" y="0" maintainAspectRatio="false"/>
                                       
                        <mx:Text text="{images.getItemAt(currentIndex).title}" styleName="title" color="#ffffff" x="0" y="30"/>
                 </mx:Panel>

             

             

            may be i am doing some mistake somewhere please help me

            • 3. Re: problem in full screen mode air application
              Francisc Level 3

              The Panel has no padding ok, but maybe the application does.

              And visibile="false" and includeInLayout="false", what's with those?

               

              Is the image supposed to be the background for your application or for the panel?

               

               

              Is it a web app or an AIR app? If it is an AIR app, that bottom bar could be the Flex Status Bar.

              1 person found this helpful
              • 4. Re: problem in full screen mode air application
                flash search Level 1

                Hi thanks for your reply.yes you are right it is an air application.and i make it to view in fullscreen.my problem is the bottom bar how to remove it.

                • 5. Re: problem in full screen mode air application
                  Francisc Level 3

                  Would it be possible to send the code for it? It's difficult to troubleshoot like this.

                  If you can't send the code, can you make a different project in which you redo the fullscreen with image strech part please?

                  • 6. Re: problem in full screen mode air application
                    flash search Level 1


                    Hi
                    M*A*S*H 4077 thanks agan for your reply sending you the total code i used in my project.As I am a new coder my codes are not in abc please try to understand.please have a look and if u want to see my componentcode then also i can send code.component i only used in the video part.

                     

                    thank you

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                       
                        xmlns:components="components.*"
                        verticalAlign="top"
                        backgroundColor="white"
                        borderStyle="none"
                        borderThickness="0"
                        creationComplete="init();"
                        baseline="0"
                        paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"      
                        initialize="service.send()"               
                        applicationComplete="fullscreenmode()"
                        backgroundGradientAlphas="[1.0, 1.0]"
                        backgroundGradientColors="[#CCCCCC, #090909]"
                        backgroundImage="@Embed(source='assets/background/background.jpg')"
                       
                        >
                       
                        <mx:Script>
                            <![CDATA[
                                import mx.controls.Alert;
                                import flash.display.Sprite;
                                import flash.display.StageAlign;
                                import flash.display.StageScaleMode;
                                import mx.rpc.events.ResultEvent;
                                import mx.effects.Iris;
                                import mx.effects.easing.*;
                                import flash.utils.Timer;
                                [Bindable]
                                public var secondsTillDue:int=100;
                                import mx.collections.ArrayCollection;
                                import mx.rpc.events.ResultEvent;
                                public var bol:Boolean;
                                [Bindable]
                                private var images:ArrayCollection;
                                [Bindable]
                                private var centerpoint:Number;
                                [Bindable]
                                private var currentIndex : Number = 0;
                                public var myTimer:Timer;
                                [Bindable]
                                private var mainwidth:Number;
                                [Bindable]
                                private var mainheight:Number;
                       private function init():void {
                                  
                                myTimer=new Timer(1000);
                                myTimer.addEventListener(TimerEvent.TIMER,warnIfClose);
                                myTimer.start();
                               
                                // Initialize the uldr variable which will be used to load the external
                                // playlist XML file.
                                uldr = new URLLoader();
                                uldr.addEventListener(Event.COMPLETE, xmlCompleteHandler);
                                uldr.load(new URLRequest(PLAYLIST_XML_URL));
                            /* function setFullScreenDisplayState():void{
                                 stage.displayState=stageDisplayState.FULL_SCREEN_INTERACTIVE;
                            }*/
                         }
                         
                          public function warnIfClose(event:TimerEvent):void{
                             
                            secondsTillDue=secondsTillDue-1;
                            if(secondsTillDue==90){   
                             lab1.setStyle("hideEffect", fade);
                             lab1.visible=false;
                             clockpan.visible=false;
                             clockpan.includeInLayout=false        
                             clock1.setStyle("hideEffect", fade);
                             clock1.visible=false;        
                            }
                            else if(secondsTillDue==88){
                                mainbox
                                imagePart.setStyle("showEffect",fade);
                                imagePart.visible=true;
                                imagePart.includeInLayout=false;
                                 }
                             else if(secondsTillDue==83){
                                 imagePart.visible=false;            
                                 imagePart.setStyle("hideEffect",fade)        
                                 videoContainer.visible=true;
                                 playVideo();    
                                             
                             }
                           
                            
                            }
                           
                                private function fullscreenmode():void{
                                stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                                mainwidth=stage.width;
                                mainheight=stage.height;
                                centerpoint=stage.height/2;
                                }
                                private function serviceHandler(event:ResultEvent):void{           
                                    images = event.result.gallery.img;
                                    var timer:Timer = new Timer(15000);
                                    timer.addEventListener(TimerEvent.TIMER,nextImage);
                                    timer.start();
                                    }
                                   
                                private function nextImage(event:TimerEvent):void{
                                        if (currentIndex < images.length - 1){
                                            currentIndex++;
                                          
                                        }
                                        else {
                                            currentIndex = 0;
                                          
                                        }
                                }
                           
                            import mx.controls.ProgressBarMode;

                     

                                /**
                                 * The amount of time between calls to update the playhead timer, in
                                 * milliseconds.
                                 */
                                private const PLAYHEAD_UPDATE_INTERVAL_MS:uint = 10;
                       
                                /**
                                 * The path to the XML file containing the video playlist.
                                 */
                                private const PLAYLIST_XML_URL:String = "playlist.xml";
                       
                                /**
                                 * The client object to use for the NetStream object.
                                 */
                                private var client:Object;
                       
                                /**
                                 * The index of the currently playing video.
                                 */
                                [Bindable]
                                private var idx:uint = 0;
                       
                                /**
                                 * A copy of the current video's metadata object.
                                 */
                                private var meta:Object;
                                private var nc:NetConnection;
                                private var ns:NetStream;
                                private var playlist:XML;
                                private var t:Timer;
                                private var uldr:URLLoader;
                                private var vid:Video;
                                private var videosXML:XMLList;
                               
                                /**
                                 * The SoundTransform object used to set the volume for the NetStream.
                                 */
                                private var volumeTransform:SoundTransform;
                       
                                /**
                                 * Constructor
                                 */
                                private function initApp():void {
                                    // Initialize the uldr variable which will be used to load the external
                                    // playlist XML file.
                                    uldr = new URLLoader();
                                    uldr.addEventListener(Event.COMPLETE, xmlCompleteHandler);
                                    uldr.load(new URLRequest(PLAYLIST_XML_URL));
                                }
                       
                                /**
                                 * Once the XML file has loaded, parse the file contents into an XML object,
                                 * and create an XMList for the video nodes in the XML.
                                 */
                                private function xmlCompleteHandler(event:Event):void {
                                    playlist = XML(event.target.data);
                                    videosXML = playlist.video;
                                    main();
                                }
                       
                                /**
                                 * The main application.
                                 */
                                private function main():void {
                                    volumeTransform = new SoundTransform();
                       
                                    // Create the client object for the NetStream, and set up a callback
                                    // handler for the onMetaData event.
                                    client = new Object();
                                    client.onMetaData = metadataHandler;
                       
                                    nc = new NetConnection();
                                    nc.connect(null);
                       
                                    // Initialize the NetSteam object, add a listener for the netStatus
                                    // event, and set the client for the NetStream.
                                    ns = new NetStream(nc);
                                    ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
                                    ns.client = client;
                       
                                    // Initialize the Video object, attach the NetStram, and add the Video
                                    // object to the display list.
                                    vid = new Video();
                                    vid.x = 0;
                                    vid.y = 0;
                                   
                                    vid.attachNetStream(ns);
                                    videoContainer.addChild(vid);
                       
                                    // Begin playback of the first video.
                                    //playVideo();
                                     //play video code goes here
                                    // Initialize the Timer object and set the delay to
                                    // PLAYHEAD_UPDATE_INTERVAL_MS milliseconds.
                                    t = new Timer(PLAYHEAD_UPDATE_INTERVAL_MS);
                                    t.addEventListener(TimerEvent.TIMER, timerHandler);
                       
                                    // Configure the positionBar ProgressBar instance and set the mode to
                                    // MANUAL. Progress  bar values will be explicitly set using the
                                    // setProgress() method.
                                    //positionBar.mode = ProgressBarMode.MANUAL;
                       
                                    // Configure the volumeSlider Slider component instance. The maximum
                                    // value is set to 1 because the volume in the SoundTransform object
                                    // is set to a number between 0 and 1. The snapInterval and tickInterval
                                    // properties are set to 0.1 which allows users to set the volume to
                                    // 0, 0.1 - 0.9, 1.0 which allows users to increment or decrement the
                                    // volume by 10%.
                                    //volumeSlider.value = volumeTransform.volume;
                                    //volumeSlider.minimum = 0;
                                    //volumeSlider.maximum = 1;
                                    //volumeSlider.snapInterval = 0.1;
                                    //volumeSlider.tickInterval = volumeSlider.snapInterval;
                       
                                    // Setting the liveDragging property to true causes the Slider
                                    // instance's change event to be dispatched whenever the slider is
                                    // moved, rather than when the user releases the slider thumb.
                                    //volumeSlider.liveDragging = true;
                                    //volumeSlider.addEventListener(Event.CHANGE, volumeChangeHandler);
                       
                                    // Configure the various Button instances. Each Button instance uses
                                    // the same click handler.
                                    //playButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                                    //pauseButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                                    //stopButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                                    //backButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                                    //forwardButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                                }
                       
                                /**
                                 * Event listener for the volumeSlider instance. Called when the user
                                 * changes the value of the volume slider.
                                 */
                                private function volumeChangeHandler():void {
                                    // Set the volumeTransform's volume property to the current value of the
                                    // Slider and set the NetStream object's soundTransform property.
                                    //volumeTransform.volume = volumeSlider.value;
                                    ns.soundTransform = volumeTransform;
                                }
                       
                                /**
                                 * Event listener for the ns object. Called when the net stream's status
                                 * changes.
                                 */
                                private function netStatusHandler(event:NetStatusEvent):void {
                                    try {
                                        switch (event.info.code) {
                                            case "NetStream.Play.Start" :
                                                // If the current code is Start, start the timer object.
                                                t.start();
                                                break;
                                            case "NetStream.Play.StreamNotFound" :
                                            case "NetStream.Play.Stop" :
                                                // If the current code is Stop or StreamNotFound, stop
                                                // the timer object and play the next video in the playlist.
                                                t.stop();
                                                playNextVideo();
                                                break;
                                        }
                                    } catch (error:TypeError) {
                                        // Ignore any errors.
                                    }
                                }
                       
                                /**
                                 * Event listener for the ns object's client property. This method is called
                                 * when the net stream object receives metadata information for a video.
                                 */
                                private function metadataHandler(metadataObj:Object):void {
                                    // Store the metadata information in the meta object.
                                    meta = metadataObj;
                                    // Resize the Video instance on the display list with the video's width
                                    // and height from the metadata object.
                                    vid.width = mainwidth;
                                    vid.height = mainheight;
                                    // Reposition and resize the positionBar progress bar based on the
                                    // current video's dimensions.
                                    //positionBar.move(vid.x, vid.y + vid.height);
                                    //positionBar.width = vid.width;
                                }
                       
                                /**
                                 * Retrieve the current video from the playlist XML object.
                                 */
                                private function getVideo():String {
                                    return videosXML[idx].@url;
                                }
                       
                                /**
                                 * Play the currently selected video.
                                 */
                                private function playVideo():void {
                                    var url:String = getVideo();
                                    ns.play(url);
                                }
                       
                                /**
                                 * Decrease the current video index and begin playback of the video.
                                 */
                                private function playPreviousVideo():void {
                                    if (idx > 0) {
                                        idx--;
                                        playVideo();
                                        // Make sure the positionBar progress bar is visible.
                                        //positionBar.visible = true;
                                    }
                                }
                       
                                /**
                                 * Increase the current video index and begin playback of the video.
                                 */
                                 [Bindable]
                                 private var newTime:Number;
                                private function playNextVideo():void{
                                    if (idx < (videosXML.length() - 1)) {
                                        // If this is not the last video in the playlist increase the
                                        // video index and play the next video.
                                        idx++;
                                        playVideo();
                                        // Make sure the positionBar progress bar is visible.
                                        //positionBar.visible = true;
                                    } else {
                                        // If this is the last video in the playlist increase the video
                                        // index, clear the contents of the Video object and hide the
                                        // positionBar progress bar. The video index is increased so that
                                        // when the video ends, clicking the backButton will play the
                                        // correct video.
                                        idx++;
                                        vid.clear();
                                        init();
                                        //Alert.show("video end")
                               
                                        //positionBar.visible = false;
                                    }
                                }
                       
                               
                                private function timerHandler(event:TimerEvent):void {
                                    try {
                                       
                                    } catch (error:Error) {
                                       
                                    }
                                }
                           
                            ]]>
                        </mx:Script>
                    <mx:XML id="imagesXML" source="data/images.xml" />
                        <mx:Zoom id="zoom" />
                        <mx:Fade id="fadein" duration="1000" alphaFrom="100" alphaTo="0" />
                        <mx:Fade id="fade" />
                        <mx:Rotate id="rotate"
                                angleFrom="-180"
                                angleTo="0"
                                easingFunction="Elastic.easeInOut"
                                duration="2000" />
                    <mx:VBox  id="mainbox" horizontalAlign="left" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                                   
                      
                                <mx:Panel borderStyle="none"
                               borderAlpha="0"
                               cornerRadius= "0"
                               headerHeight= "0"
                               backgroundAlpha= "0"
                               borderThickness="0"
                               verticalAlign="middle"
                               top="100"
                               height="500"
                               paddingLeft="0"
                               paddingRight="0"
                               paddingBottom="0"
                               verticalScrollPolicy="off"
                               horizontalScrollPolicy="off"
                               horizontalAlign="center"          
                               width="{mainwidth-100}"           
                               id="clockpan"
                                
                               >       
                                    <mx:Label text="Current Time : " fontFamily="arial" fontWeight="bold" fontSize="15" id="lab1" color="#FFFFFF"/>
                                    <components:MyWatch formatString="DD/MM/YYYY KK:NN:SS " themeColor="#0D424C" id="clock1"/>
                                </mx:Panel> 
                        <!--image part start-->     
                        <mx:Panel horizontalAlign="left" id="imagePart" visible="false" includeInLayout="false" borderStyle="none"
                               borderAlpha="0"
                               cornerRadius= "0"
                               headerHeight= "0"
                               borderThickness="0"
                               verticalScrollPolicy="off"
                               paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
                               horizontalScrollPolicy="off"
                               backgroundAlpha= "0" width="100%" height="100%">       
                               
                                <mx:Image source="assets/images/{images.getItemAt(currentIndex).file}"
                                    showBusyCursor="true" id="imagefile" width="{mainwidth}" maxHeight="{mainheight}" minHeight="{mainheight}" maxWidth="{mainwidth}" minWidth="{mainwidth}" height="{mainheight}" hideEffect="{fadein}"  x="0" y="0" maintainAspectRatio="false"/>
                                               
                                <mx:Text text="{images.getItemAt(currentIndex).title}" styleName="title" color="#ffffff" x="0" y="30"/>
                         </mx:Panel>
                        <!--image part end-->
                        <!--image part start-->      
                        <mx:Panel borderStyle="none"
                               borderAlpha="0"
                               cornerRadius= "0"
                               borderThickness="0"
                               headerHeight= "0" top="0" left="0"
                               backgroundAlpha= "0" verticalAlign="middle"
                               verticalScrollPolicy="off"
                               horizontalScrollPolicy="off"
                               x="0"
                              
                               
                               >
                             <mx:VideoDisplay borderStyle="none" borderThickness="0" visible="false" id="videoContainer"
                                  maintainAspectRatio="false"           
                                  />
                        </mx:Panel>
                        <!--image part end-->
                         <!--<mx:Button label="fullscreen" click="stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;"/>-->
                         </mx:VBox>   
                        <mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>
                       
                       
                       
                       
                    </mx:WindowedApplication>

                    • 7. Re: problem in full screen mode air application
                      Francisc Level 3

                      I need the whole project code to check it because I am missing the images.xml file, and the app-descriptor file.

                       

                      In the descriptor file be sure to set systemChrome to none and transparent to true.

                      Then in your WindowedApplication tag, after the backgroundImage for example, add showStatusBar="false". That should sort your bottom-space problem.

                      • 8. Re: problem in full screen mode air application
                        flash search Level 1

                        hi all thanks for ur reply it works

                        • 9. Re: problem in full screen mode air application
                          Francisc Level 3

                          Pfiu! Glad to help!