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

Creating content for different platforms

From: Building Mobile Apps for Multiple Devices with Flash Professional

Video: Creating content for different platforms

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.

Creating content for different platforms

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.

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
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 preferencesfrom 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.