Book Review: ActionScript Developer’s Guide to Robotlegs

So quite some time after I got this book on my hands I’ve finally taken the time to sit down and read it and let me open this post saying that I really enjoyed it. ActionScript Developer’s Guide to Robotlegs will guide You through the inner workings of the Robotlegs framework in a very straightforward and concise way, the authors Lindsey Fallow (Stray) and Joel Hooks (who also are part of the Robotlegs core team) do so by taking real-life applications and break them apart showing You how Robotlegs gets things done in the process, each chapter is full of tips equally appealing to Robotlegs newcomers and seasoned users of the framework. The book is written in such a way that has a very “Head First Series” nice feel to it taking You from the basics to more advanced features, troubleshooting, tips, good practices and power-ups in a very clear way.

What I liked the most about this book is the fact that Is really well explained, from the table of contents to the appendixes is a step by step companion as You dive deeper in the core concepts of Robotlegs such as Context, Commands, MediatorMaps and DI ( Be sure to check the Appendix B dedicated entirely on how Robotlegs handles dependency injection).

When You’re entirely new to a framework such as Robotlegs You might find yourself lost in nomenclatures and concepts previously unknown to you, well this book untangles it all for You and gently clears your way as you read along and event when you’ve used Robotlegs before is full of juicy tips and best practices that will surely help you have a better understanding on how you wire your applications using the framework.

You can get the book in digital or print format at O’Reilly in case you haven’t already done so, I definitely recommend it for anyone thinking on using the Robotlegs Framework or anyone who is already using it on a regular basis.

I like to thank Stray and Joel for taking the time to write this book and the Robotlegs team for the efforts on the framework (keep up the wonderful work guys).

Don’t forget to visit Robotlegs.org for the latest on the framework.

Happy Reading.

Greensock’s ThrowPropsPlugin iPad Test

Heres a quick video showing how You can use the Greensock’s ThrowPropsPlugin to emulate the bouncy effect of the iOS devices, on the example I used an image but it can also be used with TextFields or Lists and it performs equally good on the iPad.

ThrowPropsPlugin is a plugin for TweenLite and TweenMax that allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown

For the code part I just used Jack’s sample with some minor tweaks to use an image instead of a TextField.
Here is the class:

package com.swfgeek.mobile.ThrowPropsPlugin {
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.utils.getTimer;
	import com.greensock.TweenLite;
	import com.greensock.easing.Strong;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.ThrowPropsPlugin;
	import flash.geom.Rectangle;
	
	public class MainApp extends MovieClip {
		private var bounds : Rectangle;
		private var mc : MovieClip;
		private var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number;
		
		public function MainApp() {
			TweenPlugin.activate([ThrowPropsPlugin]);
			initialize();
		}
		
		private function initialize():void {
			bounds = new Rectangle(-128, 0, 768+128, 1024);
			mc = getChildByName("robots_mc") as MovieClip;
			setUpTPBounds(mc, bounds);
			mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		}

		
		private function mouseDownHandler(event:MouseEvent):void {
			TweenLite.killTweensOf(mc);
			x1 = x2 = mc.x;
			y1 = y2 = mc.y;
			t1 = t2 = getTimer();
			mc.startDrag();
			mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

		private function enterFrameHandler(event:Event):void {
				x2 = x1;
				y2 = y1;
				t2 = t1;
				x1 = mc.x;
				y1 = mc.y;
				t1 = getTimer();
		}

		private function mouseUpHandler(event:MouseEvent):void {
			mc.stopDrag();
			mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
			var time:Number = (getTimer() - t2) / 1000;
			var xVelocity:Number = (mc.x - x2) / time;
			var xOverlap:Number = Math.max(0, mc.width - bounds.width);
			var yVelocity:Number = (mc.y - y2) / time;
			var yOverlap:Number = Math.max(0, mc.height - bounds.height);
			ThrowPropsPlugin.to(mc, {throwProps:{
										 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
										 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
									 }, ease:Strong.easeOut
									}, 10, 0.3, 1);
		}

		private function setUpTPBounds(container : MovieClip, bounds : Rectangle):void {
			var crop:Shape = new Shape();
			crop.graphics.beginFill(0xFF0000, 1);
			crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
			crop.graphics.endFill();
			container.x = bounds.x;
			container.y = bounds.y;
			container.parent.addChild(crop);
			container.mask = crop;
		}


	}
	
}

To know more about this plugin visit Greensock’s ThrowPropsPlugin page and check out the ASDocs.

Note: ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). If you’re not a member yet,I suggest you sign up, believe Me is really worthy.

Happy Coding

Flash Player Incubator “Molehill” 3D APIs for Adobe Flash Player and Adobe AIR

