Click on any phrase to play the video from that point.
[ADOBE® FLASH® PROFESSIONAL CS5.5] [MOBILE WORKFLOWS] Flash Professional CS5.5 allows you to easily create content for mobile devices. [Paul Trani] [Platform Evangelist] But with all these different screen sizes and platforms, how can you target these devices without re-creating the content every time. I'm going to be showing you how you can create an efficient workflow starting with the increasingly important Project Panel. So I'm going to open up the Project Panel--you can already see that I have it set up, and I have 3 different FLA files in here. All these 3 FLA files share assets-- in fact, that's what this Author Time Shared Assets FLA file is doing. I'm going to show you that, so I'm going to close this Project Panel. Here are my 3 files that I just referenced, and what I want to do is I'm going to go to this Android FLA, and I'll just jump to this info leg frame, and I'm gonna just double click inside of this. I'm inside of the ScreenInfoLeg, and if I select this graphic--it's actually a vector graphic--but on Mobile, what I want to do is I actually want to make sure it gets exported as a Bitmap. That's gonna help it perform a lot better on mobile devices. So, again, I can just select Export as Bitmap, and then it's gonna be treated as a Bitmap on Export. Not only that, I can select this background here, and I can export it as a Bitmap as well. I can even change it from Transparent to Opaque, and that solid orange color is actually what I want-- it's actually gonna be even better as far as performance, since there isn't any transparency in here, but the key thing here is that I've actually changed some of these graphics within this ScreenInfoLeg. Now if I open up the Library panel, notice that my ScreenInfoLeg right here, I have that checkbox checked--it says, "Share symbol across files." All right. So what I've just changed is gonna be shared across multiple files, or it is currently being shared. So I'm just gonna save this just to be on the safe side, and now if I go ahead and check the other files, I'll see this orange box right here. So I'll click over to the iOS Version--the one for the iPhone-- and I'll go to that InfoLeg, and you can see that orange box appear, and that's the change I've made--I'll even go to this Playbook Version, and again you can see it says, "Update Shared Symbol"--it updates that shared symbol-- and there it is, my graphic is updated, and it's actually optimized for mobile devices. So the next thing I want to point out is that all these files actually share one class file. In fact, I can have each one share a document class. There happens to be a Meridian document class that I can have this file access-- in fact, if I open up this Project panel, you can see that Meridian AS file right here. So I can the majority of my code within this Meridian AS file. So across these different devices, I can have them all share that code. And that makes it easy because if I need to change the code, I can change it in one place, and it changes it across these 3 different platforms. But I can still customize it further. So if I ever want to customize any of these individual files, I can easily do that. Say, for instance, I can select this Begin button, and I can always use any of the Code Snippets in my Code Snippets panel. There's Mobile Touch Events, Gesture Events, Mobile Actions. In this case I'm just gonna use a Tap Event. I can select it--keep in mind I still have my buttons selected-- and if I click on this heads up display, it gives me the ability to read what it does exactly. Already it puts the name in there for that button, and I can click Insert--you can see that animate over to my Timeline-- in fact, I can even click on that--a little code snippet call out-- and I can see that here it is--here is my code snippet that's added. And then I can further customize it. In this case I'm just gonna type in, gotoAndPlay, or let's do a gotoAndStop(10)--okay, something simple. But really what I want to do in here is I'm gonna go ahead and add a trace statement as well. So I'm gonna type in trace("begin tap")--that's what this is going to say. So I want to go ahead and add this trace statement in just to make sure everything is working, and it will still jump to that particular screen as well. Now I want to go ahead and test this out on a device, because I can't really test within Flash. I actually need to test it out on a device. And what I can do in order to that is I can go to Debug, Debug Movie, and here I have on Device via USB. That's how I want to test out that Tap. Now I already have this Motorola Atrix connected via USB. I have USB Debugging turned on for this specific device. So everything is set up, and if I just select Debug, I'll go ahead and see it on the device, and my interface in Flash will change as well to a Debug Interface. So I'll select Debug. So here it is running on my connected device. I'm gonna click Begin and you can see it traces out within Flash--it says, "Begin Tap." And if I interact with it more, I can get more trace statements, but this is a really efficient way to be able to test my content out on an actual device and debug it as well. So once this is set up and good to go, and it's been debugged, it's solid as far as performance and everything, I can then begin to Publish it out. So I'm gonna go to File, down to Publish Settings, and in this case I'm gonna publish out to AIR for Android, I'm gonna click on Player Settings, and then I'm gonna go ahead and just make sure the Output file is set, it has a name, has an App ID, it's gonna go Full Screen, Portrait mode, looks good. I'll go to Deployment and right in here I already have a Signed Certificate. So I've just filled in these boxes right here to make a Certificate. In this case it's gonna be the Device release, so I'm going to change that to Device release. After publishing it's gonna install it on the connected Android device. I'll just make sure everything else is set up--I have Icons in place. Not only that, I have permissions set up as well. So this does connect to the Internet, and it accesses GPS Location as well. So with everything set up in here, all I need to do is click Publish, and it will publish out to my device, and I can take a look at the final version. Here is the final version. As you can tell, I can click Info--get more info--I can go back, I can go to the Begin button--this is done by basically doing a swipe-- I can scroll through this list, and go back to Home into even the zip line, and interact with it more. You can easily see that I can go from Flash directly to my device, test it out, and even connect other devices and test it out on them as well. So Flash CS5.5 has added many new features that makes targeting multiple devices easy with little re-work of content per device. Mobile development quickly becomes fairly easy, so I encourage you to try it out yourself. My name is Paul Trani, and thanks for watching. [ADOBE® CREATIVE SUITE® 5.5] [ADOBE® TV] [tv.adobe.com]
