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 <uri>http://www.quiss.org</uri> OR
39 <uri link=http://www.quiss.org>Quiss</uri>
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>swfc Basics</title>
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 name="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%
116 The <c>.box</c> command creates the box. Every object that is created must also be explicitly
117 put into the scene using <c>.put</c> to become visible.
121 <section><title>Color transforms</title>
124 .flash name="cxform.swf" version=5
126 .jpeg s1 "photo.jpeg" quality=80%
128 .put s1 x=50 y=50 scalex=110 scaley=110
130 .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert
132 .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red
134 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue
136 .change s1 x=50 y=100 scalex=110 scaley=110 red=2-128 green=-2+255 blue=+0.7+40 #alien glow
138 .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce
140 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal
142 .change s1 x=105 y=105 scalex=0 scaley=0 luminance=0 #fadeout
151 <chapter><title>Fonts</title>
155 swfc has font support. That means you can also insert texts into
157 The easiest way to load a font is to do something like
159 .font Arial filename="Arial.ttf"
162 You now have a font named <c>Arial</c> to play with.
163 For example, for the obligatory hello world program:
166 .flash name="helloworld.swf"
168 .font Arial filename="Arial.ttf"
169 .text helloworld font=Arial text="Hello World!"
174 Besides TrueType fonts, swfc also supports native SWF fonts.
175 If you have a SWF with a font you would like to use, do a
179 Then write down the font ID of the font, and do a
181 swfextract -f <fontid> file.swf -o myfont.swf
185 This will give you a file named myfont.swf which you can
186 also use in the <c>filename</c> parameter of <c>.font</c>.
190 Furthermore, you can convert TTF and Type1
191 fonts into SWF using <c>font2swf</c>:
193 font2swf Arial.ttf -o Arial.swf
195 The nice advantage of this is that you can play
196 Arial.swf in the flash player and see what the
198 (Also, loading a font in SWF format is slighly
199 faster than from a TTF file, as with TTFs spline
200 conversion has to take place).
206 So much for the basics. Now let's go to the more advanced
211 Apart from being able to define text in your swfc files,
212 you can also define text <c>outlines</c>.
213 Those are not real characters but rather abstract vector
214 objects which you can use in other commands.
218 .flash name="fontoutline.swf"
219 .font Arial "Arial.swf"
220 .textshape helloworld font=Arial text="Hello World"
221 .filled filled_helloworld outline=helloworld fill=blue line=5 color=green
222 .put filled_helloworld
226 Here, <c>.textshape helloworld</c> defines an outline named "helloworld",
227 which is then used to construct a filled outline named filled_helloworld.
229 To make this a little more interesting, let's fill with a gradient instead
233 .flash name="fontgradient.swf"
234 .font Arial "Arial.swf"
235 .textshape helloworld font=Arial text="SHADE"
243 .filled filled_helloworld outline=helloworld fill=whitefade line=1 color=#2c2c2c
244 .put filled_helloworld scale=200%
248 But let's get back to normal <c>.text</c> characters.
249 The following demonstrates that you can treat objects defined
250 with <c>.text</c> like normal shapes, i.e., scale them, move them, and use
254 .flash name="text5.swf"
255 .font courier "Courier.swf"
256 .font helvetica "Helvetica.swf"
257 .text hithere text="HELLO" font=courier size=50%
258 .swf scene Scenery50.swf
261 .startclip hithere pin=center x=100 y=75 scale=50% #text clips...
262 .put scene # ...the image "scene"
265 .change hithere rotate+=360 pin=center scale=100%
270 Also, <c>.text</c> takes a color attribute (that's actually
271 the poor man's version of the more advanced filling options
272 that <c>.textshape</c> in conjunction with <c>.filled</c> offers),
273 which is used here together with the alpha parameter of <c>.change</c>:
276 .flash name="text6.swf"
277 .font courier "Courier.swf"
278 .font helvetica "Helvetica.swf"
279 .text hello text="HELLO" font=helvetica size=50% color=blue
280 .text world text="WORLD" font=helvetica size=50% color=red
283 .put hello pin=center x=50 y=50
284 .put world pin=center x=50 y=50 alpha=25%
286 .change hello rotate+=360 pin=center alpha=25%
287 .change world rotate-=360 pin=center alpha=100%
295 <chapter><title>ActionScript</title>
298 <c>swfc</c> has Actionscript support.
299 For normal actionscript, which is executed once a given frame
300 is reached, just open an <c>.action</c> block, and write
301 the ActionScript into the block:
304 .flash name="action.swf" bbox=300x300 fps=50
306 .box mybox color=blue fill=green width=100 height=100
312 mybox._x = 100*Math.cos(_root.angle)+100;
313 mybox._y = 100*Math.sin(_root.angle)+100;
329 <chapter><title>Buttons</title>
331 Actionscript comes in handy when dealing with SWF Buttons.
334 A button defines, in SWF context, an object sensitive to mouse movement,
335 mouse buttons, and key presses.
338 The following is a trivial example: Four objects which change their shape
339 once the cursor is over it.
341 .flash name="button1.swf" fps=50
343 .box box1 color=white fill=#336633 width=100 height=100 .box box2 color=white fill=#99cc99 width=150 height=150
345 .show box1 as=shape x=50 y=50
346 .show box2 as=hover x=25 y=25
351 .put b2=mybutton1 x=200 red=+255
352 .put b3=mybutton1 y=200 green=+255
353 .put b4=mybutton1 x=200 y=200 blue=+255
359 The <c>.show</c> command (which can only be used inside <c>.button</c>) has a syntax
360 very similar to <c>.put</c>.
361 For every shape a button uses, you can specify the position, color transform, scaling,
362 rotation etc. just like with <c>.put</c>.
365 The only <i>real</i> difference between those two commands is the <c>as</c> parameter:
366 with that you tell the button when to display that specific shape.
367 There are four allowed parameters to <c>as</c>:
369 <li><b>idle</b> The shape to display when the button is idle, that is, the
370 mouse is somewhere else, and not over the button.
371 </li><li><b>hover</b> The shape to display if the mouse cursor is <i>inside</i> the button.
372 What exactly is <i>"inside"</i> is defined by <b>area</b>:
373 </li><li><b>area</b> This shape is not displayed. It serves as bounding box (actually,
374 bounding polygon) for the button. A button considers itself
375 active (that is, the <c>hover</c> shape is active, not the <c>idle</c>
376 shape) if the mouse is inside this area. Also, mouse button clicks
377 have to be in this area for this button.
378 </li><li><b>pressed</b> The shape to display if the user clicks on the button. This shape
379 is displayed as long as the mouse button is down.
384 <section><title>Another button example: tooltips</title>
387 .flash name="button2.swf" fps=50
390 .font arial Arial.swf
391 .text text font=arial text="A red shape" color=white
392 .box box fill=blue color=turquoise width=90 height=20
397 .box box1 fill=red width=50 height=50
399 .show box1 as=area x=0 y=0
400 .show red_tooltip as=hover x=25 y=25 alpha=50%