Jul 16 10
Jul 5 10
Flex on Rails – PUT & DELETE
So as I keep on pushing through this project of mine, I keep stumbling upon strange problems. I’ve finally finished the Rails back-end and am now building out the UI in AS3. I discovered that the Flash Player does not allow your script to send “PUT“ nor “DELETE“ calls through an HTTPService. So naturally I went on the hunt through the internet to find the solution. Well, I came across all kinds of fixes, but these fixes were only applicable to Rails versions prior to my Rails 2.3.5.
For instance:
-In oder to ‘put’ an httpservice call via flex prior to my Rails version 2.3.5, one was supposed to point to the full link, + the ‘id’ of the particular item and then throw ” ?_method=’put’ ” at the end…
But of course this never worked. So after hours of problem solving, I finally came across the solution. In order to send the httpservice ‘put’ or ‘delete’ call using flex, you have to add in an extra parameter in the service “headers” like so,
-
_httpServiceDelete.headers = {X_HTTP_METHOD_OVERRIDE: 'DELETE'};
So, to successfully delete a database entry using your “destroy” method in your Rails controller, you send it an HTTPService call like this:
-
public function deleteBill(id:int):void
-
{
-
-
var _httpServiceDelete:HTTPService = new HTTPService();
-
-
_httpServiceDelete.url = Common.ROOT_URL + '/bills/' + id +'.xml';
-
_httpServiceDelete.method = "POST";
-
-
_httpServiceDelete.resultFormat = "e4x";
-
_httpServiceDelete.contentType = "application/xml";
-
_httpServiceDelete.headers = {X_HTTP_METHOD_OVERRIDE: 'DELETE'};
-
_httpServiceDelete.addEventListener("fault", httpFault);
-
_httpServiceDelete.useProxy = false;
-
_httpServiceDelete.addEventListener(ResultEvent.RESULT, updateResults);
-
_httpServiceDelete.send({_method: "delete"});
-
-
}
Also notice the object I threw in the “send()” method. Apparently flex does a default “GET” when there is no object in the send method. So you could actually throw any object you like in that send() method. For example:
-
_httpServiceDelete.send({foo: "bar"});
…does the exact same thing. So Flex see’s that there is an object in the send method, and then decides to switch on the “POST” method. In fact, I took this experiment even further. I decided to completely remove the “POST” method from the service call…
-
public function deleteBill(id:int):void
-
{
-
-
var _httpServiceDelete:HTTPService = new HTTPService();
-
-
_httpServiceDelete.url = Common.ROOT_URL + '/bills/' + id +'.xml';
-
//_httpServiceDelete.method = "POST"; //<—–apparently not needed as long as you send an object…
-
-
_httpServiceDelete.resultFormat = "e4x";
-
_httpServiceDelete.contentType = "application/xml";
-
_httpServiceDelete.headers = {X_HTTP_METHOD_OVERRIDE: 'DELETE'};
-
_httpServiceDelete.addEventListener("fault", httpFault);
-
_httpServiceDelete.useProxy = false;
-
_httpServiceDelete.addEventListener(ResultEvent.RESULT, updateResults);
-
_httpServiceDelete.send({foo: "bar"});
-
-
}
And BOOM. Successfully deleted the intended object from my database. Works the same for “PUT”. Just substitute “DELETE” for “PUT”. I do have to admit, I’m not a big fan of the hack… I mean it’s Flex and it’s Rails, so of course it will work one way or another, but it seems as though the Flash Player needs to get with it and lets us send those PUT and DELETE objects without these ridiculous obstacles.
Also, currently I am using RESTful rails and Flex approach to pass XML back and forth. The next journey will of course be an AMF journey. But one project at a time.
Jul 4 10
Ruby on Rails & Flex
The Language.
A few months ago I decided it was about time to choose a new programming language to experiment with. After a great deal of research and introspection, I decided that this language must have certain qualities. This language must be:
1) Object Oriented in nature
2) Relatively easy to learn
3) Powerful (more so than AS3 at least)
4) Server-side
After playing with C (very briefly), and being very accustomed to OOP frameworks and programmatic design patterns in AS3, I decided that the language must be largely object oriented in nature. As far as finding something more powerful than flash, well that’s not very difficult considering flash, or at least the flash player is so restrictive. I did however, decide to rule out C++ and Java. These two languages, although very powerful and very object oriented, are not known for being very easy to learn. From what I’ve found, Java syntax is definitely very similar to actionscript, but the amount of Java libraries out there and the amount of time it takes to learn how to utilize these libraries, this language lies outside of the scope of what I’m looking for. And finally, I decided it would make sense to pick up a language that can be used on the server and deal with a database. I’ve been meaning to try and master a language that would compliment my front end flash applications.
So, I picked up a Ruby book. Specifically this book: Beginning Ruby. I was absolutely amazed at how easy it was to pick up the ruby concepts/syntax. Apparently acquiring those OOP concepts from whatever language is the steepest part of the slope. Bringing my actionscript OOP experience to the process of learning Ruby really made the whole experience seem like piece of cake, that is, at least in contrast to when I began learning actionscript.
So what to do with Ruby?
Well, I began learning Ruby in and of itself outside of the popular MVC web framework ‘Rails’. So, naturally I had been asking that question, “what to do with Ruby”, or more specifically, “now what?”. I decided to come up with a Ruby project as I learned the language… something different than those lame, “Class Dog << Pet" examples found in books. So, as a project I decided to create a Ruby script that generates a directory structure that is specified in a an external XML file. At the time, I had been working on a couple modular flash projects which required a ridiculous amount of directories. So, I went for it. It actually turned out to be fairly easy to do except for the obvious struggles with syntax. But of course, you soon realize that it takes about as much time to right click and create a directory as is does to type it in, in the XML file... not to mention, if your using a UML for a AS3 project, often times the software will generate the directories and code for you. But the point is, I got to learn the basics of the language by putting forth a good Ruby project.
Now Rails.
I decided it was about time to use Ruby for something useful. So I picked up a book called Flex on Rails. Well what can I say, I’m used to instructional books starting out slow and working up pace as the examples progress. ‘Flex on Rails’ throws it all at you in the first two chapters. It was certainly an interesting approach, just a little too intense for those of us going in to this with little to no experience using rails.
So I set it aside and picked up a book called Learning Rails. This turned out to be a good place to start, just straight to the point examples. I went through most of the book, completed most of the exercises, and put forth a rails project of my own. But since this ‘Learning Rails’ book was meant to be more of an introduction/quick start, the project I had in mind largely deviated from the scope of the examples/exercises. For instance, I picked up the concept of creating rails models that have ‘has_many’ relationships to other models, but the task I had in mind involved many “has_many” and “has_one” relationships, not to mention a few other obstacles that neither the book nor the internet could help me with. So I ended up purchasing this book: Agile Web Development with Rails. This book turned out to be a perfect compliment to my original ‘Learning Rails’ purchase, and both books ended up preparing me for the the first purchase, ‘Flex on Rails’.
All in all, I am very happy to say that the past month or two of learning Ruby on Rails/Flex on Rails has been a very enjoyable experience. I’ve been very vigilant with my taking notes about those various obstacles I encountered while learning this language/framework. I hope to have the chance set aside some time to be able to blog about each blog-worthy obstacle, and give an account of what was done to overcome it. And for this Flex on Rails project of my own, well, stay tuned. It should be ready to go in a month or two.
Next to robotlegs (that framework i’ve recently been writing about), a great new piece of as3 technology called “signals” has been gaining alot of attention from the ultra-nerd-community. I’ve also gotten a chance to take it for a spin and am very pleased with the results. Signals is a great alternative to native as3 events. They clean up after themselves, they make alot of sense and apparently signals mimics the use of communication as in other more recognized OOP languages such as C#.
There is already a good amount of info out there about Signals, so i’ll just supply some links to those posts here.
-Well first, the author of signals(robert penner):
http://robertpenner.com/flashblog/2009/09/my-new-as3-event-system-signals.html
-here’s a great post with robotlegs adapted to use signals instead of events (source included):
http://joelhooks.com/2010/02/14/robotlegs-as3-signals-and-the-signalcommandmap-example/
-Here’s that badass who rocks FDT and makes video tutorials you have to watch a hundred times due to his superhuman coding speed:
http://pv3d.org/2010/01/21/as3-signals-tutorial/
-some more:
http://www.peterelst.com/blog/2010/01/22/as3-signals-the-best-thing-since-sliced-bread/
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.
[kml_flashembed movie="http://noisydesign.com/flash/robotlegstemplate/RobotLegsFlashTemplate.swf" width="500" height="400"]
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)
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 you create a shape, say, a rectangle, you might do something like the following:
b = new Sprite();
-
addChild(b);
-
b.graphics.beginFill(0×333333);
-
b.graphics.drawRect(0,0,50,50);
-
b.graphics.endFill();
…where the “b.graphics.drawRect()” method is where you simple specified the (x, y, width, height) parameters of your shape. If you want to throw that registration point in the middle of our 50×50 box, you would do the following:
b = new Sprite();
-
addChild(b);
-
b.graphics.beginFill(0×333333);
-
b.graphics.drawRect(-25,-25,50,50);
-
b.graphics.endFill();
view the example: reg point.
And the source files: here.
Sep 28 09
5. ViewportLayer.as
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.
Sep 26 09
More Actionscript 3 Optimization.
Actionscript 3 Optimization. This man tells it best: http://www.rozengain.com/blog/2007/05/01/some-actionscript-30-optimizations/
Sep 26 09
Bitmap Screen Capture/Crop Class.
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:
import noisy.display.NoisyBitmapMaker;
-
private var myMap:NoisyBitmapMaker;
-
<pre lang="actionscript"> //Take a snapshot of the imageClip1 movieclip
-
myMap = new NoisyBitmapMaker(imageClip1, imageClip1.width, imageClip1.height, true)
-
//Set the size and position of the image crop... in this case, i am cropping the first half.
-
myMap.cropWidth = imageClip1.width / 2;
-
myMap.cropHeight = imageClip1.height;
-
myMap.cropXPos = 0;
-
myMap.cropYPos = 0
-
myMap.createBitmap();
-
//After I crop it, I throw the cropped bitmap at 0,0;
-
myMap.x = 0;
-
myMap.y = 0;
-
addChild(myMap);
A link to the above snippet example: here (after the large images load, click the first image to see the effect ...kind of a crappy example)
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
Jun 2 09
Actionscript 3 – Depth Management.
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.
container.setChildIndex(noisy_mc, numChildren - 1)
-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
