It all starts in Cinema4D. I’m using Cinema4D R11. Create a new project and start with a tube primitive.  Below are some of the parameters I used

Tube Properties

Then select the primtive and hit the “C” button. This will convert it to a polygon object. Your object manager should now look like this:

Now we will add a new material. I downloaded a metal texture off of CG Textures and reduced it’s size to 256 x 256.  In a 3d system inside flash the two biggest things that can quickly bring your project down are the number of vertices in your model and the dimensions of your texture. Some general numbers are that a scene can support around 6,000 vertices give or take. So it’s great for simple scenes but for anything larger you might want to try another 3d environment like unity3d.

and when you get prompted to copy a version of your texture file to the textures folder hit yes, it will save some hassle later with the file path. Also be sure to rename the texture to something recognizable like “RingMat” so that it can be identified later.

Now switch over to vertices mode and hit apple + a to select all the points. Then select functions > triangulate. In Cinema4D will default to drawing quads or units of 4 points. Inside Away3D it draws with triangles so we need to make this adjustment.

Now we switch over to BodyPaint UV Edit where we can quickly adjust the UV Map so it doesn’t look quite so hideous. If you are new to UV mapping and 3d in general UV mapping allows you to customize and control how your 2d texture appears on geometry and shapes in 3d. UV Mapping is an art in itself and can take weeks to do perfectly. For this exampl and for other simple tasks the UV Editor inside Cinema4D can take a lot of the work out of it.

Now select the UV Mapping wizard.

Now just have to go through all the steps of the wizard.

We will be using the object option.

There are multiple ways you can map coordinates to a texture. Cubic Mapping will work fine in this case. Cubic maps generally make simpler uv coordinate systems. Angle mapping by default will have a collection of smaller more precise parts.

Now select the color channel until it has a – through it’s check box. Otherwise the UV Wizard will overwrite the texture that we already set. If we had a more complicated texture scheme we’d want to map other channels too. But for now color will suffice. Now switch over to polygons mode. Hit cmd + a to select all the polygons. If the selected polygons are orange that means their normals are facing the correct direction.

For the non initiated when a 3d renderer draws all the vertices it draws them in order and this order determines which way it faces. The flat solid part drawn between them is also called a face. A 3d engine does not render faces that do not have their normals facing the camera. So they save on resources by only rendering half of what we need too.

Now the good part: we export! In this screenshot is also a rendering of what the new UV Map looks like.

Export the file in into your project. You will need to also copy the /tex folder into wherever you export your .dae ( collada ) file. This is because inside the Collada file it specifies a URL to it’s default material. Open up the Collada file in your preferred text editor. TextMate or BBEdit are popular choices: I’ll be using BBEdit.

A Collada file is basically a large XML File with specific nodes for a 3d scene including vertices, UV Coordinates, and texture parameters. Inside <libraray_image> there is the <init_from> that specifies the URL of a UV texture. If you are using Cinema4D 11.5 it will provide an absolute url but you can change it to relative like the screenshot above.

Inside the <library_materials> you can spot the texture we named inside Cinema4D. We will use “ID3″ inside Away3D to get the material info we need.

Now onto the code. The code is written with a .fla and a document class but it will work as pure actionscript. There is nothing linked in the library or any other dependencies. When I use Away3D in a project I usually place all the 3d information inside a seperate class but here the document class should be fine. I always make a createAway3D function()

In this function we create a test object to make sure our scene renders. Away3D is composed of a few basic parts. First we have the View3D: think of this as a sprite that will hold and render your 3d scene. The Camera is how the scene will be viewed: it’s the window to your 3d world. Views are also comprised of scenes which is a holder for all of your 3D Objects. The last component of a view is the renderer: this is what will actually rasterize your 3d scene into a 2d image every frame.  In Away3D when you create an 3d Object you pass in a separate object with all the properties that you want initialized. The x + y properties dictate where the center of the scene is. The view will automatically be full stage size.

To call the collada file you create a new Loader3D class and use the static Collada.load() method. In the document class you can see the onLoaderSuccess Method but it’s fairly straight forward. In a collada file we have to access the material through the MaterialData class. Here we plug in the ID3 that was identified in the Collada .dae file.

One last concept that I used in this code is Bitwise operations. Bitwise operations are quicker ways of doing simple operations. There are a whole slew of bitwise operations that can be quickly googled for. This bitwise operation will cycle through all the items in the array and when it reaches the end will return to zero.

That’s it! Full Collada model support. If you are having trouble seeing your model make sure that your normals are correct and try adjust the size drastically. Sometimes my models come out with .25 , 5 , or 90 for the scale. It’s all relative. The source code is available here.

