X-Git-Url: http://git.asbjorn.biz/?p=swftools.git;a=blobdiff_plain;f=doc%2Fswfc.xml;h=b4f726d763595027a7c784e87dec5dada158e92f;hp=a81bce3e48bbd139cf22ac8117e6172640cfba36;hb=3116692a2512f2bfae346a1074d1fdfa00ea9d2c;hpb=bf5eeb976135a8dee52de31507b9ba096905f472 diff --git a/doc/swfc.xml b/doc/swfc.xml index a81bce3..b4f726d 100644 --- a/doc/swfc.xml +++ b/doc/swfc.xml @@ -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,7 +149,7 @@ The following example demonstrates a few of the possible transforms: -.flash name="cxform.swf" version=5 fps=25 +.flash filename="cxform.swf" version=5 fps=25 .jpeg s1 "photo.jpeg" quality=80% @@ -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!" @@ -258,7 +253,7 @@ 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=3 color=green @@ -273,7 +268,7 @@ 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" @@ -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,12 +333,12 @@ 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 +.frame 1 .put hello pin=center x=50 y=50 .put world pin=center x=50 y=50 alpha=25% .frame 200 @@ -353,6 +349,32 @@ 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 @@ -361,10 +383,10 @@ 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 + .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 @@ -383,7 +405,7 @@ using .textshape. The other way to create outlines is to use the .outline command: -.flash name="house.swf" +.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 @@ -420,7 +442,7 @@ Outlines can be filled with gradients, bitmaps etc., just like seen previously with .textshape: -.flash name="gradients.swf" +.flash filename="gradients.swf" .outline star: M 521,640 C 502,678 370,546 328,554 C 270,566 152,731 93,722 @@ -472,8 +494,141 @@ seen previously with .textshape:
+
+ +

+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 + + + + + +
+ +
@@ -483,23 +638,23 @@ seen previously with .textshape: 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 +.frame 1 .action: _root.angle += 0.05; mybox._x = 100*Math.cos(_root.angle)+100; mybox._y = 100*Math.sin(_root.angle)+100; .end -.frame 1 +.frame 2 .action: gotoFrame(0); Play(); .end -.frame 2 +.frame 3 .end @@ -530,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 @@ -539,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 @@ -583,7 +738,7 @@ Due to the fact that button shapes can be put anywhere especially outside the active area, it's easy to generate tooltips or subtitles. -.flash name="tooltips.swf" fps=50 +.flash filename="tooltips.swf" fps=50 .jpeg pic fence.jpg .put pic @@ -601,7 +756,7 @@ outside the active area, it's easy to generate tooltips or subtitles. .show tooltip_fence as=idle x=25 y=25 scalex=100 scaley=100 alpha=50% .end -.frame 0 +.frame 1 .put mybutton1 .end @@ -611,4 +766,216 @@ outside the active area, it's easy to generate tooltips or subtitles. + + +Blend modes were introduced in Flash 8. They allow to use different alrithmetrics when +it comes to putting transparent (or semi transparent) shapes or images on top of each +other. +The diffent blend modes are: + + +normal +layer +multiply +screen +lighten +darken +add +substract +difference +invert +alpha +erase +overlay +hardlight + + +For example, in order to set a "invert" blend mode: + + +.flash filename="invert.swf" fps=50 bbox=511x127 +.jpeg pic stripe.jpg +.put pic +.font arial Arial.ttf +.text txt font=arial text="Test inverted blend mode... ABCDEFGHIJKLMNOPQRSTUVWXYZ" size=200% + +.put txt x=512 y=120 blend=invert +.frame 700 +.change txt x=-4096 +.end + + +The layer blend modes is especially useful, if you want to +make sprite transparent. Compare the two stacks of rectangles +in the next example. In the left one (set without layer), when +the sprite is made transparent via alpha=50%, the rectangles +also are transparent in respect to each other- i.e., you don't get +a transparent image of a stack of rectangles, you get an image +of a stack of transparent rectangles. On the right side, the +stack is set with layer, and only the whole sprite get's +transparent. + + +.flash filename="layer.swf" fps=50 bbox=511x127 +.jpeg background stripe.jpg +.put background + +.box b1 fill=green width=100 height=100 +.box b2 fill=cyan width=100 height=100 +.box b3 fill=blue width=100 height=100 +.sprite s1 + .put b1 + .put b2 x=25 y=25 + .put b3 x=50 y=50 +.end +.sprite s2 + .put b1 + .put b2 x=25 y=25 + .put b3 x=50 y=50 +.end + +.put s1 alpha=50% +.put s2 alpha=50% x=300 blend=layer + +.end + + + + + + +

