I got myself a Droid X a few weeks ago and have been loving it.  I finally got around to building my development environment and actually got started working on my first app.  Right now I’m just toying around with the GPS service, but there’s tons of stuff I want to get to.  I’m hoping to post up some screenshots, demos, and code soon.  For now the setup is:

• Eclipse 3.5.2 + Android Plugin
• Android 2.1 SDK (til I get Froyo in a couple weeks)
• USB connected Droid X (the emulator sucks to develop against)
• A total lack of Java experience
• Jack Daniel’s

I know, it sounds awesome, but anything that includes Jack Daniel’s sounds awesome.  I also want to get my hands on the Android Native Development Kit (NDK) but just haven’t had time yet.  Android is going to be my favorite mistress for a little while, but don’t worry.  I’ll be back to Away3D in no time, especially once I get that Froyo update and can run Flash on my Droid X!

I finally took some time away from Away3D… and dove into Away3DLite!  Away3dLite is quite simply your choice when you need performance over functionality.  It strips a lot of the heavier features from Away3D and leverages improvements in Flash Player 10 directly.  For this reason it’s only compatible with Flash Player 10 (sorry 2.x users).  Away3dLite in the right hands, though, is no slouch in the visual flair department.

In this demo I take a JPG, slice and dice it up into cubes, apply a color material to each cube that is the “color average” of a chunk of BitmapData, then let you change the background color and blend mode to get some interesting visual effects.  The demo below has almost 5000 faces and 400 color materials, which would likely bring Away3D down to a crawl in terms of frame rate.  With Away3dLite, though, I’m currently getting a steady ~27 frame per second!  Great performance and cool effects all rolled into one great package.

You can right click and “view source” on the demo to get a look at exactly what I did, but there’s one section of code in particular I’d like to point out here.  In Away3D, if you want to apply Flash filters and blending, you needed to do the following:

1
2
3
4
5

var object:Cube = new Cube();
object.ownCanvas = true;
object.filters = [new GlowFilter()];
object.blendmode = BlendMode.ADD;
view.scene.addChild(object);

In Away3DLite, things are slightly different.  In Away3DLite, objects don’t have their own canvas by default, I assume as a performance boost.  To give your objects a canvas and achieve the same as the above code, you have to create your own canvas in the layer property of Object3D and add it to the view, like this:

1
2
3
4
5
6

var object:Cube6 = new Cube6();
object.layer = new Sprite();
object.layer.filters = [new GlowFilter()];
object.layer.blendmode = BlendMode.ADD;
view.addChild(cube.layer);
view.scene.addChild(cube);

Hopefully this saves somebody switching from Away3D to Away3DLite a few minutes (or hours).

Featured Away3dLite Codee:

• flash.display.BitmapData.getPixel()
• flash.display.BlendMode
• away3dlite.primitives.Cube6
• away3dlite.core.base.Object3D.layer

I’m starting to cook up a few game ideas with some friends of mine and I wanted to get a sense of what Away3D could really do.  To start, I made this very basic example of Away3D loading a fairly high poly 3DS file with minimal animation.  More specifically, it’s a rotating, 2880 poly, torus knot with a wire frame material.  While Away3D isn’t really made to handle models with this many polys, it gives me an idea of how it will handle a total polycount of about 3000.

Featured Away3D code: Max3DS.load() and WireColorMaterial

Click the image above to access the example.  You can right click on the example and click “view source” to,  you guessed it, view the source.

Click the above picture for a demo.  Right click on the demo to view source. Be sure to pay close attention to the apply() and positionPlane() methods of SimpleShadow.

You want to quickly add perspective and depth to a scene?  Look no further than shadows.  Shadows can make a minimalistic scene look fantastic.  Take a look at the website of Peter Kapelyan, one of the Away3D’s developers, and you’ll see what I mean.  Luckily, in Away3D they are easily available in more than one form.  Note, though, that shadows in Away3D are not actually created by light sources as this would be extermely expensive in terms of performance.

The above demo shows Away3D’s built-in SimpleShadow class (left) vs. a shadow created simply by adding a plane with a shadow BitmapMaterial (right).  Both are pretty easy to do, and both have their pros and cons:

