Escape Theory Gaming For Life… views are mine, and not affiliated with The White Agency or Nomad

3Jun/101

Flexperiment 1: Physics of a Bouncing, throwable ball.

Here is a simple bit of code that demonstrates simulated physics of a ball being thrown (written with my colleague Anthony http://www.creatistblog.com/):

The keystone of this experiment is the ENTER FRAME event function that tracks the motion of the ball, applying horizontal 'drag' and vertical 'gravity' as well as spelling out the boundaries of the ball's movement area. A simple hack forces the ball to stop in its tracks when it is at a certain speed and distance from the 'ground' or bottom of the screen. Understanding the physics of something like a bouncing ball helps me build on top of it with more features (such as a true collision detection system, or adding wind).

package {

 import flash.display.Graphics;
 import flash.display.Sprite;
 import flash.events.*;

 [ SWF( frameRate="60", width="420", height="420", backgroundColor="0x000000" ) ]
 public class BouncingBall extends Sprite {

 private var maxSpeed:Number = 100;
 private var radius:Number = 25;
 private var vx:Number;
 private var vy:Number;
 private var ball:Sprite;
 private var previousMouseX:Number=0;
 private var previousMouseY:Number=0;
 private var currentMouseX:Number;
 private var currentMouseY:Number;
 private var throwX:Number;
 private var throwY:Number;

 public function BouncingBall() {
 ball = new Sprite();
 ball.buttonMode=true;
 ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDownHandler);
 ball.addEventListener(MouseEvent.MOUSE_UP, ballUpHandler);
 addChild( ball );
 ball.x = Math.random() * ( stage.stageWidth - radius );
 ball.y = Math.random() * ( stage.stageHeight - radius );
 vx = Math.random() * maxSpeed + 0.5;
 vy = Math.random() * maxSpeed + 0.5;

 var g:Graphics = ball.graphics;
 g.beginFill( 0xFF0000 );
 g.drawCircle( 0, 0, radius );
 g.endFill();

 addEventListener( Event.ENTER_FRAME, onClipEnterFrame, false, 0, true );
 }

 private function onClipEnterFrame( p_event:Event ):void {

 currentMouseX = this.mouseX;
 currentMouseY = this.mouseY;

 ball.x += vx;
 ball.y += vy;
 if ( vy != 0 ) vy += 0.5;
 if ( vx != 0 ) vx += (0-vx)*0.015;

 if ( ( ball.x <= radius && vx < 0 ) || ( ball.x >= stage.stageWidth - radius && vx > 0 ) ) {
 vx = -vx * 0.6;
 }
 if ( ( ball.y <= radius && vy < 0 ) || ( ball.y >= stage.stageHeight - radius && vy > 0 ) ) {
 vy = -vy * 0.6;    
 }

 if ( Math.abs( vx ) < 0.01 ) vx = 0;
 if ( Math.abs( vy ) < 0.1 && ball.y>=stage.stageHeight-radius-2){
 vy = 0;
 ball.y=stage.stageHeight-radius;
 }

 throwX = currentMouseX - previousMouseX;
 throwY = currentMouseY - previousMouseY;

 previousMouseX = currentMouseX;
 previousMouseY = currentMouseY;

 }

 public function ballDownHandler(e:MouseEvent):void{
 ball.startDrag(true);
 vy = vx = 0;
 }

 public function ballUpHandler(e:MouseEvent):void{
 ball.stopDrag();
 vx = throwX;
 vy = throwY - 0.6;
 }
 }
}
14Dec/090

MXML Analysis for the Simple RIA

We've now got some idea of .mxml files. Remember, the files themselves are simply there to tell Flex what to do and in the end we still end up with a .swf file.

Let's dive into the MXML code for our simple RIA and explain some of the details:

 

The 'mx:' notation defines the location of the class 'Application'. The Application tags are placed around the MXML file's content. Styles can also be set in the tags - this declarative markup style would be familiar if you have played around with HTML, but even if you haven't it's pretty easy to catch on.

It is helpful to look through class documentation to see how the classes are organised, and what kind of style settings you can set. Remember, with Flex you should try to keep as much of the presentation and layout gubbins in the MXML file, leaving all the business logic of your program up to the AS3 components.

 

The Panel is the standard presentation component.

 

The DataGrid is similar to the DataGrid component in the Flash components, and as such provides pretty much identical functionality. Notice that by simply embedding DataGrid in its relevant panel, it becomes a child of the panel. This makes adding and removing display items very simple and efficient.

DataGrid uses data.xml, which has its id value set to 'Ships'. This can be accessed using AS3 dot-notation '{Ships.Ship}'.

At the moment, the simple application isn't very scalable or flexible. In the next few days, we'll rewrite the code in an object-oriented way to take advantage of the power of Flex.

8Dec/090

Pros and Cons of using Design Patterns

On the eve of the upcoming siege against a Troll stronghold, Sir Beefus Maximus spends the night pondering on two conflicting manuscripts: 'How to besiege an Ork stronghold' and 'Killing Trolls for dummies'.

We've talked about a couple of patterns in the past, which span from the tactical to strategic scopes of any given Flash project, but it's important to realise the purpose of a design pattern and to be mindful of their pitfalls.

Design patterns like MVC are scalable solutions for use in your Flash project, but even within the MVC discipline there are several frameworks that interpret MVC in their own unique way.

Adopting a pattern and framework is an easy solution for fixing or avoiding common problems that building from the ground-up may face.

