Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.