open in new window

Demos : Resizable UI

Graphics Bitmaps EnterFrame Event Mouse Events Multitouch Keyboard Events Rendering Text Color Transform Custom Classes Playing Video Box2D Bézier Pseudo 3D Real 3D Water Surface Plasma Mandelbrot BunnyMark Tweener Spritesheet Resizable UI

Code:

<html>
<head>
     <script type="text/javascript" src="//lib.ivank.net/ivank.js"></script>
     <script type="text/javascript" src="Button.js"></script>
     <script type="text/javascript">
          var stage, bg, main;
          
          function Start()
          {
               stage = new Stage("c");
               // when stage is resized, "resize" will be called
               stage.addEventListener(Event.RESIZE, resize); 
               
               bg = new Bitmap(new BitmapData("winter.jpg"));
               stage.addChild(bg);
               
               main = new Main();
               stage.addChild(main);
               
               resize();
          }
          
          function resize(e)
          {
               var w = stage.stageWidth, h = stage.stageHeight;
               bg.scaleX = w / 1024;  // spreading the bitmap across the stage
               bg.scaleY = h / 512; 
               
               var min = Math.min(w, h);
               main.scaleX = main.scaleY = min / 2000;
               main.x = (w-min) / 2;
               main.y = (h-min) / 2;
          }
          
          function Main()
          {
               Sprite.call(this);
               
               this.graphics.beginFill(0xffffff, 0.2);
               this.graphics.drawRect(0,0,2000,2000);
               
               // let's put all the content into a square 2000 x 2000 px
               var f1 = new TextFormat("sans-serif", 94, 0xffffff, true, false);
               f1.align = TextFormatAlign.JUSTIFY;
               
               var t1 = new TextField();  this.addChild(t1);  
               t1.width = 1800; t1.height = 800;    t1.x = t1.y = 100;
               t1.wordWrap = true;
               t1.setTextFormat(f1);
               t1.text = "The main content of the app can be inside this square, which is always centered and scaled "
               + "according to dimensions of the Stage.\nOpen it in a new window and try to resize it.";
               
               for(var i=0; i<5; i++)
               {
                    var b = new Button("My Option "+(i+1), 94);
                    this.addChild(b);
                    b.x = 700;  b.y = 900 + 200*i;
               }
          }
          Main.prototype = new Sprite();
     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>