Creating realistic lightning in Photoshop

In this video tutorial, Photoshop expert Deke McClelland teaches you how to make this pretty cool lightning effect, which looks pretty realistic in my opinion. This video is from an ongoing series called Deke's Techniques from Lynda.com, which contains lots of excellent Photoshop and Illustrator tutorials. Sign up for a free 7-day trial, and check it out.

Blender 2.6 Video Tutorials for Beginners

Blender is a free and open-source 3D computer graphics application packed with great features comparable to high-end proprietary 3D applications. It's used by many professionals to create 3D animation and components for films and games. If you want to start learning how to use this application, I recommend that you take a look at Blender 2.6 Essential Training from lynda.com. This training course for beginners covers what you need to know in order to start making your own 3D projects using Blender. I've posted a few videos from the course below so that you can get a better idea of what the course is about. More information can be found at the course details page. And as an added bonus, you can access the entire course for free with this free 7-day trial pass.

Flash AS3 Tween Events

In this tutorial, we'll take a look at how to work with events related to the Flash AS3 Tween class. We'll first take a look at the AS3 tween event known as MOTION_FINISH. This event allows us to write some code that will respond when the tween animation is finished. Let's say you wanted a song to play, or an image to load when the tween finishes, then you can use this event to make that happen.

Step 1

Use the oval tool to draw a circle, and convert it into a movie clip symbol. Then place two instances of this symbol on the stage. Name them circle1_mc and circle2_mc.

Step 2

Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.

Step 3

Add the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

The first 2 lines import the necessary classes that will make our tween work.

The 2 lines after that will position the circles so that circle1_mc is above circle2_mc.

The last 2 lines create the tween objects that will animate each circle. The first one is named c1TweenX and animates circle1_mc, the second one is named c2TweenX and animates circle2_mc. They both create a similar animation, but circle1_mc has a duration of 3 seconds, while circle2_mc has a duration of 6 seconds.

Test the movie to preview the animation. You should see both circles move from the left to the right.

Step 4

In this next step, we'll import the TweenEvent class so that we can create TweenEvent handlers. Add the line in bold found below:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

Step 5

Now that we've imported the TweenEvent class, let's create an event listener function that will get called every time one of our tweens finishes. Let's name this function onMotionFinish. When this function gets called, let's tell Flash to trace the phrase "motion is finished".

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace("motion is finished");
}

Step 6

Next, we need to register the event listener function to the tween objects so that the function will get called when a tween finishes. The event we want to specify is TweenEvent.MOTION_FINISH. This event gets announced whenever a tween finishes. When creating TweenEvent handlers, the event listener functions are added to the tween objects. So lets use the addEventListener() method to register the onMotionFinish event listener function to both of our tween objects (c1TweenX and c2TweenX).

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace("motion is finished");
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

Step 7

Next, let's modify the trace statement in the event listener function so that it will also indicate which movie clip has just finished tweening. In the trace statement, add e.target.obj.name

e.target refers to the tween object (either c1TweenX or c2TweenX). Adding obj.name identifies the name of the object being tweened (either circle1_mc or circle2_mc).

Look at the code below to see the updated trace statement:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

Step 8

Now, let's test the movie. Pay attention to the moving circles and the output window. You'll see the message in our trace statement come out every time one of the tweens finishes. Since c1TweenX has a shorter duration, you'll see the message "circle1_mc motion is finished" come out first, followed by "circle2_mc motion is finished".

Step 9

In this next step, we'll make the tweens start again each time it finishes.

In the event listener function, add e.target.start(); right after the trace statement.

The start() method of the Tween class will make the tween start from the beginning again. So since we are putting the call to the start() method inside the MOTION_FINISH event listener function, our tweens will start again each time they finish.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
     e.target.start();
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

So now, our tweens will just keep repeating.

Step 10

In this next step, let's change the start() method to the yoyo() method. The yoyo() method of the Tween class creates a looping effect as well. The difference is that it will alternately play the animation in reverse, just like how a yoyo toy goes down then up then down then up, and so on... So in the case of our animation, you'll see the circles yoyo back and forth from left to right and right to left.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
     e.target.yoyo();
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

