X-Git-Url: http://git.asbjorn.biz/?p=swftools.git;a=blobdiff_plain;f=doc%2Fswfc.xml;h=b4f726d763595027a7c784e87dec5dada158e92f;hp=5aaa6e40778856a02344fc06fc3544862f96b382;hb=c63b2bf21dc1df9a736f0b4c08f6cba828cdab92;hpb=05ec0534bdbb5d066716507ab2c4b50c8dc33ce1 diff --git a/doc/swfc.xml b/doc/swfc.xml index 5aaa6e4..b4f726d 100644 --- a/doc/swfc.xml +++ b/doc/swfc.xml @@ -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 @@ -87,23 +87,18 @@ Boxes:

- - Though swfc is a command-line utility, there also exists a nice graphical - frontend for it, called Swifty. - -
A simple swfc example

- Let's create simple SWF file, shall we? + Let's create a simple SWF file, shall we? The following script creates a red box with a yellow border. On the right side you see the script used, on the left side the swf file that is generated.

-.flash name="box.swf" +.flash filename="box.swf" .box b1 100 100 color=yellow fill=red .put b1 pin=center scale=0% .frame 100 @@ -154,24 +149,24 @@ The following example demonstrates a few of the possible transforms: -.flash name="cxform.swf" version=5 +.flash filename="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 @@ -185,7 +180,7 @@ This is used in an example further below. -Fonts +
@@ -200,7 +195,7 @@ You now have a font named Arial to play with. For example, for the obligatory hello world program: -.flash name="helloworld.swf" +.flash filename="helloworld.swf" .font Arial filename="Arial.ttf" .text helloworld font=Arial text="Hello World!" @@ -208,11 +203,11 @@ 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 @@ -258,10 +253,10 @@ objects which you can use in other commands.

-.flash name="fontoutline.swf" +.flash filename="fontoutline.swf" .font Arial "Arial.swf" .textshape helloworld font=Arial size=200% text="Hello World" - .filled filled_helloworld outline=helloworld fill=blue line=5 color=green + .filled filled_helloworld outline=helloworld fill=blue line=3 color=green .put filled_helloworld .end @@ -273,14 +268,14 @@ To make this a little more interesting, let's fill with a gradient instead of a plain color: -.flash name="fontgradient.swf" +.flash filename="fontgradient.swf" .font Arial "Arial.swf" .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=whitefade line=1 color=#2c2c2c @@ -291,7 +286,7 @@ of a plain color: While at it, you can also fill with an image: -.flash name="fontimage.swf" +.flash filename="fontimage.swf" .font courier "Courier.swf" .jpeg beach "beach.jpg" .textshape text font=courier text="HOLIDAY" @@ -307,14 +302,14 @@ with .text like normal shapes, i.e., scale them, move them, and use them for clipping: -.flash name="text5.swf" +.flash filename="text5.swf" .font courier "Courier.swf" .text hithere text="HELLO" font=courier size=200% -.swf scene Scenery50.swf +.jpeg scenery "scenery.jpg" -.frame 0 +.frame 1 .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% @@ -326,7 +321,8 @@ them for clipping: 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. +text object to clip an rectangular image. (More about clipping in +the next section)

@@ -337,14 +333,14 @@ which is used here together with the alpha parameter of .change:

-.flash name="text6.swf" +.flash filename="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 +.text hello text="HELLO" font=times size=200% color=blue +.text world text="WORLD" font=times size=200% color=red -.frame 0 - .put hello pin=center x=50 y=50 - .put world pin=center x=50 y=50 alpha=25% +.frame 1 + .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% @@ -353,7 +349,33 @@ which is used here together with the alpha parameter of .change:
-
+
+ +Another example for clipping against text: + + +.flash filename="textclip.swf" bbox=400x120 background=black version=6 +.font times "Times.swf" +.textshape helloworld text="HELLO WORLD" font=times size=300% +.filled helloworld1 outline=helloworld fill=blue line=0 +.filled helloworld2 outline=helloworld fill=green line=0 + +.frame 1 +.put h3=helloworld1 y=100 +.startclip h1=helloworld1 y=100 + .put h2=helloworld2 y=100 +.end + +.frame 1000 +.change h1 x=-1000 +.change h2 x=-500 +.change h3 x=-1000 +.end + + +
+ +
A special type of text in SWF is the edittext, which can be modified by the viewer. It's content can also be queried @@ -361,21 +383,253 @@ and set from ActionScript (see below). You can generate this type of text with the .edittext command: -.flash name="edittext.swf" bbox=210x110 +.flash filename="edittext.swf" bbox=410x210 .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." + .edittext myedittext font=Arial size=50% + width=400 height=200 + 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 filename="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 filename="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 + + + + +
+ +
+ +

