X-Git-Url: http://git.asbjorn.biz/?a=blobdiff_plain;f=doc%2Fswfc.xml;h=a81bce3e48bbd139cf22ac8117e6172640cfba36;hb=bf5eeb976135a8dee52de31507b9ba096905f472;hp=1b8bdc7c69edff75e9093f0573d388af232454cf;hpb=ab0381ad74443bf2cb1250820d01adee6f014dfc;p=swftools.git diff --git a/doc/swfc.xml b/doc/swfc.xml index 1b8bdc7..a81bce3 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,9 +45,9 @@ Shell scripts, commands to execute: Code: (The lang= is optional) - .flash - .box b1 100 100 - .end + .flash + .box b1 100 100 + .end Tables: @@ -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.
@@ -113,42 +113,79 @@ 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. +

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 +.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 100 + .frame 50 .change s1 x=0 y=0 scalex=210 scaley=210 red=-1+255 green=-1+255 blue=-1+255 #invert - .frame 200 + .frame 100 .change s1 x=100 y=50 scalex=110 scaley=110 red=0 green=+0 blue=+0 #remove red - .frame 300 + .frame 150 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=2 blue=-1+255 #amplify green, invert blue - .frame 400 + .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 500 + .frame 250 .change s1 x=0 y=0 scalex=210 scaley=210 red=8-1024 green=8-1024 blue=8-1024 #palette reduce - .frame 600 + .frame 300 .change s1 x=0 y=0 scalex=210 scaley=210 red=+0 green=+0 blue=+0 #back to normal - .frame 700 + .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.
-Fonts +
@@ -171,6 +208,12 @@ For example, for the obligatory hello world program: .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 @@ -178,17 +221,33 @@ If you have a SWF with a font you would like to use, do a Then write down the font ID of the font, and do a - swfextract -f file.swf -o myfont.swf + 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. +functionality around fonts.

@@ -201,8 +260,8 @@ objects which you can use in other commands. .flash name="fontoutline.swf" .font Arial "Arial.swf" - .textshape helloworld font="arial" text="Hello World" - .filled filled_helloworld outline=helloworld fill=blue line=5 color=green + .textshape helloworld font=Arial size=200% text="Hello World" + .filled filled_helloworld outline=helloworld fill=blue line=3 color=green .put filled_helloworld .end @@ -216,16 +275,29 @@ of a plain color: .flash name="fontgradient.swf" .font Arial "Arial.swf" - .textshape helloworld font="arial" text="Hello World" + .textshape helloworld font=Arial text="SHADE" .gradient whitefade: - 0% black - 50% #505050 - 100% yellow + 0% black + 50% #505050 + 100% yellow .end - .filled filled_helloworld outline=helloworld fill=blue line=5 color=green - .put filled_helloworld + .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 @@ -237,13 +309,12 @@ them for clipping: .flash name="text5.swf" .font courier "Courier.swf" -.font helvetica "Helvetica.swf" -.text hithere text="HELLO" font=courier size=50% -.swf 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% @@ -251,21 +322,29 @@ them for clipping: .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: +

.flash 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 +.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 - .put world pin=center x=50 y=50 alpha=25% + .put hello pin=center x=50 y=50 + .put world pin=center x=50 y=50 alpha=25% .frame 200 .change hello rotate+=360 pin=center alpha=25% .change world rotate-=360 pin=center alpha=100% @@ -274,14 +353,262 @@ which is used here together with the alpha parameter of .change:
+
+ +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 + + +
+ + + + +
+ +In the previous chapter, we learned how to create a text outline +using .textshape. The other way to create outlines is to +use the .outline command: + + +.flash name="house.swf" + + .outline house_outline: + M 36.99 29.93 L 15.52 51.39 L 20.44 51.39 L 20.44 81.91 + L 39.73 81.91 L 39.73 62.33 L 48.36 62.33 + L 48.36 81.91 L 53.84 81.91 L 53.84 51.39 + L 58.45 51.39 L 36.99 29.93 + M 28.79 53.70 L 34.55 53.70 L 34.55 60.60 L 28.79 60.60 + L 28.79 53.70 + .end + .filled house outline=house_outline fill=grey color=grey + .put house +.end + +The syntax of the paths inside the .outline command is the same as in svg. +That means you can use the svg editor of your choice (e.g.: inkscape) +to create these outlines. You then need to extract them out of the .xml/.svg file. +They are inside the "d" attribute of the "path" tag: + + +... + <path + 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;" + 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 " + id="rect908" /> +... +
+
+Outlines can be filled with gradients, bitmaps etc., just like +seen previously with .textshape: + + +.flash name="gradients.swf" + + .outline star: + M 521,640 C 502,678 370,546 328,554 C 270,566 152,731 93,722 + C 51,716 147,549 127,512 C 98,460 -107,400 -117,341 + C -124,299 63,339 93,308 C 133,265 127,50 180,23 + C 218,3 238,195 276,213 C 330,238 532,166 575,208 + C 605,238 429,316 424,358 C 416,417 547,587 521,640 + .end + + .gradient rainbow: + 0% blue + 25% green + 50% yellow + 75% orange + 100% red + .end + + .gradient fire radial: + 0% white + 50% yellow + 100% red + .end + + .gradient horizon: + 0% cyan + 49% blue + 50% green + 100% peru + .end + + .gradient transparent: + 0% #ff000000 + 100% #ff0000ff + .end + + .box scenery fill=horizon width=200 height=200 + .box bar fill=transparent width=240 height=20 + .filled star1 outline=star fill=rainbow line=1 + .filled star2 outline=star fill=fire line=1 + + .put scenery rotate=90% + .put star1 scale=10% x=-70 + .put star2 scale=10% x=-180 y=110 + .put bar x=-180 y=10 rotate=45 +.end + + + + +
+ + + + + +
+ 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 + + +For much more interesting ActionScript examples, see +Laurent Lalanne's +Flash Eyes +or the +source +of Jean-Michel Sarlat's +Mandelbrot explorer. +or +Sunder Iyer's swfc pages. + +
 + +

+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. +
    • +
+

+ + + + + +