Wednesday 28 October 2009

changing stroke of drawing

I kind of gave up with the color picker component for the time being and decided to work on a more simple change; to change the line style and filter which is activated by a 'hot' movieclip.
I went back to the work done by Dan Zen, because he has an example of a static button that is changed by touching it. see the link below for a demonstration, I have not included the video here because I already posted it on an earlier entry.
http://ostrichflash.wordpress.com/video/
Through Dan Zen's work, I gained 'proof of concept', but I was fairly sure that instead of using his classes which replace usual mouse events such as mouseOver, mouseOut etc, I can use hitTest, since I no longer have a 'mouse'. My reasoning here is that since I am only starting to learn AS3 it is easier to use a function that I am already familiar with and the code is basically the same for AS2 and AS3.
As I mentioned before, I have attached the drawing api (graphics.lineTo and moveTo) to a movie clip called myDrawing.
I therefore built another movie clip called myButton and did a hitTest between the two. Since I want the hitTest to remain 'true' I did not include an 'else' statement. I then made another movie clip called redDrawing and assigned a different filter and line style to it. The function that calls the hitTest then attaches the child of redDrawing if the hitTest is true.

Also just a quick note to say that I put a round white circle on the cursor to make it easier to see where it is, it will be removed in the final application

The code follows:

myDrawing.addEventListener(Event.ENTER_FRAME, changeStroke);
function changeStroke(e:Event):void{
    if (myDrawing.hitTestObject(myButton)){
        trace("hit");
        var redDrawing:MovieClip = new MovieClip();

        redDrawing.graphics.lineStyle(30, 0xff6347, 50);
        redDrawing.graphics.moveTo(myFairy.x+2, myFairy.y+2);
            redDrawing.graphics.lineTo(myFairy.x, myFairy.y);
            var dropShadow:DropShadowFilter = new DropShadowFilter();
dropShadow.color = 0x000000;
dropShadow.blurX = 10;
dropShadow.blurY = 10;
dropShadow.angle = 0;
dropShadow.alpha = 0.5;
dropShadow.distance = 10;
var filtersArray:Array = new Array(dropShadow);
redDrawing.filters = filtersArray;
addChild(redDrawing);

And here is the result:



As you can see the hitTest works, but there are a few problems still to resolve. Firstly it seems like the myDrawing movie clip is still there even though it is barely visible. Secondly and more frighteningly it is now clear that the movie clip that holds the api is creating a new api every time it enters a frame, so that the drawing is contained only within the movie clip. Since I need the drawing to be a continuous line this will not suffice. I am going to look back thru my previous api files and see what i can come up with. I am however happy with the strange effects that are produced with this current method, and am wondering if there is a way of increasing and decreasing the size of the blobs as the go away or get nearer to the center of the drawing environment so that they will become like 3d objects. Given that there is now a z co-ordinate available in flash it might be worth a little time experimenting....

Sunday 25 October 2009

color picker

Today I have been trying to integrate a color picker into the application so that the line can change color. I am now committed to using AS3, which offers a color picker component. I managed to figure out how to include it in the application and to target the drawing api movie clip (called myDrawing) as the beneficiary of the color changes.
Here is the code:
//remember to import the class!!
cpColor.addEventListener(ColorPickerEvent.CHANGE,changeColor);
            function changeColor(evt:ColorPickerEvent):void {
    var newColorTransform:ColorTransform = myDrawing.transform.colorTransform;
    newColorTransform.color = evt.color;
    myDrawing.transform.colorTransform = newColorTransform;
}
Unfortunately it doesnt quite work because in order to activate the color picker, it has to be 'clicked' which is not possible for a cursor that is being controlled by motion detection. So although I know that in theory it will work, I need to figure out how to make it activate using a MouseOver event instead. Progress hopefully will follow soon.