Drawing API and Mouse Events

DrawingAPI
Click on the image to see the example and get the code.

A pair of days ago I found the blog of Sorin Haidan in wish he post some very useful tutorials on Flash and Actionscript 3.0 in a very understandable way, I found one that caught my attention called Draw Custom shapes with ActionScript 3.0. In this tutorial he explains how to make a “Ball” appear on screen every time you click and move your mouse on the screen by using the Drawing API and MouseEvents, the change of the color on the ball was achieved doing a loop in a 10 frame movie clip with a ball of different gradient fill on each frame, so occurred to me to wrap that code on a class on a Flex 3 Actionscript Project and get rid of the Flash assets by drawing the ball in a dynamic way and this let me Change the color of the Ball more than the 10 times of Sorin example, so check the example be sure to check Sorin’s blog .
In my example if you right click on the file you get to see the source that it’s also included below this text here’s what I got: Drawing API Ball Example.

Thanks Sorin for letting me mess around with his code keep up with those good tutorials.

?View Code ACTIONSCRIPT3
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
/*
/////---- Class by Dave Ga?mez (.swfgeek) 24-February-2008 http://www.swfgeek.net----\\\
///---- Original Example by: Sorin Haidan in his  Draw Custom shapes with ActionScript 3.0. Tutorial ----\
///---- Found on his blog http://biochimistu.blogspot.com/ ---- \
*/
 
package {
 
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import com.adobe.viewsource.ViewSource;
 
    [SWF(backgroundColor="0x000000",frameRate="31")]
 
    public class DrawingAPI extends Sprite
    {
        private var sprite:Sprite;
        private var holder:Sprite;
        private var myCircle:Sprite;
        private var fillType:String;
        private var colors:Array;
        private var alphas:Array;
        private var ratios:Array;
        private var matr:Matrix;
        private var spreadMethod:String;
        private var focalPointRatio:Number;
 
        public function DrawingAPI()
        {
            init();
        }
 
        private function init():void
        {
            ViewSource.addMenuItem(this, "srcview/index.html");
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareToDraw);
 
        }
 
        public function prepareToDraw(event:MouseEvent):void
         {
          stage.addEventListener(MouseEvent.MOUSE_MOVE,drawGraphics);
          stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
 
         }
 
        public function drawGraphics(event:MouseEvent):void
        {
         fillType = GradientType.RADIAL;
         colors = [0xFFFFFF, Math.random()*0xFFFFFF];
         alphas = [1, 1];
         ratios = [0x37, 0xFF];
         matr= new Matrix();
         matr.createGradientBox(100, 100, Math.random()*360, -40, 0);
         spreadMethod = SpreadMethod.PAD;
         focalPointRatio = 1;
         holder = new Sprite();
         addChild(holder);
         myCircle = new Sprite();
         myCircle.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr,spreadMethod);
         myCircle.graphics.drawCircle(0,0,40);
         myCircle.graphics.endFill();
         holder.addChild(myCircle);
         holder.x = mouseX;
         holder.y = mouseY;
         holder.scaleX = holder.scaleY = Math.random()*2+0.5;
         holder.rotation = Math.random()*360;
         holder.alpha = Math.random()+0.7;
       }
 
        public function stopDrawing(event:MouseEvent):void
       {
        stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawGraphics)
       }
    }
}

ColorMatrixFilter Fun in Actionscript 3.0

ColorMatrixFilter

Based on the great tutorial of Lee Brimelow, called Advanced Filter Effects I started messing around with the ColorMatrixFilter(); an Actionscript 3.0 Class that lets you apply a 4×5 matrix transformation in the RGB color and alpha values to the pixels of an image, and produce a new RGBA alpha value this can be applied to any display object.
So it’s quite addicting messing around with those values and get different results, this example is not at all finished it’s quite buggy still you can get some nice waving effects anyway check it out here:
ColorMatrixFilterExample and be sure to stop by www.gotoandlearn.com Lee has an unique way of explaining things very good and make difficult things look like is a piece of cake.

Papervision3D 2.0 Pixel Effects

