animations/paths#1.xml

<?xml version="1.0" encoding="utf-8" ?>
<screenplay xmlns="urn:screenplay">
	<array id="colors" 
		values="[yellow,blue,green,red,orange,cyan,magenta,lime,navy,olive]" />
	<path id="path">
		<moveTo x="20" y="20" />
		<lineTo x="20" y="80" />
		<quadTo id="quad" x1="80" y1="80" x2="80" y2="20" />
		<close />
	</path>

	<event kind="onLoad">
		<matrix id="initialMatrix" translate="[120,150]" />
		<paint  id="pathPaint" antiAlias="true">
			<color color="lightpink" />
		</paint>
		<apply  >
			<paint />
			<set begin="3" field="linearText" to="false" />
		</apply>
		<apply scope="path" >
			<animate target="quad" field="x1" from="10" to="120" dur="1"/>
			<animate target="quad" field="y1" from="10" to="120" dur="1"/>
		</apply>
		<apply id="apply" mode="immediate" steps="colors.length-1" >
			<group id="newPath">
				<matrix rotate="360/colors.length" />
				<paint >
					<color id="color" />
				</paint>
				<add use="path" />
			</group>
			<set target="color" field="color" to="colors[apply.step]" />
			<set target="color" field="alpha" to=".5" />
		</apply>
		<post target="addCaptionFade" delay="1" />
		<post target="addLineCaption" delay="1" />
		<post target="scaleInitial" delay="2" />
	</event>
	
	
	<event kind="user" id="addCaptionFade" >
		<apply>
			<paint  > 
				<color id="captionFade" alpha="0" />
			</paint>
			<animate target="captionFade" field="alpha" from="0" to="1" dur="1" />
		</apply>
	</event>
	
	<event kind="user" id="addLineCaption" >
		<paint textSize="24" textAlign="center" > <!--  -->
			<shader  />
		</paint>
		<text text="Paths" x="10" y="145" />
	</event>

	<event kind="user" id="scaleInitial" >
		<apply scope="pathPaint" >
			<set field="linearText" to="true" />
		</apply>
		<apply scope="initialMatrix" >
			<animate field="scale" from="1" to=".5" dur="1"/>
			<animate field="translateX" from="120" to="60" dur="1"/>
			<animate field="translateY" from="150" to="180" dur="1"/>
		</apply>
	</event>
	
</screenplay>