Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Dynamically positioning graphics

From: Building Mobile Apps for Multiple Devices with Flash Professional

Video: Dynamically positioning graphics

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.

Dynamically positioning graphics

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 Already a member? Log in

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

Course retiring soon

Building Mobile Apps for Multiple Devices with Flash Professional will be retired from the lynda.com library on October 15, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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 preferences from 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

Your file was successfully uploaded.

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.