Click on any phrase to play the video from that point.
[Adobe TV Presents...] [Paul Trani in...] [Adobe Flash Professional CS5, Training with Trani] When it comes to designing for multiple screens, such as a desktop, maybe it is a smart phone, whatever the case may be, what sort of design considerations do you need to think about? And that's what I'd like to review. This is all, of course, related to the Flash platform. But know that there is a huge digital explosion going on right now. We've gone beyond personal computers into sort of interactive TV and even this sort of mobile phone explosion, this sort of second phase of smart phones actually coming into play that do pretty much what personal computers used to do in days past. All right, when I take a closer look at these smart phones, what's the penetration look like? You can obviously see that Flash. The Flash player here on these mobile devices is actually ramping up quite a bit, so over the next coming years, you'll definitely see some big-time penetration going on there. And that's great, because it's all about the idea of being able to sort of program and develop once and then publish to as many screens as possible. But what are the design considerations? And, quite frankly, the design considerations are all about utility. So remember, we have this new device in our hand. How do we design for it? [Design Considerations] We've got to think about certain things, such as, of course, we're going to be using our finger to access these devices immediately. How are we going to interact with these devices? What are the gestures that I want to use that I use in the physical world that I want to carry over onto some sort of flat, portable screen? Really, you want to leverage some clear mental models like a page flip. You want to design for real hand sizes. So you want to keep the buttons a certain size, and I'll talk about that. But you want to make sure everything's intuitive, feedback is easy, so on and so forth. Not only that, these devices, they could be anywhere. People could be using them anywhere, so there might be glare on the phone or on whatever device it is. How do you deal with the contrast there? Not only that, can you take advantage of the context of where the person is by serving the appropriate data to that person in that location? So plenty of things to consider. Next up, well, they're in this certain location. What's their screen look like? How is it oriented? Is it more of a landscape, or is it portrait? And does it really matter? And how do you account for that? So again, the big thing here is whether it's portrait or landscape. So again, if we obviously have a finger as our control, then what size is it and how does that work? And again, you could estimate that it's going to be about 44 pixels large is the standard size for a button on mobile devices. Don't go much smaller than that. And, sure enough, a finger usually comes with the hand. So, as you can see in this example of what not to do, is obviously I can't see the numbers for that slider because the numbers are beneath the slider. So what I'd want to do is I'd want to reverse that, and that allows me to interact with that slider without covering up the numbers. So think about, of course, the finger comes with the hand and how that influences your design. Next up is the native keyboard. So here you can see that it looks like there's an empty area below these text fields, and the reason for that is because there's a native keyboard there. So it's about the idea of putting important content that requires input above the native keyboard for whatever device or devices you're targeting. [Time to Design!] Time to design. So what I'm going to do is I'm going to start out in Device Central CS5.30 As you can see from this intro screen, I can go ahead and create a new mobile file. I can create a new flash file, Photoshop file,40 any one of these types. And in this case, I'm going to use Flash. So all I need to do is select that. I've selected "Flash." Now, I really don't have a device selected, so what I need to do is I need to go up to the upper right and click "Browse." And what Device Central does is it actually will go out and grab all the profiles for all the devices available. So as you can see, here is quite a list. As I scroll down, I can really almost scroll forever. These are all the devices available. But what I want to do is I just want to design for maybe one or two of these. So I'm going to go ahead and sort. Notice how I can sort by, say for instance, Flash Player, because I want to make sure that my device is going to use Flash Player 10.1. And more and more devices are becoming available that have this capability, but I can come down here and sort of decide on the phone that I want to target. In this case, it's going to be the Google Nexus One. So from there, I'll just double-click on that device, and it gives me all the various properties of this device. It's great if you're shopping for a phone. You can easily look at the statistics and figure out of it's a good one for you. But again, I've just selected this Nexus One. I can click "Create." It says, "You've selected this device." And now I can click this "Create" button in the lower right-hand corner. All right, so here we are. Here I have a blank document, and now I can start designing. So the whole idea is taking those principles and keeping those in mind. And what I'm going to use in Flash, is I'm going to use this "Rectangle Primitive Tool." And all I'm going to do is going to make a quick button. So I've selected the Rectangle Primitive Tool. I'll go over to my Properties panel, and I'll give it a stroke of dark gray. And we'll go ahead and give it a color of, say, a lighter gray, slightly lighter, but I still want to keep this pretty dark, because, like I just mentioned, it's all about how it's going to show up in contrast with the background. So again, slightly lighter gray. I can draw my button. So there's the button I've drawn. Notice the size. Again, its height is going to be over 44 pixels, which is what I want, so it's looking good. Also with the Rectangle Primitive Tool, it's great to make a button with it because I have these rectangle options. So right down here I can go ahead and curve out the corners like that. And that's going to give me my button I need. All right, so it looks good so far. What I can do with this one shape, again, I'm going to keep this simple. I'm going to click on the Library panel, and I'm just going to drag it into the library. Now from here, I can go ahead and whether I want this to be a movie clip and treat this movie clip like a button; I can do that. That's actually what I want to do. And I'm just going to call this "My Button." I'll click "Okay." So there's my movie clip, and I can treat it like a button and have it behave like a button. But I'm going to do one more thing, and this pertains to optimization for graphics. Your smart phone actually is, of course, a small computer. And what we want to do is we want to keep the processing on these small computers very easy. And what I mean by that is we don't want to have a lot of vector information because that's more processing this little computer has to do. So I'm going to go into the Properties panel, and with that object selected, I want to "Cache as Bitmap." So even though it started out as a vector, it's going to go ahead and cache it as a bitmap graphic, so it's made up of pixels, and it's going to make it easier on this device. And again, that's all I'm going to do. You might not be super impressed with what I've done, but, again, this is sort of a beginner primer on designing for mobile. "Control," "Test Movie," and here I can test it out in Device Central. From there, I can see my button. There it is. It seems to show up pretty well. 04 It seems like a good size, but also what I can do is I can go ahead and I can control the display. So here in this Display panel, I can go ahead and adjust the reflections for outdoor viewing, and you can see how it gets obscured more, but I'm still able to see it. So this is really what you want to do. You want to design and then adjust this display panel to see what your content looks like. Again, in sunshine you can obviously see what that looks like. What about if the content gets rotated? Well, I'm going to change the screen mode to "Landscape." So I've just rotated it around and look at how much smaller that button has gotten. So, really, my next step is adjusting the interface and the content based on the orientation of the screen. But that, again, is for another time. Again, this is just a quick primer on creating the graphics for mobile devices From here, the next step would be actually adding some code and some programming to this content. [Executive Producer, Bob Donlon; Producer, Karl Miller] [Director/VFX, Kush Amerasinghe; DP/Post Production, Erik Espera] [Adobe TV Productions, tv.adobe.com]
