Experiences with Flash, AIR and iOS

Well I’ve been pretty busy latey and not much has happened on here for over month. I decided I should post some work and experiments I have been doing with building iOS apps with AIR for iOS. So below is a series of video demos of some experiments and actual projects I have been doing recently. All apps were compiled using Flash CS5. Note that none of these apps are available in the public app store.

Adventure Golf

Adventure Golf is a simple mini golf game I worked on for a client last year which was written in AS2. I decided to see how easy it was to build existing games for iOS so I converted all the AS2 to AS3 with minimal code changes/optimisations and Published for iOS. All graphics are pulled from the Flash library, with levels laid out on the stage on different frames. The hardest thing I had to do was resize the stage. Everything else just worked and I was surprised at how well it did considering it was converted from old AS2 code. I would like build this into a full app one day when I have lots of spare time!

READ MORE

Paint Maestro 2 sneak peek

I was going to record a full demo of my upcoming multitouch painting application ‘Paint Maestro 2’, but I had some technical difficulties so here is a small demo of the stencils. The application is written in AS3 and uses Adobe AIR. I posted this video over at NUI Group a couple weeks ago and got a pretty good response. But I never posted it here so here it is below. More info on Paint Maestro 2 will be coming soon so stay tuned…

READ MORE

Reading and Writing your own file type with AS3 and AIR

If your building an AIR application and you want to have your own native custom file type association for your app, it is surprisingly easy to to with ActionScript 3 in air as I found out. I was unable to find any information on reading and writing custom files so I decided to post my experience here. I remembered watching a tutorial by Lee Brimelow at gotoAndLearn a while back where he showed how to decode a BMP file using ByteArrays. So I revised the tutorial and used the ideas from this to create my own file.

For this example I will create a simple graphic file containing some metadata and some bitmap data.

1. Write out the specification

The first thing you should do is map out a spec sheet for it, outlining all the data and datatypes you want to store and the order it will be written. This is important so you don’t forget later on, and if you want others to be able to use it as well. Your custom file must be read and written in the same order. I just did it in Notepad like so:

image name – String
image author – String
image width – int
image height – int
bitmapdata length – int
bitmapdata – bytearray

Note that this is a very basic file, so you could save all different data types such as Boolean, Number, String, int, uint etc.

2. Get your data into a ByteArray

To write the file first we need to create a bytearray and then using the write methods of the ByteArray class write the bits of data to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// the stuff we want to save - name, author and a bitmap - in this case I've created a red square 300x300px
var name:String = "a new picture";
var author:String = "Ted Mosby";
var bitmap:Bitmap = new Bitmap(new BitmapData(300,300,false,0xFF0000));

// convert bitmap to byte array
var bitmapBA:ByteArray = bitmap.bitmapData.getPixels();

// create a bytearray to save into file
var bytearray:ByteArray = new ByteArray();

// write the image name
bytearray.writeUTF(name);

// write author
bytearray.writeUTF(author);

// write image width and height
bytearray.writeInt(bitmap.width);
bytearray.writeInt(bitmap.height);

// write bitmap data length
bytearray.writeInt(bitmapBA.length);

// write the bitmap
bytearray.writeBytes(bitmapBA);

READ MORE

Drawing a checker board pattern quickly with AS3

Today I needed to dynamically generate a checker board pattern in ActionScript 3. I couldn’t find any examples on how to do it so I made my own. Below is a snippet of code I wrote to draw it and its super fast! I used bitwise operators in the loops to speed it up and it can draw a 2000x2000px area in 10 milliseconds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Box colour 1
var even:uint = 0xCCCCCC;

// Box colour 2
var odd:uint = 0x999999;

// Box size
var size:int = 10;

// number of boxes horizontally
var nH:int = stage.stageWidth / size;

// number of boxes vertically
var nV:int = stage.stageHeight / size;

// vars to be used in the loops
var clr:uint;
var i:uint;
var j:uint;

// loop vertical
for (i=0;i<nV;++i)
{
    // Flip values of Even and Odd colours using Bitwise operations
    even ^= odd;
    odd  ^= even;
    even ^= odd;
   
    // loop horizontal
    for (j=0;j<nH;++j)
    {
        //bitwise modulus
        //check if column is odd or even, then set colour
        clr = j & 1 ? even : odd;
       
        // draw box with previously set colour
        graphics.beginFill(clr,1);
        graphics.drawRect(Number(j*size),Number(i*size),size,size);
        graphics.endFill();
    }
}

