ActionScript 3.0

Updating Flash Professional CS6 to support 11.4

One of the improvements to Flash Professional CS6 is the ability to manage AIR SDKs. But unfortunately you still have to manually add support for the latest version of Flash Player. Since a public beta of Flash Player 11.4 was just release, this short article might be useful.

Download Flash Player for Desktops

You can get the Flash Player 11.4 Beta from http://labs.adobe.com/downloads/flashplayer11-4.html. Download the version for your operating system and install the plug in. Although you will be able to target the new player, you will not be able to test your movie by using the Run Movie command.

Download PlayerGlobal.swc

This is file can also be found on http://labs.adobe.com/downloads/flashplayer11-4.html. Once this file has downloaded, rename the file to simply playerglobal.swc. Navigate to “/Applications/Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/” and create a new folder named “FP11.4”. Place the playerglobal.swc in this folder.

Player Folder (before)

Updating Player Profiles

Player profiles are xml files that define the attributes of each Flash Player’s capabilities. They are located in “/Applications/Adobe Flash CS5.5/Common/Configuration/Players/”.

Players xml files (before)

Duplicate the last FlashPlayer11_X.xml file you have, and rename it to FlashPlayer11_4.xml. Open this file in you favorite text editor and make the following three changes:

<player id=”FlashPlayer11.3″ version=”16″ asversion=”3″>
becomes
<player id=”FlashPlayer11.4” version=”17” asversion=”3″>

<name>Flash Player 11.3</name>
becomes
<name>Flash Player 11.4</name>

<playerDefinitionPath as2=”$(UserConfig)/Classes/FP10;$(UserConfig)/Classes/FP9;$(UserConfig)/Classes/FP8;$(UserConfig)/Classes/FP7″ as3=”$(AppConfig)/ActionScript 3.0/FP11.3/playerglobal.swc” />
becomes
<playerDefinitionPath as2=”$(UserConfig)/Classes/FP10;$(UserConfig)/Classes/FP9;$(UserConfig)/Classes/FP8;$(UserConfig)/Classes/FP7″ as3=”$(AppConfig)/ActionScript 3.0/FP11.4/playerglobal.swc” />

Save this file, and launch Flash Professional. You should see FlashPlayer 11.4 as an option in the Publish Setting dialog.

Publish Setting Dialog

Now go build some awesome content with the new features in FlashPlayer 11.4

Note: You test your project in Flash use command + F12 in order to publish to browser (Where you should have the Flash Player 11.4 Beta plugin installed by now).

Advertisement

Things on a real device will tell you…

While at the recent 360|Flex conference, some users of the my conference app on the Samsung Galaxy Nexus S were having display issues. There was something causing the width variable to be set incorrectly, and thus all the alignment code to be wrong.

This was puzzling, I had checked the application on my Xoom, and the alignment code worked fine.  So, during lunch I borrowed a device and took a look at what was going on. The application is written pure ActionScript (no Flex Mobile), and the stage is set to a standard 480 by 800 pixels.

During the init process I set theAppWidth = this.stage.stageWidth and theAppHeight = this.stage.stageHeight. This had returned the device width and height on the devices I had tested on. But on the Nexus S the code was returning 480 by 800, and not 720 by 1184. Hum….

So, I changed the code to reference this.stage.fullScreenWidth and this.stage.fullScreenHeight. This did return the correct values, and thus alignment code was working again.

The moral of this story is that you have to spend time (and money) to have a collection of real devices to test on.

Thanks again to Doug Arthur for letting borrow his device to resolve this.

Adobe AIR 3.2 & Flash Player 11.2 Release Candidates!

Adobe just posted the release candidates for Adobe AIR and Flash Player 11.2 on labs.adobe.com. The big news is that finally this build of Adobe AIR introduces the Stage3D API to iOS and Android devices, enabling full hardware accelerated 2D and 3D graphics for mobile apps. So go brush up on your Starling framework and get ready to build some awesome games!

My FlashTent Presentation Now Online

My presentation on Developing AIR for Mobile with Flash Professional CS5.5, given at the recent FlashTent event, is now available for viewing. If you are just getting into mobile development, this talk will give you a nice overview of developing with AIR for mobile. I also spent some time talking about some general mobile development guidelines. Here is the talk description:

New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for mobile application from design to deployment.

Topics:

  • Desktop vs. Mobile
  • Ergonomics
  • AIR
  • AIR Application setup Android/iOS
  • AIR Code Samples
  • New Features
  • Hitting walls aka limitations
  • Publishing iOS/Android
  • Best practices

