X-Git-Url: http://git.asbjorn.biz/?a=blobdiff_plain;f=doc%2Fswfc.xml;h=b19053a218da378921191a2be70f4221513fb0ce;hb=a8f844bfc977266610e63963a62de232d18d8a1a;hp=bd1176e959ac7315e2d36ec92c75e204df72b04b;hpb=c2b431306dc202edd5c7d59cc8ddb784fe66caeb;p=swftools.git diff --git a/doc/swfc.xml b/doc/swfc.xml index bd1176e..b19053a 100644 --- a/doc/swfc.xml +++ b/doc/swfc.xml @@ -35,8 +35,8 @@ Line breaking: Links: - http://www.quiss.org OR - Quiss + http://www.quiss.org OR + Quiss Shell scripts, commands to execute: @@ -45,7 +45,7 @@ Shell scripts, commands to execute: Code: (The lang= is optional) - .swf + .flash .box b1 100 100 .end @@ -72,7 +72,7 @@ Boxes: --> -swfc Basics +
Calling swfc @@ -89,7 +89,7 @@ Boxes: Though swfc is a command-line utility, there also exists a nice graphical - frontend for it, called Swifty. + frontend for it, called Swifty.
@@ -103,7 +103,7 @@ Boxes:

-.swf name="box.swf" +.flash name="box.swf" .box b1 100 100 color=yellow fill=red .put b1 pin=center scale=0% .frame 100 @@ -113,36 +113,234 @@ Boxes: .end +

The .box command creates the box. Every object that is created must also be explicitly put into the scene using .put to become visible. +

+

+ Change, on the other hand, modifies an already existing object. + It works gradually: In the example above, the change happens over 100 frames. + If you want to change an object suddently from one frame to the next, you + would use the .jump command. +

-
Text generation - +
Color transforms + +

+You can define a number of parameters in the .put, .change and .jump +tags. Among those are the color transform parameters red, green, +blue and alpha. +Furthermore, for convenience, there's also luminance, which sets red, green and +blue in one go. +

+

+Each one of these consists of two parts: The multiplicator and the shift. +The syntax is + ±<multiplicator>±<shift> . +So, for example, to make an object 50% brighter, you would use +luminance=+128. Notice that all color components inside the transformed object in the range 128-255 +will be mapped to 255 with this. To map 0 to 128, 255 to 255, but 128 to 192, you would +use luminance=0.5+128. +

+

+You can also specify negative values for both <mutliplicator> and <shift>. +This makes it e.g. possible to invert an object: luminance=-1+255. +

+

+The following example demonstrates a few of the possible transforms: +

+ + + +.flash name="cxform.swf" version=5 fps=25 + + .jpeg s1 "photo.jpeg" quality=80% + + .put s1 x=50 y=50 scalex=110 scaley=110 + .frame 50 + .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert + .frame 100 + .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red + .frame 150 + .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue + .frame 200 + .change s1 x=50 y=100 scalex=110 scaley=110 red=2-128 green=-2+255 blue=+0.7+40 #alien glow + .frame 250 + .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce + .frame 300 + .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal + .frame 350 + .change s1 x=105 y=105 scalex=0 scaley=0 luminance=0 #fadeout +.end + + +A very useful fact is also that you can color transform the alpha component. +So to fade any object into the background, you would simply transform it's +alpha color: E.g. alpha=64 would make the object 75% transparent. +This is used in an example further below. +
+ + + + + + +
+ +swfc has font support. That means you can also insert texts into +your animations. +The easiest way to load a font is to do something like + + .font Arial filename="Arial.ttf" + +. +You now have a font named Arial to play with. +For example, for the obligatory hello world program: + -.swf name="text5.swf" +.flash name="helloworld.swf" + + .font Arial filename="Arial.ttf" + .text helloworld font=Arial text="Hello World!" + .put helloworld +.end + + + +The text argument expects UTF-8 strings. So if you want to +pass any special characters (umlauts, digraphs etc.), they have to +be UTF-8 encoded. + + +Besides TrueType fonts, swfc also supports native SWF fonts. +If you have a SWF with a font you would like to use, do a + + swfextract file.swf + +Then write down the font ID of the font, and do a + + swfextract -f <fontid> file.swf -o myfont.swf + +. +

+This will give you a file named myfont.swf which you can +also use in the filename parameter of .font. +

+ +

+Furthermore, you can convert TTF and Type1 +fonts into SWF using font2swf: + + font2swf Arial.ttf -o Arial.swf + +The nice advantage of this is that you can play +Arial.swf in the flash player and see what the +font looks like. +(Also, loading a font in SWF format is slighly +faster than from a TTF file, as with TTFs spline +conversion has to take place). +

+ +
+
+

+So much for the basics. Now let's go to the more advanced +functionality around fonts. +

+ +

+Apart from being able to define text in your swfc files, +you can also define text outlines. +Those are not real characters but rather abstract vector +objects which you can use in other commands. +

