Flash Player 10.2 Beta (Native bitmap-based cursors)

One of the new features of the Adobe Flash Player 10.2 is the Native bitmap-based cursors this will let You get rid of the Mouse.hide(), onMouseMove() handler  or starDrag() to display a custom cursor in your Flash projects. You can now directly assign your own custom cursors. So here’s a sample extending Thibault Imbert’s

1.- First we embed the assets( the images that we will be using as our custom cursors) and  an int var that we will be using to switch our cursors.

[Embed (source="/assets/126.gif" )]
public static const NativeCursor:Class;
[Embed (source="/assets/cat1.png" )]
public static const CursorFrame1:Class;
[Embed (source="/assets/cat2.png" )]
public static const CursorFrame2:Class;
[Embed (source="/assets/cat3.png" )]
public static const CursorFrame3:Class;
[Embed (source="/assets/cat4.png" )]
public static const CursorFrame4:Class;
[Embed (source="/assets/cat5.png" )]
public static const CursorFrame5:Class
protected var _state : int = 0;

2.- Then on the class constructor we add the click mouse event listener so on each user click we toggle the cursor.

public function NativeCursorTest() {
  stage.addEventListener(MouseEvent.CLICK, _onClick);
  toggle();
}

3.- The methods that create our cursors this is exactly the same code that Thibault’s sample just divided in two methods so You can see the animated and static cursor working.

private function createNativeCursor() : void {
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursor bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
   // we create the bitmap cursor (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var bitmap:Bitmap = new NativeCursor();
   // we pass it to the bitmapDatas vector
   bitmapDatas[0] = bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse with an alias
   Mouse.registerCursor("myCursor", cursorData);
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myCursor";
}

private function createAnimatedCursor() : void	{
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursors bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(5, true);
   // we create the bitmap cursor frames (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var frame1Bitmap:Bitmap = new CursorFrame1();
   var frame2Bitmap:Bitmap = new CursorFrame2();
   var frame3Bitmap:Bitmap = new CursorFrame3();
   var frame4Bitmap:Bitmap = new CursorFrame4();
   var frame5Bitmap:Bitmap = new CursorFrame5();
  // we pass it to the bitmapDatas vector
   bitmapDatas[0] = frame1Bitmap.bitmapData;
   bitmapDatas[1] = frame2Bitmap.bitmapData;
   bitmapDatas[2] = frame3Bitmap.bitmapData;
   bitmapDatas[3] = frame4Bitmap.bitmapData;
   bitmapDatas[4] = frame5Bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse
   Mouse.registerCursor("myAnimatedCursor", cursorData);
   // we just pass a frame rate
   cursorData.frameRate = 5;
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myAnimatedCursor";
}

4.- And finally our Mouse event listener and the toggle method that makes all that cursor magic switch happens.

private function _onClick(event : MouseEvent) : void {
	// we call the toggle function to switch between our mouse cursors
	toggle();
}

private function toggle() : void {
	switch (_state) {
	   case 0:
		// we set the static cursor
		createNativeCursor();
		_state = 1;
		break;
	   case 1:
		// we set the animated cursor
		createAnimatedCursor();
		trace(_state);
		_state = 0;
		break;
		default:
	}
}

Hope this helps You and in case you haven’t already go to adobe labs and download the Flash Player 10.2 beta.

Almost forgot here’s the example: ( You’ll need Flash Player 10.2 in your browser to see it).

Using Flex PMD in FlashDevelop 3

FlashDevelop 3

Adobe recently made available Flex PMD a tool that lets you keep track of your code bad practices and helps you  by auditing your source directory and displaying  common errors such as:

  • Unused code (functions, variables, constants, etc.)
  • Inefficient code (misuse of dynamic filters, heavy constructors, etc.)
  • Over-complex code (nested loops, too many conditionals, etc.)
  • Over-long code (classes, methods, etc.)
  • Incorrect use of the Flex component lifecycle (commitProperties, etc).

A report is produced describing the violations of a given rule set. FlexPMD includes a rule set that is broad ranging and continually growing. It is also straightforward to create your own new rules.

Originally Flex PMD can be called from: Ant, The Command Line and Maven, but thanks to the FlashDevelop (FD3 from now on ) community a plugin has been made available that lets you use FlexPMD in the FD3 IDE and throws the result right in the Output and Results window of FD3.

flexpmdinfd3

Installation

1. Download flashdevelopPMD from http://www.kemelyon.com/flashdevelop/flashdevelopPMD.zip

2. Copy PMD.dll into the plugins folder of your FD Application Files.

fdsettings

fdplugins

3. Download flexPMD from Adobe Labs (http://opensource.adobe.com/wiki/displa … /Downloads) and extract to your disk.

adobeos

Set “PMD jar Location” in Tools -> Settings -> FlexPMD to your “flex-pmd-command-line-1.0.RC3.jar”

flexpmdlocation

Usage

Press Ctrl-Shift-A to run FlexPMD in current Project. This version only checks code inside the “src” folder, so you don’t see warnings in your libraries.

To use your own ruleset, set “PMD Ruleset” in Tools -> Settings -> FlexPMD

Thanks again to the FlashDevelop community for spending time in making this useful plugins.

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

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