“Shadow conforms to object shape” means that no matter what type of 3D object you are applying the SimpleShadow to, the shadow will accurately represent its overall shape.  With the BitmapMaterial method the shadow image must be created specifically for a particular 3D object to maintain an accurate representation.  So for a cube you need to create a square shadow image, for a sphere you need to create a circle shadow, and so on.

By “needs to be added” I mean that there’s no reason this functionality could not be added to the BitmapMaterial method. The reason its not there now is the reason that SimpleShadow won’t perform as well as the BitmapMaterial method. All those extra calculations and shadow redrawing are what will slow down a scene that has one too many SimpleShadows.

The clear winner might appear to be SimpleShadow, but if functionality always won over performance we wouldn’t have a need for Away3DLite.  In general, if you have a scene with only a few shadows and you would like those shadows to appear realistic relative to the object casting them, use SimpleShadow.  If performance is the main concern, like in a scene with many objects casting a shadow, the BitmapMaterial method would likely suit you best.

These are the 2 methods I’ve seen for creating shadows in Away3D, but there may be others.  If you find any, let me know.  Otherwise, enjoy!

UPDATE: I conversed with SimpleShadow’s creator, Fabrice Closier, and he was confused as to why I said SimpleShadow’s performance was slower.  I should clarify that SimpleShadow is slower only when the shadow needs to be redrawn frequently with the apply() method.  In a still scene or when the shadows in the scene do not often need to be redrawn, the performance should be very similar to that of the BitmapMaterial method.

Originally this project was the main page for savagelook.com, but I decided it to shuffle to “projects” on my blog.  While it is was a very cool showcase of the things I had learned so far using Away3D, Flint particles, FLARToolkit, FLARManager, TweenMax & TimelineMax, its not really practical for a main interface… yet.  Here’s the things I learned in this initial undertaking that I plan to apply to all future projects involving Away3D(Lite), particularly when the average user is the target audience:

• Performance ALWAYS has to be on your mind.  There’s nothing more annoying to users than low frame rates.  Many of my next points relate directly to this.
• Use Renderer.BASIC as your view’s renderer whenever feasible.  You will take an immediate performance hit trying to use the smarter z-sorting renderers (CORRECT_Z_ORDER or INTERSECTING_OBJECTS)
• Control the size of the view.  While a resizeable view that fills the browser seem great, you can take a nasty performance hit on high resolutions.  For example, this project runs like a champ with a standard 800x600 or 1024x768 resolution.  When I jump it up to  1680x1050, though, things start to get a little choppy.
• 3D particles are a whore on resources.  Fake 3D effects with 2D whenever possible.  You can literally get 100x (or more) particles in 2D and maintain the same frame rate as 3D.
• Use simultaneous tweens judiciously.  There were noticeable slow downs in my intro animations when more than one tween was operating at a time.
• Learn your z-sorting and plan it from the beginning.  I can’t tell you how much time I wasted restructuring my scene and code because I didn’t take the time to learn Frustum clipping, ownCanvas, pushback, pushfront, and screenZoffset before starting.
• Interactivity and camera motion impacts performance. Static scenes will allow for far more polys at a good frame rate than dynamic ones.  Keeping the camera static or using mouseEnabled = false on your objects may help.
• Users expect 2D dialogs and text. Use them whenever feasible to convey information to the user.
• Make sure you clean up your unused objects.  ”scene.removeChild(obj)” and “obj = null” should become your best friend.
• Reuse objects and materials whenever possible.  Its a lot easier and less expensive to toggle the visibility of a relatively simple object rather than destroy and recreate it every time.
• Only render when you need to.  When I use 2D layout for the “Bio” section, I stop rendering the covered 3D scene to help performance.
• Use texture baking or similar techniques to fake lighting.  Real-time lighting, while cool, chews up a lot of resources.  If it isn’t critical, fake it.
• Materials with alphas process slower.
• When all else fails, hit the Away3D Dev list. It may not have the fastest responses, but there’s no better place to get help and guidance.

I’m sure there’s lots more I picked up in the process, but that’s a pretty good assessment.  Hopefully this helps anyone getting started on their own Away3D projects.

I don’t have any specific plans to make version 2.0 of the savagelook.com 3D interface, but I’ve got a few ideas rolling around in my head.  The key factors will be simplicity, speed, more pseudo-3D effects using 2D, and use of Away3DLite.  I’m hoping to really represent Away3D next time.

