4 <title>SWFC Manual</title>
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.
14 This comment aims to give a short overview over the tags defined in guide.xslt.
17 Markups and Highlights:
23 <f>filename or pathname</f>
24 <c>variable name, command</c> ("c" stands for "code")
38 <a>http://www.quiss.org</a> OR
39 <a href=http://www.quiss.org>Quiss</a>
41 Shell scripts, commands to execute:
43 <shell>tail /var/log/messages</shell>
47 <code lang="sc"> (The lang= is optional)
56 <tr><td>Apples</td><td>Pears</td></tr>
57 <tr><td>3</td><td>4</td></tr>
70 Something to be careful about
75 <chapter title="Basic usage of swfc">
77 <section><title>Calling swfc</title>
81 swfc is command line based. You call it via
83 <shell>$ swfc file.sc</shell>
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.
91 Though swfc is a command-line utility, there also exists a nice graphical
92 frontend for it, called Swifty.
97 <section><title>A simple swfc example</title>
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.
106 .flash filename="box.swf"
107 .box b1 100 100 color=yellow fill=red
108 .put b1 pin=center scale=0%
110 .change b1 pin=center scale=100%
112 .change b1 pin=center scale=0%
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.
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.
129 <section><title>Color transforms</title>
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.
139 Each one of these consists of two parts: The multiplicator and the shift.
141 <c> ±<multiplicator>±<shift> </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>.
148 You can also specify negative values for both <c><mutliplicator></c> and <c><shift></c>.
149 This makes it e.g. possible to invert an object: <c>luminance=-1+255</c>.
152 The following example demonstrates a few of the possible transforms:
157 .flash filename="cxform.swf" version=5 fps=25
159 .jpeg s1 "photo.jpeg" quality=80%
161 .put s1 x=50 y=50 scalex=110 scaley=110
163 .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert
165 .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red
167 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue
169 .change s1 x=50 y=100 scalex=110 scaley=110 red=2-128 green=-2+255 blue=+0.7+40 #alien glow
171 .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce
173 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal
175 .change s1 x=105 y=105 scalex=0 scaley=0 luminance=0 #fadeout
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.
188 <chapter title="Fonts">
192 swfc has font support. That means you can also insert texts into
194 The easiest way to load a font is to do something like
196 .font Arial filename="Arial.ttf"
199 You now have a font named <c>Arial</c> to play with.
200 For example, for the obligatory hello world program:
203 .flash filename="helloworld.swf"
205 .font Arial filename="Arial.ttf"
206 .text helloworld font=Arial text="Hello World!"
212 The text argument expects UTF-8 strings. So if you want to
213 pass any special characters (umlauts, digraphs etc.), they have to
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
222 Then write down the font ID of the font, and do a
224 swfextract -f <fontid> file.swf -o myfont.swf
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>.
233 Furthermore, you can convert TTF and Type1
234 fonts into SWF using <c>font2swf</c>:
236 font2swf Arial.ttf -o Arial.swf
238 The nice advantage of this is that you can play
239 Arial.swf in the flash player and see what the
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).
249 So much for the basics. Now let's go to the more advanced
250 functionality around fonts.
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.
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
269 Here, <c>.textshape helloworld</c> defines an outline named "helloworld",
270 which is then used to construct a filled outline named filled_helloworld.
272 To make this a little more interesting, let's fill with a gradient instead
276 .flash filename="fontgradient.swf"
277 .font Arial "Arial.swf"
278 .textshape helloworld font=Arial text="SHADE"
286 .filled filled_helloworld outline=helloworld fill=whitefade line=1 color=#2c2c2c
287 .put filled_helloworld scale=200%
291 While at it, you can also fill with an image:
294 .flash filename="fontimage.swf"
295 .font courier "Courier.swf"
296 .jpeg beach "beach.jpg"
297 .textshape text font=courier text="HOLIDAY"
299 .filled filled_text outline=text fill=beach line=1 color=#2c2c2c
300 .put filled_text scale=200%
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
310 .flash filename="text5.swf"
311 .font courier "Courier.swf"
312 .text hithere text="HELLO" font=courier size=200%
313 .jpeg scenery "scenery.jpg"
316 .startclip hithere pin=center x=100 y=75 scale=50% #text clips...
317 .put scenery scale=50%
320 .change hithere rotate+=360 pin=center scale=100%
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
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>:
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
347 .put hello pin=center x=50 y=50
348 .put world pin=center x=50 y=50 alpha=25%
350 .change hello rotate+=360 pin=center alpha=25%
351 .change world rotate-=360 pin=center alpha=100%
357 <section title="Clipping">
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
368 .box background width=640 height=480 fill=white line=0
370 .put h1=helloworld1 y=200
371 .put h2=helloworld2 y=200
387 <section title="Edittext">
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:
395 .flash filename="edittext.swf" bbox=210x110
396 .font Arial "Arial.swf"
397 .edittext myedittext font=Arial size=20%
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
408 <chapter title="Shapes">
410 <section title="Creating Outlines">
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:
417 .flash filename="house.swf"
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
427 .filled house outline=house_outline fill=grey color=grey
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:
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 "
448 <section title="Filling Outlines">
450 Outlines can be filled with gradients, bitmaps etc., just like
451 seen previously with <c>.textshape</c>:
454 .flash filename="gradients.swf"
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
472 .gradient fire radial:
485 .gradient transparent:
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
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
502 <!-- TODO: bitmap filling -->
506 <section title="Some more words about gradients">
509 The previous example demonstrated how to fill an outline with
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
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
525 .flash filename="gradients2.swf"
543 .gradient horizon1 radial x=-50 y=-50 r=100:
550 .gradient horizon2 radial x=0 y=0 r=50:
557 .filled o1 outline=o fill=horizon1 line=0
558 .filled o2 outline=o fill=horizon2 line=0
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:
571 .flash filename="gradients3.swf"
573 # same outline as above, only in more terse notation
582 .gradient horizon radial:
589 .texture horizon1=horizon x=-50 y=-50 r=100
590 .filled o1 outline=o fill=horizon1 line=0
593 .texture horizon2=horizon x=0 y=0 r=50
594 .filled o2 outline=o fill=horizon2 line=0
597 .texture horizon3=horizon x=0 y=50 r=10
598 .filled o3 outline=o fill=horizon3 line=0
601 .texture horizon4=horizon x=50 y=50 r=200
602 .filled o4 outline=o fill=horizon4 line=0
614 .texture bunt1=bunt x=-50 y=-50 width=100
615 .filled oo1 outline=o fill=bunt1 line=0
618 .texture bunt2=bunt x=-50 y=-50 width=141 height=141 rotate=45
619 .filled oo2 outline=o fill=bunt2 line=0
622 .texture bunt3=bunt x=-50 y=50 width=141 height=141 rotate=-45
623 .filled oo3 outline=o fill=bunt3 line=0
626 .texture bunt4=bunt x=50 y=50 width=100 rotate=180
627 .filled oo4 outline=o fill=bunt4 line=0
634 <!-- TODO: bitmap filling -->
641 <chapter title="ActionScript">
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:
650 .flash filename="action.swf" bbox=300x300 fps=50
652 .box mybox color=blue fill=green width=100 height=100
658 mybox._x = 100*Math.cos(_root.angle)+100;
659 mybox._y = 100*Math.sin(_root.angle)+100;
670 For much more interesting ActionScript examples, see
672 <a href="http://technoargia.free.fr/swftools/examples/flash_eyes/flash_eyes.html">Flash Eyes</a>
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>.
678 <a href="http://www.goldenxp.com/repo/swfr/index.htm">Sunder Iyer's swfc pages</a>.
685 <chapter title="Buttons">
687 Actionscript comes in handy when dealing with SWF Buttons.
690 A button defines, in SWF context, an object sensitive to mouse movement,
691 mouse buttons, and key presses.
694 The following is a trivial example: Four objects which change their shape
695 once the cursor is over it.
697 .flash filename="button1.swf" fps=50
699 .box box1 color=white fill=#336633 width=50 height=50
700 .box box2 color=white fill=#99cc99 width=100 height=100
702 .show box1 as=shape x=25 y=25
703 .show box2 as=hover x=12.5 y=12.5
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
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>.
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>:
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.
741 <!-- TODO: button actionscript -->
744 <section><title>Another button example: tooltips</title>
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.
750 .flash filename="tooltips.swf" fps=50
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%
761 .box box1 fill=red width=1 height=1
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%