Join Tom Green for an in-depth discussion in this video Creating a PhoneGap Build app with Edge Animate, part of Creating Interactive Projects with Edge Animate.
- View Offline
Edge Animate does a lot more than create interactive motion graphics for HTML 5 web pages. In this lesson we take an Animate project and create a smartphone App using Edge Phonegap Build. Which will convert your Animate projects to native applications for Android, iOS, Blackberry and a number of other platforms. In fact, the workflow from Animate to testing on your device is relatively simple. It takes as long to complete as, well, the length of this video. So, let's get started.
To get yourself started, open the Index.an file located in your exercise folder. Here in Animate, I've created a relatively simple project with interactivity and a little bit of motion. And if we look at the project in the browser just bring it over. And we load, you can there's a little motion, a little interactivity. And if I click on the Interactivity, a couple of little buttons come up, that can be tapped. And what this is is, you know, it's a very simple home screen. For what could be an interesting tour of Paris. So How do I move from this HTML 5 environment in the browser. Or this HTML 5 environment in Edge Animate to the creation of native apps for smart phones? The first step is saving the Animate file.
From that build we'll be looking for an Index html file. So it is critical that your project be named Index.an and that the published file be Index.html. Speaking of publishing, that's the next step. Once everything works and you've tested it in the browser. It's time to get it out, so we go to File > Publish Settings. Your publish started as the web, and I'm going to publish to a separate folder called Paris. And I just clicked the Publish button and it is done.
We are now ready to create a smartphone App. Now before we do that, we need to do a couple of things, so let's head over to the folder. Containing the files for this exercise. First thing I want you to pay attention to is right here, Paris.zip. PhoneGap Build will be looking for a .zip file so this is the published file that we've created from Animate and we've just zipped it up. The next file is App icon.png. And this is nothing more than a simple PNG image that can be created in Fireworks or Photoshop.
It's 114 pixels square. And this will be used as the App's icon on the device and you can add it in PhoneGap Build. The final file, Keystore may strike you as a bit different, and it is important. This file is a signing key created using the Android Software Developer Kit or SDK. And in very simple terms the information located in this file is what gets your App into the various App stores. PhoneGap Build now requires this file and you will need to use the Android SDK on your machine to create your key. Though we are going to be concentrating on an Android application for this excersise.
If you are looking to create iOS Apps, then you will need a sign in key from Apple. To do this, go to the developer area of the apple.com site, sign up as an iOS developer. Provide information about your iOS devices, and you will receive a sign-in key that will allow you to create iOS Apps. When you use your Android sign-in key, in PhoneGap Built, you will need to have the following information handy, and you might just want to write it down.
Because these are all created when you create a key in the SDK. The alias name that is used by the sign-in key. The Certificate Password and the Key Store password. Okay, now that we've got the administration out of the way, let's go build an App. The first step on the process of course, is to log into your Creative Cloud account. And when the account opens, make sure you go to your Apps. And PhoneGap Build is right here in the Edge Tools and Services. Click the Package Apps link. And what this will do is log you in to PhoneGap Build. That's where we are here.
And the first thing you may want to do is to register that sign in key. So you just come over to your login area. Select Edit Account. Click Signing Keys and you'll notice that there are three keys that you can add. iOS for apple devices, Android, which we already have and Blackberry. So we're going to add an android key, so just click on add key, and the title. I'm just going to use my name. You're going to have to add the alias, which you created in the SDK, and now what we're going to do is apply our Keystore file. And it's located right here.
You just select Open, and then submit the key. And you'll notice that it's there and it's locked, and if you want to unlock the key, you're going to need those two passwords. We'll select "Unlock Key". And the certificate password is what was created in the SDK and same thing for the Keystore password.
You submit the key and you see that it's unlocked. Okay, let's go back to Apps. So how do we get our App built? Real simple. You come over to this big old blue button here that says Plus New App, click it. And you're going to select Private because it's just you, you just want to test it. And you really don't need to use a GitHub account, so we're going to upload that Zip file that we created. So you just click that big old button there. There's the Zip file. Click Open and it will upload the file to the PhoneGap Build servers and it's there. Now enable debugging.
If you select this it'll allow you to debug the App right inside PhoneGap and enable hydration is kind of neat. Becase as you change the application anybody that's got it will get the changes automatically. We'll just leave these two deselected. So we're going to name this file, Paris. And the description of the App is going to be a Whimsical Tour of Paris. And once you've added the name of the App and its little description you're ready to build and lo' and behold theres a Ready To Build button, click it.
And PhoneGap will narrowly wear away for a minute or so creating the various Apps. As the Apps are created, they turn blue. That red one for iOS tells me we don't have a sign-in key for it. No big deal, we're more concerned about Android which just popped up. And we'll just wait now for Blackberry. And because we don't have a sign-in key for BlackBerry, it, too, is red. So, this line of icons are all the native Apps. That can be created. Android, Windows, this is Web OS and the Nokia system called Symbian. And what we have just done here is created all these native Apps from the Animate file.
Naturally we're going to get that icon in there so what you do is you come up here, one click, and you'll see that there are settings. So you click the settings. Scroll down to configuration, and there's a big Browse button. You can't miss it Just click Browse, and let's edit that App icon. Click Open. And then click Save, and you'll come back to the main page and there is our icon.
Now what's going on here is all the other applications are picking up the icon. And you'll notice that there's an error for Blackberry because the icon is a little bit too big for the Blackberry system. That's the problem there, and iOS, well, we just don't have the key. And now what we're going to do is apply our key. Well, now that the App is created, there are a couple of ways of getting it into your smart phone for testing. The first is to simply scan the QR code up here if you've got Google goggles Or other QR reader installed on the smart phone. Just basically take a shot of that QR code, and what will happen is the App will be downloaded and installed right onto your device. The other method is to click this big blue Install button. And you will see the installers for Android, WebOS, Symbian, and Windows phone.
As you also learned you are not limited to one platform. The Animate compositions you create can be easily converted to native Apps for the Android, WebOS, iOS, Windows, Blackberry and Symbian platforms. At what seems to be the click of a mouse. And best of all, this opens up a huge number of possibilities, as you can now create prototypes. In Animate, and literally in a few minutes try them out on a variety of smart phones.
- Exploring the project files
- Planning the workflow of your projects
- Optimizing and sizing your images in Fireworks
- Adding Smart Filters and blur to video with Photoshop
- Adding Edge Web Fonts to a composition
- Understanding the responsive features in Edge Animate
- Coding in Edge Animate
- Adding content to Muse