So this has been quite a Sunday  full of Adobe surprises and news, this morning Lee Brimelow and Thibault Imbert gave a keynote at Flash Gaming Summit and one of the big news was the announcement of the new Flash Player 11 “Molehill”  APIs is now available at Adobe Labs.

So what is “Molehill”?
Molehill is the code name for a new set of low-level, GPU-accelerated 3D APIs that will enable advanced 3D experiences across screens through the Adobe® Flash® Platform runtimes. These new low-level APIs will provide advanced 3D and 3D engine developers the flexibility to leverage GPU hardware acceleration for significant performance gains.

How to target the “Molehill” player and start building some cool 3D stuff?
First of all You’ll need to download the Adobe AIR and Adobe Flash Player Incubator from Adobe Labs page in order to see and play with “Molehill” demos like the “Zombie Tycoon” by Frima Studios:

If You want to author and target Molehill here is an excerpt from Adobe’s Authoring for Flash Player 11,0,0,58 Incubator :

Download the documentation for Flash Player 11,0,0,58 by clicking here.

Download the playerglobal.swc for Flash Player 11,0,0,58 by clicking here.

To use the new Flash Player 11,0,0,58, you will need to target SWF version 13 by passing in an extra compiler argument to the Flex compiler: -swf-version=13. Directions are below.

If you are using the Adobe Flex SDK:

  1. Download build 19786 from the Hero Stable Builds table. (Note: This is an in-development build of Flex SDK “Hero” and may contains bugs and incomplete features).
  2. Install the build in your development environment
    1. In Flash Builder, create a new ActionScript project: File -> New -> ActionScript project.
    2. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    3. Use the ‘Configure Flex SDK’s’ option in the upper right hand corner to point the project to Flex build 19786. Click ok.
  3. Configure your project to target SWF version 13
    1. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    2. Add to the ‘Additional compiler arguments’ input: -swf-version=13. This ensures the outputted SWF targets SWF version 13. If you compile on the command-line and not in Flash Builder, you need to add the same compiler argument.
    3. Ensure you have installed the Flash Player 11,0,0,58 Incubator nuild in your browser.

If you are using Adobe Flash Professional:

You can create your own profile to publish to a specific SWF version in Adobe Flash CS5. See this package, it contains a sample FlashPlayer11.xml file file you need to copy into the right place.

  1. FlashPlayer11.xml goes into: Adobe Flash CS5\Common\Configuration\Players
  2. Place the playerglobal.swc related to the Incubator build you are working with into: Adobe Flash CS5\Common\Configuration\ActionScript 3.0\FP11
  3. Restart Flash Professional after that and then select ’Flash Player 11’ in the publish settings. It will publish to a SWF13 file.

Important: Always remember to set wmode=direct in your HTML parameters. Software fallback will be used if you do not use wmode=direct.

Can I still use my Flash 3D Framework?

As announced in Adobe MAX 2010 all the mayor Flash 3D  frameworks (Alternativa3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D or Yogurt3D.) have been working alongside with Adobe to bring support for Flash Player’s new 3D APIs being Away3D  the first one to release a “Molehill” supported version.

Away3D 4.0 Alpha (codename “Broomstick”).

Shortly after Adobe announcement Away3D’s team was released a new version(4.0 Alpha) of their framework codenamed “Broomstick” and let me say it runs great I’m really looking to have some free time to test and post about the new features in Away3D but for the time being You can check some of the examples and tests made by the team here.

To start playing with “Broomstick” You need  to download this version from their googlecode repository or their downloads page.

Adobe Flash and Unity3D


Unity3D’s team has a blog post about Flash Player plugin support here is an excerpt:

“In the past few months, our engineers have been investigating the possibility of adding a Flash Player exporting option to Unity. That investigation has gone very well, and we’re moving into full production.” read the full article here.

So this are some of the things announced at the Flash Gaming Summit if hurry up You can still catch the live stream.

Later 😀

RobotLegs – Flash CS5 Project Template for FDT4

Projects Templates are an extremely useful tool introduced in the version 4 of PowerFlasher’s FDT it lets You write and include Your own project templates  and are available for you to use when creating a new project in: File>New>New Flash Project.

One of the frameworks that I used the most in 2010 ( expect upcoming post on the 10 frameworks that I used the most last year) is Robotlegs created by Shaun Smith a pure AS3 micro-architecture framework that  is pretty handy when You work in large projects, so the project template that I made is a pretty basic setup of Robotlegs It has a loader class and loader. fla and the MainApplication and main.fla, that fla is where all the Robotlegs magic happens it has the main context 3 views and its mediators 3 commands and an event. This template can be used as a sandbox for starting a small Flash CS5 based Robotlegs project.

