Dec172010

Intro to Load Testing
with JMeter (part deux!)

If you’ve been following along, you’ll know that JMeter is most commonly used to do automated testing; you can create a bunch of virtual users to perform a set of pre-determined actions on your website. In my previous post, I detailed how to manually create a list of actions for your test users to perform. However, manually creating long lists of test actions is kind of a pain! Fortunately, JMeter includes a proxy utility that can intercept your browser requests and store them as user actions.

Fire up JMeter, and you’ll be presented with a new plan. Create a new thread group (your users) in the Test Plan (as detailed in the previous tutorial). Now, instead of manually adding HTTP Requests for these users to perform, we’ll hook up a proxy server to create the HTTP Requests for us.

Right-click on the WorkBench item in the sidebar, and select Add > Non-Test Elements > HTTP Proxy Server. You don’t have to configure anything here, just click the Start button at the bottom of the config window to start the proxy server on port 8080. Now you’ll have to configure your browser to pass its’ requests through the proxy server. In Mac OS X, you do this system-wide by accessing your System Preferences. Go to System Preferences > Network > Advanced (the “Advanced” button is in the lower-right corner of the window). When the advanced options window pops up, click the Proxies tab, then check the Web Proxy (HTTP) option, and change the Web Proxy Server port to 8080. Click OK to save your changes, then Apply to make them take effect.

