Showing posts with label Screencasts. Show all posts
Showing posts with label Screencasts. Show all posts

Monday, December 6, 2010

AS3 Animation Tutorial - Using the AS3 EnterFrame Event to Create Animation in Flash [Video Tutorial]

by Alberto Medalla
Lecturer, Ateneo de Manila University

You can use AS3 to add some animation to your Flash project using code. Instead of adding tweens on the timeline, you'll be using AS3 to animate objects. In this ActionScript video tutorial, I'll show you a few simple examples on how to create animation in Flash using the AS3 EnterFrame event.

AS3 Animation Tutorial - Using the AS3 EnterFrame Event to Create Animation in Flash



AS3 EnterFrame Event Animation Sample Code #1
Here is the code for the first example where the circle will continue to scale up as long as the movie is running.
var growthRate:Number = 2;

circle_mc.addEventListener(Event.ENTER_FRAME, grow);

function grow(e:Event):void
{
     e.target.width += growthRate;
     e.target.height += growthRate;
}

AS3 EnterFrame Event Animation Sample Code #2
In the second example, the animation will stop when the circle's size reaches 150 pixels.
var growthRate:Number = 2;
var maxSize:Number = 150;

circle_mc.addEventListener(Event.ENTER_FRAME, grow);

function grow(e:Event):void
{
     e.target.width += growthRate;
     e.target.height += growthRate;
     if(e.target.width >= maxSize)
     {
          circle_mc.removeEventListener(Event.ENTER_FRAME, grow);
     }
}

AS3 EnterFrame Event Animation Sample Code #3
In the third example, the code has been modified to make the circle grow and then shrink repeatedly.
var growthRate:Number = 2;
var maxSize:Number = 150;
var minSize:Number = 100;
var scaleMode:String = "grow";

circle_mc.addEventListener(Event.ENTER_FRAME, growShrink);

function growShrink(e:Event):void
{
     if(scaleMode == "grow")
     {
          e.target.width += growthRate;
          e.target.height += growthRate;
          if(e.target.width >= maxSize)
          {
               scaleMode = "shrink";
          }
     }
     else if(scaleMode == "shrink")
     {
          e.target.width -= growthRate;
          e.target.height -= growthRate;
          if(e.target.width <= minSize)
          {
               scaleMode = "grow";
          }
     }
}

Click on the link to view more AS3 enterframe animation samples

Friday, November 5, 2010

Flash 8 Masking Effect | How to Create a Mask in Flash 8 Video Tutorials

In this series of Macromedia Flash 8 video tutorial clips, we'll show you how to create a Flash 8 Masking effect. A Flash 8 mask layer can be used to hide some portions of a layer underneath it, revealing only select areas. It's pretty simple and easy to learn, but there are a number of different, creative ways to make use of a mask in flash.

Part 1: Working with Flash 8 Masking - What is a Layer Mask?


In part 1, we'll show you a simple example that demonstrates the Flash 8 masking effect.
[ALTERNATE LINK]

Part 2: Working with Flash 8 Masking - Creating the Layer that will be Masked

NOTE: If you're working in Flash CS5 and you're having trouble finding the Static Text type option, make sure that in the Properties Inspector (while you have the Text Tool selected), you have Classic Text instead of TLF Text selected.

In part 2 of Working with Flash 8 Masking, we'll be creating the layer that will be masked. This layer will consist of some text.
[ALTERNATE LINK]

Part 3: Working with Flash 8 Masking - Creating the Animation in the Mask Layer

NOTE: If you're following along with this video, but you're working in Flash CS5, choose Create Classic Tween instead of Create Motion Tween.

In part 3 of Working with Flash 8 Masking, we will be creating the motion tween animation in the layer that we will use as the mask. The motion tween animation will consist of a circle that moves from the left to the right side of the stage.
[ALTERNATE LINK]

Part 4: Working with Flash 8 Masking - Converting a Layer into a Mask


In part 4 of Working with Flash 8 Masking, we'll show you how to convert a regular layer into a layer mask.
[ALTERNATE LINK]

Part 5: Working with Flash 8 Masking - Editing a Layer Mask


In part 5 of Working with Flash 8 Masking, we'll show you how to edit an already existing layer mask.
[ALTERNATE LINK]

Thursday, November 4, 2010

Flash 8 Motion Tween Video Tutorials | The Basics of Motion Tweening - Animating Position, Color, Size and Using the Easing Property

In this set of Macromedia Flash tutorial online video training clips, we'll show you the basics of Motion Tweens in Macromedia Flash 8. In these tutorials, you'll learn how to animate the following properties of an object: position - make an object move from one side of the stage to the other, color - make the object change in color as the animation happens, size - change the scale of an object over time. You'll also learn how to use the Flash 8 easing property of motion tweens. This will give you greater control over the motion tween's speed. You can make the movement of objects accelerate or decelerate using the Flash 8 easing property.

NOTE: If you're working in Flash CS5, choose CREATE CLASSIC TWEEN instead of Create Motion Tween when you follow along with the videos.

Part 1: Working with Motion Tweens in Flash 8 - Animating an Object's Position


In this video, we demonstrate a basic Flash 8 motion tween example - how to animate an object's position.
[ALTERNATE LINK]

Part 2: Working with Motion Tweens in Flash 8 - Animating 2 Objects at the Same Time


In part 2 of Working with Motion Tweens in Flash 8, we show you how to properly animate 2 different objects at the same time. We'll also show you how you can reuse the media assets in your Flash document's library.
[ALTERNATE LINK]

