NoisyDesign.com

How to get robotlegs working for flash. So I wrote a little something about this in the previous post, but feel this subject needs to be touched on further. All of the info you need is still here. The only thing I did was went ahead and assembled a stripped down robotlegs template… just a basic setup with the source/fla for those who just can’t get it to work with flash cs3/cs4. This should merely be used as a guide to get you up and running… Be sure to check in with swiftsuspenders at github and robotlegs for source updates, as code tends to age extremely fast. Also, this example uses a nice little memory utility from mrdoob.

This is a simple example. Press the up arrow on your keyboard. Also enable firefox flashbug to see the traces)
source: here.
(examples saved as CS3)

Haven’t written anything here in a while… I was just reviewing some of my older posts, and I’m thrilled with how much I’ve been learning since then. With the insane speed at which internet technology has been advancing(namely with actionscript utils, open source as3 frameworks, cutting edge flash websites) I barely find time to keep up. Well lately I’ve been almost solely focusing on two big as3 programming areas: fully utilizing the MVC framework, and conversing with a wordpress database. For the former, I’ve been playing with a new light MVCS framework named Robotlegs. As I’ve never built anything on pureMVC or any other popular frameworks, I can’t really draw up any insightful comparison. I can say, however that robotlegs is a blast to use. I hit some obstacles when trying to get this robotlegs dependency injection working with CS4, but came across this article which helped me better understand the whole injection concept… here. After that, it was just a matter of playing with/getting used to its unique event handling and context structure(all of which is very bite sized, but just takes a little getting used to).

As for my wordpress database adventure, I’ve been using these nice utilities that that guy Dale at noponies.com rolled called “flashpress” (found here). I can’t remember if I’ve ever written a post about this, but the name basically says it all. It’s a set of php/as3 methods that you pump through either amfphp or zendphp in order to tap into all your wordpress database cells (read only). I’ve been heavily toying with this up until a few weeks ago, when I heard the man with the plan is finishing up a new version that uses the entire wordpress api to communicate with the database -both ways- without having to directly query the database (more info here). So I guess I’ll hold out and check that out before gettin too much further with the old version. Anyway, here’s a link to the project I was building utilizing robotlegs and flashpress…

link

-I’m really looking forward to having complete control of wordpress via as3.

Actionscript 3 Loops and arrays. Adding a grid of MovieClips to the stage by incrementing coordinate values (with a loop). Arrays and loops are extremely powerful. When the concept sinks in of how using loops and arrays speed up, simplify and organize actionscript development, you realize just how ridiculous it is to write code without it.

“What is a loop?”

“Why are arrays always used alongside loops?”

“Whenever I see these things in source code I’m immediately confused on whats happening, what the fuck is happening!?”

There are enough resources on the net, but I figure that this topic is important enough to include in this blog.

I think actionscript developers are much different than other language developers in the sense that alot of us enter the actionscripting realm with something like design backgrounds; whereas PHP/Java developers and the-like seem to usually have some kind of formal programming education. Therefore when the latter make the transition to actionscript, the use of loops and arrays is probably second nature… And for us aspiring actionscript programmers with little or no knowledge of another language, the sight of loops and arrays might seem rather daunting.

Let’s say you want to write some simple code that threw a bunch of movieclips on the stage, each incrementing its distance from the previous movieclip, creating rows and columns that make up some sort of grid. Why would you want to do this? Many reasons, the simplest answer being: your making a photo gallery. You want to load in external images and display them nicely on the stage in a grid-like manner, but you want it to be dynamic, and you want the image gallery to spit out as many grid boxes as specified in the XML. But let’s make it easier. Lets say you know how many boxes you need… One option would be to manually create each movieclip and add it to the stage at the proper incrementing x/y coordinates… example:

Now you have one gray movieclip on the stage, and you want to start making your grid by placing another box next to it and so on, so you might try this under the previous code:

If you wanted to make a grid of columns and rows, this method is ridiculous. Your code would be like two thousand lines long, extremely confusing, and probably took a few hours to write. Lets see how loops and arrays would help you do this in a few lines of code written in under a minute:

Well if you tested this code it would look like this: here.