So here, you've seen a demonstration of how a MOTION_FINISH event handler for Tween objects work. You can use it to tell Flash to do something whenever a tween object finishes an animation.

There are a few more events in the TweenEvent class. I've listed them below with short descriptions included.

List of events in the TweenEvent Class

MOTION_CHANGE
As the tween animates, this event will constantly get dispatched. It gets triggered each time the position, size, rotation, or alpha level of the object being tweened changes.

MOTION_FINISH
Dispatched when a tween finishes.

MOTION_LOOP
Dispatched when the tween starts playing again when in looping mode. The loop property of the Tween object must be set to true in order for this event to get dispatched.

MOTION_RESUME
Dispatched when a call to the resume() method of the Tween class has been made.

MOTION_START
Dispatched when a call to the start() method of the Tween class has been made.

MOTION_STOP
Dispatched when a call to the stop() method of the Tween class has been made.

And that concludes this tutorial on Flash AS3 Tween events.

The Flash AS3 Tween Class

In this tutorial, we're going to learn how to use the Flash AS3 Tween Class. The tween class lets you create tween animation using code.

Step 1

Let's first create a movie clip that we will use with our ActionScript 3 tween.

Draw a small circle and convert it into a movie clip symbol. Don't forget to give this circle an instance name. Let's name it circle_mc.

Step 2

Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.

Step 3

We first need to import the Flash AS3 Tween class so that we will be able to use it. On the first line, type:

import fl.transitions.Tween;

Aside from the tween class, we also need to import the easing classes. So in the next line, type:

import fl.transitions.easing.*;

The easing classes allow us to specify different kinds of tween effects. There are 6 easing classes in the AS3 easing package. These are:

• Back
• Bounce
• Elastic
• None
• Regular
• Strong

Each easing type will apply a different effect to your tween animation.

And now that we've imported the necessary classes, let's create a tween using code.

Step 4

To create an AS3 tween object, type new Tween() and assign in to a variable. Let's name this tween tweenX. After the import statements, type:

var tweenX:Tween = new Tween();

This creates a new tween object named tweenX. Let's use this tween object to make our circle on the stage move from the left to the right. To do that, we'll need to pass a few arguments to the Tween() constructor.

The Tween() constructor needs 7 arguments. First, we need to specify the object that we want to tween. In this case, that would be circle_mc. So type in circle_mc inside the parentheses of the Tween() constructor.

var tweenX:Tween = new Tween(circle_mc);

After that, we need to specify the name of the property of the object that we would like to tween. If you wanted to create a fading animation, then you can specify the alpha property. If you wanted to create a scaling animation then you can specify the width, height, scaleX or scaleY properties. But since we want to make the circle move horizontally, then we can use the x property. So let's pass that to the Tween() constructor as well:

var tweenX:Tween = new Tween(circle_mc, "x");

The property name is a string so it should be in quotation marks.

The third argument we need to pass is the easing type that we want to use. The easing type will apply an effect to the movement in the tween. Let's try using Bounce.easeOut for this tween. This will create a bouncing effect when the circle reaches the end of the animation.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut);

The fourth argument we need to pass is for the starting value of the object's property that we are tweening. So since we are using the x property, this next argument that we pass will be for the starting x position of the circle. Let's specify a value of 100.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100);

So when the tween starts, circle_mc will have a starting x position of 100.

The fifth argument we need to pass is for the ending value of the object's property. Let's specify a value of 400.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400);

So this means that at the end of the tween, our circle will be positioned at x = 400.

The sixth argument we need to pass is for the duration of the tween. You can specify the duration in frames or in seconds. Let's specify a duration of 3 seconds.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3);

The seventh and last argument we need to specify is a boolean - true or false. If we specify true, then this means that the duration will be in seconds. If we specify false, then the duration will be in frames. Since we want our tween to play over a period of 3 seconds, then we should specify a value of true.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);

And now our tween is complete. Test the movie to preview the animation.

Step 5

Here is a list of all the other easing functions that you can use. Try them out to see how they look like. Simply replace the third argument in the Tween() constructor with a new easing function of your choice.

Back	Bounce	Elastic
Back.easeIn Back.easeOut Back.easeInOut	Bounce.easeIn Bounce.easeOut Bounce.easeInOut	Elastic.easeIn Elastic.easeOut Elastic.easeInOut
None	Regular	Strong
None.easeNone	Regular.easeIn Regular.easeOut Regular.easeInOut	Strong.easeIn Strong.easeOut Strong.easeInOut

