Year-End Deals on Digital Video Games (2012) at Amazon

For those of you who are into video games, check out Amazon's Year-End Deals on Digital Video Games.

Check back every day between now and January 5, 2013 for new digital games deals.

Learning Photoshop - Tutorials for Beginners

Hello, and welcome to my page - Learning Photoshop - Tutorials for Beginners. If you're new to Photoshop, then this is a good place to start. Here, you'll find a collection of the different Photoshop tutorials I've made to help you get started with this amazing piece of software. So let's go ahead and start learning Photoshop!

Topic 1: Using the Brush Tool
In this lesson, we'll learn how to use the Brush tool so you can start creating your own digital paintings in Photoshop.

Topic 2: Working with Layers in Photoshop
Layers are one of Photoshop's most basic yet useful features. They allow you to make your Photoshop project more organized, and make editing much more efficient. Learning how to work with layers is one of the first things that every Photoshop beginner should start with.

Topic 3: The Rectangular and Elliptical Marquee Tools
In this lesson, we'll get introduced to the rectangular and elliptical marquee tools in Photoshop. These are selection tools. They allow you to select portions of your Photoshop document so that you can isolate those areas and edit them - you can paint over them, apply filters, transfer/move/extract those areas, etc. - without affecting the other areas outside of the selection.

Topic 4: The Free Transform / Transform Commands
The free transform / transform commands allow you to apply transformation changes to the contents of a layer. These transformation changes include scaling, rotation, skewing, flipping, etc...

Topic 5: Transferring Images to a New Photoshop Document
In this quick video tutorial, I'll show you how to transfer multiple images into one Photoshop document. This is useful if you want to combine different images together in your Photoshop project.

Topic 6: Copying a Portion of One Layer and Pasting it onto Another Layer in Photoshop
Watch this quick video tutorial to learn how to copy just a portion of one layer and paste it into another layer in your Photoshop document.

Topic 7: Creating a Layer Mask in Photoshop
Learn how to create a Photoshop layer mask in this video tutorial. Layer masking is a great feature in Photoshop that lets you hide portions of a layer by making them transparent.

Topic 8: Creating a Clipping Mask in Photoshop
Just like layer masks, clipping masks allow you to hide portions of a layer. Watch this video to learn how to create clipping masks in Photoshop.

Topic 9: Color Correction and Photo Retouching in Photoshop
Photoshop has some great tools and features that allow you to color correct and retouch your photographs. You can remove stains and blemishes, adjust brightness and colors, make skin smoother, and more. The videos in this topic will show you just a few of the color correction and photo retouching magic that Photoshop is capable of.

Thank you for visiting this Learning Photoshop - Tutorials for Beginners page. I hope you were able to learn a few things. I will be updating this page whenever I have new tutorials, links, or videos that I would like to share so please check back with us again in the future by visiting this page.

Photoshop Clipping Mask Tutorial (CS5)

If you know how layer masks work, then you'll understand how clipping masks work as well. Just like a layer mask, a clipping mask allows you to hide portions of a layer. The difference is that a layer mask is a part of the actual layer that you want to mask, while a clipping mask is a separate layer that is used to mask another layer. Another difference is that a layer mask only applies to one layer, while a clipping mask can be used to mask multiple layers.

To learn more about clipping masks, watch this Photoshop clipping mask tutorial:

Photoshop Clipping Mask Tutorial

Creating a Layer Mask - Photoshop Tutorial (CS5)

A layer mask is a great feature in Photoshop that lets you hide portions of a layer. Let's say that you want to remove some parts of your image - such as the background, for example. Instead of using the eraser tool to erase the background, you can use a layer mask instead. The great thing about a layer mask is that you can edit the layer mask if you make a mistake. For example, if you end up removing a part of your image that you actually don't want to remove, then you can simply edit the layer mask to bring those parts back. If you make a mistake using the eraser tool, then you can either hit the undo command or start all over again. So the layer mask is a much better option because of its editable feature. To learn more about the layer mask feature in Photoshop, watch this layer mask Photoshop tutorial:

Creating a Layer Mask - Photoshop Tutorial

AS3 Countdown Timer - Creating a Simple Countdown Timer in Flash Using ActionScript 3

In this tutorial, we'll learn how to create a very simple AS3 countdown timer in Flash.

Step 1
Create a new Flash ActionScript 3 document. Select the text tool once your document opens up.

Step 2
Go to the Properties Inspector and choose the following options:

• Text field type: Classic - Dynamic Text
  
  
• For the font family, you can choose either _sans, _serif, or _typewriter
  
  
• Anti-alias: Use device fonts
  
  
• For the text color, make sure that it's different from the background color of your stage
• You can choose whatever font size that you want

Step 3
Then click on the stage to add the text field. Make sure that the text field is big enough for whatever font size you chose.

Step 4
Make sure that your text field is selected, then go back to the Properties Inspector and give it an instance name. Let's name this timer_txt.

Step 5
Create a new layer for the actions, then select the first keyframe of this new layer, and open up the Actions panel.





Step 6
In the script pane of the Actions panel, create a number variable. Let's initialize it with a value of 10.

var nCount:Number = 10;

This will be our countdown number. We will be subtracting 1 from this number every 1 second in order to create the countdown effect.

Step 7
Assign the nCount variable to the text property of the timer_txt text field.

var nCount:Number = 10;

timer_txt.text = nCount.toString();

This will display the number in the text field. We have to use the toString() method so that the number gets converted into a string. It needs to be converted into a string so that it can be displayed as text.

Step 8
Test your movie. You should see the number displayed in the text field.

Step 9
Go back to the code, and this time, create a Timer object with a delay of 1000. And for the repeatCount parameter, let's pass the nCount variable. The delay is the first value we pass to the Timer() constructor. The repeatCount is the second value that we pass.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