How to install the project templates:

In mac open up the Finder and navigate to your home folder. After you installed FDT4 you’ll find a folder called “FDT” there. Navigate to FDT/projectTemplates/Web and copy the RobotlegsFlashCS5 folder in there and Youre good to go.

In Windows 7 go to C:\Users\User\AppData\Roaming\FDT\projectTemplates\Web copy the RobotlegsFlashCS5 folder in there and You’re all set.

Hope it helps the code is not commented I’ll try to push a commented version to  github as soon as i have the chance.

Ups almost forgot You can download the ProjectTemplate at my FDT-Resources fork in github.

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 😉

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.

Multicast Streaming in Flash Player 10.1 revisited

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial. Here’s the fix.

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial, the files he was using were the same included in Tom’s tutorial except for the Stratus Developer Key so after looking at the video tutorial included and testing the examples files You’ll get this error:

?View Code ACTIONSCRIPT3
1
2
3
4
5
Error: Error #2154: The NetStream Object is invalid.  This may be due to a failed NetConnection.
	at flash.net::NetStream/invoke()
	at flash.net::NetStream/attachCamera()
	at Broadcaster/setupStream()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:67]
	at Broadcaster/netStatus()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:50]

The error is pretty descriptive and what is saying is that was the NetStream was not getting the Camera signal or received a null value when trying to attach it.

The reason that this was happening is because in the NetStatusEvent Listener inside the switch statement we are using the event.info.code = “NetConnection.Connect.Success”; both for the Connection and the Stream

?View Code ACTIONSCRIPT3
1
2
netConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
private function netStatus(event:NetStatusEvent):void{
	   writeText(event.info.code);
 
	   switch(event.info.code){
	            case "NetConnection.Connect.Success":
		    setupStream();
                    break;
		}
 
}

And on the setupStream() function we are trying to attach the camera and thats what throws the error cause we are using the “NetConnection.Connect.Success” to call this function.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function setupStream():void
{
      var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
      groupspec.serverChannelEnabled = true;
      groupspec.multicastEnabled = true;
 
      stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
      stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
 
       var cam:Camera = Camera.getCamera();
 
       stream.attachCamera(cam);
       stream.publish("multicast");
 
	video.attachCamera(cam);
}

The fix is pretty straightforward all You have to do is include a case for the event.info.code: “NetStream.Connect.Success” and thats where we attach the camera to our stream.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
switch(event.info.code){
	case "NetConnection.Connect.Success":
	        setupStream();
	break;
	case "NetStream.Connect.Success":
	        var cam:Camera = Camera.getCamera();
	        stream.attachCamera(cam);
	        stream.publish("multicast");
	        video.attachCamera(cam);
	break;
}

And our setupStream() function will only define the GroupSpecifier and the NetStream:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
private function setupStream():void{	
	var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
	groupspec.serverChannelEnabled = true;
	groupspec.multicastEnabled = true;
 
	stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
	stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
}

Attaching camera / microphone after NetStream is connected, prevents you from following:

?View Code ACTIONSCRIPT3
1
Error #2154: The NetStream Object is invalid. This may be due to a failed NetConnection.

Click here to open my example, or here to download the flex project.

You should see Your Broadcaster and your Receiver getting along just fine.

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.

Merry Xmas a la HYPE Framework

A little something using  the wonderful HYPE Framework by Joshua Davis and Branden Hall

This movie requires Flash Player 10

A little something using  the wonderful HYPE Framework by Joshua Davis and Branden Hall

Merry Christmas and happy holidays to all !!!

Flash Platform Game Technology Center is Live

Flash game development has been around almost as long as Flash itself I remember the first thing I did with Flash was a very short animation and the second a little spaceship game I must have that .swf laying around in a backup somewhere, I’m really glad to see Adobe’s efforts in pushing the various “sections” of Flash development inside of the devnet.

The Flash Platform Technology Center aims to reach for those developers interested in Game Development using Adobe technologies( Aka: Flash, Flex, AIR  and AS3 ) it includes several beginner-advanced tutorials and links to various resources as documentation, cookbooks an other related development centers, the only thing I wonder is why this Technology Center wasn’t opened earlier being the Flash game development community as  big as it is( Hope some of the great Open Source Game related APIs get some spotlight in this place ), anyways it’s here now so get ready to start developing your first game if you haven’t already,  here are some excerpts and links from the Adobe Flash Platform Game Technology Center:

The Adobe Flash Platform is the leading platform in the world for developing games on the web. The Flash Platform Game Technology Center is a great place to start learning how to develop your very own Flash games.

FEATURED RESOURCES
Articles and tutorials

Community