IntroductionWelcome| 00:00 | Hi and welcome to Adobe Flash CS4 New
Features. I'm Todd Perkins and I'll be
| | 00:05 | walking you through the new features in
Flash CS4. I'm an Adobe Certified Flash
| | 00:10 | instructor and I have written many
books and recorded many video training
| | 00:13 | titles in Flash.
I absolutely love teaching Flash.
| | 00:17 | Flash CS4 has loads of new features.
In this title, we'll take a look at some
| | 00:21 | of the key features that you'll
be using when you use Flash CS4.
| | 00:25 | We'll be talking about the new interface,
some of the new tools and updated panels.
| | 00:30 | We'll talk about the new motion
tween model. How to work with bones,
| | 00:34 | how to animate them, how to work
with 3D elements. We'll talk about some
| | 00:37 | enhancements of the Flash Player.
| | 00:39 | So I hope you are excited.
| | Collapse this transcript |
| Setting up the example files| 00:00 | If you're a premium subscriber to lynda.com
or have purchased this title on a disc,
| | 00:04 | you have access to the
exercise files for the title.
| | 00:07 | Exercise files in this title are
organized by chapters. Each chapter contains
| | 00:12 | the files used throughout that chapter.
Throughout the title I'll reference of
| | 00:16 | the file that we'll be working in.
Files where we make changes to any artwork
| | 00:20 | are saved in their final
states, and end with _Final.
| | 00:25 | If you don't have access to the
exercise files, don't worry. You could still
| | 00:28 | follow along, just set up your files in
the same way that my files were set up
| | 00:31 | and everything will still work.
| | Collapse this transcript |
| Prerequisites| 00:00 | Throughout this title, I'm going to
assume that you have a basic knowledge of Flash.
| | 00:03 | You should know what is taught
in Flash CS3 Fundamentals or Flash CS3
| | 00:08 | Essential Training. If you haven't
watched those titles you may have a hard
| | 00:11 | time following along with this title.
| | 00:13 | There is also going to be a point in
the title where I talk about ActionScript.
| | 00:17 | For that you should be familiar with
ActionScript 3.0 in Flash CS3 Essential Training.
| | 00:21 | But if you're not quite at that level,
you'll still be able to follow along.
| | 00:24 | So let's get started.
| | Collapse this transcript |
|
|
1. Exploring the New Panels and ToolsExploring the new interface| 00:00 | The first time you open Adobe Flash
CS4 you'll notice a drastically different interface.
| | 00:05 | Adobe has changed the Flash interface
to be more in harmony with the
| | 00:09 | other animation and video editing
products like Premiere Pro and After Effects.
| | 00:13 | So you'll notice that the Timeline is
no longer at the top of the screen;
| | 00:17 | it's now at the bottom.
| | 00:18 | The Property inspector was also moved
to the right side of the screen instead
| | 00:22 | of the bottom of the screen. So we now
have a vertical layout for the Property
| | 00:25 | inspector. The toolbar is also on the
right side of the screen. You'll notice
| | 00:29 | a few tools as well.
| | 00:30 | We'll be talking about these tools
later on in this title. The panels in
| | 00:33 | Flash CS4 are expandable, and in the
case of the toolbar, place the tools in
| | 00:39 | multiple rows.
| | 00:40 | You may find yourself loving the new
Flash interface if you are familiar with
| | 00:43 | Adobe's other animation software. If you
want to make any modifications to the interface,
| | 00:47 | you can always do that.
| | Collapse this transcript |
| Using the new tools in the toolbar| 00:00 | In Flash CS4, there are several new
tools in the toolbar. In this movie we'll
| | 00:04 | talk about a few of them. Some of them
are complex like the 3D tools and the
| | 00:09 | Bones tools. For those tools we have
whole chapters dedicated to them in this title.
| | 00:14 | So we'll look at
them in more detail later on.
| | 00:16 | For now, we'll take a look first at the
Spray Brush tool. The Spray Brush tool
| | 00:20 | is hidden in the flyout menu below
the Brush tool in the toolbar.
| | 00:24 | The Spray Brush tool's default
setting is to provide spray paint.
| | 00:28 | You check the default shape box, choose
a color, choose a scale. Choose whether or
| | 00:37 | not to have random scale, and choose a
brush size you can spray paint on the stage.
| | 00:46 | There we go.
| | 00:48 | I'm going to undo my spray paint by pressing
Command+Z on the Mac or Ctrl+Z on the PC.
| | 00:53 | You can also spray using symbols to
create patterns. Going to adjust the scale
| | 00:59 | of my symbol. Going to add Random
Scaling, adjust the width and the height of
| | 01:09 | the brush. Then I can create a pattern
on the stage. So if I wanted to draw a
| | 01:15 | border around the stage, I can do
that using this tool. Going to undo my
| | 01:21 | changes by pressing Command+Z
on the Mac or Ctrl+Z on the PC.
| | 01:24 | The Spray Brush tool is a great tool
for painting patterns. Another tool for
| | 01:29 | painting patterns is the Deco tool.
The Deco tool paints fills. Many of the
| | 01:33 | fills that the Deco tool paints consume
the whole stage. For example, the Vine
| | 01:38 | Fill, which is the default setting or
default drawing effect for the Deco tool,
| | 01:43 | paints a leaf and a flower along with a vine.
| | 01:46 | If you check the Default Shape
checkboxes and then click on the Stage,
| | 01:52 | a vine gets painted with flowers and leaves;
if you click again the drawing stops.
| | 01:57 | You'll notice that the drawing animates
as it moves. If you wanted to create an
| | 02:01 | animation out of that, you can very easily.
| | 02:04 | I'm going to press Command+Z to back up
and then I'm going to check the Animate
| | 02:08 | Pattern checkbox. This creates a frame-
by-frame animation of drawing a pattern.
| | 02:13 | You'll notice that the Frame Step is
set to 1. That is how many frames you go
| | 02:17 | between keyframes in the animation.
I'm going to delete the default setting.
| | 02:20 | If I click on the Stage and then click
again, you'll see that you'll see that
| | 02:25 | Flash has created an animation for me.
I'm going to select that range of
| | 02:30 | keyframes and delete them using
the keyboard shortcut Shift+F5.
| | 02:39 | In the Deco tool you can also use
symbols as your pattern. I'm going to uncheck
| | 02:43 | Animate Pattern and going to set a
symbol for the leaf. The symbol is going to
| | 02:47 | be a LeafStroke, and for the flower
I'll set a symbol called FlowerStroke.
| | 02:52 | I click again, the Deco tool paints
using my custom flower and leaf shapes.
| | 02:57 | Command+Z to Undo.
| | 03:00 | Now I'll change the Drawing Effect to
Grid Fill. If you click on the Stage, the
| | 03:06 | Deco tool fills the stage with a grid
of whatever symbol you have selected or
| | 03:10 | you can simply use the default shape
by clicking the Default Shape checkbox.
| | 03:14 | Command+Z to Undo, and of course using
the Deco tool you can control horizontal
| | 03:21 | and vertical spacing along
with the scale of your pattern.
| | 03:25 | The Symmetry Brush enables you to draw
shapes symmetrically. In the Advanced
| | 03:30 | Options section of the Symmetry Brush,
I'm going to start with Reflect Across Line.
| | 03:35 | When I click-and-drag, you can see
the two shapes are being created.
| | 03:40 | When I release my mouse button, two shapes are
created, symmetrically reflected across this line.
| | 03:47 | You can also draw with symbols.
So I'll select my Flower symbol and
| | 03:53 | click-and-drag to draw flower shapes.
Notice that they are symmetrically
| | 03:58 | reflected. Going to press Command+Z a
few times to undo. Then I'm going to
| | 04:02 | change the Advanced
Options to Reflect Across Point.
| | 04:09 | I can draw to reflect across a certain
point. Undo, Rotate Around. I can draw
| | 04:17 | multiple shapes around a certain point.
Undo again, and you can also do a Grid Translation.
| | 04:28 | So I'm drawing multiple shapes on this grid.
And that's a look at some of the new
| | 04:33 | tools in Flash CS4. I encourage you
to be creative and try the different
| | 04:37 | settings in each of the tools so that
you can get more experienced using them.
| | Collapse this transcript |
| Exploring the updated Project panel| 00:00 | The Project panel has always been a
powerful tool for managing large amounts of
| | 00:05 | FLA files, SWF files and ActionScript
classes. With Flash CS4, the Project
| | 00:11 | panel is better than ever. You can
find the Project panel by choosing Window >
| | 00:15 | Other Panels > Project. To create new
project, click the Projects dropdown and
| | 00:21 | select New Project. Give the project a
name, choose a root folder where your
| | 00:29 | project files are stored, choose an
ActionScript version and then click Create Project.
| | 00:35 | Because of the root folder I choose,
all the FLA files in that folder
| | 00:39 | automatically show up in the Project
panel. If I want to add more files, I can
| | 00:43 | do that easily by clicking the New
File button. You can choose a variety of
| | 00:49 | different file types. I'll give my
file a name, My New File, and I'll choose
| | 00:57 | FLA for the file type. I'll choose
to open the file after creation.
| | 01:01 | Then I'll click Create File,
and here is my New File.fla.
| | 01:06 | You can also quickly create ActionScript
classes. Click the Create Class button
| | 01:10 | to do that. I want to call this class,
MyClass. You can choose whether or not
| | 01:15 | to bind the class to a library symbol.
I'm going to leave that box unchecked
| | 01:19 | and leave the Open File After
Creation box checked and I'll click Create
| | 01:23 | Class. When I click Create Class, a
class file is created inside of an empty
| | 01:29 | package that has all the class
decorations I need, and the constructor method.
| | 01:35 | So you can see that the Project
panel is very useful. You can also manage
| | 01:39 | settings for individual projects. Do
this by clicking the dropdown in the
| | 01:43 | options area by choosing Project
Properties. In the Project Properties window,
| | 01:49 | you can redefine your ActionScript
version, tell Flash where to save classes,
| | 01:56 | create a class template and create a
different class template for a symbol class.
| | 02:01 | You can also specify additional
folders to use outside of the route
| | 02:05 | folder for your folder locations and
you can specify connections to SWC files.
| | 02:10 | I'm going to click OK to close the
dialog. So you can use the Project panel to
| | 02:15 | quickly create new files and to
organize projects of any size.
| | Collapse this transcript |
| Using the Library| 00:00 | The Library in Flash CS4 has been
greatly enhanced for organization.
| | 00:04 | The Library in previous versions enabled
you to organize elements by name. In Flash
| | 00:09 | CS4 you can organize elements by name
in ascending or descending order. You can
| | 00:15 | now organize elements by linkage, by
use count, by the date modified, and even
| | 00:26 | by the type of symbol.
| | 00:29 | You can also search for symbols in the
Library. For example, let's say I wanted
| | 00:34 | to look with the symbol containing the
word flower or leaf. The items are found
| | 00:40 | as I'm typing.
| | 00:42 | So if I want to look for the leaf
symbol, simply start typing leaf, and every
| | 00:46 | element that doesn't contain a string
that you type in gets removed, so you can
| | 00:50 | find what you need quickly.
| | 00:51 | So the Library is now a
powerful organizational tool in Flash.
| | Collapse this transcript |
|
|
2. Creating Motion TweensUnderstanding the new tween model| 00:00 | One of the biggest changes in Flash
CS4 is the motion tween model. Motion
| | 00:05 | tweens are drastically different from
previous versions of Flash. In previous
| | 00:09 | versions of Flash, you would create a
keyframe at one point, another keyframe
| | 00:12 | in another point, and then tween the
frames in between to create an animation.
| | 00:16 | In Flash CS4, you create one keyframe
and Flash does the rest of the keyframing
| | 00:22 | for you. Let's take a look at how it
works. If you are following along, I'm
| | 00:25 | working in New_Tween.fla in the
Chapter2 folder. Here I have a pretty simple
| | 00:30 | file with the surfboard that I'm
going to animate and some ActionScript that
| | 00:34 | tells the ruby to stop when it gets to Frame 40.
| | 00:39 | To create the tween, I'm going to
select the board_only layer, right-click and
| | 00:44 | choose Create Motion Tween. You'll
notice that it says Create Classic Tween as well.
| | 00:49 | The classic tween is the previous
version of a motion tween. So if you
| | 00:53 | happen to want to stick to the old tween
model, you can always create a classic tween.
| | 00:57 | I'm going to choose Create Motion
Tween here. You'll notice that the frames
| | 01:01 | turn blue and then what I'm going to
do is go to the first keyframe, select
| | 01:07 | the board on the Stage, and adjust the
Alpha by dragging the Alpha slider down
| | 01:12 | to 0 in the Color Effects section of
the Property inspector. You'll have to
| | 01:15 | make sure that the Style dropdown
has Alpha selected in order to do that.
| | 01:20 | Now what I'll do is move to the last
frame of the animation, select the board
| | 01:25 | on the Stage, which is now invisible
and instead of creating a keyframe,
| | 01:30 | I'm just going to drag the Alpha slider up
to 100. Now if I scrub the playhead,
| | 01:36 | I can see that the motion tween has been
created. You'll notice that instead of a
| | 01:40 | black circle at frame 40, there is a
small black diamond. That's an auto
| | 01:45 | keyframe created by Flash.
| | 01:47 | So, if you test the movie, I'm using
Command+Return on the Mac or Ctrl+Enter on the PC,
| | 01:51 | you can see the animation happening.
Now, if you wanted to adjust tween
| | 01:56 | properties, there are different ways to
do that as well. We'll talk about that
| | 01:59 | more in a later video. On a simple
level, you can adjust easing by clicking
| | 02:03 | between and selecting it, notice by
the way the tween icon for the layer.
| | 02:10 | And then you can go to the Ease
section of the Property inspector.
| | 02:13 | Notice that I have a motion tween
selected, I can drag the Ease slider.
| | 02:17 | When you drag the slider one way, Flash
tells you whether you are easing in or out.
| | 02:22 | So, I'm easing out here. Test the
animation and see the animation ease out. So,
| | 02:28 | the new tween model takes the step of
creating extra keyframes out of creating
| | 02:33 | animations. That way you can create
simple motion tween faster than ever.
| | Collapse this transcript |
| Working with motion paths| 00:00 | With different motion tweens in Flash
CS4, there are also different motion paths.
| | 00:04 | In this movie, we'll talk about
how to work with motion paths using the
| | 00:08 | new model. If you are following along,
you can open up Motion_Paths.fla in the
| | 00:13 | Chapter2 folder. This file is pretty
much the same file from the last exercise,
| | 00:18 | except I added a mask layer for the board.
| | 00:20 | We are going to go to the first
keyframe of the board layer, I'm going to move
| | 00:24 | to board to the bottom right of the
screen and I'm going to go to the last
| | 00:29 | frame and then move the board to where
it was before. You'll notice here that
| | 00:35 | there is a red line with dots on it.
This line is the motion path for this
| | 00:41 | animation. So, we didn't even
have to create a motion guide.
| | 00:44 | Flash automatically created one for us.
| | 00:47 | The way that the motion path works is
that shows the frames over time. The dots
| | 00:52 | on the line represent frames so as
they are spread apart, that means the
| | 00:56 | object will be moving faster and as
the dots are closer together, the object
| | 01:00 | will be moving slower. So, we can
tell here that there is easing applied to
| | 01:04 | this animation. It's the same easing
that we applied in another movie.
| | 01:07 | So, we can scrub the playhead and
preview the animation. Now, this works in
| | 01:14 | the similar way to the classic motion
tween. However, the motion path created
| | 01:20 | works just like a stroke and it is
editable just like a stroke as well. So,
| | 01:24 | I can hover my mouse over the middle of
it and click and drag to create a curved
| | 01:28 | animation. If I scrub the
playhead, we can preview that.
| | 01:35 | I can click and drag over the start
and end points of the animations to move
| | 01:39 | them. Further, using the Subselection
tool, you can select the start or end
| | 01:44 | point of the animation and adjust that
point's Bezier curves. We'll test the
| | 01:52 | movie to see this in action. So motion
paths in Flash CS4 are created for you
| | 01:58 | and they are editable just like any line.
| | Collapse this transcript |
| Using the motion editor| 00:00 | Using the Motion Editor, you can
control your animations down to the individual
| | 00:05 | animation properties. In this movie,
we'll take a look at how to do that.
| | 00:09 | If you are following along, you can open
up Motion_Editor.fla in the Chapter2
| | 00:13 | folder. Here is what we have now. The
board animation comes in quickly and then
| | 00:18 | the check it out animation slides in.
| | 00:21 | We'll make some changes to this
animation using the Motion Editor. First, we'll
| | 00:25 | make the board slide in a little
more slowly. To edit an animation in the
| | 00:29 | Motion Editor, select the tween in
the timeline. You know that a tween is
| | 00:33 | selected when you see Motion Tween in
the Property inspector. And then click the
| | 00:37 | Motion Editor tab. If you don't see it,
you can always choose Window > Motion Editor to show it.
| | 00:43 | The Motion Editor breaks down your
animation frame by frame and property by
| | 00:48 | property. If you scroll up and down
through the Motion Editor, you'll see all
| | 00:53 | other properties that you can animate,
X, Y, Skew, Scale, etcetera. For the
| | 01:01 | properties that animate, you'll see the
keyframes identified as green squares.
| | 01:07 | Blue dotted lines indicate easing for a property.
| | 01:11 | Here in the Motion Editor, we can move
the keyframes so if we slow down the
| | 01:15 | board animation, I could simply grab
this keyframe for Alpha from say, Frame 20
| | 01:22 | to Frame 30. I can scroll up, find the
X and Y properties, drag the keyframes
| | 01:32 | there from Frame 20 to 30 as well. If
we go back to the timeline, I can see
| | 01:37 | that the keyframe that was Frame 20 is
now at Frame 30. If I test the movie,
| | 01:42 | the board animation takes a little bit
more time and that's just how I want it.
| | 01:47 | Using the Motion Editor, you can
also edit the property values for
| | 01:50 | animations. Also like the check it
out animation and then go to the Motion Editor.
| | 01:56 | In the check it out tween, I'm
going to find the X property, move all the
| | 02:01 | way over to the frame where the
animation starts and then I'm going to click
| | 02:05 | and drag the pixel value
slider in the X property area.
| | 02:11 | This will drag the check it out movie
clip further to the right or further to
| | 02:15 | the left if I drag to the left. If I
scrub up the playhead, I can see that
| | 02:19 | the animation is working. Now, let's
say I wanted to add an additional property
| | 02:24 | to my animation that's not currently
animating. For example, if I wanted to
| | 02:28 | animate a Blur Filter. I could scroll
down, find the Filt's area within the
| | 02:35 | Motion Editor and then click the Plus
button and select the filter I want to animate.
| | 02:40 | I'll select Blur, and then the basic
blur is applied. If I scroll on the Stage,
| | 02:48 | I can see that the movie clip is
blurred. Going to go to the Blur Y property
| | 02:53 | and reduce it to 0. Now, I'll go to the
Blur X property, to as far as it will go,
| | 02:59 | which is the value of 255. Then I'll
go to the end of the animation and then
| | 03:04 | click the Add Keyframe button. It's an
empty diamond in between the two arrows in
| | 03:10 | the keyframe section of the Motion
Editor. Once you have entered a keyframe,
| | 03:14 | then you can adjust the property value.
| | 03:16 | For example, here I'm adjusting Blur X
to 0 and then the animation is created.
| | 03:21 | If I scrub the playhead now,
you'll see that I have created a blur
| | 03:25 | animation. Now I'll test the movie
and see the animation in action.
| | 03:31 | So using the Motion Editor, you have powerful,
independent property value control over
| | 03:36 | your animations.
| | Collapse this transcript |
| Using motion presets| 00:00 | Flash CS4 allows you to save and
reuse animations using the Motion Presets panel.
| | 00:06 | If you are following along,
I'm working in Motion_Presets.fla in the
| | 00:10 | Chapter2 folder. Here I want to animate
the navigation. If you look at the top
| | 00:16 | left of the Stage, the board's part of
the navigation animates in, using a blur
| | 00:21 | and a slide. Going to save this
animation and apply it to clothing and
| | 00:25 | accessories. To do that, first select
the motion tween in the timeline and then
| | 00:30 | right-click and choose Save As Motion Preset.
| | 00:32 | You're then asked to give the preset a name.
I'll call this Blur Slide and then
| | 00:39 | click OK. To apply the preset, you'll
need the Motion Presets panel. You can
| | 00:43 | find the Motion Presets panel under Window >
Motion Presets. In the Motion Presets
| | 00:48 | panel, there are two folders. One
called Default Presets and one called Custom
| | 00:52 | Presets. Default Presets have preset
animations that you can apply to any symbol.
| | 01:00 | Custom Presets are the presets
that you create and save yourself.
| | 01:03 | Like the Blur Slide preset we just created.
To apply motion preset, select the
| | 01:09 | symbol on the Stage you want to apply
the preset to and then select the preset
| | 01:13 | in the Motion Presets panel
and then click the Apply button.
| | 01:16 | I'm not going to click the Apply button
yet because what happens when we click
| | 01:20 | the Apply button is the position where
the object is, is the starting position
| | 01:24 | for the animation. So if I were to
click it, clothing would slide from where it
| | 01:28 | is to the right. What I wanted to do
is end up where it is right now. So if I
| | 01:33 | hold Shift and then click Apply, the
position of the symbol is going to be the
| | 01:37 | ending position for the animation. If I
scrub up the playhead, I'll see that's
| | 01:42 | what happened. Now I'll apply the same
animation to accessories. Select the symbol,
| | 01:47 | click Blur Slide, Shift-click Apply,
and my animation is applied to all three.
| | 01:56 | Now I'll test the movie by pressing
Command+Return on the Mac or Ctrl+Enter on the PC.
| | 02:00 | So using the Motion Presets
panel, applying similar animations is
| | 02:04 | easier than ever. You can save
animations and apply them to any symbol you want.
| | Collapse this transcript |
|
|
3. Working with BonesCreating bones| 00:00 | In Flash CS4 you can easily create
bone systems. Bone systems can be used to
| | 00:06 | move elements depending on the position
of other elements. Using bone systems,
| | 00:10 | you can connect elements together and
move and rotate elements based on the
| | 00:15 | movement and rotation of other elements.
| | 00:17 | For example, in this movie we are
going to make the hula girl wave. We are
| | 00:21 | going to connect the hula girl's arms
and wrist movie clips to make it so when
| | 00:27 | we click and drag the hula girl's hand,
the arm moves and rotates as well.
| | 00:32 | If you are following along, go ahead
and open up Creating_Bones.fla in the
| | 00:36 | Chapter3 folder.
| | 00:37 | To create a bone system just use
the Bone tool. The Bone tool is in the
| | 00:41 | toolbar in the same flyout menu as
the Bind tool. So I select the Bone tool,
| | 00:45 | then I'll start dragging from the
hinging point in the elbow that I want to
| | 00:49 | rotate around.
| | 00:50 | So it is going to be at the very
bottom of the elbow. Then I'm going to click
| | 00:53 | and drag and release my mouse button
at the bottom of the hula girl's wrist.
| | 00:57 | This will act as the hinging point for
the wrist. Now I'll go to the Selection
| | 01:01 | tool and watch the wrist rotate and
the arm follow. Note also that Flash
| | 01:08 | created an Armature layer for me.
| | 01:10 | Flash created that layer by taking the
artwork from the hand and arm layers. So
| | 01:14 | whenever you create a bone system, all
of the bone system elements go to the
| | 01:18 | same layer automatically. And that's how
easy it is to create a bone system in Flash.
| | Collapse this transcript |
| Animating with bones| 00:00 | Animating bones is just as easy as
creating them. In this movie we'll take a
| | 00:04 | look at animating a bone system. If you
are following along, go ahead and open
| | 00:07 | up Animating_Bones.fla in the
Chapter3 folder. The first thing we'll do is
| | 00:11 | extend the timeline to Frame 40. I'm
going to click and drag on Armature and
| | 00:16 | hula girl layers, and then press F5
to extend the frames to that point.
| | 00:21 | To animate on the Armature layer, all
you have to do is go the frame that you
| | 00:25 | want to change and move the elements
of the bone system and Flash will create
| | 00:29 | the tween for you. For example, if we
wanted the hula girl to wave, I could go
| | 00:33 | to say Frame 20 and then click and drag
the hula girl's hand in a waving motion
| | 00:41 | and then go to Frame 40 and put the
hand back into it's original position,
| | 00:48 | and then I'll have the animation.
| | 00:53 | Now, I'll test the movie to see it in
action. And there is the waving hula girl.
| | 01:01 | This is obviously just a simple
example of animating a bone system.
| | 01:05 | But you can use the same ideas to create
more complex and more powerful bone
| | 01:09 | systems yourself, and it's
just that easy with Flash CS4.
| | Collapse this transcript |
|
|
4. Working with 3D ElementsUsing 3D tools| 00:00 | The new 3D tools in Flash CS4 allow
you to mimic 3D effects from movie clips.
| | 00:05 | The effects allow you to move and rotate
movie clips in 3D space. If you are following along,
| | 00:11 | you can open up 3D_tools.fla
in the Chapter4 folder. The first
| | 00:15 | thing that you need to use the 3D tools
is a movie clip. So on the Stage here I
| | 00:20 | have a movie clip selected. Then in
the toolbar, I'm going to select the 3D
| | 00:23 | Translation tool. It's hidden under the
flyout menu with the 3D Rotation tool.
| | 00:28 | The 3D Translation tool enables you to
move an element in 3D space, so you can
| | 00:33 | move the movie clip along the X, Y or Z
axis. There are three different arrows
| | 00:37 | to control that: red, green and blue.
This corresponds to the different axes you
| | 00:42 | can move the object on. To remember
which colors control which axis, remember
| | 00:47 | RGB/XYZ. So red controls the X-axis,
green controls the Y-axis and blue
| | 00:54 | controls the Z-axis.
| | 00:56 | Not only can you move the element in 3D
space, you can also move the vanishing
| | 01:00 | point using the Property inspector. So
if I wanted to make the vanishing point
| | 01:04 | for the bottom right of the screen, I
can do that using the Vanishing Point
| | 01:08 | number sliders. Now, we can drag the
movie clip's Z value, it moves based on its
| | 01:14 | new vanishing point.
| | 01:17 | You can also adjust the camera perspective by dragging
the Camera Perspective slider in the Property inspector.
| | 01:25 | So that way you can control where the camera is.
| | 01:27 | So you can use 3D coordinates to
move elements using the 3D Translation tool.
| | 01:33 | Now we'll look at the 3D Rotation
tool. The 3D Rotation tool enables you
| | 01:37 | to rotate an object in 3D space. The
colors that correspond to the axes in the
| | 01:43 | 3D Rotation tool are the same as the 3D
Translation tool. So RGB/XYZ, so using
| | 01:50 | the red line I can click and drag
to rotate the object around X-axis.
| | 01:57 | The green line enables me to rotate
around the Y-axis, and the blue circle
| | 02:02 | enables me to rotate around Z-axis.
Using the outer orange circle, you can
| | 02:07 | click and drag to rotate around all
axes at once. So using the new 3D tools in
| | 02:15 | Flash CS4, you can mimic the effects
of 3D and add powerful effects to your
| | 02:20 | Flash applications.
| | Collapse this transcript |
| Creating 3D animations| 00:00 | Using the 3D tools in Flash CS4, you
can also create 3D animations. Here I have
| | 00:05 | an unfinished animation. I'll
test the movie to show what we have.
| | 00:09 | Command+Return on the Mac, Ctrl+Enter
on the PC. You can see the board rotating
| | 00:13 | around the Y-axis. When it goes to
finished rotation, it snaps to a still image
| | 00:19 | of the board. In this movie we'll
finish that board animation. If you are
| | 00:23 | following along I'm working in 3D_Animation.fla.
| | 00:26 | I'm going to go to the end of the timeline
and find the grey frames where there's no
| | 00:32 | Motion Tween applied. Now I'll start
by applying the motion tween by right-
| | 00:35 | clicking or Control-clicking the
frames, and choosing Create Motion Tween.
| | 00:40 | Now I'll go to the end of the animation
and place the object in 3D space where
| | 00:44 | I want it to be at the end. So I'll
choose the 3D Rotation tool, make sure the
| | 00:49 | object on the Stage is selected and
then I'm going to rotate along the Y-axis.
| | 00:54 | Bringing the left part of the board
back and the right part of the board
| | 00:58 | forward just a little bit.
| | 01:01 | Now what I'll do is continue where
the previous animation left off. So I'll
| | 01:07 | rotate the board in a 3D space along
the Y-axis, until it's flat or as close as
| | 01:17 | I can get to flat and then I'll preview
the animation. I'll scrub up the playhead
| | 01:21 | right before the animation comes in
and then scrub up through it to make sure
| | 01:26 | it looks OK. Now I'll test the
movie and preview the full animation.
| | 01:34 | So creating animations like this is
extremely easy using the new 3D tools.
| | Collapse this transcript |
|
|
5. Flash Player EnchancementsUsing H.264 video| 00:00 | In Flash Player 10, you can now use
video encoded with H.264 codec so you can
| | 00:06 | play files like MP4 files and
F4V files in the Flash Player.
| | 00:10 | If you are following along, I'm working in
Video.fla. Here I have a simple component on
| | 00:15 | the Stage. It's an instance of the FLV
Playback component and I don't have the
| | 00:19 | skin applied, and all we are going to
do play MP4 or FLV files is change the
| | 00:24 | source of the FLV Playback component.
In the Property inspector with the
| | 00:28 | component selected, I'll click the
Component Inspector panel button. In the
| | 00:32 | Component Inspector panel, I'll set
the source video to be an MP4 file.
| | 00:39 | I'll click OK, the metadata gets
gathered and then I can test the video in the
| | 00:45 | Flash Player using Test Movie. Command+
Return on the Mac, Ctrl+Enter on the PC.
| | 00:49 | (Waves crashing.)
| | 00:54 | So we can play MP4 files in the Flash
Player, we can also play F4V files.
| | 00:59 | F4V files are FLV files encoded using H.264
codec. I'll change the source to my F4V file,
| | 01:10 | gather the metadata, and then test
the movie to see the F4V file playing
| | 01:15 | in the Flash Player.
| | 01:20 | So with the enhancements of Flash Player 10, you could
| | 01:22 | take advantage of video
that uses the H.264 codec.
| | Collapse this transcript |
| Using the vector data type| 00:00 | Flash Player 10 supports a new class
similar to the Array class called Vector.
| | 00:05 | Because of the strict requirements of
the Vector class, you are able to more
| | 00:08 | quickly iterate through it than
through an array. Let's take a look at this
| | 00:12 | syntax for the Vector class. Select the
first keyframe of the Actions layer and
| | 00:16 | open the Actions panel using Option+F9
on the Mac, or F9 on the PC. Here I have
| | 00:21 | a vector created called numbers. Now
this syntax may look pretty foreign, but
| | 00:25 | it's actually quite simple. I have
the variable name, the data type is
| | 00:30 | Vector.<uint> in brackets.
| | 00:34 | The brackets are greater than and less
than brackets. So we have the name of
| | 00:38 | the class and then a dot. Then we have
the data type if the vector will hold in
| | 00:43 | the brackets. So the only type of
data we can put inside this vector are
| | 00:47 | positive integers. Then we create a
new instance of the Vector class. We are
| | 00:52 | being sure to add a dot and then
our data type and then there are two
| | 00:56 | parameters that we pass in. First an
integer. This integer represents how many
| | 01:03 | indices can be inside of the vector.
Here my vector may hold three indices.
| | 01:09 | Whether or not you can continuously
add in the vector depends on the next value.
| | 01:13 | The next value is called Fixed.
| | 01:16 | This defines whether or not you can
add more indices to your vector than you
| | 01:21 | already specified in the initial
parameter. One of the advantages to this type
| | 01:26 | of control over numbers is that there
is no empty slot inside of a vector.
| | 01:30 | For example, you can have an
empty slot in an array or many
| | 01:34 | empty slots. You can have a value at
index zero and a value of index nine and
| | 01:40 | nothing in between. In a vector you
cannot do that. Each index must have a value.
| | 01:46 | Each index gets a value and there
are no holes so to speak. Here I'm
| | 01:52 | setting the values of the vector just
like an array. I give the index zero a
| | 01:58 | value of one, index one value of
two and the index two value of three.
| | 02:02 | Now when I trace numbers and test
the movie, Command+Return on the Mac,
| | 02:06 | Ctrl+Enter on the PC, I get one,
two, three in the Output window. Just
| | 02:10 | like I would if I tested in the movie
with an array. Now let's say, I broke the
| | 02:14 | rules and I wanted to have a negative
one inside of my vector. When I test the movie,
| | 02:22 | I get a weird error.
| | 02:26 | That doesn't come through as an official error, but
| | 02:28 | notice this number. What is that number?
That's actually the highest value for
| | 02:33 | a positive integer. So the vector
essentially can't disobey the rules to hold
| | 02:39 | data that is not of the appropriate data type.
| | 02:42 | So instead of converting the value just
to negative one, it treats the value as
| | 02:47 | a positive integer, as if I were to
wrap negative one in the parenthesis for
| | 02:52 | uint, like I have on my screen here.
With vectors you get the same properties
| | 03:02 | and methods as you do it with an array.
You can see this if you put a dot after
| | 03:06 | numbers in the trace statement. So
you'll see foreach, indexof, length, pop,
| | 03:13 | push, etcetera. So you can work with
a vector just like an array. Except for
| | 03:18 | it's an optimized version of an array.
| | 03:20 | Because vector is more optimized than
the array class, it's recommended that
| | 03:24 | you use vector instead of array in every
case you possibly can. The only cases
| | 03:29 | where you should use array is where you
need different types of data inside of
| | 03:33 | an array. Like the array class, the
vector class has a lot of intricacies.
| | 03:38 | You can learn about all of these through Flash Help.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | So, that's a look at some of the new
feature in Adobe Flash CS4. Hope you can
| | 00:04 | find creative ways to use these features
in your applications. See you next time.
| | Collapse this transcript |
|
|