This creates a new Timer object named myTimer with a delay of 1000. The 1000 stands for 1000 milliseconds. This means that the timer will count every 1000 milliseconds (or 1 second). For the repeatCount, it's going to have the same value as the initial value of nCount. Since our nCount variable has a value of 10 when we pass it to the repeatCount parameter, then repeatCount will also be 10. This means that our timer will count 10 times and then stop.

Step 10
Now let's create an event listener function for the TimerEvent.TIMER event. This event gets dispatched at a rate that depends on the delay that was specified. Since we specified a delay of 1000 milliseconds, then this means that the event listener function will get called every 1 second. Let's name this event listener function as countdown.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{

}

Step 11
In the event listener function, we want to subtract nCount by 1 so that each time the function gets called, nCount will decrease. And then we'll display the new value in the timer_txt text field again so that it gets updated.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Don't test the movie just yet. We still need to add one more line of code.

Step 12
Lastly, let's make sure that we start the timer using the start() method of the Timer class. If we don't start the timer, then we won't see anything happen.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();
myTimer.start();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Step 13
Test the movie. You should now have a working countdown timer.

Properties and Methods in ActionScript 3

In the previous lesson, we learned about what classes and objects are. In this lesson, we'll be learning about properties and methods. Properties and methods are things that classes have. For example, here are some of the properties and methods available to the MovieClip class:

MovieClip Class
Properties	Methods
width height	play() stop()

These are just a few of the properties and methods that belong to the MovieClip class, and by extension, these properties and methods are available to all MovieClip objects.

To begin our understanding of properties and methods, it's important to think of objects in programming as being similar to real objects - things around us that we can see and touch, like a teacup, a book, a shoe or a ball. These objects have characteristics - small, large, colorful, etc... For example, a teacup can be small, a dress can be colorful, a pillow can be soft. These objects can also do things - a ball can bounce, a wheel can turn, and a phone can ring. So real objects have characteristics, and real objects can do things.

In programming, even though we can't actually touch these objects, they have characteristics and they can do things as well. These characteristics of programming objects are referred to as properties, while things that objects can do are referred to as methods.

Let's go back to the MovieClip class list of properties and methods posted above. In the left column of the list above, we see that MovieClip objects have the width and height properties. These properties define how wide and how high a specific MovieClip object is. The width and the height of a MovieClip object can be seen as characteristics, because they describe the appearance of a MovieClip. To use an analogy, properties are like adjectives - they describe objects.

In the right column of the list above, we find some of the methods of the MovieClip class - play() and stop(). Methods are basically the tasks that objects can perform. For MovieClip objects, when you talk about the play() method, this refers to the MovieClip playing the animation in its timeline. The stop() method refers to when the MovieClip stops the animation. To use an analogy, if properties are like adjectives, then methods are like verbs - they refer to the actions that objects can do. You'll also notice that methods end in parentheses. Properties do not.

How do we access the properties and methods of an object?
To access the properties and methods of an object, you type in the name of the object, followed by a dot, followed by the property or method that you want to access. This is called dot syntax, because we use dots.

Let's say you have a MovieClip object named square_mc. To access the width property, you would type this:

square_mc.width = 200;

Here, we are accessing the width of the square_mc MovieClip, and we are assigning to it a value of 200. This will make the square_mc object 200 pixels wide.

In some instances, you might just want to retrieve the value of a specific property. In the previous example, we accessed the width property and assigned a new value to it. In this next example, we'll just retrieve the value of the width property, and then compare it to another value. We won't be changing the value whatsoever:

if(square_mc.width >= 200)

{

// do something

}

Here, we have an if statement where Flash is just going to retrieve whatever the current value of the width property of square_mc is, and then compare if it's greater than or equal to 200.

So in some instances, we might want access a property and assign a new value to it. In other instances, we might just want to retrieve a property's current value.

NOTE: Not all properties can be assigned values through code. Properties that cannot be assigned values through code are called read-only properties. You can only check for their current values, NOT assign them with new ones. For example, there is a property of the MovieClip class known as the currentFrame property. The currentFrame property of the MovieClip class tells you the current frame of the MovieClip object that the playhead is on. You won't be able to assign a value to this property. The value that it's going to have, is always just dependent on the movement of the playhead within the MovieClip object's timeline.

In this next example, we're accessing the stop() method. Here, we are telling the square_mc MovieClip to stop playing:

square_mc.stop();

Provided that the square_mc MovieClip has some animation in its timeline, then this line will cause that animation to stop.

In some cases, some methods need some extra information. You can pass this extra information by placing it inside the parentheses of the method. For example, the MovieClip class has a method called gotoAndStop(). This method tells the MovieClip to move to a specific frame within its timeline and then stop right there. So when you try to use the gotoAndStop() method, you don't just call the method, you have to give it some extra information. For the gotoAndStop() method, you also have to say which frame number to go to, because you could go to frame 5 or frame 12 or whatever other frame you want. How is Flash going to know unless you specify which frame to go to? So you need to pass that information by putting it inside the parentheses of the method. So let's say we wanted the square_mc MovieClip to go to frame no. 2 of its timeline and stop there, then we would type:

square_mc.gotoAndStop(2);

This will instruct the MovieClip to go to the 2nd frame in its timeline and stop.

And those are just a few examples of properties and methods in ActionScript 3. To recap:

• properties are like adjectives - they describe the object
• methods are like verbs - they are the actions that an object can do
• methods end in parentheses, properties do not
• you can access the properties and methods of an object using dot syntax
• some properties are read-only - you cannot assign values to them using code
• some methods require added information, which you pass to the method by typing the needed information inside the method's parentheses

Classes and Objects in ActionScript 3

