blackcj.com

Box2D with GPU Acceleration for Android

Chris Black — Tue, 10 Aug 2010 02:29:23 +0000

By utilizing the GPU and cacheAsBitmapMatrix this Box2D demo went from a sluggish 18 - 20 fps to a consistent 24 fps! Check out the demo in the video below:

Turning on GPU Acceleration within AIR for Android:
Open the application descriptor XML file associated with your project. Edit the render mode to include gpu instead of auto. The hardware acceleration drop down within the publish settings does not currently modify this property, you need to set it manually.

Using cacheAsBitmapMatrix:

PLAIN TEXT

Actionscript:

var matrix:Matrix = new Matrix(); // creates an identity matrix
mySprite.cacheAsBitmapMatrix = matrix;
mySprite.cacheAsBitmap = true;

Using this code actually flipped my asset vertically on the stage. To correct this I modified the asset vertically within Flash. Using the cacheAsBitmapMatrix significantly increased the performance of the application.

Summary:
Using Box2D, the GPU and cacheAsBitmapMatrix will allow developers to create high performing games with realistic physics. These applications will soon be distributable across multiple mobile platforms. What are you going to create?

GPU Bug on AIR for Android

Chris Black — Wed, 04 Aug 2010 18:09:52 +0000

Correction: Argh. This was a problem in two of my projects, including one I just created but now it's working on my third project. This may or may not be an issue depending on your setup. I'm going to try and isolate the problem and provide an update. End correction

Not noticing improvement when selecting GPU? It's because there is a bug in the current pre-release packager for AIR on the Android. Luckily there is a quick work around.

The instructions are clear: add gpu to your descriptor file. Unfortunately Flash re-writes this file EVERY time you open the Air for Android settings window! Selecting the drop down in the Publish Settings also does nothing. So how can we enable hardware acceleration?

Create your project. Open the Android Settings to auto generate the descriptor file. Close the Android Settings window. Open your descriptor file. Add the code above. Save and close the descriptor file. Make that file READ ONLY. Open the Android Settings window again and select publish.

I went from an idle of 30 fps up to 120 fps and active usage from 22 fps to 30 fps. AMAZING difference when you can actually select to use it!

Touchable Framework for Adobe AIR – Sneak Peak!

Chris Black — Sat, 31 Jul 2010 03:42:09 +0000

Let's face it. The gesture API for Adobe AIR is mediocre at best. Here's a look at something better, a framework that will allow you to create regions for custom gestures. Controlling where you want to pick up touch events. It will utilize multi-touch, gesture and accelerometer controls all in one package. Control your games and applications in a snap.

The touchable framework can be used in combination with applications that use keyboard controls which makes it compatible with the multi-screen initiative. Stay tuned for more demos!

Box2D on the Nexus One with Adobe AIR

Chris Black — Tue, 13 Jul 2010 23:23:58 +0000

This native application uses the accelerometer to determine the direction of gravity for the Box2D physics engine. It performs quite well given the number of computations and could probably be optimized considerably. Check out the video for a demo on the phone!

Porting the code was the easy part. Configuring Adobe Flash and setting up the Android SDK was a bit more work. Check out Lee Brimelow's awesome tutorial on http://www.gotoandlearn.com/. If you run into problems finding your device with the adb devices command than check out my previous post. We are going to see some pretty exciting stuff around the corner with Adobe AIR for mobile devices!

Full source code can be found here. You'll need to run through Lee Brimelow's tutorial to configure Flash before you get started.

No Device Listed with ‘adb devices’ Command

Chris Black — Tue, 13 Jul 2010 17:49:53 +0000

Just received my Nexus One and got past my first hurdle in Flash development. Followed Lee Brimelow's tutorial at http://www.gotoandlearn.com/ but did not see my device listed when running the adb devices command! After some digging, I found that there is a checkbox under Settings -> Applications -> Development to turn on debug mode. After checking that box, Windows 7 recognized the device and successfully installed 3 of the 4 necessary drivers. From there I had to go into my devices under windows, select update driver and manually choose the location of the usb driver within the Android SDK download. That could not have been more confusing / difficult just to get the computer to recognize the device.

