From bf5eeb976135a8dee52de31507b9ba096905f472 Mon Sep 17 00:00:00 2001 From: kramm Date: Sun, 24 Oct 2004 15:04:52 +0000 Subject: [PATCH] added chapter about outlines. --- doc/swfc.xml | 145 +++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 124 insertions(+), 21 deletions(-) diff --git a/doc/swfc.xml b/doc/swfc.xml index b19053a..a81bce3 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: @@ -278,9 +278,9 @@ of a plain color: .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 @@ -343,8 +343,8 @@ which is used here together with the alpha parameter of .change: .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% @@ -353,7 +353,7 @@ 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 @@ -364,14 +364,113 @@ 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." + 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 + + + + +
 @@ -391,26 +490,28 @@ You can generate this type of text with the .edittext command: .frame 0 .action: - _root.angle += 0.05; - mybox._x = 100*Math.cos(_root.angle)+100; - mybox._y = 100*Math.sin(_root.angle)+100; + _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(); + gotoFrame(0); + Play(); .end .frame 2 .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.
@@ -464,15 +565,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.

    • + +