doc/swfc.xml

   1 <?xml version='1.0'?>
   2 <guide>
   3
   4 <title>SWFC Manual</title>
   5
   6 <abstract>
   7 swfc is a tool for generating flash files. You can write small simple scripts
   8 and then have them compiled to SWF Flash Animations.
   9 </abstract>
  10
  11
  12 <!--
  13
  14 This comment aims to give a short overview over the tags defined in guide.xslt.
  15 Most are like html.
  16
  17 Markups and Highlights:
  18
  19     <i>italic</i>
  20     <b>bold</b>
  21     <ul>Underline</ul>
  22
  23     <f>filename or pathname</f>
  24     <c>variable name, command</c> ("c" stands for "code")
  25
  26 Paragraphs:
  27
  28     <p>
  29     Paragraph
  30     </p>
  31
  32 Line breaking:
  33
  34     <br/>
  35
  36 Links:
  37
  38     <a>http://www.quiss.org</a> OR
  39     <a href=http://www.quiss.org>Quiss</a>
  40
  41 Shell scripts, commands to execute:
  42
  43     <shell>tail /var/log/messages</shell>
  44
  45 Code:
  46
  47     <code lang="sc">   (The lang= is optional)
  48         .flash
  49             .box b1 100 100
  50         .end
  51     </code>
  52
  53 Tables:
  54
  55     <table>
  56     <tr><td>Apples</td><td>Pears</td></tr>
  57     <tr><td>3</td><td>4</td></tr>
  58     </table>
  59
  60 Boxes:
  61     <note>
  62     Something interesting
  63     </note>
  64
  65     <impo>
  66     Something important
  67     </impo>
  68
  69     <warn>
  70     Something to be careful about
  71     </warn>
  72
  73 -->
  74
  75 <chapter title="Basic usage of swfc">
  76
  77  <section><title>Calling swfc</title>
  78
  79  <p>
  80
  81   swfc is command line based. You call it via
  82
  83   <shell>$ swfc file.sc</shell>
  84
  85   The filename of what is generated depends on the filename of the script (<f>file.sc</f>),
  86   the filename given inside the script, and the optional <c>-o</c> passed to swfc.
  87
  88  </p>
  89
  90  <note>
  91   Though swfc is a command-line utility, there also exists a nice graphical
  92   frontend for it, called Swifty.
  93  </note>
  94
  95  </section>
  96
  97  <section><title>A simple swfc example</title>
  98
  99   <p>
 100    Let's create simple SWF file, shall we?
 101    The following script creates a red box with a yellow border. On the right side you
 102    see the script used, on the left side the swf file that is generated.
 103   </p>
 104
 105   <code lang="swfc">
 106 .flash filename="box.swf"
 107     .box b1 100 100 color=yellow fill=red
 108     .put b1 pin=center scale=0%
 109     .frame 100
 110     .change b1 pin=center scale=100%
 111     .frame 200
 112     .change b1 pin=center scale=0%
 113 .end
 114   </code>
 115
 116   <p>
 117   The <c>.box</c> command creates the box. Every object that is created must also be explicitly
 118   put into the scene using <c>.put</c> to become visible.
 119   </p>
 120   <p>
 121   Change, on the other hand, modifies an already existing object.
 122   It works gradually: In the example above, the change happens over 100 frames.
 123   If you want to change an object suddently from one frame to the next, you
 124   would use the <c>.jump</c> command.
 125   </p>
 126
 127  </section>
 128
 129  <section><title>Color transforms</title>
 130
 131 <p>
 132 You can define a number of parameters in the <c>.put</c>, <c>.change</c> and <c>.jump</c>
 133 tags. Among those are the color transform parameters <c>red</c>, <c>green</c>,
 134 <c>blue</c> and <c>alpha</c>.
 135 Furthermore, for convenience, there's also <c>luminance</c>, which sets <c>red</c>, <c>green</c> and
 136 <c>blue</c> in one go.
 137 </p>
 138 <p>
 139 Each one of these consists of two parts: The multiplicator and the shift.
 140 The syntax is
 141 <c> &#177;&lt;multiplicator&gt;&#177;&lt;shift&gt; </c>.
 142 So, for example, to make an object 50% brighter, you would use
 143 <c>luminance=+128</c>. Notice that all color components inside the transformed object in the range 128-255
 144 will be mapped to 255 with this. To map 0 to 128, 255 to 255, but 128 to 192, you would
 145 use <c>luminance=0.5+128</c>.
 146 </p>
 147 <p>
 148 You can also specify negative values for both <c>&lt;mutliplicator&gt;</c> and <c>&lt;shift&gt;</c>.
 149 This makes it e.g. possible to invert an object: <c>luminance=-1+255</c>.
 150 </p>
 151 <p>
 152 The following example demonstrates a few of the possible transforms:
 153 </p>
 154
 155
 156   <code lang="swfc">
 157 .flash filename="cxform.swf" version=5 fps=25
 158
 159     .jpeg s1 "photo.jpeg" quality=80%
 160
 161     .put s1 x=50 y=50 scalex=110 scaley=110
 162     .frame 50
 163     .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert
 164     .frame 100
 165     .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red
 166     .frame 150
 167     .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue
 168     .frame 200
 169     .change s1 x=50 y=100 scalex=110 scaley=110 red=2-128 green=-2+255 blue=+0.7+40 #alien glow
 170     .frame 250
 171     .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce
 172     .frame 300
 173     .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal
 174     .frame 350
 175     .change s1 x=105 y=105 scalex=0 scaley=0 luminance=0 #fadeout
 176 .end
 177   </code>
 178
 179 A very useful fact is also that you can color transform the alpha component.
 180 So to fade any object into the background, you would simply transform it's
 181 alpha color: E.g. <c>alpha=64</c> would make the object 75% transparent.
 182 This is used in an example further below.
 183  </section>
 184
 185
 186 </chapter>
 187
 188 <chapter title="Fonts">
 189
 190 <section>
 191
 192 swfc has font support. That means you can also insert texts into
 193 your animations.
 194 The easiest way to load a font is to do something like
 195 <c>
 196     .font Arial filename="Arial.ttf"
 197 </c>
 198 .
 199 You now have a font named <c>Arial</c> to play with.
 200 For example, for the obligatory hello world program:
 201
 202   <code lang="swfc">
 203 .flash filename="helloworld.swf"
 204
 205     .font Arial filename="Arial.ttf"
 206     .text helloworld font=Arial text="Hello World!"
 207     .put helloworld
 208 .end
 209   </code>
 210
 211 <note>
 212 The text argument expects UTF-8 strings. So if you want to
 213 pass any special characters (umlauts, digraphs etc.), they have to
 214 be UTF-8 encoded.
 215 </note>
 216
 217 Besides TrueType fonts, swfc also supports native SWF fonts.
 218 If you have a SWF with a font you would like to use, do a
 219 <shell>
 220     swfextract file.swf
 221 </shell>
 222 Then write down the font ID of the font, and do a
 223 <shell>
 224     swfextract -f &lt;fontid&gt; file.swf -o myfont.swf
 225 </shell>
 226 .
 227 <p>
 228 This will give you a file named myfont.swf which you can
 229 also use in the <c>filename</c> parameter of <c>.font</c>.
 230 </p>
 231
 232 <p>
 233 Furthermore, you can convert TTF and Type1
 234 fonts into SWF using <c>font2swf</c>:
 235 <shell>
 236     font2swf Arial.ttf -o Arial.swf
 237 </shell>
 238 The nice advantage of this is that you can play
 239 Arial.swf in the flash player and see what the
 240 font looks like.
 241 (Also, loading a font in SWF format is slighly
 242 faster than from a TTF file, as with TTFs spline
 243 conversion has to take place).
 244 </p>
 245
 246 </section>
 247 <section>
 248 <p>
 249 So much for the basics. Now let's go to the more advanced
 250 functionality around fonts.
 251 </p>
 252
 253 <p>
 254 Apart from being able to define text in your swfc files,
 255 you can also define text <c>outlines</c>.
 256 Those are not real characters but rather abstract vector
 257 objects which you can use in other commands.
 258 </p>
 259
 260 <code lang="swfc">
 261 .flash filename="fontoutline.swf"
 262     .font Arial "Arial.swf"
 263     .textshape helloworld font=Arial size=200% text="Hello World"
 264     .filled filled_helloworld outline=helloworld fill=blue line=3 color=green
 265     .put filled_helloworld
 266 .end
 267 </code>
 268
 269 Here, <c>.textshape helloworld</c> defines an outline named "helloworld",
 270 which is then used to construct a filled outline named filled_helloworld.
 271
 272 To make this a little more interesting, let's fill with a gradient instead
 273 of a plain color:
 274
 275 <code lang="swfc">
 276 .flash filename="fontgradient.swf"
 277     .font Arial "Arial.swf"
 278     .textshape helloworld font=Arial text="SHADE"
 279
 280     .gradient whitefade:
 281         0% black
 282         50% #505050
 283         100% yellow
 284     .end
 285
 286     .filled filled_helloworld outline=helloworld fill=whitefade line=1 color=#2c2c2c
 287     .put filled_helloworld scale=200%
 288 .end
 289 </code>
 290
 291 While at it, you can also fill with an image:
 292
 293 <code lang="swfc">
 294 .flash filename="fontimage.swf"
 295     .font courier "Courier.swf"
 296     .jpeg beach "beach.jpg"
 297     .textshape text font=courier text="HOLIDAY"
 298
 299     .filled filled_text outline=text fill=beach line=1 color=#2c2c2c
 300     .put filled_text scale=200%
 301 .end
 302 </code>
 303
 304 But let's get back to normal <c>.text</c> characters.
 305 The following demonstrates that you can treat objects defined
 306 with <c>.text</c> like normal shapes, i.e., scale them, move them, and use
 307 them for clipping:
 308
 309   <code lang="swfc">
 310 .flash filename="text5.swf"
 311 .font courier "Courier.swf"
 312 .text hithere text="HELLO" font=courier size=200%
 313 .jpeg scenery "scenery.jpg"
 314
 315 .frame 1
 316     .startclip hithere pin=center x=100 y=75 scale=50% #text clips...
 317         .put scenery scale=50%
 318     .end
 319 .frame 100
 320      .change hithere rotate+=360 pin=center scale=100%
 321
 322 .end
 323   </code>
 324
 325 <p>
 326 The last two examples look similar, but their underlying structure
 327 is different:  The first is a shape object filled with
 328 image data (that is, a texture), while the second uses a normal
 329 text object to clip an rectangular image. (More about clipping in
 330 the next section)
 331 </p>
 332
 333 <p>
 334 Also, <c>.text</c> takes a color attribute (that's actually
 335 the poor man's version of the more advanced filling options
 336 that <c>.textshape</c> in conjunction with <c>.filled</c> offers),
 337 which is used here together with the alpha parameter of <c>.change</c>:
 338 </p>
 339
 340   <code lang="swfc">
 341 .flash filename="text6.swf"
 342 .font times "Times.swf"
 343 .text hello text="HELLO" font=times size=100% color=blue
 344 .text world text="WORLD" font=times size=100% color=red
 345
 346 .frame 1
 347         .put hello pin=center x=50 y=50
 348         .put world pin=center x=50 y=50 alpha=25%
 349 .frame 200
 350      .change hello rotate+=360 pin=center alpha=25%
 351      .change world rotate-=360 pin=center alpha=100%
 352 .end
 353   </code>
 354
 355  </section>
 356
 357 <section title="Clipping">
 358
 359
 360 <code lang="swfc">
 361 .flash filename="xorclip.swf" bbox=640x480 background=black version=6
 362 .font times "Times.swf"
 363 .textshape helloworld text="HELLO WORLD" font=times size=500%
 364 .filled helloworld1 outline=helloworld fill=blue line=0
 365 .filled helloworld2 outline=helloworld fill=green line=0
 366
 367 .frame 1
 368         .box background width=640 height=480 fill=white line=0
 369         .sprite twotexts
 370             .put h1=helloworld1 y=200
 371             .put h2=helloworld2 y=200
 372             .frame 1000
 373             .change h1 x=-500
 374             .change h2 x=-1000
 375         .end
 376
 377         .startclip twotexts
 378             .put background
 379         .end
 380 .frame 1000
 381 .end
 382 </code>
 383
 384
 385 </section>
 386
 387 <section title="Edittext">
 388
 389 A special type of text in SWF is the <c>edittext</c>, which
 390 can be modified by the viewer. It's content can also be queried
 391 and set from ActionScript (see below).
 392 You can generate this type of text with the <c>.edittext</c> command:
 393
 394 <code lang="swfc">
 395 .flash filename="edittext.swf" bbox=210x110
 396     .font Arial "Arial.swf"
 397     .edittext myedittext font=Arial size=20%
 398                          width=200 height=100
 399                          color=blue border multiline wordwrap
 400                          text="Edit me!\nClick with your mouse on this text to edit it."
 401     .put myedittext x=3 y=3
 402 .end
 403 </code>
 404
 405 </section>
 406 </chapter>
 407
 408 <chapter title="Shapes">
 409
 410 <section title="Creating Outlines">
 411
 412 In the previous chapter, we learned how to create a text outline
 413 using <c>.textshape</c>. The other way to create outlines is to
 414 use the .outline command:
 415
 416 <code lang="swfc">
 417 .flash filename="house.swf"
 418
 419     .outline house_outline:
 420         M 36.99 29.93 L 15.52 51.39 L 20.44 51.39 L 20.44 81.91
 421                       L 39.73 81.91 L 39.73 62.33 L 48.36 62.33
 422                       L 48.36 81.91 L 53.84 81.91 L 53.84 51.39
 423                       L 58.45 51.39 L 36.99 29.93
 424         M 28.79 53.70 L 34.55 53.70 L 34.55 60.60 L 28.79 60.60
 425                       L 28.79 53.70
 426     .end
 427     .filled house outline=house_outline fill=grey color=grey
 428     .put house
 429 .end
 430 </code>
 431
 432 The syntax of the paths inside the <c>.outline</c> command is the same as in svg.
 433 That means you can use the svg editor of your choice (e.g.: <a href="http://inkscape.sourceforge.net">inkscape</a>)
 434 to create these outlines. You then need to extract them out of the .xml/.svg file.
 435 They are inside the "d" attribute of the "path" tag:
 436
 437 <code lang="xml">
 438 ...
 439   &lt;path
 440      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;"
 441      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 "
 442      id="rect908" /&gt;
 443 ...
 444 </code>
 445
 446 </section>
 447
 448 <section title="Filling Outlines">
 449
 450 Outlines can be filled with gradients, bitmaps etc., just like
 451 seen previously with <c>.textshape</c>:
 452
 453 <code lang="swfc">
 454 .flash filename="gradients.swf"
 455
 456     .outline star:
 457         M 521,640 C 502,678 370,546 328,554 C 270,566 152,731 93,722
 458                   C 51,716 147,549 127,512 C 98,460 -107,400 -117,341
 459                   C -124,299 63,339 93,308 C 133,265 127,50 180,23
 460                   C 218,3 238,195 276,213 C 330,238 532,166 575,208
 461                   C 605,238 429,316 424,358 C 416,417 547,587 521,640
 462     .end
 463
 464     .gradient rainbow:
 465         0% blue
 466         25% green
 467         50% yellow
 468         75% orange
 469         100% red
 470     .end
 471
 472     .gradient fire radial:
 473         0% white
 474         50% yellow
 475         100% red
 476     .end
 477
 478     .gradient horizon:
 479         0% cyan
 480         49% blue
 481         50% green
 482         100% peru
 483     .end
 484
 485     .gradient transparent:
 486         0% #ff000000
 487         100% #ff0000ff
 488     .end
 489
 490     .box scenery fill=horizon width=200 height=200
 491     .box bar fill=transparent width=240 height=20
 492     .filled star1 outline=star fill=rainbow line=1
 493     .filled star2 outline=star fill=fire    line=1
 494
 495     .put scenery rotate=90%
 496     .put star1 scale=10% x=-70
 497     .put star2 scale=10% x=-180 y=110
 498     .put bar x=-180 y=10 rotate=45
 499 .end
 500 </code>
 501
 502 <!-- TODO: bitmap filling -->
 503
 504 </section>
 505
 506 <section title="Some more words about gradients">
 507
 508 <p>
 509 The previous example demonstrated how to fill an outline with
 510 a gradient.
 511 </p>
 512
 513 <p>
 514 There are two types of gradients: radial and linear. radial gradients
 515 have a center point and a radius (and are immune to rotations), and
 516 linear gradients have a start point and a width (or height) and can
 517 be rotated.
 518 </p>
 519
 520 gradients can be freely positioned inside the object
 521 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
 522 to <c>.gradient</c>.
 523
 524 <code lang="swfc">
 525 .flash filename="gradients2.swf"
 526
 527     .outline o:
 528         moveTo -50,-50
 529
 530         lineTo 0,-45
 531         lineTo 50,-50
 532
 533         lineTo 45,0
 534         lineTo 50,50
 535
 536         lineTo 0,45
 537         lineTo -50,50
 538
 539         lineTo -45,0
 540         lineTo -50,-50
 541     .end
 542
 543     .gradient horizon1 radial x=-50 y=-50 r=100:
 544         0% cyan
 545         49% blue
 546         50% green
 547         100% cyan
 548     .end
 549
 550     .gradient horizon2 radial x=0 y=0 r=50:
 551         0% cyan
 552         49% blue
 553         50% green
 554         100% cyan
 555     .end
 556
 557     .filled o1 outline=o fill=horizon1 line=0
 558     .filled o2 outline=o fill=horizon2 line=0
 559
 560     .put o1 x=50 y=50
 561     .put o2 x=150 y=50
 562
 563 .end
 564 </code>
 565
 566 If you want to use a given gradient several times
 567 with different <c>x</c> and <c>y</c> values, you can also first
 568 define the gradient itself, and then position it with .texture:
 569
 570 <code lang="swfc">
 571 .flash filename="gradients3.swf"
 572
 573     # same outline as above, only in more terse notation
 574     .outline o:
 575         M -50,-50
 576         L 0,-45 L 50,-50
 577         L 45,0  L 50,50
 578         L 0,45  L -50,50
 579         L -45,0 L -50,-50
 580     .end
 581
 582     .gradient horizon radial:
 583         0% cyan
 584         50% blue
 585         50% green
 586         100% cyan
 587     .end
 588
 589     .texture horizon1=horizon x=-50 y=-50 r=100
 590     .filled o1 outline=o fill=horizon1 line=0
 591     .put o1 x=50 y=50
 592
 593     .texture horizon2=horizon x=0 y=0 r=50
 594     .filled o2 outline=o fill=horizon2 line=0
 595     .put o2 x=150 y=50
 596
 597     .texture horizon3=horizon x=0 y=50 r=10
 598     .filled o3 outline=o fill=horizon3 line=0
 599     .put o3 x=50 y=150
 600
 601     .texture horizon4=horizon x=50 y=50 r=200
 602     .filled o4 outline=o fill=horizon4 line=0
 603     .put o4 x=150 y=150
 604
 605     .gradient bunt:
 606         0% black
 607         20% blue
 608         40% magenta
 609         60% orange
 610         80% cyan
 611         100% white
 612     .end
 613
 614     .texture bunt1=bunt x=-50 y=-50 width=100
 615     .filled oo1 outline=o fill=bunt1 line=0
 616     .put oo1 x=50 y=250
 617
 618     .texture bunt2=bunt x=-50 y=-50 width=141 height=141 rotate=45
 619     .filled oo2 outline=o fill=bunt2 line=0
 620     .put oo2 x=150 y=250
 621
 622     .texture bunt3=bunt x=-50 y=50 width=141 height=141 rotate=-45
 623     .filled oo3 outline=o fill=bunt3 line=0
 624     .put oo3 x=50 y=350
 625
 626     .texture bunt4=bunt x=50 y=50 width=100 rotate=180
 627     .filled oo4 outline=o fill=bunt4 line=0
 628     .put oo4 x=150 y=350
 629
 630 .end
 631 </code>
 632
 633
 634 <!-- TODO: bitmap filling -->
 635
 636 </section>
 637
 638 </chapter>
 639
 640
 641 <chapter title="ActionScript">
 642
 643 <section>
 644     <c>swfc</c> has Actionscript support.
 645     For normal actionscript, which is executed once a given frame
 646     is reached, just open an <c>.action</c> block, and write
 647     the ActionScript into the block:
 648
 649 <code lang="swfc">
 650 .flash filename="action.swf" bbox=300x300 fps=50
 651
 652 .box mybox color=blue fill=green width=100 height=100
 653 .put mybox
 654
 655 .frame 1
 656     .action:
 657         _root.angle += 0.05;
 658         mybox._x = 100*Math.cos(_root.angle)+100;
 659         mybox._y = 100*Math.sin(_root.angle)+100;
 660     .end
 661 .frame 2
 662     .action:
 663         gotoFrame(0);
 664         Play();
 665     .end
 666 .frame 3
 667 .end
 668 </code>
 669
 670 For much more interesting ActionScript examples, see
 671 Laurent Lalanne's
 672 <a href="http://technoargia.free.fr/swftools/examples/flash_eyes/flash_eyes.html">Flash Eyes</a>
 673 or the
 674 <a href="http://melusine.eu.org/syracuse/flash/20040429/fabrique/">source</a>
 675 of Jean-Michel Sarlat's
 676 <a href="http://melusine.eu.org/syracuse/flash/20040429/">Mandelbrot explorer</a>.
 677 or
 678 <a href="http://www.goldenxp.com/repo/swfr/index.htm">Sunder Iyer's swfc pages</a>.
 679
 680 </section>
 681
 682
 683 </chapter>
 684
 685 <chapter title="Buttons">
 686 <p>
 687 Actionscript comes in handy when dealing with SWF Buttons.
 688 </p>
 689 <p>
 690 A button defines, in SWF context, an object sensitive to mouse movement,
 691 mouse buttons, and key presses.
 692 </p>
 693 <p>
 694 The following is a trivial example: Four objects which change their shape
 695 once the cursor is over it.
 696 <code lang="swfc">
 697 .flash filename="button1.swf" fps=50
 698
 699 .box box1 color=white fill=#336633 width=50 height=50
 700 .box box2 color=white fill=#99cc99 width=100 height=100
 701 .button mybutton1
 702     .show box1 as=shape x=25 y=25
 703     .show box2 as=hover x=12.5 y=12.5
 704 .end
 705
 706 .frame 1
 707     .put b1=mybutton1
 708     .put b2=mybutton1 x=100 red=+255
 709     .put b3=mybutton1 y=100 green=+255
 710     .put b4=mybutton1 x=100 y=100 blue=+255
 711 .end
 712 </code>
 713 </p>
 714
 715 <p>
 716 The <c>.show</c> command (which can only be used inside <c>.button</c>) has a syntax
 717 very similar to <c>.put</c>.
 718 For every shape a button uses, you can specify the position, color transform, scaling,
 719 rotation etc. just like with <c>.put</c>.
 720 </p>
 721 <p>
 722 The only <i>real</i> difference between those two commands is the <c>as</c> parameter:
 723 with that you tell the button when to display that specific shape.
 724 There are four allowed parameters to <c>as</c>:
 725 <ul>
 726     <li><b>idle</b> The shape to display when the button is idle, that is, the
 727                     mouse is somewhere else, and not over the button.
 728     </li><li><b>hover</b> The shape to display if the mouse cursor is <i>inside</i> the button.
 729                      What exactly is <i>"inside"</i> is defined by <b>area</b>:
 730     </li><li><b>area</b> This shape is not displayed. It serves as bounding box (actually,
 731                      bounding polygon) for the button. A button considers itself
 732                      active (that is, the <c>hover</c> shape is active, not the <c>idle</c>
 733                      shape) if the mouse is inside this area. Also, mouse button clicks
 734                      have to be in this area for this button.
 735     </li><li><b>pressed</b> The shape to display if the user clicks on the button. This shape
 736                        is displayed as long as the mouse button is down.
 737     </li>
 738 </ul>
 739 </p>
 740
 741 <!-- TODO: button actionscript -->
 742
 743 <!--
 744 <section><title>Another button example: tooltips</title>
 745
 746 Due to the fact that button shapes can be put <i>anywhere</i> especially
 747 outside the active area, it's easy to generate tooltips or subtitles.
 748
 749 <code lang="swfc">
 750 .flash filename="tooltips.swf" fps=50
 751
 752 .jpeg pic fence.jpg
 753 .put pic
 754
 755 .font arial Arial.ttf
 756 .edittext tooltip_fence text="fence" readonly color=green font=arial width=200 height=50 size=20%
 757 .edittext tooltip_wheel text="wheel" readonly color=green font=arial width=200 height=50 size=20%
 758 .edittext tooltip_tree text="tree" readonly color=green font=arial width=200 height=50 size=20%
 759 .edittext tooltip_mountain text="mountain" readonly color=green font=arial width=200 height=50 size=20%
 760
 761 .box box1 fill=red width=1 height=1
 762 .button mybutton1
 763     .show box1 as=area x=0 y=0
 764     .show tooltip_fence as=hover x=25 y=25 scalex=100 scaley=100 alpha=50%
 765     .show tooltip_fence as=idle x=25 y=25 scalex=100 scaley=100 alpha=50%
 766 .end
 767
 768 .frame 1
 769     .put mybutton1
 770 .end
 771 </code>
 772
 773 </section>
 774 -->
 775
 776 </chapter>
 777
 778 </guide>