Step 6

If you want to tween other movie clips, then you'll have to create new tween objects for each movie clip that you want to tween. Even if you want to tween different properties of the same movie clip instance, you'll still need new tween objects for each. So if we also wanted to tween the scaleX and scaleY properties of circle_mc, then we'll need to create two more tween objects for each property.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);
var tweenScaleX:Tween = new Tween(circle_mc, "scaleX", Bounce.easeOut, 1, 2, 3, true);
var tweenScaleY:Tween = new Tween(circle_mc, "scaleY", Bounce.easeOut, 1, 2, 3, true);

Here, aside from moving horizontally, the circle will also grow. We're starting out with a scaleX and scaleY of 1, and moving up to a value of 2 within 3 seconds. This means that the circle will grow from 100% to 200% both horizontally and vertically within that period.

We don't need to use the same easing functions, starting values, ending values, and durations for all our tweens. Try playing around with different values, and see what you can come up with.

And that concludes this Flash AS3 Tween Class tutorial.

How to use ActionScript 3 to create a new movie clip instance from the library and then add it to the stage

In this tutorial, we'll learn how to use ActionScript 3 to create an instance of a movie clip symbol that's inside the library. This is useful if you want to create any type of functionality where you'll need to generate instances at runtime. For example, you could create a game that generates enemies at random. You could create a movie clip symbol of the game enemy, keep it in the library, and use ActionScript to create instances of the enemy symbol at random intervals.

Let's begin.

Step 1

Let's start by drawing a shape that we will convert into a movie clip symbol.

Select the oval tool and then use it to draw a circle.

Step 2

Select the entire circle, right click on it, and choose Convert to Symbol. When the Convert to Symbol dialog box comes up, don't click OK just yet. Continue reading to step 3.

Step 3

Name it Circle. Choose Movie Clip as the type. And for the registration point, choose the center.

In the advanced settings, check Export for ActionScript and Export in frame 1. This will enable us to access the symbol using ActionScript, so make sure that you check these options.

For the class name, let's name it Circle. This class name is what we will use every time we want to create an instance of our symbol. This is case sensitive. For the base class, it should say flash.display.MovieClip. Don't change this. If you do, then our symbol will lose all the properties and methods available to a MovieClip object.

Then click OK. If you see a message that says "A definition for this class could not be found in the classpath, so one will automatically be generated in the SWF file upon export.", then click OK as well.

Our symbol should now be accessible using ActionScript 3.

Step 4

Delete the instance of the Circle symbol that's on the stage. We'll now use ActionScript to add one instead.

Step 5

Select frame 1 on the timeline, and choose Window > Actions to bring up the Actions panel.

Step 6

Let's create a new instance of the symbol in our library. The class name that we gave the symbol is Circle. The constructor must match the class name that we specified, so we must use new Circle() in order to create a new instance of the movie clip symbol in our library.

When we create a new instance, it should also have an instance name. Let's name this instance circle1. So in the Actions panel, type:

var circle1:Circle = new Circle();

This will create a new instance of the Circle symbol. But if we test the movie, we won't be able to see it on the stage just yet. That's because we have yet to add it to the display stack. So after the first line, add:

addChild(circle1);

This will add the instance to the display stack so that it can be seen. Test the movie, and you should see the circle on the upper left corner of the stage.

Step 7

If you want to move the instance to a new location, you can use the x and y properties to assign new coordinates. For example:

circle1.x = 250;
circle1.y = 300;

This will move the instance to these new coordinates.

Step 8

We can create more instances by repeating step 6. Add two more instances. Let's name them circle2 and circle3. Then don't forget to add them to the display stack, and change their x and y coordinates.

var circle1:Circle = new Circle();
var circle2:Circle = new Circle();
var circle3:Circle = new Circle();

addChild(circle1);
addChild(circle2);
addChild(circle3);

circle1.x = 250;
circle1.y = 300;
circle2.x = 100;
circle2.y = 200;
circle3.x = 400;
circle3.y = 75;

Then test the movie to see all of the new instances.