In this lesson, I'll be explaining what classes and objects are. We'll be understanding these terms within the context of ActionScript, but classes and objects really are concepts that are part of most programming languages. So the general idea of what you'll learn here, can apply to other programming languages as well.

What is a class?
In programming, a class is a set of instructions that's used to build objects.

So from classes, we can create objects.

In some sense, a class is kind of like a factory. Factories are where products are built. A car factory produces cars, a toilet factory produces toilets, and so on.

Similarly, classes are used to produce objects.

Here are just some examples of ActionScript 3 classes:
MovieClip class
Sound class
TextField class

So from the MovieClip class, we can create MovieClip objects. From the Sound class, we can create Sound objects, and so on.

But what exactly are these objects then?
In programming, these objects are the different elements that make up the parts of the application that you're building. In the same way that a car has different parts - an engine, a steering wheel, doors - applications are also made up of different parts. These parts are referred to as objects, and these objects are needed in order for your application to do what it's supposed to do.

When you're building an interactive Flash movie, for example, Sound objects are used so that your application can play audio. TextField objects are used so that your Flash movie can display text. And MovieClip objects are used so that you can add some animation. Each type of object has a specific role. Sound objects are for sound. And TextField objects are for text. You can't use a Sound object to display text, and you can't use a TextField object to play sound.

All these objects are important, and you'll need to create these different objects depending on what your application needs to do. A car without an engine would not run properly, in the same way that a Flash music player application, for example, won't run properly if it doesn't have any Sound objects.

So how do you create these objects using ActionScript 3?
In ActionScript 3, you can create objects by using the new keyword, followed by the class constructor. The class constructor is a special function that "constructs" or creates an object. The constructor function uses the same name as the class. So for example, the constructor function of the MovieClip class would be MovieClip(). The constructor function of the Sound class would be Sound(). So whatever the name of the class is the name of the constructor function as well.

So if we wanted to create a new TextField object:

new TextField();

Creating an object is referred to as creating an instance of the class. So in the example above, we just created an instance of the TextField class. But this is still incomplete. This instance must have a name. In most cases, we shouldn't have a nameless TextfField object. What if we had 10 of those? Then it would be terribly confusing to distinguish which one is which. Our objects need to have names so that we can effectively communicate with them and give them instructions through code.

So how do we give it a name then?
We can give our instance a name by assigning it to a variable, like so:

var myTextField:TextField = new TextField();

Using the var keyword, we begin the variable declaration. It is then followed by the author-defined variable name that we want to give the instance. So in this example, the variable name is myTextField. We then follow it up with the data type. In this example, the data type is TextField. The data type you use would be whatever the class name is.

So the syntax for creating an object would be:

var variableName:DataType = new ClassConstructor();

In the example below, 4 new objects have been created:

We won't go into detail as to how these objects can be used. For now, I just want you to know how to create them. In future lessons, we'll be taking a look at some of the the most commonly-used ActionScript 3 classes in more detail.

Symbol instances are also objects
Did you know that when you convert something into a button or movie clip symbol that you're actually creating an object as well? Yes! In Flash, buttons are actually instances of a class called the SimpleButton class, while movie clips are instances of the MoveClip class. This would be referred to as creating symbols at authoring time, because we create the symbols while we are "authoring" or making the Flash movie. If you create an object using code, then that would be referred to as creating an object at runtime, because the object gets created only when the Flash movie itself starts running.

DISTANCE LEARNING - CS175 A - SEM 01 SY 2012-13

July 24, 2012
Today, we'll start with Adobe Premiere Pro CS5. This is Adobe's popular video editing software.

Video editing is the process of making changes to a single video clip or multiple video clips. This could be something as simple as shortening the length of a video clip, or this could be a more complex project that involves combining multiple video clips together, and adding other things such as sound, pictures, and titles.

Download the following video files so that you have clips to work with when you start doing the learning activities:

Windows users: dog01.wmv | dog02.wmv | dog03.wmv | dog04.wmv

Mac users: dog01.mp4 | dog02.mp4 | dog03.mp4 | dog04.mp4

Let's start off with this first video where I talk about how to create a new premiere pro project.

NOTE: If you find that the windows and panels in your Premiere Pro workspace are all messed up, you can reset it by choosing Window > Workspace > Reset Current Workspace. The workspace layout I'm using in the video tutorial is the Editing layout.

After you've watched the first video, let's move on to the next topic...

Once you have a Premiere Pro project, you can start importing the media files that you want to edit. These media files are the video, audio, image, and title clips that you want to use for your project. Watch this video to learn how to import files in Premiere Pro - Importing Files in Adobe Premiere Pro CS5.

After importing the files into your project, watch this quick video to learn how to preview your clips - Previewing Clips in Adobe Premiere Pro CS5.

And now that you have clips in your project that you can work with, let's learn about the timeline. The timeline is the part of the video editing software where you do the actual editing work. This is where you go to put clips together and to make adjustments to them. In this next video, we'll learn a little bit about the timeline -  An Introduction to the Adobe Premiere Pro CS5 Timeline.

July 26, 2012
In the previous session, you were introduced to the timeline. You've learned that the timeline is made up of multiple audio and video tracks. If you're wondering why we would need more than one audio and video track, watch this short video to see some examples: What are multiple audio and video tracks for?

Next, we'll learn how to add some video transitions and effects:

• Adding Video Transitions
  A transition refers to the movement of the playhead from one clip to the next clip in the sequence. This video shows you how to add animated transitions to your clips. One example of an animated video transition is the cross dissolve. In a cross dissolve transition, the first clip gradually fades out, while the succeeding clip begins to fade in.
• Adding Video Effects
Video effects are another creative tool that can help make your videos more interesting. Learn how to add video effects in Adobe Premiere Pro CS5 by watching this video.
• The Effect Controls Window
  The effect controls window allows you to change the properties of clips, as well as the properties of the effects and transitions that are applied to a clip. If you are unable to find the effect controls window, go to the menu bar and choose Window > Effect Controls.