+ + +.flash name="fontoutline.swf" + .font Arial "Arial.swf" + .textshape helloworld font=Arial size=200% text="Hello World" + .filled filled_helloworld outline=helloworld fill=blue line=3 color=green + .put filled_helloworld +.end + + +Here, .textshape helloworld defines an outline named "helloworld", +which is then used to construct a filled outline named filled_helloworld. + +To make this a little more interesting, let's fill with a gradient instead +of a plain color: + + +.flash name="fontgradient.swf" + .font Arial "Arial.swf" + .textshape helloworld font=Arial text="SHADE" + + .gradient whitefade: + 0% black + 50% #505050 + 100% yellow + .end + + .filled filled_helloworld outline=helloworld fill=whitefade line=1 color=#2c2c2c + .put filled_helloworld scale=200% +.end + + +While at it, you can also fill with an image: + + +.flash name="fontimage.swf" + .font courier "Courier.swf" + .jpeg beach "beach.jpg" + .textshape text font=courier text="HOLIDAY" + + .filled filled_text outline=text fill=beach line=1 color=#2c2c2c + .put filled_text scale=200% +.end + + +But let's get back to normal .text characters. +The following demonstrates that you can treat objects defined +with .text like normal shapes, i.e., scale them, move them, and use +them for clipping: + + +.flash name="text5.swf" .font courier "Courier.swf" -.font helvetica "Helvetica.swf" -.text hithere text="HELLO" font=courier size=50% color=blue -.shape scene Scenery50.swf +.text hithere text="HELLO" font=courier size=200% +.jpeg scenery "scenery.jpg" .frame 0 .startclip hithere pin=center x=100 y=75 scale=50% #text clips... - .put scene # ...the image "scene" + .put scenery scale=50% .end .frame 100 .change hithere rotate+=360 pin=center scale=100% .end - + +

+The last two examples look similar, but their underlying structure +is different: The first is a shape object filled with +image data (that is, a texture), while the second uses a normal +text object to clip an rectangular image. +

+ +

+Also, .text takes a color attribute (that's actually +the poor man's version of the more advanced filling options +that .textshape in conjunction with .filled offers), +which is used here together with the alpha parameter of .change: +

+ -.swf name="text6.swf" -.font courier "Courier.swf" -.font helvetica "Helvetica.swf" -.text hello text="HELLO" font=helvetica size=50% color=blue -.text world text="WORLD" font=helvetica size=50% color=red +.flash name="text6.swf" +.font times "Times.swf" +.text hello text="HELLO" font=times size=100% color=blue +.text world text="WORLD" font=times size=100% color=red .frame 0 .put hello pin=center x=50 y=50 @@ -155,33 +353,159 @@ Boxes:
-
Color transforms +
+ +A special type of text in SWF is the edittext, which +can be modified by the viewer. It's content can also be queried +and set from ActionScript (see below). +You can generate this type of text with the .edittext command: + + +.flash name="edittext.swf" bbox=210x110 + .font Arial "Arial.swf" + .edittext myedittext font=Arial size=20% + width=200 height=100 + color=blue border multiline wordwrap + text="Edit me!\nClick with your mouse on this text to edit it." + .put myedittext x=3 y=3 +.end + - -.swf name="cxform.swf" version=5 - - .shape s1 "photo.swf" +
- .put s1 x=50 y=50 scalex=110 scaley=110 - .frame 100 - .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert - .frame 200 - .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red - .frame 300 - .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue - .frame 400 - .change s1 x=50 y=100 scalex=110 scaley=110 red=2-128 green=-2+255 blue=+0.7+40 #alien glow - .frame 500 - .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce - .frame 600 - .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal - .frame 700 - .change s1 x=105 y=105 scalex=0 scaley=0 luminance=0 #fadeout + + + + +
+ swfc has Actionscript support. + For normal actionscript, which is executed once a given frame + is reached, just open an .action block, and write + the ActionScript into the block: + + +.flash name="action.swf" bbox=300x300 fps=50 + +.box mybox color=blue fill=green width=100 height=100 +.put mybox + +.frame 0 + .action: + _root.angle += 0.05; + mybox._x = 100*Math.cos(_root.angle)+100; + mybox._y = 100*Math.sin(_root.angle)+100; + .end +.frame 1 + .action: + gotoFrame(0); + Play(); + .end +.frame 2 .end - - -
- +
+ +Or, for much more interesting ActionScript examples, see +Laurent Lalanne's +Flash Eyes +or the +source +of Jean-Michel Sarlat's +Mandelbrot explorer. + +
+
+ + +

+Actionscript comes in handy when dealing with SWF Buttons. +

+

+A button defines, in SWF context, an object sensitive to mouse movement, +mouse buttons, and key presses. +

+

+The following is a trivial example: Four objects which change their shape +once the cursor is over it. + +.flash name="button1.swf" fps=50 + +.box box1 color=white fill=#336633 width=50 height=50 +.box box2 color=white fill=#99cc99 width=100 height=100 +.button mybutton1 + .show box1 as=shape x=25 y=25 + .show box2 as=hover x=12.5 y=12.5 +.end + +.frame 0 + .put b1=mybutton1 + .put b2=mybutton1 x=100 red=+255 + .put b3=mybutton1 y=100 green=+255 + .put b4=mybutton1 x=100 y=100 blue=+255 +.end + +

+ +

+The .show command (which can only be used inside .button) has a syntax +very similar to .put. +For every shape a button uses, you can specify the position, color transform, scaling, +rotation etc. just like with .put. +

+

+The only real difference between those two commands is the as parameter: +with that you tell the button when to display that specific shape. +There are four allowed parameters to as: +

    +
  • idle The shape to display when the button is idle, that is, the + mouse is somewhere else, and not over the button. +
  • hover The shape to display if the mouse cursor is inside the button. + What exactly is "inside" is defined by area: +
  • area This shape is not displayed. It serves as bounding box (actually, + bounding polygon) for the button. A button considers itself + active (that is, the hover shape is active, not the idle + shape) if the mouse is inside this area. Also, mouse button clicks + have to be in this area for this button. +
  • pressed The shape to display if the user clicks on the button. This shape + is displayed as long as the mouse button is down. +
  • +
+

+ + + +
+