Matan Uberstein´s Auto Flash Class Panel

The Auto Flash Class Panel is an extension for Flash CS5  that will let You get rid of the tedious work of naming Your library items and believe Me when you working with small projects this is something that you can do by yourself without much effort but as projects get bigger and the amount of things you have to give a class name for working with them in ActionScript the task can really become tedious and cumbersome. Enter Matan Uberstein’s Auto Flash Class Panel.

The panel will let You select and give class names to your library items with a few clicks (literally), for installation You must have the Adobe Extencion Manager if you don’t have it already installed You can download it from here.  To start using the Auto Flash Class Panel you can get the version 2 here.

Once You have it installed fire up Flash and open the panel in Window>Other Panels>AutoFlashClassPanel the the panel is packed with a rich interface split into two sections (see Fig. 1), Selector and Classer. The Selector section automatically selects all the library items that match your criteria. Choose from MovieClips, Bitmaps, Sounds, Fonts or Buttons. Once you are happy with your selection of library items, you simply use the Classer section to automatically insert class, base class and tick the ‘export’ checkbox.

Fig. 1

One of the cool features is that the Class and package names are generated form your library folder structure so to get  your classes in the proper packages all you need to do is to sort your library items in those folders e.g. “com.swfgeek.robotlegs.views.MainAnimation” ( see Fig. 2).

Fig. 2

With one simple click your library is ready for export. Saves you the effort of right clicking on the library item going to properties, ticking the ‘export’ checkbox and typing in the package/class name. In the Classer section you can adjust the base class of your items( see Fig. 3)

Fig. 3

The Auto Flash Class Panel is also fully customizable, to modify how it works or add your custom base classes to the menu click the settings button and customize how you want the panel to work and function(see fig. 4).

Fig. 4

The panel was built with Robotlegs, AS3Signals, MinimalComps and FDT4. I’ve been using it  in my diary projects workflow for over a week now and it’s a really time saver, check out Matan’s post about it and be sure not to miss his upcoming presentation on Asset Loader this  17th of December.

Here’s a video by Matan on how to use the panel.

Don’t be shy and give it a try  You won’t regret it 😉

Using Flash Player 10.2 in FDT4

In this post I will tell You how you can start playing with the new features of the Flash Player 10.2 Beta in FDT 4. I started using “Flash Builder Burrito” for the examples that I’ve been posting but I really missed the quick code hints and mostly the auto-import features of FDT4 that let me explore the new SDK without leaving my code to read the documentation, that said let’s move on.

Figure 1.

1.- The first thing You need to do is go to the Hero Stable Builds table and download the Flex SDK  build 18623 from there.

I usually have all my SDKs located in the same place in my disk “C:\SDKs” but You can put it on the desktop for easy location, once you have downloaded it decompress the zip in the location you chose. (Note: These builds do not contain any Hero mobile features or runtimes but it appears that the flex.swc that should be located in \frameworks\libs  is also missing you’ll need to include this from a previous build or FDT will output errors when adding the SDK to your project ).

Figure 2.

2.- Open FDT4 and go to >Window>Preferences and open the FDT tab and select Installed SDKs from that menu as shown in figure 3.

Figure 3.

Click on the Add  button and the SDK definition Panel will pop up select the directory where You have downloaded the Flex Hero SDK, if you have a previous Flex Hero SDK installed be sure to give a different name I called mine Flex Hero ( Flash Player 10.2  Beta).

Figure 4.

3.- Go to >File>New>New Flash Project select Empty AS3 project give your project a name and click the next button that will take You to the Flash Project Settings  in the SDK Configuration select your newly added SDK( see figure 5.) you will see that the Player Version changes to 10.2, click finish.

Figure 5.

4.- Right click in the project You just created select properties, go to the FDT Compiler menu and change the -target-player from “playerVersion” to “11”  this will let you test your projects without getting any version errors.

EDIT:   In this step You don’t need to change the “-target-player” argument leave it as is it will use the 10.2 version but you need to add the “-swf-version=11” argument, that way it won’t show errors when compiling.( Thanks to John Olson for pointing it out).

Figure 6.

5.- That’s it now You can test and compile the features including in the beta of  the Flash Player 10.2 and get  all the coding comfort of FDT4.

Figure 7.

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

Flash Player 10.2 Beta – StageVideo CPU Performance Test (Video)

Flash Player 10.2 Beta – StageVideo CPU Performance Test from Dave Gamez on Vimeo.

