Contents

Creating a Game Loop Extending the HTML

Responsive Layouts

This tutorial demonstrates how to create responsive layouts using JavaScript. Add two boxes to the library. Make one red and one green. These boxes are just examples. Any shapes or objects could be used.


Responsive Layouts 1

Responsive Layouts 2

Responsive Layouts 3

Add the boxes to the editor.


Responsive Layouts 4

Arrange the boxes, so they fill the left and right-hand sides. Leave a border around them.


Responsive Layouts 5

This is now an example of a web page with content on the left and right-hand sides. It will look fine on a desktop web browser or a phone in landscape mode. Unfortunately, this layout won't work well in portrait mode. Either, the two boxes must be shrunk small to fit, or expanded to fill the screen, and the sides of the boxes cut off.


Responsive Layouts 6

Responsive Layouts 7

This situation is where responsive layouts are needed. In portrait mode, one box should move above the other. To do this, we need to move the boxes using JavaScript. This means turning off 'Use Timeline' for both boxes and setting a 'Script ID'.


Responsive Layouts 8

Responsive Layouts 9

Responsive Layouts 10

In order to move the boxes outside the bounds of the movie, we need to turn off clip in the movie properties.


Responsive Layouts 11


The best place to arrange the boxes is in the 'On Resize' movie event.

The functions we need are GetLeft, GetTop, GetWidth and GetHeight. These functions give the bounds of the web browser or device using the coordinates of the movie. When clip is turned on, these values return the bounds of the movie. If you are using the 'None' movie scale, GetLeft and GetTop will always return 0 and can be ignored.

First lets arrange the two boxes so one fills the left-hand side and the other fills the right-hand side.



BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Responsive Layouts 13

Next, we will add a border of size 10. This value of 10 is not necessarily in pixels, it is in the same scale of the movie. Use the movie scale 'None' for everything to be in pixels.



var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

Responsive Layouts 15

Finally we will test to see if the width of the web browser or device is less than the height. When that happens, rearrange the boxes vertically.



var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

Responsive Layouts 17

Now you can see, if you resize the player, the two boxes will arrange themselves automatically. These two boxes can easily be replaced with other shapes and objects. This example can be expanded to handle more complex layouts.


Creating a Game Loop Extending the HTML