To install the ActionScript 2 Xray connector, download the package labeledXray AS2 Logger classes and Mtasc Utilities with samplesfrom the Xray Google Code repository (http://code.google.
com/p/osflash-xray/downloads/list). Extract the archive to a temporary location on your hard drive. Copy the classes/com directory to the lib directory you previously set up (see “Installing ActionScript 2 libraries”). Copy thexrayConnector-XXXX.swffile to thebindirectory inside your proj-ect. You’ll have to copy this SWF to thebindirectory of every project you create, so make sure to keep a copy handy between projects; we suggest keeping an extra copy in yourFlashToolsdirectory.
You need to configure two major pieces of Xray to use all the features. One is the execute connection, which allows you to inspect and modify the objects of the running SWF. The other is the logger con-nection, which will redirect your log statements to the Xray window.
The execute connection is enabled by adding a few lines of code to your application. Xray comes with a utility class calledXrayLoaderthat loads the connector SWF you previously installed. To use it, you need to make several changes to your code.
Follow these steps to modify the code for the Xray execute connection:
1. Extract most of the functionality of the code from the static main() method to a new startApp()method.
2. Add a private member variable representing the baseMovieClip.
3. Create a constructor that takes aMovieClipas a parameter. In that constructor, set the base clip.
4. In the constructor, set up two event listeners onXrayLoaderto callstartApp()after either a successful load or a failed load. You do the same thing on fail or load so you can later deploy your application without the Xray connector, and it will still work.
5. Also in the constructor, add a call toXrayLoaderto load the connector SWF. Make sure to specify the exact SWF name of your connector because you may have a newer version than what was available at the time of this writing. The second parameter specifies the base MovieClipto use. The third parameter specifies whether to display the FPS meter.
import com.mosesSupposes.fuse.ZigoEngine;
import com.mosesSupposes.fuse.FuseItem;
import com.mosesSupposes.fuse.PennerEasing;
import com.mosesSupposes.fuse.Fuse;
import com.blitzagency.xray.util.XrayLoader;
import com.dynamicflash.utils.Delegate;
import com.mosesSupposes.fuse.Shortcuts;
class com.friendsofed.recipeviewer.RecipeViewer {
private var baseClip:MovieClip;
Modifying the code for the Xray execute connection Configuring the execute connection
If you’re using the Flash IDE for development, installing the connector is even easier.
Just download the package labeledLatest component package for AS2. It contains an MXP file, so if you double-click it, the Flash Extensions Manager should recognize it and install it for you. Then, to use the connector, just drop the Xray connector com-ponent onto the stage of your project.
public static function main(base:MovieClip) : Void {
var app:RecipeViewer = new RecipeViewer(base);
}
public function RecipeViewer(base:MovieClip) {
baseClip = base;
XrayLoader.addEventListener( XrayLoader.LOADCOMPLETE, this,"startApp");
XrayLoader.addEventListener( XrayLoader.LOADERROR, this,"startApp");
XrayLoader.loadConnector("xrayConnector_1.6.3.swf",base,true);
}
public function startApp() : Void {
ZigoEngine.simpleSetup(Shortcuts,FuseItem,PennerEasing);
var tf:TextField = baseClip.createTextField("testField",1,50,10, 200,200);
tf.text = "Hello World.";
var f:Fuse = new Fuse();
f.push({target:tf, start_y:1000, y:0, duration:6, ease:"easeOutBounce"});
f.start();
} }
If you’ve configured the execute connection, you already have some of the logger connection func-tionality enabled. You can create a log variable of typeXrayLoggerin your class:
private var log:XrayLogger = new XrayLogger();
Then you can use thedebug(),warn(), and so on, methods to display debug information. The other mechanism of logging requires you to change an MTASC compile option. To set that up, follow these steps:
1. In Eclipse, right-click your project, and selectProperties. 2. Select theAS2 Builderoption on the left.
3. Select theRecipeViewerbuilder from the grid, and click theEditbutton.
4. In theTrace Functionfield, enter com.blitzagency.xray.util.MtascUtility.trace.
5. Click theOKbutton to accept your change.
Configuring the logger connection
You can now use the two methods of logging in your code. To test them, add alog.debug()line and atrace()line to yourstartApp()method:
import com.mosesSupposes.fuse.ZigoEngine;
private var log:XrayLogger = new XrayLogger();
public static function main(base:MovieClip) : Void {
log.debug("this is a log message using log.debug()");
trace("this is a log message using trace()");
ZigoEngine.simpleSetup(Shortcuts,FuseItem,PennerEasing);
Once you’ve done that, you can begin watching log output in the Xray interface. The next section of this chapter explains how to get that working. After that, run your application. You should see some debugging information appear in theOutputpanel, as shown in Figure 3-15. Notice that yourtrace() call added a method name and line, whereas thelog.debug()call didn’t. This is because MTASC adds that extra information fortrace().
Figure 3-15. The Xray output panel showing some log output while running the example application
The previous example had you installing the connectors for an ActionScript 2–based project. There is a similar API available for ActionScript 3–based projects. The only significant difference is there is no trace redirect support on the Flex 3 SDK compiler. This means you must use theXrayLogclass from Xray to get logging output to the Xray window.
To do that, create a newXrayLogvariable and then call the debug, warn, or error methods of that new object to invoke the different logging levels. A modified version of the previous “Hello World” exam-ple to useXrayLogfollows:
package {
import com.blitzagency.xray.inspector.Xray;
import com.blitzagency.xray.logger.XrayLog;
import com.blitzagency.xray.logger.XrayLogger;
import flash.display.Sprite;
import flash.text.TextField;
Using the AS3 XrayLogger class
[SWF(backgroundColor="#eeeeff", frameRate="60", width="500", ➥ height="350")]
public class RecipeViewer extends Sprite {
protected var xray:Xray = new Xray();
protected var log:XrayLoggeryLog = new XrayLog();
public function RecipeViewer()
You can download the Xray Interface from the Xray website (http://osflash.org/xray). The Xray interface is packaged in two different formats:
Web-based Flex2 Interface (requires Flash Player 9): This is the simplest option to quickly get up and running since there is nothing to install. To use it, just click the link and allow the inter-face to open in your browser. You must have the Flash Player 9 plug-in already installed. This option is useful for quick tests, but if you’re using Xray often, it’s likely more convenient to install a copy of the interface locally on your computer.
SWF only: Oddly enough, the SWF-only package contains just the SWF that makes up the Xray interface. You can run it either in the stand-alone Flash Player or in a web browser.
Installing a web server
Installing a web server to test your Flash application locally on your development machine can save time and aggravation later when it comes time to deploy to your website for real. Properly setting up a web server with all the necessary libraries, add-ins, and configuration options can be a lengthy process. The people at Apache Friends have put together a project called XAMPP that makes installing a development web server easy. Apache Friends has versions available for Windows, Mac OS X, and Linux. Simply visit the website (http://www.apachefriends.org/en/xampp.html) and download the installer for your operating system. From there it’s a simple installation wizard to get your web envi-ronment up and running. When running the installer, make sure to install the Apache web server, any Apache modules you might want (like PHP), and the MySQL database server.
Once you’ve installed XAMPP, you can launch the XAMPP Control Panel (see Figure 3-16) to start the services you’ve installed. Once you start the Apache web server, you should be able to point your browser athttp://localhost/to view pages served from it.