This is a example of the StageVideo API performance on Windows 7 (The microphone got messy on me so there’s no audio but anyway You get to see on the monitor how the new Flash Player 10.2 performs).

If You wan’t more info on how to start making some test on Your own reading the Getting Started with stage video article on the ADC by Thibault Imbert will be a good point to start.

Switching from FlashDevelop 3 to Powerflasher FDT 4 pt.1

I switched from FlashDevelop to Powerflasher FDT 4 beta about 2 months ago and have a lot of things to say about what a great decision it was, I intended to write a series on posts on how to made that move before but unfortunately i haven’t had the time it deserves, so on the next few posts i will cover some tips and tricks that will hopefully will show You how easily and fast is to make that switch and start enjoying truly coding comfort in no time, believe me it’s worth the try.

Using HYPE Framework’s ContextSavePNG

One of the first things You want to do when playing with the HYPE framework is to output your creations to a printable file and guess what?  Joshua and Branden have already think on that, hype includes a the class ContextSavePNG that will let you output your hype generated images to a printable .png. Here’s a simple example on how to use the ContextSavePNG class of the hype framework.

For this short example i’m using one of the files included in the hype framework zip that You can download here “\hype-hype-605a391\examples\Flash\SimpleBallistic\02_simpleBallistic.fla”

Here’s the ActionScript code of that file:

?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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/***********************************************
 
	HYPE
	http://www.hypeframework.org
	developed by Branden Hall and Joshua Davis.
 
************************************************/
 
import hype.extended.behavior.SimpleBallistic;
import hype.extended.color.ColorPool;
import hype.extended.trigger.ExitShapeTrigger;
import hype.extended.trigger.RandomTrigger;
import hype.framework.core.ObjectPool;
import hype.framework.core.TimeType;
import hype.framework.display.BitmapCanvas;
import hype.framework.rhythm.SimpleRhythm;
 
MyExitShape.visible = false;
 
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
 
var bmc:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
addChild(bmc)
 
var clipContainer:Sprite = new Sprite();
 
var color1:ColorPool = new ColorPool(
	0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409
);
 
var color2:ColorPool = new ColorPool(
	0xFFFFFF, 0xCCCCCC, 0x999999, 0x666666
);
 
var pool:ObjectPool = new ObjectPool(MyCircle, 800);
 
function addNextClip(r:SimpleRhythm) {
	var clip:MyCircle = pool.request() as MyCircle;
 
	if (clip != null) {
		clip.x = myWidth / 2;
		clip.y = 100;
 
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.3);
 
		color1.colorChildren(clip);
 
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
 
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 2, 3, 0.25, 90);
		ballistic.start();
 
		// exit callback function, target Object, shape, shapeFlag
 
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
		onExit.start();
 
		var randomSplit:RandomTrigger = new RandomTrigger(onSplit, clip, 50);
		randomSplit.start();
	}
}
 
function onExitShape(clip):void {
	clipContainer.removeChild(clip);
	pool.release(clip);
}
 
function onSplit(parentClip):void {
	var clip:MyCircle = pool.request() as MyCircle;
 
	if (clip) {
		clip.x = parentClip.x;
		clip.y = parentClip.y;
 
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.05);
 
		color2.colorChildren(clip);
 
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
 
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 4, 6, 0.2, 90);
		ballistic.start();
 
		// exit callback function, target Object, shape, shapeFlag
 
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
		onExit.start();
	}
}
 
var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip);
rhythm.start(TimeType.TIME, 1);
 
pool.onRequestObject = function(clip) {
	clipContainer.addChild(clip);
}
 
bmc.startCapture(clipContainer, false);

The first thing you need to save your actionscript generated visuals to an image file is to import the ContextSavePNG class.

?View Code ACTIONSCRIPT3
1
import hype.extended.util.ContextSavePNG;

Then just before the line were you start capturing your clip into the bitmap canvas you call the setupLargeCanvas method of the BitmapCanvas class, by setting the argument to 10 you are telling hype that the output image will be the orginal size of your swf times 10, so in this example the original .fla size is 640 px width x 360 px height the exported .png will be 6400 px width x 3600 px height, pretty cool right ? with a file this size you could print a poster once you export the file to. png that in other form will be very hard to output an image that size.

?View Code ACTIONSCRIPT3
1
bmc.setupLargeCanvas(10);

