Early bird offer on the ANE eBooks

 

Buy any Easy Native Extensions 2nd Edition package and get our $99 iOS + Android ANE Template completely free before the end of June 2015.

 

I want it!

 

• step-by-step guide to making your iOS extension in under an hour
• library for data conversion between ActionScript and native code
• tutorials
• infographics
• code included

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.

Time

15-20 minutes 

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″?>
<components:View xmlns:fx=”http://ns.adobe.com/mxml/2009″ 
                 xmlns:s=”library://ns.adobe.com/flex/spark” 
                 xmlns:components=”spark.components.*” 
                 title=”Camera Tutorial”>

    <fx:Script>
        <![CDATA[
            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
            }
        ]]>
    </fx:Script>

    <s:Image id=”previewImage” 
             width=”100%” 
             height=”100%” 
             scaleMode=”zoom” 
             horizontalAlign=”center”
             verticalAlign=”middle”/> 

    <s:VGroup bottom=”10″ left=”10″ right=”10″ height=”100%” gap=”10″>

        <s:Spacer height=”100%”/>

        <s:HGroup width=”100%”>

            <s:Button id=”btnStart”
                      width=”100%”
label=”Start”
                      click=”btnStart_clickHandler(event)”
enabled=”true”/>

            <s:Button id=”btnStop”
width=”100%”
label=”Stop”
click=”btnStop_clickHandler(event)”
enabled=”false”/>

        </s:HGroup>

    </s:VGroup>

</components:View>

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.

What’s next?

• Next comes Part 2: Set up the Xcode project. I’ll see you there.
• Here is the table of contents for the tutorial, in case you want to jump ahead.