While our time alocated for sound was very slim I was able to get some great sounds together for a background track and some key sound effects for our piece. For all the sound I used Audacity with GarageBand, mostly because it’s what I am most familiar with and I knew that I would have to use some MIDI instrument tracks. Audacity was used to reverse certain loops and then to re import those back into Garageband. The cool thing about XNA + Sound is that I was able to throw in the angle of where the sound was originated in-game to give is a more immersive and realistic feel.

The background track was the most crucial. One: how do I create something that wouldn’t drive us or our users insane? Two: how did we want to convey our game? All of  our reference had been on RTS pc games which used a very industrial sound to convey urgency and science fiction. Our game was more light-hearted and would be displayed to all age groups. For inspiration I mainly pulled from Command + Conquer II sound track and Katamari Damacy. The happiness of Katamari proved a good counterpoint to the harshness or Command + Conquer II. I also listened to some of the DJ’s I admire for their music tracks mainly: Deadmau5.

Have a listen: Background Music Track

For sound effects these were slightly more fun having only a few seconds to play with to really convey something that didn’t sound like a garageband preset.

The user’s character had an electrical attack that was triggered in game, I wanted to include a surging, the aftershock, and also the cry of the enemy in relation to the shock.

Have a listen: Avatar Attack

Avatar Die

When the user’s character dies it does this sort of unravel and then explosion of parts. I tried to combine as many bone-breaks, body hits, and other shatters I could along the build up before it resolves with a nice low concussion blow.

Have a listen: Avatar Die

Shield Powerup!

The user’s avatar was able to temporarily gain special power in-game. In addition to changing the avatars physical appearence sound was of great help. In this sound I wanted a build-up that was somewhat dissonant with a sharp resolution and echo to follow.

Have a listen: Shield Powerup

Speed Boost!

The user’s avatar could also gain a short temporary speed boost. I wanted something similar to the Doppler effect when a car drives by: quick abrupt build and a sudden resolution accompanied with an echo.

Have a listen: Speed Powerup

I am by no means an expert, but I did have some fun making these together for our installation and the feedback was good from both other presenters and the team as a whole.

Recently I decided to tackle a challenge posed by Firstborn in New York on behalf of the Society of Digital Agencies to students at RIT . The challenge: was to animate type completely with Actionscript 3.0. This text had to be loaded and configured using XML, and XML only. Having previously done a text explosion effect in papervision3D I knew that I wanted to do something a little different. I finally decided on everyone’s favorite thing about New Zealand- no not Lord of the Rings. Flight of the Conchords! Being the tech geek that I am their song “Robots” seemed perfect for this assignment, plus it was only two minutes long.

The XML was broken apart into
tags which symbolizes a single line of lyrics. Feature creep got out of control on this quickly as I quickly wanted to be able to set the font, color, start position, end position, whether the positions were relative- just to name a few.

a type line might look like this:

other attributes included were changing the background gradient color, and a duration offset that was used to keep two lyrics on the screen at once.

Toward the end of development I realized that I needed a way to embed the fonts so that they were viewable on all computers. After googling and researching several different methods I simply found many of them to be very cumbersome. I couldn’t find any solutions that allowed me to embed multiple size fonts inside a single font.swf. Imagine my frustration when I wanted to embed 12 different font sizes that were key to my animation. So: in not the *best* coding practices I simple included two dynamic text fields and grabbed their font on the fly. Long ago I learned that by placing a space character ” ” inside a dynamic textfield it kept all of it’s textFormat properties, this made coordinating with designers much easier on a smaller page-by-page basis.

This magical method allowed me to quickly embed the font by using these pre-embedded textFields and go about my day.

I posted the source code so anyone can look through it and see exactly how I pulled the XML data and loaded fonts. Unfortunately I cannot zip up the song to go with it because the Flight of the Conchords own the intellectual property, but you can view the final result below.

WordPress is blocking the the .swf file from loading external files so you can view this here

source code is available HERE

Recently I had been wanting to do some more interactive 3D type of projects. I wanted to create something beyond just a pre-rendered sequence that simulated camera movement. I have previously been using papervision3D but wanted to expand my knowledge and check out the competition. Papervision X has been long expected but with Ralph Hauwert Unit Zero One leaving the team I thought it was time to move on. Away3D was very highly recommended by my colleague Kyle Beikirch for it’s more frequent updates to SVN and ease of interactivity. Since I was exactly sure what would be interactive when I started: I gave it a shot.