• Transforming Video Clips
  You can go to the effect controls window to change the properties of a clip such as the size, rotation, and position.
• Creating a Picture in Picture (PiP) Effect
  This video shows you how to create a basic picture in picture effect.

July 31, 2012
Hi, everyone! For today's lesson, we'll start by discussing the concept of keyframing. Keyframing is a process that allows you to animate the effects that you apply to your clips. For example, if you wanted to make your clip move from one side of the screen to the other, then you can use keyframes to make that happen. Watch this introductory video to give you an idea of what keyframes can do. You'll see a few simple examples on the applications of keyframing - Introduction to Keyframing.

Once you've watched the video, you can now move on to learning how to apply keyframes to a video clip - Keyframing in Adobe Premiere Pro CS5.

Next, we move on to titles. Titles allow you to add text and shapes to your video project. Watch this video to learn how - Creating Titles in Adobe Premiere Pro CS5.

Here's another video about titles. This one teaches you how to create a rolling title. A rolling title is a title whose contents scroll vertically (similar to standard movie ending credits). Here's the link to the video - Rolling Titles in Adobe Premiere Pro CS5.

In this next student guide, we'll create a title clip and then animate it using keyframes:
Keyframing the Rotation Property PART 1
Keyframing the Rotation Property PART 2
Keyframing the Rotation Property PART 3


Aug 14, 2012
You can import audio files into your Premiere Pro project as well. There are many different ways that you can use audio to improve your video project. You can add background music, sound effects, and voice-over narration.

Importing audio clips follows the same process used in importing video clips. Go to File > Import, and then choose the audio files that you'd like to bring in to your project. Once imported, you'll see the clips inside the project window together with the video clips that you've already imported.

To add audio clips to the timeline, just click and drag them from the project window down to any of the available audio tracks. If you want to mix different audio clips together, then you can place them on separate audio tracks. For example, you can have background music that plays simultaneously with some voice-over narration. To do this, you would place the background music clip on one audio track, and then then the voice-over narration audio clip will be on another audio track either above or below it. With audio clips, it doesn't really matter which clip is on a higher or lower audio track since we can't see audio anyway.

To learn how to adjust the volume of an audio clip, watch this video - Adjusting a clip's volume.

In this next video, I show you how to unlink audio and video clips that are attached to each other in the timeline. When you shoot some video footage, most cameras will have microphones that will record the audio during the scene as well. And when you transfer that footage onto your computer, the audio and video are usually linked to each other. When you bring these clips down to the timeline, they'll be attached to each other. The video goes onto the video track, while the audio goes onto the audio track. They're on separate tracks, but they're still attached to each other. When you reposition the video clip, the audio moves along with it. In some cases you might want to unlink them so that you can work on them separately in the timeline. Watch this video to learn how - Unlinking audio and video.

Aug 16, 2012
Keying refers to the process of removing the background of a video clip. This is usually done so that the background can be replaced with something else. Usually, footage for keying is shot in front of either a green or a blue background. These types of footage are referred to as green screen or blue screen footage. In this video, I show you how to remove a green screen background using the Ultra Key in Adobe Premiere Pro CS5.

Aug 23, 2012
Once you're done editing a video project, you'll want to convert it into a format that allows you to share your video more easily. You may want to upload it onto the web or save it onto a mobile device. What format you choose depends on how you want to share your video. This process of converting your video editing project into a specific video format is called exporting. Here's how you can export your video project in Adobe Premiere Pro CS5.

Sept 11, 2012
When you start a new premiere pro project, you'll be asked to create a sequence. When choosing the sequence settings, you should base it on the properties of the video files that you'll be working with. There are a couple of sequence presets to choose from - DV-NTSC, Digital SLR, HDV presets, etc... You also have the option to customize your own settings.

Choosing your sequence settings can get a bit confusing. So here's a video that talks about how to figure out which sequence settings to choose especially if you're not sure about the properties of the video clips that you'll be using for your editing project: http://youtu.be/53YDIzI9Rhg

DISTANCE LEARNING - CS179.11 A - SEM 01 SY 2012-13

July 24, 2012
Hi, everyone. So for this session, we will be starting with ActionScript. The learning resources below will teach you what ActionScript is, and how to add some ActionScript code to a Flash project - that's going to be what's covered in the video: What is ActionScript?

This next one is a text tutorial. You'll learn how to change the appearance of a move clip symbol using ActionScript code. Along the way, you'll learn a couple of key points:

• what instance names are and how to assign them to symbol instances
• what dot syntax is
• what properties are

Here is the link to the tutorial:
Assigning AS3 instance names and modifying some AS3 movie clip properties

July 26, 2012
We'll start off today by learning about ActionScript 3 variables. We'll begin with this video where I show an example of a variable being used. There's some code in this example that we won't be taking up until we move further into the semester, so don't worry if you don't understand those yet. What I just want to show you in this video is one example of a variable being used.

Here is the link to the video:
An example of a variable being used in ActionScript 3

After watching the video, read this 3 part student guide that explains what variables are and how to create them:

• PART 1: Creating ActionScript 3 Variables and Assigning Values to them
• PART 2: Variable Naming Rules and Conventions
• PART 3: Fun with Variables - Complete the Story

Our next topic is all about functions in ActionScript 3. Let's start off with this video that uses an analogy to try to explain what a function is: ActionScript 3 Functions - An Analogy

After watching that introductory video on functions, move on to the next resources:
Writing Functions
Adding Function Parameters
Creating Optional Parameters in AS3
Local and Global Variables in AS3

July 31, 2012
First, we'll learn about expressions and operators.

