+<chapter title="Shapes">
+
+<section title="Creating Outlines">
+
+In the previous chapter, we learned how to create a text outline
+using <c>.textshape</c>. The other way to create outlines is to
+use the .outline command:
+
+<code lang="swfc">
+.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
+</code>
+
+The syntax of the paths inside the <c>.outline</c> command is the same as in svg.
+That means you can use the svg editor of your choice (e.g.: <a href="http://inkscape.sourceforge.net">inkscape</a>)
+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 lang="xml">
+...
+ <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" />
+...
+</code>
+
+</section>
+
+<section title="Filling Outlines">
+
+Outlines can be filled with gradients, bitmaps etc., just like
+seen previously with <c>.textshape</c>:
+
+<code lang="swfc">
+.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
+</code>
+
+<!-- TODO: bitmap filling -->
+
+</section>
+
+<section title="Some more words about gradients">
+
+<p>
+The previous example demonstrated how to fill an outline with
+a gradient.
+</p>
+
+<p>
+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.
+</p>
+
+gradients can be freely positioned inside the object
+you want to fill, by passing the <c>x</c>, <c>y</c> and <c>width</c> and <c>height</c> (or <c>r</c>) parameters
+to <c>.gradient</c>.
+
+<code lang="swfc">
+.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
+</code>
+
+If you want to use a given gradient several times
+with different <c>x</c> and <c>y</c> values, you can also first
+define the gradient itself, and then position it with .texture:
+
+<code lang="swfc">
+.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
+</code>
+
+
+<!-- TODO: bitmap filling -->
+
+</section>
+
+</chapter>
+
+
+<chapter title="ActionScript">