I hope find this presentation useful, if you are interested in learning more about mobile development, I will be speaking on Choosing the Right Mobile Development Platform at this year’s 360 Flex Conference.

What’s New in Adobe AIR 3 & Flash Player 11 free ebooks now available

I was honored to be one of the technical reviewers for these publications. Go grab a copy and get up to speed on the new features in the Flash Player and Adobe AIR.

What's New in Flash Player 11 Quickstart Guide for Browser-Based ExperiencesWhat’s New in Flash Player 11
By Joseph Labrecque

This free ebook will present you with a full rundown of all the new features in the upcoming Flash Player 11 runtime. Along with each feature, if applicable, will be a demonstration of how to employ the new feature. There’s also be a short introduction to Flash Player and a chapter dedicated to providing you with additional resources.

What's New in Adobe AIR 3What’s New in Adobe AIR 3
By Joseph Labrecque

This free ebook will present you with a full rundown of all the new features in the upcoming AIR 3.0 runtime. Along with each feature, if applicable, will be a demonstration of how to employ the new feature. There’s also be a short introduction to AIR and a chapter dedicated to providing you with additional resources.

Understanding StageWebView and the viewport tag

My current solution for displaying dynamic interactive maps in my Android applications is to display a HTML-based Google Map within an instance of StageWebView. For the most part this has worked well, except for the long start up process. This often gives the appearance of the application being frozen. So, I sought a solution to try to improve the user experience.

The first step was to find a way to hide the StageWebView until it had finished its initialization and contacted the server. Since this component is of the ‘Stage’ type, this means that the normal display manipulation will not work. Instead, I created the viewport of the StageWebView offscreen. Now, I just need to know when it has contacted the server and the first page has been loaded. For this, you can listen for the Location Changed event. (Note, there appears to be a bug in AIR for Android 3.0, where this event is only fired upon the first URL that is accessed. This is important later).

Once the page has been loaded into our StageWebView, I reset the viewport to be on-screen. Since I have a loading spinner animating on the stage, this delay is now neatly masked.

Loading Indicator

Loading spinner

However, my screen still shows a white StageWebView. Then the map tiles are displayed, followed by the map controls. So how can I improve this portion of the process?

StageWebView initializing

The white StageWebView

In exploring the Google Map forums, I came across the notion of first serving a static Google Map, then waiting for the “tiles_loaded” event to be fired to swap the static map with the dynamic one. This was as simple as adding an <img> tag for the static map, and an event listener. In my web browser, this solution worked flawlessly.

Since there is a Location_Changing event that StageWebView is supposed to fire when the URL is changing, I thought I could tie into this by changing the page’s URL with an # attribute. But I then learned that this event does not currently properly fire on Android devices. I had planned to keep the StageWebView off-screen until the dynamic version of the map was ready before changing its viewport location.

Instead, I was forced to display the static map, then allow the loading of tiles and the map controls to occur visibly to the user. I soon ran into another problem. I had defined the width of the static map to be 480 pixels wide (I would have custom versions of the html page per device width), but once the html file was loaded into the StageWebView, I was able to scroll the image horizontally. What was going on!? Everything was working fine in my desktop browsers.

Map with scroll bars

Note the scroll bars

So, I began looking into the various attributes of the viewport meta tag, to see if there was something I could do to adjust the viewport. If you are not familiar with this tag, the Android documentation has a great reference on it. If you read through their documentation, you will learn that web pages on high-density devices (which is required to run AIR for Android) are automatically scaled by 150%. Eureka! Now I had confirmed why the static image became scrollable, now to find the solution. Reading further, there is another interesting attribute that can be set: target-densitydpi. To quote the documentation, “You can change the target screen density for your web page using the target-densitydpi viewport property.” This property has five values; device-dpi, high-dpi, medium-dpi, low-dpi, or a value. The one of interest for us is the device-dpi. If the target-densitydpi is set to device-dpi, the page will use the device’s native dpi as the target dpi and default scaling never occurs. And with this one addition to our viewport tag, our html file will now renders correctly on-device. Here is a sample apk and the source files.

Adding Keyboard Navigation to a Flash Catalyst project

Sometimes you might want to use the keyboard to control your Flash Catalyst application, but keyboard input is not directly supported. But with just a little bit of ActionScript code, you can create a prototype for navigating via your keyboard.

