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.
Now you can use Flash to actually publish out to many mobile platforms. But I want to focus on the two most popular which are iOS and the Android platforms, so those two markets. But amongst those two platforms, there is actually quite a few devices. Luckily our app scales well, regardless of the size, the resolution of the device works out great. But what are some of the other differences? Well, if we take a look at the user experience of these different platforms, iOS for instance, there is really only that one hardware button, there is that home button and that's it.
And also there is some soft keys, there is the back button. It's usually is in the upper left and then there is a New or Edit button in the upper right and this is what people are used to. So I need to be aware of those functionality when people are using these iOS devices, because I want to make sure my app is easy to use on these platforms. So that's how that one works, what about Android? Well, with Android it has multiple hardware buttons, we have the Back button, the Options menu, the Home button, and then even a Search button and not necessarily in that order.
So how do you make an app that will target these two platforms, as well as take advantage of the unique properties of each? Well, that's what I want to do now, so I am going to jump out to my file. Here is my fla file, and really this one doesn't have any sort of submenu or anything like that. It's basically going to be my iOS version. So I'm renaming it to iOS and I'll open it up. Here it is in Flash, as you can see, I have my buttons on the screen, looks good. Really the only thing I need to do here is set the Publish Settings to AIR for iOS, and then I can save this file.
Now I am going to go ahead and make my Android version, so I am going to do a Save As Android, just like that, click Save. Now you'd think that I'd be duplicating my files, which I am, and now that gives me the flexibility to have a different user experience for each platform, yet they still point to that same document class. So if I need to edit any of the code, I'm only editing it in one place. That's great! All right, but in this Android version I actually want to add a submenu and the easiest way to do that is if you go to File > New, actually in the Templates tab under AIR for Android, there is actually an Options menu already ready to go.
So select Options menu and open it, you'll see right down here, sure enough there's the Options menu known as options_mc. If I take a peek at the ActionScript, which is right down here in the Timeline here, I can open up my Actions panel and you can see the code. So it turns it off initially and then if you click a key, so this key code for older Android devices is 95 and then the newer ones is right here. And really I don't want to continually publish out to my Android device to test this, so what you could do is, this is a nice little trick, just copy that line, paste it and then change that keyCode to 32.
That's going to be your spacebar, so that allows me to test on my desktop. In fact, I'll just go ahead and test this out right now just to make sure it's working. There it is, I'll hit the spacebar, you can see it shows it and then hides it. So now that I know everything is working what I can do is I can go ahead and you guessed it, go ahead and steal this code. And really you can select any layer and in Flash CS5.5, you can copy those layers. So select Copy Layers, so that's what we are going to steal.
I'll close that file, no need to save it, jump back in here and paste it on in. There it is, my code is good to go. But I also do need the Options menu, so Options menu, I'll create that new layer right here, because that's what I want to add and if we go into Library under screens, there happens to be an options_menu movie clip right there, so just click and drag that out, there it is, looks good, has a Contact button and an Exit button.
But really I am gong to go ahead and use my Align panel, Align it on the bottom and then center it, just like that. Now let's look at this a little closer, because if I double-click into you can see that there is a contact_btn. That's its instance name, and then we have to an exit_btn, just like that. So these are the buttons I need to get to work. I'll go back to Scene 1 and go into my ActionScript. And remember, this is on a layer in this file's Timeline.
So it's nice, this code is going to be unique to this file. So any custom code for a specific platform can be baked right into that file. Go into Actions, here is my code. It looks good. As I scroll down, you'll see this EventListener which actually just exits the application when you click on the entire menu when really I just want it to be the exit_btn, just like that. So click on the exit_btn and add that EventListener, when it goes away, go ahead and remove it. And now I need to go ahead and add the Contact button functionality.
And that's just going to go to a webpage. So, an easy way to add code is if you just select your item, and notice I've selected this options_menu and I need to given it an instance name, so options_mc, just like that, so it has an instance name now. But really what I want to do is I want to go ahead and add a code snippet. And there's quite a few in here, there is plenty specific for mobile, in fact, over 20. But what I want to do is I want to click to go to a webpage.
Know that this will actually work on mobile just fine. So anything, except for like rollovers will work on mobile. So, nonetheless, this is what I want to add. I am just going to double-click it to add it to the Actions panel; you can see it right down here. It added it to the entire options movie clip, but really I want to point to the contact_btn just like that and I'll delete that comment. That looks good, I can take this line, I can cut it, I can put it in its appropriate spot, which is right next to the other one.
And, I can even paste it again right down here for the removeEventListener, and change add, to remove, just like that, addEventListener to removeEventListener. So, again EventListener is for Exit and Contact, you click on Contact, it will fire off this function, in which case I wanted to go out to that website. And lastly, I really don't need that blank, so I could eliminate that, because it's automatically going to open up in a blank page. All right, I'd say everything looks pretty good; I am liking how it's looking. So, one more thing I do have to do, because we are using a couple of things here.
We're actually using this URL request, this navigate ToURL and we're actually using this native application. Okay, so I need to add the import statements for those two functions. So I am going to go ahead and do that. So now I am going to go into that document Class, that Main document Class. So I'll all edit that document Class, right down here beneath all the other import statements, I am going to make a new one, import flash.desktop, because even though it's mobile, it's actually a mobile desktop and NativeApplication, you can see a highlight right there, hit Enter and that's good to go.
Next step is the import flash.net.navigateToURL. That highlights boom, just like that. That's good to go. I'll save that file, I had to add those two in, otherwise you will get an error and I will save this file and then I want to go ahead and run this. And what's nice is I can go ahead and run this on my desktop, just to see how it's going to look. It will actually work the same on mobile, but let's check it here first. There it is running, I am going to go ahead and hit the spacebar and it brings up that submenu.
You immediately notice the issue of the fact that this is behind these other items that are actually added by ActionScript. So I need to go ahead and put this on top, and you will need to often do this for any sort of menu that pops up. So I am going to go ahead and do that now, so back into my actions layer for that ActionScript, when you click on that button and you activate the menu, you want to go ahead and put it on top. So you'll just setChildIndex to options_mc.
That's what I want to be on top of everything else. That's going to be numChildren-1. That will put that on top of everything else. That is good to go, so I will close that panel, save this file and run it one more time, there it is running, here are my dynamically added elements. But if I hit the spacebar, you'll see that content pop up on top of everything else. Then if you click Contact, it will actually launch a web browser, so I'll on Contact. And sure enough you can see that it automatically loads that site.
So this would be the Contact page, you can see it's actually just my site. But nonetheless, you can see that is working. That looks great, so I'll just go ahead and close that. And lastly is the Exit button. So when I click this, it will actually exit out of the app, so I'll go ahead and click that and it does exactly that. So that's how you can easily go ahead and target two different platforms, using two different flas, still have the code linked together, but still being able to customize each one as well.
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.