Xray – Yes it does AS3 :)

Well, for a while now, people have been asking me about using Xray with ActionScript3, so I thought I’d clear up the confusion with one post about it.

Yes – there is a version for AS3.  That’s the good news.  The bad news is, it doesn’t have all the bells and whistles that AS2 version had.  It DOES do introspection of your objects at runtime with a snapshot, and the logger is as strong as ever.  There’s also a Flex specific Xray class that works rather well.

The nice thing is, the logger and Xray work the same in either the Flash IDE, pure ActionScript project, Flex application or Air application.  It doesn’t have an AS3 component yet, but it works very easily with a couple lines of code just the same way.

Let’s take a look at doing 2 things: 1)  setting up an Xray instance for introspection and 2) just using the logger.

Xray Instance

To create an instance of Xray, you simply add the import to your class, then create an instance:

import com.blitzagency.xray.inspector.Xray;

// later in your property declarations:

public var xray:Xray = new Xray();

addChild(Xray);  // you have to add it to the stage in a pure ActionScript application or Flash IDE app – thanks Dave!

// for you Flex users – it works for Flex2 or Flex3 or Air

import com.blitzagency.xray.inspector.flex.Flex2Xray;

public var xray:Flex2Xray = new Flex2Xray();

Yay me!  we’re done and you can use the Flex Xray interface to take a look at your application.

Xray’s Logger

Xray’s logger has the same log levels that most do these days: debug, info, warn, error and fatal.  To create an instance of the Xray logger, you simply add the import, then create an instance like so:

import com.blitzagency.xray.logger.XrayLog;

// later in your property declarations:

public var log:XrayLog = new XrayLog();

// later, when you want to log something:

log.debug(“StringMessage”, object [, object, object…]);

log.info(“StringMessage”, object [, object, object…]);

log.warn(“StringMessage”, object [, object, object…]);

log.error(“StringMessage”, object [, object, object…]);

log.fatal(“StringMessage”, object [, object, object…]);

You pass a string message as the first argument, then send as many objects as you like after that.  The output is nice in that it includes a time stamp as well as the class and line number that made the log call:

(2793) com.electricsheepcompany.aspen.spaces::SpaceCreator/handleGroupLoaded()[/Users/NeoRiley/Documents/Infrared5/clients/clientName/source/johnBranch/src/1.0_jgrden/src/main/flex/com/clientName/clientAppName/spaces/SpaceCreator.as:102
GroupTest: group load complete

As you can see, you get the calling Class fine and line number. Nice huh?

Where do I get the code?!?

Glad you asked!  It’s hosted on Google code and you can check it out with any SVN client at this URL:

http://osflash-xray.googlecode.com/svn/trunk/

And the snazy Xray Interface app??

You can download the SWF based Xray app here

The future of Xray?

As usual, I’m sure Xray’s development will be driven by need on projects and by people who request features.  If anyone cries loud enough, I’m sure I’ll do what I can.  As I come to need more features that AS2 used to support, I’ll get around to implementing them.  But for now, it works well in AS3, and does what I need it to do, which is introspection and the ability to modify properties at runtime to see what’s going on with the application.  Much of my work these days is being a consultant on new gigs every couple of months and Xray really helps me cut through the felgercarb in mere sentons.

Also, there’s XrayViewer by Marc Hughes

Marc’s the one that did the work on the filter component for Xray’s log output, and came up with a really VERY cool AIR app that lets you load a SWF and inspect it😉

http://rogue-development.com/xrayviewer.html

  1. Hey

    Thanks for the update – I had given up on using Xray for AS3.

    I added the import statement and the property declaration as you describe, but I’m not seeing anything. What else do I need to do ? (ps. using fp10)

    thx
    Dave

  2. I’m assuming you mean for an instance of Xray() yes? Do you mean nothing shows up in a snapshot? or nothing shows up in the logs?

    Let me know

    I haven’t actually tested it with FP10 stuff, I guess I should do that😉

  3. I guess I just need some more usage instructions. What I did so far is follow the instructions above to add an Xray instance to my movie. I then compiled and opened it up in a browser. Then I I fired up the Xray.swf GUI (just with the standalone flashplayer , and clicked on get snapshot…nothing. How do I make the connection between the GUI and the movie I’m trying to debug?

  4. I though my dLogger and dPanel was good for debugging – this Xray puts mine and most other debugging tools to shame! It took a while for me to work out how to use it but it is brilliant. And I’m glad to see you’ve finally changed your theme🙂

  5. I got it to work. I tried the logger and noticed that it *was* working. Then when I clicked on ‘GO’ button it said it couldn’t get a reference to the stage. I saw a comment in the source about needing to add an instance to the stage for it to work, so I added the line

    addChild(xray);

    into my init() method and reloaded.. this time it worked!

    This is awesome as I use the SDK all the time so my only debugging tool is the command line debugger which is no fun at all. I could probably use them together though – set break points with the debugger and then inspect with XRay.

    Cheers,
    Dave

  6. You’re SO right David, and I forgot about that – I tend to work in Flex a ton more and just had forgotten about that😉 Thanks!

    • TK
    • October 21st, 2008

    Is google code down? I can’t checkout a working copy.

  7. I was able to see the files just now – seems like it’s all up and ready to go

    are you using: http://osflash-xray.googlecode.com/svn/trunk/

    ?

    • Gil
    • November 14th, 2008

    In a Flash Project, you must import Flex libraries. (mx.core…)

  8. @Gil: not true – if you use it in Flash IDE, you use Xray, not FlexXray😉

    var xray:Xray = new Xray();

    // then in your code after you’re sure the stage is there
    addChild(xray);

    • Jim
    • November 16th, 2008

    I’ve just tried the Flash IDE version also…

    var xray:Xray = new Xray

    It gave me the following error:
    ObjectInspector.as, Line 96 1120: Access of undefined property IChildList.

  9. my bad – I need to fix that, thanks Jim!

  10. Fixed and updated

    • Jim
    • November 19th, 2008

    @neoriley, Great you got the code sorted. Thanks.
    I’ve been playing with it a while and I’m not sure if I should be trusting the output statements? I keep the following AsyncErrorEvent message happening all the time on most objects (Loader, TextField, MovieClip, etc).
    value: Error #1034: Type Coercion failed: cannot convert flash.display::Bitmap@1d4a03a1 to flash.display.Sprite.
    Could this be a symptom of the missing bells and whistles you mentioned above?

  11. @neoriley, thanks for your great tool for AS3.

    One question: I noticed a strange quirk and I tested it on a really simple FLA app: SWF+Xray runs fine inside the IDE but SWF+Xray is broken (i.e. events lost) outside of the IDE (i.e. running the swf directly via a double-click).

    If I comment out the Xray instantiation in the code (as it is in the code below), then it will work fine in and out of the IDE.

    I must be missing some initialization that the IDE is doing for me but I just don’t know what it is… Could you tell me what I’ve missed?

    Paste this sample code into the first frame of a new FLA and save the FLA in a directory with access to your com.blitzstudios.xray.*

    Thanks again for this tool and the AS3 update!

    — code here —
    stop();

    import com.blitzagency.xray.inspector.Xray;
    import com.blitzagency.xray.logger.XrayLog;

    // COMMENTED OUT to make generated SWF work in and out of IDE – Tony
    //var xray:Xray = new Xray();
    //addChild(xray);
    //var log:XrayLog = new XrayLog();log.debug(“Xray debug test”);
    //log.debug(“test”);

    var triangle:Sprite = new Sprite();
    with (triangle.graphics) {
    lineStyle(0);
    beginFill(0xff9900, 1);
    moveTo(50,0);
    lineTo(100,100);
    lineTo(0,100);
    lineTo(50,0);
    endFill();
    }
    triangle.x = 0;
    triangle.y = 0;
    addChild(triangle);

    function onMoveTriangle(evt:Event) {
    triangle.x++;
    triangle.y++;
    }
    addEventListener(Event.ENTER_FRAME, onMoveTriangle, false, 0, true);

    • Brent
    • December 1st, 2008

    I keep getting this error when I do everything that it says above for a flash doc. I import it then instantiate the xray and added to my stage… when I publuish it says:

    (833) com.blitzagency.xray.inspector.util::ControlConnection/initConnection()
    initConnection
    ArgumentError: Error #2082: Connect failed because the object is already connected.
    at flash.net::LocalConnection/connect()
    at com.blitzagency.xray.inspector.util::ControlConnection/initConnection()
    at com.blitzagency.xray.inspector::Xray/com.blitzagency.xray.inspector:Xray::init()
    at com.blitzagency.xray.inspector::Xray$iinit()

    Anyone know why this might be?

    • that’s because you have a web page or Flash app running that already has xray running in it. Make sure there arent’ any other sites or flash apps running in any tabs etc.

    • Scott
    • December 5th, 2008

    I only see a Flex version for AS3 in Google code, where is the version to use with pure AS3? There is Flex, AS2, and AS1…

    • In the as3 branch, there is simply Xray.as – use it like this:

      import com.blitzagency.xray.inspectors.Xray;

      public var xray:Xray = new Xray();

      // then in your code after you’re sure your app has a stage object
      this.addChild(xray);

      Thats it!

  12. Just a quick correction — even though it’s shown this way throughout the comments, the addChild() line in the initial instructions uses the incorrect case. Should be addChild(xray) instead of addChild(Xray) – best

      • cgguy
      • May 14th, 2009

      David, thank you.

    • Mark A.
    • December 24th, 2008

    Hi John.
    Why don’t you make a donation button available so you have your reason to work on updates of XRay? I find that tool so basic and usefull I guess thousands use it… just like the TweenLite Engine from Greensock….

    • Mark A.
    • December 24th, 2008

    Is it right that the AS3 version only shows displayobjects? I can only inspect displayObjects – Xray does not shows me Arrays or other fields of my application…

    • Mark A.
    • December 24th, 2008

    Ok, I got it. It can only show public fields – all my field are private and these will not show up in XRay… I guess there is no workaround, right? But that makes Xray in a way useless because I cannot change all the fields to public just to see them.

    • Hank
    • February 25th, 2009

    Hi,
    I am not able to connect Xray to an AS3 SWF running inside a web browser. I’m hosting a web page from my localhost web server, and this page contains the SWF compiled with the Xray instance as a child of the main timeline. The same SWF works when run from inside Flash CS3 IDE. Can anyone please help? TIA!

  13. The link to the zip is no longer working. Can someone re-upload?

    Thanks,

    Jarred

  14. Links are fixed now!

  15. hi folks

    i must be stupid, or blind or something, but where do i get (download) the classes to import?

    the com.blitzagency.xray.* package?

    thanx in advance

  1. October 11th, 2008
  2. October 14th, 2008
  3. March 10th, 2009

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s