An expression is something that evaluates into a single value. For example, the expression 10 + 5 evaluates to a value of 15. The expression 10 - 5 evaluates to a value of 5.

Expressions are made up of operands and operators. In the expression 10 + 5, the operands are 10 and 5, while the operator is the plus sign (+). The operands are the values being manipulated, modified or analyzed in the expression. The operator dictates how these values are to be manipulated, modified or analyzed. For example, the plus operator (+) dictates that the operands will be added. The multiplication operator (*) dictates that the operands be multiplied.

Watch this video to see an example of expressions being used in ActionScript 3 - Expressions and Operators (Video Introduction). Then read this student guide that enumerates many of the different kinds of expressions and operators that can be used in ActionScript 3 - Expressions and Operators in ActionScript 3

Our next topic will be about if statements.

If statements allow you to write some code that will only be processed when certain conditions are met. In other words, simply writing the code doesn't guarantee that those lines will run. Certain conditions have to be met first before the code is executed. It's kind of like a stop light. If the light is green, then you have the go signal to move. If the light is red, then you stop. With if statements, if the condition is true (light is green), then execute the code. If the condition is false (light is red), then don't execute the code.

Here's an example:

if(score >= 75)
{
     trace("Congratulations! You passed.");
}

In this example, the trace statement will only run, if the condition is met(in other words, if the condition turns out to be TRUE). The condition specified here is whether the score is greater than or equal to 75. If it is, then go ahead and run the trace statement. If not, then don't do anything.

So in english, this example would basically translate to: IF the score is greater than or equal to 75, then say "Congratulations! You passed.".

Watch this video to learn all about if statements in ActionScript 3 - If Statements - Intro to ActionScript 3.

Then in this next tutorial, we'll learn about the this keyword - The AS3 this keyword and how to randomize the size of a MovieClip instance on the stage.

Lastly, we'll learn all about ActionScript 3 event handling. This part is very important, so please pay extra attention to this part. Also, make sure that you've already read the tutorial on Assigning AS3 instance names and modifying some AS3 movie clip properties and the tutorials on functions before you start reading this. Those tutorials are from some of the previous sessions.

Again, this is very important so make sure you spend some time on this.

Here are the links to the student guide on ActionScript 3 event handling:
Part 1: Introduction to AS3 event handling
Part 2: How to create an AS3 event listener
Part 3: The AS3 event object

We also have an activity on this, so please log on to our moodle page and look for the activity called Simple Button Events.

August 9, 2012
Here are the students guides for today's session:
Classes and Object in ActionScript 3
Properties and Methods in ActionScript 3


August 14, 2012

Topics for today are:

• the AS3 Timer class
• the ENTER_FRAME event

We'll start with the Timer class. Here are the learning activities:
Introduction to the Flash ActionScript 3.0 Timer Class
Creating a Simple Countdown Timer in Flash Using ActionScript 3

Up next is the ENTER_FRAME event.

In our introductory lesson on event handling, we used mouse events as examples. Recall the MouseEvent.CLICK event - this event occurs whenever you click on a button or movie clip (movie clips are also clickable). So here, the event is pretty obvious - when the user clicks, then the CLICK event occurs.

But with the ENTER_FRAME event, it isn't very obvious, because this event gets dispatched even though there seems to be nothing that's happening in the Flash movie. You can just be watching an empty Flash movie, and not clicking on anything or pressing any keyboard keys, but behind the scenes, the ENTER_FRAME event is happening. And not only that, the ENTER_FRAME event happens repeatedly at a constant rate. With a mouse click, the event only happens every time the user clicks on a button or movie clip. This doesn't happen at a steady rate. It's very arbitrary. It just depends on when the user decides to click on something, which we can't always predict.

As for the ENTER_FRAME event, this event gets dispatched at the same rate as the frame rate of your Flash movie. So if you have a frame rate of 30fps, then the ENTER_FRAME event gets dispatched 30 times every one second. And just to reiterate, it gets dispatched even if nothing is happening in the Flash movie. As long as the movie is open, then the ENTER_FRAME event gets dispatched. Nothing else has to happen. And the Flash movie can even be completely empty! Kinda weird, right?

Try this. Create a new ActionScript 3 document and add this code on the first keyframe:

this.addEventListener(Event.ENTER_FRAME, onEnter);

function onEnter(e:Event):void
{
 trace("Hello!");
}

When you test the movie, Flash will just keep displaying the "Hello!" message in the output window repeatedly. If you're frame rate is 24fps, then this means that Flash will say "Hello!" in the output window 24 times for every second that the movie is running. And it won't stop until you close the movie.

Now close the movie and then change your document's frame rate down to 1fps. Then test the movie again. You'll still see the message displayed repeatedly, but this time, it will be much slower. Since your frame rate is down to 1 frame per second, then this means that the ENTER_FRAME event listener function gets called only once per second.

Now close the movie, and don't forget to bring your frame rate back up. You can just set it to around 24 fps.

So when would I want to use an ENTER_FRAME event listener?
This event is useful if you want to create an event listener function that runs constantly. It really could be about anything. It could be a function that constantly updates a text field. It could be a function that contains an if statement so you could constantly check whether a certain condition is being met or not. It could be anything you need. As long as it's something that you want Flash to do repeatedly while the movie is running, then you might want to consider an ENTER_FRAME event listener as one of your options.

To give you a more concrete example, here is a video tutorial that makes use of the ENTER_FRAME event to create some code-driven animation. This is probably one of the most common uses for the ENTER_FRAME event. Instead of using tweens, the animation is done using code - Using the AS3 EnterFrame Event to
Create Animation in Flash.

August 28, 2012

Today's topic: working with text fields using ActionScript 3.

Here are the links to the student guides:

AS3 TextFields - The Basics
Working with AS3 Input Text Fields
Formatting Text in AS3
ActionScript 3 String to Number Conversion
ActionScript 3 Number to String Conversion
Enabling the User to Submit the Contents Inside an Input Text Field
[PART 1] Working with External Text in Flash ActionScript 3 - Loading the Text
[PART 2] Working with External Text in Flash ActionScript 3 - Formatting the Text
[PART 3] Working with External Text in Flash ActionScript 3 - Scrolling the Text

September 4, 2012

For this day's session, we will learn how to control sound using ActionScript 3. Here are the links to the student guides:

Student Guide: Introduction to Working with Sound in AS3
Student Guide: Playing Sound from the Library and Making a Sound Clip Loop in AS3
Student Guide: Pausing Sound in ActionScript 3.0
Student Guide: Creating a Simple Volume Bar in Flash
Student Guide: Adjusting Volume in ActionScript 3.0

September 18, 2012

This week's lessons are about Arrays and For Loops in ActionScript 3:

Arrays in ActionScript 3
For Loops in ActionScript 3
Creating a Simple Quiz in Flash Using AS3
Creating Multiple TextFields and Positioning Them Using Arrays and for Loops in Flash ActionScript 3.0
Retreiving the Index Value of an Item in an Array in Flash AS3

Photoshop CS5 Color Correction and Photo Retouching Video Tutorials Collection

Photoshop has some really awesome features that will allow you to color correct and retouch your photographs. You've got different healing tools that will let you remove stains, blemishes, and other unwanted objects. You also have adjustment layers that allow you to make changes to the color composition of an image. You can adjust brightness values, shadows, and color saturation to name a few.

Below, you will find some Photoshop CS5 color correction and photo retouching video tutorials that will demonstrate just some of the capabilities that Photoshop has to offer. These videos are excerpts from the following training courses, which you might be interested in viewing. Click on the links to learn more:

• Photoshop CS5: Creative Effects
• Photoshop CS5: Fashion Retouching Projects
• Photoshop for Photographers: Portrait Retouching

These training courses make up hours and hours of information that will teach you many of Photoshop's amazing color correction and photo retouching features. If you want to view these courses in full, you can sign up for a free 7-day trial to get complete access to all the videos in these training courses.

Here are some sample videos:

Correcting the small photographic details - Photoshop for Photographers: Portrait Retouching

Making structural improvements - Photoshop CS5: Fashion Retouching Projects

Correcting an overly backlit photograph - Photoshop CS5: Creative Effects

Creating an edgy muted and contrast look - Photoshop CS5: Creative Effects

Adding color without increasing contrast - Photoshop CS5: Creative Effects

Enhancing a photograph with HDR for black-and-white conversion - Photoshop CS5: Creative Effects

Applying soft focus to skin - Photoshop CS5: Creative Effects

If you enjoyed these Photoshop CS5 color correction and photo retouching video tutorials, then sign up for a free 7-day trial to get complete access to all the videos from these courses:

• Photoshop CS5: Creative Effects
• Photoshop CS5: Fashion Retouching Projects
• Photoshop for Photographers: Portrait Retouching

START LEARNING TODAY!

or

The Free Transform / Transform Commands - Photoshop CS5 Tutorial

The Free Transform / Transform commands let you make transformation changes to the contents of a layer. These changes include - scaling, rotating, skewing, and flipping.

STEP 1
To transform the contents of a layer, you must first select the layer in the Layers panel.

STEP 2
Then go the menu bar and choose Edit > Free Transform. This will bring up the Free Transform options in the Options bar.

STEP 3
To scale the width and/or height of the contents of the selected layer, type in the desired scale value in the horizontal and vertical scale input text fields.

A value beyond 100% makes the object bigger. A value below that makes the object smaller.

You can also change the rotation angle. A positive value rotates clockwise. A negative value rotates counter clockwise.

STEP 4
To apply the transformation changes, click on the Commit transform button.

STEP 5
To flip the contents of the selected layer, go to the menu bar and choose Edit > Transform. Then choose either Flip Horizontal or Flip Vertical.

The Rectangular and Elliptical Marquee Tools - Photoshop CS5 Tutorial

In this tutorial, we're going to learn how to use the Rectangular and Elliptical Marquee tools. These tools allow you to make rectangular and elliptical selections, respectively.

The Rectangular and Elliptical Marquee tools can be found in the toolbar.

Selections allow you to isolate a portion of a layer so that anything outside of the selection will get protected from being edited.

MAKING SELECTIONS
Let's first learn how to make a selection. This short video demonstrates how to make a selection using the Rectangular Marquee tool. The same concept applies when you use the Elliptical Marquee.


CREATING PERFECTLY SHAPED SQUARE OR CIRCLE SELECTIONS
Hold down the SHIFT key to make perfectly shaped square or circle selections using the Rectangular or Elliptical Marquee tools, respectively.


ADDING TO AN EXISTING SELECTION
After you've made an initial selection, you can continue to add to the selection by holding down the SHIFT key. In the previous video, the SHIFT key was being held down while the initial selection was being made. This results in a symmetrical selection. In this instance, the selection is completed first so the mouse has already been released. And then subsequent selections are made while holding down the SHIFT key. This will result in the subsequent selections being added to the original selection.


SUBTRACTING FROM AN EXISTING SELECTION
If you wish to subtract portions of an existing selection, use the ALT key modifier.


REMOVING A SELECTION
To remove an existing selection, go to the menu bar and choose Select > Deselect. You can also use the keyboard shortcut ctrl + D (PC) or cmd + D (Mac).

Working with Layers - Photoshop CS5 Tutorial

In this tutorial, we're going to learn all about layers in Photoshop.

What is a layer?
In Photoshop, a layer is like a transparent sheet of paper that you can draw on. You can draw on a small portion of the layer, or completely fill it up. If you draw only on a small portion of the layer, then the rest of the layer remains transparent until you draw on those other portions as well.