Here’s a little try on the new Papervision3D Branch Effects based on the tutorial/example of Andy Zupko, the new pixel effects added to the branch look great, this was made using Flex 3 Beta 3.

3D Cube Pixel

Check it here.
Download Source here

Dragging and Dropping in Actionscript 3.0

Ok this is a little tip for Dragging your clips on Actionscript 3.0, remember how we used a lot of tricks in Flash to drag a clip from other points that weren’t the anchor point , well in Actionscript 3.0 (herenow AS3) is quite simple to do that by using the new Point class.
Class Point.
Package flash.geom
Class public class Point
InheritancePoint Object
Language version: ActionScript 3.0
Player version: Flash Player 9
The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis.

So here’s a very short example made in AS3 in wish no matter where your grab the Sprite, it will be dragged from that specific Point.
Heres the example :

This movie requires Flash Player 10

Open in New Window

Here’s the code:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
bear.addEventListener(MouseEvent.MOUSE_DOWN, startbearDrag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopbearDrag);
bear.addEventListener(Event.ENTER_FRAME, dragbear);
 
var clickOffset:Point = null;
 
function startbearDrag(event:MouseEvent) {
	clickOffset = new Point(event.localX, event.localY);
}
 
function stopbearDrag(event:MouseEvent) {
	clickOffset = null;
}
 
function dragbear(event:Event) {
	if (clickOffset != null) {
		bear.x = mouseX - clickOffset.x;
		bear.y = mouseY - clickOffset.y;
	}
}

Sound Fun with SoundMixer.computeSpectrum();

computeSpectrum

This is an example of how the computeSpectrum works on Flash CS3, I’ts just great the posible things you can make with it , this is based on a great example made by Peter deHaan In my example I just made the spectrum being represented by circles and have a gradient fill across the spectrum here’s the link.

And here’s the script:

?View Code ACTIONSCRIPT3
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
var url:String ="songs/mysong.mp3";
var request:URLRequest = new URLRequest(url);
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request);
var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();
 
var gr:Sprite = new Sprite();
 
gr.x = 20;
gr.y = 200;
 
addChild(gr);
 
var time:Timer = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();
 
function completeHandler(event:Event):void {
	event.target.play();
}
function soundCompleteHandler(event:Event):void {
	time.stop();
}
function timerHandler(event:TimerEvent):void {
	SoundMixer.computeSpectrum(ba, true);
	var i:int;
	// Gradien Fill
	var fillType:String = GradientType.LINEAR;
	var colors:Array = [0xFF0000, 0x0000FF];
	var alphas:Array = [100, 100];
	var ratios:Array = [0x00, 0xFF];
	var matr:Matrix = new Matrix();
	matr.createGradientBox(400, 20, 0, 0, 0);
	var spreadMethod:String = SpreadMethod.PAD;
	// ends fill
	gr.graphics.clear();
	gr.graphics.lineStyle(0, 0xFF0000);
	gr.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
	gr.graphics.moveTo(0, 0);
	var w:uint = 2;
	for (i=0; i<512; i+=w) {
		var t:Number = ba.readFloat();
		var n:Number = (t * 100);
 
		gr.graphics.drawCircle(i, w, -n);
 
	}
}

Kelvin Luck’s Flasher

flashrTest

Yesterday my wife asked me if I could somehow display her flickr archives on her personal website. And to be quite frank I had been playing with the flickr API but never gave me the time to make something real out of it, so I started googling around and found out this great Actionscript 2.0 wrapper called Flashr by Kelvin Luck that makes it easy to develop Flash applications to display and interact with photos on flickr.com.

So this is a very simple example (based on an tutorial of the version 0.4 of Flashr and I updated it to work with the current version (0.5)) of what can be done with Flashr but I plan to add more functionality and eyecandy to it (I’ll upload the result of that).

I almost forgot here’s the script that make this work:

?View Code ACTIONSCRIPT
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
import com.kelvinluck.flashr.core.Flashr;
import com.kelvinluck.flashr.core.Photo;
import com.kelvinluck.flashr.core.Photoset;
import com.kelvinluck.flashr.core.Person;
import com.kelvinluck.flashr.core.FlashrResponse;
import com.kelvinluck.util.LogWrapper;
import com.dynamicflash.utils.Delegate;
 
class com.cecymeade.UserRecentPhotos {
var xMax:Number = 214;
var yMax:Number = 214;
var xTemp:Number;
var yTemp:Number;
var apiKey:String = "Your Flickr API key here";
var userNsid:String = "90349680@N00";
var _target:MovieClip;
 
function UserRecentPhotos(target:MovieClip) {
Stage.scaleMode = "noScale";
LogWrapper.getInstance().init();
LogWrapper.getInstance().addTracePublisher();
_target = target;
var _flashr:Flashr = Flashr.getFlashr();
_flashr.apiKey = apiKey;
var _flashrResponse:FlashrResponse = new FlashrResponse();
_flashrResponse.setSuppressOutput(true);
_flashrResponse.onPeopleGetPublicPhotos = Delegate.create(this, onPeopleGetPublicPhotos);
_flashr.peopleGetPublicPhotos(userNsid, null, 16, 1);
}
 
function onPeopleGetPublicPhotos(p:Person):Void {
var photosArray:Array = p.getPhotos();
var userNsid:String = p.nsid;
for (var i:Number = 0; i
var thisPhoto:Photo = Photo(photosArray[i]);
var mc:MovieClip = _target.createEmptyMovieClip("photo"+i, i);
mc._x = 1+(i%4)*76;
mc._y = 1+Math.floor(i/4)*76;
mc.createEmptyMovieClip("jpgHolder", 1);
mc.jpgHolder.loadMovie(thisPhoto.thumbnailUrl);
mc.xMax = xMax;
mc.yMax = yMax;
var freeDepth = (_root.getNextHighestDepth());
mc.onRollOver = function() {
xTemp = this._x;
yTemp = this._y;
this._x = Math.min(xTemp, xMax);
this._y = Math.min(yTemp, yMax);
this.swapDepths(freeDepth);
this._xscale = this._yscale=120;
};
mc.onRollOut = function() {
this._x = xTemp;
this._y = yTemp;
this._xscale = this._yscale=100;
};
mc.photo = thisPhoto;
mc.onPress = function() {
getURL(this["photo"].photoPageUrl, "_blank");
};
}
}
 
public static function main():Void {
var u:UserRecentPhotos = new UserRecentPhotos(_root);
}
 
public function toString():String {
return "[com.cecymeade.UserRecentPhotos]";
}
 
}

[snippet=6312]

FuseFX Audio Example

Here’s a little try on the new FuseFX:
( Based on the FuseFX Download Example )

Here’s a little try on the new FuseFX:
( Based on the FuseFX Download Example )

Example of FuseFX

?View Code ACTIONSCRIPT
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
import com.mosesSupposes.fuse.*;
import com.mosesSupposes.fusefx.*;
import com.mosesSupposes.util.*;
 
ZigoEngine.register( PennerEasing );
FuseFX.register( MixerFX );
 
var s:Sound = new Sound();
s.attachSound("librarySound");
s.start(0, 10);
 
volUp_mc.onPress = function():Void {
	this._parent.fadeUp(0, 2);
	this._alpha = 50;
	ZigoEngine.doTween(this, "_alpha", 100);
}
volDown_mc.onPress = function():Void {
	this._parent.fadeSound(0, 2);
	this._alpha = 50;
	ZigoEngine.doTween(this, "_alpha", 100);
}
function fadeUp(endVolume:Number, seconds:Number, ease:String):Void {
	if (volume!=100) {
		volume = 150;
	}
ZigoEngine.doTween(s, MixerFX.VOLUME, volume, seconds, ease);
 
}
function fadeSound(endVolume:Number, seconds:Number, ease:String):Void {
	if (volume !=null) {
		volume = 0;
	}
ZigoEngine.doTween(s, MixerFX.VOLUME, volume, seconds, ease);
}