NiceComps – AS3 UI components for Flash

NiceComps is a set of ActionScript 3 UI components that I have been slowly working on over about the last six months. I got tired of the ugly built in components that come with Flash and I don’t particularly like the look of MinimalComps. I wanted UI components that looked nice and were easy to use so I set out to create my own. The design of NiceComps was inspired by the Windows Phone 7 UI and one unique feature I wanted to include was the ability to easily and dynamically change the colour of all components being used at once at runtime. Since I started them they have evolved quite a lot as I’ve used them in projects, and therefore they are still not 100% finished. But I have decided to release a ‘Beta’ version which you can try out. There is a demo below of all the components so far (I think it’s all). The code is quite messy at the moment but I plan to tidy it all up in the near future. And please let me know if you find any bugs. Currently the most stable components are the DisplayScroller, CheckBox, InputBox, Button and DropDown as these are the ones I use most. I’ve got a lot of optimising to do because there is quite a bit of duplicate and unused code.

READ MORE

AS3 Uint Colour Util – Update: Now with source

Since Flash works with colour in the hex format, I’m always finding it annoying how you have to convert to RGB to perform manipulations on colours. Most colour classes out there like Grant Skinners Color Matrix and the ColorMatrix by Quasimondo work with matrices and the ColourTransform class, which is OK sometimes. But I find they can be overly complicated when you just want to take a hex, do something to it, and then get a another hex in return which can be easily applied to anything you need. After a lot of research I couldn’t find anything that just works with taking and returning raw uints. So I decided to take it upon myself to make a class where you can pass in uints and get uints in return.

What I came up with is the ColourUtil class. I guess it’s kind of like StringUtil classes you see around the place which take a string, manipulate it and return another string. Except my class takes a colour in the form of a uint, and returns a uint. The class is still a work in progress but I have made a little demo below.

READ MORE

Jackson Pollock – From AS2 to AS3

I found a Jackson Pollock style painting example written in AS2 called ‘Splatter’ over at stamen.com. I wanted to include a Pollock style brush in my painting application so I converted it into AS3. Just copy and past the following code into a new AS3 document in Flash.

Get Adobe Flash player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import flash.events.MouseEvent;
import flash.display.MovieClip;

//set up some vars
var new_size_influence:Number = 0.5;
var mid_point_push:Number = 0.75;
var max_line_width:Number = (Math.random() * 50) + 50;

//vars for line colour and alpha
var _colour:uint = 0x000000;
var _alpha:Number = 1;


//create var to hold all mouse position data
var obj:Object = new Object();
obj.x = 0;
obj.y = 0;
obj.start_x = obj.mid_x = obj.end_x = (stage.stageWidth / 2);
obj.start_y = obj.mid_y = obj.end_y = (stage.stageHeight / 2);
obj.size = 0;

//add mouse down event listener
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);


function onDown(e:MouseEvent):void
{
    //create random colour
    _colour = Math.random()*0xFFFFFF;
   
    //set all line data to current mouse position
    obj.start_x = obj.mid_x = obj.end_x = mouseX;
    obj.start_y = obj.mid_y = obj.end_y = mouseY;
   
    //add mouse up and mouse move event listeners
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
}

function onUp(e:MouseEvent):void
{
    //remove mouse up and mouse move event listeners
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
    stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}