What makes layers such a great feature in Photoshop is that you can work with many different layers all within one document. To better understand why this is such an important feature, let's take a look at an example. Let's say you have 5 transparent sheets of paper, and then you start drawing something on each of those sheets. On one sheet, you've drawn some clouds. On another sheet, you've drawn a sun. On another sheet, you've drawn some waves. On another, you've drawn a ship. And on another sheet, you just filled it up entirely with a solid color. In the images below, we can see how each of those sheets look like.

The checkered pattern that you see in the first 4 images represent the areas of each sheet that are still transparent or empty. As you can see, it's only the last image that is completely filled up.

Individually, each layer can be considered a separate image. But as layers, we can stack them on top of each other to form a new image, as seen below:

The ability of layers to retain their transparent areas allows you to put them on top of each other so that the lower layers can still be seen through the transparent areas of the layers on top. This gives the illusion that everything exists in just one sheet, but in reality, the different elements in the drawing are contained separately.

Let's go ahead and start learning how to work with layers in Photoshop.

STEP 1
Launch the Photoshop application.

To ensure that your workspace will be more similar to the screenshots in this tutorial, go to the menu bar and choose Window > Workspace > Essentials. And then go back to Window > Workspace, and then choose Reset Essentials.

STEP 2
Create a new Photoshop document by choosing File > New.

The create new document window will come up. For the Preset, choose Web. For the Size, choose 640 x 480. For the Background Contents, choose Transparent. Then click OK.

STEP 3
You should now have a new empty document with a transparent background.

In the image above, you see that the new document is filled up with a checkered pattern. The checkered pattern represents the areas of your document that are empty or transparent. It does NOT show up when you print the document. Since we haven't placed or drawn anything in the document yet, then everything is still transparent, which is why the whole area is covered in this checkered pattern.

What if I don't see this checkered pattern?
First, if you go back to step 2, it says that for the Background Contents, you should have chosen Transparent. If you missed that step, then just create another document with all the settings stated in step 2.

If you did choose Transparent for the Background Contents, but you still don't see the checkered pattern, then it could be just a matter of setting some different Transparency preferences.

To edit the Transparency preferences:
If you are on a PC, go to the menu bar and choose Edit > Preferences > Transparency and Gamut. If you are on a Mac, go to the menu bar and choose Photoshop > Preferences > Transparency and Gamut.

This will bring up the Transparency and Gamut preferences. For the Grid Size, choose either Small, Medium or Large. Do NOT choose None. This will do the opposite of what we want. We want to display the checkered pattern, not hide it. I prefer a medium sized grid. Then for the Grid Colors, choose any of the available color schemes. This will determine the colors that the checkered pattern will have. I usually just go with the Light option.

And then click OK.

Is having the checkered pattern a requirement when you work with layers?
No. It's not a requirement. You can still work with layers even if you have preferences that do not show this checkered pattern. Personally, I prefer seeing the checkered pattern so I can more easily tell which areas of my canvas are still transparent or empty.

STEP 4
How do we work with layers?
In Photoshop, there is a specific panel that allows us to work with and manage the layers of our document. This panel is called the Layers panel.

If you've chosen the Small Screen workspace layout, the Layers panel can be found in the lower right area of the workspace.

Let's take a closer look. You'll see that your document already has one layer with a generic name of Layer 1. Right beside the name is the layer thumbnail. The layer thumbnail contains a tiny preview of what is inside the layer. Since our layer is empty, the layer thumbnail is empty as well (as represented by the checkered pattern)

STEP 5
Before we start painting on this layer, let's make sure that it's selected. In Photoshop, you always have to make sure that the layer is selected before you can start working with it.

To select a layer, you simply click on it. Right now, Layer 1 is probably already selected, but go ahead and click on it just to be sure. You can click on the layer thumbnail, the name, or even the empty area after the name. Just don't click on the eye icon to the left of the layer thumbnail. We'll talk about that eye icon later on.

You'll know that a layer is selected if it's highlighted.

STEP 6
Now that we have our layer selected, let's go ahead and paint on it. In the toolbar, select the brush tool. In the Brush Preset picker, choose the Hard Round brush preset. Then in the Swatches panel, choose the color black. Then go to the document window and start making random brush strokes similar to what you see in the image below.

Then go back to the Layers panel and look at the layer thumbnail. You should see that the layer thumbnail has now been updated to reflect what you just painted on your layer.

STEP 7
Let's now add a new layer. To add a new layer, go to the bottom of the Layers panel and click on the Create a new layer button.

After clicking on the button, you should now see a new layer on top of Layer 1. This new layer will have a generic name of Layer 2.

STEP 8
Before we start painting on this new layer, let's make sure that it's selected. It should probably be selected already, because by default, new layers that you create are automatically selected. But to be sure, just click on Layer 2 in the Layers panel in order to select it.

It's very important to be mindful of which layer is currently selected. Because as I've mentioned earlier, you must select a layer first if you want to be able to work on it. It's quite easy to forget which layer is currently selected especially if you're working with a lot of layers. Because of this, you might end up painting or editing the wrong layer. So make it a habit to double-check which layer is currently selected in your Layers panel.

STEP 9
Now that Layer 2 is selected, go to the Swatches panel and select a red color for your brush. Then go to the canvas and start adding more random brush strokes on top of the black paint that we already have.

Since Layer 2 is the currently selected layer, these new red brush strokes that you've painted were placed in Layer 2. The black paint is still on Layer 1.

STEP 10
Let's create one more layer. Another way of creating a new layer is by using a keyboard shortcut. Press ctrl + shift + N if you're on a PC or command + shift + N if you're on a Mac. This will bring up the New Layer window.

Just click OK to create your new layer right away.

