SWFC Manual

Basic usage of swfc   >Fonts<   Shapes   ActionScript   Buttons   Blend Modes   Filters  

2.Fonts

swfc has font support. That means you can also insert texts into your animations. The easiest way to load a font is to do something like .font Arial filename="Arial.ttf" . You now have a font named Arial to play with. For example, for the obligatory hello world program:

Code listing 2.1

 
.flash filename="helloworld.swf"
    
    .font Arial filename="Arial.ttf"
    .text helloworld font=Arial text="Hello World!"
    .put helloworld
.end

Note: The text argument expects UTF-8 strings. So if you want to pass any special characters (umlauts, digraphs etc.), they have to be UTF-8 encoded.

Besides TrueType fonts, swfc also supports native SWF fonts. If you have a SWF with a font you would like to use, do a 

    swfextract file.swf

Then write down the font ID of the font, and do a 

    swfextract -f <fontid> file.swf -o myfont.swf

.

This will give you a file named myfont.swf which you can also use in the filename parameter of .font.

Furthermore, you can convert TTF and Type1 fonts into SWF using font2swf: 

    font2swf Arial.ttf -o Arial.swf

The nice advantage of this is that you can play Arial.swf in the flash player and see what the font looks like. (Also, loading a font in SWF format is slighly faster than from a TTF file, as with TTFs spline conversion has to take place).

So much for the basics. Now let's go to the more advanced functionality around fonts.

Apart from being able to define text in your swfc files, you can also define text outlines. Those are not real characters but rather abstract vector objects which you can use in other commands.

Code listing 2.2

 
.flash filename="fontoutline.swf"
    .font Arial "Arial.swf"
    .textshape helloworld font=Arial size=200% text="Hello World"
    .filled filled_helloworld outline=helloworld fill=blue line=3 color=green
    .put filled_helloworld
.end

Here, .textshape helloworld defines an outline named "helloworld", which is then used to construct a filled outline named filled_helloworld. To make this a little more interesting, let's fill with a gradient instead of a plain color:

Code listing 2.3

 
.flash filename="fontgradient.swf"
    .font Arial "Arial.swf"
    .textshape helloworld font=Arial text="SHADE"
    
    .gradient whitefade:
        0% black
        50% #505050
        100% yellow
    .end

    .filled filled_helloworld outline=helloworld fill=whitefade line=1 color=#2c2c2c
    .put filled_helloworld scale=200%
.end

While at it, you can also fill with an image:

Code listing 2.4

 
.flash filename="fontimage.swf"
    .font courier "Courier.swf"
    .jpeg beach "beach.jpg"
    .textshape text font=courier text="HOLIDAY"
    
    .filled filled_text outline=text fill=beach line=1 color=#2c2c2c
    .put filled_text scale=200%
.end

But let's get back to normal .text characters. The following demonstrates that you can treat objects defined with .text like normal shapes, i.e., scale them, move them, and use them for clipping:

Code listing 2.5

 
.flash filename="text5.swf"
.font courier "Courier.swf"
.text hithere text="HELLO" font=courier size=200%
.jpeg scenery "scenery.jpg"

.frame 1
    .startclip hithere pin=center x=100 y=75 scale=50% #text clips...
        .put scenery scale=50%
    .end
.frame 100
     .change hithere rotate+=360 pin=center scale=100%

.end

The last two examples look similar, but their underlying structure is different: The first is a shape object filled with image data (that is, a texture), while the second uses a normal text object to clip an rectangular image. (More about clipping in the next section)

Also, .text takes a color attribute (that's actually the poor man's version of the more advanced filling options that .textshape in conjunction with .filled offers), which is used here together with the alpha parameter of .change:

Code listing 2.6

 
.flash filename="text6.swf"
.font times "Times.swf"
.text hello text="HELLO" font=times size=200% color=blue
.text world text="WORLD" font=times size=200% color=red

.frame 1
        .put hello pin=center x=50 y=50 
        .put world pin=center x=50 y=50 alpha=25%
.frame 200
     .change hello rotate+=360 pin=center alpha=25% 
     .change world rotate-=360 pin=center alpha=100% 
.end

Another example for clipping against text:

Code listing 2.7

 
.flash filename="textclip.swf" bbox=400x120 background=black version=6
.font times "Times.swf"
.textshape helloworld text="HELLO WORLD" font=times size=300%
.filled helloworld1 outline=helloworld fill=blue line=0
.filled helloworld2 outline=helloworld fill=green line=0

.frame 1
.put h3=helloworld1 y=100
.startclip h1=helloworld1 y=100
    .put h2=helloworld2 y=100
.end

.frame 1000
.change h1 x=-1000
.change h2 x=-500
.change h3 x=-1000
.end

A special type of text in SWF is the edittext, which can be modified by the viewer. It's content can also be queried and set from ActionScript (see below). You can generate this type of text with the .edittext command:

Code listing 2.8

 
.flash filename="edittext.swf" bbox=410x210
    .font Arial "Arial.swf"
    .edittext myedittext font=Arial size=50% 
                         width=400 height=200 
                         color=blue border multiline wordwrap
                         text="Edit me!\nClick with your mouse on this text to edit it."
    .put myedittext x=3 y=3
.end

Previous: Basic usage of swfc SWFC Manual: Fonts Next: Shapes