+An especially nice new feature of Flash 8 are filters. +

+

+The current version of swfc supports the following filters: +

+ + +dropshadow +blur +gradientglow +bevel + + +
The "dropshadow" filter + +dropsshadow can be used to add shadows below (or above) flash +objects. +Every shadow has a color, and a direction/distance parameter (angle,distance), +which controls where the shadow will be placed. +The shadow is calculated by blurring (radios blur the alpha layer of the corresponding object, +strengthening it (multiplication with strength), filling it with color +and then merging it with the background. +If the optional knockout option is given, the original object is removed, only the shadow +is visible. If the innershadow parameter is given, the shadow will be inside the +object. + + +.flash filename="shadow.swf" version=8 bbox=430x140 background=blue + .font myfont "Times.ttf" + .text mytext text="SHADOW" font=myfont size=140% color=yellow + .dropshadow myshadow color=black blur=5 angle=45 distance=50 passes=2 strength=1 + .put mytext filter=myshadow y=75 +.end + + +
+
The "bevel" filter + +

+The bevel filter essentially applies two shadows at once, at opposite directions. +It supports the same arguments as the dropshadow filter, and also the optional +ontop argument, which, if given, moves the "shadows" above the image. (useful +together with knockout). +

+ +The following example demonstrates another feature of the swfc filter implementation: filters +can also be animated. + + +.flash filename="bevel.swf" version=8 background=blue fps=12 + .font arial "Arial.ttf" + .text abc text="FILTERS" font=arial size=130% color=red + .text beveltxt text="BEVEL" font=arial size=130% color=red + + .bevel bevel0 highlight=white shadow=black blur=9 angle=45 distance=4 passes=2 strength=2 knockout + .bevel bevel1 highlight=white shadow=black blur=14 angle=45 distance=6 passes=2 strength=2 knockout + + .bevel bevel2 highlight=white shadow=black blur=7 angle=0 distance=6 passes=2 strength=1 innershadow knockout + .bevel bevel3 highlight=white shadow=black blur=7 angle=360 distance=6 passes=2 strength=1 innershadow knockout + + .put beveltxt filter=bevel0 + .put abc filter=bevel2 y=80 + .frame 50 + .change beveltxt filter=bevel1 + .frame 100 + .change beveltxt filter=bevel0 + .change abc filter=bevel3 +.end + + +
+
The "blur" filter + +The blur filter is probably the most simple filter- it only +takes a blur radius and a number of passes. It then performs a blur effect +by smoothening an area of blurx times blury pixels. + + +.flash filename="blur.swf" version=8 fps=50 bbox=200x200 + .font arial "Arial.ttf" + .blur myblur1 blur=100 passes=2 # blur=100 is an abbreviation for blurx=100 blury=100 + .blur myblur2 blurx=0 blury=0 passes=2 + .blur myblur3 blurx=0 blury=100 passes=2 + .textshape abc text="BLUR" font=arial size=100% + .filled fabc outline=abc line=2 color=blue fill=white + .filled fabc2 outline=abc line=2 color=red fill=yellow + .sprite mysprite + .put fabc pin=center x=100 y=100 + .put fabc2 pin=center x=100 y=100 + .frame 200 + .change fabc pin=center rotate=360 + .change fabc2 pin=center rotate=-360 + .end + .put mysprite filter=myblur1 + .frame 200 + .change mysprite filter=myblur2 + .frame 400 + .change mysprite filter=myblur3 +.end + + +
+
The "gradientglow" filter + +gradientglow is like the shadow filter, only that the +resulting shadow color is calculated from a gradient instead of a single color. + + +.flash filename="filters.swf" version=8 + .font times "Times.ttf" + .text abc text="Gradientglow" font=times size=100% color=blue + .gradient fire: + 0% black/00 + 25% red/40 + 50% orange/80 + 75% yellow/c0 + 100% white/ff + .end + .gradientglow fireglow1 gradient=fire blur=20 innershadow angle=1 distance=20 + .gradientglow fireglow2 gradient=fire blur=20 angle=0 distance=2 passes=1 knockout + .gradientglow fireglow3 gradient=fire blur=20 angle=0 distance=2 passes=1 ontop + + .put abc1=abc filter=fireglow1 + .put abc2=abc y=50 filter=fireglow2 + .put abc3=abc y=100 filter=fireglow3 +.end + + + +
+ + +