Frameworks act as a skeleton, giving the developer a pre-planned structure to be populated with detail resulting in faster, more agile development.

Patterns and frameworks usually have a substantial following, which means that if you encounter any problems, chances are that the community would have as well - so you won't be alone when it comes to asking for help. Members of the community will also communicate difficult concepts and abstract terms easier.

Communities that support a framework will usually continue to improve upon it by making updates and better functionality.

There are also pitfalls of using frameworks to be mindful of, the most important of which is to avoid over-planning, or over-engineering. Sometimes, be careful with adopting unnecessarily complex frameworks for your particular problem, often you'll find that simple solutions work best.

Using a framework can cause your mind to become lazy and divert your attention from better solutions - you may find that once you adopt a framework, you redesign your application to fit it more perfectly. Following a framework may make it easier to maintain - but a balanced approach should be made when you find yourself changing your application to suit the framework (perhaps another framework exists that would suit your application better).

Later, we'll examine some examples of MVC frameworks in use for Flex and Flash, and discuss using them as opposed to building from the ground-up.

30Nov/090

Compiling a Simple RIA (without Flex Builder)

Flex is a very powerful SDK capable of many awesome things, but taking advantage of Flex will rely on the programmer's desire to bring good principles into practice. Flex is a set of components designed to make common problems easier to solve, but it doesn't do anything more than what Flash (in combo with other technologies) could already do.

Today we'll create a simple RIA using Flex components, and compile it with the free FlashDevelop. This will be a visual representation of Cmdr 'Redbeef' Viktor's fleet of starships in orbit around Nobel II.

You can download the files of this tutorial here.

Before we begin, please ensure you have downloaded and installed the following:

First Things First

  1. You must ensure that you set-up Flex 3 to compile in FlashDevelop - this is not only the alternative to compiling in Flex Builder, but it demonstrates how Flex 3 components are robust and independant of programs as well as each other.
    Go to Tools > Program Settings and select AS3Context in the left panel.
    Scroll down the right panel and enter the Flex SDK Location to match where you have extracted the Flex SDK that you downloaded. If for any reason you cannot compile, come back to this step to make sure you've located the SDK properly.

Creating Your First Flex 3 Project

  1. Open FlashDevelop, select 'Open Project' from the 'Project' dropdown menu.Browse for viktors_ships.as3proj from the downloaded files to open the tutorial project. If you were creating a new one from scratch, you would select 'Flex 3 Project' under the ActionScript 3 templates. Creating a new Flex project in Flashdevelop also creates the typical folder structure of a Flex RIA.
  2. Find 'Main.mxml'. Double-click it to start editing its content. An mxml file is an XML-based markup language that is basically the 'View' in MVC, and you can find it in the Downloaded files. I will discuss the advantages of using MXML rather than ActionScript for creating Views later. You'll notice that data.xml is a child of Main.mxml in the project hierarchy - this is a simple way to look at how your data is organised.
  3. Run the compiler by hitting 'Test Movie'. Congratulations! you have just compiled your first RIA. You can also play with the data by editing data.xml in the src folder.
The data is represented in DataGrid format

The data is represented in DataGrid format

Sure, we could easily have done the same with pure AS3, but Flex has removed all View considerations from AS3 by handling it with the nifty MXML file. AS3 then becomes purely business logic. As with all design patterns, there are always benefits and challenges that accompany Flex and we will discuss these at another time.

BONUS XP

You will notice there is a second .mxml file in the files- MainGraph.mxml. This is an alternative View document to Main.mxml. This uses a graph layout to display the data rather than the grid. The graph components are in the two .swc files: 'datavisualization.swc' and 'datavisualization_rb.swc' which are from the trial download of Adobe Flex Builder. To add swc files to your Flex project in Flashdevelop, right-click the src folder and select Add > Add Library Asset and browse for the .swc file.

To compile from MainGraph.mxml, right-click the file and check 'Always Compile' - there will appear a green arrow to denote that this is now the document file.

Change which file to compile from

Change which file to compile from

You will now see the same data represented as bar graphs when you compile again.

The data is now represented in bar graphs

The data is now represented in bar graphs

25Nov/090

Flex 3: Introduction

As Beefus Maximus continued on his heroic quest to free Shabbyway Valley from Flash ActionScript Monstrosities, somewhere in the heavens, beyond the moon and constellations, an Orion-class battlecruiser orbits the dark-side of Nobel II.

Aboard the command-deck, Commander 'Redbeef' Viktor and his advisors stand silently over the circular holographic projector depicting Nobel II and the ground war raging on its surface.

Adobe Flex3 is the combo of its framework, Flash (as its underlying technology), compiler, Flex Builder 3 and server-side gateways. It is a tool for making rich-internet applications that are flexible and scalable.

You can think of Flex as an answer to AJAX which has become the benchmark for RIA's. Frankly, I don't see why anyone should choose one over another for any good reason - but if you're like me and you are much more comfortable working in AS3, then I guess Flex would be your entry point.

The key to developing in Flex is the design pattern, and as we've previously mentioned, MVC is the best, if not only relevant design pattern when it comes to creating user-interfaces. As such, before continuing, it might be a good idea to familiarise yourself with the concept of Model-View-Controller.

Get started by downloading the trial of Adobe Flex Builder 3 here and be sure to check out the free SDK as well.

This week, we will start by building a simple rich-internet application with Flex Builder.