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

HalfTone effect using PixelBender

After playing around a bit with the Sprite approach to crate halfTone, I realized I don’t have enough computing power to go fullscreen with it, so I turned to PixelBender. it’s a bit different working in PB, and a bit confusing, but with a little fiddling around I created a halftone filter (I couldn’t find any to download — the one on the PB Exchange doesn’t have the PBK file, so there’s no way to know the paramaters that you can control…). I ended up making these paramaters to work with:

brightness (the color f the dots from black [0.0] to white [1.0])
multiplier (offsets the size of the dots)
offset (distance between dots)
radius (ummm, the radius of the dots)

I realized that in order to smoothly fade it it is better to draw the bitmap with the PB effect onto another bitmap, effectively flattening the effect (for a halfTone there really isn’t any advantage of playing with the parameters in real time), and then disposing of the original BMP and the filter, freeing up much needed power.

here is a sample of what it looks like:

you can download the source here.

and here is the source of the PBK.

HalfTone effect in AS3 using Sprites

I had to do some halftone experiments for a project, and so I looked around for some code. There were a few examples out there but I didn’t find anything that I really liked so I decided to create one on my own.

The basic principle I went with was to create dots, and according to the brightness level of the pixel I was sampling, I would scale the dot down (full brightness = scale:0, no brightness = scale:1).

Here’s what I came up with. you can download the source here.

I used BetweenAS3 for the transitions.

-i

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

Creating Text Fields Easily

Creating text fields in AS3 is kind of a pain. You have to create a new text field, determine the width of it, format the text, select embedding options etc. It’s enough to have 4 textFields on one class to drive you crazy.

So, a while back I created to util classes to help me deal with that. you can download them here.

Here’s how to use them:

the Text class extends TextFormat, so you can then manipulate it like you would any other TextFormat field.

These are the paramater it takes:

str:String (String of the text)
format:TextFormat (text format — which you can create in the Formats class)
w:Number = 0 (if you want to set a width to the text, type it here, if this is set to 0, the width will be set according to the text’s length)
wrapMe:Boolean=false (wrap is default as FALSE)
isHtmlText:Boolean =false (HTML is default as FALSE)
embed : Boolean = true (embed is default as FALSE)

The Formats class is just an easy way to keep all of the textFormats organized… kind of like a CSS document.

It’s really simple, but if you don’t already use something like this, it will make your life a lot easier.

I would recommend to use this in conjunction with the runTime fonts loading I wrote about the other day.

-i

iPhone to support Flash Application

today at Max2009 it was announced that CS5 Flash Professional will have an export option for the iPhone!! hurray!

http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

Loading fonts in run-time in Flash CS4

I came across a really cool panel for flash CS4 IDE that lets you create SWFs with multiple fonts that you can access in run-time.

check it out:
http://blog.johannest.com/2009/09/28/runtime-font-publisher-a-flash-cs4-extension/

AS3 Kaleidoscope

I was messing around with Kaleidoscopes last year, and refactored an AS2 kaleidoscope that Quasimondo posted in 2005. I was looking for that code, and found it laying around, so I thought I’d post it if anyone’s interested to see a way of doing it in AS3. Please note that if you want to use this for commercial use, you will need to contact Quasimondo because it’s based on his code. If you need more sources for Kaleidoscopes, you can check out the book ActionScript 3.0 Image Effects by Todd Yard (Friends Of Ed).

source

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….