So whats happening? The loop is creating and adding the “sprite1″ gray box to the stage 9 times. Since we added the line: “sprite1.x = (t * 60) + sprite1.width;” the box moves from left to right in a nice row. But you ask yourself: how does that work? Well the variable “t” is specified as equaling 0 in the for method here: “for (var t:Number = 0; t < 9; t++)”. And we told the method that if ‘t’ is less than ‘9′, ‘t++’. This simply tells our application to then run through the code between the following {} brackets to execute 9 times. The value of ‘t’ is also incremented 1 number until it reaches ‘9′. So we then use that to our advantage by saying “sprite1.x = (t * 60) + sprite1.width;”. Everytime the loop runs the code between the brackets to create the new “sprite1″, the value of ‘t’ is incremented… So the first box is placed at (0 * 60) + 50 which equals ‘50′. The next time it runs through the code ‘t’ is now ‘1′, so the next sprite that is created moves to an x coordinate of (1 * 60) + 50 which equals ‘110′, and so on and so forth until ‘t’ reaches nine. Ok, so this is making some sense… But your now asking yourself what the array is there for( you know, the “gridBoxArray.push(sprite1);” thing we added…). Well, I’m getting to that. But lets first finish our Grid; we need another row before we can call this a grid. here’s how:

the result: here.

So as you see, we used the first loop we made that created our single row, within another new loop and added the variable “theRow” which stood outside our original loop. We simple made “theRow” equal to incrementing value ‘j’ * 60. We then put that inside our original loop as “sprite1.y = theRow + 50;”. So everytime our new loop runs, it runs the inner loop once, which creates 1 row of boxes, then it runs again incrementing its y coordinated by “theRow * 60 + 50″, creating another and another and another row underneath the previous row until it reaches ‘5′. Easy as that. But still, what the fuck is that array still doing in there? Well, since this is flash, we probably want to do more with our gray boxes than just displaying them, we need to keep track of them in order to later talk to them.

In this example I used the ‘push’ method to push the sprites into the array as the loop ran each time. When this method is used, the sprites are added to the array first as position [0], then [1] and so on. Each item in the array then refers to a particular gray box in the grid. So gridBoxArray[0] is our new reference to the first box, while gridBoxArray[1] references our second box and so on. So if you wanted to do something imediately interesting, you could then add some mouse click listeners… Of course you could do this by adding:

But we have a bunch of sprites on the stage and that would again be ridiculous. We would just do a loop like so:

Boom. Now we have mouse click listeners on every single box in our grid.

Well, I think I’ve painted a pretty good picture of how useful this is. It just takes alot of trial and error before you completely get it. Here is one last sample using the previous code in combination with some mouse events and the new TweenMax 11 engine(I couldnt resist, -it’s absolutely amazing).

Example.

Source.

Dynamic registration point of a shape. In this post I’d like to simply discuss how to set the registration point of a shape as it’s created, -dynamically. When I was faced with this problem I tried way too many different kinds of fixes and workarounds -all of which are ridiculous now that I know how to do it correctly.

When you create a shape, say, a rectangle, you might do something like the following:

…where the “b.graphics.drawRect()” method is where you simple specified the (x, y, width, height) parameters of your shape. Well it turns out those first two parameters are actually used to specify your reg point. So if you want to throw that registration point in the middle of our 50×50 box, you would do the following:

view the example: reg point.

And the source files: here.

PV3D ViewportLayer. This is an interesting class. I’ve briefly discussed a method for bringing movieclips forward in as3 using the setChildIndex() thing…(here). Well in PV3D it would seem as though playing with ‘z’ coord. would be enough… and it is in alot of cases. But this ViewportLayer class allows you to manually stack layers in the viewport to keep objects ontop or behind other objects. A good example for when to use this class is with the ReflectionView class. Say you want to throw a floor under your reflections… Well in order to do this you would simply need to organize your layers so this new “floor” plane object sits under both the reflection layer and the main object viewport layer. I’ll have an example with source up soon.

Actionscript 3 Optimization. This man tells it best: http://www.rozengain.com/blog/2007/05/01/some-actionscript-30-optimizations/