The first step is to create your Flash Catalyst application like you normally would. For this example, I have built a simple image viewer. Each image fades in, and a caption then fades over the image. Each adjacent state has a set of transitions applied to them. Don’t forget to have a transition to and from the first and final states.

Now, let’s import the FC project into Flash Builder. Remember to use Project > Flash Catalyst > Import menu and not the File >Open menu. This method preserves some of the metadata that Flash Catalyst uses for round-trip editing. In the Project Explorer, locate the Main.mxml file and open it.

Depending on if you have added any interactions, you might already have atag near the top of your file. If not, you will need to add it to your file. The first thing we need to create within this tag is a list of all the states that are used in the application. We are going to store these values in an array named theSlides.

private var theSlides:Array = ["State1","State2","State3","State4","State5"];

If you have forgotten what you named them, look for thetag in the Main.mxml file and you will see them listed.

We need to create a variable that will store the index value of our current state. Like I have written before, programmers love to start counting from zero, so the first state is actually 0 and 1. Since the number of states is not going to change, we can also store this value as well. It will be used to determine when the state is reached.

private var theCurrentSlide:Number = 0;
private var theNumOfSlides:Number = 5;

With our variables set up, we can now turn our attention to adding the code that will listen for our key press event. This is a three-step process. Your FC application might have an application_creationCompleteHandler function. If not, we need to add an attribute to thetag and write the function. For thetag, you will add this new attribute at the end.

To add this function, return to thetag, and after the variables that we defined, add the following:

protected function application_creationCompleteHandler():void
{
}

In this function, we will define the initial state of our application

currentState='State1';

Next, we need to add our basic mouseEvent listener. Wait, I thought we were going to be using the keyboard and not the mouse! The funny thing is for this to work correctly, we need to give focus to application, and not the browser. Hence the need for this bit of code:

this.addEventListener(MouseEvent.CLICK, clickHandler);

On the next line we can add our event listener for our key events

this.addEventListener(KeyboardEvent.KEY_DOWN, slideChange);

If you see little yellow triangles in your editor next to these lines, don’t fret. These are just warnings from Flash Builder saying that we have not written the functions that our event listeners will call when triggered. So, let’s fix these problems.

First, we can add the function to handle the mouse click event, and give our application the focus it deserves.

private function clickHandler(event:MouseEvent):void
{
    stage.focus = this;
}

Now let’s add the final piece of the puzzle, the keyboard event handler. This function is a bit more complex, so hang in there as we walk through it. The function looks similar to our other functions we have added:

private function slideChange(evt:KeyboardEvent):void
{
}
You might notice that this function accepts a keyboard event as a parameter. One of the items within this keyboard event is the numeric code that identifies which key the user pressed. The left arrow key’s code is 37, the right arrow key’s code is 39, the up arrow key’s code is 38, and the down arrow key’s code is 40. So with an if-else statement we can act properly upon each key press. Here is the framework for this:
if (evt.keyCode == 39) {
} else if (evt.keyCode == 37) {
} else if (evt.keyCode == 38) {
} else if (evt.keyCode == 40) {
}

Now that we have a framework, we need to apply the logic to change our application to the proper state. To advance to the next state, we need to increment our counter by one. Then we need to check if we have exceeded the total number of states (or slides). If we have exceeded, we then need to reset the counter back to zero. Once our counter has a valid value, we can look up the name of the next state, and tell our application to change to it. Here is the code for this:

++theCurrentSlide;
if (theCurrentSlide == theNumOfSlides) {
   theCurrentSlide = 0;
}
currentState = theSlides[theCurrentSlide];

If we want to view the previous state, the process is almost identical to the code above, we just need to subtract 1 from the counter, then check that the value is not less than 0. If it is, set it to the last index value. (Remember, programmers start counting from 0, so the last index value is actually 1 less than the total number of states).

--theCurrentSlide;
if (theCurrentSlide == -1) {
   theCurrentSlide = theNumOfSlides - 1;
}
 currentState = theSlides[theCurrentSlide];

For the up key, I have the application return to the first state. Conversely, the down arrow sets the application to the last state. I did not create transitions for these state changes, so the visuals will just pop in.

And that is it! It may seem like a lot when you write it all down, but in reality it is just a few lines of ActionScript. Here is FXP of the project, and here is the example working.

Review: Flash Development for Android Cookbook by Joseph Labrecque

