Well, drawing anything in ActionScript 3 can be accomplished by the lineTo() function, and it would have to run off an ENTER_FRAME event, so that gave us the skeleton functionality of our code…

I also needed something to draw in, so I need a Sprite, and I also need to hold an x and y co-ord, so at the top of my code I put…

var plotSprite:Sprite = new Sprite();
plotSprite.x = stage.stageWidth/2;
plotSprite.y = stage.stageHeight/2;
addChild(plotSprite);
var myX:Number = 0;
var myY:Number = 0;
plotSprite.graphics.lineStyle(.5,0xff0000);

And then I paused and thought – How do we plot a sine wave?

Well I knew we were plotting x vs y, so remembering my O level maths, all we needed was a simple sine function. And all we needed to do now was translate that into usable code. The lineTo() function takes an x and y, and since the equation we need is y = sinx, which is y = sin(x), our code now becomes…

Now we are going to plot a new dot on every ENTER_FRAME, and the dot needs to move, which means we need to change our x co-ord…

import flash.display.Sprite;

import flash.events.Event;

import flash.display.Shape;

import flash.filters.DropShadowFilter;

var plotSprite:Sprite = new Sprite();

plotSprite.x = stage.stageWidth/2;

plotSprite.y = stage.stageHeight/2;

addChild(plotSprite);

var myX:Number = 0;

var myY:Number = 0;

var dropShadow:DropShadowFilter = new DropShadowFilter();

dropShadow.color = 0xcc0000;

plotSprite.filters = [dropShadow];

plotSprite.graphics.lineStyle(.5,0xff0000);

stage.addEventListener(Event.ENTER_FRAME,plotCurve);

function plotCurve(e:Event):void

{

plotSprite.graphics.lineTo(myX*30,Math.sin(myX)*30);

myX+=.1;

plotSprite.x-=3;//this line is to move the curve back whilst new points are being drawn

plotSprite.rotationY+=1;

}

…and voilá this is what we get…

Other things to try are getting it to rotate around a centre, having the curve fade off (ratter than have it move back), and maybe plot other curves and add other options.

It was a nice simple and fun exercise, and here are the source files if you are interested…

sine_plot

What I normally do is create a new Actionscript project on my mac. Create and test the files and get everything ready for the training.

Then I copy the whole project folder onto a training pc, and sometimes I end up with problems. For example…

I frequently copy a project and then paste it. then I re-name the project and also the main as file to the new project name. But doing this can cause problems sometimes…

…when copying and pasting projects you end up with copies of previous projects still in the bin-debug folder (which will bloat up your project size)

…and also there occasionally seems to crop up a problem whereby the project still looks for another as file (say Example13.as) when the project is Example15, and has been named as such, and the main application as file has been set as such. The project seems to get stuck.

So I found that if you go to Project > Clean… and clean your projects, this should get rid of most of your problems.

The main issue that I could not seem to get rid of (sometimes) is that when you go to the properties of your project and look at the Application ActionScript section – you get a link to the old as file. Flash Builder knows it has been deleted, but it is still there. If you remove it from the list, something in the project still looks for it, and refuses to run your application without it.

The only solution I found then was to create a brand new project, name it how you want, and then copy/paste your code over.

So cleaning your Flash Builder projects seems to help a lot with problems like these, but not always.

I hope this helps everyone who gets issues like those mentioned above, and if anyone has any better solutions let me know.

Blueprint – a Flash Builder Extension, allows you to search the web for examples of code, directly within Flash Builder.

For example, suppose you are  tweening and want to see what examples you can find regard the Tween class. Just highlight Tween and press CTL-B (Mac) or Alt – B (PC).

This brings up the Blueprint panel, with the search results.

Now you will the results of a web search regarding the code you highlighted.

You can further refine your query by typing in additional terms, resize the Blueprint window to see more, and use the down arrow key to see the next example.

If you find something you like, just highlight it and press return and the code will be pasted into your file.

You do not have to highlight anything, you can just type something in a line and press CTL-B or just press CTL-B and type in something.

If you find something important, the current search can be pinned as a separate panel (just click on the pin icon top-right), so you can have it there permanently.

To install Blueprint just add the following to your software updates, as a new remote site…

http://download.macromedia.com/pub/labs/blueprint/fb4/

… and install. Here are the installation instructions…

http://labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions

This looks like a lovely utility and seems to work well, I would advise everyone to try it out and see for yourself.

However someone recently asked me what about video? Can we use them to hold video data?

Well, pre-flash player 10.1 the answer is no. But now with flash player 10.1 you can use ByteArrays and videos with Actionscript 3. The methods concerned are…

appendBytes()

appendBytesAction()

…running off the NetStream class.

I have not used them myself yet but it looks like to you may be able to now create, edit, and send your own video data (flvs only at this point from what I can make out). Something I will definitely keep an eye out for in the future.

I have also given it a bounceEffect() and bounce() public methods.

These will give a bounce effect when it hits a boundary and the latter will make it move and bounce from the boundaries.  The boundary at the moment is just stage.stageWidth and stage.stageHeight, but I plan on allowing an object to be sent so that the instance can use its hight and width as the boundaries for bouncing.

There are also some getters and setters dealing with colour and radius, etc.

To stop the movement I created a haltObject() public function.

I just threw this together in a few minutes but I find it very useful so I thought I would share it with everyone.

Ball

Here is an example of its use…

var myball:Ball = new Ball();

addChild(myball);

myball.bounceEffect();

myball.bounce();

If anyone finds any issues, please let me know and I will update it, and if you find it useful let me know as well. I am sure that it is not perfect

Any thoughts on improvements and additions I will also be happy to receive.

Also note that i have zipped up the file as a Flash Builder project, so that you can just import the whole project if you use Flash Builder. Otherwise just go to the src folder and dig out Ball.as

The major differences that I have found so far, are related to how to setup your world and your bodies (bearing in mind that I have only just started with Box2DFlash, and do not know the previous versions).

It took me a while to get my head around the Box2DFlash 2.1 relationship between fixtures, shapes, and bodies.

So here is a simple graphic that I have created, showing the relationship between a b2Body (your body), a b2BodyDef (body definition, holding information like angle, userData, position, etc), a b2FixtureDef (fixture definition holding information about the physics of the object, i.e. friction, restitution, density, and shape, etc), and a b2PolygonShape (if you are using polygons, and this holds information about the actual shape of your body).

This is to be considered a work in progress, and as I continue with Box2DFlash I may change this.

But for now use it as a good approximation and aide memoire.

Box2DFlash body overview

A lot of games use Box2DFlash and so I thought it was about time to play around with it.

Also, i thought it would be a nice idea to blog about my progress. I will be using Flash Builder 4 (beta) to do all my work in, but the files can be used in Flash, or a.n.other development environment.

Firstly you will need to download the files from here…

http://sourceforge.net/projects/box2dflash/develop (svn)

…or from here…

http://box2dflash.boristhebrave.com/download

Check the latter link to see various examples of how you can use this engine.

The download also contains some test files, so if you do download them, have a look at the test files – these will give you an insight in how things work.

I will also be using the latest version, 2.1a, and a word of warning – there is a massive difference between this version and previous versions. As a result, most of the tutorials you will see on the web will not work with 2.1a, so i thought i would use this as an excuse to investigate Box2DFlash 2.1a and see how i can play around with it.

So i will be using Box2DFlash to create various projects in Flash Builder and i will post the code and the results here.

See you soon!

Here are some particle systems that I came across in the process…

Flint
Pulse
Desuade
Stardust

…the latter is a new system, and I must say that I am impressed.

It is a nice system, easy to use, good documentation, and some lovely demos.

In particular, have a look at this one…

Butterflies

Check Stardust out, you will not be disappointed.

You will need some basic as3 knowledge, but you can quickly get results with a minimal amount of coding, and there are some lovely examples on the HYPE website.

Have a look at it and let me know what you think

hype

Window > Preferences > General > Appearance > Colours & Fonts > Basic > Text Font

For the background colour and stuff like that you go to …

Window > Preferences > General > (and click on the text) Text Editors

At the bottom of the panel you will now Foreground colour, Background colour etc.

One to be aware of – Flash Builder/Eclipse has a somewhat non-standard interface compared to most apps that run on a mac (or a pc for that matter). For example, the Preferences in the Window menu has no ellipsis (…) which is used to indicate that a dialog will appear.

Also, you can click on a Preference title (like Text Editors) and you will see choices, as well as clicking on all the options below a title. So it can be confusing as to where things are and how to access them.

Anyway, enjoy.