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.
Designing for mobile is more than just making buttons larger and making sure your content scales appropriately. You also want to use the different capabilities of the device as well such as the accelerometer or even a multi-touch. And Flash Professional CS5.5 is great when it comes to this mobile content. I want to show you a couple of things because in the Code Snippets panel, notice that there are some new code snippets. There is Mobile Touch Events, so we have Tap, Touch and Drag, a Long Press maybe to activate a submenu.
We have Gestures as well, so a Pinch and Zoom for maybe a photo, we can also rotate them as well, and a Swipe event. So there are quite a few things you can do in here. Mobile Actions as well, Move with the Accelerometer. That's ultimately what I want to do, is I want to move with the accelerometer. But, this is just one area that was updated for mobile because there's also, if I go to File > New, there are Templates available. So if we go to the Templates tab, AIR for Android, we have a Blank document, an Accelerometer document which is nice, Options Menu and a Swipe Gallery.
Really what I want to do is I want to check out this Accelerometer document here and if I select OK, we can take a look at it. As I scroll down, notice that it says you can edit the movement of the ball object using the Actions panel. So nonetheless, let's go into our Actions for that frame right there, and take a look at the Actions in here. So you can see that it's going to move that ball based on the accelerometer and it's always going to make sure it stops on the edges.
So how would you test this out? Well, you can test this out in Device Central. So I'm going to go to Properties. Now remember, notice how I went to Control > Test Movie and it's not highlighted. That's because Device Central is actually for browser content. So I need to change my publish settings. So I'll go in here, change this to Flash Player 10 & 10.1. Now, go to Test Movie > in Device Central just to see this content. It changes, in fact, let's go to Portrait Mode and we can see there's the ball.
Now, if I open up this Accelerometer panel, you can see that virtual representation of a virtual object. But, as I tilt it, you can see that ball move around. So it's simulating what the accelerometer would do as it kind of rotates around just like that. So, so far, so good, and that's what I want to do, I actually want to take this code and use it for my project. So I'll just minimize Device Central, I'll go back in here, and really in place of this ball, I want to use this monster that I have.
So let's go back to my project in my Library panel, in Cards. Right down here, I have this card6MonsterFly. Now, I'm going to go ahead, and create a new layer and I'll just call it monster, and I'll drag this card6MonsterFly out just like that. There he is! If I double-click on him, and just hit the Enter key, you can see his wings flap. That's pretty cool, and now you can see that I want him to fly around on the screen based on the accelerometer.
So I need to give him an instance name. So with that movie clip selected, I can go to the Properties panel, and I can just call it monster just like that. Now, I need to start integrating that code appropriately. Really, what I want to do is I'm going to take this monster and I want to copy it, and I'm going to paste it into this untitled document. I really want to just start working in this fresh document, make sure I have everything right, then I will transfer everything over. So again, I copied it, now I'll just paste it on in. There it is! I'll get rid of this ball, and I'm going to use this monster instead.
So I'll open up the Actions panel for that code and everywhere where it says ball, I want to replace with monster. So I can do that just by selecting Find and I'm going to find ball and replace it with monster, because that's its instance name, and I'll just Replace All. So that's an easy way to use a template and just swap it out for your own content. But, look at this. As I take a closer look at this code, notice that it stops the monster from moving off of the screen based on this hard-coded number.
Now, you really want to avoid hard-coded numbers because everything is going to be dynamic. I can't say that the width is always going to be 480. Instead, I want to say stage.stageWidth like that. So I'm modifying this for mobile, stage.stageWidth. I could copy that, replace that 480 there. Right down here, here's the stageHeight, replacing that hard-coded number with stage.stageHeight just like that. All right! I'm going to go ahead and just save this to my Desktop really fast, and I'll call it test, and I want to go ahead and run this in Device Central just to make sure everything is working. There it is! As I move him around, he flies around and he never goes off the stage.
So everything does look good. Even if I resize it or whatever, it will still work fine. But, now I need to go ahead and integrate this code into my app that I'm working on. So I'm going to take all of this code, and I will copy it, and now I need to paste it into my document class. So I'll hit Edit class definition to open up this ActionScript file, hit F4. Now, I need to integrate all this code.
Now, just to make it easier on me, I'm just going to paste everything up at the top right up here. There is everything. First thing it asks is this import statement is what it has. I actually already have an import statement. So I'll just delete that and you can see there's my import statement for events. But, what I need to do is I need to go ahead and import the package for my accelerometer; so import.flash.sensors.Accelerometer.
I also need to import flash.events my AccelerometerEvent, my Accelerometer Event, put a period right there, everything should change colors just like that because these don't automatically get imported when you're dealing with the document class. So this is a good lesson in taking code that's in on the timeline and putting it in a package or in a document class.
So those import statements are in place. I'd say that looks good. Here are my variables. In fact, I have three right here. I need to put these in the right location. I'll just cut them, scroll down right in here, here's my different variables. Right down here after the other variables, I'll paste them in and make sure they say private before the word var just like that. Hit Tab a couple of times, and that's what it should look like; private var since it's within this one document class.
Everything looks good, I have this addEventListener, I want to put that in the appropriate place as well as this addEventListener. So I'll cut that. I am just going to paste these two together, and really put these in the right location. So I'll take both of those, cut them, drop them under this comment Event Listeners right in here just like that. That's set up, and then there's this fl_AccelerometerUpdateHandler. A lot of time when you're using code snippets or you're using the templates, they'll give you this generic term which I'm not a huge fan of.
Now, I could leave it as it is, but I'd rather change it to accelMonster. That seems to make more sense to me since it's dealing with accelerometer. So accelMonster, copy that, and I need to make sure that the function is called that same thing since it's calling this function. But, really these two functions are the last pieces that I need to put in place. So I'll take both of these, and I will cut them, and get rid of all these extra lines up at the top, and make sure these functions are in the right place.
So I'll scroll down, right now about line 127 right in here is where I want to paste that code, paste it on in just like that. Notice just like with the other functions, they have to say private or public. I'm going to make these private functions. I'm going to copy that word and paste it in just like that. Okay. I'd say everything seems to look pretty good. When you're copying and pasting lots of code, you might need to format it as well. So this fourth button in, that's our Auto format button.
I'll click on that, and it will make sure everything indents appropriately, and everything looks good now. Okay, I will save it, I'll close that test.fla file. I want to go ahead and run this. Now, remember it's going to control this monster right here. So let's go ahead, and test it in Device Central. There it is! In fact, let's just change the display view to Landscape.
There he is right there! Let's open up the Accelerometer panel and as I tilt this virtual device, he starts to move that direction. So, he is kind of hard to control, but nonetheless, you can see that he actually does move based on the accelerometer. So it looks pretty good. I'll just hit Reset to have him stop.
Notice how he stops on all the edges as well. I would say that's pretty good to go, but let's click the Easy button. Notice how he actually still stays on the screen. I actually want him to disappear when you play the game, and also reappear when you go back to the Home screen. So let's just do that last update, then we will be done with this file. I'll go into the main ActionScript file. This is our document class and I want to go down to wherever the board gets created.
So I can go ahead and use the Find button again and instead of doing a Find and Replace, I can just search for createBoard. That's what I want to find. So when you click on the Easy Game, Medium Game, or Hard Game, it's going to fire off this createBoard. But basically when that board gets created, when those screens slide off, that's when I want that monster to disappear. So right in here, you can see this bkgdComplete, I have this stopStartChildren function which basically kills these screens.
It kills that screen, and it kills the monsters. So I'm going to go ahead and do that same thing. So if I'll just copy this, and paste it below, I can go ahead and point to the monster and set that to true. So this is a function that I've already written and I will show you it in a second, but go ahead and stop that monster altogether. But, go ahead and activate that monster as well when you hit the Restart button or the Reset button. So I'll just do a Find again.
Wherever I reset the screens right down here, so there's this stopStartChildren. I want to go ahead, and change it to false. So now the monster will actually appear once you hit the Reset button which calls this function. So if I take a look at that stopStartChildren, I can just see how it works as I scroll down. Here it is, stopStartChildren. All it does is adds those objects or removes them based on what it's passed in to here whether it's true or false.
So that's how you can activate or deactivate any objects because I don't want to turn the visibility on or off, I actually want to remove them altogether or add them altogether. That's going to optimize my ActionScript and my app a little more effectively. So lastly, I'll save this and test it out one last time in Device Central. There he is! And he'll move around, hit Reset so that he'll stay there, I'll hit Easy, and he disappears when we play the game.
When we click Quit, he reappears. So that's how you can take advantage of the accelerometer in your app, so you can either use a template file that I showed you or you can use all of those great code snippets in the Code Snippets panel. But, the goal is to go ahead and use the capabilities of the device as effectively as possible.
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.