More Away3D tutorials posted on Flashmag

28 Nov08

I finally got three more Away3D tutorials posted on Flashmagazine. These contain the source to the Panorama viewer, sound visualizer and CMYK color separation examples posted here along with how to create them.

Here’s the complete list of the nine Away3D tutorials I’ve written up until now:

Flash 3D Basics (not Away specific, but with Away example source)
Installing Away3D for Flash, Flex or Flashdevelop
Away3D Basics 1 - A simple Away3D class explained
Away3D Basics 2 - The View and the Scene
Away3D Basics 3 - The Camera(s)
Away3D Basics 4 - Manipulating 3D objects
Away3D Basics 5 - Primitives (Part 1)
Away3D Basics 5 - Primitives (Part 2)
Create the Earth and heavens in less than an hour with Away3D

Supporting tutorials:
Using Actionscript projects in Flex or Flash
Using Flex Actionscript files with Metadata in Flash CS3

I hope many will find these useful! I’m now working on the last one on the primitives. The next batch of “Basic” tutorials will cover materials and lighting, interactivity and working with imported models. And - it’s soon weekend so I can allow myself to play with a neat little AIR app I started last weekend :)

Away3D panorama viewer

19 Nov08

Another example from upcoming Away3D Tutorials. This is a simple panorama viewer. Code will be in the tutorials. Will publish these right after MAX.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Saint Germain en Laye church. The panorama image used here was created by Seb Przd and is distributed under the CC ByNcSa 2.0 license. Seb’s done some really cool panoramas, so check out his Flickr account.

Away3D video-wall

18 Nov08

Still working on those Away3D tutorials, I wanted to show an example of a Video Wall. I’ve seen this done lot’s of times with Papervision3D, so I figured it’d be easy to do with Away3D as well. Turns out it wasn’t that easy, but from now on it should be since I made a VideoMaterial. In this demo, I’ve added sound support as well so you’ll only hear the sound of the video facing you.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Just move your mouse to rotate in any direction. Move your mouse to the middle to make it stop. I’ll soon add the blurred cover to this file as well, so it does not start playing until you mouse over.

The source code will be published in the Tutorials section on Flashmagazine.com as soon as I’ve cleaned it up and got the text written.

Sound vizualizer with Away3D

13 Nov08

I keep playing with examples for upcoming Away3D tutorials on Flashmagazine. Here’s a simple sound visualizer using Away3D. I store the average 512 samples in 20 values and use these to scale and color the cubes. I’ve spent way too much time playing with this one (without getting the results I wanted), so I better move on to the next example. I guess Beat Detection is a little harder than I thought…

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

The source will be in the tutorial and there’s no interactivity on this one, just enjoy the music:)

Another CMYK separation in 3D

10 Nov08

By putting each channel on a 3D plane with a slight depth offset and set the planes to blend using the “multiply” blendMode, you’ll get an impression of how CMYK separations are done for printed media. While not technically correct, it works much in the same way. Just move the camera a little to see the blur effect that happens in newspapers when the colors miss.

I did this experiment as an example for an upcoming Away3D tutorial I’m writing for Flashmagazine. Rather than using the Munch image, I wanted an image where you could clearly see the difference in the C, M, Y, K color channels, so here I’ve used a color wheel that Adobe’s John Nack published of the CS3 icons.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Click and drag to see the CMYK color layers. I’ll publish the source files for this one when the tutorial is done. Click here for a much larger version.

I used a slightly different approach for creating the color channel PNGs this time and I think this became even more alike the original this time. I Google’d a lot to figure out how to do a proper separation of the channels to PNGs with transparency, but I’m sure there must be a better and easier way than what I did. If you know how to produce PNG files holding only the color information, feel free to leave a comment and I’ll try it out.

3D CMYK Munch

10 Nov08

Saw a thing on TV today about how color separations for print works and got this idea: How would it look if I split the CMYK colors out each their 3D plane and then blend them back again as a picture? Here you can see a painting by Edvard Munch using this effect.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Click and drag to see the color separations. Click here for the source. Click here for a larger version.

The hardest part here was actually figuring out how to split out the C, M, Y and K channels as each their separate, transparent PNG. In the end it was quite simple.

1. Open the picture in Photoshop and convert to CMYK
2. Grab a screenshot of each channel and re-open them in Photoshop
3. Copy the contents into the Alpha channel to use brightness as alpha
4. Tint each channel to the proper color, crop and export as PNG
5. Make a standard Away3D scene with a HoverCamera and 5 planes (One plane for each of the CMYK PNGs + one white plane that the back that’ll serve as the paper)
6. Set the materials for each plane and set their blendmode to multiply

Fun eve project instead of watching telly :D

PS: you can find the original image as well as a lot more of Munch’s works at munch.museum.no. Well worth a visit if you’re ever in Oslo and interested in art.

UPDATED: just posted a new version with a more suitable image