In what I did there wasn’t really a huge difference between the images but I did like how Away3D uses associative arrays much like Greensock Tweening platform instead of traditional constructors. If I didn’t want to pre-render as many assets as possible I would need an internet source to grab them from. I thought that combining the antics of twitter with somewhat related photos could yield some interesting results. At first I grabbed XML from the twitter time line, but I wanted to have more control over my results. I used the Tweetr Twitter API, and got a lot of code inspiration from Lindsey Burtner’s Word Feeder. Lindsey helped me last year when I first began mashing together the last.fm API, and proved an invaluable resource, so props to her.

Let’s dive into some of the key functions that make this work:

Once the Flickr and Twitter data has been collected we then insert it into a 2D MovieClip and prepare it for 3D.

Dynamic Draw of Movie Clip to Bitmap Material

We prepare it for 3D by simple flattening it with transparency.

Document Class creates Bitmap Material

I wanted to organize the planes in  a Helix and found this post from Lee Brimelow’s blog and modified it for my needs. The by rotating the scene 360 degrees we get this cool spin effect for the zoom out.

Make a Double Helix our of Shapes

Now we need a way to navigate between planes, at first it was very linear but that got boring quickly. So I added in a new random index each movement to make it feel more exploratory. Adding a mouse event to planes would have been the next logical step to give users some control.

Generating a Random Index from an Array

Now the fun part: the camera. First we get the distance to to the next target and tweak it so that that camera movement is smooth for all distances.

The Camera has two tweens:

1) To move away from the plane randomly around it in 3D space

2) To move towards the new target

We change the focus of the camera by tweening an empty displayObject3D this would be our “null object” in 3d or After Effects.

The bezier gives the tween a nice smooth and organic feel, something that is lacking with a lot of fully 3d sites.

The newY just calculates which direction the camera should swoop in depending if the target is above or below it.

Moving the Camera

We save the initial values of our current target so that we can return it to it’s rightful place the user is done looking at it. In our tweenCameraDone() function we save the coordinates of the camera in case we need to reset it.

Moving the Camera pt 2

That’s it! I had fun making it and mixing interactivity and 3d Camera. Play with it and let me know what you come up with!

Source Code is available here

Infinite Puddle:

Have fun and share your results!

But first: How Does the Color Matrix Filter work? The API Doc can be read here. But is creates a matrix that alters each pixel’s color channel.

This is called an "identity matrix" and it will result in no color change.

Each channel is multiplied by the Red, Green, Blue, and Alpha channels and then offset by the last argument in each row.

Now the code I used was directly based off of Lee Brimelow’s code:

Basic variables needed to create effect.

It only takes three variables to achieve this effect:

• A Sprite Holder of what to affect
• Blur Filter to create spill-off effect
• Color Matrix Filter to apply for Color

And then inside an Event.ENTER_FRAME you add this code:

Draw the sprite, apply blur and color filter

and voila cool trails! Don’t believe me? Here are some examples I was playing around with:

Lava Lamp Looping Fluid effect :

Effect creating Lava Lame Ripples

Day Glow Trails

Exploding Trails

*UPDATE*

I was able to get the zDepth working by applying simple blur filters to the bitmaps of the BitmapMaterials inside papervision3D. I also added in an input text field so that users could change the text without having to recompile. I have some bigger ideas for this down the road, like sequencing camera tweens between each letter. And exploding a whole paragraph word for word. I had some trouble with making the letter interactive, but it’s always been a bit of a pain to get events working with papervision3D. But for now: I’m happy where it is. The code is extremely well documented and if you have any questions just shoot me a line at : ben.mcchesney@gmail.com

The update source code is located here

Click on my name to get the explode effect, and click again to revert to the whole word.

First I created a sample using just 2d MovieClips in Flash. Using the text of a dynamic textField on the stage it breaks down and seperates each text into it’s own textField with it’s own movieClip container. By the character’s inside a movieClip I was able to apply TweenLite’s blurFilter and fake depth of field, by checking the zDepth of the letter

But this solution wasn’t as appetizing. It lacked the interactivity that I was trying to emulate. I wanted to be able to explode the text and explore the wreckage. The Flash player 10 also has an issue with z-sorting. Since all of the 3d is just a raster illusion the zDepth is fake. If a child that has display index than another child with a lower z-depth the illusion is broken. So I could either write my own methods to parse through each array item and update the displayList constantly or I could go in a different direction.

. 

z-sort issue the letter "B" should be behind the letter "E" but Flash Player 10 doesn't sort it.

I was going to create a version of textExplode using an actionscript 3D api : Papervision3D (Papervision3D Site) . In papervision you have to create a small plane for each letter and draw a bitmap of it. You then take this bitmap and apply it to the geometry of the plane.

By creating a bitmapData object to draw the movieClip we can cast it as a BitmapMaterial and apply it to a plane.

