.swfgeek

Flash CS4

The new version of Flash has arrived along with the rest of the creative suite applications, this version of Flash comes with many  enhancements and it seems that Flash designers and Animators are going to love this version, for developers it’s not fresh news because they been able to download and test the new capabilities of the Flash Player 10 Beta from Adobe Labs.

To give a more detailed review I will have to test it first but here are some of the new features:

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.

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)
       }
    }
}

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.

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 :

Open in New Window

Here’s the code:

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;
	}
}

A great update for Flash Lite Developers

Author, test, and publish mobile content for the latest release of Flash Lite software, which can support video (FLV) and rendering of SWF files for Flash Player 8 when integrated within a mobile phone or embedded web browser. Authoring support for Flash Lite requires both an update to Device Central CS3 as well as an update to Flash CS3 Professional software.

Download the update for Flash CS3 here
Download the update for Device Central CS3 here