Download the AS3 Class: SwatchLoader.as Source Code: View Source

SwatchLoader.as is an AS3 class for FP10 that loads Adobe Swatch Exchange (ASE) files into an object.  From this object you can access all group and color information for the swatch.  It handles RGB, CMYK, and grayscale color modes.

This demo was inspired by the work of Jerome at wemakedotcoms.com (AKA, elguapoloco at the Away3D dev list) who recently posted an Away3D site that used the Kuler RSS feed.  Sites like Kuler and ColourLovers provide community supported collections of free color swatches.  Though the idea of creating a swatch of 5 colors is simple, it acts as creative inspiration.  And as such I was inspired to use these swatches as themes or skins for future Flash projects.

Not wanting to be at the mercy of the RSS (Jerome mentioned that he had some responsiveness issues with it) I decided to write a parser for ASE.  While the format is relatively simple and can be used by almost any Adobe CS 3+ product, it is proprietary.  Fortunately I was pointed to this site, where the binary format of many image types can be found.  Armed with this second hand specification and my trusty hex editor, I churned out the finalized code in just a few hours.  Now it can successfully handle ASE formatted swatches from Kuler and ColourLovers.  In theory it should work for any ASE, but I have not yet tested it on anything but swatches from those 2 sites.

With a little luck (and free time) you’ll probably see this included in some of my demos in the near future.  Send a comment if you find it useful or if you run into any problems.

One last note, its not error that the ColourLovers’ swatch name is always “unknown.”  The ASE files generated by ColourLovers do not include the name of the swatch.

At the request of one of my readers (a list that is probably about 12 people long), here is a demo and source code for the carousel gallery included in the 3d version of savagelook.com shown in my last blog post.  It’s a customizable ring of planes that can display any type of away3d material, in this case BitmapMaterials.  You simply need to pass in an array of materials during initialization and the CarouselGallery handles the rest.

This example uses a simple rotation in the render loop, but my 3d savagelook.com example uses mouse interaction to make it cycle.  You could even add left and right arrows if you wanted to have it move one image in those respective directions.  You could achieve this by simply rotating along the Y axis by a number of degress equal to 360 divided by the number of planes in the carousel.

I hope anyone else who wanders tot his site finds it useful or inspirational for their own work.  Oh, and the time to completion for the first code request I received was about a day and half.  So if you have any ideas or requests for me, feel free to send them along in a comment or email and I’ll get to them as soon as possible.  People’s feedback is what keeps me active and on my toes with this stuff.

As promised the demo above includes bare bones source code (right click to view source)  for getting FLARManager up and running with Away3dLite.  And for a limited time, it comes with your very own Camaro!  99% of the credit goes to Eric Socolofsky as the code is just a trimmed down version of his example code included in FLARManager.  The model has been provided free by the modeler “Race Tracks” at turbosquid.  In order to use this demo, you need to do the following:

• Download and print this marker
• Turn on your webcam and point it at yourself.
• Start the demo, point the printed marker at the webcam, and enjoy!

If the above steps aren’t clear, check out the video demo from my prior blog post.  For those out there constantly evaluating how far we can push the performance of away3dlite, you might like to know that the model consists of right around 1000 faces.  1000+ faces along with the video processing of patterns and I’m still maintaining right around 30 FPS.  Not bad at all.

I just prettied up my blog’s sidebar using the Social Media Widget for WordPress.  Pretty simple little plugin for adding nice looking social networking icons to your sidebar that link to your personal pages (i.e., my “Follow Me” section).  Easy to install, easy to configure.  But if you are anything like me, you are handsome, smart, smell terrific, and are never satisfied with the out-of-the-box version of anything.  I wanted my icons aligned horizontally, not vertically.  I also wanted them in a different order.  Neither was configurable, so I got under the hood and made a few small source changes.

To get the icons aligning horizontally in my theme I added “display:inline” to the following classes in social_widget.css:

1
2
3
4
5
6
7
8
9
10

.socialmedia-buttons img {
    border: 0 !important;
    margin-right: 5px !important;
    display:inline;
}

.socialmedia-buttons a {
    background: none !important;
    display:inline;
}

