tutorials:
  Flash 8
  Flash MX 2004
  Flash MX
  Flash 5
  ActionScript
  Graphics | Motion
  PHP and XML
  Web Technologies
    Swift 3D
  Review
  Tutorials
  Help
   
 

 
 

 

 

 

 

 

 

 

 
Wireframe
Text
       by kirupa

With all of Swift 3D's 3D-to-Flash abilities, you do not see many uses of the ultimate cool effect: three dimensional text. Why do you not see many examples of animated 3D text? The primary reason is file size. The word "kirupa" rendered in Swift 3D can easily take up about 50k-60k in simple Arial font. Text, unlike shapes, has far more detailed lines, curves, and edges that need to be converted to the Flash format.

There is a solution to the file size problem: wireframe text. Wireframe text is a method of exporting your animation without any shadows and fills. All you will see is the basic outline of the text. By displaying only the outline, the file size for text is considerably less, and the animation can look quite "cool".

You will create something similar to the spinning text in the following animation.

[ the animation has been modified in Flash MX ]


Setting Up Text
What does wireframe text need? Text of course! The following instructions will help you to add text in Swift 3D v2:

  1. Create a new document. Once the new document has been created, press the Create Text tool:

[ the Create Text tool ]

  1. You will see the words "Text" displayed in your work area. Select the word "Text" with your mouse pointer. The left panel will change to reflect the two text options - font and text:

[ the text panel ]
 

  1. In the Text field, replace the word "Text" with the words "wireframe":

[ replace 'text' with 'wireframe' ]

  1. You may notice that the word wireframe is far too large to fit in the work area. Right click on the wireframe text and drag the mouse back. You are, actually, scaling down the wireframe text:

  1. Once the text has been scaled down, you are almost ready to export the wireframe model of the animation. We still need to reduce extraneous curves and lines that might inflate the file size.
     
  2. Make sure the "wireframe" text has been selected and press the Bevels option on your top left. You will see various Beveling options displayed in the left-middle of your screen. In the Depth field, enter a 0 for the depth:

[ enter a value of '0' in the Depth field ]

  1. Removing the bevel by setting the depth value to 0 makes the text look a little bit flatter. While it may not be aesthetically pleasing, the file size will be less than if bevels were applied.
     
  2. The finish off the text, add a simple animation. Click the Show animations button on your bottom-right panel and apply the first preset animation: Horizontal Left (you drag the animation from the regular spins panel and drop it on the "wireframe" text):

[ apply a horizontal spin to the wireframe text ]

Exporting the Wireframe Text
The final steps involve exporting the movie into the Flash SWF file format:

  1. Click the Preview and Export Editor tab near the top of your window.
     
  2. In the Output Options panel on your top-left, click the Fill Options selection. Uncheck the Fill Object checkbox:

[ uncheck the fill object checkbox ]

  1. Next, click the Edge Options selection in the Output Options panel. Check the Include Edges box (if it is not already checked).
     
  2. Ensure that Include Hidden Edges and Include Detail Edges are unchecked. Those two options greatly add to file size:

[ the edge options ]

  1. Press the Generate Entire Animation button and you are all set to exporting the SWF file into Flash or directly to a Web site!

Swift Project File
Complete Flash FLA

The above tutorial should have helped you to learn how to create Wireframe text by using Swift 3D. As you can tell, the wireframe text is not really an 'effect', but it is merely an effect that takes advantage of Swift's Exporting features!

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

 

 


kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components

Flash Templates
CSS Templates
Dreamweaver Templates

flash menus, buttons and components
Digicrafts Components The best flash components ever!
Entheos Flash Website Templates Free Flash Page Flip
flash components Buy and sell FLAs at Ultrashock!
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com create flash slideshow as easy as 1,2,3
Learn how to advertise on kirupa.com