Next you need to create an instance of the ContextPNG class and pass it the parameter of the BitmapCanvas you want to encode in this case the bmc. Now at the time that you run your .swf and hit the right click you will get the EncodePNG button when you click it your hype animation will pause and a small progress bar will appear in the center of your .swf indicating that the bmc is being encoded after that the button will change to SavePNG and when you hit that button vuala you have an scaled up transparent .png file out of your .swf.

?View Code ACTIONSCRIPT3
1
2
var savePNG:ContextSavePNG = new ContextSavePNG(bmc);
bmc.startCapture(clipContainer, false);

Don’t forget to check out http://www.hypeframework.org/blog for more information and the latest updates on HYPE.

See You around and happy coding.

Adobe Flash CS5 Review pt 3: The Code Snippets Panel

So for the third part of this series and I guess the last now that Adobe released the CS5 and You can explore the new Flash CS5 by Your own, in the above video I’m showing you the ActionScript 3.0 code snippets panel  this cool little panel will be loved by designers and new coders alike. Lee Brimelow had  already made one snippets panel and this one is based on that, to use it you simply select your movie clip and drag one snippet from this panel, your timeline will automatically add an ActionScript layer with the code needed. You can also create your own snippets so if you’re new to coding or a designer this panel will help you out a lot.

Download the Flash CS5 trial here and start playing.

Happy Coding !!!

Adobe Flash CS5 Review pt 2: Custom class code hinting and completition

Flash CS5 Features 02 Custom class code hinting and completion. from David Gamez on Vimeo.

Ok  so for the second part of this series I’m showing You a little video of  something you’ll love if you use to code in FlashIDE  ActionScript editor.

The improved editor now let’s  you work with custom code hinting and completition and it works pretty fast it’s as easy as setting your classpaths and the editor will recognize all of your libraries and custom classes.

To be totally honest, I would not leave the ActionScript editor I’m using now for the one that comes with the Flash IDE but it definitely eases up the workflow if you’re using it.

See You around.

Adobe Flash CS5 Review pt 1: The XFL file format

Ok this will be the first of  a series of post of some of the new features of Adobe Flash CS5, and I say some because the new Flash comes with tons of new and improved features that said lest move on.

Flash CS5 Features 01 XML-Based-Flas (XFL) from David Gamez on Vimeo.

In Flash CS5 there’s a new file format in the house that it’s called .XFL  that is a new  XML based  format that allows You to exchange and work on files more easy, how to use it ?  just save your file  as .xfl in this way all your assets and properties are not packaged in a .fla file instead they will be saved in a folder structure that you can open and modify without the Flash ide, the properties of the document and graphic elements of the library are exported in XML files and  can be edited from any text editor and modify its properties. Even Actionscript code of the frames is exported.

I see this feature as a very neat one that will let us have more control over our Flash work and expands the possibilities for new types of workflow.

Until the next feature,  See You around.

Flash Develop 3.1.0 RTM is out Now

Flash Develop 3.1.0 RTM

The  new relase of Flash Develop 3.1.0 RTM is out now it comes as a a major feature  release, with  new things like refactoring and multiproject support,Flash Player 10.1 and Flex 4 support added and Real MXML completion implemented, full list below:

List of Changes

* Real MXML completion implemented
* Flash Player 10.1 and Flex 4 support added
* Initial simple refactoring support added
* Global excluded directories added to Tasks
* Embed generation now added for all filetypes
* Proper file encoding behaviour without BOM added
* HTML ZenCoding implementation added (Control + B)
* Output panel is now searchable (Highlight, F3 and Shift+F3)
* Simple multiproject support with batch compiling added (1*)
* Compiler constants and timestamp added now automaticly
* Code completion is now fed with classes from SDK sources
* Japanese localization added (Settings -> SelectedLocale)
* HaXe on demand completion added (patch from filt3r)
* Additional keyword groups added to the config
* Code completion improvements and bug fixes
* General UI improvements and bug fixes
1*= Right click a project file or project node if you have multiple projects present [sample here]

Important:

* Get the debug Flash Player (You need: Projector and ActiveX)
*
Get Adobe Flex SDK. The free Flex SDK (2, 3 or 4) is required for ActionScript 3 development if you don’t use Flash CS*.
* Java 1.6+ is required for the Flex compiler (ActionScript 3).

Download:

Built from rev. 1000 [Updated from 999 to hide the incomplete profiler :]
Download FlashDevelop 3.1.0 RTM