0 Replies Latest reply on Jan 18, 2015 7:22 PM by Mr. Baker the Shoe Maker

    Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

    Mr. Baker the Shoe Maker Level 1

      Flash Professional CC

       

      I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:

      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.


      Here are two cases:

      Case #1:
      This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
      SCREEN.

      IMG_01171.png


      Case #2:
      This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
      mc_stageBackground_Main.scaleX = stage.stageWidth;

      mc_stageBackground_Main.scaleY = stage.stageHeight;
      This results in a close up of the background image.

      IMG_01161.png




      Here is the code that I'm using:

      import com.greensock.TweenLite;

      import com.greensock.easing.*;

      import flash.display.StageAlign;

      import flash.display.StageScaleMode;

       

      //When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.

      /*stage.scaleMode = StageScaleMode.NO_SCALE;

      stage.align = StageAlign.TOP_LEFT;*/

       

      var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();

      var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();

      var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();

      var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();

      var chapters: MC_CHAPTERS = new MC_CHAPTERS();

      var _stageWidth = 1024;

       

      if (stage.stageWidth > _stageWidth)

      {

          //Add bigger background if the stage is bigger than 1024

          mainBackground_2208.x = stage.stageWidth/2;

          mainBackground_2208.y = stage.stageHeight/2;

          addChild(mainBackground_2208);

        

          //Using this code results in a very close up view of the stage on iPhone 6 plus  

          /*mc_stageBackground_Main.scaleX = stage.stageWidth;

          mc_stageBackground_Main.scaleY = stage.stageHeight;*/

        

          //Adds corner to the main screen.

          mainCorner.y = stage.stageHeight;

          mainCorner.x = (stage.stageWidth - stage.stageWidth);

          addChild(mainCorner);

          TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});

        

        

          //add logo to sit at 50 pixels from the top of the stage

          /*main_logo.x = stage.stageWidth/2;

          main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);

          addChild(main_logo);

          TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/

      }

      else

      {

          trace ("The stage is 1024 or smaller");

        

          //Add 1024 background if stage is 1024 or smaller

          mainBackground_1024.x = stage.stageWidth/2;

          mainBackground_1024.y = stage.stageHeight/2;

          addChild(mainBackground_1024);

        

          //Adds corner to the main screen.

          mainCorner.y = stage.stageHeight;

          mainCorner.x = (stage.stageWidth - stage.stageWidth);

          addChild (mainCorner);

          TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});

        

          //adds chapters

          chapters.x = (stage.stageWidth - stage.stageWidth)+75;

          chapters.y = stage.stageHeight - 120;

          addChild(chapters);

          TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});  

        

          //adds the Main logo to sit at 50 pixels from the top of the stage

          main_logo.x = stage.stageWidth/2;

          main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);

          addChild(main_logo);

          TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

      }