After that I wanted the icons in a different order. To do this I actually had to get into the PHP for the widget. Luckily the changes were simple. All I had to do was cut and paste the specific sections for each icon into the order I wanted. For example, your social-widget.php file will have a section that looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
// Facebook
if ( $facebook != '') {
  ?><a href="<?php echo $facebook; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>images/<?php echo $icon_pack.'/'.$icon_size; ?>/facebook.png" alt="<?php echo $title; ?> on Facebook" title="<?php echo $title; ?> on Facebook" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
} else {
  echo ''; //If no URL inputed
}

// Twitter
if ( $twitter != '' ) {
    ?><a href="<?php echo $twitter; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>images/<?php echo $icon_pack.'/'.$icon_size; ?>/twitter.png"  alt="<?php echo $title; ?> on Twitter" title="<?php echo $title; ?> on Twitter" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
} else {
    echo ''; //If no URL inputed
}
?>

Now say you, like me, wanted the Twitter icon before the Facebook icon. All you have to do is swap there position in the file and they will show up in the desired order:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
// Twitter
if ( $twitter != '' ) {
    ?><a href="<?php echo $twitter; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>images/<?php echo $icon_pack.'/'.$icon_size; ?>/twitter.png"  alt="<?php echo $title; ?> on Twitter" title="<?php echo $title; ?> on Twitter" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
} else {
    echo ''; //If no URL inputed
}

// Facebook
if ( $facebook != '') {
  ?><a href="<?php echo $facebook; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>images/<?php echo $icon_pack.'/'.$icon_size; ?>/facebook.png" alt="<?php echo $title; ?> on Facebook" title="<?php echo $title; ?> on Facebook" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
} else {
  echo ''; //If no URL inputed
}
?>

And there you have it. With a few simple tweaks I got the Social Media Widget looking just how I want it. Oh, and while I was writing this post I added the WP-Syntax Plugin for WordPress. It is responsible for the sweet syntax highlighting in all the code segments. I highly suggest it for anyone adding code to their WordPress blogs.

Click here for the source code or click on the demo above then right click and select “view source.” Also, here’s a link to the FLA for CS5 that can be used to publish the SWF that will contain your target font.  Simply open the FLA in Flash Pro, change the font of the “test” text on the stage, click “Embed” in the character panel to make sure the right font is set, and then publish your SWF.  The resulting SWF will contain your ready-to-be-embedded font.  If the following steps weren’t goos enough, let me know.  If I get a complaint or two I’ll put up a screenshot walkthrough for the whole process.

Text comes in many forms in Away3D and they all have their own advantages and disadvantages.  Here’s a quick run down of the various methods I know for generating text in Away3D, which are all displayed in the demo above.

PNG + BitmapMaterial + Plane With this method, you take a PNG (or any other image format Away3D handles) image file containing the text you would like to display, create a BitmapMaterial from it and apply the BitmapMatierial to a Plane.

Pros: Fast rendering Cons: Static text, quality depends on image resolution, text is flat

Textfield + MovieClip + MovieMaterial + Plane Here we create a Textfield with our text and add it to a MovieClip.  We then create a MovieMaterial from the MovieClip and apply it to a plane as in the last example.

Pros: Fast rendering, dynamic text Cons: Text is still flat

TextField + Sprite + BitmapMaterial + Plane Almost identical to the last example, except this time we create BitmapMaterial from a Sprite.

Pros: Faster rendering, dynamic text Cons: Text is still flat

TextField3D We use the TextField3D class in conjunction with wumedia.vector.VectorText.extractFont() and a specially created SWF file that contains the embedded font we want to use in our example.

Pros: Vector quality text, dynamic text Cons: Text is still flat, can only use embedded font

TextField3D + TextExtrusion We expand on the last example by using the TextExtrusion class with the TextField.  This creates a 3 dimensional outline of our vector text finally giving us some depth.

Pros: Vector quality text, dynamic text, 3 dimensional Cons: Can only use embedded font, fonts have arbitrary “winding” when drawn so determining which side of the text is the “back side” is tricky and can screw up shading materials.

3DS Model (high and low poly) You can always forgo the ins and outs of dynamic text and do it yourself in the modeling program of your choice.  In this case I used 3DS Max 2010 to create low and high(er) poly text.

Pros: Full control over appearance of text Cons: Text is totally static

So there’s the list of methods I’m aware of.  You got any more?  See anything glaringly stupid above?  Let me know either way.