+The previous example demonstrated how to fill an outline with +a gradient. +

+ +

+There are two types of gradients: radial and linear. radial gradients +have a center point and a radius (and are immune to rotations), and +linear gradients have a start point and a width (or height) and can +be rotated. +

+ +gradients can be freely positioned inside the object +you want to fill, by passing the x, y and width and height (or r) parameters +to .gradient. + + +.flash filename="gradients2.swf" + + .outline o: + moveTo -50,-50 + + lineTo 0,-45 + lineTo 50,-50 + + lineTo 45,0 + lineTo 50,50 + + lineTo 0,45 + lineTo -50,50 + + lineTo -45,0 + lineTo -50,-50 + .end + + .gradient horizon1 radial x=-50 y=-50 r=100: + 0% cyan + 49% blue + 50% green + 100% cyan + .end + + .gradient horizon2 radial x=0 y=0 r=50: + 0% cyan + 49% blue + 50% green + 100% cyan + .end + + .filled o1 outline=o fill=horizon1 line=0 + .filled o2 outline=o fill=horizon2 line=0 + + .put o1 x=50 y=50 + .put o2 x=150 y=50 + +.end + + +If you want to use a given gradient several times +with different x and y values, you can also first +define the gradient itself, and then position it with .texture: + + +.flash filename="gradients3.swf" + + # same outline as above, only in more terse notation + .outline o: + M -50,-50 + L 0,-45 L 50,-50 + L 45,0 L 50,50 + L 0,45 L -50,50 + L -45,0 L -50,-50 + .end + + .gradient horizon radial: + 0% cyan + 50% blue + 50% green + 100% cyan + .end + + .texture horizon1=horizon x=-50 y=-50 r=100 + .filled o1 outline=o fill=horizon1 line=0 + .put o1 x=50 y=50 + + .texture horizon2=horizon x=0 y=0 r=50 + .filled o2 outline=o fill=horizon2 line=0 + .put o2 x=150 y=50 + + .texture horizon3=horizon x=0 y=50 r=10 + .filled o3 outline=o fill=horizon3 line=0 + .put o3 x=50 y=150 + + .texture horizon4=horizon x=50 y=50 r=200 + .filled o4 outline=o fill=horizon4 line=0 + .put o4 x=150 y=150 + + .gradient bunt: + 0% black + 20% blue + 40% magenta + 60% orange + 80% cyan + 100% white + .end + + .texture bunt1=bunt x=-50 y=-50 width=100 + .filled oo1 outline=o fill=bunt1 line=0 + .put oo1 x=50 y=250 + + .texture bunt2=bunt x=-50 y=-50 width=141 height=141 rotate=45 + .filled oo2 outline=o fill=bunt2 line=0 + .put oo2 x=150 y=250 + + .texture bunt3=bunt x=-50 y=50 width=141 height=141 rotate=-45 + .filled oo3 outline=o fill=bunt3 line=0 + .put oo3 x=50 y=350 + + .texture bunt4=bunt x=50 y=50 width=100 rotate=180 + .filled oo4 outline=o fill=bunt4 line=0 + .put oo4 x=150 y=350 + +.end + + + + + +
 -ActionScript + +
swfc has Actionscript support. @@ -384,40 +638,42 @@ You can generate this type of text with the .edittext command: the ActionScript into the block: -.flash name="action.swf" bbox=300x300 fps=50 +.flash filename="action.swf" bbox=300x300 fps=50 .box mybox color=blue fill=green width=100 height=100 .put mybox -.frame 0 - .action: - _root.angle += 0.1; - mybox._x = 100*Math.cos(_root.angle)+100; - mybox._y = 100*Math.sin(_root.angle)+100; - .end .frame 1 .action: - gotoFrame(0); - Play(); + _root.angle += 0.05; + mybox._x = 100*Math.cos(_root.angle)+100; + mybox._y = 100*Math.sin(_root.angle)+100; .end .frame 2 + .action: + gotoFrame(0); + Play(); + .end +.frame 3 .end -Or, for much more interesting ActionScript examples, see +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.
-Buttons +

Actionscript comes in handy when dealing with SWF Buttons.

@@ -429,7 +685,7 @@ 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 +.flash filename="button1.swf" fps=50 .box box1 color=white fill=#336633 width=50 height=50 .box box2 color=white fill=#99cc99 width=100 height=100 @@ -438,7 +694,7 @@ once the cursor is over it. .show box2 as=hover x=12.5 y=12.5 .end -.frame 0 +.frame 1 .put b1=mybutton1 .put b2=mybutton1 x=100 red=+255 .put b3=mybutton1 y=100 green=+255 @@ -464,15 +720,17 @@ There are four allowed parameters to as: 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. + 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.

    • + +