The world of mobile development is a new and exciting world for many Flash and Flex programmers.  They are learning about a whole new development platform, that utilizes a variety of technologies like accelerometers, GPS, cameras, microphones, and touch screens, just to name a few. Joseph Labrecque, employed by the University of Denver as senior interactive software engineer specializing in the Adobe Flash Platform, has written a clear and concise collection of recipes on these and other mobile development specific topics.

This book is not an introduction to development on the Flash Platform. Some familiarity with ActionScript is required. Nor is this book designed to have you work through an entire project from cover to cover (like the Classroom in the Book series). It is intended more as a reference guide.

For example, the chapter on using geolocation will walk you through the various class imports that are required, as well as the methods and functions that can be accessed, but it does not place it within context of an actual application. The advantage is the reader can see just the relevant code for using geolocation in their application, without have to create a ‘real-world’ demo, which often confuses the reader in the end.

Joseph does an excellent job in showing each topic for a variety of development environments. If you develop in Flash Professional, Flash Builder, or FDT, you will find this book useful.

“Flash Development fo rAndroid Cookbook” is one of my top recommended resources to anyone starting to develop in the mobile space.

Native JSON support in AIR 3

One the most exciting things in the latest releases of the Flash runtimes, is the ability to natively work with JSON. Now, I know that the Stage3D feature might be a bit more visually compelling, but any Flash application developer usually has to work with JSON data. If you are not familiar with what JSON is, it stands for Javascript Object Notation, and is quickly becoming the standard method of data transfer with modern web services (like Twitter).

Here is an example of an JSON data file:

{
   "firstName": "Chris",
   "lastName": "Griffith",
   "education":
   {
      "elementary": "Franklin",
      "jrhighSchool": "Curran",
      "highSchool": "Bakersfield High",
      "college": "University of California, Santa Barbara"
   }
 }

One of the attractions of using JSON as your data type is it’s readability of the data. So having native support, and hence native performance in working with the data, is a great benefit to developers.

JSON.parse()

This is the method that will ingest the JSON data and create the native data structure. Here is a brief code snippet that demonstrates loading a JSOn file and tracing out the contents.

var json:URLLoader;
 var parsedJSONData:Object;
function loadMyJSONData():void {
   json = new URLLoader();
   json.addEventListener(Event.COMPLETE, parseJSON);
   json.load(new URLRequest("data.json"));
   trace("Loading JSON file...");
}
function parseJSON(evt:Event):void {
   trace("JSON file loaded successfully!");
   trace("Parsing JSON...");
   trace("RESULTS:"); 
   parsedJSONData = JSON.parse(json.data);
   trace("firstName: " + parsedJSONData.firstName);
   trace("lastName: " + parsedJSONData.lastName);
   trace("education.elementary: " + parsedJSONData.education.elementary);
   trace("education.jrhighSchool: " + parsedJSONData.education.jrhighSchool);
   trace("education.highSchool: " + parsedJSONData.education.highSchool);
   trace("education.college: " + parsedJSONData.education.college);
 }

So, you can see that with one line of ActionScript, you have native JSON parsing.

To convert your data into native JSON, it is as simple as calling JSON.stringify(). This method takes in three parameters. The first parameter is the data that you want to convert. There are restrictions to the types of data that can be converted into JSON data. These are Arrays,Strings, Numbers, Booleans, and the null value. The second parameter is an optional filter function or array. You can use this remove elements that are not supported in the JSON format. The final parameter sets the level of spaces that is added before each data pair (thus making it readable).

Here is a simple example:

var myDataObject:Object = new Object();
myDataObject.firstName = "Chris";
myDataObject.lastName = "Griffith";
myDataObject.hasCollegeDegree = true;
var newJSON:Object = JSON.stringify(myDataObject, null, 4);

As someone who often consumes lots of JSON data into my applications, these features are one of these little ‘wins’ that make the next version of the Flash Platform an attractive solution for my development.

Farewell Google Maps API for Flash

Well, the Google Maps API for Flash has been officially deprecated as of September 2, 2011. Bummer. I had hoped for an update to deal with better touch support and start up times. Although there are some alternatives out there (ESRI and Mapquest), so you still have solutions. FYI: Yahoo also recently discontinued their mapping solution for ActionScript as well.

I guess for desktop solutions, I will be mixing in HTML elements into my apps. For mobile, I will still use the StageWebView solution(until we get a Native Extension that will access the device’s native map solution). Update: Lee Brimelow from Adobe just posted a video demonstrating a Mapping Native Extension.