Learning Flex 4 | O'Reilly Media

Archive for the ‘ActionScript 3’ Category

Load PDF Content into an AIR Application

with 6 comments

It’s deceptively simple to load a PDF file into an AIR appliction. Basically, point an HTMLLoader at a URLRequest—which can take a local file path—add the HTMLLoader to a UIComponent, then add the UIComponent to a container.

In this case, I added the UIComponent directly to the application, but it stands to reason you could put it in any container.

Flex 4 / AIR Application Code

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication title="PDF Viewer"
      height="600" width="525"

<s:Button label="Load The PDF" click="loadPdf(path)" top="4" left="4"/>

<s:Button label="Close The PDF" click="closePdf()" top="4" right="4"/>

  import mx.core.FlexGlobals;
  import mx.core.UIComponent;

  private var pdfUIC:UIComponent;

  // double forward-slashes necessary for win file paths..
  private var path:String = "C:\\pdf_files\\original\\filename.pdf";

  private function loadPdf(fullPathToPDF:String):void
    var pdfRequest:URLRequest = new URLRequest(fullPathToPDF);
    var pdfHTMLLoader:HTMLLoader = new HTMLLoader();

    // 1) load the PDF into an HTMLLoader (Air-only)
    pdfHTMLLoader.height = FlexGlobals.topLevelApplication.height-70;
    pdfHTMLLoader.width = FlexGlobals.topLevelApplication.width-60;

    // 2) add the HTMLLoader to a UIComponent
    pdfUIC = new UIComponent();
    pdfUIC.name = "pdfPrintPreview";

    // 3) add the UIComponent to the application
    pdfUIC.y = 33;
    pdfUIC.x = (FlexGlobals.topLevelApplication.width - pdfHTMLLoader.width) / 2;

  // destroy the PDF, call garbage collector..
  private function closePdf():void
      // make the object a candidate for garbage collection..
      pdfUIC = null;



Lo! The sample application running in Debug mode..

Load a PDF into Adobe AIR Using Flex 4

Load a PDF into Adobe AIR Using Flex 4

Written by elrobis

2 July 2011 at 6:41 am

Posted in ActionScript 3, AIR, Flex 4

Debugging in FlashDevelop: Stepping Through Code

with 7 comments

This post discusses debugging with breakpoints in FlashDevelop 4 as well as FlashDevelop 3.3.4. My original tutorial covered FlashDevelop 3.3.4 RTM, but it fell out of date with the release of FlashDevelop 4, so I added details to accomodate that release.

Debugging in FlashDevelop 4 (FlashDevelop 4 Beta2)

If you want to debug your ActionScript code in FlashDevelop 4 (FD4) and you’re wondering why your breakpoints won’t catch, you probably just need to impose a simple two-step fix:

1) Install the 32-bit Java Development Kit
2) create a JAVA_HOME environment variable.

I’ll walk you through it, but first, I’m making the following assumptions about your FlashDevelop installation:

— FD4 (I used Beta2 at the time) recognizes your Flex 4 SDK, and you can build/launch Flex 4 applications.
— FlashDevelop properly launches the Flash debug player, and trace statements appear in the output pane.

While experimenting withFlashDevelop 4 Beta2, I was vexed once again by the task of configuring the debugger. At a glance, there several obvious improvements over FD3, but none of my breakpoints were catching, and the steps I used to setup debugging in FD3 were no longer applicable. So I started poking around, and I eventually identified the problem by enabling Verbose Output (FD4 > Tools > Program Settings > FlashDebugger > Verbose Output = True). The Verbose Output setting pushes additional notifications to the FD4 output pane that revealed a sly, behind-the-scenes exception I wasn’t seeing previously. Basically the debugger wanted the JAVA_HOME environment variable, and it couldn’t find it. Googling the exception statement led me here:


To fix the problem, I downloaded JDK 7 for Windows (use the 32-bit, x86 variant, even if you have a 64-bit OS), installed it, then created a new environment variable called JAVA_HOME and set it’s value to the JDK install path (C:\Program Files (x86)\Java\jdk1.7.0).

