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.
Currently how this file is set up is it's always just going to scale to the maximum width and height of the document by default. So it's at 480x800 and it automatically scales. In fact, if I go to Browse, and I just review maybe a device that has an even larger display area, such as the Motorola Xoom, how will that content look? I'll just drag that to the Test Devices, and if I select Emulate Flash and select Motorola Xoom, we can take a look at this content.
And you can see on this larger tablet it scales everything up, and in my opinion, this is a little too large, so it looks like a phone app that was scaled up for a tablet. So I want to control the positioning of all of these elements and the size of all of these elements myself, and I can have that pixel perfect control, which is what I want to do right now. So I'm going to go into Flash and I want to control the stage size and really all of that stuff.
And notice how I'm going to do that is using ActionScript. But there's no ActionScript in my Timeline. That's because all of the ActionScript is written in the Document Class. If you're not familiar with the Document Class, I encourage you to check out the ActionScript 3 Title I recommended earlier, ActionScript 3 in Flash Professional CS5. I'm going to go ahead and edit the class definition. We can see this ActionScript package, all these import statements. In fact, what I'm going to do is I'm going to go to View and Hide Panels.
That will hide everything so we can see this ActionScript better. And then we get into the creation of variables and objects and then the functions down here as well. So now what I want to do is I want to control the stage myself. So I need to add a couple of import statements, which is what I'm going to do first. So I'm going to say import flash.display.Stage. There is my stage, and as soon as it selects that word, I can hit Enter and it will add that word.
And the next couple are the same statement, so I'm going to copy that and paste in import flash.display, add that period and StageAlign, because I want to control the alignment as well. Paste in that import statement up to this point, and the last thing I want to add is the StageScaleMode just like that. So these are the things that I want to control, therefore I'm importing those packages, and now I can start controlling those items.
So I'll scroll down. In fact, we have this Main function, this is our Main constructor. So this is really where all the action starts to happen. Just after this trace statement is where I'm going to add control the scale mode and the alignment. So stage.scaleMode. As soon as that selects I can hit Enter, make that equal to StageScaleMode.NO_SCALE. So there it is. Use my Arrow key to select NO_SCALE just like that. Let's move on to the stage alignment, and I want to make the alignment equal to StageAlign.TOP_LEFT.
So that's where everything is going to be drawn from is the upper left-hand corner, hit Enter just like that. So lock everything down and make that alignment from the upper left-hand corner. All right! So far so good! Now, based on the stage, I want to start positioning items. So I'm going to position the introScreen, the finalScreen, my background, and my introMonsters. I want to position everything dynamically. So I'm going to go ahead and make a function just after these two instantiation lines right here, and I'm going to just go ahead and type in setPosition, just like that.
So there's my function call, I'm going to go ahead and make this function. So I'll just copy that word. Right down here, this is where I'm going to add that function, so private function. Paste in that word, because I want to make sure I typed it correctly, setPosition, add void, open curly brace. As soon as I hit Enter it adds that closing curly brace, and it really doesn't matter the format of this. But between these two curly braces I'm going to go ahead and start positioning everything.
So I'll start with the background. So I'll say for the background make its height equal to the stage.stageHeight. As soon as it selects it, just like that, bam! And we'll always make the height of this background equal to the stage height regardless of what that is, so it's dynamically going to scale. So the background width is going to be equal to the stage.stageWidth. Let's take a look at that stage width. So I'll jump back in here to this Monster.fla.
Now, I don't want to just view the stage, but I want to view the entire pasteboard to see the size of this graphic, that background. So I'm going to go to Pasteboard, and it shows me that, that background is actually twice the size and twice the width of the stage background. It's pretty large. It's double the size, because it slides over when you start to play the game. So I need to go back into the Main. as and I need to make the width of the background equal to the stageWidth * 2, just like that. So far so good! Let's do introScreen, and in this case I want to set its position.
So I'm not going to worry about its size, I'm going to set its position. I think it's x position = stage.stageWidth / 2. That's going to give me that center point horizontally. It's going to give me that center point. introScreen.y = stage.stageHeight / 2, and that's how you put something right in the center of the screen, is just divide by 2. That looks good! Now let's take a look at the introMonsters. Okay.
Now, these intoMonsters are right up here, and if I take a look at my fla, so let's hit F4, go to my Library and take a look in my different screens. Here's my introMonsters. Well, how is it positioning this movie clip? Well, it's positioning it based on this registration point. You can see that registration point is right at the feet of these monsters. So I want to make that registration point at the bottom of the screen. So I'm going to make the y position of these monsters equal to the stageHeight and that will make it look like they are resting on the bottom of the stage.
Let's go back into Main.as, scroll down to where we were, introMonsters, first of all, let's do it's x position equal to the stage.stageWidth divided by 2, and then the introMonsters.y = stage.stageHeight, just like that. Again, since that registration point is right there, it's going to make its y position rest on the bottom of the stage. Perfect! Looks good! Now, I just need to do that finalScreen.
Again, right up here we can see this finalScreen, so I'm going to just copy that word, just to make sure I type it correctly, paste it in, and for the finalScreen let's make it x position equal to the stageWidth as well. So I'll copy that word right there and paste it in. finalScreen again, finalScreen's y position. It also is set up the same way as this introMonsters, where all the monsters are resting right on the registration point.
So I want to make sure the y position is equal to the stage.stageHeight, just like that. All right! That's all set up, setPosition is looking good. So I will just Save this file and I will test this, and I'm going to just test it in Flash Professional. So I don't need to launch Device Central each time. You can see that everything does line up just fine, but quite frankly, if I was to scale this up, for a tablet device, you can see everything doesn't scale.
So I want it to scale based on it being resized, I want everything to scale into position and change its position as well. I need to make a new EventListener, so I'm going to hit F4, scroll up right under EventListeners, and I'm going to listen for the stage, I'm going to add an EventListener. I'm going to listen for the Event.RESIZE. So anytime it's resized, it will fire off this function called resizeLayout, just like that. Okay.
So I need to go ahead and make this function. So I'll just copy that word, scroll down here, and right beneath this setPosition function I can make a new private function called resizeLayout, and in this case remember this happens based on an event. It's an Event that calls it, void that open curly brace, closing curly brace, and now I can, anytime the stage is being resized, go ahead and call this function.
So again, I'm going to copy that word and paste it in, just like that. I would say that looks pretty good, setPosition gets called initially when the app launches, as well as any time its resized. So I'll just Save this file and let's go ahead and test it in Flash. There it is. Everything looks good at this size. Let's scale it up, say for instance for a Xoom or a Galaxy Tab, you can see how all the content scales up.
So that's how you can dynamically control where your items appear as well as their size. You have that pixel perfect control, and this works out great when you're going from a phone clear up to a tablet sized device.
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.