http://pixil.info Production workflow podcast Tue, 23 Feb 2010 18:04:07 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Copyright © Pixil.info 2010 eckenruiz@gmail.com (Pixil.info) eckenruiz@gmail.com (Pixil.info) posts 1440 howto, productivity, workflow, design, development, photoshop, web, php, tutorials, reviews The Production Workflow Podcast Wersquo;re a group of passionate designers just like you. Wersquo;d like to share our ideas, thoughts, and techniques with you. Check out our tutorials videos on design, development and workflows. Pixil.info Pixil.info eckenruiz@gmail.com No clean http://pixil.info/wp-content/themes/pixil_new/images/podcast144.jpg http://pixil.info 144 144 http://pixil.info/tutorials/advanced-lighting-effects-in-flash/ http://pixil.info/tutorials/advanced-lighting-effects-in-flash/#comments Tue, 26 Jan 2010 04:19:10 +0000 admin http://pixil.info/?p=231

Episode 20

Natalia from Animacat.net shows us how to make a pretty simple special effect technique in flash.

]]> http://pixil.info/tutorials/advanced-lighting-effects-in-flash/feed/ 0 00:01:01 Episode 20 Watch Video Play NowHD Streaming Video YouTubeiPhone Video Coming up on today's episode: Advanced Lighting Effects in Flash Natalia from animacat.net shows us how she creates advanced lighting effects ... Episode 20 Watch Video Play NowHD Streaming Video YouTubeiPhone Video Coming up on today's episode: Advanced Lighting Effects in Flash Natalia from animacat.net 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. 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. 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. 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! 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. Now lets test out the scene. And there you have it, a pretty simple special effect technique in flash! Flash,,Tutorials Pixil.info clean No http://pixil.info/tutorials/animating-with-actionscript-2/ http://pixil.info/tutorials/animating-with-actionscript-2/#comments Wed, 28 Jan 2009 23:15:07 +0000 PixilStaff http://pixil.info/?p=133

Episode 16

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.

]]> http://pixil.info/tutorials/animating-with-actionscript-2/feed/ 0 00:01:01 Episode 16 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files Coming up on today's epsiode: Find out how to make simple animations in Flash CS4 using Action Script 2. Right off ... Episode 16 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files Coming up on today's epsiode: Find out how to make simple animations in Flash CS4 using Action Script 2. 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. On layer one, grab the oval tool make sure that you donrsquo;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. 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 doesnrsquo;t matter. Itrsquo;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.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 "import mx.transitions.Tween; import mx.transitions.easing.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.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. The object that you are wanting to target What property you want to effect. Tween type and easing type. Starting location or starting percentage Ending location or ending percentage Duration True if you want the duration to last in seconds or False if you want the duration to last in frame 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, donrsquo;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 didnrsquo;t turn blue then you spelled something wrong, this part is very case sensitive.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.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. Donrsquo;t forget to grab my cheat sheets and source file at Jermbo.com Flash,,Tutorials Pixil.info clean No http://pixil.info/downloads/create-3d-box-in-flash-cs4/ http://pixil.info/downloads/create-3d-box-in-flash-cs4/#comments Thu, 08 Jan 2009 18:26:07 +0000 PixilStaff http://pixil.info/?p=115

Episode 14

How to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.

]]> http://pixil.info/downloads/create-3d-box-in-flash-cs4/feed/ 7 00:01:01 Episode 14 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files 3D Box Flash CS4Ecken's Tutorial Coming up on today's epsiode: How to create a 3D Box and animate it using the ... Episode 14 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files 3D Box Flash CS4Ecken's Tutorial Coming up on today's epsiode: How to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4. Step 1: Create a square shape 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. 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. Step 2: Position #38; Convert into a Movie Clip Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol... 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'll be setting up the 3D layers. Step 3: Duplicate Layers for Each Box Side 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. Step 4: Rotate Each Side 90#186; #38; Position in Place 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. Now we'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. Now lets repeat this process for the bottom layer. But this time we'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't forget to move it to the right side instead of the left! Step 5: Test 3D Box Rotation 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? Step 6: Add Drop Shadow 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. Step 7: Animate 3D Box Rotating 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.Test out the animation by pressing cmd+renturn (cntrl+return on PC). Downloads,,Flash,,Tutorials Pixil.info clean No