BitmapData.draw method. So you ever wonder how big interactive sites are able to pull off the heavy 3D animation while keeping load time and cpu use to a minimum? Or how about: how does a movie clip/text field split into two halves then animates off the stage or to a new position? The answer is found in this powerful method called “bitmapData.draw“. It basically lets you take an image capture of any movie clip on the stage (and its children). As you could imagine, this is extremely interesting with text (seeing text split apart is always somewhat unexpected right?).

So how can this method be used to speed up the loading time of movieclips and lower cpu use? Well lets say that your project requires you to have a bunch of individual movieclips on the stage at any given time… well, depending on your particular needs, you can optimize by simply taking a quick screen capture of the stage and layering it on top of the movieclips on the stage while deleting all of those movieclips behind the new identical bitmap. Of course this requires a good amount of thought on how you would need to pull this off in order make everything transition flawlessly, but thats about it.

So I’ve created a class with which you can either simply grab a screen capture, or take the capture and crop it at specified dimensions. With this class you simply need to do the following in the main document class:

A link to the above snippet example:  here (after the large images load, click the first image to see the effect)

So the above example is utilizing the NoisyImageLoader class to load the image into our "imageClip1" movieclip. All of which is included in the example files. Although the example is pretty basic, you can kind of see how this is all working... Basically two images are loaded into two MovieClips which are positioned side by side. When the first movieclip is clicked, I use the NoisyBitmapMaker class to take 4 bitmaps of the movieclips (two each). I crop the first half of the first bitmap and throw it into a new movieclip, then I crop the other half of the second bitmap(still the first image though) and throw that into a new move clip positioning them side by side as if nothing happened (and etc for the other bitmaps - second image).  I then remove the original movieclips that are hidden behind the new ones. Then I simply animated the right halves of the bitmaps to illustrate the change.

Here are the source files: source

Actionscript 3 – Depth Management. So in PV3D, when you want to simply move an object in front of another you have many straight forward methods. In plain old AS3 without using a 3d engine, the method is slightly different…

Scenario: I am making a simple carousel composed of 3 objects that employs a basic switch statement to make it happen. I simply scale the X & Y to make the object appear 3d.

Problem: I’m not using a 3d engine and I am sick of having all of my movie clips hide behind one movie clip… When I click the left object, I want it to get bigger and move to the center of the screen in front of everything else (pretty basic stuff)… Why won’t it hop on top of the other movie clips?

Solution: Similar to PV3d, use a built in method to put the movie clip on top of  everything else.

-So basically I am calling the “noisy_mc” movie clip wrapped in the “container” movie clip and setting its z sorting (maybe not the right term) to the top of the object list “-1″. So I am guessing flash puts our objects into an array, and since all arrays start at [0], we put it on top -1 which I guess pushes this movie clip in the 0 position (the highest) in Z sorting.

Here are some links:

-http://www.flashandmath.com/intermediate/depths/index.html

-http://www.ultrashock.com/forums/actionscript/numchildren-level-114986.html

-http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Macromedia_Flash/ActionScript/Q_24252570.html

PV3D Optimization. This is something i’ve never payed much attention to. My goal has always been just to get everything working and looking nice on my comp. Well, i’ve reached the point where I must acknowledge cross browser/cross platform usability. I spent a few minutes researching this on google and ran into an excellent site full of optimization techniques for PV3D… read the comments section too.

http://interactivehug.com/2008/04/21/john-iacoviello-papervision3d-optimization-tips/

BitmapViewport3D.as. So we are looking in the \org\papervision3d\view\ directory, wondering what these other classes are about. We’ve already wrapped our heads around the BasicView.as class. I’ve briefly mentioned in the last post how BasicView extends AbstractView. There is really no need to go any further with that one. AbstractView simply works with BasicView in order to make it all work. That’s all (from what I can see), we need to care about. What interests me here, as the title to this post suggests, is the BitmapViewport3D class. What is this? How would I use it?

BitmapViewport3D treats your viewport almost like any other object within the viewport in the sense that you are actually able to add filters to it. The best example of this is when you want to add a trailing effect to your animations. Say you have some planes in your viewport, and you simply want them to leave some kind of a trail behind them as they move from one side of the screen to the other. In this case you would probably want to use this BitmapViewport3D class. Here is a link to great example:

http://pv3d.org/tag/bitmapviewport/