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