Part 3: Working with Motion Tweens in Flash 8 - The Easing Property

NOTE: If you're working in Flash CS5, the Ease property can be found in the Properties Inspector (while a frame is selected) under Tweening.

In part 3 of Working with Motion Tweens in Flash 8, we talk about the Flash 8 easing property of motion tweens. The easing property allows you to adjust the distribution of the speed of an animation. With the easing property, you can make motion tweens accelerate or decelerate.
[ALTERNATE LINK]

Part 4: Working with Motion Tweens in Flash 8 - Animating Color

NOTE: If you're working in Flash CS5, the Tint property can be found in the Properties Inspector (while a symbol instance is selected) in the Style menu under Color Effect.

In part 4 of Working with Motion Tweens in Flash 8, we'll teach you how to animate an object's color. In this example, we'll make one of the circle's change color over time.
[ALTERNATE LINK]

Part 5: Working with Motion Tweens in Flash 8 - Animating an Object's Size


In Part 5 of Working with Motion Tweens in Flash 8, we'll teach you how to scale or resize an instance of a symbol using the Free Transform tool so that you can animate the object's size over time.
[ALTERNATE LINK]

Tuesday, November 2, 2010

Flash 8 Frame by Frame Animation and Flash 8 Onion Skin Feature Video Tutorial Series

NOTE: If you are looking for a version of this tutorial for Flash CS5, then check out Creating a Frame by Frame Animation - Flash CS5 Video Tutorials for Beginners.

In this set of Macromedia Flash tutorial online video training clips, we'll show you the basics of creating a simple frame by frame animation in Macromedia Flash 8. In these tutorials, you'll learn how to insert blank keyframes, draw using the brush tool, and you'll also learn how to use the helpful Flash 8 onion skin feature, which is a very useful tool when doing frame by frame animation in Flash 8. We'll also be explaining what the FLA and SWF file formats are.

Part 1: Flash 8 Frame-By-Frame Animation Tutorial - Introduction


Macromedia Flash 8 let's you easily create your own frame-by-frame animation. In this video, we explain how a frame by frame animation works and we show you a simple example of a Flash 8 stickman animation.
[ALTERNATE LINK]

Part 2: Flash 8 Frame-By-Frame Animation Tutorial - Drawing on the Stage


In part 2 of the Flash Frame-By-Frame Animation Tutorial for beginners series, we show you how to draw a simple stickman on the stage of your Flash document.
[ALTERNATE LINK]

Part 3: Flash 8 Frame-By-Frame Animation Tutorial - Adding Keyframes and the Onion Skin Feature


In Part 3 of this Flash 8 video training series, we'll teach you how to add keyframes and how to use the Flash 8 Onion Skin feature - a feature that let's you see a tracing guide based on the objects in previous or next keyframes.
[ALTERNATE LINK]

Part 4: Flash 8 Frame-By-Frame Animation Tutorial - Saving Your Document


Make it a habit to save your work often! It can save you from the frustration of losing all of your hard work.
[ALTERNATE LINK]

Part 5: Flash 8 Frame-By-Frame Animation Tutorial - Previewing Your Animation


In Part 5 of the Flash Frame-By-Frame Animation video tutorial series, we'll show you how to preview your animation. This video also explains what a SWF file is.
[ALTERNATE LINK]

Part 6: Flash 8 Frame-By-Frame Animation Tutorial - Adjusting the Frame Rate


In the final part of the Flash Frame-By-Frame Animation Tutorial series, we'll show you how you can adjust the frame rate of your animation.
[ALTERNATE LINK]

Monday, November 1, 2010

Flash 8 Motion Guide Animation Tutorial Video Series

This tutorial was made for Flash 8. For Flash CS5 users, check out adding a motion guide in Flash CS5.

In this Macromedia Flash 8 tutorial video training series, we'll teach you how to use the Flash 8 Motion Guide. When creating motion tween movements in Flash 8, you're not just limited to horizontal, vertical or straight diagonal directions. The Flash 8 Motion Path or Guide let's you draw a path (such as a curving path for example) that a tweened object can follow as the animation progresses. Watch these online video tutorials to learn how.

Part 1: Working with Motion Guides in Flash 8 - What is a Motion Guide?


In part 1, we talk about what a Flash 8 Motion Guide is and we show you a Flash 8 animation example of the motion guide being used.
[ALTERNATE LINK]

Part 2: Working with Motion Guides in Flash 8 - Creating the Object that will Follow the Guide


In part 2, we'll draw a circle and convert it into a graphic symbol. This will be the object that will move along the motion guide.
[ALTERNATE LINK]

Part 3: Working with Motion Guides in Flash 8 - Creating the Motion Guide

NOTE: If you're working in Flash CS5, right-click on the layer name on the timeline, then choose Add Classic Motion Guide in order to add a classic motion guide to the layer.

In part 3, we'll show you how to create a motion guide layer. On this layer, we will draw a path using the pencil tool. This path that we will draw, will be the path that our tweened object will follow.
[ALTERNATE LINK]

Part 4: Working with Motion Guides in Flash 8 - Making the Object Follow the Path

NOTE: If you're working in Flash CS5, choose Create Classic Tween instead of Create Motion Tween.

In part 4, we'll show you how to make the instance of the circle symbol follow the path.
[ALTERNATE LINK]

Part 5: Working with Motion Guides in Flash 8 - Path Drawing DON'Ts


In part 5, we give you some tips on what to avoid when drawing paths for the motion guide.
[ALTERNATE LINK]