SWFC Manual

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

3.Shapes

In the previous chapter, we learned how to create a text outline using .textshape. The other way to create outlines is to use the .outline command:

Code listing 3.1

 
.flash filename="house.swf"

    .outline house_outline:
        M 36.99 29.93 L 15.52 51.39 L 20.44 51.39 L 20.44 81.91 
                      L 39.73 81.91 L 39.73 62.33 L 48.36 62.33
                      L 48.36 81.91 L 53.84 81.91 L 53.84 51.39
                      L 58.45 51.39 L 36.99 29.93
        M 28.79 53.70 L 34.55 53.70 L 34.55 60.60 L 28.79 60.60
                      L 28.79 53.70
    .end
    .filled house outline=house_outline fill=grey color=grey
    .put house
.end

The syntax of the paths inside the .outline command is the same as in svg. That means you can use the svg editor of your choice (e.g.: inkscape) to create these outlines. You then need to extract them out of the .xml/.svg file. They are inside the "d" attribute of the "path" tag:

Code listing 3.2

 
...
  <path
     style="fill:#0000ff;fill-opacity:0.75000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;"
     d="M 369.90625 299.31250 L 155.21875 513.96875 L 204.40625 513.96875 L 204.40625 819.15625 L 397.31250 819.15625 L 397.31250 623.37500 L 483.68750 623.37500 L 483.68750 819.15625 L 538.40625 819.15625 L 538.40625 513.96875 L 584.56250 513.96875 L 369.90625 299.31250 z M 287.90625 537.00000 L 345.50000 537.00000 L 345.50000 606.09375 L 287.90625 606.09375 L 287.90625 537.00000 z "
     id="rect908" />
...

Outlines can be filled with gradients, bitmaps etc., just like seen previously with .textshape:

Code listing 3.3

 
.flash filename="gradients.swf"

    .outline star:
        M 521,640 C 502,678 370,546 328,554 C 270,566 152,731 93,722 
                  C 51,716 147,549 127,512 C 98,460 -107,400 -117,341 
                  C -124,299 63,339 93,308 C 133,265 127,50 180,23 
                  C 218,3 238,195 276,213 C 330,238 532,166 575,208 
                  C 605,238 429,316 424,358 C 416,417 547,587 521,640 
    .end

    .gradient rainbow:
        0% blue
        25% green
        50% yellow
        75% orange
        100% red
    .end
    
    .gradient fire radial:
        0% white
        50% yellow
        100% red
    .end
    
    .gradient horizon:
        0% cyan
        49% blue
        50% green
        100% peru
    .end

    .gradient transparent:
        0% #ff000000
        100% #ff0000ff
    .end

    .box scenery fill=horizon width=200 height=200
    .box bar fill=transparent width=240 height=20
    .filled star1 outline=star fill=rainbow line=1
    .filled star2 outline=star fill=fire    line=1
    
    .put scenery rotate=90% 
    .put star1 scale=10% x=-70
    .put star2 scale=10% x=-180 y=110
    .put bar x=-180 y=10 rotate=45
.end

The previous example demonstrated how to fill an outline with a gradient.

There are two types of gradients: radial and linear. radial gradients have a center point and a radius (and are immune to rotations), and linear gradients have a start point and a width (or height) and can be rotated.

gradients can be freely positioned inside the object you want to fill, by passing the x, y and width and height (or r) parameters to .gradient.

Code listing 3.4

 
.flash filename="gradients2.swf"

    .outline o:
	moveTo -50,-50

	lineTo 0,-45
	lineTo 50,-50

	lineTo 45,0
	lineTo 50,50

	lineTo 0,45
	lineTo -50,50

	lineTo -45,0
	lineTo -50,-50
    .end

    .gradient horizon1 radial x=-50 y=-50 r=100:
        0% cyan
        49% blue
        50% green
        100% cyan
    .end
    
    .gradient horizon2 radial x=0 y=0 r=50:
        0% cyan
        49% blue
        50% green
        100% cyan
    .end

    .filled o1 outline=o fill=horizon1 line=0
    .filled o2 outline=o fill=horizon2 line=0

    .put o1 x=50 y=50
    .put o2 x=150 y=50

.end

If you want to use a given gradient several times with different x and y values, you can also first define the gradient itself, and then position it with .texture:

Code listing 3.5

 
.flash filename="gradients3.swf"

    # same outline as above, only in more terse notation
    .outline o:
	M -50,-50
	L 0,-45 L 50,-50
	L 45,0  L 50,50
	L 0,45  L -50,50
	L -45,0 L -50,-50
    .end

    .gradient horizon radial:
        0% cyan
        50% blue
        50% green
        100% cyan
    .end
    
    .texture horizon1=horizon x=-50 y=-50 r=100
    .filled o1 outline=o fill=horizon1 line=0
    .put o1 x=50 y=50

    .texture horizon2=horizon x=0 y=0 r=50
    .filled o2 outline=o fill=horizon2 line=0
    .put o2 x=150 y=50

    .texture horizon3=horizon x=0 y=50 r=10
    .filled o3 outline=o fill=horizon3 line=0
    .put o3 x=50 y=150

    .texture horizon4=horizon x=50 y=50 r=200
    .filled o4 outline=o fill=horizon4 line=0
    .put o4 x=150 y=150
    
    .gradient bunt:
        0% black
        20% blue
        40% magenta
        60% orange
        80% cyan 
        100% white
    .end
    
    .texture bunt1=bunt x=-50 y=-50 width=100
    .filled oo1 outline=o fill=bunt1 line=0
    .put oo1 x=50 y=250

    .texture bunt2=bunt x=-50 y=-50 width=141 height=141 rotate=45
    .filled oo2 outline=o fill=bunt2 line=0
    .put oo2 x=150 y=250

    .texture bunt3=bunt x=-50 y=50 width=141 height=141 rotate=-45
    .filled oo3 outline=o fill=bunt3 line=0
    .put oo3 x=50 y=350

    .texture bunt4=bunt x=50 y=50 width=100 rotate=180
    .filled oo4 outline=o fill=bunt4 line=0
    .put oo4 x=150 y=350

.end

Previous: Fonts SWFC Manual: Shapes Next: ActionScript