Next, open your browser and go to the JMeter homepage (http://jakarta.apache.org/jmeter/). Click a few links, and then go back to your JMeter window. There should now be an arrow next to your thread group, meaning that the group contains some actions. Click the arrow to expand the list, and you should see requests for all the resources that you requested in your browser. You’ll see that requests have been made for every resource your browser asked for, such as images and CSS files. You can remove those requests if you want, or leave them in for a more realistic simulation.

Don’t forget to go back into your Network settings and disable the proxy server, otherwise you won’t be able to make HTTP requests when you close JMeter. However, this method of creating JMeter test cases is way easier than its’ manual counterpart.

No comments · Written by Nathan at 8:00 am · Tags , , , ,

Feb252009

Add an Event Listener in Actionscript 3

Importing graphics into your Flash program is all well and good. You can create movies or animation, but the real interesting thing is taking user input and having your program react to it. The way to do that in Actionscript is to add “Event Listeners” to objects you create. Whenever an event occurs (such as a keypress, mouse movement, or whatever), your Event Listener checks to see if it’s supposed to do anything. If so, then it runs a function with code that you specify. So for example, say the user presses the “left arrow” key. Your keyboard input event handler sees this, and runs appropriate code (in this case, it might move a game character left).

One of the most basic events in Actionscript is the “enter frame” event. This triggers every time the SWF is redrawn, and basically corresponds to the SWF frame rate. In the following example, we’re going to create a new class, and add an “enter frame” event listener to it, so that whenever a new instance of that class is created, a function will run at frame rate. 

package {
  import flash.display.Sprite;
  import flash.events.Event;  // Required to add event listeners

  // Set our SWF framerate, width, height, and background color
  [SWF(frameRate='30', width='640', height='480', backgroundColor='0xffffff')]

  public class EventListenerExample extends Sprite {

    [Embed(source="ball.svg")]
    public var BallGraphic:Class;

      // Variables used to store movement data
      private var dx:int = 5;
      private var dy:int = 5;

    public function EventListenerExample():void
    {
      // Create instance of imported graphic
      var b:Sprite = new BallGraphic();

      // Add to this display object
      this.addChild(b);

      // Attach event listener
      // Listen for "ENTER_FRAME" event
      // Run the "enterFrame" function
      this.addEventListener(Event.ENTER_FRAME, enterFrame);
    }

	public function enterFrame(e:Event):void
	{
	  // Increment position
	  this.x += this.dx;
	  this.y += this.dy;

	  // If object passes beyond SWF boundaries,
	  // reverse direction
	  if(this.x >= 640 - this.width || this.x <= 0)
	    this.dx *= -1;
	  if(this.y >= 480 - this.height || this.y <= 0)
	    this.dy *= -1;
	}
  }
}

Save this code in a file named ‘EventListenerExample.as’. You can see that we’ve elaborated a bit on our last example, importing and displaying an SVG graphic. However, this time we add some variables to the class that represent speed (delta-x and delta-y). We attach the event listener by calling this.addEventListener (Event.ENTER_FRAME, enterFrame);. The first argument is the type of event the listener is triggered by, and the second is the name of the function to run when the event is detected.

In the declaration of the ‘enterFrame’ function, we pass it details of the event that triggered it by putting e:Event in the arguments list. The function doesn’t actually use that information, but simply moves our graphic around, bouncing off the “walls” of the SWF. Movement is just one possible application of the ‘enter frame’ event; collision detection can also be calculated this way, among other things.

No comments · Written by Nathan at 2:32 pm · Tags , , ,

Feb232009

How to embed SVG
vector graphics with Actionscript

One of the big downsides about not using the Flash IDE for development is that it’s much more of a hassle to bring graphics into your program. The IDE has a built in vector illustration program, which allows the user to create graphical objects (or import them from Illustrator) and link them right up to a corresponding Actionscript object. If you’re making programs with the Flex SDK, however, getting graphics is a bit more of a chore. Fortunately, it’s not nearly as difficult as programming graphics via Actionscript.

Inkscape 'New' File MenuFirst, you’ll want to get a vector illustration program. Adobe makes Illustrator, which might be your first thought, but we’re trying to do things on the cheap here, otherwise we’d just get the Flash IDE. Inkscape is a free program which can save files in the SVG (scalable vector graphics) format. Grab a copy of Inkscape, and fire it up (OS X users prior to 10.5 will need to install X11).

Create a circle in Inkscape

Inkscape starts up by creating a default document, which is much larger than anything we would normally use. From the ‘File’ menu, navigate to the ‘New 32×32 Icon’ option. Now, in the smaller image, use the ‘Circle’ tool to create a circle. Take some time here to play around with Inkscape: experiment with changing the color of the circle, give it a border, do whatever you like. When you’re satisfied with what you have, click ‘Save’ and save the image as a ‘Plain SVG.’ Now, create a new Actionscript file in the same directory as the graphic file called ‘SVGExample.as’, and enter the following code:

package {
  import flash.display.Sprite;

  public class SVGExample extends Sprite {

    [Embed(source="ball.svg")]
    public var BallGraphic:Class;

    public function SVGExample():void
    {
       var b:Sprite = new BallGraphic();
       b.x = 100;
       b.y = 100;
       addChild(b);
    }
  }
}

The way that graphics are embedded is as follows: first, you use the ‘Embed’ syntax to specify where the image is, and then you link that embedded asset to a unique class name. Here, I call it “BallGraphic,” but you can use anything that makes sense to you. Creating an instance of that class (when I call new BallGraphic()) loads the graphic, and it can then be added to a display object container and shown on the screen. When you compile this code and run the SWF, you should see your graphic on the stage. You can now easily import SVG graphics (or even other image types, such as .gif/.jpg) via Actionscript.

2 comments · Written by Nathan at 1:39 pm · Tags , ,

Feb192009

How to create Flash programs with
Actionscript 3 and the Flex SDK

So, something I’ve been devoting a bit of my time to recently is learning Actionscript programming. It’s something that I’ve been interested in for a while, but never pursued — mainly because the Flash authoring program (currently CS4) runs around $700 for the full version. Now, if I was a professional, and worked with Flash for a living, I’d have no qualms about dropping that cash. However, it’s a steep point of entry for a hobbyist.

In a bid to make the Flash platform more of an application environment, Adobe has been promoting a new way to author Flash content, called Flex. Flex uses a mix of XML (for layout) and Actionscript (for logic) to more easily create “application-like” programs. Flex is really targeted at the programmer — development is done through a text editor-based environment (although Adobe has made a Flex Builder program to facilitate UI layout). Now, the benefit here is that while Adobe charges for the premium development environment, the actual XML/Actionscript compiler is available for free. This means that you can create pure-Actionscript programs (read: games) for free!

I’m going to quickly show you how to set up a development environment for Flash authoring with the Flex 3 SDK. The first step is to download the SDK. Click the “I Agree” checkbox, and save the .zip somewhere on your computer. It’s a bit large, weighing in at around 120 megs. Extract the files somewhere when it’s finished downloading (c:\flex3 on Windows or /Users/yourusername/flex3 on OS X).

You’ve got the tools, now you need to know how to use them. I primarily use some sort of terminal to do my compiling. For Windows, I recommend Cygwin. OS X users can simply use their Terminal.app program. You’ll have to let your terminal know where your Flex compiler is, so you don’t have to type the absolute path each time you want to run it (i.e. so we can type ‘mxmlc Myprogram.as’ instead of ‘/Home/yourusername/flex3/bin/mxmlc Myprogram.as’). So we’ll add the ‘flex3/bin’ directory to our system path. Here are instructions for Windows and OS X. You’ll want to add the ‘c:\flex3\bin’ directory (Windows) or ‘/Users/yourusername/flex3/bin’ (OS X) (or wherever you put the Flex SDK files) to your path. Once you’ve done that, fire up your terminal and type ‘mxmlc -help’. If you see a bunch of info about the compiler, then you’re good to go.

Next, we’re ready to create a simple program to demonstrate how to author Flash content using only Actionscript. Open up your favorite text editor (my preference is TextMate) and create a file called ‘HelloWorld.as’, and slap this code into it:

package
{
	import flash.display.Sprite;
	import flash.text.TextField;

	public class HelloWorld extends Sprite
	{
		public function HelloWorld():void
		{
		// Create a new variable to hold a "TextField" and assign an instance of the TextField class to it
		var myMessage:TextField = new TextField();

		// Add some text to the TextField object
		myMessage.text = "Hello World!";

		// Add the text to the main display container
		addChild(myMessage);
		}
	}
}

Save your file, then compile it by typing ‘mxmlc HelloWorld.as’. If you see any errors, make sure you copy/pasted the above code exactly. The compiler should output a SWF binary file called ‘HelloWorld.swf’. Double-click it or drag it to your browser to start your new program, and you should see a window with the text “Hello World” displayed in the upper left corner. Congratulations! You’ve successfully set up a development environment, and are now ready to start learning Actionscript and making your own programs.

1 comment · Written by Nathan at 9:34 am · Tags , ,

Aug102008

Tutorial: Use gcc/g++ with Cygwin

One of the problems that I always faced as a developer was what compiler to use on the Windows platform. While Linux-based operating systems come with their own compilers, Windows users are kinda screwed… I think the last tool that came with DOS/Windows and allowed you to make programs was QBasic. So the question is, what’re some free tools I can use to make Windows binaries?

Enter Cygwin, a Linux-like interface for Windows. It has the bash shell, as well as lots of popular tools, such as C/C++ compilers. This is pretty much just what we want, eh?

Let’s download and set up Cygwin. Hit up the website and click the “get Cygwin” link on the right. Run the installer, and make sure to have the ‘developer tools’ option checked during setup. When you’re done with that, this readme has all the information you need regarding installing the SDL library. OpenGL libraries will be installed with Cygwin by default.

That’s it! You’re ready to rock. Just compile your SDL/OpenGL program using a command similar to this:

gcc -o test.exe main.c `sdl-config --cflags --libs` -lglu32 -lopengl32

If you’re using SDL, make sure to have a copy of SDL.dll in the directory your program is in.

No comments · Written by Nathan at 6:18 pm · Tags ,