Dealing with iPhone Screen Orientation in Flash AS3

The way your iPhone app deals with change of screen orientation is a major issue that you will have to address at a very stage of your app development cycle. By default the iPhone will change the orientation of your application view if the user rotates the phone to view that way. This tutorial will explore how to deal with the change of screen orientation and how to update your layout change properly when the orientation changes.

This tutorial is aimed to use with iPhone apps created using Flash, but the AS3 code will also run in movies made for use on mobile Adobe AIR 2 applications.

This is a beginner level tutorial that will only require you to know the basics of AS3 Variables, Event Handling, and Conditionals.

Screen Orientation Introduction

The iPhone is capable of changing the orientation of any application when the user rotates the phone, the default configuration of Flash iPhone applications will disable this feature as activating it will require providing additional code to change the layout properly when the iPhone attempts to change the orientation of the device. You can change the default settings to make your iPhone attempt to change the orientation by going through the iPhone OS settings as will be explained later in the tutorial.

What basically happens when the orientation changes is that the stage size of your application will change from that of a portrait stage to a landscape stage. It is possible to detect a change in the orientation by listening to the StageOrientationEvent.ORIENTATION_CHANGE which is triggered whenever the device automatically attempts to change the orientation. It is possible to retrieve through this event properties the new orientation of the screen, the trick in achieving proper orientation layout is retrieving what this property is after the change and simply commanding your objects to be placed out in a certain arrangements according to that orientation property.

We are going to attempt to do that in this tutorial by creating a scene in which a square and some text are placed in a certain arrangement when they screen is in portrait mode and then another layout when they are in portrait layout.

Creating such an effect will require us to explicitly tell our Flash movie to reposition the objects on the stage depending on the orientation of the screen.

We are going to do this through the following:

1. Setting up the FLA
2. Creating the Physical Objects
3. Coding the Effect

Setting Up the FLA

Start off by launching Flash and creating a new FLA in iPhone OS format. The first step in this project is to enable Auto Orientation, you can do this by accessing the Properties Inspector and going through the iPhone OS Settings. Once in the General tab, simply check the option for Auto Orientation. You can also optionally check the Full Screen option for a better looking effect.

That should set up our FLA properly. Next we need to create the physical objects that will be repositioned with the auto orientation.

Creating the Physical Objects

Our project is going to involve the repositioning of two objects: a square, and a text object. To create the first one select the Rectangle Tool and draw a small square anywhere on the stage, now select it and go through Modify>Convert to Symbol, the name of the symbol doesn't really matter for this example, just make sure that the registration point is set to the top left corner. Now while your square is still selected, go through the Properties Inspector and set the Instance Name to my_logo.

Our square is ready, now time to create the text, select the Text Tool, access the Properties Inspector and set the Text Type to TFL Text, set the Font Family to _sans in order to avoid font embedding issues with this tutorial. Now create a small text field and type something short, when you are done select the text field, access the Properties Inspector and set the Instance Name of the object to my_title.

Both of our physical objects are now ready, we just need to code our effect next.

Coding Our Orientation Layouts

Our code will have a number of tasks to achieve:

1. Making sure that Flash doesn't resize the movie when the screen changes orientation.
2. Create specific functions for portrait and landscape arrangements.
3. Listen to the change orientation events and call the require function accordingly.

We are going to start with these in the order they got mentioned above. The first to do is stop Flash from resizing the movie when the screen changes orientation. This is necessary if you want to have full control of the orientation process, you can simply do that by typing this in your Actions Panel:

That should do the trick, while we are doing this, we need to also make sure that the stage is aligned at the top left corner of the screen at all times to make it possible for us to properly re-align our objects in reference to that point:

Our basic setup is ready, we now need to start creating the functions that will change the layout of the objects for portrait and landscape orientations, this will be done by creating a simply function that will change the x and y properties of the objects we have on stage, the numbers you see are arbitrary numbers I am using for my layout that you have seen above. Start by creating the portraitView() function:

Using this layout the logo and title will be placed below each other which is what would be more appropriate for the portrait mode. This code is not triggered at all except when the function portraitView() is invoked which will happen at a later stage when we start using the event listeners for screen orientation. In the meantime we have to create a function for arranging the objects in landscape mode this way:

Both of these layout options may be used at any time we want by invoking the function portraitView() or landscapeView(). We are going to use them through the event listeners for StageOrientationEvent.

Stage Orientation Event

Flash is able to detect when the stage changes the orientation of the screen through an event class known as StageOrientationEvent. This event is triggered when the orientation is changed and is capable of informing you what the new orientation is. To use this event you must register it to an instance of the stage property.

Our code will now trigger a special function called onChange when the orientation changes:

You should learn at this stage about the special afterOrientation property available through the StageOrientationEvent class. This property may output on of the following results:

• StageOrientation.DEFAULT - The phone is the upright default position.
• StageOrientation.ROTATED_RIGHT - The phone has been rotated to the right.
• StageOrientation.ROTATED_LEFT - The phone has been rotated to the left.
• StageOrientation.UPSIDE_DOWN - The phone is upside down.

What our code will be basically do is check which of these results is generated when the phone is rotated and then call the appropriate function. For the default and upsidedown position we will call the portraitView() function, while the left and right position will require us to call the landscapeView() function. In order to do this smartly we will use a switch conditional as shown in the code below:

Our code should properly change the layout of our objects on the stage when the phone changes orientation while the application is running - however, the orientation of the phone might have been changed before the application is switched on, so in order to detect what the orientation when the application is launched you will have to execute an identical switch statement on its own before anything else is run by typing it at the bottom of your code:

That should do it, you should now be able to use this code in an iPhone Flash application and have your layout change according to the orientation. I hope that you learnt something new from this tutorial. If you have any questions feel free to post them at the Republic of Code Forum.

End of Tutorial