At the end of this part you will have
- A Flex mobile app with placeholder functionality for showing preview from the native camera. Check this out If you are asking “Why Flex and not pure ActionScript?”
- The means to run and test your ANE as soon as you write its first lines of code – a much better option than tapping away blind.
- Understanding of the ‘grand plan’ behind the ANE.
Wait, we are starting with the app, not the ANE?!
I suspect this might look like we are putting the cart before the horse, but there is method in my madness.
Having the shell of a test app before you write even a line of the ANE code has two main benefits:
- it motivates the ANE interface. Knowing how your library will be used makes a difference to how you make it. In DiaDraw we like to have the Why before the How. A cliché? I can live with that.
- it gives you a way of running and testing the ANE straight away. Your ANE is a library, which you can’t execute unless it’s integrated in an app. Chasing and eliminating a crash in five lines of code at a time is much quicker than dusting a 5000-liner masterpiece for fingerprints in search of the offending bits.
Convinced? Share your opinion in the comments below.
What will the test app do?
In the spirit of starting with Why, let’s define what you’ll want from your test app:
- A way to start the camera
- A way to show live preview from the camera
- A way to stop the camera
Time to roll up your sleeves and begin with…
Step 1: Set up a Flex Mobile project
In Flash Builder select File > New > Flex Mobile Project. Name your project CameraTutorialApp and for now select only Apple iOS as the target platform. When the project is created, it will probably look like this in Flash Builder’s Package Explorer:
Step 2: Add the UI
Open CameraTutorialAppHomePageView.mxml and add a Spark image (<s:Image>) component to start with. Tip: don’t add the image to a layout, let’s have it appear underneath the rest of the UI. Next, add a Start button and a Stop button that will appear at the bottom of the screen. Add click handlers for the buttons. Your CameraTutorialAppHomePageView.mxml should now look like this:
<?xml version=”1.0″ encoding=”utf-8″?>
protected function btnStop_clickHandler( _event : MouseEvent ) : void
// TODO: Add a call to stop the camera
protected function btnStart_clickHandler( event : MouseEvent ) : void
// TODO: Add a call to start the camera
<s:VGroup bottom=”10″ left=”10″ right=”10″ height=”100%” gap=”10″>
If you compile, package and run the app on your iOS device, you should see this:
Step 3: Add a placeholder for creating the camera driver
Add this placeholder function inside <fx:Script> <![CDATA[ … ]]> </fx:Script>.
private function ensureCameraDriver() : void
// TODO: Instantiate the ANE class here
You will add the code in Part 5, which shows you how to start the camera from ActionScript.
Step 4: Add a placeholder for displaying a video frame
Next, add the function where you’ll copy and display the video frame from your camera driver ANE:
private function displayVideoFrame() : void
// 1. Obtain the frame data from the ANE
// 2. Show it in previewImage
If you want to have a sneak peek at how pixel data is passed from AVFoundation to ActionScript, have a look at Part 7: Pass video frames to ActionScript.
Step 5: Build your app and run it on your iPhone/iPad
Now, I trust you know how to do that. If you are using Flash Builder 4.6 this bit is quite a nuisance, including lots of steps and jumping between Flash Builder and iTunes. In our Easy Native Extensions eBook I show you a way to do this with one click and a couple of Ant scripts.
Happy to send you the relevant chapters for free, so you can set your project up for a single-click build + package + install + run – leave a comment below to request it.