TextField3D Tutorial
So, what's new with dynamic 3D text in Away3D now? Not much from the end-user point of view, but the internals have changed dramatically from previous implementations. What's most important is that TextField3D is now a permanent class in the engine. We no longer have to use the textfields branch in order to use vector features. The branch was experimental, is now deprecated, and all the investigated features are now being assimilated in the main trunk.
Dynamic textfields are now using Guojian Wu's powerful swf parser. You can see this magnificent tool and more of his work at wu-media.com. The parser allows us to use any font installed in the system, and provides many text wrapping features such as leading, kerning, alignment, etc.
There are many ways to use it. The basic principle is that Wu's parser identifyes a font's byte data in an swf and extracts its vector information. Font byte data can be in the same swf as the main application, or in a different asset swf. The way I recommend to use it is as follows:
1) Create a new FLA file with Flash, create a dynamic textfield for each font on stage, and on each use the properties panel to embed the characters you will want to be using. Export the swf as, for example, fonts.swf.
2) In another actionscript project, use an URLLoader to load the fonts.swf as binary data.
3) Once the data is loaded, use "VectorText.extractFont(_loader.data)" so that the parser can process the fonts. NOTE: In flex, you can also embed the fonts.swf file, and pass the bytes to extractFont() as "new FontBytes()".
4) You can now create TextField3D instances as:
var textfield:TextField3D = new TextField3D("Arial", {textAlpha:1, textColor:0x000000, text:"TextField3D", size:200, leading:0, kerning:0, textWidth:2000, align:"TL"});
_scene.addChild(textfield);
UPDATE: Properties "textColor" and "textAlpha" have been replaced by "material". Since TextField3D supports various material types now, these two properties are not applicable any more.
Click on the image above to see a demo, and then right-click on the demo to view the source.
What's next? In the next few days we will continue to assimilate features from the textfields branch into Away3D's main trunk. Amongst these coming features are vector text extrusion, support for advanced shading materials on vector primitives like text, importing of sprites from Flash with wu's parser in a very similar way as using text in this tutorial, tessellation tools for vector primitives, extrusion of sprites imported from Flash, etc.
I'll make sure to post any updates on this progress. On the mean time, I hope you enjoy these basic text features, and don't hesitate to post any suggestions here, or in the Away3D user group!
Meta
Categories
Archives
- May 2010
- January 2010
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- February 2009
- January 2009
- December 2008
- October 2008
- September 2008
Links
- Away3D
- EzeQL
- Fabrice Closier
- Infinite Turtles
- Kevin Luck
- London Flash Platform User Group
- TheTechLabs
- wu-media lab
July 4th, 2009 - 16:52
Just too easy to be true
July 8th, 2009 - 03:43
can i use this with Flash cs4? or it goes just with flex?
thanks
July 8th, 2009 - 05:48
Yes, should work with Flash as well.
July 8th, 2009 - 09:16
hi Li,
i’m not an actionscript expert, but for some reason the code doesn’t work for me.
Can you explain a little bit how do i have to use it?
Thank you
July 8th, 2009 - 21:05
Having trouble trying to work out how to create two lines of identical text where:
The first is aligned along the front face say of a “box”, and the duplicate text is across the bottom of the box (box doesn’t exist, I am just trying to illustrate how it is aligned) so they are 90 degrees perpendicular and the second is made darker so it acts like a shadow of the original text.
Any ideas how I get this sort of alignment? I tried rotateX rotateY rotateZ type stuff on the second text and for the life of me couldn’t get it aligned how I wanted it.
July 9th, 2009 - 08:29
Max, don’t really know what you mean. Could you send me an image of what you’re looking for?
July 30th, 2009 - 12:12
I keep getting font not found when I try to load it into Away3d ;/
July 30th, 2009 - 14:15
Hello, I’m receiving this error when I try to reproduce your text3D:
Implicit coersion of value with static type Object to possibly unrelated type away3d.loaders.data:FontData
var textfield:TextField3D = new TextField3D(“Arial”, {textAlpha:1, textColor:0×000000, text:”TextField3D”, size:200, leading:0, kerning:0, textWidth:2000, align:”TL”});
July 30th, 2009 - 16:53
Nevermind, I’ve fixed my error. This is a great addition! When can we expect shader materials to be added?
August 5th, 2009 - 18:59
Thought you might like a peak at what I’m doing. Thanks for your contribution Li.
http://quango09.beta.quangoinc.com/client-list.php
I am going to be adding in invisible planes in front of each client name soon to make it fully interactive. Right now only ‘Nike’ is clickable. Can’t wait to see textfields be ‘interactive’ but I haven’t found a better way to do this.
August 5th, 2009 - 19:12
Cool! I’ve been waiting for someone to make something like this with the stuff I do. It looks awesome.
I might be getting involved in a project which should also use textfield3d soon, so I guess I could help you out with feature requests on vector stuff on Away3d while I’m at it.
If you’re wondering about interactivity in text fields, perhaps you should post a topic in the Away3d user group, I know that Rob Bateman has added an interactivity feature to this stuff, but I’m not exactly sure what it is and what it can do.
Cheers, and congratz for your work =)
August 7th, 2009 - 02:02
This is great work. Exactly what I was looking for. Thank you!
Is there any way to add a gradient fill to the text? I’ve been trying to add it as a material but no luck.
August 7th, 2009 - 06:01
I made a couple attempts to get gradients on 3d text glyph with no luck either. It is a bit complicated because you need to apply a 3d transformation to the gradient :S, otherwise it’ll look as if your just masking a gradient with the text.
I even tried rotating the gradients on x and y, trying to match to axis of rotation on the glyph’s 3d transformation… but it doesn’t look too good either.
Will make further attempts though, I definitely want this in!
August 7th, 2009 - 10:59
Thanks for the answer Li. I’m trying to chop an individual letter in half. I have looked at how you bring in the glyph info but modifying it there is beyond me. I’m trying to avoid creating 2 vector shapes for each letter. That would of course destroy the ability to type in any font.
I thought I could fake it by applying a hard cut gradient, half transparent, that would do it. I think I will try a mask next. Any thoughts?
September 2nd, 2009 - 07:26
Hi li, well I’m spending lot od time here those few days !
I’ve ported a 2.3 project to latest f10 trunck yesterday, but I can’t figure out how to make my textfield 3D work :
fonts.swf: compiled fla file with one empty dynamic textField, embed Arial glyphs…
private function blabla():void{
…..
fontLoader = new URLLoader(new URLRequest(prefix+”/swf/fonts.swf”));
fontLoader.dataFormat = URLLoaderDataFormat.BINARY;
fontLoader.addEventListener( Event.COMPLETE, initFonts);
…
}
private function initFonts(e:Event):void
{
VectorText.extractFont(fontLoader.data);
trace(fontLoader.data);
}
private function blabla ():void
{
var textfield:TextField3D;
textfield = new TextField3D(“ARIAL”);
var material:ColorMaterial = new ColorMaterial(0×000000);
textfield.text = “This is some text.”
textfield.material = material;
textfield.size = 150;
textfield.name = “spe”;
textfield.leading = 150;
textfield.kerning = 0;
textfield.textWidth = 5000;
textfield.align = “C”
}
Where is the extracted ARIAL font stored ???
Could you help me ??
September 2nd, 2009 - 08:16
Well…hum hum…. this was a LowerCase/UpperCase problem
But more after I noticed that some fonts just does not work (missing font error, not displayed or badly parsed and displayed). Lucky me, those are the fonts I showed to my costumer !!!
What do you know about font restrictions and how to solve it ??
thanks so much
September 2nd, 2009 - 10:44
Hey Ben,
As far as I know I am not aware of any font restrictions in Wu’s swf parser. If you follow the recommendations on how to load a font, you should be able to load anything. If it still doesn’t work, send me the font and I’ll try loading it myself.
September 2nd, 2009 - 12:22
Check your mail !
December 10th, 2009 - 11:53
hey Li:
how can i add BitmapMaterial to TextField3D,it can’t find this uv,
like this : TypeError: Error #1009: 无法访问空对象引用的属性或方法。
at away3d.materials::TransformBitmapMaterial/getUVData()
how to solve it ??
December 10th, 2009 - 20:48
I’m afraid this is not a bug, irregular shapes in Away3D don’t support bitmap materials. If you want a solution, I’m afraid you would have to dev this feature.