In a society where the phone can arrive at my door step with free shipping in less than 25 hours we still can't make it easy for a computer to recognize a damn phone. Anybody else have this much trouble? More, hopefully uplifting, posts to come based on Flash application development for the Nexus One!

Management Techniques Every Developer Should Know

Chris Black — Thu, 08 Jul 2010 04:45:54 +0000

Work with, rather than against, your project manager. Have you ever been asked to estimate something? Or the dreaded, what percent complete are we? Let me share some of the quantitative techniques I've used to lead successful projects.

Problem:
Developers are asked to complete 'project management' tasks on a daily basis. Many do not have the background to accurately complete the tasks, leading to problems down the road. Are you familiar with ROM estimates? Earned Value Analysis? If not, your walking down a slippery slop.

Solution:
Follow these basic techniques to add confidence to your estimates. Use quantitative measurements used by the best project managers to answer the dreaded percent complete question. Understand what your project managers are attempting to track in order to accurately transfer knowledge on key project elements.

Estimating

Let's start with estimates. I'm making the assumption that you, or someone else has, already done the business analysis for the project. You've got a rough idea of what the client wants. Maybe a quick phone call or piece of paper on your desk. Now, in the middle of your already busy day, you need to come up with a number. A number that may come back to bite you in the ass. So what do you do? Well, you've got three distinct types of estimating: ROM estimates, intermediate estimates and definitive estimates.

ROM Estimates:
For when you need to qualify a client. They are + or - 50% of the actual number. Mostly just to filter out the clients that are trying to waste your time. On small projects make these quick. For large projects, you really should make the client pay. Come up with a quick list of items required for the project. For example, a video upload / player:

Controls
Authentication
Backend processing
Video playback
Pretty Stuff
QA
Project management

Next, identify each as small, medium and large. Controls would be small, authentication medium, backend processing and video playback large and pretty stuff medium. Assign a number to small, medium and large. Let's say 4 hours, 8 hours and 12 hours. These numbers are gut feelings and should consider the type of client. Are they an agency that want's everything perfect? Or a small company that wants something to work? After that you assign the hours to the tasks and send it back to your project manager. Don't over complicate a ROM estimate. It's just a ballpark. Make sure the client knows this! You would be surprised at how accurate these quick estimates are compared to those that people spend days on.

How do I know my ROM estimate is within the ballpark of + or - 50%? I've got a trick for that. Ask your co-worker to re-estimate, right? Wrong! Developer time is expensive. You can't re-estimate everything. If you feel confident with another developers estimates just show them your stuff. If they like it than your good to go. Don't know if this developer is even paying attention? Change your estimate by greater than + or - 50% and see if they catch it. Quick and easy way to qualify a fellow developer without them knowing. If they catch it than they are good for future use, if not than go to someone else. Confront them about it at your own risk...

Intermediate Estimates:
The client chose you, for some reason or another. Probably because the sales person sweet talked them into it and dropped your estimate Now what? Take that ROM and turn it into some tasks? NO! Worst idea ever. You just took something someone spent so little time on that it's worth + or - 50%. Turning that into an estimate is like walking up to a hungry bear. You just don't do it.

OK, so what's next? Re-estimating! Seriously. You need to talk with the client for an hour, I know it sucks. Make sure you understand what's going on. Hopefully you have something that resembles a design at this point. If not, I feel for you. Create a new list of defined tasks for the first 20 - 40% of the work that are all less than 20 hours. Ballpark the rest, intermediate estimates are + or - 30%. Why not estimate it all in detail? Because projects change and the last 60 - 80% will be different than you think. Based on your metrics from the first 20 - 40% you can accurately estimate the rest. Metrics??? WTF are those? You'll have to wait till the next section. Now you have a list that looks like this:

Seek bar - 2 hrs
Play / pause buttons - 2 hrs
Volume control - 2 hrs
Database creation - 1 hr
GUI for login - 2 hrs
API for authentication - 2 hrs
PHP configuration - 2 hrs
Video processing - 8 hrs
Video playback -12 hrs
Fade on playback - 2 hrs
Easing for controls - 2 hrs
QA - 15% of total
Project management - 10 to 20% of total based on your metrics

Now you have tasks. We are going to ignore the definitive estimates because they generally aren't worth the time to create. Of course, your project manager says no, it won't take 20% of the budget for PM time. You than, very nicely, pull out previous project metrics that show otherwise. Show them data in their own language that shows PM time DOES take up that percentage based on statistical data. Don't be mean about it. Just bring it up. Then, if the project goes over due to the drop in PM time cause they didn't believe you, than you have something to back it up with. I can't tell you the number of times I've been on a project that had developers working UNDER estimates but PM time (meetings and status reports) took up way too much time causing the project to go OVER budget.

Whew. Done with the basics on estimating. For more details you'll have to wait for my book

Project Tracking

If you don't know what Earned Value Analysis (EVA) is, your leading unsuccessful projects. How do we know where the project is going wrong? And how do we get it back on track? Let me propose a situation for you. A plan flying from Minneapolis to Mexico. It's estimated to take 4 hours. After two hours your approximately half way through your fuel. Are you on track? Not enough information! What to you mean? Well, your assuming the plan is getting the estimated MPG. What if a strong headwind has set you back? Thinking about projects in two dimensions will lead to failure. Are you getting the proposed value from your estimates? Assuming you created a semi-decent task list you'll end up with this:

Seek bar - 2 hrs estimated (3 hours actual)
Play / pause buttons - 2 hrs estimated (4 hours actual)
Volume control - 2 hrs estimated (3 hours actual)
Database creation - 1 hr estimated
GUI for login - 2 hrs estimated
API for authentication - 2 hrs estimated
PHP configuration - 2 hrs estimated
Video processing - 8 hrs estimated
Video playback -12 hrs estimated
Fade on playback - 2 hrs estimated
Easing for controls - 2 hrs estimated
QA - 6 estimated
Project management - 8 estimated ( 6 actual)

Only 16 hours into the project an you already know it's off track. We are hitting our development estimates at 166%. At this rate we be way over budget. These numbers are incredibly accurate at forecasting the future. Unless the estimator really messed up, this project is way off track. What do we do with this data? Tell the client NOW! Let them cut a feature, increase the budget or simplify designs before you've capped the project budget. Trust me, they will appreciate it. I've never known a client to get angry after 5% of the work is done. If you wait till 100% of the budget is spent your SOL. Earned Value Analysis is the single most important project metric to track and it can be done with minimal effort, if tasks are created accurately. There are an endless number of combination's for this metric, for this example we are covering one. Again, you'll find more in my book.

That's it right? Let's do one more quicky before we leave.

Lessons Learned

It can be painful to look back at projects, especially un-successful ones. This MUST be done in order to improve the success of future projects. A few hours of review can save hundreds of wasted hours in the future. Correctly tracked EVA can show you where projects were under estimated. This article is for developers so I'll rip into PM's one last time. After tracking your time in meetings, calls, and reports if your PM time exceeds your estimates than there are a few options. Hang your project manager... no, wait this article is about working with them. Scratch that. Instead find opportunities to cut down on hours. Did the whole development team really need to sit in on that 2 hour call? Does the client really need a report every Friday? If so than you need to bump up your estimates! Really though, just knowing whats been over estimated will save time in the future. Joe keeps under (or over) estimating video players. Well maybe somebody should tell Joe? Sounds simple but without tracking how will he know? Are you tracking the results of your estimates?

Summary

Knowing the basics will help you. Unfortunately this is only scratching the surface. I keep hinting at my book in this article. It will contain some of the detail that I was unable to include in this post. There just isn't enough room in a blog post. For an even more comprehensive list of information please Google these topics. This is nothing new. Just things I've found to be new to most interactive project managers, designers and developers. Spread the word.