I had been used to the old version of papervision3D which meant constructing a scene with viewports, cameras , renderers, and scenes. But in papervision 2.0 by simple extending the BasicView Class, all of these assets are extendable for your connivence. The result was a quickly developed, dynamic 3d text explode code set.

Another different technique I used was the use of Vectors. Vectors are a new data type in Flash Player 10 and are essentially arrays with of one and only one data type. This allows for strict data typing in for all array function increasing performance. It’s less noticeable in this example, but in a physics simulation where it’s stepping through each particle’s force application every frame. The increased limit of particles or general smoothness would be more obvious.
More information can be found on Mike Chambers Blog : here

The next steps are to apply depth of field by checking z-depth and being able to change the textField while the swf is running. I would also like to increase the interactivity by being able to focus and zoom to certain letter and really get the exploration feel. Another change that’s on the to-do list is a second stage breakup of the letters bitmaps into tiny triangles or squares for more fodder to explode.

I’ll keep posting as I get farther along and make it more and more extensible.

Outdoor Panoramic scene where the user collects samples

Over the last 5 weeks I had the wonderful opportunity to work with a Designer I have also had tremendous respect for : Kevin Whitefield ( site is located at : virtualmatter.org ) . Our goal was to create an online experience that that was truly immersive. We used flash technology and create several scenes the user could  navigate and interact with very similar to Quicktime’s QTVR technology.

At first we toyed with the idea of using papervision3D but realized that it was not as feasible as we first thought, even though projected environments on spheres did correct a lot of the distortion problems caused by large panoramic images.

This project was also a great opportunity to create complex soundscapes which I had a blast creating, and was thankful I allocated enough time to do it well.

This is just the first polished version as of right now but a new and improved version is already in the work to improve a users sense of purpose , and explain the interactions better for less tech-savy users. Overall though this project was a great experience in collaborating with a designer.

I used Gaia Framework ( gaiaflashframework.com ) for the site and ran into some interesting problems with detecting mouseEvents while scrolling around a panorama. I ended developing this entire system that fake mouseEvents and used Point.distance(  ) between the mouse’s position and the hotspots position and comparing that to the width of the hotspot.

Below are some screenshots taken at various instances in our storyline, but that really doesn’t do it justice.

Head over to http://shadeAdventure.org to checkout our site, and please : turn up your volume.

The Machine room where the user inputs a activation code into this monstrous machine

Labratory Scene where samples are analyzed

We also provided a wallpapers section so users had a take-away for some of the stunning artwork created.

Visualizing Ideas

Photo Montage

For this picture I combined cubism with photography. I extruded the cubes of each of their portraits based on their relative distance to the camera: accentuating the z-depth. The subjects of this photo were my two band mates Roger Lane and Seppi and we had a blast shooting all sorts of ridiculous poses before coming up with some usable shots.

Panoramas

Every Year New Media Club has an annual apple picking event at a local apple orchard. The owner let me come onto the grounds before opening so I could get some nice unobstructed shots. Shooting at around 5:30AM also gave some great effects with light rays breaking on branches and the dew-drops still on the leaves.

This road panorama was also taken at the orchard. In retrospect the scene was in the shade and a bit darker than I would have wanted. Taking the panorama in the sun and positioning myself so that they entire road across the image would have made this more successful.

I am by no means a photographer, but after playing with it a little more I think I’ll invest in a camera in the near future hopefully something that records HD video too.

I could always develop individual swfs, and do little test experiments but when it came to making entire sites, I always seemed to fall short with navigation, garbage collection, and good coding practices just to get it to work. But using Gaia, I am able to correct all these problems, and build full websites *easily*. I noticed that a lot of other students also struggled with the development of entire site, and thought I could help by offering up what I learned, and the site that I created.

So that’s cool. But what’s Gaia Framework?

Gaia Framework is an open-source ( free ) front-end flash development toolset, that allows for rapid development or websites.It’s great for all walks of the flash community. Designers can easily turn photoshop comps into clickable prototypes. Animators can control Gaia through the timeline with minimal code needed. Developers are encouraged to use best coding practices and Gaia can create Flex Compatible project files.

Gaia uses Several Industry-Standard Tools

SWFAddress – used for deeplinking on flash sites which allows for the use of foward/back buttons, and bookmarking specific sections of the site.

Greensock Tweening Platform - Lightweight, fast tweening engine.

Monster Debugger – Actionscript External Debugger

Steven Sacks ( stevensacks.net ) is the creator or Gaia framework and he automatically bundles the latest version of all these tools with it. So you will always have the most up to date versions of everything by having the most recent Gaia.

