This week I finally had a project that involved 3D (about time too).
Since it involved interacting with 3D models, using Flash 10 was out of the question. So I opted to go with papervision, instead of away3D or alternativa3D, since this was the engine we where more accustomed to.
Sometime along the development of the application I came across the need to convert 3D coordinates into 2D screen coordinates and also the opposite. It's nothing new and it's already implemented in papervision, but since it took me a little while to find it, I decided to share it.
Getting the 2D Screen coordinates from a DisplayObject3D
Since papervision 2.0 that every DisplayObject3D has a property called "screen", that will return the coordinate of the object on screen. Whenever I tried to access the screen property the number3D I got back was always (0,0,0). Probably because it's an expensive operation and it's something you only need sporadically, papervision will not calculate this automatically. You need to ask papervision yourself to calculate this coordinates. To do so, just use the "calculateScreenCoords" of the do3d
myDisplayObject3D.calculateScreenCoords(camera)
Now when you try to access the "screen" property you will get the number3D with the screen coordinates for your DisplayObject3D.
Getting the 3D coordinates from a 2D point (x,y)
For this one I found a great post by zupko that tells you exactly what you need to do.
In a nutshell, you need to take your 2D coordinates (x,y) and convert them into a direction vector. Having the vector and the camera position you can create a ray (line) that will go from the camera into infinity. Next you need to specify the Z, or in another words, where do you want to stop on that line. Zupko uses a 3D plane to do that using the "getIntersectionLineNumbers"
Just remember papervision's 3D Zero (0,0,0) is at the center of the screen and not on the upper left corner like the 2D Zero (0,0)
gskinner had a great ideia last night for a competition using twitter. He called it tweetcoding
The ideia is to code something cool in <=140 characters of AS3 and post it to twitter.
Since 99.9% of the work we do is Flash, we pretty much use flex builder to develop Actionscript Projects. One of the things I really wanted to have was bindings. Here's how to use Flex Bindings in Actionscript only projects.
Remember that the Flash framework (textfields, movieclips, sprites, etc) doesn't dispatch the data-binding event. This means that pretty much the only things you can bind are variables.
Make sure you add the flex framework.swc to your project Library Path to have access to the mx.binding.util class.
ChangeWatcher:
Acts like the watch on AS2. It watches a variable for changes and when something happens fires an event. Make sure you call the canWatch to ensure that you can watch it!
There are 3 ways to specify the second parameter, the chain.
A String containing the name of a public bindable property of the host object.
ChangeWatcher.watch(this, "myvar", handler)
An Object in the form: { name: property name, access: function(host) { return host[name] } }. The Object contains the name of a public bindable property, and a function which serves as a getter for that property.
A non-empty Array containing any combination of the first two options. This represents a chain of bindable properties accessible from the host. For example, to watch the property host.a.b.c, call the method as: watch(host, ["a","b","c"]
BindingUtils.bindProperty
Works pretty much the same way as the watch, but instead of having to handle and event it allows you to immediately bind two properties one-way.
The first two parameters are for the the target, the second parameters are the triggers.
Today I spend a considerable amount of time trying to change this (10000000) into this (10.000.000). Because I don't think anyone should have to go throught the same ordeal here's a little function that will do it for you.
I've been writing a lot of getters and setters lately (and spending way too much time doing that...), so I googled for some sort of plug-in for Eclipse/Flex Builder and found a great resource called Project DashHere's a nice script to use with Dash to generate getters and setters for your variables
Inside FlexBuilder goto Help->Software Updates->Find and Install (if you ran into an error about retrieving "feature.xml" delete the site.xml file in your Flex Builder directory)
Improving the work flow in the development of Flash applications is something that has been in my mind for some time now, specially after seeing some presentations on the subject at Max Barcelona.
Usually the applications are not big, and are developed by a single programmer in less than a month, so they are manageable, but when a big one come along chaos is installed.
This question popup up today while playing around with AIR and transparent windows. I wrote a simple actionscript app inside flex builder, that draws some sprites (that move randomly) onto a transparent AIR window.
The first time I ran the app (with only one circle), I was surprised to see my Pentium 4 (3.2 ghz) reach 30% of cpu usage to animate that single sprite. It the window had the transparency turned off the cpu usage would be 0-1%.
The second time I ran the app (with 10 circles), the frame-rate dropped dramatically from 24 to 12-fps, and the cpu usage went up to 50%. At this moment I truly believed that what I wanted to do could not be accomplished. I mean, with only 10 sprites moving around the screen all I get are 12-fps...
Having the AIR runtime installed on my mac (powerPC 1.5 ghz) I tried running the app with the 10 circles to have a laugh at the poor performance. When I saw the app running my jaw dropped... My mac was running the AIR app with the transparent window and the 10 sprites moving around at 24-fps. How could this be... I know for a _fact_ that the flash performance is ALOT worse on my mac than on the PC., so how could the mac be behaving so well... It it because macosx uses the gpu to render the windows? And because AIR is using one of those windows it's being rendered by the gpu instead of the cpu?
I decided to google for a while and found out that Windows uses layered windows to display transparent windows and that AIR is using that. I also read that when using layered windows the drawing of the windows goes into an off-screen buffer (probably inside the graphics card)
So I decided to draw 100 sprites inside the AIR app. Guess what happened? The frame-rate was still at 12-fps and the cpu was still at 50% the same values I got when drawing 10 sprites. At this moment I thought that maybe the frame-rate was so low because I have a very old graphics card.
I used another PC with a similar cpu (Pentium 4 3.4ghz) but with a kick-ass graphical card. The result: 70-fps and 15% cpu usage.
My guess is that because AIR is using transparent windows, the OS is rendering it inside the graphics card (remember the off-screen buffer) instead of the cpu.
Can anyone confirm this?
update: After a short discussion with ivan, I reckon that all flash "stuff" is still done in the flash player and is _not_ hardware accelerated. However, the transparency calculations, are done in the graphics card. If you have a good graphics card you don't need to overload the cpu with those calculations and you can use it for the flash calculations.
If you create an Actionscript Project inside Flex Buider 3 beta, there is no option to create and AIR application. However, when you create a Flex Project the option is there.
So how can you create an AIR Application in an Actionscript Project with Flex Builder 3 beta?
Today I came across a nasty memory leak in the Loader Class.
I was writting a simple screensaver class that loads external images from the hdd and displays them. Sounds simple? It is. The problem was that everytime I loaded an image, the system memory would go up. I started by checking my eventListeners. They where all weak referenced. I went through the code looking for places where I could be keeping a reference and hence preventing the GC to collect it, but I couldn't find any.
There is something keeping the GC from removing the old images from memory...
Everytime the Loader calls the load() method the image is read into memory and stays there. I tried calling the unload() method but that doesn't help.
Then, how can one remove the loaded image from memory? If you know please let me know...
Last week, while developing an actionscript application, we had the need to read files stored inside a zip file. Our first approach was to use Zinc to deflate the zip file into a temporary directory.
Because some problems arouse with ZINC I took sometime to read about this AS3 Zip Library As it turns out it does a great job and reading and building zip files and it's really easy to use. Make sure you download and install the Library.
After playing around with this Library for a while I wanted to display some images I had inside the zip file. The issue was how to convert a ByteArry into a BitmapData. It took me a while to figure it out , but as it turns out it's really easy.
+ Help the community
+ Explore the Flash platform
+ Create a better world
+ Research and play
Startups
We're looking for stories about startups using Flex/Flash technology. Drop us a quick e-mail or mention it to us via our Twitter account @dreaminginflash, thanks!