If you’ve never created an environment variable, do this: open the Windows Start menu (lower-left), right-click on “Computer” and select “Properties”. In the new window, select “Advanced system settings” from the choices at left, and when the System Properties dialog opens, select “Environment Variables” at the bottom. The bottom-half of the Environment Variables dialog is devoted to your System variables.. select “New” and for Variable name use JAVA_HOME. For Variable value use C:\Program Files (x86)\Java\jdk1.7.0 (note that your install path may be different). Now Ok/Save your way out of the dialogs and restart Windows.

I was surprised I needed to restart Windows 7 for a new system variable to go into effect, but it was in fact necessary. [EDIT] While restarting Windows is one way to refresh the environment variables, you may find it smoother to kill and reload the explorer.exe process. For more info, see the comment provided by joebain, appearing below. –Thanks joebain.

When Windows reloads, you should be able to set a breakpoint in FlashDevelop 4 and walk through your code using the F10 key. Conveniently, FD4 provides a ready-set-go “Step Into” shortcut (among others—see the Debug menu) that just works once your system environment is properly tweaked.

Thanks to lutfihilfan (see comments) for informing me that my original tutorial discussing debugging in FlashDevelop 3 fell out of date. This has been my most popular blog post, so hopefully these updates will continue to prove useful for Flex developers wanting to use FlashDevelop. —Thanks lutfihilfan.

Debugging in FlashDevelop 3 (FlashDevelop 3.3.4 RTM)

FlashDevelop 3 [I used 3.3.4 RTM] provides some native support for debugging, but walking through your code line-by-line isn’t exposed in the menu options. Moreover, the options that are exposed do not have default keyboard shortcuts. Here’s how you fix that:

1) Open the Tools Menu and select Program Settings
–> This view gives you access to a variety of customizations

2) Select “FlashDebugger” from the categories on the left
–> This is where you configure special keyboard shortcuts

3) Left-click to the right of “Next Shortcut” to set values
–> I ultimately used Ctrl+L

Ok, step 3 proved to be tedious. First I tried good ol’ F6 so I could stay in-sync with Flash Builder. But that doesn’t work. Neither did Ctrl+F6 (which isn’t convenient anyway). In short, I tried several different key combos before I finally found Ctrl+L. Most e left-hand combos I tried already had default functionality, for instance saving the application or trying to open a new file, etc. You may come up with a better combo than Ctrl+L if you poke around–certainly a left-hand combo is better than a right-hand combo, which requires repositioning the mouse hand a lot while debugging. Basically, I’m tired so I settled.

4) If you don’t already have a project lined up to debug, here’s a simple app you can write just to demonstrate the stepping:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  [Bindable] private var i:int = 0;
  private function onClick():void
   do {
    trace("now i = " + i.toString());
   } while (i <= 31)
 <s:VGroup verticalCenter="0" horizontalCenter="0">
  <s:Button id="button" label="Start Debugging!"
  <s:Label id="label" text="New Count: {i}"/>


 5) With an app ready to go, set a breakpoint by left-clicking in the gutter, just to the left of the line you want to intercept; in this case I’m at the trace() statement inside the do..Loop at line #14.

In my example, you have to click the Button in the app to trigger the function with the breakpoint, but assuming your app compiled and you launched the Debug version, it should hit your breakpoint as expected. At this point, do your thing and walk through the code using Ctrl+L.

Cheers, Elijah

Written by elrobis

19 June 2011 at 12:07 am

Primer on Byte-Level Development in AS3

leave a comment »


Lee Brimelow posted a fantastic primer on byte-level development using ActionScript 3.  This tutorial is a 30-minute screencast where Lee demonstrates how to read a format spec and develop a solution for handling an unsupported file format with ActionScript 3.  This is a fantastic tutorial and well worth the time of anyone interested in byte-level programming in ActionScript.

Written by elrobis

11 December 2010 at 10:27 am