Tuesday 20 October 2009

Drawing API update

I did some experiments with attaching a movie clip to use as a drawing mechanism. Below is a link to a tutorial which is in AS2 that is inspiring. My idea after seeing this was to grab a paint or charcoal mark from Corel painter and use it instead of the flower. The problem with this approach is that each of the marks is a blob
http://www.gotoandlearn.com/play?id=16
Here is the swf that I made, CLICK ANYWHERE BELOW and you will see that you can draw with the mouse. The problem with this experiment is that I want the line to be fluid and not blobs, although they are a very interesting and unusual drawing medium. Also this file is AS2 and I am unhappy with the motion detection results that I could achieve in AS2 and have decided to go with AS3 (for now). This is gives me the opputunity of learning some AS3, it will probably render AS2 obsolete sooner or later.


The way forward is to make use of new filters that are available for flash Player 10. Adobe have extended the classes so that it is possible to add blur effects, drop shadows and the like to movie clip objects. I have taken the original motion detection files which have a simple movie clip that follows the motion and then added a drawing API to the movieClip. This was problematic in so far as I had to find resources that explained how to make the drawing API with AS3 (which I did), In fact the code is similar to AS2 except that the graphics class has to be imported and then the lineTo and moveTo tags have to reference the graphics class as follows:

import flash.display.MovieClip;

graphics.lineStyle(50, 0xbb00ff, 50);
graphics.moveTo(myCursor.x+2, myCursor.y+2);
graphics.lineTo(myCursor.x, myCursor.y);


Once I had this code working, the next step was to figure out how to change the properties of the line styles, the whole point of this drawing app is to make different marks.
It turned out that the effects class can only be attached to movieClip not directly to the lineStyle, so I 'grew' a new movieClip and put attached the drawing API to it.
as follows
var myDrawing:MovieClip = new MovieClip();
addChild(myDrawing);   
myDrawing.graphics.lineStyle(50, 0xbb00ff, 50);
myDrawing.graphics.moveTo(myCursor.x+2, myCursor.y+2);
myDrawing.graphics.lineTo(myCursor.x, myCursor.y);

Once the api is attached to a myDrawing, it is then possible to add properties to myDrawing and therefore the API.
as follows;
var filterList:Array = myDrawing.filters;
filterList.push(new BlurFilter(30,30,20));
myDrawing.filters = filterList;

which adds blur. The next step is to see how this works once it is projected onto a big screen, because I have the feeling that the movement will be affected once the whole thing is scaled up.
For the time being here is the swf of where I am at.

No comments:

Post a Comment