Resources:
Estimating Article (Pretty self explanatory.)

Earned Value Analysis on Wikipedia (I know, it looks scary. Trust me. If you can code, you can figure it out.)

Chris Black worked as a part of the project management office at Travelers Insurance. He worked to create a comprehensive list of best practices for project managers. Chris than went on to work as a developer and later as a senior developer at Sierra Bravo (a.k.a. the Nerdery). At the Nerdery he lead a number of successful projects using the metrics outlined above. Chris will be including these topics along with more technical items in his book which will be released in the second half of 2010.

Download MovieClips as Images with a Single Click

Chris Black — Tue, 06 Jul 2010 19:31:35 +0000

UPDATE: Flash Player 10 has a save method that can be used instead of calling PHP. The version in this post will work with both version 9 and 10. You can find an example of the updated method here.

Problem:
The added security in Flash player 10 requires user interaction prior to download. This can be a pain if your server processes the image and returns a URL forcing the user to click AGAIN to download it. Who wants to click twice to download an image?

Solution:
Cut out the middle man. Don't save the image onto the server, just use PHP to post it back to Flash. In one line of PHP code you can seamlessly download the image from Flash and with only one click from the user! No white windows flashing, no files written to your server and no headaches for the user.

Try it out!

Example on downloading a MovieClip from Flash as an image to your desktop.

(draw a picture above than click on the download link!)

Full source code can be found here.

The ActionScript side of things is less than 50 lines of code:

PLAIN TEXT

Actionscript:

package com.cb.utils.image
{
import com.adobe.images.JPGEncoder;
import com.hurlant.util.Base64;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;
import flash.utils.ByteArray;
import mx.utils.Base64Encoder;
public class ImageDownloader
{
private var DOWNLOAD_URL:String = "http://www.blackcj.com/blog/wp-content/swfs/RoundTripImaging/php/process.php";
public function ImageDownloader(){}
public function download(canvas:Sprite):void
{
var bitmapData:BitmapData = new BitmapData(canvas.width, canvas.height);
bitmapData.draw(canvas);
var byteArray:ByteArray;
var jpgEncoder:JPGEncoder = new JPGEncoder(85);
byteArray = jpgEncoder.encode(bitmapData);
var b64e:Base64Encoder = new Base64Encoder();
var byteArrayAsString:String = Base64.encodeByteArray(byteArray);
// create URL request
var request:URLRequest = new URLRequest(DOWNLOAD_URL);
// send data via POST method
request.method = URLRequestMethod.POST;
// set data to send
var variables:URLVariables = new URLVariables();
variables.image = byteArrayAsString;
request.data = variables;
var file:FileReference = new FileReference();
file.download(request, 'image.jpg');
}
}
}

And the PHP is only 1 line!

PLAIN TEXT

PHP:

echo base64_decode($_POST["image"]);
?>

Did I mention the final file size is less than 15KB? Oh, and if you really want a copy of the image on your server, just add some code to the PHP. I'll be creating another blog post soon on round trip imaging that will include a number of operations together into one utility class.

Happy image creation!

Resources:
Saving Images From Flash

Saving Flash Graphics

Send Display Objects to PHP as Images

Chris Black — Mon, 05 Jul 2010 18:12:57 +0000

Submit your MovieClips to PHP as a multipart form using the UploadPostHelper class. In this example we'll send a user generated image to TwitPic as a JPEG.

Problem:
Long story short, PHP requires specific headers when submitting an uploaded file. These headers are automatically added when you upload a file from the desktop. What about a user generated file?

Solution:
The UploadPostHelper class automatically adds the required form data to the URLRequest which allows PHP to correctly read the uploaded file as an image. This method can be used to post a user generated image (Sprite, MovieClip... any DisplayObject) to TwitPic.

PLAIN TEXT

Actionscript:

private var UPLOAD_URL:String = "http://twitpic.com/api/uploadAndPost";
private var _file:FileReference;
private var _loader:URLLoader;
private var _jpgEncoder:JPGEncoder = new JPGEncoder(85);
public function uploadSprite(canvas:Sprite):void
{
var jpgSource:BitmapData = new BitmapData(canvas.width, canvas.height);
jpgSource.draw(canvas);
var urlVars:URLVariables = new URLVariables();
urlVars.username = TWITTER_USERNAME;
urlVars.password = TWITTER_PASSWORD;
var urlRequest:URLRequest = new URLRequest();
urlRequest.url = UPLOAD_URL;
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', jpgStream, urlVars );
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
// create the image loader & send the image to the server;
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
urlLoader.addEventListener(Event.COMPLETE, uploadCompleteDataHandler);
urlLoader.load( urlRequest );
}

Source files can be found here.

Important:
One adjustment does need to be to the UploadPostHelper to be compatible with TwitPic. The upload name for the image must be changed from "Filedata" to "media" for the upload to work correctly.

Resources:
http://labs.findsubstance.com/2008/04/03/as3-upload-encode-images/
http://entrance4.net/labs/?p=51

ASDocs with Flash Develop

Chris Black — Mon, 28 Jun 2010 16:49:59 +0000

Flash Develop is a free alternative to Flash Builder. While it may not include all of the feature of Flash Builder, it does have a nifty ASDocs generator. Follow these steps to configure the application and you'll be good to go.

What are ASDocs?
Generated API documentation for your code. A great example is the Adobe Livedocs API. The ASDoc generator will create documentation pages based on your variables, functions and comments. Check out the specs for more info.

What is Flash Develop?
A free, light weight, IDE for developing in Flex and ActionScript. I recently installed it on my Dell mini when Flash Builder wouldn't let me install to a thumb drive. It doesn't have a debugger but the most recent version contains a profiler! More information about the profiler in a future post.

Why create ASDocs?
To provide documentation to anybody else that may use your code. Especially useful for re-usable components or libraries. Other people can use your code without cursing your name or asking for help every 10 minutes.

Creating ASDocs

This post assumes that you've already configured Flash Develop and pointed it to the Flex SDK.

Within Flash Develop, click on Tools - Flash Tools - Documentation Generator.

A screen will pop up that looks like this:

(Click to enlarge)

Right away you'll notice that AS2 is selected as the default compiler. If you're still coding AS2 by choice, than you really should seek help. Let's change that to AS3. Add a page title, generally the same as your project name and an output path, usually parallel to your src directory. Click on help in the top right corner for details on additional settings.

Now your project page should look something like this:

(Click to enlarge)

Next, we will want to point our application to the AS3 livedocs generator. Silly, I know, especially since the application already knows where the SDK is. We still need to do it. Click on the settings tab and add the path to your bin directory within the Flex SDK.

Make sure to click 'Save Settings'!

(Click to enlarge)

You're ready to generate, keep in mind this could take a couple minutes depending on the size of your project. Make sure to click save project and save it to your project folder. If you close the window without saving, everything in the project tab will be lost!

Check out the end result by clicking here.

Additional Comments
On my Dell mini the compiler threw an error about a missing msvcr71.dll file. To resolve this you'll need to copy the msvcr71.dll file from your Java bin folder to the windows/system32 folder. After that everything worked great.

Happy ASDoc generating!

Animating Feedback Widget

Chris Black — Tue, 22 Jun 2010 21:21:10 +0000

Using two of my existing blog posts I've finally put that little animated widget to use! Constructive feedback only please.

Assuming you are using a flash enabled device, click on the little feedback tab to the left. The widget could definitely use a bit of design work, but hey, I don't claim to be a great designer. It is, however, a nice example of how simple demos can be used to quickly create functional projects. The feedback widget was creating using a combination of the Expanding Widget post and the Server Side Captcha post. I'll improve the design over time but right now the big white box is for your comment and the little white box is for your captcha response. The captcha uses an advanced space time dimension algorithm so good luck hacking the form

Enjoy!