<?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>Pixil.info &#187; Animation</title>
	<atom:link href="http://pixil.info/tag/animation/feed/" rel="self" type="application/rss+xml" />
	<link>http://pixil.info</link>
	<description>We make video tuts on design and development.</description>
	<lastBuildDate>Fri, 23 Jul 2010 22:33:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Animate Text Extrudes in Maya</title>
		<link>http://pixil.info/tutorials/animate-text-extrudes-in-maya/</link>
		<comments>http://pixil.info/tutorials/animate-text-extrudes-in-maya/#comments</comments>
		<pubDate>Tue, 13 Apr 2010 03:11:13 +0000</pubDate>
		<dc:creator>Pedro Ruiz</dc:creator>
				<category><![CDATA[Maya]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[pedro ruiz]]></category>
		<category><![CDATA[Text]]></category>
		<category><![CDATA[workflow]]></category>

		<guid isPermaLink="false">http://pixil.info/?p=910</guid>
		<description><![CDATA[Coming up on today&#8217;s epsiode: We take a look at how to animate extruding text in Maya. Animating extruded text...]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fanimate-text-extrudes-in-maya%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fanimate-text-extrudes-in-maya%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>Coming up on today&#8217;s epsiode:</strong></p>
<p>We take a look at how to animate extruding text in Maya. Animating extruded text is a nice effect to get the attention of your audience and it always makes for good screen candy.</p>
<p><span id="more-910"></span></p>
<p>If you use a custom font you can import an Illustrator file. For this example we will create the text inside Maya. We go to the create menu > create > text > option box. Enter in some text. Set output for curves. You can create a curve, or use an arc tool. Go under create > arc tools to make arc. Go into the side view and click to create a small arc.</p>
<p>Reset the pivot point the center by clicking the home key to bring up the editor. Then go to modify pivot > center pivot. I like to rebuild the curve to make sure it has an even number of  CV points. With the curve still selected go under the surfaces menu then</p>
<p>Rebuild surfaces > option box</p>
<p>Use the settings</p>
<ul>
<li>uniform</li>
<li>0 to 1</li>
<li>keep ends</li>
<li>for this example, I&#8217;ll use spans to 4</li>
<li>degree to cubic</li>
</ul>
<p>Position the curve close to the text. Back in the Surface menu we&#8217;ll go to the Extrudes option box</p>
<p>Use the settings to</p>
<ul>
<li>Tube for style</li>
<li>At path for result position</li>
<li>Component for pivot</li>
<li>Profile for the orientation</li>
<li>Complete the curve</li>
</ul>
<p>and output to NURBS</p>
<p>Now we can select the letters curves first, then shift select the curve. If your letters have holes, Shift select letter&#8217;s outer curve first then shift select the inner curve. Center the pivot for each letter. then go ahead and Extrude each letter.</p>
<p>Select the outline and under Surface fill each letter with a Planer. Ok, so now that we have all the letters extruded, we can start to animate the letter&#8217;s extrude.</p>
<p>First lets increase the extrude quality, by going into the attributes for each surface. Under the Tessellation >  enable Display > Primary Tessellation Attributes. Here you can set the uv&#8217;s to &#8220;Best Guess Based on Screen Size&#8221;. You can control the text through the curve we&#8217;ve create for the extrude. Just keyframe the point position to animate. To animate along the curve we&#8217;ll go into our options for the extrude node.</p>
<p>In the Channel box select the input for the sub curve of each letter. Here you can keyframe the Min and Max values<br />
to animate for text!</p>
<p>To add a tapper, we&#8217;ll go into the extrude node and adjust the scale properties. Adjust your animation curves, camera and check your render! </p>
<p>Alright, and that is how to animate text extrusions inside Maya.</p>
<p>I&#8217;m Pedro for Pixil.info. See you guys next time! </p>
]]></content:encoded>
			<wfw:commentRss>http://pixil.info/tutorials/animate-text-extrudes-in-maya/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Advanced Lighting Effects in Flash</title>
		<link>http://pixil.info/tutorials/advanced-lighting-effects-in-flash/</link>
		<comments>http://pixil.info/tutorials/advanced-lighting-effects-in-flash/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 04:19:10 +0000</pubDate>
		<dc:creator>Natalia Elina</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Animacat]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[lighting effects]]></category>
		<category><![CDATA[natalia elina]]></category>

		<guid isPermaLink="false">http://pixil.info/?p=231</guid>
		<description><![CDATA[Advanced Lighting Effects in Flash Natalia from animacat.net shows us how she creates advanced lighting effects in Flash. To start...]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fadvanced-lighting-effects-in-flash%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fadvanced-lighting-effects-in-flash%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Advanced Lighting Effects in Flash</p>
<p>Natalia from <a href="http://www.animacat.net/" target="_blank">animacat.net</a> shows us how she creates advanced lighting effects in Flash. To start off this effect, first you need your assets. So here we have a background, which a simple photograph of this subway type ceiling, and a lamp which is a PNG with alpha channel.</p>
<p><span id="more-231"></span></p>
<p>So if we go inside this group, you can see I used the brush tool to outline the details in the background. And if we go inside graphic symbol, you can the lamp just a PNG with alpha channel, and the second layer is the outline we made with the brush tool. In this case we moved the registration in the top middle and animated it with four keyframes swinging back and forth. </p>
<p>Alright and for the lighting effect we have two layers with simple round gradients which act as the lights around the lamp. If you look closely at lamp, the gradient moves with the lamp, so try to place the keyframes in the right place to sync up the animations. So for each light object, you notice the radial gradient has several steps to make it look likes its flickering. </p>
<p>Next lighting objects are these giant circles with the same type of graident. Notice that we used zero percent alpha colors for the edges. So if we play the animation, you can see all we did was skew the shape to make it seem as tho the lights are moving along the swinging lamp! </p>
<p>Alright and for the details lets take a look at this fly. So its just a movie clip with a motion path. If we go inside the fly movie clip, you can see the animation is pretty simple, 4 frames of the wing shapes flipping up and down. So if we jump back out of to the scene you can see the fly follows the motion path.</p>
<p>Now lets test out the scene. And there you have it, a pretty simple special effect technique in flash! </p>
]]></content:encoded>
			<wfw:commentRss>http://pixil.info/tutorials/advanced-lighting-effects-in-flash/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Animating with ActionScript 2</title>
		<link>http://pixil.info/tutorials/animating-with-actionscript-2/</link>
		<comments>http://pixil.info/tutorials/animating-with-actionscript-2/#comments</comments>
		<pubDate>Wed, 28 Jan 2009 23:15:07 +0000</pubDate>
		<dc:creator>Jeremy Lawson</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[as2]]></category>
		<category><![CDATA[jermbo]]></category>
		<category><![CDATA[workflow]]></category>

		<guid isPermaLink="false">http://pixil.info/?p=133</guid>
		<description><![CDATA[Coming up on today&#8217;s epsiode: Find out how to make simple animations in Flash CS4 using Action Script 2. Right...]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fanimating-with-actionscript-2%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fpixil.info%2Ftutorials%2Fanimating-with-actionscript-2%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>Coming up on today&#8217;s epsiode:</strong></p>
<p>Find out how to make simple animations in Flash CS4 using Action Script 2.</p>
<p>Right off the bat I make a new layer and I call it actions. It is always best practice to have your actions on its own layer without graphics. So I start every project off by adding an Actions layer and locking it.</p>
<p>On layer one, grab the oval tool make sure that you don’t have a stroke color and draw a circle on the screen. Hold down shift to constrain the proportions. With the object now selected lets hit the hot key F8, this is going to bring up the Convert to Symbol Dialog box.</p>
<p><span id="more-133"></span></p>
<p>Make it a movie clip and give it a name of red Ball. Now you should see a movie clip in you library called red Ball. Whatever name you give it if the library doesn’t matter. It’s the instance name that Action Script will be looking for. So select the movie clip and locate your properties panel. In this panel is where you will see a place for an instance name. Lets give it a name of ball. Now select your actions layer and press F9 to get your action panel up.</p>
<p>With our actions panel open the first thing we need to do is import what functionality we want to use. WE want tweens and easing. So go ahead and import them by typing  &#8220;import mx.transitions.Tween; import mx.transitions.easing.</p>
<p>The import of tweens is finding a folder with premade tween animation script. The same thing can be said about the easing. But notice on the easing I typed a .* this is telling action script that I want to load all of the easing types so I can use them.</p>
<p>Now that we have imported the functionality we can begin animating. To declare a new tween you need to type out new tween open and close (). In side the () flash is expecting 7 parameters.</p>
<ul>
<li>The object that you are wanting to target</li>
<li>What property you want to effect.</li>
<li>Tween type and easing type.</li>
<li>Starting location or starting percentage</li>
<li>Ending location or ending percentage</li>
<li>Duration</li>
<li>True if you want the duration to last in seconds or False if you want the duration to last in frame</li>
</ul>
<p>So lests tackle it. The first parameter is what object I want to effect so I am going to put ball comma. Next is the property, note you have to put this one in quotes, so I want the ball to fall down so quote underscore y quote comma. Here comes the tween and easing type, there are several types of tweens and easing we will cover only one, don’t worry  I made a cheat sheet that you can take and reference for all the types, I want it to bounce and have a bit of ease out. If this part didn’t turn blue then you spelled something wrong, this part is very case sensitive.</p>
<p>Next I want to start the balls position from zero. This number will take the ball from where ever it is at and place it at the y coordinate of zero. If you wanted it to start from where it is on the stage then simply type ball._y here. This says were ever the ball is start here. Next is the ending location. Since I used a numeric value in the previos one I will add a numeric value to this one. But lets say I want it to move 200 pixils from where it is at simply type ball._y + 200.</p>
<p>The last two are important to each other , if the last parameter is false then the number will represent a duration in frames. But if the last one is true then the previous number is take place over seconds. So lets add 2 comma true. This says take 2 seconds to play out.Go ahead and test movie and see what happens. You just made action script animate your ball. Don’t forget to grab my cheat sheets and source file at <a href="http://jermbo.com/" target="_blank">Jermbo.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pixil.info/tutorials/animating-with-actionscript-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create 3D Objects in Flash CS4</title>
		<link>http://pixil.info/downloads/create-3d-box-in-flash-cs4/</link>
		<comments>http://pixil.info/downloads/create-3d-box-in-flash-cs4/#comments</comments>
		<pubDate>Thu, 08 Jan 2009 18:26:07 +0000</pubDate>
		<dc:creator>Noe Ruiz</dc:creator>
				<category><![CDATA[Downloads]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[ecken]]></category>
		<category><![CDATA[noe ruiz]]></category>
		<category><![CDATA[workflow]]></category>

		<guid isPermaLink="false">http://pixil.info/?p=115</guid>
		<description><![CDATA[Coming up on today&#8217;s epsiode: How to create a 3D Box and animate it using the new 3D Tools and...]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fpixil.info%2Fdownloads%2Fcreate-3d-box-in-flash-cs4%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fpixil.info%2Fdownloads%2Fcreate-3d-box-in-flash-cs4%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>Coming up on today&#8217;s epsiode:</strong></p>
<p>How to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.</p>
<p><strong>Step 1: Create a square shape</strong></p>
<p>Start by drawing out simple square. Hold down the shift key to constrain the proportions. Now lets change the solid fill to a gradient by going the color palette, and lets change the type to a Linear gradient. Next lets remove the stroke, just goto the stroke color picker and choose the None option.</p>
<p><span id="more-115"></span></p>
<p>Now lets make sure our square is in the center of the stage, we can do that by going to the align panel and click on the horizontal and vertical align buttons.</p>
<p><strong>Step 2: Position &amp; Convert into a Movie Clip</strong></p>
<p>Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol&#8230; alright now lets nest this symbol inside another movie clip, and lets name this one 3D Box. So inside the 3D box movie clip is where we&#8217;ll be setting up the 3D layers.</p>
<p><strong>Step 3: Duplicate Layers for Each Box Side</strong></p>
<p>Alright so now we can just copy and paste a few of these squares on some new layers. And lets name each copy after a side of the 3D Box such as top, bottom, left and right.</p>
<p><strong>Step 4: Rotate Each Side 90&ordm; &amp; Position in Place</strong></p>
<p>Now lets convert all the frames into motion tweens by selecting them, right clicking and Create Motion Tween. Now lets start with the top layer and rotate the X axis 90 degrees. You can hold down the shift key to constrained your rotation. Next we can go inside the motion editor to ensure our rotation was a either a positive value, or a negative one. Just to make sure everything is set the name.</p>
<p>Now we&#8217;ll want to move this top layer up about half of the way. So just calculate half  the height of the square and move it up so it sets on top. I like to use the 3D Position and View Panel to do this because you can easily change the values there.</p>
<p>Now lets repeat this process for the bottom layer. But this time we&#8217;ll want move the half way down, so again just change the value in the 3D Position and View Panel. Alright so next lets start on the left and right squares. Starting with left, lets rotate the Y axis  90 degrees and shift it over to the left about half of the width of the square. Again we can go inside the motion edition to check our values. Alright now we can repeat the same process for the right square, but don&#8217;t forget to move it to the right side instead of the left!</p>
<p><strong>Step 5: Test 3D Box Rotation</strong></p>
<p>So once we finish all rotating and positioning, we should be left with a picture frame looking set of rectangles. So lets jump out of the movie clip and goto scene 1. Now lets select our 3D rotation tool and watch as I rotate the box on its Y axis. Pretty sweet huh?</p>
<p>Step 6: Add Drop Shadow</p>
<p>Lets select our bottom layer, and lets goto the filters section in the properties panel and licks pick drop shadow. Lets change the blur X and Y values to something big like 100 pixels, change the quality to high, and distance to 0.</p>
<p><strong>Step 7: Animate 3D Box Rotating</strong></p>
<p>So now lets jump out to our main timeline and lets add a few move frames. Now Ill be using the motion editor to animate the 3D Box and have spin on it Y axis. So lets convert it the frames into a motion tween by right clicking on the frame bar and selecting convert to motion tween. Now we can scrub over to the last frame and then goto the motion editor. So if we want to just rotate the box spinning from left to right, we can simply change the Rotation Y  value to 360 degrees.</p>
<p>Test out the animation by pressing cmd+renturn (cntrl+return on PC).</p>
]]></content:encoded>
			<wfw:commentRss>http://pixil.info/downloads/create-3d-box-in-flash-cs4/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
