Code:
<code lang="sc"> (The lang= is optional)
- .flash
- .box b1 100 100
- .end
+ .flash
+ .box b1 100 100
+ .end
</code>
Tables:
.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
.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%
</section>
-<section>
+<section title="Edittext">
A special type of text in SWF is the <c>edittext</c>, which
can be modified by the viewer. It's content can also be queried
.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
</code>
</section>
+</chapter>
+
+<chapter title="Shapes">
+
+<section title="Creating Outlines">
+
+In the previous chapter, we learned how to create a text outline
+using <c>.textshape</c>. The other way to create outlines is to
+use the .outline command:
+
+<code lang="swfc">
+.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
+</code>
+
+The syntax of the paths inside the <c>.outline</c> command is the same as in svg.
+That means you can use the svg editor of your choice (e.g.: <a href="http://inkscape.sourceforge.net">inkscape</a>)
+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:
+
+<code lang="xml">
+...
+ <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" />
+...
+</code>
+
+</section>
+
+<section title="Filling Outlines">
+
+Outlines can be filled with gradients, bitmaps etc., just like
+seen previously with <c>.textshape</c>:
+
+<code lang="swfc">
+.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
+</code>
+
+<!-- TODO: bitmap filling -->
+
+</section>
</chapter>
.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
</code>
-Or, for much more interesting ActionScript examples, see
+For much more interesting ActionScript examples, see
Laurent Lalanne's
<a href="http://technoargia.free.fr/swftools/examples/flash_eyes/flash_eyes.html">Flash Eyes</a>
or the
<a href="http://melusine.eu.org/syracuse/flash/20040429/fabrique/">source</a>
of Jean-Michel Sarlat's
<a href="http://melusine.eu.org/syracuse/flash/20040429/">Mandelbrot explorer</a>.
+or
+<a href="http://www.goldenxp.com/repo/swfr/index.htm">Sunder Iyer's swfc pages</a>.
</section>
What exactly is <i>"inside"</i> is defined by <b>area</b>:
</li><li><b>area</b> This shape is not displayed. It serves as bounding box (actually,
bounding polygon) for the button. A button considers itself
- active (that is, the <c>hover</c> shape is active, not the <c>idle</c>
- 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 <c>hover</c> shape is active, not the <c>idle</c>
+ shape) if the mouse is inside this area. Also, mouse button clicks
+ have to be in this area for this button.
</li><li><b>pressed</b> The shape to display if the user clicks on the button. This shape
is displayed as long as the mouse button is down.
</li>
</ul>
</p>
+<!-- TODO: button actionscript -->
+
<!--
<section><title>Another button example: tooltips</title>
git.asbjorn.biz / swftools.git / commitdiff