<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CITYCLOUDS &#187; Flash</title>
	<atom:link href="http://www.cityclouds.de/tag/flash/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cityclouds.de</link>
	<description>Music, Design &#38; Inspiration</description>
	<lastBuildDate>Sat, 04 Feb 2012 14:06:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>AS3: Fragmentation Class Tutorial Pt. 2</title>
		<link>http://www.cityclouds.de/2009/01/as3-fragmentation-class-tutorial-pt-2/</link>
		<comments>http://www.cityclouds.de/2009/01/as3-fragmentation-class-tutorial-pt-2/#comments</comments>
		<pubDate>Wed, 14 Jan 2009 20:20:18 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Effect]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Fragmentation]]></category>
		<category><![CDATA[FX]]></category>

		<guid isPermaLink="false">http://www.cityclouds.de/?p=519</guid>
		<description><![CDATA[Hello. Deutsche Version The second Part of the Tutorial is a little bit more tricky. Since we provided one surface of grey tiles in the first part only, we will now improve the whole in that way that each individual tile is filled with the appropriate cutout of the BitmapData of an image file. The [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;">
<p style="text-align: left;">
<p><a href="http://www.skybluetech.de/files/JPEG/fragment4.png" rel="lightbox[519]"><img title="AS3 Fragmentation Class pt.2" src="http://www.skybluetech.de/files/JPEG/fragment4.png" alt="" width="550" height="415" /></a></p>
<p style="text-align: left;">
<p style="text-align: left;">Hello.</p>
<p style="text-align: right;"><a title="Deutsche Version" href="http://wet-media.de/wetblog/?p=252" target="_blank">Deutsche Version</a></p>
<p>The second Part of the Tutorial is a little bit more tricky. Since we provided one surface of grey tiles in the first part only, we will now improve the whole in that way that each individual tile is filled with the appropriate cutout of the BitmapData of an image file. The tiled Sprites are positioned by one for loop and they represent the picture again correctly. The difference to the original is not to determine because the Sprites lie exactly next to each other. From these tiles we create as last step a ParticleObject to be able to animate it later.</p>
<p><span id="more-519"></span><br />
The following sketch is to clarify this compact description a little:</p>
<p style="text-align: center;"><a href="http://www.skybluetech.de/files/JPEG/fragmentSketch.png" rel="lightbox[519]"><img class="aligncenter" title="AS3 Fragment Class thumbnail sketch" src="http://www.skybluetech.de/files/JPEG/fragmentSketch.png" alt="AS3 Fragment Class thumbnail sketch" width="539" height="378" /></a></p>
<p>The source code consists of one *.fla file that is mainly used to start the DocumentClass (&#8216;FragmentClassDC.as&#8217;).  The`FragmentLayer.as&#8217; contains the code to create the tiles from a handed over picture and the code for controlling the animation of the tiles. The class `ParticleObject.as&#8217; creates the respective particle from a square Sprite (&#8216;BitmapDataRectangle.as&#8217;), whose BitmapData is replaced from a cut of the handed over picture. The file `QuickLoader.as&#8217; is  coherently responsible for loading pictures.</p>
<p>Okay let´s start over:</p>
<p>The creation of the FragmentLayer takes place in the DocumentClass and is similar to the first part, i changed only a few arguments. Note that the container of FragmentationLayer (can also be the Stage) and the loaded Bitmap have to be placed in front of the arguments queue:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// define FragmentLayer arguments</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> rectSize<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000066; font-weight: bold;">;</span>			<span style="color: #009900; font-style: italic;">// rectangle size</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> updateRate<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span>  = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span>		<span style="color: #009900; font-style: italic;">// update rate</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> dirVector<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">String</span>  = <span style="color: #990000;">&quot;right&quot;</span><span style="color: #000066; font-weight: bold;">;</span>	<span style="color: #009900; font-style: italic;">// animation direction (from - to)</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> dispEvent<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span>		<span style="color: #009900; font-style: italic;">// dispatch event when animation has finished</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> startNow<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000066; font-weight: bold;">;</span>		<span style="color: #009900; font-style: italic;">// start immediately</span>
&nbsp;
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> overlay<span style="color: #000066; font-weight: bold;">:</span>FragmentLayer<span style="color: #000066; font-weight: bold;">;</span>
overlay = <span style="color: #0033ff; font-weight: bold;">new</span> FragmentLayer <span style="color: #000000;">&#40;</span> your_container<span style="color: #000066; font-weight: bold;">,</span> your_bitmap<span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000066; font-weight: bold;">,</span> updateRate<span style="color: #000066; font-weight: bold;">,</span> dirVector<span style="color: #000066; font-weight: bold;">,</span> dispEvent<span style="color: #000066; font-weight: bold;">,</span> startNow<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></div></div>

<p>The Constructorlooks as follows:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Constructor</span>
<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> FragmentLayer <span style="color: #000000;">&#40;</span>container<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">DisplayObjectContainer</span><span style="color: #000066; font-weight: bold;">,</span> sourceBM<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Bitmap</span><span style="color: #000066; font-weight: bold;">,</span>
				rectSize<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span><span style="color: #000066; font-weight: bold;">,</span> updateRate<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">,</span>
				dirVector<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #990000;">&quot;right&quot;</span><span style="color: #000066; font-weight: bold;">,</span>
				dispEvent<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">,</span> startNow = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>container = container<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>sourceBM = sourceBM<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>rectSize = rectSize<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>updateRate = updateRate<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>dirVector = dirVector<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>dispEvent = dispEvent<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>startNow = startNow<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	wLen = container<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span> <span style="color: #000066; font-weight: bold;">/</span> rectSize<span style="color: #000066; font-weight: bold;">;</span>
	hLen = container<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span> <span style="color: #000066; font-weight: bold;">/</span> rectSize<span style="color: #000066; font-weight: bold;">;</span>
	partArray = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Array</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// if two times &quot;true&quot; then start immediately</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> initArea <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">&amp;</span>amp<span style="color: #000066; font-weight: bold;">;&amp;</span>amp<span style="color: #000066; font-weight: bold;">;</span> startNow <span style="color: #000000;">&#41;</span> 	startEffect<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>For the case startNow = true the effect is started immediately. This happen because the called function initArea() returns always a true. In this Example we prefer a delayed Effektstart per MouseClick-Event.</p>
<p>The initialization of the rectangular area:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Init the rectangle area</span>
<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> initArea <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">switch</span> <span style="color: #000000;">&#40;</span>dirVector<span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;left&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
				updateLeft<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
				<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;right&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
				updateRight<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
				<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;up&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
				updateUp<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
				<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;down&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
				updateDown<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
				<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #0033ff; font-weight: bold;">default</span> <span style="color: #000066; font-weight: bold;">:</span>
				updateRight<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>	<span style="color: #009900; font-style: italic;">// call left as default</span>
				<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #000000;">&#125;</span>
	<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>We have passed dirVector = right so the creation of the tiles is managed by updateRight(). This function arranges the tiles in a way that is resulting in an fragmentation effect from right to left. Each tile is defined by createRect():</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// particle movement right to left</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> updateRight <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span> i <span style="color: #000066; font-weight: bold;">&amp;</span>lt<span style="color: #000066; font-weight: bold;">;</span> wLen<span style="color: #000066; font-weight: bold;">;</span> i<span style="color: #000066; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> j<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span> j <span style="color: #000066; font-weight: bold;">&amp;</span>lt<span style="color: #000066; font-weight: bold;">;</span> hLen<span style="color: #000066; font-weight: bold;">;</span> j<span style="color: #000066; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> xPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000;">&#40;</span>i <span style="color: #000066; font-weight: bold;">*</span> rectSize<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> yPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000;">&#40;</span>j <span style="color: #000066; font-weight: bold;">*</span> rectSize<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
			createRect <span style="color: #000000;">&#40;</span>xPos<span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>Each Bitmap stores its picture information as BitmapData. The loaded image wich we have passed to the Constructor contains BitmapData as well and we copy it into the tile-Sprites:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Fill the fragment pieces</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> createRect <span style="color: #000000;">&#40;</span>xPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #009900; font-style: italic;">// count rectangles</span>
	count<span style="color: #000066; font-weight: bold;">++;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// create rectangle with blue (default) Bitmap inside</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> cr<span style="color: #000066; font-weight: bold;">:</span>BitmapDataRectangle = <span style="color: #0033ff; font-weight: bold;">new</span> BitmapDataRectangle<span style="color: #000000;">&#40;</span>rectSize<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// target rectangle</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">rect</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// target section of the source image</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> pt<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Point</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Point</span><span style="color: #000000;">&#40;</span>xPos<span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #004993;">rect</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = pt<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #004993;">rect</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = pt<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// copy BitmapData to Byte stream</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> bytes<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">ByteArray</span> = sourceBM<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">bitmapData</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">getPixels</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">rect</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	bytes<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">position</span> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">//destination rectangle</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> destRect<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// write Byte stream to destination rectangle</span>
	cr<span style="color: #000066; font-weight: bold;">.</span>getBmd<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setPixels</span> <span style="color: #000000;">&#40;</span>destRect<span style="color: #000066; font-weight: bold;">,</span> bytes<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// pass the CustomRectangle to the final create method</span>
	createFragmentParticle <span style="color: #000000;">&#40;</span>xPos<span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000066; font-weight: bold;">,</span> cr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>The final function now creates from tile-Sprites single ParticleObjects and saves them to an Array. The method randRange() returns a random number wich makes the movement more dynamically&#8230;and oh yea, feel free to play with these parameters  :)</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Create a fragment particle an push it onto the array</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> createFragmentParticle <span style="color: #000000;">&#40;</span>xPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span><span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">rect</span><span style="color: #000066; font-weight: bold;">:</span>BitmapDataRectangle<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #009900; font-style: italic;">// create the fragment rectangle</span>
	particle = <span style="color: #0033ff; font-weight: bold;">new</span> ParticleObject<span style="color: #000000;">&#40;</span> container<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">rect</span> <span style="color: #0033ff; font-weight: bold;">as</span> <span style="color: #004993;">Sprite</span><span style="color: #000066; font-weight: bold;">,</span> xPos<span style="color: #000066; font-weight: bold;">,</span> yPos<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #009900; font-style: italic;">// -&amp;gt; Play with these Parameters!</span>
	<span style="color: #009900; font-style: italic;">// define velocity</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>setVel <span style="color: #000000;">&#40;</span> randRange<span style="color: #000000;">&#40;</span><span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">20</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">,</span> randRange<span style="color: #000000;">&#40;</span><span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">50</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">50</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// add drag</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>drag = <span style="color: #000000; font-weight:bold;">0.97</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// set gravity</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>gravity = <span style="color: #000000; font-weight:bold;">0.3</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// randomize particle size</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>clip<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">scaleX</span> = particle<span style="color: #000066; font-weight: bold;">.</span>clip<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">scaleY</span> = <span style="color: #000000; font-weight:bold;">1.0</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// set shrink</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>shrink = randRange <span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0.5</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1.03</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// add fade</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>fade = <span style="color: #000000; font-weight:bold;">0.01</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// particle clip starting alpha</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>clip<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">alpha</span> = <span style="color: #000000; font-weight:bold;">1.0</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #009900; font-style: italic;">// -&amp;gt; ok stop</span>
	<span style="color: #009900; font-style: italic;">// push particle onto Array</span>
	partArray<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">push</span> <span style="color: #000000;">&#40;</span>particle<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span>
&nbsp;
<span style="color: #009900; font-style: italic;">// Calc a random range of particle movement</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> randRange <span style="color: #000000;">&#40;</span><span style="color: #004993;">min</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">max</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #009900; font-style: italic;">// e.g.: 5 - (-5) = 10;  10 + (-5)</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> randNum<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = <span style="color: #000000;">&#40;</span><span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">random</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">*</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">max</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #004993;">min</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #004993;">min</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">return</span> randNum<span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>So far now the production of the FragmentationLayers is final. The call (here by a MouseClick Event on the container in the DocumentClass) of startEffect () bring the animation to run:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Start the fragmentation effect</span>
<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> startEffect <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">Event</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> frameLoop<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>This throws, as far as the variable dispEvent = true, a Custom-Event if the effect animation has finished and it always stops the EnterFrame Event:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Effect has finished</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> effectEnd<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeEventListener</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">Event</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> frameLoop<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>dispEvent<span style="color: #000000;">&#41;</span>	<span style="color: #004993;">dispatchEvent</span><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Event</span><span style="color: #000000;">&#40;</span>EFFECT_DONE<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>We catch the Custom-Event in the DocumentClass and repeat the fragmentation of the two loaded pictures:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;">overlay<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span> <span style="color: #000000;">&#40;</span>FragmentLayer<span style="color: #000066; font-weight: bold;">.</span>EFFECT_DONE<span style="color: #000066; font-weight: bold;">,</span> effectDoneHandler<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
<span style="color: #009900; font-style: italic;">// FragmentLayer Effect Finished</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> effectDoneHandler <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">switch</span> <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">currentTarget</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;Overlay #1&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
			<span style="color: #004993;">trace</span> <span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;Effect done: &quot;</span> <span style="color: #000066; font-weight: bold;">+</span> e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">currentTarget</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #009900; font-style: italic;">// ...and again...</span>
			<span style="color: #004993;">init</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">case</span> <span style="color: #990000;">&quot;Overlay #2&quot;</span> <span style="color: #000066; font-weight: bold;">:</span>
			<span style="color: #004993;">trace</span> <span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;Effect done: &quot;</span> <span style="color: #000066; font-weight: bold;">+</span> e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">currentTarget</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>The actual update of the ParticleObjects assumes frameLoop () in the FragmentLayer.as, which the above-mentioned startEffect() function releases.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Effect frame-loop</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> frameLoop <span style="color: #000000;">&#40;</span>event<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #009900; font-style: italic;">// increasing part of the array which has to be updated</span>
	part2update <span style="color: #000066; font-weight: bold;">+</span>= updateRate<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// ...if this part is too long, correct it</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>part2update <span style="color: #000066; font-weight: bold;">&amp;</span>gt<span style="color: #000066; font-weight: bold;">;</span> partArray<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">length</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		part2update = partArray<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">length</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #009900; font-style: italic;">// loop through Array and update each one</span>
	<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span> i <span style="color: #000066; font-weight: bold;">&amp;</span>lt<span style="color: #000066; font-weight: bold;">;</span> part2update<span style="color: #000066; font-weight: bold;">;</span> i<span style="color: #000066; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		partArray<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">.</span>update <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
		<span style="color: #009900; font-style: italic;">// remove invisible particle</span>
		<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>partArray<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">.</span>invisible == <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			removeParticle <span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
			part2update <span style="color: #000066; font-weight: bold;">--;</span>
			i<span style="color: #000066; font-weight: bold;">--;</span>
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>We get rid of objects that have became invisible by removeParticle (). That method finally calls the effectEnd() function described above:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// Destroy a particle</span>
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> removeParticle <span style="color: #000000;">&#40;</span>val<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">uint</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> buffer<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Array</span> = partArray<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">splice</span> <span style="color: #000000;">&#40;</span>val<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	particle = buffer<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">pop</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	particle<span style="color: #000066; font-weight: bold;">.</span>destroy <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>partArray<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">length</span> <span style="color: #000066; font-weight: bold;">&amp;</span>lt<span style="color: #000066; font-weight: bold;">;</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		effectEnd<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>Have fun trying it out!!</p>
<p><a href="http://www.skybluetech.de/files/AS3 Fragmentation Class2.rar">Download Sources</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cityclouds.de/2009/01/as3-fragmentation-class-tutorial-pt-2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>The 25 Line Actionscript Contest</title>
		<link>http://www.cityclouds.de/2009/01/the-25-line-actionscript-contest/</link>
		<comments>http://www.cityclouds.de/2009/01/the-25-line-actionscript-contest/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 22:59:03 +0000</pubDate>
		<dc:creator>Lukas</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.cityclouds.de/?p=475</guid>
		<description><![CDATA[The first 25-Line ActionScript Contest finished recently with some very impressive results. Marius Heil from Germany won it with this amazing text-based game. He won a Adobe CS4 Master Collection. Congrats. All the other Finalists were amazing. Check the images to see what you can produce with only 25 lines of Actionscript. found at theflashblog.com]]></description>
			<content:encoded><![CDATA[<p>The first <a href="http://www.25lines.com/" target="_blank">25-Line ActionScript Contest</a> finished recently with some very impressive results. Marius Heil from Germany won it with this amazing <a href="http://www.25lines.com/finalists/0812/043.swf" target="_blank">text-based game</a>. He won a Adobe CS4 Master Collection. Congrats.<br />
All the other Finalists were amazing. Check the images to see what you can produce with only 25 lines of Actionscript.</p>
<p><img usemap="#Map" src="uploads/25.jpg" border="0" alt="25lines" width="580" height="239" /></p>
<map id="Map" name="Map">
<area shape="rect" coords="8,9,116,116" href="http://www.25lines.com/finalists/0812/043.swf" target="_blank" />
<area shape="rect" coords="121,6,229,116" href="http://www.25lines.com/finalists/0812/079.swf" target="_blank" />
<area shape="rect" coords="233,7,342,114" href="http://www.25lines.com/finalists/0812/064.swf" target="_blank" />
<area shape="rect" coords="347,8,455,114" href="http://www.25lines.com/finalists/0812/059.swf" target="_blank" />
<area shape="rect" coords="460,8,568,113" href="http://www.25lines.com/finalists/0812/055.swf" target="_blank" />
<area shape="rect" coords="8,122,113,229" href="http://www.25lines.com/finalists/0812/017.swf" target="_blank" />
<area shape="rect" coords="121,119,228,228" href="http://www.25lines.com/finalists/0812/046.swf" target="_blank" />
<area shape="rect" coords="234,119,344,228" href="http://www.25lines.com/finalists/0812/037.swf" target="_blank" />
<area shape="rect" coords="348,119,456,228" href="http://www.25lines.com/finalists/0812/025.swf" target="_blank" />
<area shape="rect" coords="461,121,570,228" href="http://www.25lines.com/finalists/0812/034.swf" target="_blank" /> </map>
<address>found at theflashblog.com<br />
</address>
]]></content:encoded>
			<wfw:commentRss>http://www.cityclouds.de/2009/01/the-25-line-actionscript-contest/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>AS3 Fragmentation Class Tutorial Pt. 1</title>
		<link>http://www.cityclouds.de/2008/12/as3-fragmentation-class-tutorial-pt-1/</link>
		<comments>http://www.cityclouds.de/2008/12/as3-fragmentation-class-tutorial-pt-1/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 13:37:29 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tag hinzufügen]]></category>

		<guid isPermaLink="false">http://www.cityclouds.de/?p=422</guid>
		<description><![CDATA[Hello. german version To create this nice fragmentation effect like the one from Andy Foulds`s homepage, i have written this little AS3 Class. The first part of the tutorial will mainly focus on how to get this effect running. The second part shows a way to get an arbitrary DisplayObject onto the fragmentation layer to [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><strong>Hello. </strong><em></em></p>
<p style="text-align: right;"><em><a title="german version" href="http://wet-media.de/wetblog/?p=135" target="_blank">german version</a></em></p>
<p>To create this nice fragmentation effect like the one from <a href="http://andyfoulds.co.uk/flash_design.html" target="_blank">Andy Foulds</a>`s homepage, i have written this little AS3 Class. The first part of the tutorial will mainly focus on how to get this effect running. The second part shows a way to get an arbitrary DisplayObject onto the fragmentation layer to create a cooler transition effect.</p>
<table border="0">
<tbody>
<tr>
<td><img class="alignnone" src="http://www.skybluetech.de/files/JPEG/Fragment0.JPG" alt="" width="171" height="108" /><img class="alignnone" src="http://www.skybluetech.de/files/JPEG/Fragment1.JPG" alt="" width="171" height="109" /><img class="alignnone" src="http://www.skybluetech.de/files/JPEG/Fragment2.JPG" alt="" width="171" height="125" /></td>
</tr>
<tr>
<td>The example code uses a DocumentClass wich is just executed  by &#8220;FragmentExample.fla&#8221;. So don´t be confused if you do not find any AS3 in the *.fla file.</td>
</tr>
</tbody>
</table>
<p><span id="more-422"></span></p>
<p>To start the effect from Flash you have to follow these steps:</p>
<p><strong>1. Import Packages:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #0033ff; font-weight: bold;">import</span> de<span style="color: #000066; font-weight: bold;">.</span>ehrhardt<span style="color: #000066; font-weight: bold;">.</span>fragment<span style="color: #000066; font-weight: bold;">.*;</span></pre></td></tr></table></div>

<p><strong>2.  Create new fragmentation layer:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #6699cc; font-weight: bold;">var</span> rectSize<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000; font-weight:bold;">10</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> updateRate<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span>  = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> fxDirection<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">String</span>  = <span style="color: #990000;">&quot;left&quot;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> bgColor<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = 0xCCCCCC<span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">borderColor</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">int</span> = 0xCCCCCC<span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> borderSize<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = <span style="color: #000000; font-weight:bold;">0.2</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> startNow<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
<span style="color: #6699cc; font-weight: bold;">var</span> fragLayer<span style="color: #000066; font-weight: bold;">:</span>FragmentLayer = <span style="color: #0033ff; font-weight: bold;">new</span> FragmentLayer <span style="color: #000000;">&#40;</span>your_mc<span style="color: #000066; font-weight: bold;">,</span> rectSize<span style="color: #000066; font-weight: bold;">,</span> updateRate<span style="color: #000066; font-weight: bold;">,</span>
                       fxDirection<span style="color: #000066; font-weight: bold;">,</span> bgColor<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">borderColor</span><span style="color: #000066; font-weight: bold;">,</span> borderSize<span style="color: #000066; font-weight: bold;">,</span> startNow<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></td></tr></table></div>

<p><strong>3. Define RectSize:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>13
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;">your_mc</pre></td></tr></table></div>

<p>&#8230;should be replaced from your DisplyObject´s instance name. You have to take care that the dimension</p>
<p>s of the object are mapped exactly, because this feature is not introduced here. E.g. a MC with dimension of 220&#215;110 pixels should have rectSize = 10 because of incorrect covering.</p>
<p><strong>4. Set Frame Rate:</strong></p>
<p>More than 25 Frames per second are recommended for proper animations. You find it in Flash under the designation &#8220;Properties&#8221;.</p>
<p>(optional:)<br />
<strong>5. Manual effect start, e.g. after a MouseClick Event:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>14
15
16
17
18
19
20
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;">your_mc<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> clickActionHandler<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
<span style="color: #339966; font-weight: bold;">function</span> clickActionHandler <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
    fragLayer<span style="color: #000066; font-weight: bold;">.</span>startEffect<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
    e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> clickActionHandler<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>In addition you have to set the variable startNow to &#8220;false&#8221; :</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>21
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #6699cc; font-weight: bold;">var</span> startNow<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000066; font-weight: bold;">;</span></pre></td></tr></table></div>

<p>Done.<br />
We have finished the first part. How to put an image onto the Fragmentation-Layer to create a nicer transition, i´ll show in the next part.</p>
<p><a title="AS3" href="http://www.skybluetech.de/files/AS3 Fragmentation Class.rar" target="_blank">Download Sources</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cityclouds.de/2008/12/as3-fragmentation-class-tutorial-pt-1/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