Ok sounds cool, where do I get it?

http://www.gaiaflashframework.com/

On that site there is robust API and how-to wiki.

Forums for specific questions, demo sites, screen casts and lessons.

If you have feature suggestions: post it on the forums and Steven Sacks will probably add it to Gaia.

Each page is a seperate swf.

This allows you to focus on create all the individual pieces and then let Gaia tie them all together.

But you can also easily access everything inside another page using the Gaia.api.getPage() function.

Project Name

This is only used inside the gaia panel won’t be reflected on site.

Source Folder

100% Gaia will write actionscript and css code to make full screen flash websites.

In this section you can set your Width and Height, and whether you want the stage to scale with the browser window. As well as your normal stage settings of FPS and stage color.

Folders

Important to seperate source files, from code to deployable. At the end of the day,you only need to upload the bin/ folder to webspace for the project to work.

Again, best practices: industry standard seperations.

This is the default site XML generated

Here is where you define pages inside this site.xml file. By default the above image will be generated.

site.@title = is what will appear as the title in the browser window. %PAGE% will displays the current deeplink.

Page Attributes

@depth = top , middle, bottom

@menu = adds to right click menu

@bytes = used for bytes accurate preloading. GAIA will generate this.

@id = how flash finds and navigates to this file

@title = what appears as the deepLink

@src = .fla file that it derives from

Scaffolding

Scaffolding is where Gaia takes in each page from your site.xml file and creates a FLA for every page, creates a document class for each FLA and links the two together.
Actionscript or Timeline control of pages allowing flexibility for animators. As a developer I have never tried using the timeline.

SEO Scaffolding – generates HTML pages with flash content in then – buggy with fullscreen settings.

Update Bytes – caluclates the size of each swf to be used for byte-accurate preloading.

Assets – Gaia Allows you to embed assets right when you load the swf so that it is immediately available. Works great with sound, displayAssets, and XML, amoung others, you can also embed fonts this way.

Optimize – Site too big? Need it to be 40K instead of 80K? Gaia will compress itself and remove unneeded files, etc to reduce file size to optimal amount.

Key Gaia Concepts

example of how to use Gaia.api.goto(), I like to trace out the result in case the global nav goes wonky.

Gaia.api.goto( branch : String  );

This is used to navigate to different pages within Gaia. You must either specify the string of the branch EG  : “index/nav/home”. Gaia also creates a static variable for all pages and is accessible through Gaia.api package like so : Gaia.api.goto ( pages.HOME ) ;

typical transitionIn() + transitionInComplete()

Using these allows for smooth transitions and resource management. When you call Gaia.api.goto() it will automatically call transitionOut() on the current page, and will call transitionIn() on the new page for ease. You can also choose the order of how things transition by changing the Gaia “flow”. More information on this can be found on this online at : http://www.gaiaflashframework.com/wiki/index.php?title=The_Gaia_Flow .

Transitions make it really easy to play sound effects, movies, or tween things on/off  stage for transtions, and Gaia will take care of everything.

Accessing MovieClips on the stage

Here you can see the movieClip is just on the stage and its instance name

This was something that I struggeled with until I figured out a solution. By declaring MovieClips and textFields as their instance name as the variable name I was able to access the stage no problem.

Here we can see that the instance name matches the variable name

Preloading

So here is the default preloader. As you can see it’s a sprite that scales up according to the percent loaded, and three text fields that are change through a ProgressEvent Listener.

If you look in the library open up the class for PreloaderScaffold and lets look at the Progress Event.

This code is well documented, but by tweaking this class and the movieClips and textfield on the stage, you can easily create a universal page preloader in minutes.

Local Testing

Sometimes when in Gaia, you only want to test the current .fla file you are working on. You can easily do this without having to publish the whole project, or having to publish main, and then the file you are working on.

If you put in a call to transitionIn() in the constructor of your page it will simulate the transitionIn(). You must also comment out the line new Scaffold ( this ), as it will cause a run-time error. Remember that when you do this any reference to any Gaia function will cause a run-time error because the whole site hasn’t been instantiated. So use caution in this mode, but in a quick pinch it can save a lot of unneeded publishing time. When you finish working on that individual site be sure to remove the transitionIn() call from your page’s constructor or it will cause your site to function strangely.

Well that’s about it that I learned from Gaia!

In my next post I will go more into the fundamentals of papervision and how having a background in New Media Design & Imaging helped a lot.

You can pick up the entire sample project  http://www.benmcchesney.com/Gaia_Example_Source.zip

Check out the full article of me on FI’s Blog at:

http://www.kontain.com/fi/entries/41358/summer-lovin-comes-to-an-end/