X-Git-Url: http://git.asbjorn.it/?a=blobdiff_plain;ds=inline;f=doc%2Fswfc.xml;h=b4f726d763595027a7c784e87dec5dada158e92f;hb=7a822886907e4f2b64c01af1125df83c2d12d5ad;hp=da9de2603a7e5b06bec1a481ab4bb2ba202fe256;hpb=aa037deab64f316483d9ea5f7d0bdbd63a72a913;p=swftools.git diff --git a/doc/swfc.xml b/doc/swfc.xml index da9de26..b4f726d 100644 --- a/doc/swfc.xml +++ b/doc/swfc.xml @@ -87,17 +87,12 @@ 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.
@@ -340,8 +335,8 @@ which is used here together with the alpha parameter of
.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 1
.put hello pin=center x=50 y=50
@@ -356,32 +351,28 @@ which is used here together with the alpha parameter of .change :
+Another example for clipping against text:
-.flash filename="xorclip.swf" bbox=640x480 background=black version=6
+.flash filename="textclip.swf" bbox=400x120 background=black version=6
.font times "Times.swf"
-.textshape helloworld text="HELLO WORLD" font=times size=500%
+.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
- .box background width=640 height=480 fill=white line=0
- .sprite twotexts
- .put h1=helloworld1 y=200
- .put h2=helloworld2 y=200
- .frame 1000
- .change h1 x=-500
- .change h2 x=-1000
- .end
-
- .startclip twotexts
- .put background
- .end
+.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
-
@@ -392,10 +383,10 @@ and set from ActionScript (see below).
You can generate this type of text with the .edittext command:
-.flash filename="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
@@ -503,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
+
+
+
+
+
+
+
+
@@ -642,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
+
+
+
+
+
+
+