Away3D 101 : Text

Away3D can take an amazing number of tasks and make them fairly simple to set up. But surprisingly displaying text isn’t one of them. Not that it’s hard. It’s just a bit verbose.
You have to:

1. Embed the font in a SWF.
2. Load the SWF into Flash.
3. Use ByteArray to extract the font from the SWF
4. Create a Material to use on the font face.
5. Create the TextField3D.
6. Create another Materialfor the Extrusion.
7. Extrude the TextField3D – assuming you want the text to pop in 3D

• Away3D 101 : Basics
• Away3D 101 : Coordinates
• Away3D 101 : View3D and Camera3D
• Away3D 101 : Nesting
• Away3D 101 : Camera Orbit
• Away3D 101 : TargetCamera3D
• Away3D 101 : HoverCamera3D
• Away3D 101 : Walkabout
• Away3D 101 : Primitives
• Away3D 101 : Postcards
• Away3D 101 : Segments
• Away3D 101 : Loading Models
• Away3D 101 : Apply BitmapMaterial to Model
• Away3D 101 : Sprite3D
• Away3D 101 : Materials
• Away3D 101 : Lights
• Away3D 101 : PointLight Explorer
• Away3D 101 : DirectionalLight Explorer
• Away3D 101 : MovieMaterial
• Away3D 101 : Text
• Away3D 101 : Vector Shapes
• Away3D 101 : Filters
• Using AS3Exporter in Away3D

That’s a lot for something so simple. Not only that but there’s a little voodoo magic going on. Notice that we use a ByteArray to extract the font from the embedded SWF? Well, that’s not referenced again. At least not directly. In the constructor for the TextField3D we pass a string, “Verdana”. That’s the name given to the font that’s embedded in the SWF. Somehow those get mashed together under the hood. But if you don’t know what the name of the font is called in the SWF then you’re SOL.

// Font embedded in a SWF
[ Embed( source="assets/verdana.swf",
  mimeType="application/octet-stream" ) ]
private var VerdanaSWF : Class;

...

var font : ByteArray = new VerdanaSWF() as ByteArray;
VectorText.extractFont( font );

var faceMaterial : WireColorMaterial = new WireColorMaterial();
faceMaterial.color = 0xFFFFFF;
faceMaterial.wireColor = 0x000000;

var text3D : TextField3D = new TextField3D( 'Verdana' );
text3D.text  = "Away3D ROCKS!";
text3D.size  = 100;
text3D.leading = 20;
text3D.width  = 600;
text3D.material = faceMaterial;
_view.scene.addChild( text3D );

var exMaterial : WireColorMaterial = new WireColorMaterial();
exMaterial.color = 0xFF0000;
exMaterial.wireColor = 0x000000;

var extrusion : TextExtrusion = new TextExtrusion( text3D );
extrusion.bothsides = true;
extrusion.material = exMaterial;
extrusion.back = exMaterial;
_view.scene.addChild( extrusion );

You’re out of luck if you want to change the depth that the font is extruded by. That’s hard coded to 100 pixels. No idea why. Doesn’t seem to be fully baked. Hopefully in Away3D 4.0 text will get revisited and improved.

view source and select t_Text.mxml from the left navigation.

“If you are uncertain what name string is used internally in an SWF file for a particular font, embed it in a text field on stage in a dummy FLA in Flash Professional, and trace the defaultTextFormat.font property of the TextField instance, or select ‘Copy Font Name for ActionScript’ from the Command menu, and paste it into your code..” -Essential Guide to 3D in Flash.

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: BloggerYard.Com