Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Resizing Content for Multiple Screens

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[♪upbeat music♪] [ADOBE TV Presents...] [♪♪] [Paul Trani in...] [♪♪] [Adobe® Flash® Professional CS5 - Training with Trani] [♪♪] [♪♪] So when it comes to designing for multiple screens, there is quite a difference between, say for instance, this monitor and this small monitor. And what we want to do is we want to determine how our content changes from one screen to the next. More specifically, I want to control how this content gets resized, even to the point to whether it's a portrait view to a landscape view. I'm going to do most of this just in ActionScript, of course in Flash. But as you can see right here in Device Central, I'm actually showing you the current application I'm working on. It's just a fun game. You can see that it actually does fit within this Google Nexus One perfect. So everything is working really well, but again, what happens if I change the display? For instance, I'll change the screen mode to landscape mode. Well, what Flash does is it goes ahead and it sort of resizes all that content. I can still see everything but, obviously, I can't read that text. So my next step is to control how this information appears based on the size of the screen, whether it's horizontal or vertical. All right. So I'm going to jump into Flash. Here's my file. Just to kind of review some of this content, I have three graphics. I have this background graphic, bkgd, and if I zoom out, notice that it's pretty large. And what's going on there is this is just one little dot that's being tiled. It's basically filling that what was a solid texture. It's filling it with those dots. So that's an effective way for you to create some pattern outside of something that's just a solid color. Next up we have this game title, so that's the name of this object, gameTitle. And then I have this button, and it's just called the panel. Okay? So those are my three objects, and now I want to start controlling them with ActionScript. So I have an empty layer right here called Actions. I'm going to select that first keyframe, I'm going to go to Window and open up my Actions panel. So what I want to do here initially is I just want to make sure that "// the stage shouldn't scale". So I want to confine it so it doesn't scale at all and doesn't distort everything on the stage. So I just need to type in "stage.scaleMode". Notice how it does give me that code hinting. I can just go ahead and select that "stage.scaleMode = StageScaleMode." I've got to set the property to "NO_SCALE;" "stage.scaleMode = StageScaleMode.NO_SCALE;" So don't scale any of this content. And as far as alignment, "stage.align". I want to align it, sure enough, to the top left. "stage.align = StageAlign.TOP_LEFT;" All right. So those are the two properties I'm defining. Now my content won't scale. So that's exactly what I want because I want to be able to actually read that text. I've confined the stage, and now I can work on the resizing of this content because I can add a listener. So I want to "//listen for the stage resize". Any time the stage is resized, even though it's not actually going to change, I want to listen for it when that happens. And I'm going to do that by typing in "stage.addEventListener" I'm going to add an Event Listener, and I'm going to go ahead and type in "(Event RESIZE" and I want to call a function called "resizeLayout);" "stage.addEventListener(Event.RESIZE, resizeLayout;);" So that's my Event Listener. I can go ahead and type in "function resizeLayout (e:Event)" And right within here, within these two brackets, that's where I'm going to go ahead and add additional functionality on how the stage is going to be resized. So I'm going to set the position. "void{" setPosition( )". So this is just a new function that I'm about to define, okay? setPosition. All right. So right up here I'm going to go ahead and "//Adjust the interface". And here's where I'll write a "function setPosition ( ):void { }" which is a standard call. I don't want it to return anything. But here's my setPosition function. So now at this point, I can start to determine what's going to happen with the content. I can check for, say, the width of the stage if I want to. Anything like that. So setPosition within this function. I'm going to go ahead and say "if (stage.stagewidth > widthofGraphics)[" If the stage width is going to be greater than the width of the graphics, then do something. I know this might be looking a little complex, but I'm going to explain it. In general, if the stage width is greater than this variable that I'm just about to define. So I'm going to copy this code and I'm going to put it up here, and this is a variable. The width of graphics is actually going to be a number, and in general, it is going to be the "gameTitle.width + panel.width;" So again, if the stage is going to be wider than the width of these two graphics, then go ahead and put them side by side. So right in here "//put the graphics side by side". So that's what I want to do next is start to control these graphics all using ActionScript. So in here, "gameTitle.x". Actually, it's X position. I want to adjust its X position and I want to kind of put it off to the side. I don't want it to be at the top. I want it to be right in the center. So "stage.stageWidth/2;" "gameTitle.x = stage.stageWidth/2;" That's what I can do. I can go ahead and say, "Hey, regardless of where the title is, go ahead and put it right in the center of the screen." And that's what this does right here, okay? And another thing I can do is go ahead and control the game title's Y position. "gameTitle.y = stage.stageHeight/2;" And I can go ahead and make the stage height divided by two as well. So regardless of where it is, it's always going to put it in the very center. That's not quite exactly what I want. I actually want to take this game title, and I'm going to want to move it off to the left-hand side a little bit. In fact, what I can do there instead of making the X position right in the center, I can say, "Put it on one-third of the way in." "gameTitle.x = stage.stageWidth/3;" So that's all I'm going to do. I know that seems like a lot of code, but notice how I've placed this function above the actual function call. So that's where the position of this code comes from. But not only that, I need to make sure I call this, so I'm going to copy this code, and I'm going to make sure the function gets called when this application initially loads. So check for all this stuff when it initially loads as well. Again, I'm just resizing the game title real fast. Everything else should stay the same, other than the background will be fixed. So I'll do a Control, Test Movie. We're going to test it in Device Central. When I run it, I can see that it repositions that title. So again, it puts it off to the side at sort of a third of the way in, which is perfect for my positioning. And then I can go ahead and start to work on the other items. But what happens if I change it to portrait? So I'm going to change it to more of that vertical. Sure enough, it's going to be in the correct position there as well. It just lines it right up to the middle. Remember, this is a third of the way from that top part. So the nice thing is you don't have to define where graphics go based on the stage width all the time. What you can do is you can define where objects go based on other objects. So if I want to go ahead and take that panel, I can take that panel and make its Y position equal to the game title's Y position. "panel.y = gameTitle.y;" Okay? So I don't have to make it always equal to the stage width or whatever. I can start defining objects based on where the position of other objects are. All right. The last thing I will do with this panel, maybe I'll change its X position as well. "panel.x = gameTitle.x + gameTitle.width;" I can go ahead and instead of making it equal to the stage width, I can take it and make it equal to not only the game title's X position-- and you can do this however you want. You don't actually need to put that within parentheses. You can make it equal to the game title's X position plus the game title's width as well. So again, just defining where the position of items are based on other objects. And I'll just run this really fast. Control, Test Movie. Everything looks good so far. We'll see how our characters kind of pop out. Let's go ahead and change this to landscape mode. And we can see that content actually has shifted off to the side. Now, of course you want to do further adjustments based on what I've talked about here. Just to kind of show you some final code that I've implemented, you want to do the same thing but maybe sort of subtract from where it currently is. So you might want to hard code numbers, but you really want to keep from hard coding specific numbers in there because you want to keep your interface as flexible as possible. So again, with some additional code added in here, I can go ahead and do Control, Test Movie and test it in Device Central. By sort of doing some fine tuning, we can see everything lands in place and works out great. So regardless of the device or regardless of the orientation of the device, the content is always going to be where I want it to be. So just a quick example of how to resize content regardless of the device. You can obviously see that Flash does a great job of positioning items. [♪upbeat music♪] [Executive Producer - Bob Donlon] [Producer - Karl Miller] [Director/VFX - Kush Amerasinghe] [DP/Post Production - Erik Espera] [ADOBE TV Productions -] [♪♪]

Video Details

Duration: 12 minutes and 43 seconds
Country: Andorra
Language: English
License: All rights reserved
Genre: None
Views: 123
Posted by: adobetv on Oct 6, 2010

Regardless of what size screen your content is on, you want to make sure your content looks as good as possible. Paul will show you how to create a flexible interface in a browser, on the desktop or on a mobile device.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.