<?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>Layers Magazine &#187; Flash</title>
	<atom:link href="http://layersmagazine.com/category/tutorials/flash/feed" rel="self" type="application/rss+xml" />
	<link>http://layersmagazine.com</link>
	<description>The How-to Magazine for Everything Adobe</description>
	<lastBuildDate>Thu, 09 Feb 2012 15:56:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Adobe Edge: Preview 4</title>
		<link>http://layersmagazine.com/adobe-edge-preview-4.html</link>
		<comments>http://layersmagazine.com/adobe-edge-preview-4.html#comments</comments>
		<pubDate>Thu, 09 Feb 2012 15:56:09 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=16144</guid>
		<description><![CDATA[Tom Green explores the new Adobe Edge Preview 4. In this first video, Tom gives an overview of the interface and talks about the new importing options, the transform tool, toggling element display, and new stroke and fill menus. ]]></description>
			<content:encoded><![CDATA[<p>Tom Green explores the new Adobe Edge Preview 4. In this first video, Tom gives an overview of the interface and talks about the new importing options, the transform tool, toggling element display, and new stroke and fill menus.    </p>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1614414">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/tgreen_edgepr4_overview.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/tgreen_edgepr4_overview.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1614418"></embed>
</object>

]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/adobe-edge-preview-4.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/tgreen_edgepr4_overview.mp4" length="" type="" />
		</item>
		<item>
		<title>Completing the Animation in Adobe Edge</title>
		<link>http://layersmagazine.com/completing-the-animation-in-adobe-edge.html</link>
		<comments>http://layersmagazine.com/completing-the-animation-in-adobe-edge.html#comments</comments>
		<pubDate>Mon, 03 Oct 2011 14:09:29 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=15725</guid>
		<description><![CDATA[Tom Green wraps up his video series about Adobe Edge, a new web motion and design tool. In this tutorial series, Tom creates an animation based on the LayersMagazine.com logo.]]></description>
			<content:encoded><![CDATA[<p>Tom Green wraps up his video series about Adobe Edge, a new web motion and design tool. In this tutorial series, Tom creates an animation based on the LayersMagazine.com logo. <a href="http://layersmagazine.com/animation-using-the-new-adobe-edge.html">Click here</a> to see the first 3 videos of this tutorial series.</p>
<p>Download a free trial of Adobe&#8217;s Edge software from <a href="http://labs.adobe.com/technologies/edge/">AdobeLabs.com</a></p>
<p>Download the images to follow along with these tutorials by <a href="http://media.kelbymediagroup.com/layersmagazine/downloads/green_edge_animation_assets2.zip">clicking here</a></p>
<h3>Part 4</h3>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1572515">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=false&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_4of5.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=false&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_4of5.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1572519"></embed>
</object>

<h3>Part 5</h3>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1572515">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=false&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_5of5.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=false&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_5of5.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1572511"></embed>
</object>

]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/completing-the-animation-in-adobe-edge.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_4of5.mp4" length="16635223" type="video/mp4" />
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_edge_animation_5of5.mp4" length="12228185" type="video/mp4" />
		</item>
		<item>
		<title>Design a Scroll Bar with Illustrator and Flash Catalyst</title>
		<link>http://layersmagazine.com/design-a-scroll-bar-with-illustrator-and-flash-catalyst.html</link>
		<comments>http://layersmagazine.com/design-a-scroll-bar-with-illustrator-and-flash-catalyst.html#comments</comments>
		<pubDate>Thu, 23 Jun 2011 16:22:01 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Illustrator]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=15411</guid>
		<description><![CDATA[After designing a grungy scroll bar in Illustrator, Tom Green takes the AI file into Flash Catalyst and creates a functioning vertical scroll bar.]]></description>
			<content:encoded><![CDATA[<p>After designing a grungy scroll bar in Illustrator, Tom Green takes the AI file into Flash Catalyst and creates a functioning vertical scroll bar.</p>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1541119">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_scroller.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_scroller.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1541120"></embed>
</object>

<p><!-- MODULE: flashlink NOT FOUND --></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/design-a-scroll-bar-with-illustrator-and-flash-catalyst.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_scroller.mp4" length="21955125" type="video/mp4" />
		</item>
		<item>
		<title>Flip Slide Animation Using Catalyst</title>
		<link>http://layersmagazine.com/flip-slide-animation-using-catalyst.html</link>
		<comments>http://layersmagazine.com/flip-slide-animation-using-catalyst.html#comments</comments>
		<pubDate>Thu, 12 May 2011 18:14:41 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=15298</guid>
		<description><![CDATA[Animations that might be complicated in Flash become easy in Catalyst.]]></description>
			<content:encoded><![CDATA[<p>Animations that might be complicated in Flash become easy in Catalyst.</p>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1529813">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_flip.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_flip.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1529814"></embed>
</object>

<p><!-- MODULE: flashlink NOT FOUND --></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/flip-slide-animation-using-catalyst.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_catalyst_flip.mp4" length="" type="" />
		</item>
		<item>
		<title>Creating Mobile Apps Using Flash CS5</title>
		<link>http://layersmagazine.com/creating-mobile-apps-using-flash-cs5.html</link>
		<comments>http://layersmagazine.com/creating-mobile-apps-using-flash-cs5.html#comments</comments>
		<pubDate>Thu, 31 Mar 2011 16:59:54 +0000</pubDate>
		<dc:creator>Paul Trani</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=15075</guid>
		<description><![CDATA[Flash has long been the choice for designers and developers alike to create rich, immersive interactive experiences across browsers and platforms, including mobile devices. Here, you’ll learn how to create a simple game app for mobile devices that will include adjusting graphics for different screen sizes, accessing the accelerometer, and basic publishing to Android and iOS devices.]]></description>
			<content:encoded><![CDATA[<p>Flash has long been the choice for designers and developers alike to create rich, immersive interactive experiences across browsers and platforms, including mobile devices. Here, you’ll learn how to create a simple game app for mobile devices that will include adjusting graphics for different screen sizes, accessing the accelerometer, and basic publishing to Android and iOS devices.</p>
<p><strong>1 OPEN THE START FILE</strong><br />
Download the exercise file for this tutorial by <a href="http://media.kelbymediagroup.com/layersmagazine/downloads/janfeb11/flash.zip">clicking here</a>. Unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find a file named Game.fla as well as a final folder that contains the completed files for reference. Open Game.fla in Flash CS5. Notice that on the Stage there’s a background, a title button, and a ball. In the Timeline panel, select frame 1 of the Actions layer and open the Actions panel (Window&gt;Actions). Notice that the ball’s visible property is set to false by default. It will be used later.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0132.jpg" alt="" /></p>
<p><strong>2 SCREEN SIZES AND ORIENTATION</strong><br />
With nothing selected, notice that in the Properties panel (Window&gt;Properties) the Stage size is set to 640 pixels wide by 960 pixels high, which is appropriate for an iPhone 4, but what about other iOS devices and Android devices? What about screen orientation? The image here shows different screen sizes to consider targeting. Sounds daunting but this doesn’t mean that different Flash files need to be made for each screen size. The graphics just need to dynamically change based on the screen size.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0234.jpg" alt="" /></p>
<p><strong>3 DEVICE CENTRAL</strong><br />
When creating projects for mobile, they’ll need to be tested on various devices, which is where Device Central comes in. With the Game.fla open, go to Control&gt;Test Movie&gt;In Device Central. This will launch Device Central and display the SWF on a device. Click Browse in the upper-right corner to test the SWF on another device. Click on the Flash tab to sort the devices to see all the devices that have the Flash Player. Search for Motorola Droid X. If it isn’t listed, refresh the device list by choosing Devices&gt;Refresh Online Library. Double-click the Droid X to view its capabilities. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0333.jpg" alt="" /></p>
<p><strong>4 CREATE A LIST OF DEVICES TO TEST</strong><br />
Click-and-drag the Droid X image into the Test Devices panel. Click the Back icon (left-facing arrow) at the top of the Device Library panel to get back to the list of devices, and drag the Droid 2 and the iPhone profiles into the Test Devices panel, as well. Select Emulate Flash in the upper-right corner, and double-click on the Motorola Droid X in the Test Devices panel. Notice the Droid appears, with a gray bar at the top, which is where a browser bar would go. Since this is an app, click on the Display panel and enable the Set to Fullscreen checkbox. Then, in the menu bar, choose Test&gt;Go to Beginning.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0431.jpg" alt="" /></p>
<p><strong>5 iOS DEVICES IN DEVICE CENTRAL<br />
</strong>Double-click the iPhone profile in the Test Devices panel. Note the message “This file type of Game.swf is not supported on this device!” in the Info panel. This means Flash isn’t supported in the browser on iOS devices, but you can still create and publish iOS apps with Flash. For purposes of this tutorial, we’ll test on the Droid 2 and the Droid X.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0529.jpg" alt="" /></p>
<p><strong>6 CHANGE STAGE BEHAVIOR<br />
</strong>Double-click the Droid 2 and then the Droid X. Notice how the graphics scale differently on each device, revealing the white background. To more precisely control these graphics, the Stage needs to be locked down first. In the Timeline panel back in Flash, select frame 1 of the Actions layer to activate it. In the Actions panel, set the Stage’s scale mode to “NO_SCALE” and the alignment to “TOP_LEFT.” To do this, enter the new ActionScript shown here. Test the movie (Control&gt;Test&gt;In Device Central) and notice how nothing scales when you view it in each device.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0628.jpg" alt="" /></p>
<p><strong>7 FIT OBJECTS TO STAGE<br />
</strong>Now that the Stage and all graphics don’t automatically scale, we can manually control these elements. Back in Flash, click on the Stage to select the background. In the Properties panel, notice the movie clip instance name is bkgd_mc and that its X and Y position is based on the upper left-hand corner (0,0). In the Timeline panel, select frame 1 in the Actions layer to make it active. In the Actions panel, make the width and height of the bkgd_mc the same as the width and height of the Stage. To do this, enter the ActionScript circled here. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0726.jpg" alt="" /></p>
<p><strong>8 CENTER BUTTON</strong><br />
Now we want to center the Happie Fun Ball button on the Stage. Click it to select it, and notice that its instance name is intro_btn and that its center point is in the center of the button. To center the button on the Stage, make its X position equal to the Stage width divided by two. Make its Y position equal to the height of the Stage divided by two and that will center the image vertically. Enter the ActionScript circled here and test the movie. The button should now appear in the exact center.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0824.jpg" alt="" /></p>
<p><strong>9 USE CODE SNIPPETS</strong><br />
To get the game working quickly, code snippets can be used. Select the intro_btn, open the Code Snippets panel (Window&gt;Code Snippets), and open the Actions folder. Double-click on Click to Hide an Object to insert this function into the Actions panel. Review the ActionScript and the comments in gray text. In the fl_ClickToHide_1 function, change the ball_mc’s visible property to true. Insert the line of ActionScript shown here. Test the movie and click on the button to see a red ball appear and the intro_btn disappear.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0925.jpg" alt="" /></p>
<p><strong>10 DEVICE-SPECIFIC CAPABILITIES<br />
</strong>Flash can also tap into specific device capabilities unique to mobile such as accessing the camera, microphone, GPS, multitouch, and accelerometer. The accelerometer measures the movement of the device. In this case, the ball needs to move in the direction the device is tilted. The first step in doing this is to import the accelerometer class. On line 1 before all other code, enter the Accelerometer class: “import flash.sensors.Accelerometer;” and on line 2 enter the AccelerometerEvent class: “import flash.events.AccelerometerEvent;” as shown here.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1039.jpg" alt="" /></p>
<p><strong>11 ACCESS THE ACCELEROMETER</strong><br />
To use the accelerometer, an instance of the accelerometer needs to be created once the intro_btn is clicked. Do this by starting with the keyword “var” and defining the instance name (accel), and then using the new keyword to create the instance. Once it’s created, add an event listener that will call a function called “update” anytime there’s an update to the accelerometer. In other words, anytime the device is tilted. Scroll down to the bottom of the Actions panel and enter the ActionScript circled here.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1138.jpg" alt="" /></p>
<p><strong>12 MOVE GRAPHICS WITH ACCELEROMETER<br />
</strong>Test the project in Device Central. (Note: Make sure to click on the button.) Select the Accelerometer tab. Click to tilt the 3D device and notice nothing changes except the X and Y coordinates (which only change between –1g and 1g). These are the accelerometer’s propertyX and propertyY. To move the ball’s position we need to add these properties to the X and Y position of the ball. We also need to multiply the number by about 50 so it moves farther each update. Back in Flash, add the ActionScript circled in the image here.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1236.jpg" alt="" /></p>
<p><strong>13 PUBLISH AN APP FOR iOS DEVICES<br />
</strong>To publish an app for iOS devices you’ll first need the Flash Professional CS5 update for iOS, which can be downloaded at www.adobe.com/support/flash/downloads.html. After you’ve downloaded and installed the update, open the Game.fla file and go to the publish settings (File&gt;Publish Settings). Click on the Flash tab, select iPhone OS from the Player drop-down menu, and click on the Settings button. From here you can define the general settings for the app as shown in the image here. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1335.jpg" alt="" /></p>
<p><strong>14 DEPLOYMENT<br />
</strong>Click on the Deployment tab. Here we’ll need an iPhone Digital Signature and a Provisioning Profile. The process for obtaining these can be complex and requires a membership to the iOS Developer Program (with a $99 fee). The Apple website has tutorials on how to obtain these at http://developer.apple.com. Insert these two items and click on the Icons tab to define icons. Click Publish to make an IPA file. Open iTunes and drag the file to the Apps section. Using the Ad-Hoc distribution certificate, sync your iPod, iPad, or iPhone to see the app on your device. Use your app store profile to submit.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1432.jpg" alt="" /></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/creating-mobile-apps-using-flash-cs5.html/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>HTML5: Using Wallaby with Flash</title>
		<link>http://layersmagazine.com/html5-using-wallaby-with-flash.html</link>
		<comments>http://layersmagazine.com/html5-using-wallaby-with-flash.html#comments</comments>
		<pubDate>Mon, 28 Mar 2011 16:19:00 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[CS5]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=15161</guid>
		<description><![CDATA[At the very edge of Adobe CS5 technology is Wallaby, a new technology that converts Flash FLA files into HTML. This video covers the basics of Wallaby. To download and use this software, visit AdobeLabs.]]></description>
			<content:encoded><![CDATA[<p>At the very edge of Adobe CS5 technology is Wallaby, a new technology that converts Flash FLA files into HTML. This video covers the basics of Wallaby. To download and use this software, visit <a href="http://labs.adobe.com/technologies/wallaby/" target="_blank">AdobeLabs</a>.</p>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1516120">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_fl_walaby.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_fl_walaby.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1516118"></embed>
</object>

<p><!-- MODULE: flashlink NOT FOUND --></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/html5-using-wallaby-with-flash.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
<enclosure url="http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_fl_walaby.mp4" length="" type="" />
		</item>
		<item>
		<title>Custom Video on Cue with Flash CS5</title>
		<link>http://layersmagazine.com/custom-video-on-cue-with-flash-cs5.html</link>
		<comments>http://layersmagazine.com/custom-video-on-cue-with-flash-cs5.html#comments</comments>
		<pubDate>Tue, 08 Feb 2011 16:26:59 +0000</pubDate>
		<dc:creator>Paul Trani</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=14751</guid>
		<description><![CDATA[In this tutorial you will see how easy it is to bring video and graphics together for a seamless, custom experience using Flash Professional CS5.]]></description>
			<content:encoded><![CDATA[<p>In this tutorial you will see how easy it is to bring video and graphics together for a seamless, custom experience using Flash Professional CS5. You’ll learn how to import video, apply a custom skin, and create your own video buttons without writing any ActionScript code. Then you’ll learn how to add cue points, making synchronization between video and graphics a snap. Let’s take a tour of these capabilities.</p>
<p><strong>1 OPEN STARTER FILES<br />
</strong>Download the exercise file for this tutorial <a href="http://media.kelbymediagroup.com/layersmagazine/downloads/novdec10/flash.zip">here</a> and unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find files named “video.fla” and “intro.mov,” as well as a “final” folder that contains the completed files for reference. Open video.fla in Flash CS5. Notice that in the Library panel (Window&gt;Library) there are already graphics created that will be used in this tutorial.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0127.jpg" alt="" /></p>
<p><strong>2 CONVERT VIDEO FOR USE IN FLASH<br />
</strong>The most common video file format used in Flash is the FLV format. To convert a video file to FLV, launch Adobe Media Encoder CS5 (found in the Applications folder on a Mac, the Program Files folder on a PC). Click the Add button on the right, locate the Intro.mov file that you downloaded, and then select Open. Select FLV | F4V from the Format column, then select FLV – Match Source Attributes (High Quality) from the Preset column. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0229.jpg" alt="" /></p>
<p><strong>3 CUSTOMIZE FLV EXPORT SETTINGS<br />
</strong>To customize the export settings for a video, click FLV – Match Source Attributes (High Quality), which you just selected in the Preset column. Notice how you can trim the video, resize it, and even adjust the bitrate settings for both audio and video. In this case, you need to ensure that the alpha channel from the original video gets encoded into the exported video. Under the Video tab on the right, select Encode Alpha Channel, then select OK. Lastly, in the Output File column, save the file as “intro.flv” in the same location as the original intro.mov (set by default), and then click Start Queue.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0328.jpg" alt="" /></p>
<p><strong>4 IMPORT VIDEO INTO FLASH<br />
</strong>Now it’s time to import the intro.flv into the video.fla. Choose File&gt;Import&gt;Import Video. When you’re asked where the video file is, select On Your Computer, click Browse, locate the intro.flv, and click Open. Select Load External Video with Playback Component; keeping the video external will keep the SWF that loads it small in file size. Click Continue and you’ll then be able to select a custom skin for the video. Choose the second skin, MinimaFlatCustomColorAll.swf, and then click the Color swatch to open the Color Picker and select a red to tint the skin. Click Continue.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0427.jpg" alt="" /></p>
<p><strong>5 FINISH IMPORTING VIDEO<br />
</strong>The final import screen notes that a Flash Video component will be created on the Stage while an SWF file for the skin will be placed in the same location as the FLA file once you publish the SWF. If you’re going to upload this project to a Web server, than both the intro.flv and the skin SWF need to be uploaded once the project is published. Click Finish and the video with the selected skin will appear on the Stage. Test the movie (Control&gt;Test Movie&gt;Test) to watch the video. Close the playback window after watching the video.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0525.jpg" alt="" /></p>
<p><strong>6 EDIT VIDEO PARAMETERS<br />
</strong>All of the video controls for the imported video are active on the Stage. Click the play button (or press the Spacebar) to play the video. With the video selected, open the Properties panel (Window&gt;Properties) and notice how you can modify various video parameters. Confirm that autoPlay is selected, and note that both skinBackgroundAlpha and Volume are set to 1, which is 100% in Flash. Change the volume to 0.5 so it will be set to 50%.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0624.jpg" alt="" /></p>
<p><strong>7 ADD SPECIFIC VIDEO CONTROLS<br />
</strong>In the Properties panel, click the pencil icon next to the name of the Skin to modify it. Select None for the skin and click OK. In the Timeline panel (Window&gt;Timeline) select the video controls layer. Open the Components panel (Window&gt;Components) and expand the Video folder. Click-and-drag the PlayPauseButton and the VolumeBar to the lower-left corner of the Stage.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0721.jpg" alt="" /></p>
<p><strong>8 CUSTOMIZE VIDEO CONTROLS<br />
</strong>Double-click the Play/Pause button on the Stage to enter its symbol. Double-click it again to enter the PlayButton symbol. Notice how a Normal, Over, Down, and Disabled Play button appear. Each one of these buttons can be customized to your liking. Change the green outline to red in the Over and Down buttons. (To change the color, double-click a button twice, click the green outline to select it, and then change the Fill color to red.) Click on Scene 1 at the top-left to go back to the Stage.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0820.jpg" alt="" /></p>
<p><strong>9 ADD A CUE POINT<br />
</strong>In order to sync up graphics with video, you’ll need to add cue points in the video. With the video selected, go to the Properties panel and near the bottom you’ll find the Cue Points section. Using the Add ActionScript Cue Point icon (+, plus sign) you’re able to add cue points to the video at certain times. Play the video, and when the presenter says “John,” add a cue point. Notice that “Cue Point 1” was added at about one second. Click on the name of the cue point and rename it “john.” Notice you can also edit the cue point time if needed.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0921.jpg" alt="" /></p>
<p><strong>10 ADD MULTIPLE CUE POINTS<br />
</strong>Next, play the video and when the presenter says “agencies” (about nine seconds in) add another cue point. Rename “Cue Point 2” to “agencies.” Around 15 seconds in, when the presenter says “nonprofit,” add another cue point. Rename this one as “nonprofit.” Your cue points should look like the image above.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1035.jpg" alt="" /></p>
<p><strong>11 ADD A CUE POINT EVENT<br />
</strong>Now you need to have Flash “listen” for these cue points that were added. But first you need to give the video an instance name. Select the video and at the top of the Properties panel, name the video “intro.” Now, open the Code Snippets panel (Window&gt;Code Snippets) and expand the Audio and Video folder. With the video still selected, double-click on the On Cue Point Event. This will add the ActionScript shown above which will basically show the names of the cue points in the Output panel. Test the video to see it in action.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1134.jpg" alt="" /></p>
<p><strong>12 ADD GRAPHICS<br />
</strong>Next, you need to add the graphics that will be displayed based on the three cue points. Open the Library panel and notice the john, agencies, and nonprofit movie clips. Select the john layer in the Timeline and then click-and-drag the john movie clip to the Stage. Use the Properties panel to set both the x and y position to 0. Next, drag the agencies and nonprofit movie clips to their appropriate layers and make sure their x and y position are set to 0. Test the movie and note that all the movie clips have animation and play at the same time.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1232.jpg" alt="" /></p>
<p><strong>13 SET UP GRAPHICS<br />
</strong>Since you don’t want all the movie clips to appear at the beginning of the movie, you need to set their visibility to false using ActionScript. In order to control the movie clips with ActionScript, they first need instance names. Select the john movie clip and in the Properties panel give it an instance name of “john.” Give the agencies movie clip an instance name of “agencies” and the nonprofit movie clip an instance name of “nonprofit.” Select the first frame of the Actions layer and open the Actions panel (Window&gt;Actions). Using those instance names, set the visibility of each movie clip to false as shown above.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1331.jpg" alt="" /></p>
<p><strong>14 DISPLAY GRAPHICS BASED ON CUE POINTS<br />
</strong>Now you can modify the cue point event listener. Change the trace statement to a conditional statement that will listen for a cue point. If a cue point is “heard,” the appropriate movie clip will become visible and the animation will play. Type in the ActionScript shown above and test your movie.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1428.jpg" alt="" /></p>
<p><em>ALL IMAGES BY PAUL TRANI UNLESS OTHERWISE NOTED</em></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/custom-video-on-cue-with-flash-cs5.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Actionscript Made Easy</title>
		<link>http://layersmagazine.com/actionscript-made-easy.html</link>
		<comments>http://layersmagazine.com/actionscript-made-easy.html#comments</comments>
		<pubDate>Tue, 30 Nov 2010 14:09:42 +0000</pubDate>
		<dc:creator>Paul Trani</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=14175</guid>
		<description><![CDATA[Let’s face it, in the past new Flash users had to deal with a dauntingly empty Actions panel and advanced users had to pillage previous projects to speed up development.]]></description>
			<content:encoded><![CDATA[<p>[If you’d like to <a href="http://media.kelbymediagroup.com/layersmagazine/downloads/sepoct10/flash.zip">download the file used in this tutorial</a> to practice these techniques, visit <a href="http://layersmagazine.com/magazine-downloads">www.layersmagazine.com and navigate to the Magazine</a> section. All files are for personal use only.]</p>
<p>Let’s face it, in the past new Flash users had to deal with a dauntingly empty Actions panel and advanced users had to pillage previous projects to speed up development. Flash CS5 has changed all this with the introduction of the surprisingly easy Code Snippets panel, advanced code hinting, and custom class introspection. Let’s take a look.</p>
<p><strong>1 OPEN THE STARTER FILE<br />
</strong>Download the exercise file for this tutorial from the Layers website and unzip it onto your desktop or other location of your choosing. Inside of the zip file you’ll find a file named ImageGallery.fla. Open this file in Flash CS5. It’s important to note that this file targets ActionScript 3, since the code we’re about to show you will only work when targeting ActionScript 3. Also, note that on the Stage there’s one button. Select the button with the Selection tool (V) and notice in the Properties panel that the Instance Name is image_btn. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0118.jpg" alt="" /></p>
<p><strong>2 USE A CODE SNIPPET<br />
</strong>With the image_btn selected, open the Code Snippets panel (Window&gt;Code Snippets). You’ll see folders of ActionScript 3 code that can be applied to any ActionScript 3 project—from controlling the Timeline, opening webpages, playing video, and using custom cursors to generating random numbers. I encourage you to play around with this code, but for our purpose we want to load an image when the image_btn is clicked. Click on the triangle to the left of the Load and Unload folder to twirl it open. With the image_btn selected, double-click on the Click to Load/Unload SWF or Image snippet to add it to the button.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0220.jpg" alt="" /></p>
<p><strong>3 REVIEW THE CODE SNIPPET<br />
</strong>When a code snippet is added to a project, Flash adds an Actions layer to the Timeline panel (Window&gt;Timeline) and opens the Actions panel to reveal the ActionScript created. Comments (in gray) are also added to explain what the code does and how to modify it. In this case, the comments mention how to replace the image path with an image path of your own. This path can be on the Internet or in a local folder (e.g., “/Macintosh HD/images/myimage1.jpg”). Test the file (Control&gt;Test Movie&gt;Test) and click on the image_btn in the corresponding dialog. Notice how an image is loaded and unloaded with each button click.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0319.jpg" alt="" /></p>
<p><strong>4 ADD ACTIONSCRIPT<br />
</strong>This code snippet places images in the upper-left corner by default, but we’d like this image to be centered on the Stage. In order to do this, we need to use contentLoaderInfo to find out when the image is completely loaded, then we can position the image accordingly. Type the lines in the image shown here in the Actions panel, which includes a COMPLETE listener that calls a skeleton function called imageLoaded. Once that function is called, the image will be added to the Stage using addChild(fl_Loader).</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0419.jpg" alt="" /></p>
<p><strong>5 CENTER HORIZONTALLY<br />
</strong>Before we can center the image, we need to determine where the center of the Stage and image is. To determine the horizontal center of the Stage, we need to get the Stage width and divide by two. Apply this to the x position of the image and it will only put the left edge of the image in the center. So, we need to also get the center of the image and subtract that from the stageWidth. Then we can apply it to the x position of the image. Add the line of code circled above to the imageLoaded function.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0517.jpg" alt="" /></p>
<p><strong>6 CENTER VERTICALLY<br />
</strong>Centering the image vertically is done similarly to centering the image horizontally. Get the stage height and divide by two to get the center. Then, get the height of the image and divide by two. Subtract the center of the Stage from the center of the image, then apply that to the image’s y position. Review the image here and add the circled line to center the image vertically. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0616.jpg" alt="" /></p>
<p><strong>7 USE CUSTOM CLASSES<br />
</strong>Anytime a movie clip or button is being used we’re actually using an object from the built-in movie clip class. In addition to built-in classes, custom classes can be used allowing for even quicker development and flexibility. There are many custom classes available, but for this tutorial we’ll use the TweenMax class that allows for easy animation of many properties. Go to www.greensock.com/tweenmax and download the AS3 file in the top-right corner of the webpage (it’s free, but donations are encouraged). Unzip the file and place the Com folder in the same location where you saved the ImageGallery.fla.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0714.jpg" alt="" /></p>
<p><strong>8 CUSTOM CODE HINTING<br />
</strong>Before fading in this image using TweenMax, we need to set the alpha (transparency) of the image to zero. Do this by typing the first line of code circled in the image above. Then, an instance of the TweenMax class needs to be created by typing “var alphaTween:TweenMax” on the next line in the Actions panel. Notice as soon as the colon is typed, Flash displays code hinting not just for built-in classes but for custom classes recognized in the Com folder. Double-click the TweenMax code hint and Flash will complete the word, automatically adding the needed import statement in the Actions panel.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0813.jpg" alt="" /></p>
<p><strong>9 USING A CUSTOM CLASS<br />
</strong>Complete the code started in the last step by placing an alpha tween inside the alphaTween variable. Do this by adding the circled code above. This line takes the fl_Loader (which contains the image), and within two seconds it animates the alpha to 1 (which is 100% and completely opaque). Test the file (Control&gt;Test Movie&gt;Test) and click on the image_btn to watch the image fade in from the center. Note: This is just one example of a tweened property—I encourage you to explore the many other options available on the GreenSock website and refer to the Getting Started page for additional help. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/0915.jpg" alt="" /></p>
<p><strong>10 CREATE A NEW CODE SNIPPET<br />
</strong>Any ActionScript code can be saved as a new code snippet for use later or to share. To start, in the Actions panel, review the code thoroughly and add any additional comments necessary, such as a note that the Com folder from www.greensock.com is needed in the same folder as the FLA file. The more detail added, the easier it will be to reuse. Then, click-and-drag to select all the code in the Actions panel for the new snippet. Then, at the top-right of the Code Snippets panel, click the Options menu and select Create New Code Snippet.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1029.jpg" alt="" /></p>
<p><strong>11 FINISH THE CODE SNIPPET<br />
</strong>The first step in creating a code snippet, is to define the Title and Tooltip as shown above. Then, click the Auto-fill button to paste in the selected code. Next, enable the Automatically Replace Instance_Name_Here When Applying Code Snippet checkbox. Then, replace the “image_btn” reference with “instance_name_here.” This will ensure that regardless of the instance name of the next button, the snippet applied to the code will change accordingly. Click OK to make the snippet. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1128.jpg" alt="" /></p>
<p><strong>12 CREATE A NEW FILE<br />
</strong>Now that a custom code snippet has been created, it can be used in any Flash file. First, select the button on the Stage and press Command-C (PC: Ctrl-C) to copy it. Create a new file (File&gt;New) and in the Type section, select ActionScript 3.0. Click OK. In this new file, press Command-V (PC: Ctrl-V) to paste the copied button and use the Selection tool to position it. Give the button a new Instance Name of new_btn in the Properties panel, and save (File&gt;Save As) this file with a different name in the same location as the previous Flash file.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1226.jpg" alt="" /></p>
<p><strong>13 APPLY YOUR CUSTOM CODE SNIPPET<br />
</strong>With the button still selected, open the Code Snippets panel. In the Custom folder, double-click the Click to Load, Fade, Center Image snippet to apply it to the button. Review the code in the Actions panel and replace the filename of the image that you’ve been loading in the code (not the gray instructions) to a different filename using an image of a different size. Test the file and click on the new_btn to watch a new image fade in from the center—even though this is a new file with a different Stage size.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1325.jpg" alt="" /></p>
<p><strong>14 EXPORTING CODE SNIPPETS<br />
</strong>Lastly, after all the hard work is done, we can easily share code snippets by simply exporting. In the Code Snippets panel, click on the Options menu and select Export Code Snippets XML. Give the XML file a name and Save to the location of your choice. Conversely, code snippets can be imported through that same menu. Interested in more flexibility? Through the same menu we can also use Edit Code Snippets XML. This will open the XML file in Flash for further editing.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1422.jpg" alt="" /></p>
<p><em>ALL IMAGES BY PAUL TRANI UNLESS OTHERWISE NOTED<br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/actionscript-made-easy.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Adobe Workflow Lab to Fireworks, Part 3</title>
		<link>http://layersmagazine.com/adobe-workflow-lab-to-fireworks-part-3.html</link>
		<comments>http://layersmagazine.com/adobe-workflow-lab-to-fireworks-part-3.html#comments</comments>
		<pubDate>Mon, 11 Oct 2010 15:39:39 +0000</pubDate>
		<dc:creator>tom green</dc:creator>
				<category><![CDATA[Fireworks]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video Tutorials]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=14023</guid>
		<description><![CDATA[Follow along with this four-part series which begins with an in-flight entertainment device, and moves into the new Workflow Lab app from Adobe and eventually into Fireworks to create a Rich Media Application.]]></description>
			<content:encoded><![CDATA[<p>Follow along with this four-part series which begins with an in-flight entertainment device, and moves into the new Workflow Lab app from Adobe and eventually into Fireworks to create a Rich Media Application. Click <a href="http://media.kelbymediagroup.com/layersmagazine/downloads/green_inflight_workflow3_download.zip">here</a> to download the files to follow along with this lesson.</p>
<object width="600" height="353" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="movie" id="object-video-1402314">
<param name="movie" value="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_fw_inflight_workflow3.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" />
<embed src="http://media.kelbymediagroup.com/players/player-5.1-licensed.swf" allowfullscreen="true" allowscriptaccess="always" quality="high" wmode="opaque"  type="application/x-shockwave-flash" flashvars="autostart=true&backcolor=0x000000&bufferlength=5&controlbar=bottom&file=http://media.kelbymediagroup.com/layersmagazine/video/tutorials/green_fw_inflight_workflow3.mp4&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&plugins=ova,gapro-1&quality=high&repeat=list&screencolor=0x000000&skin=http://media.kelbymediagroup.com/players/skins/modieus.swf&stretching=fill&volume=80&adttext.config=http://ads.kelbymediagroup.com/video/adttext-layersmagazine-global.php&adtvideo.config=http://ads.kelbymediagroup.com/video/adtvideo-layersmagazine-global.php&hd.state=false&config=http://media.kelbymediagroup.com/players/ads/configs/layers-ad-config.xml&gapro.accountid=UA-1544617-2&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" width="600" height="353" id="video1402319"></embed>
</object>

<p><!-- MODULE: flashlink NOT FOUND --></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/adobe-workflow-lab-to-fireworks-part-3.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Text Layout Framework in Flash Player 10</title>
		<link>http://layersmagazine.com/text-layout-framework-in-flash-player-10.html</link>
		<comments>http://layersmagazine.com/text-layout-framework-in-flash-player-10.html#comments</comments>
		<pubDate>Mon, 13 Sep 2010 16:23:39 +0000</pubDate>
		<dc:creator>lee brimelow</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://layersmagazine.com/?p=13760</guid>
		<description><![CDATA[If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only. Adobe released a powerful new text engine in Flash Player 10 called Text Layout Framework (TLF). At the time, there was no tooling support in [...]]]></description>
			<content:encoded><![CDATA[<p>If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.</p>
<p>Adobe released a powerful new text engine in Flash Player 10 called Text Layout Framework (TLF). At the time, there was no tooling support in Flash Professional to take advantage of it. In Flash CS5, however, there’s full support for easily doing things such as linked containers, multicolumn text, exotic ligatures, and enhanced support for languages such as Arabic and Japanese. Let’s take a tour of some of these new features.</p>
<p><strong>1 SETTING UP FLASH CS5<br />
</strong>If you’d like to use the same text that we’re using in this tutorial, you can download the exercise files from www.layersmagazine.com. Open Flash CS5 and when the Welcome Screen appears, click ActionScript 3 in the Create New section. The TLF is written entirely in ActionScript 3, so if you haven’t already transitioned to the new version of the language, here’s yet another reason to do so. Go under File&gt;Save and save this new document to your desktop as “TLF.fla.” </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/159.jpg" alt="" /></p>
<p><strong>2 TLF TEXT VS. CLASSIC TEXT<br />
</strong>Double-click the name of the first layer in the Timeline and rename it to “Text.” Select the Text tool (T) and drag out a new text field that fills the top half of the Stage. At the top of the Properties panel you’ll notice a pull-down menu that by default is set to TLF Text. If you don’t want to use the new text engine you can change this to Classic Text, which is the name for the old text engine. There’s some additional file size and overhead with using TLF, so if you need simple text, it’s better to stick to classic text. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/213.jpg" alt="" /></p>
<p><strong>3 CHARACTER OPTIONS<br />
</strong>Open the sampleText.txt file that you downloaded, and copy (Command-C [PC: Ctrl-C]) the English language text. Back in Flash, paste (Command-V [PC: Ctrl-V]) the text into the TLF text field. Select the text (Command-A [PC: Ctrl-A]), and in the Character section of the Properties panel, change the font Family to Adobe Caslon Pro and change the Size to 20 pt. Choose Readability in the Anti-alias pull-down menu. If your text field will be dynamic or editable, you’ll need to embed the font by clicking on the Embed button. This workflow hasn’t changed from previous versions of Flash, although there’s a new global Font Embedding dialog (Text&gt;Font Embedding) to make font management much easier. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/312.jpg" alt="" /></p>
<p><strong>4 LINKED CONTAINERS<br />
</strong>Linked containers allow you to link two or more individual text containers together so that text will flow through them. You should see a small red icon on the bottom-right of the text field on the Stage. Click on it and your cursor will change to one loaded with text. Now drag out a new text field somewhere on the Stage and you’ll notice a connecting line between them and also that the overflow text from the first text field flows into the second. Although the containers are linked, you can still style, position, and manipulate each text field individually. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/412.jpg" alt="" /></p>
<p><strong>5 LIGATURE SUPPORT<br />
</strong>Delete the second text field you created in the last step and replace the text in the first one with the word “cost.” Increase the font size to 210 pt. Ligatures are special characters that replace certain combinations of letters in a font. Typographers take extra time to design beautiful-looking connections between characters and most people never even know they’re there. In the Advanced Character section of the Properties panel, change the value in the Ligatures menu from Common to Exotic. As you can see, this particular ligature is quite fancy, and using them can add a touch of class to your text.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/513.jpg" alt="" /></p>
<p><strong>6 MULTICOLUMN LAYOUTS<br />
</strong>When dealing with large amounts of text, it’s often more readable to break the text into multiple columns similar to what you see in newspapers. Delete the text field on the Stage and create a new one that fills the Stage and change the font Size to 18 pt. Paste in the block of text from the text file. Go to the Container and Flow section of the Properties panel and set the Columns to 2. You should now see the text divided into two columns. You can also adjust the gap between the columns by adjusting the column gutters property to the right. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/612.jpg" alt="" /></p>
<p><strong>7 FUN WITH DIGITS<br />
</strong>There are also some subtle options to choose from when it comes to displaying numbers. Fill the text field on the Stage with numbers, change the number of Columns back to 1, and increase the Size to 80 pt. Go to the Advanced Character section of the Properties panel and you’ll see two options for tweaking the way numbers appear in your text field. Change the Digit Case property to Old Style. This displays digits in a more old-fashioned style as designed by the typographer. Changing the Digit Width property to Proportional groups, the digits are grouped closer together based on the character’s proportional size. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/712.jpg" alt="" /></p>
<p><strong>8 VERTICAL TEXT ORIENTATION<br />
</strong>Another simple thing that designers often want to do is to create text that’s laid out vertically. This wasn’t possible with the classic text field. Create a new TLF text field on the Stage, change the font Size to 22 pt, and type in a word. Now in the top of the Properties panel, change the orientation of the text to Vertical using the menu highlighted in the screen shot. Obviously, you still need to rotate the characters to make things look right. Change the Rotation to 270º in the Character section of the Properties panel. You now have vertical text.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/811.jpg" alt="" /></p>
<p><strong>9 JAPANESE TEXT<br />
</strong>Properly displaying languages like Japanese in previous versions of Flash was next to impossible. Create a new TLF text field that fills the Stage. Change the font to Adobe 고딕 Std, which comes with Flash CS5. Open the sampleText.txt file and copy-and-paste the Japanese text into the text field and set the orientation to Vertical. When you test it, you’ll notice that text also selects vertically like it should. To see additional options for Asian languages, choose Show Asian Options in the flyout menu at the top of the Properties panel. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/99.jpg" alt="" /></p>
<p><strong>10 ARABIC TEXT<br />
</strong>Another difficult language to display in Flash is Arabic, and other right-to-left languages. With the TLF, this has also been made simple. Create a new TLF text field that fills the Stage, set the orientation to Horizontal, change the Rotation back to 0º, and change the font to Adobe Arabic. Open the sampleText.txt file and copy-and-paste the Arabic text into the text field. Select Show Right-to-Left Options from the flyout menu at the top of the Properties panel. Now in the Paragraph section, you can change the Direction property to Right to Left. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1018.jpg" alt="" /></p>
<p><strong>11 HIGHLIGHTING TEXT<br />
</strong>Another frequent request that Adobe received from designers was that they wanted the ability to highlight certain pieces of text with a different background color, similar to the way you can do it in programs such as Microsoft Word. Create a new TLF text field and enter in some text. Now use the Text tool to select one of the words you typed. In the Properties panel, under the Character section, you can change the Highlight color to anything you like. You can also change the selection color as well, but that requires writing some ActionScript code. </p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1118.jpg" alt="" /></p>
<p><strong>12 TLF WITH ACTIONSCRIPT<br />
</strong>There are times that you’ll need the ability to change TLF properties dynamically at runtime using ActionScript. Create a new TLF text field on the Stage and paste in some text. Give the text field an Instance Name of “tf” at the top of the Properties panel. Select the first frame of the Text layer and open the Actions panel (Window&gt;Actions). As an example, you can change the number of columns in the text field simply by setting the columnCount property as shown in the screen shot (test the movie to see the results). Most of the other properties can be set just as easily.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1216.jpg" alt="" /></p>
<h4>Integration with Adobe InDesign</h4>
<p>For those of you who use Adobe InDesign, you may have noticed the similarities between the TLF and the text capabilities found in InDesign. This is no coincidence, as the InDesign team is the one who developed this amazing new text engine for Flash. There’s such fine-tune control available over text, that most Flash designers won’t ever want or need to use them all. But for designers who are trying to create beautiful reading experiences for new-generation devices like tablets, they’ll be able to faithfully translate the printed page into Flash.</p>
<p>InDesign CS5 also has the ability to export text layouts directly to Flash FLA files using the TLF. This means that designers can do their entire layouts for Flash directly in InDesign where they may be more comfortable. They can then export to an FLA file and pass it to the Flash developer. InDesign CS5 also has some new animation capabilities that allow designers to create basic interactive projects without even needing to open Flash. As publishers move to get their printed publications onto digital devices, InDesign combined with Flash, will be a vital workflow to make that happen.</p>
<p><img src="http://media.kelbymediagroup.com/layersmagazine/files/1315.jpg" alt="" /></p>
]]></content:encoded>
			<wfw:commentRss>http://layersmagazine.com/text-layout-framework-in-flash-player-10.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

