X-Git-Url: http://git.asbjorn.biz/?a=blobdiff_plain;f=doc%2Fswfc.xml;h=b4f726d763595027a7c784e87dec5dada158e92f;hb=5cbd3ad7e5136789a7a84549a47b319434278115;hp=e2ee61f20485d29f9f763e485e2ab51868e6dd28;hpb=9e642e574d38e6a4dc6f5dd14c328e30890233a2;p=swftools.git
diff --git a/doc/swfc.xml b/doc/swfc.xml
index e2ee61f..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:
-->
-
- 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,12 +302,12 @@ 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%
.jpeg scenery "scenery.jpg"
-.frame 0
+.frame 1
.startclip hithere pin=center x=100 y=75 scale=50% #text clips...
.put scenery scale=50%
.end
@@ -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.
+
+