Start learning with our library of video tutorials taught by experts. Get started

Building Mobile Apps for Multiple Devices with Flash Professional
Illustration by Don Barnett

Adjusting for orientation


From:

Building Mobile Apps for Multiple Devices with Flash Professional

with Paul Trani

Video: Adjusting for orientation

Now you might have great an app that works great in a certain orientation, either a landscape or portrait, but what if you want to take advantage of both orientations? Well, that's what I want to do with this app, first of all this is the landscape view. But if I go into my application settings for this app, notice it's set to Landscape. And really what I want to do is check Auto orientation. So it's going to Auto orient and anytime the orientation changes, I want to adjust the interface. So I'll hit Enter.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Building Mobile Apps for Multiple Devices with Flash Professional
2h 31m Intermediate Jan 05, 2012

Viewers: in countries Watching now:

In this course, author Paul Trani demonstrates how to create, test, and publish a mobile app that works across multiple platforms (iOS, Android, and BlackBerry Tablet OS) and adapts to either a smartphone or tablet display. The course also tackles the issue of various screen sizes and density and how to scale and adjust content.

Topics include:
  • Designing for mobile
  • Modifying existing web content for mobile delivery
  • Using the accelerometer
  • Setting up a mobile project
  • How to test and debug
  • Optimizing graphics and ActionScript for mobile
  • Creating scalable content
  • Adjusting for orientation
  • Sharing and updating graphics across multiple projects
  • Publishing an app to the App Store and Android Market
Subjects:
Developer Mobile Apps
Software:
Flash Professional iOS Android
Author:
Paul Trani

Adjusting for orientation

Now you might have great an app that works great in a certain orientation, either a landscape or portrait, but what if you want to take advantage of both orientations? Well, that's what I want to do with this app, first of all this is the landscape view. But if I go into my application settings for this app, notice it's set to Landscape. And really what I want to do is check Auto orientation. So it's going to Auto orient and anytime the orientation changes, I want to adjust the interface. So I'll hit Enter.

Notice, again, this is the landscape mode. If I take a look at the code in my Actions Panel on the Actions layer, you can see that there's this Change Orientation area, which basically has two functions. It has this landscape and then portrait. So for this landscape function, this is where you orient all of your items and turn on and off things that you needed to turn on and off. Say for instance, for a landscape mode, it's going to turn on these buttons. For portrait mode it's going to turn them off. But nonetheless, based on the stageWidth, it's going to put most of my assets in a certain point and then even for the portrait mode it's going to put it basically in the center.

So let's go ahead and take a look at what this looks like. I'm going to call this landscape function. We will just run this to see how it looks. So Control > Test Movie, I just tested on my desktop. And this is what it looks like, exactly as expected. Now let's take a look at the portrait mode, so portrait. If I change that to portrait view, it's going to call that function and I'll test this out. Notice that it's actually still in landscape mode, but ultimately this is the portrait content.

So based on the orientation of the device, I want to change this content. All right, so back in here, I will change this back to landscape, because I want that to be my default view. Notice up at the top that I'm locking down the stage, I'm controlling everything specifically. But really what I need to do is I need to add an event listener for the stage. So the stage.addEventListener and it's going to listen for the StageOrientationEvent.

So you can see it being highlighted right there. There's an ORIENTATION_CHANGE, changing as well. So I want to change-- again you can have a certain transition if you wanted to use orientation changing, you can transition it that way. But again, ORIENTATION_ CHANGE is what I want to add. Selected that and then I can go ahead and call the onChange function. Now we need to go ahead and make that onChange function.

So right down here, I will go ahead and type that in. StageOrientationEvent is what I want to get. And now I want to go ahead and add a switch statement. And it's going to listen for four different stage orientations, the default, rotated right, left, and then the upside down. So this is great. I can type in switch after the orientation, so after rotate let's go ahead and change the interface.

Notice there is also before switch(e. afterOrientation), but after orientation, go ahead and change the interface. So if it's going to be the StageOrientation.Default. Then go ahead and make it landscape, break. If it's going to be StageOrientation.ROTAED_RIGHT, make it portrait. And again we are just calling that function. I get to make sure I break each one of these after each case, so break and then break and that's basically the format.

So I am just going to go ahead and copy this, just to make it a little faster for me, and now we have this case stage orientation rotated left this is what I want to do left(case StageOrientation .ROTAED_LEFT:, and whether it's right or left, change it to portrait mode and then lastly, if it's upside down(case StageOrientation.UPSIDE_DOWN:, I want to make sure I change it to landscape mode. All right that looks good. These are the different orientations that you can go ahead and take advantage of.

You can hit that checks and text, just to make sure everything is working. I do have a couple of errors and if I take a look at it, in fact, what I need right in here are actually colons and not semicolons. Again, pretty common mistake, I'm glad that it came up. You can see I can easily fix that. Check your code and then you can see everything is fine. So with that in place, when I orient the device, it'll actually change to these different views, so either landscape or portrait.

Whatever is in these functions, you can go ahead and manipulate the data accordingly, and let's go ahead and test this out. And the great thing is as I can go ahead and test this out on my desktop, in fact, if I go to Control > Test Movie, I want to test it in the Air Debug Launcher(Mobile). Here it is, we have a landscape mode and I will change this to Rotated Right. Rotated Right gives me that view, which is my portrait mode, let's go ahead and Rotated Right again, so again now technically it's upside down, but nonetheless, I can change the view and my interface changes accordingly.

Please keep in mind that my app resolution is much larger than what you're seeing here, so it actually will fit on my tablet screen just fine. In fact, let's go ahead and take a look at it on a tablet device. Here it is on the device as you can see. It works fine. I can swipe through the different eyes and mouths and through different body parts. And I even have this menu off to the side. Everything looks great and again, if you rotate it to portrait mode, here it is in portrait mode.

You can see I don't have those rows anymore, but I can easily swipe through these different items. So again, two different views built into one app and now this works great, fits the screen just fine, regardless of the orientation you might have.

There are currently no FAQs about Building Mobile Apps for Multiple Devices with Flash Professional.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Mobile Apps for Multiple Devices with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.