function onMove(e:MouseEvent):void
{
    //find the mid point between current and last mouse position
    obj.mid_x = ((obj.end_x - obj.start_x) * (1 + mid_point_push)) + obj.start_x;
    obj.mid_y = ((obj.end_y - obj.start_y) * (1 + mid_point_push)) + obj.start_y;
   
    //set start to last point
    obj.start_x = obj.end_x;
    obj.start_y = obj.end_y;
   
    //set end to current point
    obj.end_x = mouseX;
    obj.end_y = mouseY;
   
    //get distance between start and end point
    var distance:Number = Math.sqrt(Math.pow((obj.end_x - obj.start_x), 2) + Math.pow((obj.end_y - obj.start_y), 2));
   
    //set size depending on distance
    var new_size:Number = max_line_width / distance;
    obj.size = (new_size_influence * new_size) + ((1 - new_size_influence) * obj.size);
   
    //draw the line
    graphics.lineStyle(obj.size,_colour,_alpha);
    graphics.moveTo(obj.start_x, obj.start_y);
    graphics.curveTo(obj.mid_x, obj.mid_y, obj.end_x, obj.end_y);
   
    // splotch
    var dd:Number = Math.sqrt(Math.pow((obj.end_x - obj.start_x), 2) + Math.pow((obj.end_y - obj.start_y), 2));

    for (var i:int = 0; i<Math.floor(5*Math.pow(Math.random(), 4)); i++)
    {  
        // positioning of splotch varies between ±4dd, tending towards 0
        var splat_range:int = 1;
        var x4:Number = dd * 1 * (Math.pow(Math.random(), splat_range) - (splat_range/2));
        var y4:Number = dd * 1 * (Math.pow(Math.random(), splat_range) - (splat_range/2));
       
        // direction of splotch varies between ±0.5
        var x5:Number = Math.random() - 0.5;
        var y5:Number = Math.random() - 0.5;
        var d_:Number = obj.size*(0.5+Math.random());
       
        //draw the splotches
        graphics.lineStyle(d_, _colour, _alpha);
        graphics.moveTo((obj.start_x+x4), (obj.start_y+y4));
        graphics.lineTo((obj.start_x+x4+x5), (obj.start_y+y4+y5));
    }
}

Spray Paint stenciling in Flash

After seeing the Wii Spray demo videos a year or so ago I have since been wondering how they did the stencils. I couldn’t find any information on how to achieve an effect like paint stenciling so today I decided to give it a shot myself. Below is a small demo where you can have a go and spraying some stencils. Instructions are in the bottom left corner. Here is how it works:

Layers (top to bottom):

  1. Draw Layer Bitmap – contains BitmapData where the spray paint is drawn
  2. Stencil MovieClip – the stencil you see on screen containing artwork with transparency
  3. Stencil BitmapData – stencil is drawn to this bitmap data (not added to display list)
  4. Canvas Bitmap – where final artwork is drawn to

The process

  1. when stencil is moved and placed somewhere, the Stencil BitmapData is filled with red, then the Stencil MovieClip is drawn on top.
  2. you then paint with the mouse – paint is drawn to Draw Layer Bitmap
  3. on mouse up a Temporary BitmapData is created
  4. it then loops through all pixels in Stencil BitmapData – if pixel is Red: copy corresponding pixel from Draw Layer Bitmap to Temporary BitmapData
  5. when the loop is complete draw the Temporary BitmapData to the Canvas BitmapData
  6. Draw Layer Bitmap is then cleared

Get Adobe Flash player

Multitouch Paint – Part 2

Here is an updated version of my MT Paint application. Some of the improvements are:

  • New UI (work in progress)
  • Custom canvas size
  • Up to 5 Layers with Merge and Duplicate
  • Layer Blend Modes, Opacity and Visibilty
  • Load in Image to layer
  • Get Colour From Layer – select a layer to live sample colours from
  • Improved performance
  • Hardness and Opacity works on brushes
  • Eye Dropper colour selection tool (currently selects from selected layer, not whole image)
  • Rename layers

Note: Currently the application is best displayed on a screen at 1920×1080, it will still work on lower resolutions but some parts may be cut off.
Note 2: You can use your mouse too if you don’t have a touch screen!

Download AIR Installer

DSI Multitouch construction – Part 4.5

This is just a small update with a few new photos… I’ve have now painted the table top black, I used a matte black spray paint (because I think its easier to get an even colour with) and then went over the top with a clear gloss. A also made a temporary top cover and painted it black also, eventualy this will either be gloss black perspex or I had an idea of having a clear frame and putting interchangeable frame designs on paper under it.

Preparing for paint.

Undercoat – 1 can of white primer

Black – 1 can of matte black, 1 can of Clear coat

An early version on my multitouch paint app.

Here are some more demo videos form my MT painting app…

Spray Paint with a spray can controller i made.

Painting and paint mixing using a paint brush.