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.
When creating an app you might start from scratch with a brand-new file or you might be repurposing content you already have created for the web. Now if you are starting from scratch, you can go to File > New and you will notice in the New Document dialog box, you can go ahead and pick AIR for iOS or even AIR for Android, and you will notice right away you can easily modify any of the properties and really it sets the Publish Settings to publish to AIR for iOS. So you can pick either one of those, click OK, and get right into creating what you need to create, and in the Properties Panel notice, if I click on the stage, it has AIR for iOS.
And again, you can always change that if you want to as well. So you can start to develop and then ultimately publish out and that's how that workflow would work if you are just starting from scratch. But again, this is an intermediate course, the chances are you probably already have some content that you want to repurpose and turn into an app and such is the case here. So I am just going to go ahead and close that file, and I am going to open up a new one. Right in here there is this Monster. fla that's in the 01 Begin folder. So I will open that up and this is content that was created for the web, and I will just go ahead and test this in Flash.
So again this is browser-based content. You can see Monster Matchup. It's just a matching card game. I will select Easy, and right in here it's all about matching cards. So this is a kids' game. I can quickly find the matches in here just like that. Pretty easy to work with, we can see the Quit button down there, but let's go ahead and match these last two. It says Nice, and gives me this final screen as well.
Then we have this New Game button down here. So I want to repurpose this and basically turn it into an app for mobile devices. Now what I can do is I can go to Control > Test Movie and I can test right in Device Central. So this emulates devices and shows me what my content looks like on devices. So right here just my default 320x480 Multitouch generic device is what's going on right here. And I'd say that looks pretty good.
Notice the Display is set to Landscape. Sometimes it will be set to Portrait as well, but this game is actually going to be more appropriate for a landscape view just like that. Well, this is a generic device and quite frankly I want to find out what this looks like on the other devices as well. So in Device Central you can click Browse and go to the Home button and you can see all of the devices right in here that are updated dynamically.
And you can always Refresh your online library for looking for something that isn't there. Once you do that you can go ahead and even search. So rather than scrolling I can search for iPhone, just like that. Now we have our iPhone Profiles right in here. I can search for Droid devices, I can type in Droid, you can see all of them right in here as well. But let me just clear that out, because I just kind of want to peruse the Display Size. Because that's the first thing I need to do is I need to make sure that it fits these appropriate sizes.
So as I scroll down you can see there are some pretty large sizes 640x480, 480x854 is a popular size for a lot of devices. As I scroll down we get into 480x800. Again a lot of devices are at 480x800, and I can get into some smaller and older devices as well. But really 480x800 seems to be the sweet spot for devices. So I can go ahead and pick say any one of these.
Google Nexus One is what I am going to pick. It's 480x800. There it is, and what I can do is I can just drag it to my Test Devices Panel just like that. So there it is, Google Nexus One. I can click on it. It gives me the profile for that device. Great way to shop for devices actually if you're looking as well. But nonetheless, I want to see my content on this device. So I need to select Emulate Flash, and then if I select that Google Nexus One it actually appears on this Nexus One.
Quite frankly, the first thing you notice is this bar up at the top. That's because Device Central is technically for Flash content and content in general in the browser on mobile devices. So if you look over here and see Content Type: Embedded in HTML, and this is the Navigation bar, the Chrome bar for the browser. So that's why you need to go down into Display and Set to fullscreen. So this is more like what the app will look like. Really this is just my starting point because I see what this content looks like on a mobile device.
It's being scaled down and I notice these buttons are really small. So these are going to be hard to click on. So I need to adjust that. As I get into it, these cards don't look bad. Everything still works, but this Quit button is awfully small as well. So it's all about adjusting the size of the content right now. So I will just click Quit and really I am going to go back into Flash and edit this content. So back in Flash here we are, notice that this was set to Flash Player 10 & 10.1, because that's what I needed set to in order to show in Device Central by the way.
But in here, again, I need to resize it to more of a generic size for mobile devices, not this 960x600. I can go ahead and edit the Document Properties, type in 800x480, and I want to Scale content with the stage. This is actually new in Flash CS5.5. It will scale all of my content for me, which is great. I will click OK. It scales everything down. This is what happens when you start to scale items is they get a little jagged.
I don't know if you can tell, but this is kind of a jagged title right here. So I want to jump in and just resize it using the Transform Panel. I am going to set it back to 100, just like that. Now that looks a lot better. So I want things to appear at 100% if I can help it. But I do notice these buttons still aren't quite big enough for our finger. So I will just go into that Intro screen and for each one of these buttons I will select all three and then I will use my Free Transform Tool to scale up those buttons.
So we get them about the size of a finger roughly. And if I select each one of these you can see this is about 80x80 pixels, which is pretty good size. The minimum would be about 45x45, but this looks good. I like how that looks. It's going to be easy to click on. This is a children's game. So I want to make it real easy for them. I can go back. Now let's take a look at. I have a couple other buttons in there that I needed to resize. So let's go into the Buttons folder and here are the buttons I just modified.
I want to go into the New Game button, because that one was awfully small. Jump in there. You can see he is pretty small, and I am going to the Timeline and notice in my timeline, it has different states. Note that you will never going to see the Over state in mobile, because there is no such thing as a rollover. You will see the Down however. But what I want to do is I want to scale up all of these keyframes as well, all of the content. So I am going to select this button Edit Multiple Frames and make sure I span all of those frames.
Now when I do a Select All, so again, Edit > Select All. I can go ahead and scale up everything on all of those frames and make that easily twice its size. So that looks a lot better and as I turn that off and click through I can see it changes it in all these states. Now I am going to do something that I like to call like the Iceberg Method, which is my button might be smaller, the graphics in it, but I want the hit area to be larger.
So the visible area is smaller, but really there is so much more to it. So, I am going to select just a Rectangle Tool. I make sure the Color is set to white and that's about it, just like an iceberg and I can make that hit area almost twice its size, just like that. This is smart to do on mobile. Even though you have a small label you can make the hit area at least twice its size. Again, that will never be seen since it's in the hit area. So that looks good. I am going to go to the Quit button now. I am going to do the same thing there, which is again selecting Edit Multiple Frames, do a Select All, hit the Q key to activate the Free Transform Tool, and I can scale everything up just like that. Turn that off.
Go to my Hit frame, make sure that last keyframe is selected and it's that same idea of drawing, any sort of graphic that's larger than the actual button. So that looks pretty good. I can go ahead and test it out now. Now remember, I want to make sure this is set to 10 & 10.1, but I am going to go ahead and test it in Device Central again and just see how all this content looks. There is the old one, now here is the new one. Again, it looks easy to click on these buttons.
If you can kind of see the default buttons over here, these look pretty good in comparison. I can select Easy and then go in there just like that. I can see all of the cards and even this Quit button is a good size as well. The last thing you want to do is just go ahead and check using this Display, adjust the Reflection. So you can start to see what this content looks like, say Indoors, Outdoors and then the absolute worst case scenario which is Sunshine, on a really shiny screen to see how your graphics show up.
I would say this looks pretty darn good considering these different states that I can sort of emulate. I would say it looks good and really I can start to move on from there. But just keep in mind, even though you're developing on a desktop or a laptop you need to consistently think about how a mobile user will interact with your content.
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.