Dynamic Grid Positioning

I had a couple of people ask me in the past couple of weeks about dynamic positioning of elements on a page, which change their position when other elements change size. Kind of like the ADIDAS WEBSITE effect.

The thing that is hard to get I think is a natural dynamic movement, and will be very apparent if you are doing this in an event-driven way. So I decided to do a quick example of how this would look like using a 2D matrix and using an EnterFrame event to detect the position of each element in the grid.

you can check out the result below:

basically, the way I set it up is to devide the grid into rows — each row has a Sprite that holds all of the elements in that row. On each frame, each one of the boxes checks the X and WIDTH of the box before it and changes it’s X position accordingly, and each Sprite Holder checks the Y and HEIGHT position of the row before it and calculates it’s position accordingly.

next I’ll try to use some collision detection and get a better real-world feel to it.

as always – here’s the SOURCE

Helvetica Neue embedding problems

Fonts are always a bit tricky to deal with. There are a bunch of ways to embed fonts in the IDE on the stage, through the library, in Flex, in runtime etc. none of which are perfect. One problem I ran into the other day was in using Helvetica Neue. This font is probably the most popular, and so it is used extensively. It’s so popular that there is a documentary film about it (http://www.helveticafilm.com/), but more impotently, the new Mac OS Leopard (and Snow Leopard) now uses Helvetica Neue as one of it’s display fonts, which means that unless you are very crafty, you are going to have to use the pre-installed system font, rather than the adobe package of the same name.

This is somewhat aggravating because it makes it hard to use the different faces (Light, UltraLight, LightCondensed etc.). After a few hours of research though, I found that there are a few options you can resort to:

1) keep it simple.
You can activate (whether you’re using Suitcase, FontBook or some other Font management program) only the NON-SYSTEM fonts. For the package I have, that means that I can activate the whole package except for:

HelveticaNeue-Bold, HelveticaNeue-BoldItalic, HelveticaNeue-Italic, HelveticaNeue-Light, HelveticaNeue-LightItalic and HelveticaNeue-UltraLight.

Then, when you embed the fonts in Flash (I use the IDE for that) the names can be quite confusing. the best solution is to create a dynamic textField on the stage, give it an instance name trace out the name of the font, like this:

2. Replace the system font.
If you have a font package with a .dfont extension, you can replace the existing system font with your advanced font — the system should treat it right as long as it has the same name. you can read more about it here: http://www.fontgeek.net/blog/?p=253.

3. Use a different version
Linotype offers a version of Helvetica Neue that doesn’t conflict with the system font because it has a slightly different name. You can find that package here: http://www.linotype.com/1266/neuehelvetica-family.html?gclid=CPPViZj8g50CFQhV2godCA44bA

Elegant camera rotation using Quaternions in Papervision3D

Quaternions sound really scary… and I admit, they are. I don’t pretend to even begin to understand the math behind it, but using Quaternions in your code will make transitions look much nicer! It is something really helpful if you’re moving your camera around in Papervision3D to match objects’ rotation.

here’s an example that shows the difference between normal approach and the quaternion one:

source

so — what are quaternions?? you can read about it in Wikipedia, but for our purposes, we’re using it to calculate the SHORTEST route to a certain rotation (on all axises). we basically take the beginning angle, end angle, assign a SLERP value (SLERP = spherical linear interpolation) and tween it!

It’s really not that much when it comes down to it. here’s what the code should look like:

SOMETHING TO LOOK OUT FOR — it you’re scaling the object you’re copying the transformation from the quaternion calculation will be incorrect.

There are other approaches to this, but I think it’s the simplest one. Here is a good post about using it for an object rather than the camera.

Creating MOV files from actionscript (AS3 or AS2)

The other day I played out with my band and wanted to have a cool visual projected behind us.  I needed to get an adaptor for the projector, but found out that the new macBookPro’s miniDisplay connector only supported DVI or VGA converters (because the video card only supports digital output). The projector only had either composite or s-video inputs available, and a digital-to-analogue converter ran up a $100…. SO, I decided to try something I’ve heard of before — export actionscript code into an MOV file in order to burn a DVD from it.  It turned out to be really REALLY simple!

Here’s an example of an export of Flint Pixel Particle System:

Here are the steps, just make sure you’re running CS3 or CS4 Flash IDE.:

1. go to file>export>Export Movie…

2. select QuickTime from the drop down and choose destination

3. Then you get a few settings. here’s a quick rundown:

Ignore Stage Color: check this if you want to have a transparent background. if you don’t check it, the SWF bg color will be used as the background. note that it will increase file size (use 32bit color values) — and also make sure to select quickTime settings that will match this selection.

Stop Exporting: if you are doing timeline animation, select the first bullet (When Last Frame Is Reached). If you are running a script, you need to specify the amount of timeyou want to render it for. be aware that the format is quite picky. if you want 30 seconds, you can simply type 30, but if you want a minute and a half, you can’t type in 90. You need to type 1:30. for an hour and 30 minutes (are you insane!?) you will need to type 1:30:00. there’s a millisecond option as well (30.5 is 30 seconds and a half).

Store Temp Data: Choose to either store temp data on memory (RAM) or HardDrive. If you just want to export 30 seconds or a couple minute, choose the memory option. I was exporting 50 minutes of animation, so I had to store temp data on my HD. Even if you use compression, it will first store the uncompressed data on your RAM or HD, and only after it is finished it will compress the file.

QuickTime Settings… : disable sound if you’re not using any. then, click the “settings…” button. for best results, I would recommend Animation Codec at BEST quality. if you chose the transparency option, select Millions Of Colors+, otherwise, just Million Of Colors. Quality — high or best. The dimensions by default match the flash stage settings, so I would recommend to match that to the final output source (720×480 for NTSC DV for example).

3. Click export and wait….

Handling Masks and Transparencies with BlendModes in Flash

I was messing around with masks today trying to find a good solution for a fairly complicated masking job.  I knew that BlendMode.ALPHA was capable of doing masks, with an advantage that it renders the mask with gradients.  Now, I know there’s an easy trick for masking with gradient transparency — just cache both sprites as bitmap and create the mask.  BUT, what if you have a more complex scene, that you don’t necessarily want to cache as bitmap (for performance reasons for instance), or what if you want to mask a few different sprites, and not just one?  that’s where BlendMode.ALPHA comes in. Here are a couple advantages of using it:

1. BlendMode.ALPHA masks ALL layers under it (in a specified DisplayObjectContainer), so you can mask multiple object, and not just one (which is the limit with a normal mask)

2. You can create a mask of the INVERTED alpha channel, by using BlendMode.ERASE

3. Great at animating with gradient transparency

One thing to be aware of is that unlike a mask, parts of the object that are not defined (don’t have alpha values) won’t affect the image below, so your mask should match in size the objects your masking.

To apply this blendMode, you must first define the displayObjectContainer’s blendMode property as BlendMode.LAYER.  here are the steps:

this.blendMode = BlendMode.LAYER;
_myMask.blendMode = BlendMode.ALPHA;