You should now have a new layer with a generic name of Layer 3.

STEP 11
Make sure that Layer 3 is selected. Then choose a blue color for your brush, and start painting some more random brush strokes similar to what you see in the image below.

Since Layer 3 is the currently selected layer, these new blue brush strokes that you've painted were placed in Layer 3. The black paint is still on Layer 1. And the red paint is on Layer 2.

STEP 12
So now we have 3 layers and each layer has been painted on - black on Layer 1, red on Layer 2, and blue on Layer 3. We could have painted everything in just one layer, but that would not give us the benefits that are associated with working with multiple layers. When you work with layers, each layer can be edited separately. For example, you can erase some parts of one layer without affecting the contents of the other layers. Let's go ahead and try that.

Go to the tools panel and select the eraser tool. But don't erase anything just yet.

STEP 13
Before you start erasing, make sure that Layer 2 is selected. Go to the Layers panel and click on Layer 2 in order to select it.

STEP 14
Now that Layer 2 is selected, this means that when we start erasing, it's only going to affect the contents of Layer 2. Let's erase a small portion of the paint in Layer 2 that intersects with the contents of the other layers.

You'll see that the only thing that gets erased are the contents of Layer 2, which in this case are the red brush strokes. The other layers remain untouched. Here, we clearly see that we can edit layers independently. This is a great feature to have if you want to be able to erase portions of one layer without affecting the others.

Remember! If you want to edit and make changes to a specific layer, then make sure that you select the correct layer in the Layers panel.

RENAMING LAYERS
By default, layers will have generic names (Layer 1, Layer 2, Layer 3, etc...). But you can rename layers if you want to. Let's go ahead and rename our layers.

STEP 1
Go to the Layers panel and position your cursor on top of the Layer 1 name. Then double-click on the Layer 1 name. You have to double-click on the name itself.

STEP 2
You'll see the name turn into an editable text field.

You can now type in a new name. Let's name this one Black since we painted black brush strokes on it, and then hit enter. The Layer 1 name should now be changed to Black.

STEP 3
Go ahead and rename the other layers as well. Change Layer 2 to Red and Layer 3 to Blue. It's a good idea to make the layer names descriptive of what they contain. That way, it'll be easier for you to find the layer that you want to work on.

CHANGING THE ORDER OF LAYERS
In our current document, the Blue layer (formerly Layer 3) is at the top of the stack. This is why its contents appear at the very front.

The stacking order of the layers in the Layers panel is very important. The contents of the layers that are higher on the stack will appear in front of the contents of the lower layers. So in our current example, the contents of the Blue layer are in front, followed by the contents of the Red layer behind it, and finally, the contents of the Black layer are at the very back.

If you want to rearrange the layers, you can easily do so by clicking and dragging the layers in the Layers panel. Let's demonstrate this by moving the Blue layer from the top of the stack down to the bottom of the stack.

STEP 1
Go to the Layers panel and click and drag the Blue layer down until it's below the Black layer.

Then release the mouse. You should now see that the Blue layer has been moved to the bottom of the stack.

And if you look at the canvas, you'll see that the contents of the Blue layer are now at the very back as well.

Reordering layers is a fairly simple task. Just click and drag a layer upward or downward to move it higher or lower in the stack.

HIDING LAYERS
Sometimes, you might want to hide some layers because you're not sure whether you want to include them in your finished product. You can delete the layers, but because you're still unsure if you want to keep them or not, hiding them temporarily would a better option. You can toggle the visibility of a layer by clicking on the eye icon on the left side of the layer.

If the eye icon is present, it means that the layer is visible. If the eye is not there, then that means the layer is invisible.

STEP 1
Click on the eye icon of the Red layer.

After clicking on it, you should see the eye icon disappear. This means that the Red layer is no longer visible. If you look at the canvas, you'll see that the contents of the Red layer can no longer be seen.

STEP 2
To bring back the layer's visibility, click on the box where the eye used to be.

This will bring back the eye icon and return the layer's visibility.

DUPLICATING LAYERS
If you want to make extra copies of a layer, you can easily duplicate it in the Layers panel. Let's try making a duplicate of the Red layer, so make sure that the layer is visible again.

STEP 1
Go to the Layers panel and select the Red Layer.

STEP 2
If you're on a PC, press ctrl + j on your keyboard. If you're on a Mac, press command + j. That is the keyboard shortcut for duplicating the currently selected layer.

STEP 3
Take a look at your Layers panel, you should now see another layer named Red copy. That is the duplicate layer that you just created.

But if you look at your document window, you'll see that nothing has changed. It doesn't look like we've created a duplicate of the Red layer.

That's because the duplicate is on exactly the same spot as the original one. So it's actually covering the original. What we can do is move the contents of the Red copy layer to a different location.

STEP 4
To move the Red copy layer, we can use the Move tool.

First, make sure that the Red copy layer is selected. Then go to toolbar and select the Move tool.

Then in the document window, click and drag the contents of the Red copy layer to a new location.

Now you see that you really do have a duplicate of the Red layer.

Reminder: When moving the contents of a layer using the Move tool, make sure that you've selected the correct layer in the Layers panel.

DELETING LAYERS
To delete a layer, go to the Layers panel and select the layer that you would like to delete. Then click on the trash can icon at the bottom of the layers panel.

What we've learned here is just a small portion of what can be done with the use of layers. For beginners, I suggest that you start making a habit of working with multiple layers. Always be mindful of which layer is currently selected. If you have a complex Photoshop project that has lots of layers, the chances of working with the wrong layer increase. For example, you might end up painting on one layer when you really meant to paint on another layer. Working with multiple layers might get a little tedious, but it does offer far more benefits because it gives you greater control over the different elements of your Photoshop composition by allowing you to edit each layer individually.

And that concludes this tutorial on working with layers.