IntroductionWelcome| 00:00 | Welcome to ActionScript 3.0 in Flash
CS3 Professional Beyond the Basics.
| | 00:06 | I'm Todd Perkins, an Adobe certified
instructor in Flash, and I absolutely love Flash.
| | 00:11 | I create animations for fun and for work.
| | 00:14 | In this title, we're going to take what
you already know about ActionScript and
| | 00:17 | build upon it to build
more advanced applications.
| | 00:20 | Let's take a look at what we're going to build.
| | 00:22 | One of the things we'll create in
this title is called the Particle System.
| | 00:26 | This is an example of a Particle System.
| | 00:28 | This Particle System generates snowflakes.
| | 00:32 | All we did is draw the snowflakes and
Flash is randomly placing them and moving them
| | 00:37 | and scaling them and changing the alpha.
| | 00:40 | We'll build this Particle System from
start to finish and we'll learn how to use
| | 00:43 | ActionScript to animate all of this.
| | 00:46 | And one of the objectives when you
create this Particle System is to make it
| | 00:49 | reusable, so you can swap
out the graphics at any time.
| | 00:52 | Another project we'll build in this
title is an advanced image gallery.
| | 00:56 | When I rollover this thumbnail image,
it's divided up into segments that update
| | 01:01 | depending on the position of my mouse.
| | 01:03 | When I click on the thumbnail image,
the full-size image animates in, and this
| | 01:09 | is all controlled with
ActionScript and it's all reusable.
| | 01:13 | The information about these
files is stored in an XML file.
| | 01:16 | So changing the graphics in this image
gallery is as simple as updating the XML file.
| | 01:21 | We'll also look at how XML works
and how to bring XML into Flash.
| | 01:25 | Then we'll take all of the code we use
to build this image gallery and put it
| | 01:28 | inside of an ActionScript class, so
that we can use it whenever we want by only
| | 01:32 | typing three lines of code.
| | 01:34 | Another project we'll be
working is an advanced video player.
| | 01:37 | The navigation of the video player
is controlled when you roll your mouse
| | 01:41 | over the video player.
| | 01:43 | The video is divided up
into different cue points.
| | 01:47 | Whenever you roll your mouse over
certain position, the video navigates
| | 01:50 | to a certain cue point.
| | 01:52 | The cue points are even tied to an XML
file that gives us close captioning.
| | 01:59 | As an added feature to our advanced
video, you can click and drag the video to
| | 02:04 | scale it, without having to
resize the browser window.
| | 02:12 | And to make this whole thing reusable,
we put it all into an ActionScript class,
| | 02:15 | so you can recreate it anytime
you want with three lines of code.
| | 02:19 | Well, enough talking about these projects.
| | 02:20 | Let's make them!
| | Collapse this transcript |
| How to use the exercise files| 00:01 | If you are a premium member of the
lynda.com Online Training Library or if
| | 00:06 | you're watching this tutorial on a disc,
you have access to the exercise files
| | 00:09 | used throughout this title.
| | 00:11 | Exercise files for this
title are arranged by chapters.
| | 00:15 | For the most part, all of the
files are within each chapter.
| | 00:19 | We've included both FLA
files and the SWF files for you.
| | 00:26 | Most of the chapters are organized in that way.
| | 00:28 | Some chapters are also organized into folders.
| | 00:31 | And as we go throughout the training,
I'll be telling you what folders to
| | 00:34 | navigate to in order to find
the files that we're working with.
| | 00:37 | Inside of those folders you'll will
find some files that end with _Final.
| | 00:42 | Those files are the final versions
of the files we're working with.
| | 00:45 | We included those files for you in
case you need to look at the finished code.
| | 00:49 | Most of this time, we won't be
using the final files in this title.
| | 00:53 | I'm going to close this folder.
| | 00:55 | And close the Exercise Files folder.
| | 00:57 | If you're a monthly or annual
subscriber to Lynda.com, you don't have access to
| | 01:01 | the exercise files, but you can follow
along and I'll tell you what you can do
| | 01:05 | to prepare your files accordingly.
| | 01:07 | So let's get started.
| | Collapse this transcript |
| Reviewing ActionScript 3.0 basics| 00:02 | Before we start learning new
ActionScript, let's review what we already know.
| | 00:06 | In this movie, we'll take a look at
variables, functions, events, classes,
| | 00:10 | conditional statements, and loops.
| | 00:12 | Variables are containers that hold data.
| | 00:15 | To create a variable, you type var and
then a space, and the name of the variable.
| | 00:20 | You declare the data type of the
variable by using a colon. Nearly all data
| | 00:23 | types start with the capital letter.
| | 00:25 | You set the value of the variable using
the equal sign, and the value of the string
| | 00:28 | variable is in quotes.
| | 00:30 | And you end the statement by using a
semi-colon . Throughout this title, when we
| | 00:34 | create variables, instead of going
through all of the syntax and creating a
| | 00:38 | variable, I'll usually just say create
a variable and I'll tell you the name
| | 00:42 | and data type of the
variable as well as the value.
| | 00:44 | Functions are reusable blocks of code.
| | 00:46 | Here is an example of a function.
| | 00:49 | To create a function, you type
function, a space, the name of the function,
| | 00:54 | open and closed parenthesis, and you declare
the data type with the colon. A function
| | 01:00 | that does not return a
value has a data type a Void.
| | 01:03 | You put the code that you want the
function to do inside of curly braces.
| | 01:07 | Throughout this title, when we
create functions, I'll mostly say create a
| | 01:11 | function, instead of going through this syntax.
| | 01:13 | Events are things that happen.
| | 01:16 | They can be triggered by a file
loading or a user clicking or rolling over
| | 01:20 | something with their mouse.
| | 01:21 | When you work with events,
you need to use event listeners.
| | 01:25 | Here is an example of code where we
add an event listener to a button called
| | 01:28 | myButton and the event that the
button is listening for is a mouse click.
| | 01:31 | When that button gets clicked,
it runs the playMovie function.
| | 01:35 | The playMovie function receives the
MouseEvent and then plays the movie by
| | 01:39 | running the Play function.
| | 01:41 | Classes are created in an
external ActionScript files.
| | 01:43 | Here is an example of a class.
| | 01:46 | When you create a class, you use the
package keyword to tell Flash what
| | 01:50 | package or what set of classes your class is in.
| | 01:53 | You wrap all of the code inside of the
class file in curly braces. You import
| | 01:58 | the classes that you will be working with.
| | 02:00 | You declare the name of your class by
using the public keyword, which indicates that
| | 02:05 | the class will be able to be
accessed from outside of itself.
| | 02:08 | For example, you'd be able create an
instance of this class from the main
| | 02:12 | timeline of a Flash movie.
| | 02:13 | The Class keyword creates a class.
| | 02:15 | The name of the class is as same as the
file name and they almost always start
| | 02:18 | with a capital letter.
| | 02:20 | If you want to add onto an existing
class, then you use the keyword extends,
| | 02:24 | and then you type the class you want to extend.
| | 02:27 | MyClass extends the MovieClip class.
| | 02:29 | After you declare the class, you create
curly braces. And you put the rest of
| | 02:34 | the class information inside of those
curly braces. In classes, there is a
| | 02:38 | special function called the constructor
function that runs automatically when an
| | 02:41 | instance of that class is created.
| | 02:43 | The constructor function has the same
name as the class and the same name as
| | 02:48 | the ActionScript file.
| | 02:50 | Notice that there is no colon
after the parenthesis, after MyClass.
| | 02:55 | That's because constructor
functions never return a value.
| | 02:58 | The constructor function is typically used to
set initial property values inside of a class.
| | 03:03 | Conditional statements are If/Then statements.
| | 03:06 | If a certain condition is true,
then a block of code executes.
| | 03:11 | If that condition is not true,
then another block of code executes.
| | 03:14 | To create a conditional statement,
use the keyword if and then you put the
| | 03:18 | condition inside of parenthesis. The
code in curly braces that follows will
| | 03:22 | execute if that condition is true.
| | 03:24 | If you'd like to do something if that
condition is not true, you can use the Else keyword.
| | 03:28 | You put the code that you'd then like
to run inside of curly braces.
| | 03:32 | A loop is a block of code that
runs a certain number of times.
| | 03:35 | To create a loop, use the For keyword.
| | 03:38 | And then you put the information
about the loop inside of parenthesis.
| | 03:41 | The information includes first a
variable called the index, which is commonly i,
| | 03:47 | but doesn't have to be i.
Declare a data type for that variable and
| | 03:51 | typically set it equal to 0.
| | 03:53 | This loop will run as long as i is less than 20.
| | 03:56 | And the block of code in curly braces
will execute, and if i is still < 20,
| | 04:01 | i will increment by 1,
which is shown by i++.
| | 04:05 | If any of these principles aren't
familiar or aren't clear, you may want to go
| | 04:09 | back and watch the Essential
Training title for ActionScript 3.0.
| | 04:12 | With that said, let's get
started and go beyond the basics.
| | Collapse this transcript |
|
|
1. The Advanced ActionScript 3.0 Display ListUnderstanding the Display List| 00:02 | In this chapter, we're going
to talk about the display list.
| | 00:05 | The display list is a list of visual objects
that are inside of a display object container.
| | 00:11 | Now, that might sound kind of confusing,
so we have this movie to learn that concept.
| | 00:15 | If you want to follow along,
I'm in understanding .SWF in the Chapter
| | 00:19 | 1 folder along with Exercise Files.
| | 00:21 | There are basically two types of
display objects or visual objects.
| | 00:26 | One is the display object container, and
the other one is called the display object.
| | 00:31 | Display object containers can
contain other display objects and other
| | 00:36 | display object containers.
| | 00:37 | Display objects cannot contain anything else.
| | 00:41 | Here is an example of that.
| | 00:42 | If I try to drag this board over to
the display object, and it won't work
| | 00:46 | and it snaps back in place.
| | 00:49 | But if I drag it over to this Display
Object Container and place it inside
| | 00:54 | using addChild then I can put another
display object inside of display object container.
| | 00:59 | I can do the same thing with
this little stick figure here.
| | 01:03 | If I drop him right on there into
the display object container, I can
| | 01:06 | use addChild to put the stick
figure inside of the display object
| | 01:11 | container's display list.
| | 01:13 | Display object containers can also
contain other display object containers
| | 01:18 | and those display object containers
can also contain display objects, and
| | 01:24 | display object containers.
| | 01:26 | Now if you want some examples of this,
you're very familiar with them already.
| | 01:29 | An example of a display object
container is something like a movie clip.
| | 01:34 | Think of a movie clip as a container
for other movie clips and other types of
| | 01:37 | symbols and graphics and everything.
| | 01:39 | Something that's just a display
object could be a shape, a bitmap, a video.
| | 01:46 | And there's actually a whole list of other
things, but that's the gist of the display list.
| | 01:49 | Just know that it's broken up into two types.
| | 01:51 | Display object containers and display objects.
| | 01:55 | And now let's learn how to
work with the display list.
| | Collapse this transcript |
| Using Display Objects other than MovieClip| 00:01 | In this movie, we're going to talk
about something called the Sprite class.
| | 00:05 | The Sprite class is a lot
like the MovieClip Class.
| | 00:08 | In that, it's a display object container.
| | 00:11 | The only difference between the Sprite
class and the MovieClip class is that the
| | 00:14 | Sprite class does not have its own timeline.
| | 00:17 | So it can be animated.
| | 00:19 | But it doesn't have a unique timeline
like a MovieClip class and support for
| | 00:22 | frame labels, etcetera.
| | 00:24 | The reason you'd want to use the Sprite
class is because it's a little bit less
| | 00:28 | processor intensive.
| | 00:29 | So if you have symbols that don't
have timelines or don't need to have
| | 00:32 | timelines, then you can make
them instances of the Sprite class.
| | 00:36 | So let's learn how to do that.
| | 00:37 | If you're following along, just create a
new ActionScript 3.0 document in Flash CS3.
| | 00:42 | Let's go over into the toolbar and
select the Oval tool. We'll just draw a
| | 00:45 | simple circle. Just make sure you've got
any fill color selected, click-and-drag
| | 00:50 | to draw a circle and hold Shift on your keyboard.
| | 00:54 | Now select this for the Selection
tool and press F8 on the keyboard to
| | 01:00 | convert this into a symbol.
| | 01:01 | In the Name text field, type Circle
with a capital C and select Movie clip for the Type.
| | 01:08 | Now you may be thinking if we're going
to use the Sprite class then why we're
| | 01:11 | choosing Movie clip here?
| | 01:12 | This is actually just something that
we're choosing now and we'll tell Flash
| | 01:15 | later that this is going to be an instance of
the Sprite class when we work with ActionScript.
| | 01:19 | So just click OK and then select the
circle on the stage and press Delete or
| | 01:25 | Backspace on your keyboard to delete it.
| | 01:26 | To make this an instance of the
Sprite class, we did change some things in
| | 01:30 | the Linkage properties.
| | 01:31 | So if you go to the Library and Right-
click or Ctrl+Click the symbol, choose
| | 01:36 | Linkage and then choose Export for ActionScript.
| | 01:41 | Now this is where we tell Flash that we
want this to be a Sprite and not a Movie Clip.
| | 01:45 | The area that we change is
the Base class text field area.
| | 01:48 | Notice that it says flash.display.MovieClip.
| | 01:50 | If you select MovieClip and change it
to Sprite with a capital S, we can make
| | 01:57 | this an instance of the Sprite class.
Or in other words, we can say that this
| | 02:02 | is extending the Sprite class, because the
actual ActionScript class is going to be circle.
| | 02:07 | And Circle is what we're going to call it
when we bring it out of the Library right now.
| | 02:11 | So click OK and if another
dialog box appears, just click OK.
| | 02:16 | Let's click the first keyframe of our
movie and open up the Actions panel by
| | 02:20 | pressing Option+F9 on the Mac or F9 on the PC.
| | 02:23 | In the Actions panel, we'll need to
create a variable to hold our circles.
| | 02:26 | Just type var and a space, and we'll call
this circle, we'll data type it to Circle,
| | 02:33 | we'll set it equal to a new
instance of the Circle class.
| | 02:37 | Remember the Circle class is
extending the Sprite class.
| | 02:43 | So by extending the Sprite class
instead of the MovieClip class, we're making
| | 02:46 | this a little bit lesser processor intensive.
| | 02:48 | Now we just need to put the circle on the stage.
| | 02:51 | So type addChild(circle); and then
and then test the movie by pressing
| | 03:00 | Command+Return on the Mac or Ctrl+Enter
on the PC and the circle is on the stage.
| | 03:06 | This time, it's not
extending the MovieClip class.
| | 03:08 | Again, it's extending the Sprite class.
| | 03:10 | And there's a quick look at how to use Sprites.
| | 03:12 | In the next movie, we'll take a look
at addChild and go a little bit more in
| | 03:15 | depth about how that method works.
| | Collapse this transcript |
| Using the addChild method| 00:02 | In this movie, we'll take a little
bit closer look at the addChild method.
| | 00:06 | If you're following along, I am in
Add_Child.fla in the Chapter 1 folder
| | 00:11 | of the Exercise Files.
| | 00:13 | I'm sure you already know what addChild does.
| | 00:15 | addChild adds a visual element to the stage.
| | 00:17 | It can either be a display object, or
display object container as you learned
| | 00:21 | earlier in this chapter.
| | 00:22 | Just one thing you want to note when
you're using addChild is it that child has
| | 00:26 | a parent and let's talk about that real quick.
| | 00:29 | So in the Library in this file, right-
click or Ctrl+click the Board movie clip
| | 00:35 | and select Linkage, choose Export
for ActionScript, and then click OK.
| | 00:41 | Now we can bring the symbol out of
the library while the movie is running.
| | 00:44 | Select the first keyframe in the
Actions layer and open up the Actions panel by
| | 00:47 | pressing Option+F9 on the Mac or F9 on the PC.
| | 00:50 | Now I'll have to create a
variable to hold this movie clip.
| | 00:53 | So type var then a space. We will just
called this board, data type it to board,
| | 01:01 | set it equal to a new
instance of the Board class.
| | 01:04 | Now in the next line, we will just call
addChild method and we'll add board to the stage.
| | 01:15 | Let's test the movie by pressing Command
+Return on the Mac or Ctrl+Enter on the PC
| | 01:19 | and we see that the board is on the stage.
| | 01:22 | Let's close that window.
| | 01:24 | Now it's just important to note that
children have parents, both in real life
| | 01:32 | and in ActionScript.
| | 01:33 | So let's just take a look at
who the parent of this board is.
| | 01:37 | That may sound really simple but it'll
help us a lot later on when we go into the
| | 01:40 | more advanced principles of the display list.
| | 01:42 | Let's go to the next line in
the code and do a trace statement.
| | 01:45 | So type trace and we will
just trace board.parent.
| | 01:54 | Test the movie again by pressing Command
+Return on the Mac or Ctrl+Enter on the PC
| | 01:58 | and see what comes up in output window.
| | 02:01 | Notice it says object MainTimeline.
| | 02:05 | So because we're calling this addChild
on the MainTimeline, the parent of the
| | 02:09 | board is the MainTimeline.
| | 02:11 | So whenever you add a child with anything,
the parent becomes the object who use
| | 02:16 | the addChild method.
| | 02:17 | That might sound kind of basic but
just keep it in your mind for the future.
| | 02:20 | In the next movie we'll learn how to
take visual elements off the stage by using
| | 02:24 | the removeChild method.
| | Collapse this transcript |
| Using the removeChild method| 00:01 | In the last movie you learned how to
put a visual element on the stage.
| | 00:04 | In this movie you'll learn how to take
a visual element off of the stage using
| | 00:07 | something called removeChild.
| | 00:09 | If you're following along, I am in Remove
_Child.fla and that's in the Chapter 1
| | 00:13 | folder within the Exercise Files.
| | 00:15 | Let's take a look at how this file is setup.
| | 00:16 | We have the Button layer and the actions
layer and you can probably guess what's on the
| | 00:19 | Button layer. That's the button.
| | 00:20 | Let's see what's in the actions layer.
| | 00:22 | Select the first keyframe of the
actions layer and open up the Actions panel by
| | 00:25 | pressing Option+F9 on the Mac or F9 on the PC.
| | 00:29 | Lines 1 and 2 are that code that you
wrote in the last movie and then we have
| | 00:32 | an event listener added to remove button
and then a skeleton of the removeBoard
| | 00:36 | function is going to run when
you click on the remove button.
| | 00:39 | So the board's already is on the stage.
All we need to do is take it off when
| | 00:42 | you click this button and you can
probably guess how that would work.
| | 00:44 | If you use addChild to add the board
as a child, we would use removeChild to
| | 00:50 | remove the board as a child.
| | 00:52 | That's exactly how it works.
| | 00:53 | So just type inside of that function,
removeChild with capital C,
| | 00:57 | open parenthesis, board, closed parenthesis.
| | 01:03 | That's really all there is to it.
| | 01:04 | So let's just test the movie by pressing
Command+Return on the Mac or Ctrl+Enter
| | 01:07 | on the PC and you can see that the
board is on the stage, and when we click the
| | 01:12 | Remove button, we use removeChild to take
the board off the stage. It's fairly simple, huh?
| | 01:17 | Well there is a look at how to use removeChild.
| | 01:19 | In the next few movies, we'll take
a look at how to reference children
| | 01:22 | in different ways.
| | Collapse this transcript |
| Referencing a Display Object by index number| 00:03 | Up to this point we've used addChild
and removeChild only when the display
| | 00:08 | object has one child, and what if the
display object has multiple children?
| | 00:12 | How do you reference or
differentiate between the different children?
| | 00:15 | There are several different ways to
that and in this movie we'll take a look at
| | 00:17 | one called child index.
| | 00:19 | Child index actually refers to
the positioning of an array of an
| | 00:23 | object's display list.
| | 00:24 | So every time an object is added to
another object's display list, it's put
| | 00:29 | in an array and you can reference the
objects in another object's display list
| | 00:33 | by its array index number.
| | 00:36 | If you're following along, I am in
Child_Index.fla in the Chapter 1 folder
| | 00:41 | along with the Exercise Files.
| | 00:43 | Let's take a look at the code that we have.
| | 00:45 | Select the first keyframe of the
actions layer and open up the Actions panel by
| | 00:49 | pressing Option+F9 or F9 on the PC.
| | 00:51 | This code may look very familiar
because we've been working on it in this
| | 00:54 | whole chapter so far.
| | 00:56 | We've been using the word board up to
this point and we'll just change it to
| | 00:59 | snowBoard to make it little bit easy to
differentiate between the class and the instance name.
| | 01:06 | So at the of the code, we have declared
the variable snowBoard and in the loop,
| | 01:10 | we're using the snowBoard to be a new
instance of the board class, so it's going
| | 01:14 | to create three snowboards and we're
using the same snowBoard variable for each
| | 01:21 | of those snowBoard instances, and the
last line of the loop just positions them
| | 01:25 | so that they are not all on top of each other.
| | 01:27 | Towards the bottom of the code,
the removeBoard function just says
| | 01:30 | removeChild(snowBoard) and this is not
going to work properly but I have it in
| | 01:34 | here because you might run
into this problem at some point.
| | 01:36 | So let's just test the movie by pressing
Command+Return or Ctrl+Enter on the PC.
| | 01:41 | Now when I click the remove button,
it only removes the last board and that
| | 01:46 | might make sense because we're using
the same snowBoard variable name in the
| | 01:50 | loop when we created the boards and
so the last value of the snowBoard
| | 01:54 | variable is the last board.
| | 01:56 | But if you click the remove
button again, then you'll get an error.
| | 01:59 | So we don't need to refer to the
children in a different way in order to speak
| | 02:04 | to one specifically.
| | 02:05 | So if I just wanted to remove the first one,
I'm going to have to change my code.
| | 02:09 | Let's close these windows.
| | 02:13 | As I explained earlier, when a child is
added to another object's display list,
| | 02:19 | all of those children are stored in an
array and so that we can just reference
| | 02:23 | those children by their array index number.
| | 02:25 | So I'm just going to modify this code
slightly and we can control which child we remove.
| | 02:30 | So right after removeChild, type At
with capital A so it says removeChildAt and
| | 02:38 | then replace snowboard with 1.
| | 02:43 | Test the movie using Command+
Return or Ctrl+Enter on the PC.
| | 02:47 | Now when you the click the remove
button, it removes the first board.
| | 02:52 | Now you may be thinking, hey this is
an array, why don't I say removeChildAt
| | 02:56 | zero because that technically is the
first child that we added, right?
| | 03:00 | Well the remove button is
actually the zero index.
| | 03:05 | So if you'd said removeChildAt(0) and
clicked the remove button, then it would
| | 03:08 | remove the remove button which
we don't want to have happen.
| | 03:12 | So let's close this window and let's
just get a little bit more practice by
| | 03:16 | removing all of the children.
| | 03:16 | So I'm going to select the
removeChildAt line and press Command+C.
| | 03:20 | It's Ctrl+C on the PC to copy the code.
| | 03:23 | I just go down the next line and
paste the code and go to the next line and
| | 03:26 | paste the code again and change the 1 the
second time to a 2 and third one will be 3.
| | 03:34 | So now let's test the
movie and see what happens.
| | 03:37 | So press Command+Return or Ctrl+
Enter on the PC to test the movie.
| | 03:40 | Now click the remove button and that's
probably not what you want to have happen.
| | 03:47 | We still have a second board
sitting there, which is not what we want.
| | 03:50 | Let's close this window and
take a look at what's wrong.
| | 03:54 | In the Output window, it says the
supplied index is out of bounds, but how can
| | 04:00 | it be if we've added the three boards and if
there are three boards but why is this not working?
| | 04:05 | Well the reason is after you remove the
child at 1, the array sort of shifts so
| | 04:13 | there's only a child at index zero,
which is the button, and then the two
| | 04:17 | snowboards at index 1 and index 2.
| | 04:20 | So by the time we get to
removeChild at 3, there is no third index.
| | 04:26 | So if we change the order to remove the
last child, which is the third index, and
| | 04:31 | then to remove the middle one, which is
the second, and to remove the first child last,
| | 04:35 | then the code will work.
| | 04:37 | Press Command+Return or Ctrl+Enter
to test the movie and click the remove
| | 04:41 | button, and all the children are gone and
there is a look at how to work with child index.
| | 04:46 | In the next movie we'll look at
another way to reference display objects.
| | Collapse this transcript |
| Referencing a Display Object by name| 00:01 | In this movie we'll take a look at a
little bit more effective way to reference
| | 00:05 | display objects and that's by an instance name.
| | 00:08 | Instance names are a little bit
different in ActionScript 3.0 than they are
| | 00:10 | in ActionScript 2.0.
| | 00:11 | Let's take a look at how it works.
| | 00:13 | I'm working in Child_Name.fla in the
Chapter 1 folder along with Exercise Files.
| | 00:18 | Let's select the first keyframe of the
actions layer and open up the Actions
| | 00:21 | panel by pressing Option+F9
on the Mac or F9 on the PC.
| | 00:24 | So the ActionScript in this file is setup
pretty much the same as ActionScript in
| | 00:27 | the file in the last movie.
| | 00:29 | We're using the snowBoard variable for
each snowboard but what is the instance
| | 00:35 | name if they are all created? Remember
in ActionScript 2.0, if you are familiar
| | 00:39 | with that language, each object had to
have an instance name and in ActionScript 3.0,
| | 00:44 | instance names are actually
created for you, or you can set them yourself.
| | 00:49 | Let's see what these instance
names of all these snowboards are.
| | 00:52 | Inside of the loop, I'm going to go to
the last line to create a new line and
| | 00:56 | I'm just going to trace snowBoard.
name and that would give us the actual
| | 01:07 | instance name of snowboard.
| | 01:10 | That's just a property
that's built into Flash already.
| | 01:12 | Now test the movie with Command+Return
or Ctrl+Enter on the PC to check out the
| | 01:16 | snowboard instance names.
| | 01:18 | instance13, instance15, instance17.
| | 01:22 | Now we could reference each one of the
objects by this name and I can show you
| | 01:27 | how that works, but it's not
necessarily the most effective way.
| | 01:32 | Let's type it out first.
| | 01:33 | Let's go inside at the removeBoard
function and type removeChild and then type
| | 01:39 | an open parenthesis.
| | 01:40 | Now inside of the parenthesis we're
going to type something special here.
| | 01:44 | Type getChildByName, and then in
parenthesis, we put the instance name of the
| | 01:56 | child and so I'm going to
type instance13 in quotes.
| | 02:01 | Remember the instance name is the string
that holds the instance name of something.
| | 02:05 | So instance13 and that was the first one.
| | 02:11 | So put that in quotes.
| | 02:12 | Make sure you've closed out
getChildByName and removeChild.
| | 02:16 | Then test the movie by pressing
Command+Return or Ctrl+Enter on PC.
| | 02:20 | Now click the remove button
and it removed the instance13.
| | 02:24 | Let's close these windows and you can
probably guess it that really isn't the
| | 02:28 | most effective way to reference objects,
mostly because you don't really know what
| | 02:33 | the instance name is.
| | 02:34 | How on earth would I ever know that the
first snowboard was instance13 unless I
| | 02:40 | trace the value here.
| | 02:41 | Let's set the name ourselves.
| | 02:43 | So let's just erase this trace
statement line inside of the loop and type
| | 02:47 | snowBoard.name equals, and in quotes
we'll type snowBoard, close the quote.
| | 02:59 | Notice we concatenate i on the end.
| | 03:04 | Now inside of our removeBoard
function, I have to change instance13 to
| | 03:09 | snowBoard and then a number.
| | 03:13 | So it's either going to be 0, 1 or
2 because it's inside of the loop.
| | 03:16 | So I'm just going to type 0 there
and now I'm going to test the movie by
| | 03:19 | pressing Command+Return or Ctrl+Enter
on the PC, click the remove button, and
| | 03:25 | there we go, we've removed the first snowboard.
| | 03:27 | So I can just as easily
remove snowBoard1 or snowBoard2.
| | 03:34 | I am going to test the movie again by
pressing Command+Return or Ctrl+Enter and
| | 03:38 | click the button and you
can remove whichever one you want.
| | 03:42 | This gives a lot more power because
you can actually reference the display
| | 03:45 | object by a name, which is a lot easier
than remembering index number or using
| | 03:51 | the instance name that Flash creates for you.
| | 03:53 | So now that you know a few ways
for reference children, let's look at
| | 03:57 | referencing children in different timelines.
| | Collapse this transcript |
| Controlling Display Objects in different timelines| 00:01 | In this movie we'll take a look at
how to reference display objects in
| | 00:04 | different Timelines.
| | 00:06 | If you're following along I'm in
Different_Timelines.fla in the Chapter 1 folder
| | 00:10 | along with Exercise Files, and
here's what our goal is in this file.
| | 00:14 | There's a picture on the stage
called pic_mc and if I double-click that
| | 00:20 | movie clip, inside of the picture movie clip,
there's another movie clip called boarder_mc.
| | 00:26 | Now what I want to do is click the
remove button and go inside of the picture
| | 00:33 | movie clip and then take away the boarder only.
| | 00:37 | Now this may seem pretty simple, but it
might not work exactly how you think it would.
| | 00:44 | So let's select the first keyframe of
the actions layer and open up the Actions
| | 00:48 | panel by pressing Option+F9
on the Mac or F9 on the PC.
| | 00:51 | Let's click inside the removeBoarder
function and if we just type removeChild
| | 00:57 | and then we'll remove pic_mc and we'll
use dotSyntax reference it in the boarder.
| | 01:06 | pic_mc.boarder_mc and then we'll test the movie.
| | 01:13 | So press Command+Return on the
Mac and Ctrl+Enter on the PC to test the
| | 01:17 | movie and click the remove button.
| | 01:20 | Notice you get an error.
| | 01:23 | It says "The supplied
DisplayObject must be a child of the caller."
| | 01:29 | So, let's close theOutput window.
| | 01:32 | So, who is the caller?
| | 01:33 | Well, the caller is whoever called
removeChild, which means the main Timeline.
| | 01:37 | So, maybe we'll just have to
have the pic_mc remove the boarder.
| | 01:42 | So let's just select that pic_mc.
| | 01:45 | inside of the removeChild and press
Command+X or Ctrl+X on the PC to cut it and
| | 01:51 | we'll paste it right before removeChild
by pressing Command+V or Ctrl+V.
| | 01:54 | So now the pic_mc.removeChild(boarder_mc).
| | 02:00 | Now that should work all right.
| | 02:01 | Let's test the movie by pressing Command
+Return or Ctrl+Enter on the PC and now
| | 02:05 | we have another error.
| | 02:08 | Access of undefined property boarder_mc.
| | 02:12 | That's what the error says.
| | 02:14 | So Flash doesn't know what we are
talking about when we say boarder_mc.
| | 02:16 | Let's close all those windows.
| | 02:20 | Hmmm. What could be the problem?
| | 02:21 | Well, we're having the right parent
call removeChild, right? We want to have the
| | 02:28 | picture remove the child.
| | 02:30 | We want it to remove the boarder, but
we're on the main Timeline and trying to
| | 02:34 | speak to this boarder_mc.
| | 02:36 | So, we actually need to use
dot syntax to refer to that movie clip.
| | 02:40 | So if I select pic_mc and the dot
| | 02:41 | and I press Command+C or Ctrl+C on the
PC to copy that and paste it right before
| | 02:47 | boarder_mc and that's going to work,
because pic_mc is the caller and the child
| | 02:55 | is pic_mc.boarder_mc.
| | 02:58 | Now, let's test the movie by pressing
Command+Return or Ctrl+Enter on the keyboard.
| | 03:04 | Click the remove button and there
you have it, the boarder goes away.
| | 03:09 | Let's look at how to communicate
to children in different Timelines.
| | 03:13 | In the next movie we'll use
removeChild and look at how to communicate to
| | 03:18 | children in different Flash movies.
| | Collapse this transcript |
| Controlling Display Objects in different movies| 00:02 | In this movie we'll take a look at
how to control display objects in
| | 00:05 | different Flash movies.
| | 00:07 | If you're following along I'm
actually working in two files. One is called
| | 00:11 | Different_Movies.fla and the other one
is called Popup.fla and these files are
| | 00:16 | both in the Chapter 1
folder with Exercise Files.
| | 00:18 | So, first let's take a
look at Different_Movies.fla.
| | 00:21 | In this movie we have a
button that says picture on it.
| | 00:23 | That's going to just bring up a pop-
up window that's another external SWF.
| | 00:27 | Let's take a look at code though.
| | 00:28 | Let's select the first keyframe in the
actions layer and open up the Actions
| | 00:32 | panel by pressing Option+F9 or F9 on the PC.
| | 00:34 | So we have a loader loading Popup.swf
and we have addChild(loader) putting
| | 00:42 | that popup window on stage.
| | 00:44 | So, I'm going to test the movie by
pressing Command+Return or Ctrl+Enter on the PC
| | 00:47 | and I click the picture and the pop-
up window comes up and this is Popup.swf
| | 00:52 | and we're going to look at the
FLA file for this in just a minute.
| | 00:55 | But when I click the button nothing happens.
| | 00:57 | We want this button to close this window.
| | 01:00 | So, let's close this window and go to
Popup.fla and on the stage you can see all
| | 01:06 | the art for the pop-up window, but
we're really just concerned with the button.
| | 01:10 | So, let's select the first keyframe of
the actions layer and open up the Actions panel
| | 01:14 | by pressing Option+F9 or F9 on the PC.
| | 01:16 | So, we have the button
that already has a listener.
| | 01:18 | It's going to run the closeWindow function.
| | 01:21 | So what we need to do is remove
the loader from the stage in the
| | 01:28 | Different_Movies SWF file.
| | 01:30 | If that doesn't make sense, let's just
go back to Different_Movies.fla and let's
| | 01:33 | take a look at the code here.
| | 01:34 | addChild(loader), that's
what the pop-up window is.
| | 01:39 | So, we want to take the loader off the stage.
| | 01:41 | So, let's go back to Popup.fla and
inside of the closeWindow function.
| | 01:46 | If you want to remove a child
you have to speak with the parent.
| | 01:49 | So the parent has to remove the child.
| | 01:51 | So to refer to the parent,
what's the parent of the loader?
| | 01:54 | It's the main Timeline.
| | 01:56 | So we type this, that's referring to
the main Timeline of the Popup file.
| | 02:01 | We type .parent.
| | 02:04 | The parent of the Popup.swf
file is the loader instance inthea
| | 02:09 | Different_Movies file.
| | 02:11 | So, we're still not at the main Timeline.
| | 02:14 | So, parent navigates backwards.
| | 02:16 | So we want to navigate back one more level.
| | 02:18 | Let's type .parent again and now
we're referring to the main Timeline.
| | 02:23 | So, now we can use removeChild to
take the loader out of the display list.
| | 02:28 | I'll type .removeChild and in parenthesis we'll
pass in this.parent and that is referring to the loader.
| | 02:42 | So the loader loaded this SWF file, the
Popup.swf file and now we're calling the
| | 02:47 | main Timeline in this.parent.
parent and it's removing the loader.
| | 02:50 | In order for this to work, you've to
first test the movie, because we need a SWF
| | 02:53 | file with all this code in it.
| | 02:55 | So, press Command+Return or Ctrl+Enter
on the PC to test the movie and if you
| | 02:59 | click the button you'll get an
error, but just ignore that for now.
| | 03:04 | You're getting the error, because
unless this SWF file is loaded into
| | 03:08 | another file, it doesn't have a grandparent.
Or it doesn't even have a parent for that matter.
| | 03:14 | So let's close the actions panel and
go back to Different_Movies.fla and test
| | 03:21 | the movie by pressing Command+
Return or Ctrl+Enter on the PC, click the
| | 03:25 | picture button, the pop-up window comes up.
Now click the Close button and the
| | 03:30 | closed window disappears.
| | 03:32 | So there is a look at how to control
display objects in different Timelines.
| | 03:37 | In the next movie we'll take a look
at how we can change a child's parent.
| | Collapse this transcript |
| Using addChild to change parents| 00:01 | In this movie we'll take a look
at how to change a child's Parents.
| | 00:04 | If you're following along I'm in
Changing_Parents.fla in the Chapter 1 folder
| | 00:09 | with the Exercise Files.
| | 00:11 | Let's take a look at what we have on the stage.
| | 00:12 | We have got two snowboards and a little stick
figure who's going to end up riding snowboards.
| | 00:17 | If you select them, you can
know their instance names.
| | 00:19 | Just note that the
registration point is in a weird place.
| | 00:22 | I have it at the boarder's foot and then
at kind the left side of the boards and
| | 00:29 | that just to look like the
boarder is riding the boards when you
| | 00:33 | release the mouse button.
| | 00:34 | So, that's not crucial if
you want to change parents.
| | 00:36 | It's just something that
I did for this exercise.
| | 00:38 | Let's see what we have in the Actions panel.
| | 00:39 | Select the first keyframe of actions
layer and open the Actions panel by
| | 00:43 | pressing Option+F9 on the Mac or F9 on the PC.
| | 00:47 | The first eight lines of code add event
listeners to all the objects on the stage
| | 00:51 | so you can drag and drop them.
| | 00:54 | The Drag function is pretty simple.
| | 00:58 | If you're dragging the boarder, then we
used addChild to put the boarder on the stage.
| | 01:03 | What addChild also does is when it adds
a child, it puts it at the very top of
| | 01:08 | its display list, so it's
in front of everything else.
| | 01:10 | When I say in front, I mean like
layers and not like in X and Y positioning.
| | 01:15 | Then you start dragging and also if
you don't click on the boarder, then you
| | 01:19 | just drag the board.
| | 01:21 | So, scroll down in the code and
the Drop function only has stopDrag.
| | 01:26 | So, let's just go right below the
stopDrag and write some code to change parents.
| | 01:32 | So, type if.
| | 01:36 | In the if statement we just want to see
if the boarder is touching a board and if
| | 01:40 | it's touching a board then we want it
to be a child of that board and no longer
| | 01:43 | a child of the main Timeline.
| | 01:45 | So, type boarder_mc.
hitTestObject and we'll do red_mc first.
| | 01:55 | Make sure you close out the
hitTestObject and the if statement.
| | 02:01 | In curly braces, we're going to have
the red movie clip or the red snowboard add
| | 02:08 | the boarder to its display list.
| | 02:11 | red_mc.add Child and we'll add boarder_
mc and on the next line we'll set the
| | 02:21 | boarder_mc's X and Y to 0.
| | 02:24 | Now there it won't be 0 on the main Timeline.
| | 02:27 | It will be 0 relative to red_mc and
that's why I put the registration point in
| | 02:32 | that weird spot, so it looked like the
boarder is writing snowboard. boarder_mc.x = 0.
| | 02:42 | And we'll also set the y to 0.
| | 02:46 | We want to do the same thing with this
conditional statement for the red board
| | 02:49 | and for the blue board.
| | 02:50 | So, if you just copy that whole
conditional statement by selecting and then
| | 02:55 | pressing Command+C or Ctrl+C on the PC
and we'll paste it the next line down and
| | 03:01 | right before the if statement let's
just type else, so that way both of these
| | 03:04 | won't happen, in case the
boarder is touching both movie clips.
| | 03:08 | Now we'll just change red to blue,
both times that it appears in the else/if
| | 03:17 | statement and that's it.
| | 03:19 | So, really all you have to do to
change parents is just use addChild
| | 03:23 | with another object.
| | 03:25 | Let's test the movie and check it out.
| | 03:26 | Press Command+Return or Ctrl+Enter on the PC.
| | 03:31 | Just drag the boarder over to the blue
snowboard and let go of the mouse button.
| | 03:35 | Now you can drag the blue snowboard
and see that the boarder is a child of
| | 03:40 | the blue snowboard.
| | 03:43 | Then grab the boarder and
drop him on the red snowboard.
| | 03:46 | Drag the red snowboard around and you can see
that the boarder is a child of the red snowboard.
| | 03:52 | Now click and drag the boarder and drop
him away from-- make sure you're nice and
| | 03:57 | far away, because the hit test will
work as long as you're within the bounding
| | 04:02 | box area of either the movie clips.
| | 04:04 | You want it to be nice and far away,
release the mouse button and the boarder
| | 04:08 | is a child of the main Timeline again and
there's a look at how to change a child's parents.
| | 04:13 | In the next movie we'll look at a
very important part of display list,
| | 04:16 | the stage.
| | Collapse this transcript |
| Understanding Stage vs. stage| 00:02 | In this movie we'll take a look
at how to work with the Stage.
| | 00:05 | If you're following along, I'm in
Stage.fla in the Chapter 1 folder along
| | 00:09 | with the Exercise Files.
| | 00:10 | Understanding how the stage works in
ActionScript 3.0 is very important because
| | 00:14 | it's different from the
stage in ActionScript 2.0.
| | 00:16 | What I want to accomplish in this
movie is I want the boarder to go to random
| | 00:21 | places around the stage.
| | 00:24 | Now, let's take a look at the
stage width and height right now.
| | 00:28 | So I have Size at 550 wide by 400 high.
| | 00:32 | So now let's go to our code and make
him jump randomly around the stage.
| | 00:35 | Select the first key from the Aactions
layer and open up the Actions panel by
| | 00:38 | pressing Option+F9 or F9 on the PC.
| | 00:41 | So right now we just have the X and Y
position as equaling Math.random(), which
| | 00:46 | is going to be a value between 0 and 1.
| | 00:47 | So if we just multiply that value by
the stage width and stage height,
| | 00:51 | it'll jump at random places around the screen.
| | 00:54 | So I'm going to go after Math.random(),
we'll type an asterisk and we want to do
| | 00:58 | the stage width and stage height.
| | 01:00 | Now, there are two different ways to do that.
| | 01:01 | We can reference the exact numbers or
we can reference them by ActionScript and
| | 01:06 | actually get the width
and the height of the stage.
| | 01:09 | Let me show you what problems you
might run into if you use exact numbers.
| | 01:13 | So I'm going to type 550 right here.
Math.random() * 550 for the X position and
| | 01:18 | Math.random() * 400 for the height.
| | 01:21 | Now if I test the movie, I am
just going to press Command+Return or
| | 01:25 | Ctrl+Enter to test the movie, and keep pressing
it over and over again to see him move randomly.
| | 01:31 | Now he is moving at random places all
around the stage, but what if I were to
| | 01:36 | change the width and height of the
stage? And that would throw everything off.
| | 01:39 | Let's close the window, close the
Actions panel, and click in the Pasteboard and
| | 01:45 | change the size of the movie.
| | 01:46 | Let's say I want mine to be 800x600.
| | 01:55 | So I'm going to change that and click OK,
and now I'm going to test the movie again.
| | 02:00 | So another Command+Return or Ctrl+
Enter. I am just going to move the Flash
| | 02:04 | Player window to the middle of the screen,
and keep testing the movie over and over again.
| | 02:10 | Notice he is not going everywhere in
the Flash Player window. He is just going
| | 02:15 | in kind of this area.
| | 02:16 | So we increased the width
and height of the stage.
| | 02:20 | So that code really doesn't work.
| | 02:22 | I'm going to have to go
back and change the code.
| | 02:24 | Now let's change our stage back to
550x400 and then we'll use ActionScript to
| | 02:29 | make this more dynamic.
| | 02:31 | So he moves along with
the stage width and height.
| | 02:34 | So I'm going to change this
back to 550x400 and then click OK.
| | 02:44 | Go back to the Actions panel by
selecting the first keyframe of the Actions layer
| | 02:48 | and Option+F9 or F9 on the PC.
| | 02:51 | Let's replace the 550 with Stage.width and
this is what you did in ActionScript 2.0.
| | 02:59 | So if you're coming straight over
to ActionScript 3.0, you might assume
| | 03:02 | that this would work.
| | 03:03 | So let's type Stage.height
and replace that with the 400.
| | 03:10 | Test the move by pressing Command+
Return or Ctrl+Enter on the keyboard and
| | 03:14 | notice that you get some errors.
| | 03:17 | These errors are basically saying you can't
access stage properties with the Stage class.
| | 03:24 | So we know all our visual objects are
on the stage, but we don't reference them
| | 03:28 | directly to the Stage
class like we're doing here.
| | 03:30 | That's the capital S means the Stage class.
| | 03:33 | If you want to reference stage
properties, you do it through the stage property
| | 03:38 | of any display object and that is just
with the lowercase S. So let's just close
| | 03:43 | these windows out and change the
uppercase S to a lowercase s.
| | 03:47 | Make sure you do it for both
stage.width and stage.height.
| | 03:52 | Now, test the movie by pressing Command+
Return or Ctrl+Enter on the PC and just
| | 03:56 | keep pressing it over and over again
and notice the range we're getting is not
| | 04:02 | quite the stage width and stage height.
| | 04:05 | The problem here is just stage.width
and stage.height refer to the width and
| | 04:11 | height of the art on the stage and
not the width of the stage itself.
| | 04:14 | So if you want to get the actual width
and height of the stage, you need to use
| | 04:18 | stage.stageWidth and stage.stageHeight.
| | 04:20 | Now let's change the code.
| | 04:22 | Let's close the window and
we'll type in stage.stageWidth.
| | 04:27 | Make sure you type a capital W
and we'll change stage.height to
| | 04:32 | stage.stageHeight with a capital H.
| | 04:36 | Now test the movie using Command+Return
or Ctrl+Enter and keep pressing that and
| | 04:43 | watch the stick figure going to random
places on the screen. It looks like he is
| | 04:49 | going all over the screen, which is great.
| | 04:52 | The full width and height of the stage.
| | 04:53 | Now let's change the width and height
of the stage in the Property Inspector,
| | 04:57 | and see if it works.
| | 04:59 | Let's close the Actions panel.
| | 05:02 | Make sure you deselect everything
and then click the Size button in the
| | 05:06 | Properties Inspector, now let's go
back to 800x600 and then click OK.
| | 05:14 | Now test the movie.
Command+Return or Ctrl+Enter.
| | 05:17 | I am just going to make
sure that it's easy to see.
| | 05:24 | Notice that the little stick
figure goes all over the stage.
| | 05:30 | So now this is more dynamic, doesn't
matter how big the stage is or how wide
| | 05:35 | or high the stage is.
| | 05:36 | The stick figure will go everywhere on
the stage and there is a look at how to
| | 05:39 | work with the stage.
| | Collapse this transcript |
|
|
2. Animating with ActionScript TweensWhy use ActionScript to animate?| 00:00 | In this chapter, we're going to talk about
animating with ActionScript using the tween class.
| | 00:05 | If you're following along, I'm in Dynamic
_With_Events_Final.swf in the Chapter 2
| | 00:09 | folder in the Exercise Files folder.
| | 00:11 | In this movie, we'll talk a little bit
about why you'd want to animate using
| | 00:15 | ActionScript tweens.
| | 00:16 | Let's click on the Home
button and see what happens.
| | 00:20 | Background slides in and the page
content kind of fades in after the
| | 00:25 | background is done sliding in.
| | 00:27 | Let's click the next page.
| | 00:31 | When you click another button, the
page content fades out and then the whole
| | 00:35 | background slides away.
| | 00:36 | The new background slides in and
once it's done sliding in, the new page
| | 00:40 | information slides in.
| | 00:41 | I'm going to click the About
button, and the same thing happens.
| | 00:46 | So I can go back and forth and watch
all of these animations kind of slide in
| | 00:56 | and slide out. Just notice that they
slide in and slide out to different places
| | 01:00 | depending on which button I click.
| | 01:01 | That's because they're all set up in
one big movie and it's animating around,
| | 01:06 | depending on which button I click.
| | 01:07 | That's something you cannot do on the Timeline.
| | 01:10 | When you use ActionScript tweens, you
have access to dynamic animations and
| | 01:15 | that's what we're going
to create in this chapter.
| | 01:17 | You also have access to a bunch of
different easing methods that we'll look at as well.
| | 01:21 | So let's learn how to do
some ActionScript tweens.
| | Collapse this transcript |
| Understanding the Tween class| 00:00 | In this movie, we'll take a look at how
ActionScript tweens work and how you can use them.
| | 00:04 | If you're following along, I'm in
Understanding_Tweens.fla in the Chapter 2
| | 00:08 | folder in the Exercise Files folder.
| | 00:10 | On the Stage, we have buttons that are
going to make the picture fade in and fade out.
| | 00:14 | When we click them, see what
we have in the ActionScript.
| | 00:17 | Select the first keyframe in the
Actions layer and open the Actions panel.
| | 00:20 | So here we just have the In button and
Out buttons listening for mouse clicks and
| | 00:25 | responding with the
fadeIn and fadeOut functions.
| | 00:27 | Let's go to the beginning of this code
and push it down a few lines by pressing
| | 00:31 | Enter or Return on the keyboard.
| | 00:32 | In order to work with tweens, you
need to first import some tween classes.
| | 00:36 | So let's import fl.transitions
.tween and we'll also import
| | 00:44 | fl.transitions.easing.* and that'll
import all of the easing classes.
| | 00:52 | Let's go down a few lines and now we need
to create a variable that holds our tweens.
| | 00:56 | So I'll create a variable and we'll
call this inTween with capital T, data type
| | 01:01 | it to a tween, on the next line, we'll
just create a variable called outTween.
| | 01:05 | It'll be a tween as well.
| | 01:10 | Now what we need to do is tell Flash what
the inTween does and what the outTween does.
| | 01:14 | So let's click inside of the fadeIn
function and define, or give a value to,
| | 01:20 | the InTween and we'll set it equal to a new
tween and in the parentheses, once you
| | 01:27 | type an open parenthesis,
| | 01:28 | you'll see the code hinting.
| | 01:30 | Let's take a look at this real quick.
| | 01:32 | First Flash wants something
called obj that's an object.
| | 01:35 | That's the object that you're going to tween.
| | 01:36 | Then Flash wants the property that
you're going to tween in the form of a string.
| | 01:40 | Then Flash wants the Easing function,
the beginning value, the ending value,
| | 01:45 | the duration, and if you put a number in there,
it's going to by default use milliseconds.
| | 01:51 | And if you put the last value which is
optional and set it to True, that's useSeconds.
| | 01:56 | So the duration represents how long
the animation will last and the default
| | 02:01 | value is in milliseconds and if you
pass in the last parameter to useSeconds as
| | 02:07 | True, then the duration will represent
the seconds, so the animation will last.
| | 02:11 | So let's type in some values.
| | 02:12 | The name of the object we
want to tween is called pic_mc.
| | 02:16 | The property we want to tween is alpha and
that's a string, so you need to put it in quotes.
| | 02:21 | The function we want to
use is called None.easeNone.
| | 02:24 | So type None with capital N.
That's the Easing class.
| | 02:28 | Type .easeNone. That will mean no easing.
| | 02:32 | We don't want parentheses
after easeNone. Then type a comma.
| | 02:36 | The starting value will be 0 and the
ending value after the comma will be 1.
| | 02:41 | The duration will be 1, 1 second long.
| | 02:44 | So we have to type True after
that because we want to use seconds.
| | 02:48 | This line of code will actually fade in
the movie clip when we click the button,
| | 02:52 | but let's copy it and make it fade out first.
| | 02:56 | Select this line of code, press
Command or Ctrl+C on the PC to copy the code,
| | 03:00 | paste the code inside of the fadeOut
function by using Command or Ctrl+V, change
| | 03:05 | the name of the tween from inTween to outTween.
| | 03:08 | Then right after the easing, that's
None.easeNone, see what it says 0,1?
| | 03:12 | We're going to change it
backwards because we're fading out.
| | 03:15 | So we want to change the 0
to 1 and the next 1 to 0.
| | 03:20 | Take a look at your code to
make sure everything is right.
| | 03:22 | Test the movie by pressing Command+
Return or Ctrl+Enter, and Flash is telling us
| | 03:25 | we are accessing an undefined
property pic_mc. Close all these.
| | 03:33 | And that probably means it
doesn't have an instance name.
| | 03:35 | So let's unlock the pic layer.
| | 03:37 | Select the pic on the stage, click in the
Instance Name field and we will just type pic_mc.
| | 03:41 | Now let's test the movie by pressing
Command+Return or Ctrl+Enter and let's
| | 03:46 | start with a fade out and then fade in.
| | 03:54 | There is a look at how to
use an ActionScript tween.
| | 03:57 | In the next movie, you will take a
look at the different easing methods we
| | 04:00 | can work with.
| | Collapse this transcript |
| Using different easing methods| 00:00 | In this movie we'll take a look at the
different types of easing methods that
| | 00:04 | are available in Flash.
| | 00:05 | The best way to find information about
that is to go to Flash Help and look up
| | 00:10 | the package fl.transitions.easing.
| | 00:13 | Let's take a look at these different
classes that we have to work with, Back,
| | 00:16 | Bounce, Elastic, None, Regular and Strong.
| | 00:19 | I'm not going to go into the detail
about what each one does right now.
| | 00:22 | It's actually easier if we just take a
look at it by typing it out in the code.
| | 00:25 | But this is where you want to go if you
want to find more information about what
| | 00:28 | each easing class can do.
| | 00:30 | So let's close the Help menu and I'm
working in Easing_Methods.fla and that's in
| | 00:35 | the Chapter 2 folder in
the Exercise Files folder.
| | 00:37 | So here we have basically the same
thing as we did in the last movie except for
| | 00:41 | this is an animation with a Y
positioning instead of an Alpha.
| | 00:45 | Let's take a look at the code.
| | 00:46 | Select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:49 | You see all the easing classes are
imported and we just have a few functions running.
| | 00:55 | The animIn tween is moving the
boarder's Y positioning from 80 to 250 and
| | 00:59 | the animOut tween is doing the
opposite, pretty straightforward.
| | 01:02 | Currently, we have no easing.
| | 01:03 | So let's take a look at
what this is doing right now.
| | 01:06 | So test a move by pressing Command+
Return or Ctrl+Enter, click the anim in button,
| | 01:11 | and the boarder goes down.
| | 01:13 | Click the animOut button
and the boarder goes up.
| | 01:16 | So that's pretty simple.
| | 01:17 | Let's close this window and make the
boarder bounce by using the Bounce class.
| | 01:24 | So it's like None.easeNone in the
animIn and type Bounce.easeOut and I don't
| | 01:33 | parentheses on the end. And then for the animOut,
changing that easeNone to Bounce.easeIn.
| | 01:42 | Test the move by pressing Command+
Return or Ctrl+Enter and click the anim in
| | 01:46 | button, and the boarder
kind of falls down and bounces.
| | 01:50 | And click the anim out button, and
the boarder bounces and goes back up.
| | 01:55 | Let's close this window and talk
about what the Bounce class does.
| | 01:58 | Basically, the Bounce class makes the movie
clip or the object that's animating bounce.
| | 02:03 | And whether it says out or in, that's
referring to when the object is going to bounce.
| | 02:08 | easeOut will give you a bounce at the end,
easeIn will give you a bounce at the beginning.
| | 02:14 | Let's try easeInOut.
| | 02:16 | So change easeOut in the animIn function
to easeInOut, make sure the In has a capital I.
| | 02:23 | Test the movie, click the anim in
button, the boarder kind of bounces
| | 02:31 | at the beginning and at the end.
| | 02:32 | So there is a look at the Bounce class.
| | 02:34 | So let's change Bounce to
Elastic in the animIn function.
| | 02:41 | And we'll go back to easeOut and
then it will just copy and paste
| | 02:45 | Elastic.easeOut by selecting it and
Command+C or Ctrl+C, paste that right over
| | 02:51 | Bounce.easeIn in the animOut function.
| | 02:53 | That's Command+V or
Ctrl+V. Let's test the movie.
| | 02:58 | Click the anim in button.
| | 02:59 | What happens is the boarder goes below
the final value and bounces back up and
| | 03:03 | then stops at the final value
that we set inside of the tween.
| | 03:07 | Click the anim out button.
| | 03:08 | You kind of see the same thing.
| | 03:11 | So that's what the Elastic class does.
| | 03:13 | Let's look at one more class
and it's called the Back class.
| | 03:16 | So change Elastic to Back, make sure
you have a capital B. We'll change this in
| | 03:23 | the animIn and the animOut functions.
| | 03:25 | Test the movie, click the buttons, and
this is kind of like Elastic except it
| | 03:34 | doesn't have as much of a bounce.
| | 03:35 | It kind of goes past the ending point
and then slides up to the ending point or
| | 03:41 | it goes past the value that you put
the animation to finish at and then it
| | 03:45 | goes back to that value.
| | 03:46 | Notice that when I click the anim in, it stops
at the right place bit it goes a little past.
| | 03:51 | So that's what the Back class does.
| | 03:52 | Let's close this window and there is
a look at the different easing classes
| | 03:56 | that you can work with.
| | 03:57 | So have fun experimenting with them.
| | 03:59 | In the next movie we'll look at the
different tween methods that you can use to
| | 04:02 | control the playback of your tween.
| | Collapse this transcript |
| Understanding Tween Class methods| 00:00 | In this movie we'll take a look
at few methods of the Tween class
| | 00:03 | that allow you to control
the playback of your tween.
| | 00:05 | If you are following along, I'm in tween_
Methods.fla in the Chapter 2 folder in
| | 00:10 | the Exercise Files folder.
| | 00:11 | On the stage we have play, stop,
and rewind buttons that are pretty
| | 00:14 | self-explanatory and we have the boarder.
| | 00:16 | Let's take a look at our code.
| | 00:18 | So select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:21 | This is kind of looks very similar to
what we've done with one big difference.
| | 00:25 | On lines 7 and 8, we have the
boarder animating right away.
| | 00:30 | So notice we are not actually
creating the tween inside of a function.
| | 00:33 | This will make it a
little bit easier to work with.
| | 00:36 | So, let's take a look at the bottom of the code.
| | 00:38 | So the tween is going to
going to start automatically.
| | 00:39 | And we just have skeletons of
functions with event listeners already.
| | 00:43 | So let's test the movie
and see what we have so far.
| | 00:46 | And the boarder just animates from
the top left to the bottom right of the
| | 00:50 | stage and then stops.
| | 00:51 | Now, let's just use some methods of the
Tween class to control this animation.
| | 00:54 | So, let's close out the window, and
the first thing that we'll do is we'll use
| | 00:58 | the stop method to make the
movie not play at the beginning.
| | 01:02 | So let's go to the very bottom of the code.
| | 01:03 | We've two tweens. One's called
xTween, the other one is called yTween.
| | 01:07 | Scroll down the bottom of the code
and we will just type XTween.stop
| | 01:12 | and then yTween.stop.
| | 01:16 | Don't forget the open and closed parenthesis.
| | 01:20 | And now let's test the movie and the
animation is does not play. Pretty simple.
| | 01:24 | It's just like stopping a movie clip.
| | 01:26 | Or let's make the animation play
now when we click the play button.
| | 01:30 | Click inside the playAnim
function and type xTween.resume.
| | 01:36 | It's actually a start method that
starts the tween from the beginning that we
| | 01:40 | could also use right here.
| | 01:41 | The reason I'm using resume is because I
want to be able to pause and resume the
| | 01:45 | playback of the animation.
| | 01:47 | So, let's go down to the next line
and I will type yTween.resume and now
| | 01:54 | let's test the movie.
| | 01:56 | Click the play button and the animation
plays from where it is, which in this is
| | 02:03 | case is actually from the beginning.
| | 02:04 | So that's working okay.
| | 02:06 | Let's make the stop button work.
| | 02:08 | We actually wrote out the stop code
already, so let's just copy and paste it.
| | 02:11 | Select the last two lines of code,
press Command+C or Ctrl +C to copy the code,
| | 02:15 | then inside the stopAnim function,
press Command+V or Ctrl+V to paste the code.
| | 02:20 | I'm just going to tab in that second
line to make it look a little better and
| | 02:23 | now let's test the movie.
| | 02:26 | Click the play button to play the
animation, click the stop button to stop the
| | 02:29 | animation, and the play button
again to resume the animation. Nice!
| | 02:35 | The last thing we want to do is use
the rewind method to rewind the tween
| | 02:39 | back to the beginning.
| | 02:40 | So, let's close this window, click
inside the rewindAnim function and type
| | 02:45 | xTween.rewind, make sure you have
parentheses, select that line of code,
| | 02:55 | copy it, paste the code on the
next line, change xTween to yTween.
| | 03:01 | Test the movie. Click the play button to
play the movie, stop button to stop the
| | 03:07 | movie, and rewind button to rewind the movie.
| | 03:10 | There is a look at some of
the methods of the Tween class.
| | 03:13 | And I say "some" on purpose because there
are actually a lot more, if you want to
| | 03:17 | look them up, you can always select
Tween with a capital T then press F1 on your
| | 03:23 | keyboard and scroll down in Flash Help
and just look at the different methods
| | 03:28 | of the Tween class.
| | 03:29 | You can find that all you want there.
| | 03:31 | We'll explain a little bit more of them
later on in this chapter, but there is
| | 03:34 | a basic look for now.
| | 03:35 | In the next movie we'll take a look at
some tween events so that we can react to
| | 03:39 | when the movie is finished
playing or when it starts playing.
| | Collapse this transcript |
| Responding to tween events| 00:00 | In this movie we will take a look
some different tween events and how to
| | 00:03 | respond to those events.
| | 00:04 | If you're following along
I am in Tween_Events.fla.
| | 00:07 | If you have been working along in the
last movie, then you can just keep that
| | 00:10 | file open and work with that file.
| | 00:12 | Let's take a look our code. Click the
first keyframe in the actions layer and
| | 00:15 | open the Actions panel.
| | 00:16 | It's the same code from the last movie.
| | 00:18 | The first thing we need to do to
respond to tween events is import
| | 00:21 | the TweenEvent class.
| | 00:22 | So let's put that below
the other import statements.
| | 00:27 | It's fl.transitions.TweenEvent.
| | 00:31 | Next what we want to do is
listen for a particular event.
| | 00:34 | So we will add the listener right below
where we create the tween along with our
| | 00:37 | other event listeners.
| | 00:38 | So a few lines above our addEventListener
code type xTween.addEventListener and
| | 00:45 | the event type is TweenEvent.MOTION_FINISH.
| | 00:53 | And we will just run the motionFinish
function, which we haven't defined yet.
| | 00:59 | We don't need to add an event listener
for the yTween because on lines 8 and 9
| | 01:04 | we can see that they're
both lasting for 5 seconds.
| | 01:07 | So one will be sufficient.
| | 01:09 | Let's scroll down to the bottom of the code
and we'll create the motionFinish function.
| | 01:12 | It's created below all the
other functions we created.
| | 01:18 | It will receive an event,
data type will be a TweenEvent.
| | 01:29 | And inside of the function, which is when
the motion is finished, we are going to have the
| | 01:33 | tween play backwards.
| | 01:34 | That's the method of the
tween class called yoyo.
| | 01:36 | So type xTween.yoyo.
Don't forget the parenthesis.
| | 01:43 | On the next line type yTween.yoyo.
| | 01:48 | Test the movie and click the play
button to play the animation and watch once
| | 01:54 | the animation reaches the
end, it'll play backwards.
| | 01:56 | Then when the animation finishes again,
it will yo-yo again and play backwards,
| | 02:02 | because it's running on the
motionFinish every time the motion finishes.
| | 02:05 | I am going to click the stop button and
there's a look at how to work with the
| | 02:09 | Motion_Finish event and a
little bit about tween events.
| | 02:11 | If you want to learn more about tween
events just go to the top of your code,
| | 02:15 | select TweenEvent and press F1 on
your keyboard. Scroll down, look at the
| | 02:22 | constants and you can find which
tween events you would like to use and what they do.
| | 02:27 | Now that you know about tweens,
let's apply what you've learned to create
| | 02:30 | a dynamic map.
| | Collapse this transcript |
| Using tweens to move a dynamic map| 00:00 | In this movie, we will use
ActionScript tweens to build a dynamic map.
| | 00:03 | If you're following along, I am in
Dynamic_Map.fla in the Chapter 2 folder in
| | 00:08 | the Exercise Files folder.
| | 00:10 | Let's take a look at how this file
is organized and what our goal is.
| | 00:13 | I am going to zoom out by
pressing Command+Minus on my keyboard.
| | 00:16 | It might be a little bit hard to see on
my screen, but the way this file is set up,
| | 00:20 | there are some buttons on the stage
and outside of the stage there's one big
| | 00:24 | movie clip called main_mc and this has
a homepage of the website, the News page
| | 00:30 | at the bottom-left, and the About Us page.
| | 00:33 | And when we click either one of these
buttons, the correct page will slide in,
| | 00:38 | and just like we talked about at
the beginning of this chapter, this is
| | 00:40 | something you cannot create on the timeline,
because it moves based on which button you click.
| | 00:45 | And if you were to try to create that
on the timeline, it would be tons and
| | 00:50 | tons of frames and it would be very
challenging to create, and it would take a long time.
| | 00:54 | So let's go to our code
and see what we have so far.
| | 00:56 | Select the first keyframe in the
actions layer and open up the Actions panel.
| | 00:59 | So here's something that's new that we
haven't really talked about yet. Lines 4 to 11.
| | 01:03 | I created some variables here to
represent the x and y values where I want the
| | 01:09 | tween to stop for each button.
| | 01:12 | So, I have got the homeX and homeY and
newsX and newsY and aboutX and aboutY.
| | 01:15 | Let me show you where I got those numbers.
| | 01:19 | For the home, I just moved the main movie clip,
| | 01:21 | so the Home was on the stage,
then I wrote down the X and Y values.
| | 01:25 | I did the same thing for the other two pages.
| | 01:27 | I am just going to press Command+Z to go back.
| | 01:29 | Let's go back to our actions.
| | 01:32 | So, we have all these variables that
represent the positioning of the main
| | 01:36 | movie clip for each page.
| | 01:38 | Then we have tweens created with some
default values. We will look at how to
| | 01:43 | modify those values later in this movie.
| | 01:45 | Let's scroll down and we have the
navigate function, which is going to run when
| | 01:49 | we click any button.
| | 01:50 | We also have this setTween function,
which we will use a little bit later on.
| | 01:53 | So, let's click inside the navigate function.
| | 01:55 | The first assignment is to have Flash
know which button we clicked and be able
| | 01:58 | to respond accordingly.
| | 02:00 | So we will use a
conditional statement to do that.
| | 02:02 | Type if(event.target == home_btn) and
some curly braces. We won't put anything
| | 02:15 | in the curly braces yet, and
then we will use else if below that.
| | 02:19 | Then we will just say else if(event.
target == news_btn) and some curly braces.
| | 02:29 | And if when they click a button, if
it's not the Home button or News button,
| | 02:32 | it's obviously the About button.
| | 02:33 | So I don't need to use if.
I just need to use else. Okay.
| | 02:38 | So far so good and now when we click on
a button, we want the main movie clip to
| | 02:43 | tween to the right place.
| | 02:44 | So, we will use the setTween
function, so we can recycle the code.
| | 02:47 | We don't have to type it in each
one of these conditional statements.
| | 02:50 | Let's scroll down inside of the
setTween function and tweenX and tweenY are the
| | 02:55 | new values that we want the
main movie clip to move to.
| | 02:59 | The way that we change a value inside
of a tween or reset values is we change
| | 03:05 | properties of the Tween class. So, type xTween, dot.
| | 03:09 | You can a whole bunch of
different properties pop up.
| | 03:12 | This is really neat because we have
created our tween at the very top of the code,
| | 03:15 | and we can modify it whenever we want.
| | 03:17 | So if we want to modify the start value,
it's tween.begin. We will set that value first.
| | 03:23 | So the tween is going to start from
wherever the main movie clip is when a
| | 03:27 | button gets clicked.
| | 03:28 | So type main_mc.x. Let's just copy
this line of code by selecting it and
| | 03:35 | pressing Command+C or Ctrl+C, paste
it on the next line using Command+V or
| | 03:38 | Ctrl+V. Change the x's to y's and now
we just need to say where the tween ends.
| | 03:43 | And we will pass that in when we run
the setTween function and that will be
| | 03:46 | equal to tweenX and tweenY.
| | 03:50 | So, below the x and y tween.begin lines,
we will type xTween. The property for
| | 03:56 | the finish or where the
tween will end is .finish.
| | 04:00 | We will set xTween.finish =
tweenX and yTween.finish = tweenY.
| | 04:13 | And the last thing we want to do is to
restart the tween from the beginning.
| | 04:17 | So we will type xTween.start
and then yTween.start.
| | 04:26 | Now, all that's left to do is to pass in
the correct values to the setTween function.
| | 04:31 | So, let's scroll up and find the first if
statement inside of the navigate function.
| | 04:35 | So if event.target is equal to the
home button, then we are going to use
| | 04:39 | setTween and we are going to
have it moved to the home position.
| | 04:42 | And this position is held in variables
at the top of the code, homeX and homeY.
| | 04:47 | Let's scroll down and type setTween and
we will pass in homeX and homeY.
| | 04:58 | And in the else if, we will do the same
thing, so we will pass in newsX and newsY.
| | 05:10 | And in the else, we will
pass in aboutX and aboutY.
| | 05:20 | Once you have that typed out, check
your code and make sure everything looks
| | 05:23 | right and then test the movie.
| | 05:24 | Click the home button.
| | 05:29 | The home page animates in.
| | 05:32 | Click the news button, the news page
animates in, click the about button and
| | 05:38 | the about page animates in.
| | 05:41 | So, click any button and
that page just slides right in.
| | 05:44 | The old page slides out and there you have it.
| | 05:47 | You have successfully built a dynamic map.
| | 05:49 | Now that we have got the map created,
let's use tween events to make the page
| | 05:53 | content fade in once the background animates in.
| | 05:57 | We will do that in the next movie.
| | Collapse this transcript |
| Making the map respond to tween events| 00:00 | In this movie, we will have our map
respond to tween events and fade in the
| | 00:04 | pages when the
backgrounds are finished sliding in.
| | 00:07 | If you're following along, I'm in
Dynamic_With_Events.fla in the Chapter_02
| | 00:11 | folder in the Exercise Files folder.
| | 00:14 | If you're working from the last movie,
you can continue working on that same file.
| | 00:17 | Let's go to the Actions panel and
take a look at our ActionScript.
| | 00:20 | Select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:23 | You will see the same code
that you wrote in the last movie.
| | 00:26 | To work with tween events, we first
need to import the TweenEvent class.
| | 00:30 | So, let's do that where we
import the other classes.
| | 00:32 | Remember it's fl.transitions.TweenEvent.
| | 00:37 | The next step is to create
variables that hold the tween.
| | 00:39 | We will do that where we created
the other tween variables, call this
| | 00:43 | inTween and outTween.
| | 00:45 | These will represent the tweens
that fade the pages in and out.
| | 00:58 | The next step is to create new
instances of the Tween class.
| | 01:01 | We will do that right below where we
have created the new instances of the Tween
| | 01:04 | class for the x and y tweens.
| | 01:05 | So, inTween = new tween and we don't know
which button the user is going to click first.
| | 01:15 | So we will give it a default of the
home movie clip and that's inside of
| | 01:18 | the main movie clip.
| | 01:19 | So, it's main_mc.home_mc.
| | 01:24 | The property we want to tween is alpha.
| | 01:27 | For the easing method, we will use
None.easeNone. The initial value will be zero
| | 01:33 | because we are fading in, the ending value
would be one, the duration is 0.5 and
| | 01:37 | we will use seconds, so we will pass
in true for the last parameter.
| | 01:40 | Take a second to look over that line of code,
and make sure everything is written okay.
| | 01:44 | Let's copy that line and
paste it on the next line.
| | 01:46 | To select that line of code, Command+C
or Ctrl+C to Copy, go to the next line,
| | 01:50 | Command+V or Ctrl+V to paste the
code, change inTween to outTween.
| | 01:55 | And the one thing we need to change
is towards the end of the line of code,
| | 01:59 | where it says zero and then one.
| | 02:00 | We will change it to one and then zero.
| | 02:04 | So, this will fade out. We will start with
an alpha of one, fade to an alpha of zero.
| | 02:07 | The next thing we want to do, before
we do anything else is to make sure the
| | 02:10 | tween is stopped at the beginning.
| | 02:12 | Let's go down at the very bottom
of the code, find xTween.stop() and
| | 02:16 | yTween.stop(), select both of those lines,
press Command+C or Ctrl+C to copy and
| | 02:21 | then paste the code below those lines.
| | 02:23 | Change xTween to inTween and change
yTween to outTween and that way,
| | 02:28 | these tweens won't be fading
automatically. Let's scroll up.
| | 02:31 | The next step is to add event
listeners to listen for the tween events.
| | 02:35 | We want the page to fade in when the
background finishes sliding in and we want
| | 02:39 | the page to fade out when the background
starts sliding out, or when a button is clicked.
| | 02:43 | So, below the inTween = new tween and
outTween = new tween lines of code,
| | 02:49 | let's add the event listeners. Type xTween.
addEventListener(TweenEvent.MOTION_FINISH.
| | 02:58 | That's going to be when the tween
finishes and when it's done sliding in.
| | 03:01 | So, the background's done sliding in,
that's when we want to fade in that movie clip.
| | 03:05 | So, type comma and then type fadeIn.
| | 03:09 | Let's select that line of code, copy it,
by pressing Command+C or Ctrl+C,
| | 03:15 | paste it on the next line with Command+V
or Ctrl+V, change MOTION_FINISH to
| | 03:19 | MOTION_START, change fadeIn to fadeOut.
| | 03:23 | So, as soon as the user clicks a
button and the sliding tween starts, we want
| | 03:27 | to fade out the page.
| | 03:28 | Let's scroll down and towards the
bottom of the code, below all of our
| | 03:31 | functions, let's create the fadeIn and
fadeOut functions and we will fill them in later.
| | 03:35 | And remember they are going
to be receiving tween events.
| | 03:40 | Let's create the fadeIn function first
and after we're done, we will select the
| | 03:47 | whole thing, copy with Command+C or
Ctrl+C and a few lines down, we will paste
| | 03:54 | the code, change fadeIn to fadeOut.
| | 03:56 | Now, the next step is to modify the
setTween function so that it knows which
| | 04:01 | movie clip to fadeIn or to fadeOut.
| | 04:04 | So, we will pass that in the
navigation function when we click a button.
| | 04:07 | So, let's set up the parameter in
setTween. So right after tweenY create a new
| | 04:11 | parameter called tweenMC and the
data type is going to be a MovieClip.
| | 04:16 | This is going to be the movie clip
that's going to fade in or fade out.
| | 04:19 | And inside of the setTween function, right
at the very bottom, the next thing we are going to
| | 04:24 | do is associate the appropriate movie
clip, which is going to be passed in when
| | 04:29 | we run the setTween function
inside of the get navigation function.
| | 04:32 | We are going to associate the
appropriate movie clip to that right tween or to
| | 04:36 | the inTween to fade in.
| | 04:37 | So, type inTween.obj.
| | 04:41 | That property is referring to the
object that's going to be tweened.
| | 04:45 | So, we will set that equal to tweenMC
and since we want the inTween object to be
| | 04:52 | set before we even start the x and y
tweens because the fadeOut function is
| | 04:57 | running when the xTween starts, so
we want to paste this code before
| | 05:02 | xTween.start and yTween.start.
| | 05:03 | So, let's select that code and then
cut it with Command+X or Ctrl+X and then
| | 05:07 | paste it right above the xTween.start
and yTween.start code and that should work
| | 05:11 | a little bit better.
| | 05:12 | The next step is to pass in the tweenMC
parameter when we call the setTween function.
| | 05:17 | So, let's scroll up and then find a
setTween(homeX, homeY) and in there,
| | 05:24 | we will pass in the home movie clip that we want
to fade in and that's inside the main movie clip.
| | 05:29 | So, it's main_mc.home_mc.
| | 05:33 | Now, I'll do the same thing in the else if
statement, where we do setTween for newsX and newsY.
| | 05:38 | So, it will be main_mc.news_mc.
| | 05:41 | Then in the aboutX and aboutY
setTween, we will type main_mc.about_mc.
| | 05:48 | So, now we are sending in the
right movie clip to fadeIn and fadeOut.
| | 05:53 | Now all we need to do is change
the fadeIn and fadeOut functions.
| | 05:56 | Let's scroll down and click
inside of the FadeIn function.
| | 06:01 | Because we changed the inTween's object
to the right object, all we have to do
| | 06:06 | when we want to fadeIn is type inTween
.start and this tween is going to run
| | 06:13 | when the motion is finished.
| | 06:15 | And now what we want to do is after the
new movie clip fades in when I click a
| | 06:19 | button, that movie clip is the
movie clip we want to fade out later.
| | 06:22 | So we are going to set the outTween's
object to the same as the inTween's object.
| | 06:26 | Let's go to the next line and
type outTween.obj = inTween.obj.
| | 06:37 | Let's go inside of the fadeOut
function and this is going to be very simple.
| | 06:39 | All we do is type outTween.start and
that will fade out the appropriate movie clip,
| | 06:46 | because we have set
it in the fadeIn function.
| | 06:49 | Now take a second to look over your
code and soak it all in and think about
| | 06:52 | how everything is working together and
then test the movie and click a button.
| | 07:00 | And then watch the background
slide in and the page fade in when the
| | 07:04 | background is done.
| | 07:05 | Click another button, the page fades out,
the background slides in and the page fades in.
| | 07:10 | It looks like when the background is
sliding in that the page's alpha is one
| | 07:15 | and then once it stops, it fades from
zero to one and that doesn't really look right,
| | 07:19 | so we want to say whenever we
click a button, we set the alpha of the
| | 07:22 | right page to zero.
| | 07:23 | So, let's close this window and
right below the yTween.finish = tweenY and
| | 07:32 | right above the inTween.object = tweenMC
line of code, we will set tweenMC.alpha
| | 07:38 | = 0, and that way, while the pages are
sliding in or the backgrounds are sliding in,
| | 07:45 | the page's alpha is zero and
then it fades in at the right time.
| | 07:47 | Let's test the movie, click on the Home
button, background slides in, the page fades in.
| | 07:54 | That looks good.
| | 07:55 | Click on the news button, the page fades out.
| | 07:58 | And the new background
slides in and the page fades in.
| | 08:02 | And that is looking great.
| | 08:06 | And there you have it.
| | 08:07 | We just created a dynamic map using tweens.
| | Collapse this transcript |
|
|
3. Using XML Data and E4X SyntaxIntroduction to XML data| 00:00 | In this chapter, we are going to talk
about working with XML data in Flash.
| | 00:04 | Before we talk about working with XML
in Flash, we will talk about what XML is.
| | 00:09 | If you're following along, you can open
up the images.xml file and that's inside
| | 00:13 | of the data folder in the Chapter_03
folder in the Exercise Files folder.
| | 00:18 | And you can just open up
this file in any text editor.
| | 00:21 | Let's talk about how this file
is organized and how XML works.
| | 00:26 | XML stands for Extensible Markup Language.
| | 00:30 | You can kind of think of it like HTML,
except instead of the tags being table
| | 00:36 | and other things like that, you can make up
your own names for tags and make them meaningful.
| | 00:41 | In this file, I have an opening tag.
Tags have brackets around them or less than
| | 00:47 | and greater than signs.
| | 00:48 | I have an opening tag called
images and a closing tag called images.
| | 00:53 | Notice the closing tag looks just
like the opening tag, except for it has a
| | 00:56 | forward slash, right before the word images.
| | 00:59 | And that's how opening and closing
tags work in XML and also in HTML.
| | 01:05 | Inside of the images tag, we have a
bunch of single image tags and these
| | 01:10 | represent the location of images and
thumbnails in the Chapter 3 folder.
| | 01:15 | The opening tag for each image contains
the source or the large image.
| | 01:24 | This is called an attribute, and that's
where inside of an opening tag there is some
| | 01:28 | name that means something, an equal
sign, and an then a value inside of quotes.
| | 01:32 | So, we have the source at images/Image1.
jpg and the thumb is referring to the
| | 01:39 | path of the thumbnail.
| | 01:40 | Inside of the tag, we have a value, and
that's just the description of the image.
| | 01:46 | I kept it pretty generic, so it's
pretty easy to read and understand.
| | 01:49 | But when using XML yourself, the names
of the tags don't have to be images.
| | 01:53 | They can be any name you want, and that's
why it's extensible, because it's dynamic
| | 01:58 | depending on what you choose to name them.
| | 02:00 | So, you have tags that have meaning.
| | 02:02 | I could easily open this file and tell
that this file contains a bunch of images.
| | 02:07 | Because that's the name of the first tag.
| | 02:09 | Now that we have a basic idea of
how XML works, let's talk about how to
| | 02:13 | work with XML in Flash.
| | Collapse this transcript |
| Understanding E4X syntax| 00:00 | When we're working with XML in
ActionScript 3.0, we're going to use something
| | 00:04 | called you for E4X syntax.
| | 00:08 | And E4X stands for ECMAScript for XML.
| | 00:11 | What that means to you is that you have a
really easy way to use XML data in Flash.
| | 00:17 | At least a lot easier than the way
using XML data worked in ActionScript 2.0.
| | 00:22 | In this movie, I'm briefly going to
show how E4X syntax looks and how it's
| | 00:27 | different from XML in ActionScript 2.0.
| | 00:30 | I'm just going to open up the Actions panel
on the first keyframe of this blank document.
| | 00:35 | And in ActionScript 2.0, if you wanted
to bring in XML data, you've to create a
| | 00:42 | variable, call it something, data type
which is XML, have it be new XML, and then
| | 00:54 | make the XML object load something.
| | 00:59 | And once you had the XML loaded in an
external file, you had to store the XML in
| | 01:06 | an array and use confusing
syntax to navigate through the XML.
| | 01:10 | Let me show E4X syntax works.
| | 01:12 | I'm just going to keep the myXML data typed
to XML and I'm going to just type XML.
| | 01:19 | I am just going to make up my own XML here.
| | 01:23 | I am just going to call it name.
| | 01:24 | I am going to put my name inside of the
tags and I'm going to go to the next line.
| | 01:33 | I am just going to trace myXML.
| | 01:42 | And Flash gives me the value inside of the tags.
| | 01:47 | So actually, I can just create as
much XML as I want in Flash without ever
| | 01:51 | having to load in an external file.
| | 01:53 | That's something pretty neat that
you can do with ActionScript 2.0.
| | 01:57 | So, there is brief look at E4X syntax.
| | 01:59 | In the next movie, we'll go a little
bit deeper and start writing our own XML.
| | Collapse this transcript |
| Creating raw XML data| 00:00 | In this movie, we'll take a look at
creating raw XML data using E4X syntax.
| | 00:06 | What I mean when I say raw XML data
is like what we've created in the last movie,
| | 00:10 | where you just tell Flash the XML tags.
| | 00:14 | If you're following along, I'm in Raw_
XML.fla in the Chapter 3 folder in the
| | 00:19 | Exercise Files folder.
| | 00:22 | Let's select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:27 | Here I just pasted the code from the XML
file we looked at earlier in this chapter.
| | 00:32 | What we're going to do is take this data
right here and convert it to XML right in Flash.
| | 00:38 | So, right before this XML, I'm going to go
up one line and create a variable to hold it.
| | 00:44 | I'm going to call the variable imagesXML,
data type it to XML, and then I am just
| | 00:52 | going to type space equals space, then
I'm going to put a semicolon after the
| | 00:57 | very end of the XML.
| | 00:58 | Let's go to the next line of code
below all of this and let's just trace
| | 01:04 | imagesXML and see what we get.
| | 01:10 | If you look in the Output
window, you can see all of the XML data.
| | 01:21 | Now that we have this data and
it's in the XML format, we can access
| | 01:25 | different parts of the data.
| | 01:27 | Let's close these windows.
| | 01:30 | Let's click at the end of the trace statement,
right after imagesXML and type .children.
| | 01:39 | After children make sure you
have an open and closed parentheses.
| | 01:43 | The XML.children method gives us
something called an XML list, which is
| | 01:48 | basically an array of XML nodes.
Nodes being all of the information from the
| | 01:55 | opening and closing tags of each of these lines.
| | 02:00 | So, this would be one node.
| | 02:02 | The opening images tag would be one node,
and each individual image tag is a node.
| | 02:08 | All right.
| | 02:10 | Let's test the movie. See what we get.
| | 02:15 | So, we're getting the same thing.
| | 02:25 | Now that we have an array, we can get
things like the length and we can
| | 02:30 | reference each individual
object by its index number.
| | 02:34 | So, let's say I wanted to get
the description of the first image.
| | 02:40 | Remember we have an array. images.XML.
children gives us an array, or an XML list
| | 02:45 | that's sort of like an array.
| | 02:47 | So after that, we can just use square
brackets, type zero, and then we get the
| | 02:52 | data inside of the first XML node.
| | 02:55 | So, let's test the movie, and
we get Description of image 1.
| | 02:59 | That's how to get data inside of an XML node.
| | 03:04 | You can reference it by its index number.
| | 03:08 | Another type of data we
can get is attribute data.
| | 03:12 | Let's say we want to get the
source of the first image node.
| | 03:16 | Click right after the closed
square bracket in the trace statement.
| | 03:20 | Type .attribute and in parentheses,
pass in the attribute that you would like
| | 03:31 | to get the value of.
| | 03:32 | We want to get the value of source and
it's going to be in the form of a string.
| | 03:36 | So type it in quotes, just type source,
and then test the movie and what we're
| | 03:42 | looking to get is images/Image1.jpg.
| | 03:49 | And it shows up in the Output window.
| | 03:51 | So, there is a brief look at how to
create raw data in XML and how to get the
| | 03:56 | data from an XML object.
| | 03:59 | Now that we know a little bit about
the basics of working with XML and E4X
| | 04:03 | syntax, we'll learn how to
load XML from an external file.
| | Collapse this transcript |
| Loading external XML data| 00:00 | In this movie, we're going to talk
about how to take an external XML file
| | 00:05 | and load it into Flash.
| | 00:06 | If you're following along, I'm in
Loading_XML.fla in the Chapter 3 folder in
| | 00:11 | the Exercise Files folder.
| | 00:13 | This is actually just a blank document.
| | 00:15 | So, you can create a new document as well.
| | 00:16 | I am going to select the first keyframe of
the actions layer and open up the Actions panel.
| | 00:21 | When we're loading XML, we're
going to use the URLLoader class.
| | 00:28 | So let's create a variable called
xmlLoader and we'll data type to URLLoader.
| | 00:35 | Set it equal to a new instance of the
URLLoader class.
| | 00:43 | And then we'll have it load the XML file.
| | 00:45 | So xmlLoader.load and we'll just create a
new URLRequest within these parentheses.
| | 00:52 | Type new URLRequest.
| | 00:57 | And in the parentheses for the URLRequest,
| | 01:00 | this is going to be a string, so type
"data/images.xml" and make sure you close
| | 01:11 | out both the new URLRequest and the load method.
| | 01:15 | Go down a few lines. Now we'll just add
an event listener to listen for when the
| | 01:22 | file is finished loading and ready to use.
| | 01:25 | So, it's xmlLoader.addEventListener
and we're listening for Event.COMPLETE.
| | 01:33 | And when it's complete, we'll run xmlLoaded
function, which we'll make in just a second.
| | 01:38 | Let's go down a few lines and define
the xmlLoaded function, so type function
| | 01:44 | xmlLoaded, whenever it's going to
receive an event, and the data type is Event.
| | 01:55 | In the xmlLoaded function we'll just use
a trace statement to make sure the file
| | 01:59 | is loaded successfully.
| | 02:01 | Type trace and in the parentheses
we'll pass in event.target.data.
| | 02:13 | Let's test the movie and we
see our XML. Looking good.
| | 02:23 | So, now that we've successfully loaded
our XML file, we'll take that data and
| | 02:27 | actually turn it into XML
and use it in the next movie.
| | Collapse this transcript |
| Using the XMLList class| 00:00 | In this movie, we'll take the data that
we've loaded from the external file in
| | 00:03 | the last movie and turn it
into data that we can use.
| | 00:07 | If you're following along, I'm in
XMLList.fla in the Chapter 03 folder in the
| | 00:12 | Exercise Files folder.
| | 00:13 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:16 | Here is the code that we wrote in
the last movie that loads the XML file.
| | 00:21 | Now what we'll do is create an XML object
that will hold the data that we're loading in.
| | 00:27 | So, above all this code, let's create a
new variable and call this XML and the
| | 00:33 | data type will be XML.
| | 00:34 | Just type a semicolon. We'll give it a
value inside of the xmlLoaded function.
| | 00:40 | Click inside of the xmlLoaded
function and type xml = and if you just typed
| | 00:45 | event.target.data, that
would be the intuitive thing.
| | 00:52 | It would make sense if that would work.
| | 00:53 | Because we are loading an XML file,
we'll set it equal to event.target.data.
| | 00:57 | And if you test the movie now,
let's see that you get an error.
| | 01:02 | Basically, Flash is telling that you
can't convert all this stuff in that file
| | 01:06 | or all the data inside of the XML file to XML.
| | 01:09 | But we know this is XML, so we need to
tell Flash, this data is indeed XML data.
| | 01:13 | Now there are several different ways to do this.
| | 01:16 | You could type after event.
target.data as XML.
| | 01:23 | Now I test the movie, I don't get any errors.
| | 01:26 | But this way might not
work with loading an XML file.
| | 01:30 | If we go to the next line of
code and trace xml, we get null.
| | 01:37 | And we know that there is something
in that file, because we just saw it.
| | 01:41 | So, let's just close these windows and
we'll do another type of data conversion.
| | 01:46 | So, let's just erase this as XML and
right before event.target.data, we'll type
| | 01:52 | XML and wrap event.target.data in parentheses.
| | 01:58 | This is another way to convert
data into another type of data.
| | 02:02 | Let's test the movie and now we're
getting our XML data just like we like it.
| | 02:09 | Let's close these windows.
| | 02:11 | So now that we have XML as XML or
XML data from an external file in Flash
| | 02:18 | and where Flash knows it is XML, let's take
that data and put it inside of an XML list.
| | 02:23 | Using an XML list gives you a lot more
power when working with XML, because it
| | 02:28 | basically treats the XML data as an array and
that makes it really easy for you to work with.
| | 02:34 | In addition to being similar to arrays,
XML list also gives you a lot of methods
| | 02:38 | to work with XML data.
| | 02:39 | So, let's create an XMLList
object right below our XML declaration.
| | 02:45 | We'll just call this variable xmlList,
and data type it to XMLList and we'll set
| | 02:52 | the value inside of the xmlLoaded function.
| | 02:55 | So right below the xml = XML(event.
target.data) line, let's type xmlList =
| | 03:04 | xml.children, and open and closed
parentheses and that will return to us an XML list.
| | 03:14 | So, then we have an XML
list that we can work with.
| | 03:16 | Now what we'll do is use a trace statement
to talk about the power of using the XML list.
| | 03:21 | The XML class is really great for
working with XML data that only has one node.
| | 03:26 | But if I type trace(xml.length), I just get 1.
| | 03:38 | Or if I trace(xmlList.length) and test
the movie, I get 4, which is actually how
| | 03:47 | many nodes are inside of the XML file.
| | 03:49 | So, the XMLList works with multiple
XML nodes, which is usually what you're
| | 03:54 | going to be working with, with XML data.
| | 03:57 | Now that we have the XML data in a
form that we can work with, we'll use that
| | 04:01 | data to load images from external files.
| | Collapse this transcript |
| Using XML data to load external images| 00:00 | In this movie, we will use XML data
to load images from external files.
| | 00:05 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:09 | It's the same code that we've been working with.
| | 00:11 | To load images you need to use the Loader class.
| | 00:14 | So let's create an instance of the
Loader class at the top of the code.
| | 00:17 | Type var, we will call this imageLoader.
| | 00:24 | Data type it to Loader, and we
will give it a value inside of the
| | 00:27 | xmlLoaded function.
| | 00:28 | Let's go inside the xmlLoaded function,
go down a few lines, and now we will
| | 00:35 | create a loop to load all of the thumbnails.
| | 00:37 | We will get the path to all
the thumbnails from the XML file.
| | 00:42 | Type for, we will create a variable
called i. Data type will be integer, it's int.
| | 00:50 | Remember that's a
whole number. Equal to 0.
| | 00:54 | As long as i is less than the
length of our XML nodes, which is going to
| | 00:59 | be xmlList.length(); i++).
| | 01:11 | Inside of the loop we will make the
imageLoader a new instance of the Loader class.
| | 01:22 | Then we will make the imageLoader load
with all of the thumbnails that are
| | 01:26 | inside the XML file.
| | 01:27 | Let's type the imageLoader.load.
| | 01:30 | We need to use a URL request to load a file.
| | 01:34 | So we will create new URLRequest.
| | 01:41 | And inside of the parentheses we will
pass in xmlList, index i, .attribute.
| | 01:53 | Another open parenthesis
and the attribute is called thumb.
| | 02:00 | Type some closed parenthesis.
| | 02:02 | We will need one for the attribute,
we will need one for the URLRequest and
| | 02:07 | we will need one for the Load method.
| | 02:08 | So we should have 3. Let's go down and we will
set the X and Y positions of the imageLoader.
| | 02:14 | This is going to load 4 thumbnails, so
we want them to be kind of spread out.
| | 02:17 | So let's set the X position equal to 25.
| | 02:23 | So let's have it be 25 pixels from the
left edge or the stage and we will set
| | 02:28 | the Y position equal to i times 150 and
this isn't some random number. I actually
| | 02:39 | measured out how much space
it would be, and then + 25.
| | 02:45 | So the images will start 25 pixels
from the top and then go from there.
| | 02:49 | Let's go down to the next line and now
we need to put the imageLoader on the
| | 02:52 | stage using addChild.
| | 02:53 | So use addChild and it will
add imageLoader to the stage.
| | 03:01 | Take a second to look over all your
code and make sure everything works and
| | 03:05 | makes sense, test the movie and
all the thumbnails are on the stage.
| | 03:11 | Now that we have the thumbnails working,
we will make it so when you click the
| | 03:15 | thumbnails, it'll load an image
into the main part of the stage.
| | Collapse this transcript |
| Using XML data to create an image gallery| 00:00 | In this movie, we will use the thumbnails
from the last movie to build an image gallery.
| | 00:04 | If you're following along I'm in Dynamic
_Gallery.fla in the Chapter 3 folder in
| | 00:10 | the Exercise Files folder.
| | 00:12 | Let's select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:15 | You will see the same code that
we've written throughout this chapter.
| | 00:21 | Let's go inside of the loop in the
xmlLoaded function and right below the
| | 00:26 | addChild method, let's add an
event listener to the imageLoader.
| | 00:30 | So type imageLoader.addEventListener.
| | 00:37 | We want to listen for a mouse click.
| | 00:39 | So when you click on the
thumbnail, you see the full-size image.
| | 00:49 | So type MouseEvent.CLICK.
| | 00:51 | We are going to run the showPicture function.
| | 00:58 | Scroll down to the very bottom
of the code and we will define the
| | 01:00 | showPicture function.
| | 01:01 | So type the function showPicture and
the type of event is MouseEvent.
| | 01:16 | And inside of the showPicture function
we want the imageLoader to load the
| | 01:22 | appropriate full-size image.
| | 01:24 | Before we do that we need a way to connect
the full-size images to the thumbnail images.
| | 01:29 | One way to do that is by using the name
property of the imageLoader to hold the
| | 01:36 | path to its full-size image.
| | 01:38 | Let's take a look at how that works.
| | 01:41 | Right before addChild(imageLoader) in
the loop, let's type imageLoader.name = .
| | 01:53 | Let's talk about this
before we type anything else.
| | 01:55 | The name property of display
objects refers to their instance name.
| | 02:01 | As we learned at the very beginning
of this title, we don't need to give
| | 02:04 | anything an instance name.
| | 02:06 | So essentially it's a
string that we are not using.
| | 02:11 | So what we can do is have the string be
the value of the path to the big image.
| | 02:16 | So each thumbnail knows what big image
it's supposed to show, and since we're
| | 02:21 | not using this name property anyway,
this is a great place to put that path.
| | 02:26 | So we will set the name =
xmlList, index i, .attribute("source").
| | 02:41 | And that's the path to the big image.
| | 02:44 | Now in the showPicture function,
we can reference the big image path
| | 02:49 | by event.target.name.
| | 02:51 | Let's go to the
showPicture function and do that.
| | 02:56 | Type imageLoader = new Loader
and then imageLoader.load.
| | 03:06 | We will have to create a new URLRequest.
| | 03:16 | And for the URLRequest
type event.target.name.
| | 03:23 | That will be the path to the big picture.
| | 03:25 | Make sure you put enough parenthesis to close
out both the URLRequest and the Load method.
| | 03:31 | Let's go to the next line and set the X
positioning of the imageLoader and this
| | 03:35 | is going to be the full-size image.
| | 03:37 | So we want to push it to the right a little bit.
| | 03:39 | Let's type imageLoader.x = 200.
| | 03:46 | That should give us enough space between
the thumbnails and the full-size images.
| | 03:50 | After that the last thing we need
to do is use addChild to put the
| | 03:56 | imageLoader on the stage.
| | 03:59 | Let's test the movie and click the thumbnails.
| | 04:03 | You can see the full-size images pop up.
| | 04:07 | It looks like we need to set the Y
position of the full-size images because
| | 04:11 | they should probably line up with these
thumbnails or at least there should be some space here.
| | 04:15 | So let's just set that and test it
one more time inside of the showPicture function.
| | 04:22 | We will set imageLoader.y = 25
and we will test the movie and click on
| | 04:30 | the thumbnails and that looks a lot better.
| | 04:35 | Now we have an image gallery with all
of the data coming from an XML file.
| | 04:41 | Because this image gallery is coming
from an XML file, you don't need to go back
| | 04:46 | in Flash or re-export the SWF file if
you want to change the images or add more
| | 04:51 | images, because the data is going to
be read every time the SWF file runs and
| | 04:55 | that gives us a lot of power.
| | 04:57 | In the next movie, we will get the
descriptions of each of these images from the
| | 05:00 | XML file and place them below the image.
| | Collapse this transcript |
| Displaying text from an XML file in your gallery| 00:01 | In this movie, we will use our XML data
to add text fields to our image gallery.
| | 00:05 | If you're following along I am in
Gallery_TextField.fla in the Chapter 3 folder
| | 00:10 | in the Exercise Files folder.
| | 00:12 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:16 | Let's scroll up to the top of the code.
| | 00:18 | First thing we are going to do is use
ActionScript to create a text field.
| | 00:21 | Let's do that above all the other code.
| | 00:27 | Let's create a variable called
imageText and data type it to TextField.
| | 00:36 | I want to set it equal to a new
instance of the TextField class.
| | 00:41 | Before we do anything else let's
make sure we put it on the stage and set
| | 00:44 | the autoSize property.
| | 00:46 | Let's scroll down at the very bottom of
the code and first we will set the autoSize.
| | 00:50 | So type imageText.autoSize.
| | 00:58 | We will set that equal to TextFieldAutoSize.
| | 01:04 | That's a class that's used for
autosizing text and then it's .LEFT.
| | 01:09 | That will anchor the left edge of the
text field and so it will go out to the right
| | 01:16 | or expand to the right.
| | 01:19 | Let's go inside of the
showPicture function next.
| | 01:22 | Now what we will do first is set the X
and Y position of the right text field and
| | 01:29 | then we'll put the text in the text field.
| | 01:30 | So let's go right below the addChild
and type imageText.x and we will set
| | 01:39 | that equal to imageLoader.x. Then we will
set the Y positioning of the imageText to 351.
| | 01:51 | That will put it right below the
image with a little bit of space.
| | 01:56 | Now we want to put text in the
text field, we have to find out what text
| | 02:00 | goes with what image.
| | 02:02 | To do that let's go to the next
line and we will create a loop.
| | 02:06 | In the loop, we will test to see for
all of the nodes in our XML file, if the
| | 02:13 | source of that node
matches the event.target.name.
| | 02:22 | So that basically means if we clicked on
the picture that goes with the text we want.
| | 02:27 | If that doesn't make a whole lot of
sense, let's just type it out and we will
| | 02:31 | explain it as we go.
| | 02:33 | Let's type for, create a variable.
| | 02:35 | We will call this j, data
type it to an integer, = 0.
| | 02:42 | As long as j < xmlList.length.
| | 02:49 | j++ and inside of the curly braces
we will use a conditional statement.
| | 02:56 | Let's type if.
Then in the parenthesis, type xmlList,
| | 03:06 | index j,
| | 03:09 | .attribute,
| | 03:15 | and then source in parenthesis.
Make sure source is in quotes.
| | 03:21 | Is equal to, so two equal signs,
event.target.name.
| | 03:29 | Close the parenthesis
and type some curly braces.
| | 03:32 | Let's take a look at what this is doing.
| | 03:34 | We are creating a loop.
| | 03:37 | It's running for each XML node and we
are seeing if the source of the XML
| | 03:49 | for each iteration of the loop is
equal to the image that we clicked on.
| | 03:57 | When we find the right XML object,
or when j is correct, we can set the
| | 04:02 | text field text equal to xmlList j.
So let's click inside of the conditional
| | 04:07 | statement and I will type
imageText.text = xmlList oindex j.
| | 04:19 | Take a second to review your code and
it looks like I forgot to do something.
| | 04:23 | And that is addChild.
| | 04:26 | So let's go to the very bottom of the
code, use addChild to put imageText on the
| | 04:30 | stage and let's review your
code again. It can't hurt.
| | 04:36 | And then test the movie and click on
the images and watch the description show
| | 04:42 | up in the text field
below the big image.
| | 04:49 | Nice. Well, there you have
a dynamic image gallery.
| | 04:53 | In the next movie, we will take this
image gallery and apply what we learned in
| | 04:58 | the last chapter about ActionScript
tweens so that the images fade in when we
| | 05:02 | click on these thumbnails.
| | Collapse this transcript |
| Adding tweens to your gallery| 00:00 | In this movie, we will apply what we learned in
the last chapter about tweens to our slideshow.
| | 00:07 | If you're following along, I am in
Gallery_tween.fla in the Chapter 03 folder in
| | 00:12 | the Exercise Files folder.
| | 00:14 | Let's go to the first keyframe at the
Actions layer and open up the Actions panel.
| | 00:18 | Let's scroll all the way up to the
top of the code, and remember the first
| | 00:22 | thing that you need to do when you are creating
an ActionScript tween is import the tween classes.
| | 00:27 | So, above everything else,
let's import the tween classes.
| | 00:31 | So, we are going to import fl.
transitions.Ttween and we will import the easing
| | 00:42 | classes fl.transitions.easing.*.
| | 00:50 | So, now let's go down a few lines and
create a variable to hold our tween.
| | 00:53 | We will call the tween fadeTween.
| | 00:55 | I will type fadeTween and data type it
to a Tween, scroll all the way to the
| | 01:02 | bottom of the code and in this
showPicture function, which is what's going to show
| | 01:06 | whenever the user clicks on a thumbnail,
| | 01:09 | we are going to fade in the image.
| | 01:11 | So right below the loop, type fadeTween
= new tween and then in parenthesis
| | 01:25 | we will pass in all of our values.
| | 01:27 | The object we want to fade is imageLoader.
| | 01:35 | The property is alpha.
| | 01:37 | Make sure that's in quotes.
| | 01:39 | The function, we will just use None.
| | 01:44 | Just type None.easeNone.
| | 01:49 | Starting value would be 0,
ending value would be 1.
| | 01:51 | We will have it last for 1 second,
and we will use seconds, so we will type
| | 01:58 | true at the very end.
| | 02:00 | After that, type a semicolon and test
the movie and click on the different
| | 02:05 | images and watch them fade in.
| | 02:14 | And now we have a gallery that uses
XML and tweens to change between images.
| | Collapse this transcript |
|
|
4. Working with Packages and ClassesReviewing packages and classes| 00:00 | In this chapter we are going to be
working with classes and packages.
| | 00:04 | In this movie, we will just
review what packages and classes are.
| | 00:07 | If you are following along, I am in
understanding.swf and that's in the
| | 00:11 | understanding folder in the Chapter
4 folder in the Exercise Files folder.
| | 00:16 | The simple definition of a package
is a folder that contains classes.
| | 00:20 | If you are following along in this file,
you can click on the folder and see the
| | 00:24 | classes come out of the package.
| | 00:26 | This package is the folder, classes
are the files, and you are pretty familiar
| | 00:30 | with packages and classes.
| | 00:31 | If I click the package again, we can see
that the flash.display package contains
| | 00:36 | these three classes,
MovieClip, Loader and Sprite.
| | 00:40 | I know this may seem very basic but as
we go forward it's really fundamental to
| | 00:43 | understand the difference
between packages and classes.
| | 00:47 | The last thing you want to know,
which you are probably already are very
| | 00:49 | familiar with, is that a package refers
to the place where the files can be found.
| | 00:56 | So flash.display is actually
a path to the following files.
| | 01:00 | Now that we have a good foundation of
what packages and classes are,
| | 01:03 | let's start working with them.
| | Collapse this transcript |
| Creating a template for class files| 00:00 | Since we are going to be working
so much with classes and packages in
| | 00:03 | this chapter, it's a good idea to create a
template that we can work from and recycle.
| | 00:08 | In this movie we will build a template
that we can reuse and along the way we
| | 00:12 | will review some coding structure
of creating packages and classes.
| | 00:15 | So, right now I am just in a blank
ActionScript file, so make sure to create one
| | 00:20 | and before we do anything else,
we are going to save this file.
| | 00:23 | So, let's just go to File and then Save As
and it's very important where we save this file.
| | 00:29 | Now, I am going to save it in the
Chapter 4 folder, in the Template folder, and
| | 00:34 | I am going to create
a new folder called classes.
| | 00:44 | And in this folder, I am
going to create a path structure.
| | 00:47 | Now when you are creating your own
packages, you want to organize them in the
| | 00:52 | same way that they're organized in Flash.
| | 00:54 | For example, Flash has the flash.display
package, which has all kinds of display
| | 01:00 | object elements or display object classes.
| | 01:02 | So, I am going to create some
interactive classes, so I am going to create a new
| | 01:06 | folder in here and I am
going to call the first one Todd.
| | 01:10 | You can use your own name if you want.
| | 01:13 | Then inside of the Todd folder I am
creating a new folder called Interactive.
| | 01:21 | And now I have sort of a class structure.
| | 01:23 | We will use this a little bit later on.
| | 01:26 | To save the template, let's just save
it right in the Classes folder and call
| | 01:31 | the name of the template, Template.as.
| | 01:37 | Once you have that all setup, click
Save and now we are ready to create our template.
| | 01:44 | Remember when you define classes in
ActionScript 3.0 you need to use the keyword package.
| | 01:50 | All classes need to be part of a package.
| | 01:52 | Let's put some curly braces.
| | 01:56 | Because this is a template, let's
just import all the classes that we
| | 01:59 | could possibly use.
| | 02:00 | That way we don't have to waste
time retyping import statements.
| | 02:03 | So type import flash.display.* and by
the way, it's important to talk about what
| | 02:11 | happens with classes that
you important and don't use.
| | 02:13 | You are safe knowing that Flash doesn't put
that class information inside of your SWF file.
| | 02:19 | So, if you import and don't use it, you
don't have to worry about file size or
| | 02:22 | processor speed slowing down or anything.
| | 02:26 | So import flash.display.*, import flash.events
.*, and then we can get all of our mouse events.
| | 02:36 | We have been working with tweens a lot,
so we will import fl.transitions.*.
| | 02:42 | And we will import fl.transitions.easing.*
and that should be just about all we are
| | 02:50 | going to work with in this chapter.
| | 02:52 | You can import more classes if you'd like to.
| | 02:54 | Let's go down a few lines
and declare our template class.
| | 02:58 | So, just type public class Template and
since most of the time we are going to
| | 03:05 | be extending the movie clip class, we
will just type extends MovieClip.
| | 03:13 | And we will type some curly braces and
I will declare a constructive function.
| | 03:26 | Put some curly braces and that
looks like a nice template.
| | 03:31 | Let's save the file and now we are good to go.
| | Collapse this transcript |
| Defining a reusable class path| 00:00 | In this movie we will take at
defining a reusable class path.
| | 00:04 | When I say class path, I am talking
about the path to the folder that contains
| | 00:08 | all of your packages. Not the packages
that Flash made, your custom packages.
| | 00:14 | If you are following along, I am in Class
_Path.fla, in the Class Path folder, in
| | 00:19 | the Chapter 4 folder, in
the Exercise Files folder.
| | 00:22 | All we have to do to start with the
class path is click the Settings button in
| | 00:28 | the property inspector. By
ActionScript version click Settings.
| | 00:35 | Right above the class path area, click
the target icon to browse to a path, and
| | 00:43 | the folder that you want to select,
it's in the Chapter 4 folder, then in the
| | 00:48 | Class Path folder and then the Classes folder.
| | 00:53 | Now, if we want to work with any
classes inside of that folder and if I put a
| | 00:58 | class file inside of the Todd folder
and then inside the Interactive folder,
| | 01:02 | the path to that folder would then be todd.interactive
because Flash already knows the Classes folder.
| | 01:08 | So, Flash is already familiar with
this area and you can navigate to anything
| | 01:12 | from inside of the Classes folder.
| | 01:14 | So, let's select the Classes folder
and then click Choose and then click OK.
| | 01:19 | Just click OK one more time to get out of the
Publish Settings dialog and there you have it.
| | 01:25 | You have setup the class path.
| | Collapse this transcript |
| Creating a DisablingButton class from a template| 00:00 | In this movie, we will use the
template we built at the beginning of this
| | 00:03 | chapter to create a new class.
| | 00:06 | If you are following along, I am in
Template.as and that file is what we created
| | 00:11 | at the beginning of this chapter.
| | 00:12 | If you can't find it, go into the
Exercise Files folder and then into Chapter 4,
| | 00:17 | and then into the Disabling button
folder and then into Start, and then into
| | 00:21 | Classes and you will find it right there.
| | 00:23 | Before we do anything else, we want
to do a Save As and save this file with
| | 00:29 | the name of our class.
| | 00:30 | Let's go to File > Save As and I am
going to save it in the Chapter 4 folder,
| | 00:36 | the disable_button folder, in the Start
folder, the Classes folder and if you do
| | 00:44 | not have access to the Exercise Files,
you can just save this file in the same
| | 00:48 | classes folder that we created
when we created the template.
| | 00:51 | So, under the todd folder in the
Interactive folder and we will name this file
| | 00:57 | DisablingButton.as.
| | 01:03 | Click Save As and now we will
have to change a few things.
| | 01:07 | We will have to define the package and
remember the package is the path to this
| | 01:11 | file or the folder that contains this file.
| | 01:14 | So after package, type todd.interactive.
| | 01:20 | If you change the name of the
folders it might be something different.
| | 01:23 | So, make sure it has the same name as
you setup at the beginning of this chapter.
| | 01:26 | Remember we need to change the name
of the class to the name of the file.
| | 01:30 | So, we will call this DisablingButton.
| | 01:38 | We will select that by double-clicking the
text, Command+C or Ctrl+C to copy, double-click
| | 01:43 | Template, Command+V or Ctrl+V to paste.
| | 01:47 | The first thing we are going to do is
define some variables we'll be using.
| | 01:50 | Right above the constructive function,
I am going to paste in some code and
| | 01:54 | I will explain what it's doing.
| | 01:56 | I created a variable called Labels and
that's an array and that's going to
| | 01:59 | represent all of the frame labels that
are inside of this object or whatever
| | 02:04 | instance of this class we are working with.
| | 02:06 | I created a variable called
thisParent that's going to represent the parent
| | 02:10 | object of this movie clip.
| | 02:11 | This is significant because the parent
of this object is going to change and
| | 02:15 | we need to keep track of who the parent is.
| | 02:18 | The next step is to define what
happens in the constructor function.
| | 02:21 | I am also going to paste some code here.
| | 02:24 | Feel free to pause the movie and
copy down the code if you want to.
| | 02:29 | That will make it a little bit easier to see.
| | 02:32 | What this code is doing is we are
setting the value of the label's array to
| | 02:35 | be this.currentLabels.
| | 02:37 | 'this' is obviously referring to the
instance of the DisablingButton class, so we
| | 02:41 | can use a movie clip that has frame
labels and we will use the Labels array to
| | 02:45 | hold that and to have sort of a
quick reference to it instead of typing
| | 02:48 | this.currentLabels every time we
want to reference a frame label.
| | 02:51 | We have event listeners added for click,
rollover and rollout. The click disables
| | 02:56 | the button, the rollover runs the Over
function, rollout runs the Out function.
| | 03:01 | What these buttons are going to do is
the disabling button is going to be a
| | 03:04 | part of a set of buttons and when you click
on the button, that button becomes disabled.
| | 03:08 | And then when you click on another
button, the button that was previously
| | 03:12 | disabled becomes enabled and then the
button you clicked on becomes disabled.
| | 03:16 | And so we will link this to another
class called button set that will be a set
| | 03:20 | of disabling buttons.
| | 03:22 | So, the next steps we are going to
do are to do define the disable button
| | 03:25 | Over and Out functions. So let's do that.
| | 03:28 | Right below the constructor function I
am going to paste some more code and this
| | 03:32 | is going to be for the disable button
function and again you can pause the movie
| | 03:37 | and copy down this code.
| | 03:39 | Here we have a loop and that's going to
run for the length of the Labels array,
| | 03:44 | which is for every frame label that's inside
of this movie clip or the disabling button.
| | 03:50 | And if that array contains a label
called disable, then we will go to and play
| | 03:58 | at that frame label and if
not, we won't do anything.
| | 04:01 | That way we don't get any errors if we
just said this.gotoAndPlay("disable"),
| | 04:05 | we would get an error if
there was no disable frame label.
| | 04:08 | Then also we need to disable the button,
removing the event listeners that
| | 04:12 | we setup at the beginning
in the constructor function.
| | 04:14 | So, then the button will not react
to clicks, rollovers, or mouse rollout.
| | 04:20 | If we disable the button then we have to
have something that enables the button.
| | 04:22 | I am going to paste some
code below this function.
| | 04:29 | This function is called enableButton and
it's not attached to any type of event.
| | 04:32 | We will run it later.
| | 04:33 | But this just reverses all that we
did in the disableButton function.
| | 04:37 | So, we are adding the event listeners again and
going back to the first frame of the movie clip.
| | 04:43 | And again, we will work with
this a little bit later on.
| | 04:46 | The last step to get this working
properly is to write the Over and Out functions.
| | 04:52 | I am also going to paste code for those.
| | 04:54 | Let's go down a few lines and I am going
to paste the code and you can pause the
| | 04:59 | movie right here and
copy the code if you'd like.
| | 05:03 | This code does the same thing that
we did for the disable frame label.
| | 05:06 | We have loops that look for an over
frame label and an out frame label.
| | 05:10 | If they exist, then we play those labels.
| | 05:12 | That's pretty simple.
| | 05:13 | So now that we have setup the
DisablingButton class, the next step is take a
| | 05:17 | look over all your code and make
sure everything looks right and makes
| | 05:20 | sense, and save the file.
| | 05:22 | So, I am going to do the File > Save.
| | 05:25 | And now that we have this class,
we can put it inside of a Flash movie.
| | 05:28 | In the next movie, we will look at
how to link this class to a movie clip.
| | Collapse this transcript |
| Connecting classes to movie clips| 00:00 | In this movie we'll take a look at
connecting a class to a movie clip.
| | 00:03 | If you're following along, I'm in Class
_MovieClip.fla in the Start folder, in
| | 00:10 | the Connecting folder, in the Chapter
4 folder, in the Exercise Files folder.
| | 00:16 | If you're using this file, make sure to
go to Publish Settings and then set up
| | 00:22 | the class path like we did at
the beginning of this chapter.
| | 00:27 | If you don't, then Flash might be
looking for the files on my computer instead,
| | 00:32 | which probably won't work.
| | 00:33 | So just make sure you do that, and
then all we have to do after you have the
| | 00:40 | class path setup is Right or Ctrl+Click
the Rectangle movie clip in the Library,
| | 00:47 | select Linkage, select Export for ActionScript.
| | 00:51 | Then we are going to change the base class.
| | 00:56 | If you saw the Essential Training
Title, you might remember how this works.
| | 00:59 | Basically, when you use Linkage and use Export
for ActionScript, Flash creates a class for you.
| | 01:04 | When we set a base class, the class
name at the top just adopts all the
| | 01:08 | properties of the base class.
| | 01:10 | So when we set a base class and we're
using a class path, then we type the
| | 01:16 | whole path of the class.
| | 01:18 | Just like we see here.
flash.display.MovieClip.
| | 01:21 | Let's erase that and the path is in our
Classes folder and so Flash knows that.
| | 01:27 | So if we want to navigate to our
DisablingButton class, we can type
| | 01:31 | todd.interactive.Disabling, make sure
the spellings are right and the casing
| | 01:37 | as well, Button.
Then click OK.
| | 01:46 | Before we drag some instances of the
RectButton on the Stage, let's take a look
| | 01:50 | at that movie clip in the Library.
| | 01:51 | So double-click the Movie Clip symbol
icon in the Library and look what we
| | 01:55 | have in the Timeline.
| | 01:58 | We have some actions, and these are
very simple, these are just stop actions.
| | 02:01 | I can just show you.
Now you'll believe me.
| | 02:06 | We have some frame labels, Over, Out,
and Disable, which we're going to play when
| | 02:11 | we roll over, when we roll out, when
we click the button, and we have on the
| | 02:17 | Button layer some shape tweens.
| | 02:19 | It's fairly simple.
| | 02:21 | Let's go back to Scene 1.
| | 02:23 | Let's just drag a few instances of the
RectButton onto the stage from the Library.
| | 02:32 | That should be good.
| | 02:33 | You can align them and spread
them out if you would like to.
| | 02:36 | Because these are already linked to the
DisablingButton class, we don't need to
| | 02:39 | write any ActionScript.
| | 02:41 | Let's test the movie and roll over the
buttons and watch them animate and roll out
| | 02:46 | and watch them animate again and
click on the button, and they get darker
| | 02:51 | showing that they are disabled.
| | 02:52 | If I click on, or roll over, or roll out
of the DisabledButton, then nothing happens.
| | 03:00 | But if I click on other buttons,
then they all get disabled.
| | 03:06 | So I need to have a way to re-enable
the buttons after I click them and that's
| | 03:11 | exactly what we'll do in the next movie.
| | Collapse this transcript |
| Communicating between classes| 00:00 | In this movie, we're going to talk
about communicating between different
| | 00:03 | ActionScript classes and your FLA file.
| | 00:06 | If you're following along, I'm in
Communicating.fla and that's in the Start
| | 00:10 | folder of the Communicating folder of
the Chapter 4 folder that's inside of
| | 00:17 | the Exercise Files folder.
| | 00:19 | All the files we will be working with
in this exercise can be found in the
| | 00:22 | Communicating folder in the Chapter 4 folder.
| | 00:26 | Before you do anything else, make sure
you have the correct class path setup.
| | 00:29 | Now, what we're going to do is create a
new ActionScript class called ButtonSet
| | 00:34 | and we'll use that class to
manage a group of buttons.
| | 00:38 | Let's go to File > Open and then I'm
going to navigate inside of the Chapter 04 folder,
| | 00:46 | then in the Communicating folder,
then in the Start folder, then in the
| | 00:51 | Classes folder and we'll use
our template to start from.
| | 00:54 | Just select Template.as then click Open.
| | 00:58 | If you don't have the Exercise Files
folder, you can just use the same Template
| | 01:01 | folder you've created earlier in this chapter.
| | 01:02 | First thing we want to do is do a Save As,
so go to File > Save As, and
| | 01:06 | we will save this as Button Set.
| | 01:09 | So we're in the Chapter 4 folder,
Communicating folder, Start, Classes, Todd,
| | 01:17 | Interactive, and then ButtonSet.as.
| | 01:24 | Make sure you spell it just like mine,
capital B and capital S, and click Save As.
| | 01:32 | The first thing you want to do is to
find a package that ButtonSet is in.
| | 01:35 | So after package, let's just put
our cursor right there and then type
| | 01:41 | todd.interactive and because we're
going to be working with the DisablingButton class,
| | 01:47 | we'll need to import that class as well.
| | 01:50 | So at the bottom of our
import statements, let's import
| | 01:54 | todd.interactive.DisablingButton.
| | 02:04 | That should do.
| | 02:05 | Now we'll just need to rename
the class and constructor function.
| | 02:11 | And again, this is ButtonSet, make sure
you have the same casing as the file name.
| | 02:21 | Once you have that all typed out, just do a
Command+S or Ctrl+S on the PC to save the file.
| | 02:26 | The first thing we want to do is
create an array to hold all of our buttons.
| | 02:29 | That way our buttons will
be really easy to manage.
| | 02:32 | Let's do that right before
the constructor function.
| | 02:34 | I'm just going to paste in the code.
| | 02:38 | I declare it as a public variable,
because I want to be able to manipulate
| | 02:42 | this variable from other places, and
by other places I mean from the main
| | 02:45 | timeline in an FLA file.
| | 02:47 | I just called the array buttons.
| | 02:49 | Next thing we'll do is create a
function that will add buttons to the array.
| | 02:55 | That way we can get the buttons from the
Library in the main timeline of our FLA
| | 03:01 | file into this ButtonSet class file.
| | 03:05 | So I'm going to paste that code
right below the constructor function.
| | 03:10 | Take a minute to pause the movie
and copy down the code if you'd like.
| | 03:14 | This is a function we're going to
be running from the main timeline,
| | 03:16 | so I declared it as public.
| | 03:18 | I am just going to receive an array of all
the buttons that we will be working with.
| | 03:23 | When we receive that array, we set the
Buttons array inside of the buttonSet
| | 03:28 | file equal to the buttonSet that
gets passed in from the FLA file.
| | 03:35 | Then we have a loop and we just make
those buttons children of the buttonSet.
| | 03:40 | That's actually all we need
to write for the buttonSet.
| | 03:42 | So once you have that written,
just go to File > Save, and then you can
| | 03:47 | close ButtonSet.as.
| | 03:51 | Now, what we'll do is we'll connect
this FLA file to that class file we just
| | 03:55 | worked with, that ButtonSet file.
| | 03:57 | Let's create a new layer,
and name the new layer actions.
| | 04:04 | Select the first keyframe in the
Actions layer and open up the Actions panel.
| | 04:08 | First we'll need to import the ButtonSet class.
| | 04:11 | It's import todd.interactive.ButtonSet.
| | 04:19 | The next step is to create a
variable for the ButtonSet.
| | 04:23 | So we'll create a variable and we
can call this buttons, data type it to
| | 04:30 | ButtonSet, set it equal to a new
instance of the ButtonSet class.
| | 04:40 | Let's go down to the next line,
and we'll have our buttonSet object.
| | 04:47 | addButtons, and inside of there I'm
going to create an array using square
| | 04:55 | brackets and that's going to be an array
of the name of the buttons on the stage.
| | 05:01 | So here we just need to pass in the
instance names of the buttons and call them
| | 05:04 | one_mc, two_mc, three_mc, and four_mc.
| | 05:14 | If those buttons don't have
instance names on your stage,
| | 05:16 | take the time now to give them instance names.
| | 05:20 | The last thing we do, so after
we've passed all these buttons into the
| | 05:23 | ButtonSet, we now need to connect the
DisablingButton class to the ButtonSet class.
| | 05:27 | So let's close up this window and
go to File > Open and we'll open up the
| | 05:34 | DisablingButton class.
| | 05:36 | Remember that's in the Chapter 4 folder,
Communicating, start, classes, Todd,
| | 05:42 | interactive, DisablingButton.as.
| | 05:44 | Let's open up that file.
| | 05:46 | Now let's add a little bit of code that will
connect this class to the ButtonSet class.
| | 05:53 | The first thing we need to do is
import the ButtonSet class, and so we're
| | 05:57 | working with the ButtonSet class.
| | 05:58 | We will just do that underneath
all the other import statements.
| | 06:00 | I'm just going to paste that in.
| | 06:02 | The next thing we'll do is we'll have
a function run when somebody uses addChild
| | 06:07 | on instance of this class.
| | 06:09 | That way we can set who the parent is.
| | 06:11 | So I'm going to do that right below
where we add the other event listeners
| | 06:14 | inside of DisablingButton constructor function.
| | 06:19 | I'm just going to paste that code.
Take a second to copy it if you'd like.
| | 06:24 | We're going to run the
setParent function when it gets added.
| | 06:28 | We'll define that right now, scroll
down towards the bottom of the code, and
| | 06:34 | below the Out function,
let's paste the setParent function.
| | 06:40 | You can copy this code if you'd like as
well, so just pause the movie and take
| | 06:43 | a second to write it down.
| | 06:45 | What this function does is it tries to
see if the parent is an instance of the
| | 06:49 | ButtonSet class, and if so,
then the function runs.
| | 06:53 | Then what we do is we set thisParent
variable equal to this.parent but
| | 06:58 | we convert it into an
instance of the ButtonSet class.
| | 07:03 | Let me acroll to the right a little bit.
And then we have a loop and we set the value
| | 07:08 | of a variable called thisIndex and
thisIndex represents the index of the array
| | 07:15 | instead of the ButtonSet
that this DisablingButton is.
| | 07:18 | And that variable actually was
not defined at the top of this code.
| | 07:23 | So let's just define it right now.
| | 07:24 | So I am going to go back to the top of the
code where we have defined our variables.
| | 07:28 | I will define one called thisIndex
and the data type will be integer.
| | 07:34 | So now this button will know what its
index position is in the ButtonSet array.
| | 07:41 | The last thing we want to do is to
enable the other buttons when we click on
| | 07:46 | a particular button.
| | 07:47 | So we click on one button in the
ButtonSet, all the other buttons are enabled.
| | 07:50 | So let's define the enableOthers function.
| | 07:53 | Just scroll down to the bottom of the
code, right below setParent, make sure you
| | 07:59 | go right below the correct curly brace.
| | 08:01 | I'm going to paste in the code and
enableOthers runs a loop and what it does
| | 08:09 | is it just checks to see if the items
in the loop are equal to this index.
| | 08:15 | So it loops through the array of the
parent buttonSet and if the item in the
| | 08:19 | array is not this button, then all
of those other buttons are enabled.
| | 08:24 | So this runs the EnableButton
function on every button except for the
| | 08:26 | button that you click on.
| | 08:28 | Take a second to look over that
code and think about how it works.
| | 08:31 | The last thing we needed to do is run
the enableOthers function whenever we
| | 08:35 | click on the button, and that's
inside the disableButton functon.
| | 08:42 | Let's scroll up, find the
disableButton function and then run enableOthers
| | 08:47 | at the very bottom.
| | 08:54 | That will enable all the other buttons.
| | 08:56 | Take a second to look over this file and
make sure everything is right, save the
| | 09:00 | file by choosing File > Save.
| | 09:04 | Go back to Communicating.fla, go to
the first keyframe of the actions layer,
| | 09:09 | and let's take a look at the code one more time.
| | 09:12 | Open up Actions panel.
| | 09:13 | Now just test the movie.
| | 09:17 | Notice that we don't see anything on
the Stage, and actually that's only
| | 09:20 | because-- let's close this movie up.
| | 09:23 | It's only because we didn't
add ButtonSet to the stage.
| | 09:27 | Because the buttons are already on
the stage, but when we use addChild
| | 09:30 | inside of the ButtonSet class, the
buttons become children of the ButtonSet
| | 09:34 | class and not of the main timeline.
| | 09:36 | So we just need to put this Buttons
object or the instance of the ButtonSet
| | 09:40 | class on the stage, using addChild.
| | 09:42 | So let's go to the next line,
and just type addChild(buttons).
| | 09:48 | Test the movie.
| | 09:51 | The buttons are on the stage, roll
over them, and notice that they work.
| | 09:54 | Now, when you click on them, you
disable one, click on another one, it disables
| | 10:00 | the one you clicked on and enables the last
one you clicked on. There you have it.
| | 10:06 | We have created DisablingButton class
and we've connected the FLA file to a
| | 10:12 | class that's connected to another
class, and that is a look at how to
| | 10:15 | communicate between different classes.
| | Collapse this transcript |
| Creating a ScaleButton class| 00:00 | In this movie we'll take what we
learned about classes and what we already know
| | 00:03 | about tweens and put them
together to make a Scale button.
| | 00:07 | The file I am working in is called Scale
_Main.fla and that file is in the Start folder,
| | 00:12 | inside of the scale_button
folder that's in the Chapter_04 folder,
| | 00:16 | inside of the Exercise Files folder.
| | 00:18 | Let's take a minute to look
at how this file is setup.
| | 00:21 | We have six buttons on the Stage, and
they are named just like the Disabling
| | 00:25 | Buttons we created, one_mc all the way
to six_mc, and Scale button has kind
| | 00:31 | of a background layer that's called hit,
and that is a transparent rectangular area,
| | 00:37 | just to increase the hit area for this
button, and the Art layer is just a small rectangle.
| | 00:43 | Back to Scene 1, let's take a look at
the Actions layer, so go to the first
| | 00:48 | keyframe of the Actions layer,
and open up the Actions panel.
| | 00:50 | We have the same ActionScript
that we wrote in the last movie.
| | 00:53 | We added on the extra new
buttons. Let's close this.
| | 00:59 | There is one thing that you want to make
sure you have setup and that's the class path.
| | 01:03 | Just take a second to check your class path
and make sure you have the right class path.
| | 01:07 | Right now that you've done
that, let's go to File > Open.
| | 01:10 | Now, we want to open up two files.
| | 01:15 | So let's navigate to Chapter_04, scale_
button, start, classes, Todd, Interactive.
| | 01:23 | We wanted to open up
ButtonSet and DisablingButton.as.
| | 01:28 | In ButtonSet we're only
going to make one simple change.
| | 01:31 | Because we are working with a new class
called scale_button, we'll also import that class.
| | 01:36 | Now we haven't created that class yet;
we'll create it in just a minute.
| | 01:38 | Let's just make sure everything is
okay in the ButtonSet class first.
| | 01:41 | So let's copy where we import the
DisablingButton class, select that line of code,
| | 01:45 | and copy with Command+C or Ctrl+C.
On the next line I'll paste that code
| | 01:50 | and change DisablingButton to
ScaleButton, with a capital S.
| | 01:57 | Now once we write the ScaleButton class,
we don't have to worry about importing
| | 02:00 | it into the ButtonSet class.
| | 02:01 | So let's just save the file.
| | 02:03 | Let's go to File > Save, and
then you can close that file.
| | 02:08 | Now we are back in the DisablingButton.as.
| | 02:11 | Let's go to File > Save As, and we'll save this
as our new class name which is ScaleButton.as.
| | 02:19 | Make sure you're saving it in the right folder.
| | 02:21 | Chapter_04, ScaleButton, start, classes,
Todd, Interactive and then right in there.
| | 02:29 | We'll change DisablingButton to
ScaleButton, both in the class name and in
| | 02:35 | the constructor function name.
| | 02:39 | The next step is to create
variables to hold the tweens.
| | 02:42 | I am going to paste that code
in right below the thisParent
| | 02:47 | variable declaration.
| | 02:48 | Now, basically we are just having an X
scale tween and a Y scale tween, when you
| | 02:55 | roll over the button and
when you roll out of the button.
| | 02:58 | So we have four tweens total.
| | 03:00 | The next step is to take those variables
and create new instances of the Tween class.
| | 03:05 | So let's scroll down towards the end
of the ScaleButton constructor function.
| | 03:08 | I'll write the code there.
| | 03:10 | Let's write it right at the bottom of this code.
| | 03:13 | I am just going to paste that code in.
| | 03:17 | Let's take a second to look at it.
| | 03:20 | Notice that outTween comes first and
that's very significant, because when we
| | 03:25 | roll out of the mouse, the button is
going to scale back to its original value.
| | 03:30 | So it's going to scale up when you rollover
and scale out or scale down when you rollout.
| | 03:35 | This is significant.
| | 03:36 | You'll see that in just a second.
| | 03:37 | Take a second to look over this code,
and take a look at what it's doing.
| | 03:41 | We'll scroll down. The next thign we will
do is make sure that these tweens are
| | 03:47 | stopped, then we'll start them when
you roll over or roll out of the buttons.
| | 03:51 | I'm going to paste that code in as well.
| | 03:53 | We will paste that code right after we
give a value to the tweens, and that's just
| | 04:02 | outXTween.stop, outYTween.stop and
the same thing for the overtweens.
| | 04:07 | And now we'll make it so when you
rollover or roll out, the tween start.
| | 04:10 | So first I am going to select
overXTween, overYTween.stop.
| | 04:14 | I am going to copy them with Command+C.
We'll scroll down and replace the loop
| | 04:24 | inside of the Over function with that code.
| | 04:26 | So select all the code inside the Over
function, because this code is looking
| | 04:30 | for frame labels and our movie clip
does not even have any frame labels
| | 04:34 | animating with tweens.
| | 04:35 | So we can replace that code by
Command+V or Ctrl+V on the PC.
| | 04:39 | Now, we'll change it to
overXTween.start and overYTween.start.
| | 04:46 | Let's select those two lines of code,
copy them using Command+C or Ctrl+C and
| | 04:51 | we'll paste them over all the code or
all the loop inside of the Out function,
| | 04:56 | using Command+V or Ctrl+V. We'll just
change overXTween and overYTween to
| | 05:03 | outXTween and outYTween, and there is
one more loop that we want to get rid of
| | 05:07 | and that's inside of the DisableButton function.
| | 05:12 | Let's get rid of that loop.
| | 05:14 | Now we'll save the file and we could
test the movie right now, but we need
| | 05:17 | to do one more thing.
| | 05:18 | We couldn't set the linkage property
for the scale movie clip in FLA file,
| | 05:23 | because this file didn't exist yet.
| | 05:25 | There is no scale button class before.
| | 05:27 | So let's go back to the FLA file,
and connect the Scale movie clip to
| | 05:31 | the ScaleButton class.
| | 05:32 | Right or Ctrl+Click the scale movie
clip in the Library, select Linkage, check
| | 05:37 | the Export for ActionScript
box and change the Base class to
| | 05:41 | todd.interactive.ScaleButton.
| | 05:50 | If you get an error here make sure to
check your class path and then just click OK.
| | 05:56 | After you've got that finished, test
the movie by using Command+Return or
| | 05:59 | Ctrl+Enter and it looks like
we are running into some errors.
| | 06:03 | It says there's extra characters
found after the end of program.
| | 06:07 | Let's close out these windows and take
a look at scale_button.as and see if we
| | 06:13 | can find the problem.
| | 06:16 | Scroll all the way to the top of
the code and we'll start from there.
| | 06:20 | So let's scroll down in the code and
see if we can find any errors in the code.
| | 06:30 | I am scrolling down.
Everything looks good.
| | 06:31 | Now it looks like we have an extra curly
brace right there, and that would make sense
| | 06:40 | because the error that Flash said was there
| | 06:41 | is an extra curly brace. So
let's just erase that, save this file,
| | 06:48 | and we can actually test
the movie straight from here.
| | 06:50 | So if you press Command+Return or Ctrl+
Enter, you will then test the movie and
| | 06:55 | roll over the buttons and you
will see that they work just great.
| | 06:57 | The only problem is when you roll over
them and disable them and roll back over them,
| | 07:03 | they tween again.
| | 07:05 | Something is not working here.
| | 07:07 | Let's close this movie window
and take a look at the file.
| | 07:11 | Everything is looking good here.
| | 07:13 | We just need to add a little bit more
code inside of the enableButton function.
| | 07:16 | So let's scroll down and then right
below all the code in there, I am going to
| | 07:20 | paste some more code.
| | 07:21 | Now, we'll take a look at it.
| | 07:26 | Now we get enableButtons again. If
the scaleX, and that works for scaleX and
| | 07:32 | scaleY, is equal to overXTween.finish.
| | 07:38 | So that basically means if it's at the
full X and Y scale, then when we enable
| | 07:43 | the buttons, we start the outX and
outY tweens, which means other movie clips
| | 07:48 | that are disabled will scale back down.
| | 07:52 | Let's save this file by going to
File > Save and then test the movie.
| | 08:00 | All the buttons are working great.
| | 08:01 | If I click on a button it stays up, if
I click on another button, the original
| | 08:06 | button goes back down and
the new button stays up.
| | 08:09 | I've successfully
enabled and disabled buttons.
| | 08:12 | Let's close this window and there you have it.
| | 08:16 | We have successfully created a
ScaleButton class and combined classes with tweens.
| | 08:22 | In the next movie, we'll talk about
how easy it is to apply this class
| | 08:26 | to another object.
| | Collapse this transcript |
| Reusing a ScaleButton class| 00:00 | In this movie, we'll take a look at how
to reuse the Scale class we created in
| | 00:04 | the last movie and apply it to something else.
| | 00:06 | If you're following along, just
create a new ActionScript 3.0 document.
| | 00:11 | Let's go to File > Save As and save this
file in Chapter_04, reusing_scale, start
| | 00:23 | and call it Reusing.fla, and just click Save.
| | 00:29 | The first thing we'll have to
do is define our class path.
| | 00:32 | If you are following along, and
you don't have access to the Exercise Files,
| | 00:35 | we'll be using the same class path
that we've been using throughout this chapter.
| | 00:38 | So let's go to Publish Settings,
click the Settings tab by ActionScript
| | 00:43 | version, click the Target button to
choose a class path, and make sure you
| | 00:48 | choose the right path.
| | 00:49 | Chapter_04, reusing_scale, start,
classes. Click Choose and then click OK.
| | 00:58 | Now we have our class path setup.
All we have to do is draw something, link it
| | 01:02 | to the ScaleButton class and
then make that a button set.
| | 01:05 | Maybe that sounds a little bit
complicated, but actually just use the Oval tool
| | 01:12 | and I am going to draw a
green oval with a black stroke.
| | 01:16 |
| | 01:20 | I just create one on the Stage.
| | 01:23 | I'll select that oval and convert it to a
movie clip symbol by pressing F8 on my keyboard.
| | 01:28 | I am going to call this Oval, capital O,
and actually if you click the Advanced
| | 01:35 | button, you can select Export for
ActionScript right there, and change the base
| | 01:41 | class to todd.interactive.ScaleButton.
| | 01:48 | Make sure all the casing is same as mine.
| | 01:50 | One thing we want to make sure to do if
we're going to be scaling something with
| | 01:55 | ActionScript is set the
registration to the center.
| | 01:58 | Once you have all that set up, you can click OK.
| | 02:01 | You're actually not limited to using the
same movie clip for different instances
| | 02:07 | of the ScaleButton class.
| | 02:08 | So I am going to create a triangle now.
| | 02:10 | I am just going to use the Pen tool,
and click few times and create a triangle.
| | 02:18 | Now let's make sure to fill that in.
| | 02:21 | I'm going to select the triangle,
and then convert it to a movie clip by
| | 02:27 | pressing F8 on the keyboard. Follow
the same step with registration at the center.
| | 02:31 | The name will be Triangle with capital T.
| | 02:38 | Check Export for ActionScript.
| | 02:40 | Now we'll get the same base class,
todd.interactive.ScaleButton.
| | 02:50 | Then click OK, and just for
fun we'll make a rectangle too.
| | 02:59 | Draw a rectangle on the Stage with
any stroke or any fill, select the
| | 03:02 | rectangle, press F8 to convert it to a
movie clip, name it Rectangle, center
| | 03:10 | registration, Export for
ActionScript, make the base class
| | 03:15 | todd.interactive.ScaleButton, click OK.
| | 03:22 | That's looking good.
| | 03:24 | We'll just give these
instance names of circle_mc,
| | 03:34 | triangle_mc,
| | 03:39 | and rectangle_mc.
| | 03:44 | And that looks great.
| | 03:46 | Let's create a new layer, name the new
layer actions, select the first keyframe
| | 03:52 | of the actions layer, and
open up the Actions panel.
| | 03:54 | And now we'll have to import the
ButtonSet class, so it's import
| | 03:59 | todd.interactive.ButtonSet.
| | 04:08 | Create a new instance of the ButtonSet class.
| | 04:11 | I will call mine btnSet, set it equal
to a new instance of the ButtonSet class.
| | 04:23 | And then we'll have our ButtonSet
instance called btnSet.addButtons.
| | 04:33 | We are on the addButtons method. Inside
of the method remember we have to pass
| | 04:36 | an array, so we'll use square brackets
and then we'll pass in the three movie
| | 04:41 | clips on stage, the circle_mc,
triangle_mc and then rectangle_mc.
| | 04:53 | Let's go to the next line and put the
btnSet on the stage, so type addChild,
| | 04:57 | and we'll add btnSet to the stage.
| | 05:01 | Take a look at your code, test
the movie, and rollover the buttons.
| | 05:11 | There we go.
| | 05:12 | You can click the button and it will
stay scaled up, show that it's selected,
| | 05:16 | and if you click another button,
that button scales back down.
| | 05:20 | So there you have it.
| | 05:21 | You can reuse classes that you create.
| | Collapse this transcript |
|
|
5. Creating Advanced Effects Using XML DataPreparing to build an advanced image gallery| 00:01 | In this chapter, we're going to work
with XML again and build a more advanced
| | 00:04 | navigation system for an image gallery.
| | 00:07 | If you're following along, we're going
to be working in two files in this movie,
| | 00:11 | Final.swf and Preparing.fla.
| | 00:14 | These files are in the Chapter 5
folder in the Exercise Files folder.
| | 00:18 | But first let's take a look at Final.swf.
| | 00:20 | This is what we are going to be
building at the end of this chapter.
| | 00:23 | So we see one thumbnail on the stage
but if you roll your cursor over it,
| | 00:28 | you can see that the image is
kind of divided up into segments.
| | 00:31 | When you click on the image,
a full size image shows up.
| | 00:36 | So we'll look at how to divide
an image into different segments.
| | 00:39 | We'll turn this navigation system
into a class and reuse it later on.
| | 00:44 | Let's close this window.
| | 00:45 | I am going to close Final.
fla and go into Preparing.fla.
| | 00:49 | Let's go to the first keyframe of the
Actions layer and open up the Actions panel.
| | 00:52 | There is some XML code for you already.
I created an XML object, an xmlList object,
| | 00:58 | a URLLoader, load the XML, we add an
event listener for complete when the XML is
| | 01:05 | loaded, and we have the xmlLoaded
function that runs when that happens.
| | 01:10 | The XML file we'll be using in this chapter
is very similar to the XML file we used
| | 01:15 | when we created the other image gallery.
| | 01:17 | To look at the XML file, inside of the
Chapter 5 folder, you can find the Data
| | 01:22 | folder, and open up images.xml.
| | 01:24 | The differences are very small and we'll be
talking about them throughout this chapter.
| | 01:28 | So we don't need to cover
that in detail right now.
| | 01:30 | Let's prepare this file to load some images.
| | 01:33 | We know that all of our thumbnails are
going to be loading into the same place,
| | 01:36 | so at least they have
the same X and Y locations.
| | 01:39 | We also know that we are going to
divide that area up into segments.
| | 01:42 | What we are going to do to set that up
is load all those thumbnails into one
| | 01:45 | movie clip and then we'll control
the visibility with ActionScript.
| | 01:49 | I am just going to paste
some code here in line 4.
| | 01:52 | This code will create a container
movie clip to hold all the thumbnails, then
| | 01:57 | imageLoader will load all the thumbnails.
| | 01:59 | We're going to need to have the
container movie clip listen for the
| | 02:02 | MouseMove event, so that we can
change the thumbnails and divide the movie
| | 02:07 | clip into segments.
| | 02:09 | We'll talk more about
segments a little bit later on.
| | 02:11 | I am going to paste some code on line 6.
| | 02:13 | We'll add that event listener, and
we'll run the changeThumb function.
| | 02:18 | Let's define the changeThumb
function below the XML loaded function.
| | 02:22 | Let's go to the very bottom of the code,
go down a few lines below everything
| | 02:26 | else and paste the code.
| | 02:28 | I've just created the
skeleton of the changeThumb function.
| | 02:31 | We'll fill on that function later on.
| | 02:33 | Below the changeThumb function, let's
make sure we add the container to the
| | 02:37 | display list and also I'm going to
put a drop shadow behind the container.
| | 02:42 | So we create a drop shadow in this
line of code, container.filters =
| | 02:47 | new DropShadowFilter.
| | 02:47 | We'll just take the default settings there,
and we'll put the container in the display list.
| | 02:52 | Last thing we need to do to prepare
this file is to have our imageLoader load
| | 02:57 | all the thumbnails and put them
inside of the container movie clip.
| | 03:00 | Let's create a loop inside of the
xmlLoaded function below the xmlList code.
| | 03:04 | Mine is on line 16.
| | 03:05 | So right below that I am going to
paste some more code and we have a loop
| | 03:10 | running for the length of the XML nodes.
| | 03:13 | We set our imageLoader equal to a new
instance of the loader class and then we
| | 03:17 | have it load the thumbnail for
whatever node the loop is iterating on.
| | 03:22 | XML attribute that holds the
thumbnail is called thumb and then we add the
| | 03:27 | imageLoader to the
display list of the container.
| | 03:30 | That looks about right.
| | 03:32 | Let's test the movie and see what we get.
| | 03:33 | And we get the loader on
the stage. That's great.
| | 03:37 | Let's set the X and Y position of the
container to give it a little bit more space.
| | 03:40 | I am going to do that at the top of the
code, right below where we created the
| | 03:45 | imageLoader instance.
| | 03:47 | Mine is on line 5. We're going to go
down a few lines and just set container.x
| | 03:52 | = 25 and I'll set container.Y = 25 as well.
| | 03:59 | Now when we test the movie,
it looks a little bit better.
| | 04:02 | Great! Next, we'll divide the container
movie clip into segments, so we can change the
| | 04:08 | thumbnail image based on
the location of our mouse.
| | Collapse this transcript |
| Dividing the thumbnail into segments| 00:00 | In this movie we'll look at how to
divide our container movie into segments and
| | 00:05 | that way we can change the thumbnail
image based on the location of our mouse
| | 00:09 | over the container movie clip.
| | 00:10 | If you are following along, you can
continue using the same file, or you can
| | 00:14 | come to Segments.fla in the Chapter
5 folder in the Exercise Files folder.
| | 00:18 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:22 | What we need to do is to divide up
our container movie clip into segments.
| | 00:28 | There needs to be as many segments as
there are nodes in our XML files, or in
| | 00:34 | other words, we need to have as many
segments as we have thumbnail images.
| | 00:38 | So we know that we have to create
a variable to hold our segments.
| | 00:41 | I am going to create that
right below line 5 in my file.
| | 00:45 | Right with all my other variables.
| | 00:46 | I am going to call this variable segments.
| | 00:51 | It's going to be a Number.
| | 00:52 | Let's scroll down to the bottom of the
code, and we want to set the value of
| | 00:58 | segments inside of the changeThumb function.
| | 01:01 | So I am going to click inside of the
changeThumb function and then I am going to
| | 01:06 | type segments = container.width.
| | 01:15 | So we have the width of our whole container,
| | 01:17 | and then we are going to divide it by
how many nodes are in our XML file, which
| | 01:22 | is going to be how many
thumbnail images we have.
| | 01:25 | Another way we can do that is dividing
it by the number of children that are
| | 01:29 | inside of our container movie clip,
because the container is just a
| | 01:32 | container for the thumbnails.
| | 01:33 | Let's type space, divided
by space, then container, dot,
| | 01:40 | and the property that tells us how many
children an object has is numChildren,
| | 01:46 | and type a semicolon. Once we have the
container movie clip divided into equal
| | 01:50 | segments, then we can check where the
mouse is and determine which segment of
| | 01:55 | the movie clip our mouse is in
when we roll over the movie clip.
| | 01:59 | We'll do that in the next movie.
| | Collapse this transcript |
| Adding interactivity to thumbnails| 00:01 | In this movie, we'll connect the
segment variable we created in the last movie
| | 00:05 | to our mouse position, and then
change the thumbnail images accordingly.
| | 00:10 | If you are following along, I am in
Thumbnails.fla in the Chapter 06 folder in
| | 00:15 | the Exercise Files folder.
| | 00:16 | Let's go to the first keyframe in the
actions layer and open the Actions panel.
| | 00:20 | The first thing we need to do is to
create a variable that holds the current
| | 00:23 | segment that our mouse is in.
| | 00:24 | Let's go up to the top of the code and
right below segments, create a variable
| | 00:29 | called currentSegment, and this is
what we'll use to load in the full size
| | 00:37 | images, and it needs to be an integer.
| | 00:40 | If we datatyped it to a number and we
had a whole number, it would still work okay,
| | 00:43 | but it needs to be an integer.
| | 00:45 | So if we datatype it to an integer
and it doesn't come out as an integer,
| | 00:49 | then we get an error.
| | 00:50 | Let's type a semicolon. So again this
needs to be an integer, because it's going
| | 00:54 | to refer to a node in our XML file.
| | 00:56 | So let's scroll down.
| | 00:58 | Now we'll give a value to
the currentSegment variable.
| | 01:00 | Right below where we gave the
segments variable a value in a
| | 01:03 | changeThumb function,
| | 01:04 | I am on line 34, and I am going to give
a value to the currentSegment variable,
| | 01:10 | and this is going to update with the mouse.
| | 01:11 | Let's type currentSegment = .
| | 01:17 | Now this needs to be an integer, so
we have to use Math.round, some kind
| | 01:24 | of rounding method.
| | 01:25 | Let's start with Math.round
and we are going to round...
| | 01:29 | It's the X mouse position on the container.
| | 01:32 | So type container.mouseX divided by segments.
| | 01:37 | And this will tell us which segment we
are in and there are four nodes in our
| | 01:44 | XML file, or four images and thumbnails.
| | 01:47 | So we want a value between 0 and 3.
| | 01:49 | Let's go the next line
and trace(currentSegment).
| | 01:57 | Let's test the movie and roll the mouse over.
| | 02:02 | So I am getting 0, 1, 2, 3, 4.
| | 02:06 | Let's close these windows.
| | 02:08 | Instead of Math.round, let's use
Math.floor and then test the movie.
| | 02:16 | Roll over. I'm getting 3, 2, 1, and 0, great.
| | 02:24 | Now all we have to do is
swap out the thumbnail images.
| | 02:28 | Let's close these windows and we'll
use a loop to swap out the thumbnails.
| | 02:33 | First let's delete that trace statement.
| | 02:35 | Now I'll create a loop that we'll
put inside of conditional statement.
| | 02:38 | So type if, so currentSegment is less
than or equal to container.numChildren,
| | 02:50 | -1, put some curly braces.
| | 02:53 | We put the conditional statement
here, just in case the currentSegment
| | 02:57 | variable goes out of bounds.
| | 02:59 | Or in other words, if it's a number that
doesn't correspond to an XML node, or a
| | 03:05 | child index that's inside
of the container movie clip.
| | 03:08 | Now we'll create a loop that will turn
the visibility of all of the movie clips
| | 03:12 | inside of the container, which is all
the thumbnail images to false, and then
| | 03:17 | turn the currentSegment
thumbnail's visibility to true.
| | 03:20 | Just type for(var and we'll use j. It's
an integer equal to 0, as long as j is
| | 03:29 | less than container.numChildren,
j ++, some curly braces and I'll set the
| | 03:37 | visibility of all the
container's children to false.
| | 03:40 | Let's type container.
getChildAt(j).visible = false.
| | 03:52 | Go down a line and then go to the next line.
| | 03:55 | So we are outside of the loop, but
inside of the conditional statement.
| | 03:59 | Type container.getChildAt. Instead of a number
here, we are going to type (currentSegment).
| | 04:07 | So this is the child that corresponds t
this segment we're rolling over, and we roll
| | 04:12 | our mouse over part of the
container movie clip, .visible = true.
| | 04:21 | Let's test the movie.
| | 04:23 | Roll over to image and the thumbnails change.
| | 04:28 | Nice!
| | 04:30 | So that's working great.
| | 04:31 | In the next movie, we will link
these thumbnails to full sized images.
| | Collapse this transcript |
| Loading full-sized pictures| 00:01 | In this movie we'll connect to our
thumbnail images to full sized images.
| | 00:04 | If you are following along, I am in
Thumb_Full.fla in the Chapter 05 folder in
| | 00:10 | the Exercise Files folder.
| | 00:12 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:16 | Scroll up to the top of the code.
| | 00:18 | Let's create a new loader
to load the full size images.
| | 00:21 | I am going to me call this loader fullLoader.
| | 00:22 | It's created underneath all the variables.
| | 00:24 | I am on line 8 in my code.
| | 00:26 | You might be on different line.
| | 00:27 | Let's type var space and then
fullLoader, data type it to the Loader, equal to
| | 00:34 | the new instance of a Loader class.
| | 00:38 | Unlike our thumbnail loader --
make sure you get rid of that 0.
| | 00:41 | Unlike our thumbnail loader, our fullLoader
will just load and then unload other movies.
| | 00:47 | So we won't be creating new instances
of the loader class over and over again
| | 00:51 | with the fullLoader.
| | 00:52 | We need to have the container
movie clip listen for a mouse-click.
| | 00:57 | Right below line 12, where we added the
event listener to listen for the mouse move,
| | 01:02 | and run the changeThumb function,
type container.addEventListener.
| | 01:06 | We'll listen for MouseEvent.CLICK and
we'll run the showPicture function.
| | 01:19 | Which we'll define in just a second.
| | 01:21 | Scroll down to the very bottom of the code.
| | 01:24 | Right below the changeThumb function,
mine is on line 45, let's go down a few lines,
| | 01:28 | we will create the showPicture function.
| | 01:32 | Type function showPicture and
remember it's receiving a MouseEvent.
| | 01:45 | Inside of the showPicture function,
we'll first have our Loader unload anything
| | 01:49 | that's currently in the Loader.
| | 01:50 | Just type fullLoader.unload().
| | 01:55 | On the next line, we'll have the
fullLoader.load and now the thing that's
| | 02:02 | really neat here is we have the
currentSegment variable that's holding the
| | 02:06 | picture that our mouse is over.
| | 02:09 | So when we click the button, our mouse
has to be over the current segment picture.
| | 02:12 | So we can load a new URLRequest inside
of the parenthesis of the URLRequest,
| | 02:20 | type XMLlist, index currentSegment,
| | 02:28 | .attribute, then in
parenthesis and quotes, full.
| | 02:36 | attribute holds the full size image path.
| | 02:40 | Close up the parenthesis for
attribute, URLRequest, and for the Load
| | 02:47 | method then a semicolon. Now
let's the movie and see what we have.
| | 02:52 | Click on thumbnail images and nothing appears.
| | 02:55 | Let's close the preview window.
| | 02:56 | That's because we have to do one more thing
and that's add the Loader to the display list.
| | 03:01 | So right at the very, very bottom of
the code below everything else, we call
| | 03:05 | addChild and we will add the
fullLoader to the display list.
| | 03:10 | Then test the movie, click on the button,
and the picture gets loaded on top of
| | 03:15 | everything else at the top left.
| | 03:17 | So we'll have to push it
over to the side a little bit.
| | 03:19 | Let's go to the top of the code,
and give it some X and Y values.
| | 03:22 | On line 11, after we give the container.
y value, let's go down a few lines and
| | 03:28 | we'll give the fullLoader X and Y values.
| | 03:31 | Let's set the X value equal to
200, and the Y value equal to 25.
| | 03:43 | That should be just about right.
| | 03:45 | Let's test the movie, click on
the images, and that looks great.
| | 03:51 | And now we have a working
gallery with advance interactivity.
| | 03:54 | The next step is to turn this into a class.
| | Collapse this transcript |
| Creating an Image Gallery class| 00:00 | In this movie, we will take a look at
converting our image gallery into a class,
| | 00:04 | so we can easily reuse it.
| | 00:06 | If you are following along, we
have been working in two files.
| | 00:09 | The first one is Class.fla and
that's in the Chapter 5 folder in the
| | 00:13 | Exercise Files folder.
| | 00:15 | The other file I am working with is
called ImageGallery.as and that is in a
| | 00:20 | folder called Gallery, that's inside
of a folder called Interactive, that is
| | 00:25 | inside of a folder called Classes,
that's inside of the Chapter 5 folder.
| | 00:30 | That may sound confusing, but it's
just the package name or the class path
| | 00:34 | we are going to be working with, and we will go
through that a little bit more as we go on.
| | 00:38 | Let's take a look at the code in the
Class file, and if you are following along
| | 00:42 | through this chapter, it's the same code
we have written throughout the chapter.
| | 00:45 | So we just take a look over it.
| | 00:48 | Our goal is to create a class where we
all have to do is create a new instance
| | 00:52 | of the class, tell Flash where the XML
file is, tell Flash what attribute of the
| | 00:57 | XML file to look for, for the thumbnails
and what attribute to look for, for the
| | 01:01 | full size images and we
will have the complete gallery.
| | 01:04 | So let's select all of these code by
pressing Command+A or Ctrl+A on your
| | 01:08 | keyboard, then cut it using Command+X
or Ctrl+X. Let's close the Actions panel
| | 01:15 | and go to ImageGallery.as.
| | 01:16 | Notice this file is very simple.
| | 01:18 | It's actually just template file and
I have saved it as ImageGallery.as.
| | 01:23 | So if you don't have access to the
Exercise Files, you can create a file from
| | 01:26 | the template with this name.
| | 01:28 | And just make sure you put the
ImageGallery.as inside of a few folders, and then
| | 01:32 | put the correct package when
we define the package right now.
| | 01:35 | So before we define the package, let's
actually paste the code that we have just cut.
| | 01:39 | Let's paste it right below the
constructor function, which is public function
| | 01:43 | ImageGallery(), mine starts on line 10.
| | 01:44 | So right below that, go down a few lines and
then press Command+V or Ctrl+V to paste the code.
| | 01:52 | Notice that the formatting in
my code is kind of messed up.
| | 01:54 | If you click the Auto Format button
at the top of the screen, Flash will
| | 01:58 | format the code for you.
| | 01:59 | If you haven't set your Auto Format
settings, you might want to do it before
| | 02:02 | you click that button.
| | 02:03 | To set the Auto Format settings, go to
Flash or on Windows, it's Edit, choose
| | 02:08 | Preferences, and then
select the Auto Format category.
| | 02:12 | Check the boxes that you want, tell Flash
how to format your code, and then click OK.
| | 02:17 | Then click the Auto Format button.
| | 02:20 | Flash organized the code for me so I don't
have to tab everything in, which is kind of nice.
| | 02:25 | When we are creating classes,
| | 02:28 | we want to declare variables
above the constructor function.
| | 02:31 | So I am going to select all of my
variable declarations lines in my code.
| | 02:35 | That's line 14 through 21.
| | 02:37 | I am going to cut that using Command+X
or Ctrl+X, and right below line 9 and
| | 02:44 | above our constructor function,
I am going to paste that same code.
| | 02:47 | I did Return to get a little
bit of space. So far so good.
| | 02:52 | Scroll down a little bit.
| | 02:53 | What we are going to do now is select all
the code that's outside of any function.
| | 03:02 | That's lines 25 to 35 in my code, from
container.x = 25, to line 35 where we're
| | 03:09 | having xmlLoader listen for the complete event.
| | 03:11 | So let's select all that code, cut it
with Command+X or Ctrl+X, click inside of
| | 03:18 | a constructor function, mine starts on
line 19, paste the code using Command+V
| | 03:23 | or Ctrl+V. Notice the codes are not indented.
| | 03:27 | I can always click the Auto Format button,
and Flash will format the code for me.
| | 03:34 | Scroll down in the code to make sure
nothing is outside of function, and there
| | 03:37 | are just few lines of codes at the bottom.
| | 03:40 | So we'll just select those lines,
the last three lines of code.
| | 03:44 | We will cut that code, using Command+X or
Ctrl+X, scroll up to the top of the code.
| | 03:56 | We are going to go inside of the
constructor function, mine starts on line
| | 03:59 | 19, and we are going to put at the last
line of the code in the constructor function.
| | 04:03 | So go down little bit below the last
line, paste the code using Command+V or
| | 04:06 | Ctrl+V, and again I am going
to click the Auto Format button.
| | 04:11 | All right, that's feeling pretty good.
| | 04:14 | Now all we have to do to make this
class more dynamic is change the string
| | 04:19 | values, like where the XML file is, and
what attributes to look for in the XML
| | 04:24 | file for the thumbnails,
and for the full size images.
| | 04:27 | I am going to go ahead and take those
and replace those strings with variables,
| | 04:34 | and then we can pass those variables in
when we create instances of this class.
| | 04:38 | Scroll all the way up to the top of the code.
| | 04:41 | Now I will create variables to hold
the location of the XML file, the name
| | 04:46 | of the attribute for the thumbnail, and the
name of the attribute for the full size image.
| | 04:50 | So let's do that at the very
top of the code before all of our
| | 04:53 | variable declarations.
| | 04:54 | I am on line 17 right now.
| | 04:55 | I am going to go to the next line,
create a new variable called xmlPath, and
| | 05:00 | I am going to data type that to String and
we'll give it a value just in a second.
| | 05:07 | Create a variable called thumbAtt.
| | 05:10 | I just shortened it. I call it Att.
| | 05:13 | That will be a String too.
| | 05:16 | Create a variable called
fullAtt for full attribute.
| | 05:19 | It will also be a String.
| | 05:24 | Now what we'll do is we'll have this
class accept these values, then we'll swap
| | 05:28 | out the string literal
values for the variable values.
| | 05:33 | Let's click inside of the
parenthesis where we declare the ImageGallery
| | 05:38 | function, the constructor function.
| | 05:39 | That's on the line 22 in my code.
| | 05:41 | It might be on different line in your code.
| | 05:42 | So we are going to need to pass in the
xmlPath, the thumbAtt and the fullAtt.
| | 05:46 | So I am just going to call this path.
This is going to represent the xmlPath.
| | 05:52 | It's going to be a string, type a comma,
type thumb, this is going to be String as well.
| | 06:03 | And after that parameter I
have one more. It will be full.
| | 06:05 | It will also be a String.
| | 06:08 | Now when we create instance of this
class, we'll need to pass in these values.
| | 06:12 | So what we will do is when we receive
those values and the instance of this
| | 06:15 | class is created, we'll set those
values that are passed in to the variable
| | 06:19 | values we just created.
| | 06:22 | So let's go inside of the constructor function.
| | 06:24 | So I am on line 23, I am going down a line.
| | 06:26 | Now I'll give the values to the
xmlPath variable as well as the thumbAtt
| | 06:30 | variable and the fullAtt variable.
| | 06:31 | So xmlPath = path.
| | 06:38 | On the next line, thumbAtt
= thumb, and fullAtt = full.
| | 06:54 | All I have to do is replace the string
values in our code with our variable names.
| | 06:58 | So let's scroll down and find where
we load the data file or the XML file.
| | 07:04 | Mine is on line 35.
| | 07:04 | What we are looking for is green code.
| | 07:08 | So that might be a little bit easier to find.
| | 07:10 | Let's replace that
including the quotes with xmlPath.
| | 07:18 | Scroll down find where we load the thumb
images, and you should find thumb in green.
| | 07:26 | Replace that with thumbAtt.
Find full at the bottom of the code.
| | 07:34 | It's going to be green.
| | 07:35 | Mine is on line 75. Replace
it with fullAtt and that's it.
| | 07:39 | Let's go to File > Save, save
this file and return to Class.fla.
| | 07:45 | Before you do anything else,
let's define the class path.
| | 07:49 | So let's go in the Property Inspector,
make sure everything is deselected,
| | 07:53 | click on the Settings button.
| | 07:54 | Click on the Flash tab, ActionScript 3.0
Settings, target path, make sure you
| | 08:03 | are in the Chapter 5 folder, select the Classes
folder and then click Choose and then click OK.
| | 08:09 | Hit OK again to exit out of the window,
select the first keyframe in the actions layer,
| | 08:16 | and open up the Actions panel.
| | 08:17 | Now we just need to import the
ImageGallery class and create a new instance of
| | 08:22 | the class and add it to the
stage and we have an image gallery.
| | 08:26 | Type import interactive.gallery.ImageGallery.
| | 08:39 | Let's go down a few line and create a
new variable to represent the gallery.
| | 08:46 | The data type will be
ImageGallery equal to a new instance of the
| | 08:52 | ImageGallery class.
| | 08:57 | Now we just need to point Flash to our
XML file and the name of the thumbAtt
| | 09:03 | and the name of the
fullAtt. These are all strings.
| | 09:05 | So will type the name of the XML file first.
| | 09:07 | It's in the folder called data
and the file is called images.xml.
| | 09:15 | Next parameter we will pass in, it's going
to be "thumb" and then we'll pass in "full".
| | 09:27 | The last thing we need to do
is add the gallery to the stage.
| | 09:34 | Take a second look over the code,
test the movie, and we are getting some
| | 09:40 | problems here in the code, because when
we created the template, we didn't plan
| | 09:46 | on working with URLLoader class or
the DropShadowFilter class and those are
| | 09:50 | all in our class file.
| | 09:52 | So let's just import those
classes and everything should be great.
| | 09:56 | Let's go back to the ImageGallery.as,
scroll up to the top of the code,
| | 10:02 | right below all of our import statements,
so I am on line 6 in the code.
| | 10:06 | I am going to go to the next
line, to import flash.net.*.
| | 10:13 | The asterisk will give us access to any
other classes in the flash.net package
| | 10:18 | that we will need to work with later on.
| | 10:19 | Go to the next line.
We will import flash.filters.*.
| | 10:25 | Then we can use the DropShadowFilter.
| | 10:26 | Let's go to File > Save, return
to Class.fla, and test the movie.
| | 10:32 | Flash is telling us the name of the package
does not reflect the location of this file.
| | 10:38 | Let's close these windows and
just check the package name.
| | 10:44 | It looks like we looked
over giving the package name.
| | 10:47 | So we just need to define the package.
| | 10:49 | So at the top of ImageGallery.as,
after package, remember the package is
| | 10:53 | interactive.gallery.
| | 10:58 | Now save the file and we can
actually just test it from here.
| | 11:02 | So just test the movie and
there is the working image gallery.
| | 11:10 | So now all you have to do to create an
image gallery is you just create a new
| | 11:13 | instance of the image gallery class and
point Flash to your XML file, pretty nice.
| | Collapse this transcript |
|
|
6. Creating a Particle SystemUnderstanding particle systems| 00:01 | In this chapter we are going to talk
about how to build a particle system in Flash.
| | 00:05 | If you're following along, I am in
Understanding.fla in the Chapter 6 folder in
| | 00:09 | the Exercise Files folder.
| | 00:11 | Before learning how to create a
particle system it's good to know what
| | 00:14 | a particle system is.
| | 00:16 | Basically, the particle system
generates some kind of element and gives it
| | 00:19 | some kind of movement.
| | 00:20 | That might sound a little vague, so
let's just test the movie in this file, and
| | 00:24 | see what particle system is in action.
| | 00:30 | The particle system here is making the
snowflakes fall from the top of the screen.
| | 00:34 | They're generated randomly.
| | 00:36 | I am just going to close the movie.
| | 00:41 | So throughout this chapter we are going
to be building that particle system and
| | 00:44 | we will replace it with different particles.
| | 00:46 | In that example, the particle was the
snowflake, so replacing that particle with
| | 00:50 | rain or with anything else would be really easy.
| | 00:53 | So we will take a look at how
to do all that in this chapter.
| | 00:55 | So let's get started.
| | Collapse this transcript |
| Creating particles| 00:01 | In this movie, we are going to
talk about creating particles.
| | 00:03 | When you create particles you can
create simple things like snow or rain or you
| | 00:08 | can make complicated things like
lightning, fire or bricks or glass.
| | 00:13 | In this movie we will just make snow and rain.
| | 00:15 | If you're following along, I am in
Creating_Particles.fla and that file is in
| | 00:20 | the Chapter 6 folder in
the Exercise Files folder.
| | 00:22 | It's actually just a blank document so
you can also create a blank document
| | 00:26 | as well and just make sure to
save it at the end of this exercise.
| | 00:28 | I want the particles to be kind
of small, so I am going to zoom in
| | 00:31 | before anything else.
| | 00:34 | That looks about good.
| | 00:35 | Now I am going to select the Pencil
tool and I'm going to draw a snowflake.
| | 00:42 | Now it doesn't need to be perfect.
Just needs to resemble snowflake somewhat.
| | 00:53 | So just draw out your snowflake and you can
feel free to put little more effort into
| | 00:59 | yours than I'm putting into my right now.
| | 01:01 | Either way it will still work.
| | 01:06 | Notice that I have a stroke height of 3.
| | 01:11 | You might want to have a stroke
height of somewhere around there.
| | 01:14 | It will be easier to see that way.
| | 01:16 | So we've got a snowflake.
| | 01:17 | The next step is to convert it to a movie clip.
| | 01:19 | So I am going to select it and once it's
selected, before I convert it to a movie clip,
| | 01:23 | I want to make sure that I'm
working with fills and not strokes.
| | 01:26 | So I am going to go to Modify > Shape >
Convert Lines to Fills, stroke turns into a fill,
| | 01:32 | which is great.
| | 01:33 | Now we will convert it to a movie
clip by pressing F8 on the keyboard.
| | 01:36 | Let's set the registration to the center.
| | 01:38 | That way we can scale with
ActionScript and it will look right.
| | 01:41 | Then we will select Movie for
the type and name this Snow.
| | 01:47 | Since we know we are going to be
working with this symbol in ActionScript,
| | 01:50 | we can just check Export for
ActionScript right now and then click OK.
| | 01:54 | Now we've got a snowflake.
| | 01:55 | So I am going to the Pencil tool again.
I am going to draw some rain right next to it,
| | 01:59 | just a real quick raindrop.
| | 02:01 | That looks pretty good.
| | 02:02 | Then I am just going to fill it with light blue.
| | 02:05 | It looks like it's not filling.
| | 02:08 | So I'm going to set preferences in
the toolbar to close large gaps and then
| | 02:13 | click inside of the shape,
and that should work okay.
| | 02:15 | Let's select the whole raindrop
and then do the same thing where we
| | 02:19 | converted the lines to fills.
| | 02:20 | So we are going to Modify > Shape > Convert Lines
to Fills, and now we'll turn it into symbol.
| | 02:26 | So press F8 on the keyboard
to convert it to a symbol.
| | 02:28 | We will call this Rain.
| | 02:30 | Again, we will have center Registration and
check Export for ActionScript and click OK.
| | 02:37 | Now we've built some particles.
| | 02:39 | These may seem really simple, and they are.
| | 02:41 | You can build more advanced
particles if you want to.
| | 02:44 | But it's more important to
understand how they work first.
| | 02:46 | In the next movie we will take
a look at animating particles.
| | Collapse this transcript |
| Animating particles| 00:01 | In this movie we will
learn to animated particles.
| | 00:04 | This is going to be pretty a simple,
because we'll just use the enterFrame event
| | 00:08 | to move the particles down.
| | 00:10 | First thing we want to do is go
to Insert and choose New Symbol.
| | 00:15 | Let's call this symbol
Particles and then click OK.
| | 00:19 | You should be inside of the Particles symbol.
| | 00:22 | Just make sure that you are inside of that
symbol. Rename the first layer to actions.
| | 00:27 | Select the first keyframe in the
actions layer and open up the Actions panel.
| | 00:31 | And now I am just going to paste in some code.
| | 00:32 | So you've created the variable called Particle.
| | 00:34 | The data type is a Snow.
| | 00:36 | It's a new instance of the Snow class,
add it to the stage, add an event
| | 00:41 | listener to the Snow, listen to enterFrame.
| | 00:44 | And every frame we
increase the y of the snow by one.
| | 00:49 | Take a second to look over the code.
| | 00:51 | If you need to copy it down.
| | 00:52 | We will test the movie and nothing happens.
| | 00:55 | That's just because we didn't add
the particles movie clip to the stage.
| | 00:58 | So let's close this window, go back to
the main timeline, drop the particles
| | 01:02 | movie clip onto the stage, and then test movie.
| | 01:06 | You see the snow falling.
| | 01:12 | So it looks like that's working okay.
| | 01:14 | In the next movie, we'll take a
look at making more particles and
| | 01:17 | randomizing them.
| | Collapse this transcript |
| Randomizing particles| 00:01 | In this movie we'll take a look
at randomly placing our particles.
| | 00:04 | If you're following along I am in
Randomizing_Particles.fla in the Chapter 6
| | 00:10 | folder in the Exercise Files folder.
| | 00:13 | Since we've already been already
working with this file, let's just continue on
| | 00:15 | by going into the Particles movie clip.
| | 00:17 | Select the first keyframe in the
actions layer and open up the Actions panel.
| | 00:20 | What we are going to do to animate this
is to wrap the code that creates the new
| | 00:27 | snow and adds the event
listener in a timer event.
| | 00:30 | And we will have that code run with the timer.
| | 00:33 | So the timer event will determine
how often particles get created.
| | 00:38 | Let's create a timer variable
above all the rest of the code.
| | 00:41 | So at the very, very top of the
code above everything let's create new
| | 00:44 | variable called particleTimer and
we'll data type it to Timer equal to a new
| | 00:50 | instance of the Timer class and for now we will
set the delay at one second or 1000 milliseconds.
| | 00:55 | Let's go down to a few lines, and we'll
add an event listener to the particleTimer.
| | 01:03 | The event will be TimerEvent.TIMER.
| | 01:07 | Remember that executes along with the
timer, so every second this function will run.
| | 01:10 | The function will be createParticles.
| | 01:15 | For the createParticles function, I
will just wrap the skeleton of the
| | 01:19 | createParticles function right
around the code we already wrote.
| | 01:22 | In my file it's from lines 4 to 8.
| | 01:25 | So a new instance of the Snow class
will get created and it will start
| | 01:28 | animating every second.
| | 01:30 | So let's go down a few lines right after
the particleTimer.addEventListener line
| | 01:35 | on line 3 and create the
CreateParticles function.
| | 01:43 | Remember it receives the TimerEvent.
| | 01:50 | So we will start the open curly brace on
line 6 above var particle Snow and then
| | 01:54 | put the closef curly brace after line 11.
| | 01:58 | Your code might not exactly match up
to mine, but on mine it's line 11 right
| | 02:01 | after we add the event listener to the particle.
| | 02:05 | Inside the createParticles function
I am going to select all the code and then
| | 02:08 | press Tab on my keyboard to indent it.
| | 02:10 | That will make it look a little bit cleaner.
| | 02:12 | Now what we are going to do is to set a
random X positioning for our particle.
| | 02:17 | We have to do that after we've created the new
instance of the Snow class or else it won't work.
| | 02:23 | So let's go below particles = new
Snow. I am on line 10 right now.
| | 02:28 | Then we will type particle.x = .
Let's have it be a random number between 0 and
| | 02:37 | 500, so type Math.random() * 500.
| | 02:44 | And that looks good, but if we test the
movie right now, it won't work because
| | 02:47 | we have to start the timer first.
| | 02:49 | So let's go to the bottom of the code,
below the animateParticle function.
| | 02:52 | I am on line 18 right now.
| | 02:54 | Let's go to the next line
and type particleTimer.start.
| | 03:01 | Take a second to look over the code
and make sure everything makes sense.
| | 03:04 | If there aren't any errors in the code,
then test the movie and you'll see the
| | 03:08 | snow animating every second.
| | 03:19 | I am just going to close this window.
| | 03:20 | So you can see the snowflakes were
appearing on the screen and they are randomly
| | 03:26 | coming down. They are at random X positions.
| | 03:27 | There are a few things we can do
to make this little more random.
| | 03:31 | We will take a look at those as we
go through the rest of this chapter.
| | 03:33 | In the next movie, we will get a little
bit more control of our particle system
| | 03:37 | by putting the range of
snowflakes in a variable.
| | Collapse this transcript |
| Setting a particle range| 00:01 | In this movie, we'll look at how to
give whoever is using this particle system
| | 00:05 | a little bit more control over the
xRrange that the snowflakes are spread out.
| | 00:11 | If you're following along, I'm in
Setting_Range.fla in the Chapter 6 folder in
| | 00:16 | the Exercise Files folder.
| | 00:18 | Let's go to the Particles movie clip.
| | 00:21 | Then on stage, we're just
going to draw a rectangle.
| | 00:24 | Let's select the
Rectangle tool from the toolbar.
| | 00:26 | I'm going to select no Stroke and a
Fill of any color and I'm just going to
| | 00:34 | draw a rectangle.
| | 00:39 | What I want to do now is make sure that the
rectangle is aligned to the top left of the stage.
| | 00:43 | So select the rectangle on the stage, go the
Align panel, make sure To stage is selected.
| | 00:50 | Select Align left-edge and Align top-edge.
| | 00:52 | What we're going to do is have the
snowflakes come down based on the width of this box.
| | 01:00 | Let's first make this box transparent.
| | 01:01 | I'm going to select the Fill Color
in the Property Inspector and drag the
| | 01:06 | Alpha slider down to 0.
| | 01:09 | Click away. You won't see anything.
| | 01:11 | You want to make sure that your
art is not on the actions layer.
| | 01:14 | So, I'm actually going to create a
new layer and call the new layer box.
| | 01:20 | Select the first keyframe of the Actions layer.
Press Command+X or Ctrl+X to cut the box.
| | 01:26 | Select the box layer and then paste the
box using Shift+Command+V or Shift+Ctrl+V.
| | 01:31 | Let's go to the first keyframe of the
Actions layer and open up the Actions panel.
| | 01:37 | Right below there are two variable
declarations at the top of the code.
| | 01:40 | Let's go down to line 3 and create a
new variable called xRange, referring to
| | 01:47 | the range of snowflakes horizontally.
| | 01:51 | Data type will be a Number and
we'll set it equal to this.width.
| | 01:57 | Then inside of our
createParticles function, mine is on line 11.
| | 02:02 | We're going to find the 500, which is
the random range that we created in the
| | 02:06 | last movie, and we will replace that with xRange.
| | 02:11 | Now, the snowflake range will be
within that box that we created.
| | 02:16 | Let's go back to the main timeline.
| | 02:17 | Let's go back to Scene 1 and then
move the box somewhere on the screen.
| | 02:23 | Notice we can see the box now.
| | 02:25 | We can actually see our
particle system, which is pretty cool.
| | 02:28 | We're going to put it on the right side
of the screen and then test the movie.
| | 02:38 | And I will just close the window.
| | 02:40 | And notice that the snowflakes
fell within this bounding box.
| | 02:44 | So that gives you a
little bit more control.
| | 02:46 | But let me show you something.
| | 02:49 | If you select the particle system on
the stage, the Particles movie clip,
| | 02:53 | you go to the Free Transform tool and
let's say you wanted to make the range
| | 02:58 | a little bit bigger.
| | 02:59 | So you scaled it out.
| | 03:00 | So I just scaled that horizontally.
| | 03:02 | If I test the movie now, look at the snowflakes.
| | 03:07 | They cover the whole screen
but they are really wide.
| | 03:11 | I'll go ahead and close the Preview window.
| | 03:15 | We need some way to get past that.
| | 03:16 | So, in the next movie, we'll look
at how to overcome that obstacle.
| | Collapse this transcript |
| Defining a dynamic range| 00:01 | In this movie, we will write the
code that will give the user of this
| | 00:04 | particle system the flexibility to
drag and scale the particle system
| | 00:09 | without the particle scaling.
| | 00:11 | If you're following along, I'm in Dynamic
_Range.fla in the Chapter 6 folder in
| | 00:16 | the Exercise Files folder.
| | 00:17 | Let's go to the Particles movie clip.
| | 00:19 | Select the first keyframe of the actions
layer and then open up the Actions panel.
| | 00:24 | Right below where we
created the xRange variable,
| | 00:26 | let's just create a yRange,
just in case we need to use it.
| | 00:29 | Let's go to the next line.
| | 00:32 | I'm just going to select xRange code
with Command+C or Ctrl+C, paste it on the
| | 00:36 | next line using Command+V or Ctrl+V.
I'm going to change the xRange to yRange.
| | 00:42 | Change this.width to this.height.
| | 00:44 | Let's go down to the next line of code.
| | 00:47 | Because we're holding the values in variables.
| | 00:49 | If we simply set the X and Y scale
back to their normal values, then the
| | 00:55 | particles won't scale.
| | 00:57 | But we'll still have the range that
whoever is using the particle system sets by
| | 01:01 | stretching out the particle system.
| | 01:03 | Just type this.scaleX = 1 and this.scaleY = 1.
| | 01:12 | Let's close the Actions panel.
| | 01:15 | Go back to Scene 1.
| | 01:17 | Select the particle system on the stage,
scale it to specify a range.
| | 01:26 | Scale it horizontally and vertically.
| | 01:28 | And let's test the movie.
| | 01:35 | Notice the particles don't scale. Great!
| | 01:38 | Let's close the Preview window.
| | 01:40 | So now we can control the width
of our particle system by just
| | 01:45 | clicking-and-dragging to scale the system.
| | 01:47 | In the next movie, we'll look at how
to modify a particle's alpha and scale.
| | Collapse this transcript |
| Controlling particle alpha and scale| 00:01 | In this movie, we'll take a look at
animating a particle's alpha and scale.
| | 00:05 | If you're following along, I'm in
Particle_Alpha_Scale.fla in the Chapter 6
| | 00:10 | folder in the Exercise Files folder.
| | 00:12 | Let's double-click the Particles movie
clip in the Library to enter its timeline.
| | 00:16 | Select the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:19 | We'll use variables to hold the
scale rate and the alpha rate that these
| | 00:24 | particles will change.
| | 00:26 | At the end of line 4 after I declare
the yRange, go to the next line and
| | 00:31 | create a new variable called alphaRate
with a capital R. It'll be a Number and
| | 00:38 | we'll set that equal to 0.02.
| | 00:41 | On the next line, we'll
create a variable called scaleRate.
| | 00:43 | Data type it to a Number
and that'll also be 0.02.
| | 00:51 | Let's scroll down.
| | 00:53 | Find the animateParticle function,
stored at the bottom of the code.
| | 00:57 | Mine starts on line 21.
| | 00:58 | Let's go to the next line of code
right below event.target.y++ and we'll make
| | 01:05 | the alpha and the scale
decrease by the alpha and scale rates.
| | 01:09 | Let's type event.target.alpha -=
alphaRate and on the next line we'll type
| | 01:20 | event.target.scaleX -= scaleRate.
| | 01:29 | Let's go to the next line and type event.
target.scaleY and then not minus. We'll just
| | 01:36 | say = event.target.scaleX.
| | 01:45 | And that way the proportions will stay the same.
| | 01:48 | Let's just make these
animate a little bit faster.
| | 01:52 | So, we'll change event.target.y++ to event
.target.y += 10 and that should be good.
| | 01:59 | Let's test the movie.
| | 02:03 | The particles fall down.
| | 02:09 | It looks great.
| | 02:10 | You can see that the particles are
scaling down and the alpha is decreasing.
| | 02:15 | We are really on the road to
building a nice particle system here.
| | 02:18 | In the next movie, we'll
look at varying particles' speed.
| | Collapse this transcript |
| Varying particle speed| 00:01 | In this movie, we'll take a
look at modifying the particle speed.
| | 00:04 | If you're following along, I'm in
Particle_Speed.fla in the Chapter 06 folder in
| | 00:09 | the Exercise Files folder.
| | 00:11 | Let's go inside the
Particles movie clip in the Library.
| | 00:12 | Select the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:16 | Now varying the speed will
actually require a few things.
| | 00:21 | In other words, there is more than one
way to modify the speed or to vary the
| | 00:26 | speed of a particle and
we'll use a few of them here.
| | 00:29 | The first thing we'll do is set a
speed minimum and a speed maximum value.
| | 00:35 | And then we'll have the
snowflakes randomly pick speeds to go.
| | 00:39 | So, let's declare those right below
where you declared scaleRate variable.
| | 00:43 | In my code that's on line 6, yours
might be on a different line, but you can
| | 00:46 | find the scaleRate variable anyway.
| | 00:48 | Let's go down to the next line.
| | 00:49 | Create a new variable called speed and
then Min with a capital M short for minimum.
| | 00:55 | That'll be a Number equal to 10.
| | 00:59 | The current value that we have,
if we scroll down the code, you'll see
| | 01:02 | even.target.y += 10 that's
how fast it's going right now.
| | 01:07 | So, that's the minimum speed.
| | 01:08 | Let's go to the top of the code.
| | 01:10 | We will create a speedMax variable
right under the speedMin variable.
| | 01:14 | Call this variable speedMax with
capital M, datatype it to a Number and
| | 01:21 | the speed will be 15.
| | 01:23 | Now what we'll do is scroll down
to the bottom of the code, find the
| | 01:26 | animateParticle function.
| | 01:28 | Mine starts on line 23.
| | 01:29 | We'll select the 10 that we defined in
the last movie and we're going to replace
| | 01:34 | that with a random number.
| | 01:36 | Let's type Math.random() * , and you
are probably already familiar with this,
| | 01:44 | but when you use Math.random()
and you want to get a random number.
| | 01:47 | The number you multiply Math.random()
by is the range of numbers you're going
| | 01:52 | to be working with.
| | 01:53 | The number that you add on or subtract
after you multiply a value is the minimum value.
| | 02:00 | So, to get the values we want from Math.
random(), we need to first type in the range.
| | 02:06 | The range of numbers is the max number
that you want, minus the minimum number.
| | 02:11 | So in here, go ahead and type some
parentheses and inside of the parenthesis,
| | 02:15 | I'm going to type speedMax-speedMin
and that'll give us the right range.
| | 02:26 | After that I'm going to type plus, and
this is outside of parentheses, plus the
| | 02:32 | minimum value I want.
| | 02:33 | So, I would type speedMin with capital M.
| | 02:37 | So, that'll randomize our speed,
instead of everything just moving down at
| | 02:40 | 10 pixels per second.
| | 02:42 | It'll move at a varied value
between 10 and 15 pixels per second.
| | 02:47 | The next step is to vary the delay of the timer.
| | 02:50 | Let's scroll to the top of the code.
| | 02:52 | What we want to do is have
the timer only run one time.
| | 02:57 | The timer will run once and then we'll
use a random number to see when the timer
| | 03:02 | will run the next time.
| | 03:04 | On the second line of code, find where
we declared the particleTimer variable.
| | 03:08 | We declared new Timer. We passed in the 1000.
| | 03:10 | Let's change that 1000 to 1,
then a comma and then 1.
| | 03:15 | The second one is referring to the repeat
counts, so this timer is only going to move once.
| | 03:21 | Now we want to create another
variable to hold the delay range.
| | 03:26 | In other words, what's the longest we
want the timer to wait before it runs again?
| | 03:30 | Create a variable right below
speedMax. Mne is on line 8.
| | 03:34 | Call this variable delayMax, data
type it to a Number, set it equal to 50.
| | 03:45 | Now let's go inside of the
createParticles function. Mine starts on line 15.
| | 03:49 | Now what we're going to do is
change the Delay property of the timer.
| | 03:54 | And then we'll reset the
timer and start it over again.
| | 03:58 | So, every time the timer runs,
it'll be a different interval.
| | 04:02 | And that way, this will be a lot more random.
| | 04:05 | So, now we'll type, particleTimer.
delay = . Remember, the number we multiply
| | 04:14 | Math.random() by is the range.
| | 04:16 | So, I'm going to type Math.random() * delayMax.
| | 04:23 | Let's go to the next line of code and
we'll recall the Timer reset method, which
| | 04:27 | stops the timer and brings it back
to the beginning or resets its count.
| | 04:32 | So, we'll type particleTimer.reset().
| | 04:37 | On the next line, we'll start the timer
again. Just type particleTimer.start().
| | 04:46 | There is one last thing we want to do
randomize these, just a little bit more.
| | 04:51 | Instead of starting all the y-
positioning of the particles at 0, we'll set at
| | 04:56 | some random value below 0.
| | 04:59 | So that way, they will be a
little more spread out when they fall.
| | 05:02 | In other words, I am going to
look at my code one more time.
| | 05:05 | To set the yRange, let's
select the particle xRange.
| | 05:08 | Now we're still inside the
createParticles function.
| | 05:10 | Mine is on line 21.
| | 05:12 | Select that lone of code where
we declare the particle.x value.
| | 05:16 | Press Command+C or Ctrl+C to copy it.
| | 05:18 | Go to the next and paste the code by
pressing Command+V or Ctrl+V.
| | 05:22 | Change particle.x to particle.y
and change xRange to yRange.
| | 05:28 | Remember that's the height of the
movie clip or the particle system clip.
| | 05:34 | So, we don't really want that.
| | 05:36 | We want a negative value.
| | 05:37 | So actually, if I just put a minus sign right
in front of yRange, I'll get a negative value.
| | 05:43 | I could mix it up a little bit more by
putting a lower minimum and I'm going to do that.
| | 05:47 | Right after yRange, I'm
going to type - 25.
| | 05:52 | That way, the minimum value is 25
and then we have the yRange as a
| | 05:57 | negative value that goes up.
| | 05:59 | Now, we have completely randomized
the movement of speed in our particles.
| | 06:02 | Let's take a second to look over
the code and then test the movie.
| | 06:09 | That's a lot of particles, and
they are falling all in one area.
| | 06:11 | So, I'm going to close this window and
I'm going to go back to the main timeline
| | 06:15 | by clicking Scene 1.
| | 06:16 | I'm going to select the particle on
the stage and sure enough, it's in a
| | 06:20 | really narrow area.
| | 06:21 | So, I'm going to widen it
out and stretch it down a lot.
| | 06:24 | And then I'm going to test the movie.
| | 06:27 | Lots and lots of snow and that looks great.
| | 06:32 | I'm going to close this window and
there we have adjusted the particle speed.
| | 06:36 | There is only one thing left to do to
complete this particle system and that's
| | 06:40 | to remove children, whose Alpha is too low.
| | 06:44 | That'll optimize our performance.
| | 06:46 | As is, Flash is creating a bunch
of children in our particle system and
| | 06:51 | never removing them.
| | 06:52 | So, we'll do that in the next movie.
| | Collapse this transcript |
| Removing children to optimize performance| 00:01 | In this movie, we're going to
optimize our particle system by using a
| | 00:06 | removeChild to remove the
particles we can't see anymore.
| | 00:08 | If you're following along, I am in
Removing_Children.fla in the Chapter 6
| | 00:13 | folder in the Exercise Files folder.
| | 00:16 | Let's double-click Particles in the
Library to enter its timeline, select the
| | 00:20 | first keyframe in the actions
layer, and open up the Actions panel.
| | 00:23 | Let's scroll down all the way to the
bottom of the code and inside of the
| | 00:27 | animateParticle function, you want to
use removeChild on the particle if its
| | 00:31 | alpha is less than or equal to 0.
| | 00:34 | So we'll use a conditional statement to do that.
| | 00:35 | I am on line 28 inside of the
animateParticle function and I'm going to go
| | 00:39 | the next line of code.
| | 00:40 | I'm going to type an if statement.
| | 00:42 | I'm going to type event.target.alpha > 0.
| | 00:51 | I am going to just grab the code
that's inside of this function.
| | 00:53 | That's four lines of code
that all start with event.target.
| | 00:56 | We'll wrap all those in curly braces.
| | 00:58 | So if the alpha is greater than 0
then move the particle and scale it,
| | 01:04 | and reduce its alpha.
| | 01:06 | If the alpha is equal to or less
than 0, then we want to use removeChild.
| | 01:10 | So let's go right below this
curly brace, create an else statement.
| | 01:13 | Just type else and some curly
braces, removeChild, and we'll type
| | 01:20 | getChildByName, event.target.name.
| | 01:30 | Make sure you have a parenthesis to close
out the getChildByName and the removeChild.
| | 01:34 | Let's go to the next line and then
we'll remove the event listener, so that the
| | 01:42 | particle does not listen
for the ENTER_FRAME event.
| | 01:44 | And this step is crucial.
| | 01:45 | If you don't do this step,
you'll probably run into errors.
| | 01:48 | So make sure you remove the event listeners.
| | 01:51 | Type event.target.removeEventListener,
and we're going to remove the
| | 02:00 | ENTER_FRAME, so it's Event.ENTER_
FRAME and the function is called
| | 02:09 | animateParticle, and that's it.
| | 02:16 | So if the alpha is less than or equal
to 0, we'll remove that particle and have
| | 02:21 | that particle stop
listening for the ENTER_FRAME event.
| | 02:25 | Let's test the movie, and
watch the snowflakes fall.
| | 02:28 | Looks like they are falling great.
| | 02:29 | You can't really tell a whole bunch of a
difference, but I promise you this is
| | 02:34 | less processor intensive.
| | 02:35 | So you just might have to take my word for it.
| | 02:37 | Let's close this Preview window.
| | 02:40 | And you have made a particle system.
| | 02:42 | So give yourself a nice pat on the back.
| | 02:44 | What we're going to do next is
talk about how easy it is to swap out
| | 02:48 | different particles.
| | Collapse this transcript |
| Using different particles| 00:00 | In this movie, we'll take a look at using
different particles in our particle system.
| | 00:05 | If you're following along, I am in
Different_Particles.fla in the Chapter 6
| | 00:10 | folder in the Exercise Files folder.
| | 00:12 | If you still have the Rain movie clip in
your Library, right-click or Ctrl+Click
| | 00:17 | that movie clip and choose Linkage.
| | 00:18 | Just make sure you selected
Export for ActionScript and click OK.
| | 00:22 | Let's go to the Particles movie clip,
select the firs keyframe of the actions layer,
| | 00:26 | and open the Actions panel.
| | 00:28 | To use a different particle, all we have
to do is replace the word Snow with Rain.
| | 00:34 | We can actually even do a Find and Replace.
| | 00:35 | I'm going to click inside of the Actions
window and press Command+F or Ctrl+F on
| | 00:41 | the PC and do a Find and Replace.
| | 00:44 | I want to find Snow with capital S,
replace it with Rain with capital R.
| | 00:48 | Make sure you check Match case
and the click Replace All.
| | 00:54 | Flash prompts you and tells you
that you replaced 2 items. Click OK.
| | 01:00 | Close the Find and Replace window.
| | 01:02 | Test the move, and you have Rain
instead of Snow. Pretty nice, huh?
| | 01:10 | It's actually pretty easy to change particles.
| | 01:13 | We can even create a new particle right now.
| | 01:15 | Let's go to Insert > New Symbol.
| | 01:17 | I'm going to call this just Particle to
be nice and generic, and then click OK.
| | 01:24 | This is not to be confused with Particles,
the name of our particle system by the way.
| | 01:28 | Let's say I want it to be
raining bricks or something.
| | 01:35 | And let's draw our really simple brick
using the Rectangle tool and that's good
| | 01:39 | enough and I'm going to just
align it using the Align panel.
| | 01:43 | Make sure you have To stage as
selected and align it to the center.
| | 01:48 | Right-click or Ctrl+Click Particle in
the Library, choose Linkage, check the
| | 01:53 | Export for ActionScript box and click OK.
| | 01:57 | Return to the Particles movie clip.
| | 01:58 | Go to the first keyframe of the
actions layer. Open up the Actions panel.
| | 02:05 | Press Command+F or Ctrl+F,
do a Find and Replace.
| | 02:08 | We want to find Rain with R and
replace it with Particle with a P.
| | 02:15 | Check Replace All, click OK.
| | 02:17 | Close the Find and Replace
window and test the movie.
| | 02:21 | And now it's raining bricks.
| | 02:26 | Let's close this window,
close the Actions panel.
| | 02:29 | And so we can have
particles with whatever we want.
| | 02:32 | I can even go inside the Particle movie
clip and change the brick into some sort
| | 02:37 | of smiley face, test the movie and
smiley face particles are coming down.
| | 02:46 | I'm going to close this window
and there was a look at creating a
| | 02:50 | particle system.
| | Collapse this transcript |
|
|
7. Animating Using TransitionsUnderstanding transitions| 00:00 | In this chapter, we're going to
learn to work with transitions using the
| | 00:03 | TransitionManager Class.
| | 00:05 | If you're following along, just
open up Flash Help and find the
| | 00:09 | TransitionManager class.
| | 00:11 | You'll have to find all classes
and then click on TransitionManager.
| | 00:16 | Once you have the Help window open and
you're looking at the TransitionManager class,
| | 00:19 | take a quick look at what
Flash has for you, so you can get some
| | 00:23 | information about the class.
| | 00:25 | Basically, the TransitionManager class
has several pre-built animations and
| | 00:30 | they are kind of transitional animations.
| | 00:32 | Like something fading in
or sliding in or zooming in.
| | 00:36 | We can also do transitions out.
| | 00:39 | So you can have something
zoom out or slide out, etcetera.
| | 00:43 | Basically, you don't have as much
control as you do when you create an instance
| | 00:47 | of the Tween class, but you can
create a transition very quickly.
| | 00:52 | So in lot of cases, it's very
effective to use the TransitionManager class.
| | 00:56 | There are two different
ways to create a transition.
| | 00:58 | Flash outlines them in the Flash Help.
| | 01:00 | You can either call the TransitionManager.start()
method and pass in a few values,
| | 01:05 | or you can call the
TransitionManager.startTransition() after you create
| | 01:09 | a new instance of the TransitionManager class.
| | 01:12 | Both ways work pretty good.
| | 01:13 | And we'll talk about why you'd want
to use one over the other a little bit
| | 01:17 | later on in this chapter.
| | 01:18 | One thing I want to point on in this
movie is when you create a transition,
| | 01:22 | you need to send Flash an object.
| | 01:24 | So that's an instance of the Object class.
| | 01:28 | And we've talked about that very briefly.
| | 01:30 | And in the next movie, we'll explore
how to create a new instance of the Object
| | 01:34 | class and how the Object class works.
| | 01:36 | Now once you know how the Object class
works, we can start creating transitions.
| | Collapse this transcript |
| Understanding the Object class| 00:00 | In this movie, we'll take a brief
look at working with the Object class.
| | 00:04 | If you're following along,
just create a blank document.
| | 00:07 | The Object class is what's known as
a dynamic class, meaning you can add
| | 00:10 | properties to the Object
class at any point in time.
| | 00:13 | Let's go to the first keyframe of
Layer 1 and open up the Actions panel.
| | 00:17 | You can create a new instance of the
Object class just like you create a new
| | 00:22 | instance of any other class.
| | 00:24 | So I'm going to create a variable
called my_obj, datatyped to Object.
| | 00:31 | Set it to a new instance of the Object class.
| | 00:34 | Let's go to the next line, and so if
wanted to give my object my first name or
| | 00:42 | my last name, I could type my_obj, dot,
| | 00:47 | and if type something that
doesn't already exist as a property on this
| | 00:52 | object, then Flash will create that for you.
| | 00:54 | So if you just type myName = ,
and then type your name in quotes.
| | 01:04 | On the next line, I'll create a last
name, so my_obj.myLastName.
| | 01:16 | And then just type in your last name in quotes.
| | 01:18 | Make sure to close out quotes.
| | 01:20 | And then if you trace my_obj.myName,
test the movie, then you get your name
| | 01:34 | in the Output window.
| | 01:35 | So we can dynamically
create properties on this class.
| | 01:39 | So I'll just erase everything
except from my_obj:Object =, and then
| | 01:44 | trace my_obj.myName.
| | 01:47 | To create an array, you use square
brackets, if you want to do shorthand notation.
| | 01:52 | Shorthand object notation is in curly braces.
| | 01:55 | To declare properties, and give them
values, you type the name of the property.
| | 01:58 | So I'm going to call this property
myName and then to give it a value, you use a
| | 02:04 | colon, and then you type the value.
| | 02:09 | So my name is "Todd".
| | 02:10 | So that's the first property.
| | 02:12 | I will type a comma and I'm going to
type myLastName and a colon and then
| | 02:22 | "Perkins", type your last name in quotes.
| | 02:25 | So see it's kind of like an array except
we use curly braces and you declare the
| | 02:30 | property name and then a colon
and then the value after that.
| | 02:35 | Let's test the movie and
we get the same results.
| | 02:37 | So that was a quick look at how
to work with the Object class.
| | 02:42 | You may be thinking, which way should I use?
| | 02:44 | You can actually use whichever way you want.
| | 02:46 | I kind of like the first way that we
did where we added the properties one line
| | 02:49 | at a time, but it's your
choice however you want to do it.
| | 02:52 | In the next movie, we'll use the
Object class to create transitions.
| | Collapse this transcript |
| Placing transition information in an object| 00:00 | In this movie, we'll create a
generic object to hold all the information
| | 00:05 | about a transition.
| | 00:06 | If you're following along I'm in
Transition_Object.fla in the Chapter 7 folder
| | 00:12 | in the Exercise Files folder.
| | 00:14 | In the Library, I have a PNG image
and a movie clip and the movie clip just
| | 00:20 | contains the PNG image and
that's on the stage as image_mc.
| | 00:24 | Let's go to the first keyframe in the
actions layer and open up the Actions
| | 00:27 | panel and I'm just going to paste in some code.
| | 00:32 | When you're working with transitions,
you need to make sure to import the
| | 00:35 | Transition class and the Transition
manager class and these are both inside of
| | 00:40 | the fl.transitions package.
| | 00:42 | So, I'll just use an
asterisk to take them both in.
| | 00:45 | You also need to import easing
classes, so make sure to do that as well.
| | 00:50 | Here, we created a
generic object called trans_obj.
| | 00:55 | We set a value called type, direction,
duration and easing and these are all
| | 01:00 | properties that are used
inside of a Transition object.
| | 01:04 | So we need to have these four properties set up.
| | 01:08 | The type of transition holds the
class that you're going to be using for
| | 01:12 | your transition.
| | 01:14 | If you want information about all the
classes, you can select Transition and
| | 01:19 | then press F1 on your keyboard.
| | 01:22 | All the subclasses of the Transition
class are the classes that you can use,
| | 01:27 | when you're working with transitions.
| | 01:29 | Scroll down, you can find the
properties that you have to define: direction,
| | 01:32 | duration and easing.
| | 01:34 | And type just tells you again which
class you're going to be working with.
| | 01:37 | So we're going to be working with Zoom here.
| | 01:39 | If you click on each individual type
you can find different properties that you
| | 01:42 | have to create on your generic
objects in order to use that class.
| | 01:46 | So let's close this window.
| | 01:49 | The direction is referring to
whether the transition is going IN or OUT.
| | 01:55 | Because the transition is IN here, we
won't see anything on the screen at first
| | 01:59 | and then our object will zoom in.
| | 02:01 | The duration is in seconds.
| | 02:04 | That's how long an animation will last.
| | 02:07 | The easing method is just like the
easing method in the Tween class.
| | 02:10 | If we tested the movie right now,
we wouldn't get an animation.
| | 02:13 | What we have to do now is take this
object and the movie clip, we want to
| | 02:17 | transition and connect those to a transition.
| | Collapse this transcript |
| Creating transition animations| 00:01 | In this movie, we'll connect the movie
clip on a stage to the generic object
| | 00:04 | we created in the last movie,
to a transition and animate it.
| | 00:07 | If you're following along, I'm in
Creating_Transitions.fla in the Chapter 7
| | 00:13 | folder of the Exercise files folder.
| | 00:14 | Let's go at the first keyframe of the
Actions layer and open up the Actions panel.
| | 00:21 | The simplest way to create a
Transition is to use a TransitionManager.start
| | 00:25 | method without creating an
instance of the TransitionManager class.
| | 00:29 | So let's go down to the very bottom, of
the code and go down a few lines, type
| | 00:33 | Transition with capital T, Manager
with capital M, .start and Flash wants us
| | 00:44 | to pass in the content, which is a
movie clip, and the trans parameters, which
| | 00:48 | are held in an object.
| | 00:50 | Just like we looked at shorthand notation
to create objects at the beginning of
| | 00:53 | this chapter, we could use that here.
| | 00:56 | Defining an object this way
is just my personal preference.
| | 00:59 | So, the movie clip you want to transition
is image_mc and the object is trans_obj.
| | 01:09 | Let's test the movie and watch
the transition bounce in.
| | 01:18 | Pretty nice.
| | 01:20 | So, we can change the easing method
to Elastic and test the movie again.
| | 01:26 | The picture comes out a little bit big.
| | 01:30 | We can change the easing method to Strong.
easeOut and you kind of get the point there.
| | 01:35 | We can also change the
direction or the duration.
| | 01:37 | So I'm going to change the direction
into Transition.OUT and the duration to
| | 01:43 | 3, meaning 3 seconds.
| | 01:45 | Let's test the movie now and it takes
3 seconds in the movie. It zooms out.
| | 01:53 | Notice that the movie clip zooms from the
registration point which is at the top left.
| | 01:57 | So if you want it to zoom from the
middle, just make the registration point,in
| | 02:01 | the middle of the movie clip.
| | 02:01 | I'm going to close this window, and
there's a look at creating a transition.
| | 02:06 | In the next movie, we'll look at the
different types of transitions that you can
| | 02:10 | use and how to work with them.
| | Collapse this transcript |
| Creating different types of transitions| 00:00 | In this movie, we'll explore some
of the different transition types.
| | 00:04 | If you're following along, I'm in
Different_Transitions.fla in the Chapter 7
| | 00:08 | folder in the Exercise Files folder.
| | 00:10 | Let's go to the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:15 | All we have to do to get a different
type of transition is change the type
| | 00:19 | property in our generic object.
| | 00:21 | So I'm going to change the type to Wipe.
| | 00:25 | Now, remember if you want to find all
the types, you can select Transition and
| | 00:30 | then press F1 on your keyboard.
| | 00:32 | All the classes that subclass the Transition
class are the different types that you can use.
| | 00:36 | So let's test the movie.
| | 00:42 | You can see the image wipes out.
| | 00:43 | I'm going to go back to
Transition.IN and test the movie.
| | 00:51 | It's kind of a wipe that brings the image in.
| | 00:54 | Let's say you wanted to know more
about what the Wipe Class can do or what
| | 01:01 | the Wipe type can do.
| | 01:02 | You can select Wipe and then press F1
on the keyboard. Flash took me to the
| | 01:08 | Transition class and I'm just going to
click Wipe and then Flash tells us that
| | 01:13 | the extra property that we
can work with is the startPoint.
| | 01:15 | So, we can choose where the
startPoint is or where we want to wipe, and
| | 01:23 | they are just numbers from 1 to 9.
| | 01:24 | So, I'm just going to close this window
and then create the startPoint property
| | 01:28 | on our generic object.
| | 01:29 | So I'm going to do that on line 9.
| | 01:30 | I'll type trans_obj.startPoint
with capital P. I'll set it equal to 5.
| | 01:41 | Now I'll test the movie.
| | 01:45 | So, it gives us a diagonal wipe. Pretty neat.
| | 01:48 | Let's take a look at one more and
I'm going to look at PixelDissolve.
| | 01:53 | So, let's change Wipe to Pixel capital
P, Dissolve with a capital D. And let's
| | 02:01 | select PixelDissolve and then, press
F1 on the keyboard and see what other
| | 02:05 | properties we have to change to use the
PixelDissolve class. Looks like Flash
| | 02:09 | brought in the Wipe class.
| | 02:10 | I am just going to open the window
on the left side of the Help menu by
| | 02:14 | clicking the little arrow and then I'm
going to find the PixelDissolve class.
| | 02:21 | So I may have to scroll up a little bit
and there's the PixelDissolve class and
| | 02:27 | there's two variables, xSections and ySections.
| | 02:31 | That's referring to how many sections
of pixels are in the image that we bring
| | 02:36 | in or out and PixelDissolve just gives
kind of a like a fade in, but it looks
| | 02:40 | like it's coming in pixel-by
-pixel. It's kind of cool.
| | 02:42 | So, let's close this window and we'll
replace that startPoint property with
| | 02:50 | xSections. Set that = 25 and
we'll create a ySections property.
| | 03:02 | I'll set that = 25 as well and I'll test
the movie. And image comes in by pixels.
| | 03:10 | So, there's a look at just
a few of the Transitions.
| | 03:14 | You could go by yourself and look at all of
them in the Help menu and find out how they work.
| | 03:21 | In the next movie, we'll take a look
at some TransitionManager events that
| | 03:24 | actually are not documented in Flash.
| | Collapse this transcript |
| Using undocumented transition events| 00:00 | In this movie, we will take a look at
using undocumented transition events, then
| | 00:05 | you can respond to when a transition
finishes going in or finishes going out.
| | 00:11 | If you're following along, I am in
Transition_Events.fla in the Chapter 7
| | 00:16 | folder in the Exercise Files folder.
| | 00:18 | Let's go to the first keyframe in the
actions layer and open the Actions panel.
| | 00:21 | Let's erase the line of code that says
TransitionManager.start and we are going
| | 00:28 | to create a new instance of the
TransitionManager class and then we are going to
| | 00:32 | have that instance listen for an event.
| | 00:34 | So let's create a new variable. I am
just going to call this TM, stands for
| | 00:39 | TransitionManager, data type will be
TransitionManager, set it equal to a new instance
| | 00:47 | of the TransitionManager class, and
we will pass in the image movie clip.
| | 00:53 | So type image_mc.
| | 00:57 | So when you create an instance of the
Transition Manager class all you need to
| | 01:02 | do is pass in the movie clip
instance you want to transition.
| | 01:06 | You don't also pass in the
transition object. We will do that later.
| | 01:09 | Let's go down a few lines.
| | 01:12 | Now we will add the event listener.
| | 01:13 | Just type tm.addEventListener.
| | 01:17 | And the event we will put it in quotes
this time because this is undocumented.
| | 01:23 | This format is a little bit different.
| | 01:25 | And actually all the events are
strings and they are just constants.
| | 01:29 | That's why they are all capitalized.
| | 01:31 | So we will type allTransitionsInDone.
| | 01:40 | And this event is when all of
the In transitions are done.
| | 01:43 | Put a comma and a space and then we
will call this function inTransDone.
| | 01:53 | Let's go down a few lines. We will
define inTransDone function.
| | 02:02 | And we will receive an event
| | 02:05 | and the data type is event.
| | 02:12 | And we will just trace transitions in done.
| | 02:21 | All right, and the last thing I
have to do is start the transition.
| | 02:25 | So let's go to the very bottom of the
code below everything else, go down a
| | 02:28 | few lines, type tm.
| | 02:29 | When we started a transition
before, the other way we used
| | 02:34 | TransitionManager.start.
| | 02:35 | Now we will use startTransition.
| | 02:38 | That way we only pass in the object.
| | 02:40 | We will pass in the transition
object, trans_obj, and test the movie.
| | 02:57 | When the transition is done we
get the transitions in done message.
| | 03:01 | There is also allTransitionsOutDone.
| | 03:07 | I am going to change In to Out, and
we will make the transition change in our code.
| | 03:14 | I am just going to change all the Ins to Outs.
| | 03:17 | So I have the event name, the function
name, the trace statement, and now at the
| | 03:27 | top of the code on line six, where we
declare the direction of our transition
| | 03:30 | object, I am going to
change it to Transition.OUT.
| | 03:34 | Make sure out is in all caps. Test the movie.
| | 03:40 | Transition goes out. We get
the message in the Output window.
| | 03:43 | Let's close these windows.
| | 03:46 | And now you can do anything you want to
respond to these transitions, but I just
| | 03:50 | wanted to show you how they work.
| | 03:52 | It's really important that you take a
note of this because these transitions
| | 03:55 | again are not documented within Flash.
| | 03:58 | Now that we know how to work with transitions,
| | 04:00 | let's apply them to our image gallery.
| | Collapse this transcript |
| Using transitions in an image gallery| 00:00 | In this movie, we will apply what we
have learned about transitions throughout
| | 00:03 | the chapter to the image
gallery created earlier in this title.
| | 00:08 | If you're following along,
I am in Image_Gallery.fla.
| | 00:12 | That file is in the classes folder
that's inside of the Chapter 7 folder,
| | 00:17 | inside of Exercise Files folder.
| | 00:18 | Let's take a look at this file. Because
we are going to be working with classes
| | 00:24 | in this file, we are going to be working
with image gallery class, make sure you
| | 00:28 | have the proper class path setup.
| | 00:30 | Let's just do that really quick. Click
Settings, ActionScript 3.0 Settings.
| | 00:36 | If you already have a class path defined,
just take it away by selecting and then
| | 00:40 | clicking the minus button, click the
Browse to Path button and we are looking in
| | 00:44 | Chapter_07, classes, actionscript_
classes_start, and then click Choose.
| | 00:51 | If you don't have access to the
Exercise Files, you can use the same image
| | 00:55 | gallery class file that we created
earlier in this title. Click OK.
| | 00:59 | Let's take a look at the code for the
first keyframe in the Actions layer and
| | 01:05 | open up the Actions panel.
| | 01:07 | Import the image gallery class,
create a new instance for the image gallery
| | 01:11 | class passing in our XML information,
and add the gallery to the stage.
| | 01:15 | If you test the movie at this point,
see the image gallery and it works. Nice.
| | 01:23 | Let's close these windows out and
now we are going to ImageGallery.as.
| | 01:27 | This is the image gallery that we are
importing, so it's inside the gallery
| | 01:33 | folder that's inside the interactive
folder that's inside the interactive
| | 01:36 | folder, that's inside the
actionscript_classes_start folder.
| | 01:38 | All right, let's go up to the top of
the code and now what we need to do is
| | 01:43 | create a few variables.
| | 01:46 | First, we will have to create a movie clip
to be the container for the Loader object.
| | 01:50 | The Loader object is what's
loading the full size images.
| | 01:53 | In order to use transitions,
we need to use a movie clip.
| | 01:56 | So I will create an empty
movie clip to hold the full Loader.
| | 02:00 | Scroll down to the bottom of our variable
declarations. I am on line 22 in my code.
| | 02:04 | Go to the next line, create a variable
called fullContainer, data type it to a
| | 02:13 | MovieClip, set it equal to a new
instance of the MovieClip class.
| | 02:18 | Next, we will create an instance of the
TransitionManager class, we will call it
| | 02:22 | tm, data type it to TransitionManager,
set it equal to a new instance of the
| | 02:29 | TransitionManager class.
| | 02:33 | We will have to pass in the fullContainer.
| | 02:35 | That's what we are going
to apply our transitions too.
| | 02:43 | Right below that we will
create our transition object.
| | 02:46 | We will call this trans_obj, data
type it to Object, set it equal to a new
| | 02:51 | instance of the Object class.
| | 02:53 | Now I will define some properties
for our object, scroll down into the
| | 02:57 | constructor function. Mine starts on line 27.
| | 03:01 | Let's go inside of the constructor
function and go down a few lines and above
| | 03:05 | all the rest of the code inside of there,
we will give our transformation object
| | 03:08 | properties. Just type trans_obj.
| | 03:11 | I am just going to copy that because we
are going to be typing that a lot of times.
| | 03:15 | I am going to select that line of code
and press Command+C. I am going to
| | 03:19 | paste, and I will use
Command+V. Set .type = Photo.
| | 03:24 | Go to the next line. trans_obj.
duration = 1, trans_obj.direction =
| | 03:42 | Transition.IN, make sure IN is all caps.
| | 03:49 | Last property we need to set is easing.
| | 03:51 | So trans_obj.easing = None.easeNone.
| | 04:04 | And that's looking good.
| | 04:06 | Now I am just trying to make a few
tweaks in the code, a little bit below here, so
| | 04:10 | let's scroll down to the
bottom of the constructor function.
| | 04:13 | We have the two addChild
methods. I am on line 52.
| | 04:16 | Find addChild(fullLoader).
| | 04:20 | Now the fullLoader needs to be in the
fullContainer MovieClip so we can animate
| | 04:24 | it with a transition.
| | 04:26 | So what we will do is change fullLoader
to a fullContainer, then go to the next
| | 04:32 | line of code, then we will have the
fullContainer add the fullLoader as a child.
| | 04:45 | And that looks good.
| | 04:46 | So now all we have to do
is start the transition.
| | 04:51 | Let's scroll down to the bottom of the code.
| | 04:54 | Find the showPicture
function. Mine starts on line 84.
| | 04:58 | The showPicture function is the
function that runs when you click on
| | 05:01 | the thumbnail image.
| | 05:02 | This is where the fullLoader loads the
full size image and here we will start
| | 05:09 | the transition. Right below
fullLoader.unload, type tm.startTransition.
| | 05:15 | Then we need to pass in our
transition object, which is trans_obj.
| | 05:25 | Go to File > Save, make sure the file
is saved, look over your code, make sure
| | 05:30 | everything is right and then test the
movie using Command+Return or Ctrl+Enter.
| | 05:36 | Click on a thumbnail.
| | 05:38 | It fades in and gives you that cool photo flash.
| | 05:40 | Now we have successfully added
transitions to our image gallery class.
| | Collapse this transcript |
|
|
8. Taking Flash Video to a New LevelReviewing Flash video basics| 00:00 | In this chapter, we will add some exciting
effects and interactivity to Flash video.
| | 00:04 | If you are following along for this
movie, I am in Reviewing.fla in the
| | 00:08 | Chapter 8 folder in the Exercise Files folder.
| | 00:11 | In this movie we will review Flash video,
talk basically about how it works and
| | 00:15 | everything and look at what we
have setup in this file already.
| | 00:18 | So let's go to the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:22 | Scroll to the top of the code.
| | 00:24 | Remember in Flash video, you
start with a connection object.
| | 00:29 | The data type is NetConnection and you
connect a NetStream to a NetConnection
| | 00:34 | and the NetStream plays your movie.
| | 00:37 | You put a stream object inside of a
video object to display the video.
| | 00:41 | You also need to create a metadata object
and attach it to the NetStream, using the
| | 00:46 | client property and
create an onMetaData function.
| | 00:50 | Now you have to have anything in that function.
| | 00:53 | You just need to define it
or you will get an error.
| | 00:55 | So if we scroll down, you will
see that I have defined onMetaData.
| | 00:59 | So if you do not have access to the Exercise Files,
feel free to copy this down. Let's scroll up.
| | 01:06 | So the NetStream connects to the
NetConnection and the net video holds the stream.
| | 01:14 | We attach the NetStream to the video
by using vid.attachNetStream.
| | 01:21 | Stream plays the flv file.
| | 01:23 | And down here in the code, we are going
to be working with the container movie
| | 01:27 | clip called vidContainer.
| | 01:29 | And we are going to put the
video object inside the vidContainer.
| | 01:33 | When a video is inside of a movie clip,
we have a lot more control over what
| | 01:37 | we can do with a video, because we can
do anything to that video that we can
| | 01:40 | do to a movie clip.
| | 01:41 | So we have some event listeners
added here, some basic properties for the
| | 01:46 | videoContainer. You can see that the
video is the child of the videoContainer.
| | 01:49 | Now I am going to scroll down the code.
Some functions are defined here.
| | 01:55 | This might be the time to copy them down
if you are working with a blank file.
| | 02:00 | Play movie and pause movie, play the
movie and pause the movie respectively.
| | 02:04 | We will take a look at the navigateMovie
function a little bit later on in this chapter.
| | 02:08 | When we play the movie, we
have it seek back two seconds.
| | 02:12 | That's one reason I will talk about it
at the end of this chapter, and it's not
| | 02:15 | something you need to do.
| | 02:16 | It's something that you connect
the video to closed captioning.
| | 02:20 | Scroll down and the rest of these are
just functions that we have defined.
| | 02:24 | All right, now that we have reviewed Flash
video, we have taken a look at this ActionScript.
| | 02:28 | We are ready to get started.
| | Collapse this transcript |
| Creating a resizable interface| 00:00 | In this movie we will talk about, how
to use the mouse to click and drag and
| | 00:04 | resize a Flash movie, in
the Flash Player window.
| | 00:06 | If you are following along I am in
Resize.fla in the Chapter 8 folder in the
| | 00:11 | Exercise Files folder.
| | 00:12 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:16 | Like we talked about in the last movie,
| | 00:18 | the video container is holding the Flash
video and it has some events attached to it.
| | 00:23 | So when we click or roll our mouse out
of the movie, the movie plays;
| | 00:27 | when we roll over, the movie pauses.
| | 00:28 | Let's test the movie right
now and see what we have.
| | 00:31 | (Music Playing)
| | 00:33 | Notice when I roll over, the movie
pauses and I click and the movie plays.
| | 00:38 | (Music Playing)
| | 00:42 | I roll back over and the movie pauses again.
| | 00:44 | So, it's pretty basic interactivity.
| | 00:46 | So, now we'll make it so when you click
and drag in the bottom right corner of
| | 00:50 | this video, you can scale the movie.
| | 00:53 | (Music Playing)
| | 00:56 | All right, let's scroll down in our code,
until we find the dragMovie function.
| | 01:05 | It starts here on line 69.
| | 01:07 | Let's click inside of the dragMovie
function. I'm going to paste some code and
| | 01:11 | I'll explain whats doing.
| | 01:12 | If you can't see, I am going to move
over to the right a little bit, okay.
| | 01:16 | So we are using a conditional statement.
| | 01:20 | The conditional statement basically
says if your mouse is hovering over the
| | 01:25 | bottom right corner of the video
then, do everything inside of the
| | 01:30 | conditional statement.
| | 01:32 | So, let's look at the conditional statement.
| | 01:33 | If the vidcontainer.mouseX >=
width of the vidcontainer minus 50.
| | 01:42 | So basically, if your mouse is no less
than 50 pixels from the right edge and
| | 01:46 | if your mouse is no more than 50 pixels
away from the bottom, that's what this
| | 01:52 | code is saying here.
| | 01:56 | Then we pause the stream, so we can
drag a movie while it's not playing.
| | 02:03 | It's kind of annoying if you are trying
to drag something that's still playing.
| | 02:06 | Then we remove the MOUSE_OUT and MOUSE
_OVER event listeners, then we add an
| | 02:09 | event listener, which is an ENTER_
FRAME, and that's to resize the movie.
| | 02:13 | Let's go down onto the dropMovie function.
| | 02:15 | We'll define this function before
you define the resizeMovie function.
| | 02:18 | I am just going to paste some code in.
So we pause the stream then we release
| | 02:23 | the mouse button. That's when
the dropMovie function runs.
| | 02:26 | We again add the event listeners for
MOUSE_OUT and MOUSE_OVER and then we
| | 02:30 | remove the ENTER_FRAME event listener
for the resizeMovie function.
| | 02:34 | Now to find the resizeMovie function.
Scroll down the code, put your cursor
| | 02:38 | inside of the resizeMovie function.
Mine starts on line 88 and again, I'm just
| | 02:42 | going to paste some code in, and this
is all the code that we use to scale the
| | 02:47 | movie, believe it or not.
| | 02:49 | Pause the stream, we make sure that it's
not playing for any reason, and then we
| | 02:54 | set the width of the
video to vidContainer.mouseX.
| | 03:00 | It's pretty simple, right?
| | 03:01 | So we just scale the width according
to the X mouse position, inside of the
| | 03:05 | video container and then since the
height is proportionate to the width,
| | 03:10 | in other words we a 4:3 aspect ratio,
| | 03:13 | we can get the height value by
multiplying the width value by .75.
| | 03:17 | Now let's test the movie and see what we have.
| | 03:19 | We can scale the movie, by
dragging from the bottom right.
| | 03:23 | (Music playing.)
| | 03:27 | See I'm scaling the movie and then
when I release my mouse button,
| | 03:35 | (Music playing.)
| | 03:38 | the movie plays again and stops scaling.
| | 03:41 | You can close the preview window.
| | 03:45 | Now you have successfully added the
interactively for the user to be able
| | 03:48 | to resize the movie.
| | 03:49 | In the next movie, we'll talk about cue points.
| | Collapse this transcript |
| Understanding cue points| 00:00 | In this movie, we'll talk a
little bit about cue points.
| | 00:03 | If you are following along, I'm in
Understanding_Cue.fla in the Chapter 8 folder
| | 00:08 | inside of the Exercise Files folder.
| | 00:10 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:14 | Cue points can be added to
Flash video files in multiple ways.
| | 00:18 | One way is to use Flash.
| | 00:19 | You can add cue points when you are
encoding video, using either the Flash
| | 00:23 | Video Import Wizard or the Video Encoder.
| | 00:26 | You can also add cue points in other software
programs when you create Flash Video files.
| | 00:30 | You can also add cue points through
ActionScript, if you are using the
| | 00:34 | FLVPlayback component.
| | 00:36 | If you'd like to know more about that
in the Help menu, you can look up add ASQ
| | 00:41 | point or the FLVPlayback class.
| | 00:43 | To have a NetStream object respond to
an onCuePoint event, you need to attach the
| | 00:49 | onCuePoint function to the NetStream's
client object, in the exact same way that
| | 00:55 | we attach the onMetaData
function to that client object.
| | 00:58 | I'm going to write 14 of my code,
right below where we attach the onMetaData,
| | 01:05 | to our MetaData object.
| | 01:09 | So we type the name of our
object which is md_obj anyway.
| | 01:12 | That's the client object that's
attached to our NetStream and type a dot and
| | 01:18 | the name is onCuePoint. Type space, equal, space
and then we type the name of our cue point function.
| | 01:25 | So we scroll down, we can find the
name of the cue point is just onCue.
| | 01:31 | And this is the function that will run
whenever the Flash video object hits a cue point.
| | 01:35 | Let's scroll up.
| | 01:38 | After the equal sign on the onCuePoint
line, line 14, we need to type onCue.
| | 01:44 | Now that we've attached the onCuePoint
function to our MetaData object, so we
| | 01:49 | can run ActionScript whenever
our movie hits a cue point,
| | 01:52 | we can start preparing our
file to have closed captioning.
| | Collapse this transcript |
| Using XML for closed captioning| 00:00 | In this movie, we're going to talk
about using XML files for closed captioning.
| | 00:04 | If you are following along, I'm in XML_
CC.fla and that file is in the Chapter 8
| | 00:10 | folder in the exercise files folder.
| | 00:12 | Before we write any ActionScript,
let's take a look at our XML file.
| | 00:15 | The XML file is inside the same
folder as this file, but inside that folder
| | 00:19 | there is a data folder and the XML
file is inside of that data folder.
| | 00:23 | So open up that XML file in your text editor.
| | 00:26 | I have it opened in TextWrangler.
| | 00:28 | So the XML file is called captions.xml,
opening and closing tags are called captions
| | 00:34 | and each node is called caption.
| | 00:38 | As an attribute called location. The
location attribute refers to the location
| | 00:43 | of cue points inside of our Flash Video file.
| | 00:45 | We are going to be using the location
attribute for a few different things.
| | 00:49 | Inside of the node, we have a text
value and this is the closed captioning text
| | 00:53 | that's going to display in the text field.
| | 00:55 | Our feed doesn't have any speaking in
it, but I'm just using this file to show
| | 00:58 | you how you would use
closed captioning for speech.
| | 01:01 | You've had a good look at the
XML file so let's go back to Flash.
| | 01:03 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 01:09 | The first thing we're going to do is
create a few variables that are going to
| | 01:12 | hold our XML objects.
| | 01:13 | Let's create those at the very top of the code.
| | 01:16 | I am going to click at the beginning
and push everything down a few lines by
| | 01:19 | pressing Return a few times, then, I'm
going to the top of the code and I'm just
| | 01:22 | going to paste in the code here. The
xmlLoader object is going to load the XML file
| | 01:27 | then we have an XML object
declared and an xmlList declared as well.
| | 01:31 | Scroll down a little bit in the code and
right below where we add all the event
| | 01:36 | listeners to the vidContainer, I'm
going to click on that line 30 then I'm
| | 01:40 | going to paste some code.
| | 01:41 | This code loads our data file and
adds an event listener for when the file
| | 01:46 | finish loading, and runs the xmlLoaded function.
| | 01:49 | Let's scroll down to the bottom of the code.
| | 01:54 | And there we can find the xmlLoaded function.
| | 01:56 | I'm going to click inside the xmlLoaded
function and I'm going to paste my code.
| | 02:01 | I'm just going to click AutoFormat,
just tab all the code in. The code that I
| | 02:05 | pasted defines our XML object as the
data loaded from the XML file.
| | 02:13 | Remember to use the XML object to
convert the data type, then I'll make the
| | 02:19 | data from the external file. I'll turn
into XML and then we give the value to
| | 02:22 | the xmlList object.
| | 02:24 | And that is the children of the XML object.
| | 02:26 | So now that we have loaded our XML for
close captioning and we know about cue points,
| | 02:30 | we are ready to connect our
XML data to our cue points.
| | Collapse this transcript |
| Connecting closed captioning to cue points| 00:00 | In this movie, we'll connect the data
from our text file to the onCue event and
| | 00:05 | display XML data for closed
captioningm whenever there's a cue point.
| | 00:09 | If you're following along, I'm in
Connecting_CC.fla in the Chapter 8 folder in
| | 00:14 | the exercise files folder.
| | 00:15 | Let's go to the first keyframe in
the actions layer and open up the
| | 00:17 | Actions panel.
| | 00:19 | The first thing we need do is create a
text field. I'm going to line 4 in the code.
| | 00:23 | I'm just going to paste some code in.
| | 00:24 | Create a new TextField called captions.
| | 00:28 | Now let's define some properties for captions.
| | 00:30 | Scroll down to the code to where we see
where we declare the properties for the
| | 00:34 | video container. I'm clicking on line
44. I am going to paste some more code.
| | 00:40 | Here we've set the x and y
positioning of our text field.
| | 00:43 | x is equal to the same as the video
container x and the y is equal to video
| | 00:48 | container's y plus it's height plus 10
pixels just for a little bit of space and
| | 00:54 | we set the autoSize to TextFieldAutoSize
.LEFT and we just add it to the stage.
| | 00:59 | And now, I'm just going to scroll down
to the onCue function, I'm just going to
| | 01:02 | click inside of the onCue function and
paste some code and this is what's going
| | 01:06 | to display the appropriate
caption in the text field.
| | 01:10 | Let's see what we have here.
| | 01:11 | We have a loop
| | 01:13 | that's running for the length of
the XML file and a conditional
| | 01:17 | statement inside of the loop.
| | 01:18 | Info is the name of the object
received whenever there's a cue point.
| | 01:24 | The info object contains
information about the particular cue point.
| | 01:28 | One property of the information
object is time and that stores the time of
| | 01:33 | the Cue point.
| | 01:34 | So we test if the time in the cue
point is equal to the location attribute
| | 01:41 | inside of the XML file.
| | 01:42 | When I created the XML file that holds
all the location attributes, I made sure
| | 01:47 | that those match the time inside of
the cue points in the Flash video file.
| | 01:50 | So they are the same then the
caption's text is whatever value is inside
| | 01:57 | of that node.
| | 01:59 | If we test the movie, we can see this in action.
| | 02:01 | Look at the text field below the video.
| | 02:04 | (Music Playing)
| | 02:29 | Notice the text field updated when it
got to the Bryce Canyon National Park cue point.
| | 02:34 | Let's close this window.
| | 02:37 | The last thing we need to do is move
the text field when we resize the video.
| | 02:42 | So let's scroll down and
find the resize function.
| | 02:45 | It's called resizeMovie and in
my code it starts on line 107.
| | 02:50 | Let's go down below all this code
inside of the function and we'll set the y
| | 02:54 | property for the text field.
| | 02:55 | We can actually set it to the same
value that we set it earlier in the code.
| | 02:59 | So let's scroll back up, time to reset
the captions y property. Mine is on line
| | 03:03 | 45, select that line of code, press
Command+C or Ctrl+C to copy that line,
| | 03:10 | scroll down to the bottom the code,
find the resizeMovie function, click below
| | 03:15 | all the code inside of that function
and paste the code using Command+V or
| | 03:18 | Ctrl+V. In this way, the caption's text
field will stay in the same spot relative
| | 03:24 | to the video, regardless
of how we move the video.
| | 03:27 | Let's test the movie.
| | 03:28 | (Music Playing)
| | 03:40 | Notice the text field
moved along with the video.
| | 03:43 | That's working great and we
successfully have closed captioning.
| | 03:47 | In the next movie, we'll create an
advanced navigation interface, similar to the
| | 03:51 | navigation interface we
created in our image gallery.
| | Collapse this transcript |
| Creating an advanced navigation interface| 00:00 | In this movie, we are going to add an
advanced navigation system to our movie.
| | 00:04 | So that when you roll over the movie,
you can navigate to different cue points
| | 00:07 | and click to go to that cue points.
| | 00:09 | If you are following along, I'm in
Advanced_Navigation.fla in the Chapter 8
| | 00:13 | folder in exercise files folder.
| | 00:15 | The first thing we need to do to
make our system work is to divide our
| | 00:18 | movie into segments.
| | 00:19 | To do that we'll need to
create a couple of variables.
| | 00:21 | I am going to create the variables
below all of our other declarations
| | 00:24 | of variables.
| | 00:25 | It might end on line 12 in my code.
| | 00:27 | I am going to go down a
few lines, below line 12.
| | 00:29 | I am just going to paste some code in here.
| | 00:31 | I have created a variable called segment.
| | 00:34 | That's a number and that's going to
represent how wide each segment of
| | 00:37 | the movie is.
| | 00:38 | We'll divide our movie up based on how
many cue points there are. Inside the
| | 00:41 | segment variable we'll hold that number
and the current segment will represent
| | 00:45 | an integer, which going to be the
current segment our mouse this over.
| | 00:49 | Let's go to the very bottom of our code.
| | 00:53 | Find the xmlLoaded function.
Mine starts on line 118.
| | 00:57 | Below all the codes inside this
function, I am going to paste some code in.
| | 01:01 | I'm going to hit the
AutoFormat button to tab the code in.
| | 01:04 | So we set the value of segment equal
to the width of the container, divided
| | 01:09 | by xmlList.length.
| | 01:12 | That value represents the
number of cue points that we have.
| | 01:16 | Now let's scroll up in our code
to the navigateMovie function.
| | 01:22 | Let's click inside the navigateMovie function.
| | 01:24 | This is the function
that runs on the mouse move.
| | 01:27 | So this will navigate through the
different cue points in our movie.
| | 01:29 | I am going to tab in, so I am inside of
the two curly braces and I am just going
| | 01:33 | to paste some code in here.
| | 01:34 | Since we've talked about this code when
we created the image gallery earlier in
| | 01:38 | this title, so we won't go into a lot of detail.
| | 01:40 | The currentSegment variable is the
currentSegment that your mouse is in, and we
| | 01:44 | round that by using Math.
floor, the mouse X / the segment.
| | 01:49 | That's the width of each segment.
| | 01:51 | We have a conditional statement that
says if the currentSegment variable value
| | 01:56 | is in appropriate range,
| | 01:58 | in other words, if it's >=0, or less
than xmlList length, then we seek to the
| | 02:04 | location inside of the XML file.
| | 02:07 | Because of the currentSegment variable,
Flash knows which node to seek to.
| | 02:11 | So we seek to that particular
node's location attribute value.
| | 02:14 | And everything looks right, so we are
going to test the movie and then roll
| | 02:17 | over the movie and navigate through the movie.
| | 02:20 | One more thing to note,
inside of the playMovie function.
| | 02:23 | When we play the movie, we have the
stream seek to where it currently is and
| | 02:27 | that's held in the stream.
time variable minus 2 seconds.
| | 02:30 | And that way when we seek using
our mouse and re-click, the close
| | 02:34 | captioning text to update.
| | 02:35 | Let's test the movie.
| | 02:35 | (Music Playing)
| | 02:40 | You can see that I can navigate to the
different cue points and if I want to see
| | 02:45 | the National Bridges, National Monuments,
I can click and watch the text update.
| | 02:48 | (Music Playing)
| | 02:55 | And there we have it, we have
successfully added advanced navigation.
| | 02:58 | The next step is to turn
this whole thing into a class.
| | Collapse this transcript |
| Creating an AdvancedVideo class| 00:00 | In this movie, we'll take everything
we've done in this chapter and make it
| | 00:03 | into our class.
| | 00:04 | If you're following along, I am in Adv_
Vid.fla and that folder is inside of the
| | 00:09 | Classes folder, that's inside of the
Chapter 8 folder, that's inside of the
| | 00:13 | Exercise Files folder.
| | 00:15 | Before we do anything else, w
e first need to set a class path.
| | 00:18 | So let's go to our settings, the
Publish Settings at the bottom of the screen.
| | 00:22 | Click the Settings button by
ActionScript 3.0, click the Browse to Path button,
| | 00:27 | and the path that we want is
in Chapter_08, Classes, Start.
| | 00:32 | If you don't have access to the
Exercise Files, make sure to create a package
| | 00:36 | structure similar to this one.
| | 00:37 | It's interactive.vid.
| | 00:42 | Choose the Start folder and then
click OK to exit all the dialog boxes and
| | 00:47 | that's looking good.
| | 00:48 | Let's go to the first keyframe of the
actions layer, open the Actions panel,
| | 00:52 | click inside of the Actions panel,
press Command+A or Ctrl+A to select all the code,
| | 00:55 | cut it using Command+X or Ctrl+X,
then go to File > Open, and we will open
| | 01:01 | up our Class file.
| | 01:02 | So fine, Chapter_08, classes, start,
interactive, vid, AdvancedVideo.as,
| | 01:09 | open up that file.
| | 01:10 | Then I have to close the Actions window.
| | 01:12 | This is just a raw basic class I made
from a template. Make sure you have the
| | 01:16 | correct package, correct
class names, and file name.
| | 01:20 | Now we'll need to import a few classes,
because we haven't yet imported the Text
| | 01:26 | Field class or the Video class.
| | 01:28 | So on line 8 or right below line 8
rather, let's import flash.text.asterisk,
| | 01:36 | go to the next line and import the
video class, so import flash.media.asterisk.
| | 01:43 | As soon as you do that,
make sure to save the file.
| | 01:45 | All right!
| | 01:47 | So we cut a bunch of code.
| | 01:48 | Now we need to paste it.
| | 01:50 | Let's paste the code below the
constructor function. Mine is on line 20.
| | 01:53 | I am going to click in line 20, tab in
a few lines, and then press Command+V or
| | 01:58 | Ctrl+V on the keyboard to paste the code.
| | 02:00 | I am going to click the Autoformat
button to make my code look a little
| | 02:03 | bit cleaner.
| | 02:04 | I'm going to scroll up until I stop
seeing code that's wrapped in functions and
| | 02:12 | that's stops on line 69 in my code.
| | 02:15 | It might be a different line in your code.
| | 02:17 | Scroll up and you will
find variable declarations.
| | 02:22 | Select all of the lines of code that
begin with var, press Command+X or Ctrl+X
| | 02:26 | to cut the code, and we'll paste
that above our constructor function.
| | 02:31 | Mine is on line 14. I'm going to
click on line 14 and press Command+V or
| | 02:35 | Ctrl+V to paste the code.
| | 02:37 | Again, I am going to use
Autoformat to format my code.
| | 02:39 | So we have all of our variable
declarations there, and the last step here is
| | 02:44 | to paste all of the code that sets
initial values inside of the constructor function.
| | 02:49 | So mine goes from line 35 right at the
end of the constructor function, all the
| | 02:54 | way down to line 68, right
before the metaData function.
| | 02:58 | Select that code and press Command+X
or Ctrl+X to cut it, scroll up, click
| | 03:04 | inside of the
AdvancedVideo constructor function.
| | 03:07 | I'm going to tab in to make sure my
cursor is in the right place, then I am
| | 03:10 | going to press Command+V
or Ctrl+V to paste the code.
| | 03:13 | Again, Autoformat will fix the
formatting of my code and that looks great and
| | 03:18 | just like we did before, we're going to
create variables to hold strings that we
| | 03:22 | we'll pass in when we create
a new instance of this class.
| | 03:25 | That will represent the FLV file that's
being loaded, the data file that's being
| | 03:29 | loaded, and the name of the
attribute that holds the cue point times.
| | 03:33 | Let's scroll up in the code.
| | 03:35 | We'll need to create three new variables.
| | 03:37 | Below line 28 that's where my variables end.
| | 03:39 | Yours might be on a different line.
| | 03:41 | I am going to create a variable
that represents the video path.
| | 03:43 | So I am going to call this videoPath.
| | 03:47 | Data type is a String, we won't give a
value to it till later, just like we did
| | 03:51 | when we created the image gallery.
| | 03:52 | Let's go to the next line,
and we'll call this xmlPath.
| | 03:54 | This is where we're going to
represent the path to the XML file.
| | 03:59 | The data type will also be string.
| | 04:01 | Let's go to the next line.
| | 04:02 | Now we'll declare a variable that
represents the XML attribute name.
| | 04:05 | So I am going to call this xmlAtt.
| | 04:08 | The data type is also String.
| | 04:10 | Once you have those variables,
click inside the parentheses of the
| | 04:13 | constructor function.
| | 04:14 | That's the function called
AdvancedVideo. Mine starts on line 33.
| | 04:19 | Inside of there, we're going to create
some variables and these variables will
| | 04:22 | represent the videoPath, xmlPath, and
the xmlAttribute that you'll have to pass
| | 04:26 | in when you create a new
instance of the AdvancedVideo class.
| | 04:29 | Let's type vPath, data type it string.
| | 04:34 | The next attribute will be xPath, data
type it string, and the last parameter
| | 04:39 | will be xAtt for xmlAttribut.
We'll data type that to a string as well.
| | 04:45 | All right, once you have that typed
out let's go inside of the constructor
| | 04:49 | function at the top of all the code
inside of the constructor function.
| | 04:52 | I am on line 35.
| | 04:53 | Now, we'll give values to our
videoPath, xmlPath, and xmlAtt variables.
| | 04:58 | Just type videoPath = vPath, xmlPath =
xPath and xmlAtt = xAtt. Looking good.
| | 05:14 | Just make sure to save the file.
| | 05:17 | Do one more thing before we test it out.
What we are going to do is take our
| | 05:21 | variables and replace all
of the strings in our text.
| | 05:24 | Those are the green text in quotes.
| | 05:26 | So I am going to double-click videoPath.
Press Command+C or Ctrl+C to copy it.
| | 05:30 | I am going to go inside stream.play on
line 45. I am going to replace cues.flv
| | 05:37 | with the videoPath by pasting the code.
| | 05:38 | I am going to copy xmlPath.
| | 05:41 | So I've selected on line 36, Command+
C to copy, I am going to paste it over
| | 05:45 | the URLRequest on line 47, using
Command+V or Ctrl+V. I am going to select
| | 05:51 | xmlAtt, press Command+C or Ctrl+C to
copy it and scroll down. We are looking
| | 05:56 | for green text.
| | 05:58 | There is one right there, the location.
| | 06:01 | I am going to select location. Paste
with Command+V or Ctrl+V. Let's scroll down
| | 06:07 | in our code and see if we
can find anymore green text.
| | 06:13 | Be really careful, there
we got a location again.
| | 06:15 | So let's just select that location,
press Command+V or Ctrl+V to paste.
| | 06:19 | Just be really careful to check
everything, so you don't miss anything.
| | 06:29 | And I feel pretty good about that.
| | 06:30 | So I am going to go to File > Save, and
now we've created the AdvancedVideo class.
| | 06:35 | All we have left to do is import that
class and then we have a class that gives
| | 06:39 | us all the neat stuff
we created in this chapter.
| | 06:41 | Let's go back to Adv_Vid.fla, select the
first keyframe in the actions layer, and
| | 06:48 | open up the Actions panel.
| | 06:49 | Now we'll import the
AdvancedVideo class. Remember it's
| | 06:53 | interactive.vid.AdvancedVideo.
| | 07:02 | Then go to the next line. Create a
variable to hold our AdvancedVideo.
| | 07:06 | I am just going to call
mine advVid, capital V for Vid.
| | 07:09 | Data type is AdvancedVideo.
| | 07:10 | Set it equal to a new
instance of the AdvancedVideo class.
| | 07:18 | Now remember, we have to pass in
all the values that we are going to be
| | 07:21 | working with.
| | 07:22 | But first is the name of the
video file, which is "cues.flv".
| | 07:27 | That's in quotes.
| | 07:28 | The next parameter we need to pass
in is the location of the XML file.
| | 07:31 | That's in data/captions.xml and the
last thing we need to pass in is the name
| | 07:40 | of the XML attribute that holds the
location of the cue points and that's
| | 07:46 | called location.
| | 07:49 | Let's close that out, and then use
addChild to put the AdvancedVideo on the stage,
| | 07:52 | and test out the movie, see what happens.
| | 07:57 | (Music playing.)
| | 08:08 | That is working great and now we
have a powerful AdvancedVideo class to work with.
| | Collapse this transcript |
|
|
9. Wrapping It UpClosing remarks| 00:00 | Well that's it for this title.
| | 00:02 | I hope you learned a lot.
| | 00:03 | We talked about advanced animation
techniques, we built a particle system,
| | 00:09 | we worked a lot with XML data, and
we built plenty of reusable classes.
| | 00:13 | So we only have to use one line of
code to implement advanced programming.
| | 00:17 | I hope you've enjoyed this title
as much as I enjoyed creating it.
| | 00:20 | Until next time...
| | Collapse this transcript |
|
|
