IntroductionWelcome| 00:04 | Hi! I'm Todd Perkins.
| | 00:06 | Welcome to ActionScript 3.0 in Flash
CS5 Professional Essential Training.
| | 00:11 | If you're familiar with Flash, but
want to take your ActionScript skills to
| | 00:15 | the next level to add more complex
interactivity, then this course is exactly
| | 00:19 | what you're looking for.
| | 00:20 | Throughout this course, you'll see all
the features of Flash Pro that you can
| | 00:24 | utilize to make writing
ActionScript as smooth as possible.
| | 00:29 | We'll start at the beginning,discussing
how to control the colors and fonts of
| | 00:33 | ActionScript in Flash.
| | 00:35 | From there, we'll get experience working in
the Actions panel and see what each button does.
| | 00:41 | Then we'll begin writing our own code,
starting with the basics, like modifying
| | 00:45 | properties of movie clips
and controlling timelines.
| | 00:47 | Once you're used to writing basic
ActionScript on your own, you'll use that
| | 00:52 | knowledge to build real-world apps.
| | 00:54 | We'll start with simple games, like a
skateboarding game and a drag-and-drop game.
| | 00:59 | Then we'll make more complex
projects, like a slideshow viewer that loads
| | 01:03 | external images, a SWF Player for
playing back animation, and a video player.
| | 01:10 | By the time we're finished with this
course, you'll have seen just about
| | 01:13 | everything Flash has to offer to help
write ActionScript, and we'll have built
| | 01:17 | many powerful, real-world applications as well.
| | 01:21 | So, good luck and have a great time!
| | 01:23 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you have purchased this title on a
disc, or if you are a premium subscriber to
| | 00:05 | lynda.com, then you have access to
the exercise files for this course.
| | 00:09 | Simply download the files and place
them on your desktop for easy access.
| | 00:14 | Exercises in this file
are organized by chapters.
| | 00:18 | Each chapter has the files we'll be
working with throughout that chapter.
| | 00:23 | Some chapters have folders called
assets that hold the additional assets that
| | 00:27 | we'll be working with.
| | 00:32 | Some chapters are organized
into folders instead of files.
| | 00:36 | In those cases, click on the appropriate
folder, and then you can find the start
| | 00:41 | state in the start folder and the
final state in the final folder.
| | 00:49 | Whenever an exercise file is available
for a video, you'll see a yellow overlay
| | 00:54 | at the bottom of the screen.
| | 00:55 | This will indicate the name and
location of the file that we'll be working with
| | 01:00 | in that particular exercise.
| | 01:02 | If you don't have access to
the exercise files, don't worry.
| | 01:05 | You can still follow along.
| | 01:07 | As we go throughout each movie, I'll
show you how to set up your files in the
| | 01:11 | same way so that you can follow along
and have the same learning experience.
| | 01:17 |
| | Collapse this transcript |
| Using the function keys| 00:00 | Throughout this course, we're going to
be using a lot of keyboard shortcuts,
| | 00:04 | particularly with the function keys.
| | 00:07 | If you're working on the Mac, your
computer may be programmed to have those keys
| | 00:12 | perform other functions.
| | 00:14 | To make the F1 and other function keys
function as regular keys, go to Apple >
| | 00:21 | System Preferences, and in
System Preferences, click Keyboard.
| | 00:27 | Under Keyboard, make sure the
box that says, Use all F1, F2, etc.
| | 00:32 | keys as standard function keys, is checked.
| | 00:35 | From there, you can simply close System
Preferences, and you can use the F1 keys
| | 00:40 | as we use them throughout the title.
| | 00:42 |
| | Collapse this transcript |
|
|
1. Understanding ActionScript 3.0 in Flash ProfessionalAdjusting preferences for ActionScript fonts, colors, and formatting| 00:00 | Controlling the appearance of your
code is an essential tool for veteran
| | 00:03 | programmers and newbies alike.
| | 00:05 | Modifying ActionScript fonts, colors,
and formatting allows you to make code
| | 00:10 | easiest for you to read and write in Flash Pro.
| | 00:12 | In the Actions panel here, I have some code.
| | 00:15 | Right now, I don't want you to have to
understand any of what this code means
| | 00:19 | or what it's doing.
| | 00:20 | I just want you to look at the appearance of it.
| | 00:23 | Is it easy to read?
Is it hard to read?
| | 00:25 | Are the colors too bright or too
little contrast or too much contrast?
| | 00:30 | If you want to change those things,
you can change them in Flash Preferences.
| | 00:34 | For example, I like to have larger fonts
on my screen when I record these movies
| | 00:40 | so that the code is easier for you to see.
| | 00:43 | So, I'll go to Flash > Preferences.
| | 00:46 | Note on the PC that's under Edit > Preferences.
| | 00:50 | To modify your ActionScript settings,
click the ActionScript Category on the
| | 00:54 | left side of the window.
| | 00:57 | Here you'll see various options
for modifying your ActionScript code.
| | 01:01 | You can choose how Flash handles curly
braces and spacing when you create new lines.
| | 01:07 | This will be more applicable once you
learn more about creating your own code.
| | 01:11 | Just make a mental note now that this
setting is here if you ever want to change it.
| | 01:16 | You can control whether to display code
hinting and the delay in showing the code hints.
| | 01:22 | Again, you'll learn more about this later on;
| | 01:24 | just make a mental note that it's
here, and you can change the Font.
| | 01:28 | Now I like to use Monaco
for my ActionScript Font.
| | 01:32 | This is the default font on a
Mac when you're working in Flash,
| | 01:37 | but on the PC, it's a different font.
If you really like Monaco, like what you
| | 01:41 | see on my screen, you can
find it on the web for the PC.
| | 01:44 | Now as I said earlier in this movie, I
like having a larger font size, so it's
| | 01:50 | easier for you to read.
| | 01:51 | So I'll change my font size to 18.
| | 01:55 | You can change your font size if you
want or keep it the same - your preference.
| | 01:59 | Notice other dropdown menus, like Open/Import.
| | 02:02 | This shows how Flash should encode the
text inside of your files that you're using.
| | 02:08 | I just like to leave the default, UTF-8.
| | 02:12 | When you modify an open file outside of
Flash, you can control what Flash does,
| | 02:16 | whether you get prompted, or it
reloads, or it doesn't reload.
| | 02:21 | You can use a different editor for your
code files, whether you want to use Flash
| | 02:25 | Professional or Flash Builder,
or you can have Flash ask you.
| | 02:29 | You can control the color for your code.
| | 02:31 | Let's say you wanted the
foreground color to be a bright green, the
| | 02:36 | background color to be black.
| | 02:41 | So, I'll click OK, and
there are my new code settings.
| | 02:45 | Notice the font is bigger, and there
is green for the main text and then
| | 02:50 | black for the background.
| | 02:52 | This is a little bit hard for me to read,
| | 02:53 | so I'm going to change it back, but you
can change the settings however you want.
| | 02:57 | Go back to Flash > Preferences, click
ActionScript, change Foreground back to
| | 03:02 | black and Background back to white.
| | 03:05 | These two options at the bottom are
advanced settings that we'll talk about
| | 03:09 | later on in the title.
| | 03:10 | So, I'll click OK, and I get my
default colors with my large font.
| | 03:16 | So, by using the ActionScript
Preferences window, you can easily tweak
| | 03:19 | ActionScript fonts, colors, and
formatting to best suit your individual needs.
| | 03:25 |
| | Collapse this transcript |
| Changing Flash Player and ActionScript versions in the Publish settings| 00:00 | Some projects you work on will require
specific Flash Player or ActionScript
| | 00:04 | versions, or you may be adding
ActionScript 3 to a project that was created
| | 00:09 | targeting Flash Player 8 or below.
| | 00:12 | Whatever the specific task, it's
important to be able to modify the target Flash
| | 00:17 | Player or ActionScript version for your project.
| | 00:21 | You can get to the
appropriate menu in multiple ways.
| | 00:25 | If you have nothing selected and look
on the right side of the screen in the
| | 00:29 | Properties panel, you'll see the
Profile area, under the Publish option.
| | 00:34 | Note the Publish option shows the
Flash Player version, which here is Flash
| | 00:37 | Player 10, and it shows the script
version, which here is ActionScript 3.0.
| | 00:42 | Let's say you're doing a project where
you weren't using any features that were
| | 00:47 | Flash Player 10-specific.
| | 00:49 | So just to hit more of an audience,
you wanted to publish to Flash Player 9.
| | 00:53 | So to do that, I can click
the Edit button next to Profile.
| | 00:58 | Note this is the same menu as you can
get by going to File and then Publish
| | 01:02 | Settings, and you just
have to click the Flash tab.
| | 01:05 | In here, I can change the Flash Player version.
| | 01:08 | So I can change it to Flash
Player 9 or any other one I want.
| | 01:12 | Note also you can change
the ActionScript version.
| | 01:15 | Though Flash Player 8 and below don't
support ActionScript 3, Flash Player 9 and
| | 01:21 | 10 support ActionScript
1 through ActionScript 3.
| | 01:26 | So, using Flash's Publish Settings, you
can go to the Flash tab and adjust Flash
| | 01:31 | Player or ActionScript
settings for a particular project.
| | 01:35 |
| | Collapse this transcript |
| Reading and solving errors through the Compiler Errors window| 00:00 | Even the most seasoned programmers make
mistakes, but the difference between the
| | 00:04 | pros and amateurs is that the
pros know how to read error messages.
| | 00:09 | Flash has two windows that
help you find errors in your code,
| | 00:13 | one of which we'll focus on in this movie.
| | 00:15 | If I test the movie here with Command+
Return or Ctrl+Enter on the PC, you'll see
| | 00:21 | an error in the Compiler Errors window.
| | 00:25 | In the Location section, Flash
tells me where the offending code is:
| | 00:29 | in Scene 1, layer 'actions', Line 8.
| | 00:34 | The description says, Syntax error:
| | 00:36 | expecting rightparen before semicolon.
| | 00:39 | So note that when you get an error,
make sure to read the error message.
| | 00:42 | I know that's pretty obvious to say, but
read it and really think about what's wrong.
| | 00:48 | There is a missing
rightparen, according to Flash.
| | 00:51 | So I am going to double-click this
error message, and Flash will actually open
| | 00:55 | up the Actions panel and
highlight the offending code for me.
| | 00:59 | Now at this point if you don't understand
this code, I don't want you to worry about that.
| | 01:03 | I just want you to understand how the
Compiler Errors window works right now.
| | 01:09 | The offending code is highlighted.
| | 01:11 | I can see at the end that there is
only one right parenthesis, but at the
| | 01:15 | beginning of the code
there are two left parentheses.
| | 01:18 | So when you are writing ActionScript,
they actually need to be balanced out.
| | 01:22 | You need to have - if you have two left
parentheses you need to have two right parentheses.
| | 01:26 | One of these on the left is actually a
mistake, so if I delete that, I can test
| | 01:30 | the movie again, and Flash has
actually given me another error.
| | 01:37 | Note that when you get into Compiler Error,
Flash actually stops processing the code.
| | 01:41 | That's why we didn't see
these two errors at once.
| | 01:44 | So if we look at this, we have Scene 1,
layer 'actions', Frame 1, Line 23.
| | 01:49 | Access of undefined property SoundMixe.
| | 01:52 | So if I double-click that, I can
see that this is undefined, SoundMixe.
| | 02:01 | Now being used to writing code all
the time, I know that this is probably
| | 02:05 | supposed to be SoundMixer, with an r
on the end, and if you are new and you
| | 02:10 | didn't see that right-away, I promise
as you go through this title,
| | 02:13 | as you get more experience with
ActionScript, errors like this will become
| | 02:16 | more obvious to you.
| | 02:18 | So I make the fix, and I test the
movie one more time, and the code is
| | 02:26 | processed, and you can tell that
by hearing the background music.
| | 02:30 | When you see errors in the Output and
Compiler Errors windows, don't panic.
| | 02:35 | Remember that those windows give you
important messages about fixing your
| | 02:39 | problems. By paying attention to those
messages, you will be able to fix your
| | 02:44 | errors and more quickly transition
into being an ActionScript master.
| | 02:49 |
| | Collapse this transcript |
| Using the Actions panel buttons to add and remove comments| 00:00 | Comments allow you to organize your
code, temporarily disable code, and to write
| | 00:04 | messages for yourself and for other programmers.
| | 00:07 | Flash Pro lets you insert and remove
comments with the click of a button.
| | 00:12 | I will show you how that
works in the Actions panel.
| | 00:14 | I click the first keyframe in the
actions layer and press option F9 on the Mac
| | 00:20 | or F9 on the PC to open the Actions panel.
| | 00:23 | Let's say I wanted to make a comment to
tell another developer where the code is
| | 00:27 | that starts the game.
| | 00:29 | So I can click on line 6 in my code,
type two forward slashes, and then I can
| | 00:35 | type, "click or press a key to start the game."
| | 00:44 | So line 7 and 8 are the code that does that.
| | 00:46 | They set up the code to click or
to press a key to start the game.
| | 00:51 | Again, you don't have to know what
this code means right now; just understand
| | 00:55 | the part about the comment -
| | 00:56 | this is just a simple note to somebody.
| | 00:58 | Notice that this line of code is
gray, and if I delete those two forward
| | 01:04 | slashes, then some of these words
turn blue. That means they are reserved
| | 01:09 | keywords in Flash, so this is actually
going to be processed as code if I were
| | 01:13 | to test moving right now.
| | 01:15 | The easy way and the fast way to add a
comment is to simply click the buttons at
| | 01:19 | the top of the Actions panel.
| | 01:21 | So there is the multi-line comment,
which is the forward slash and the asterisk,
| | 01:24 | and there is the single-line
comment that is the two forward slashes.
| | 01:28 | So I can simply click the apply line
comment to add two forward slashes.
| | 01:31 | I can comment that line of code.
| | 01:33 | So this line of code is gray, which means it
will not be processed by the Flash Player.
| | 01:39 | If you want to remove a comment, you
can click the remove comment button.
| | 01:42 | That's a speech bubble with x on it.
| | 01:43 | So I can add a comment or remove comment.
| | 01:47 | I will delete this line altogether,
and let's say I wanted to disable this
| | 01:53 | interactivity. I want to make it so you
cannot click or press the button on the
| | 01:57 | keyboard to start the game.
| | 01:59 | I can highlight these two lines of code,
and I can click Apply block comment -
| | 02:03 | that's the forward slash and asterisk,
and Flash will wrap that code in forward
| | 02:08 | slash asterisk and end the
wrapping in asterisk forward slash.
| | 02:12 | That creates a multiple-line comment
and notice all this code is gray, so it
| | 02:18 | will not be processed by the Flash player.
| | 02:21 | Again, I can highlight that code, click the
remove comment button, and it will go back to normal.
| | 02:26 | So using the comment buttons in the
Actions panel, you can quickly insert and
| | 02:31 | remove comments in your code.
| | Collapse this transcript |
| Using the Actions panel to format code| 00:00 | Whether you are cleaning up your own
code or reformatting code in a file you
| | 00:04 | have received from someone else,
Flash makes it easy to format your code
| | 00:07 | exactly how you want it.
| | 00:10 | Before you have Flash automatically
format your code, however, you need to make
| | 00:14 | sure there are no errors.
| | 00:16 | You can find out that there are no
errors in your code by testing a movie.
| | 00:23 | If you don't see any syntax errors in
the compiler errors window, you should be
| | 00:27 | okay to autoformat your code.
| | 00:30 | Code formatting is controlled through the
Auto Format settings in Flash preferences.
| | 00:36 | So if you go to Flash preferences or
Edit > Preferences on the PC and click the
| | 00:41 | Auto Format category, you
can control the settings here.
| | 00:45 | So let's say I unchecked all these
boxes, and I get a preview of what my
| | 00:48 | code will look like.
| | 00:49 | Notice the curly braces,
they are on the same line as the function name.
| | 00:52 | I click OK, and my code looks the
same as it did before, until I clicked the
| | 00:58 | Auto Format button.
| | 00:59 | So we click that button, which looks
like an indented paragraph, Flash will
| | 01:04 | format your code based on those settings.
| | 01:07 | Now personally, I like to have my
curly braces on separate lines and have the
| | 01:12 | settings as I had them before. So I am going to change
it back, but if you prefer this way, by all means, keep
| | 01:18 | your code like that.
| | 01:23 | So I click OK and to get my code back to
how I had it, all I have to do is click
| | 01:28 | the Auto Format button again.
| | 01:29 | And Flash will format the
code based on my settings.
| | 01:33 | Again, this works really well if you
get code from someone else and you prefer
| | 01:37 | to read code in a different way.
| | 01:40 | So whenever you want to reformat your
code, simply check that there are no
| | 01:44 | errors and then click the Auto Format
button and let Flash do all the work for you.
| | Collapse this transcript |
| Using the Actions panel Toolbox| 00:00 | If you want to get the most out of the
Actions panel, you should be familiar
| | 00:04 | with some of the code helping tools.
| | 00:06 | One of them is the toolbox.
| | 00:08 | If you click the Show/Hide toolbox
button, that's the last button on the right
| | 00:13 | at the top of the Actions panel,
| | 00:15 | you click that button, and then it opens
up the toolbox. And now I can click and
| | 00:20 | drag where these rectangles
are and reveal the whole toolbox.
| | 00:24 | So there's a section at the top that
gives you language elements and then a
| | 00:28 | section at the bottom that enables
you to navigate through your code.
| | 00:31 | Let's look at the navigation section first.
| | 00:34 | This tells you where all the
ActionScript is inside of your FLA file.
| | 00:37 | It enables you to click on different
frames, so that you can navigate around
| | 00:41 | quickly to all the different code.
| | 00:44 | I usually keep all my code on one frame,
but when my code is scattered across
| | 00:50 | the whole FLA file, this
section becomes very useful.
| | 00:55 | I'll minimize it now by
clicking the rectangle with the arrow icon.
| | 01:01 | The other section of the toolbox has
many code snippets that you can put inside
| | 01:06 | of your code, and by many I mean
smaller than what you find in a Code Snippets
| | 01:09 | panel, like one line of
code or one simple command.
| | 01:13 | You can also find these same commands
through the Plus icon at the top-left of
| | 01:18 | the Actions panel, and you can access
them through the Script Assist menu, which
| | 01:24 | is the magic wand at the very
top-right of the Actions panel.
| | 01:30 | You can add code in the Script Assist by
clicking the Plus icon and selecting the
| | 01:34 | code that you want to add.
| | 01:39 | For these features, you already have
to be familiar with ActionScript 3.
| | 01:46 | Personally, they aren't a part of my workflow
since I prefer to type the code by hand.
| | 01:52 | But for you, you may find them very useful
once you become more familiar with the language.
| | 01:58 | So by using these extra tools, you
can look at improving your workflow when
| | 02:02 | you're working with ActionScript.
| | Collapse this transcript |
| Seldom-used but helpful functions of the Actions panel| 00:00 | Not all the features of the Actions panel
are commonly used by people that use Flash,
| | 00:06 | but there are some that are
particularly useful to you.
| | 00:10 | For instance, there is the Find/Replace command.
| | 00:14 | You can click the Find button to open it
up; that's the magnifying glass with an
| | 00:19 | A on it. Or you can highlight a
piece of code by double-clicking, so I
| | 00:26 | highlighted one word, which is
loader here, the lowercase L, and I press
| | 00:30 | Command+F or Ctrl+F on the keyboard,
open up Find/Replace, and it will already
| | 00:35 | have the Find what section populated.
| | 00:38 | Here I have some code called loader, and
let's say I wanted to make it something
| | 00:43 | more descriptive, like gameLoader or something.
| | 00:46 | So I can replace that with gameLoader,
capital L, and then I'm going to check
| | 00:51 | Match Case, so it doesn't override
the loader with a capital L, which is
| | 00:55 | something different in the code.
| | 00:56 | Now, I'll just click Replace All.
| | 00:59 | So Flash tells me it found and replaced 5 items.
| | 01:03 | So now I have a more
descriptive name: gameLoader.
| | 01:07 | Notice the word Loader, with
capital L, is still intact.
| | 01:12 | Another useful feature of the Actions
panel is the Insert Target Path button.
| | 01:16 | If you click this button, this
basically gives you a map of your FLA file.
| | 01:22 | I only have one object on the stage, so
you don't see the whole structure here.
| | 01:26 | But if you have more objects on the stage,
you can click them and then click OK,
| | 01:31 | and then Flash will insert the code
that you need to communicate with that
| | 01:34 | object through ActionScript.
| | 01:36 | You'll see the usefulness of
that later on in this title.
| | 01:41 | There is the Check syntax button, which
checks to see if you have any syntax errors.
| | 01:45 | I can click that button now. I don't
have any errors, so I don't have any problems.
| | 01:52 | There is the Show code hint button.
| | 01:53 | We'll talk more about code
hinting in another movie.
| | 01:57 | There's Debug options, which you can
use to help debug your code when you're
| | 02:02 | testing it in Flash player.
| | 02:03 | Next code is Expanding and Collapsing.
| | 02:08 | So let's say if I scroll down here in
this block of code that says startGame, I
| | 02:12 | can click right after that curly brace
and then click Collapse between braces.
| | 02:16 | So I have that block of code organized like that.
| | 02:19 | I can collapse a section of code by
highlighting it, then clicking the Collapse button.
| | 02:26 | I can expand that by clicking the Expand button.
| | 02:29 | In addition to these features of
the Actions panel, you also have the
| | 02:32 | Options area, which is that dropdown
menu you can get at by clicking the top-
| | 02:36 | right of the Actions panel.
| | 02:38 | That's that little arrow that's
pointing down and the few lines next to it.
| | 02:42 | Here you have some other options, like
you can pin a script somewhere while you
| | 02:47 | move around with the rest of your code.
| | 02:49 | You can go to a particular line, you
can import and export Scripts, you can
| | 02:54 | print code, you can show or hide line
numbers, and you can control word wrap.
| | 03:00 | Note that you can also get straight to
your ActionScript Preferences through
| | 03:02 | this window, like so.
| | 03:07 | So by using these features of the
Actions panel, you have more tools to work
| | 03:12 | efficiently in Flash.
| | Collapse this transcript |
| Understanding code hinting | 00:00 | Code hints can save you large
amounts of time when writing code and
| | 00:03 | simultaneously help you
learn ActionScript faster.
| | 00:07 | Code hints appear when you type
certain special characters in Flash.
| | 00:12 | Right now, I don't want you to
type the code that I'm typing;
| | 00:14 | I just want you to watch my
screen to see how it works.
| | 00:16 | You'll learn about how to type all
this code later on in the title.
| | 00:20 | So I'm going to set the word 'var' and
then a space and then 'gameLoader' with a
| | 00:25 | capital L, and then I'm going to type
what are the special characters that
| | 00:28 | brings up code hinting. That's a colon.
| | 00:30 | So I type that, and I get this menu.
| | 00:32 | I can navigate with my
keyboard or with my mouse.
| | 00:39 | There are a ton of things to choose from,
but if I start to type in what I want,
| | 00:43 | which is Loader with an L, I'll type
that colon again, Loader, then Flash will
| | 00:50 | eventually highlight that
code in the Code Hinting window.
| | 00:53 | Now, I can simply press Return on my
keyboard and Flash will write Loader for me.
| | 00:59 | Also, notice that Flash
added this import line of code.
| | 01:03 | For now, don't worry about what that
means; just know that Flash is helping you
| | 01:07 | out by writing a lot of code for you.
| | 01:12 | So I can type some more stuff, so
Loader = new Loader, and I'll type a
| | 01:17 | parenthesis, and then I see code hinting again.
| | 01:21 | Another way to access code
hinting is to type a dot.
| | 01:24 | So I can type 'gameLoader.Load' and then
press Enter on my keyboard, and here you
| | 01:32 | will see load, and then it says
request:URLRequest, Context: LoaderContext.
| | 01:39 | Now, this might you look like a bunch
of garbage to you right now, but this is
| | 01:43 | actually very useful information
when you're learning ActionsScript.
| | 01:47 | Flash is telling you what type of
data to put inside of the parentheses.
| | 01:52 | So as you go throughout this title,
I want you to pay attention to code
| | 01:55 | hinting and use it to your advantage
to help you learn ActionScript more
| | 01:59 | quickly, and to write code faster.
| | Collapse this transcript |
| Reviewing the Code Snippets panel | 00:00 | Code snippets give you an excellent
starting point when writing code, by giving
| | 00:04 | you access to dozens of useful,
prewritten blocks of ActionScript.
| | 00:08 | To access the Code Snippets panel, you
can click the Code Snippets button in the
| | 00:13 | top-right of the Actions panel,
or go to Window > Code Snippets.
| | 00:16 | Now, you're probably already familiar
with the Code Snippets panel, so I'm just
| | 00:22 | going to do a quick review.
| | 00:24 | The snippets are organized in categories:
| | 00:27 | regular actions, actions for timeline
navigation, for animation, loading and
| | 00:33 | unloading files, et cetera.
| | 00:37 | Let's say I want to stop the Timeline.
| | 00:38 | I could expand the Timeline Navigation,
and double-click stop at this frame.
| | 00:43 | In the Actions panel, you'll see the
stop action is added. It says 'stop,' and there's
| | 00:48 | parentheses, and then as
semicolon, and there is a comment.
| | 00:53 | You can tell it's a comment because it's gray.
| | 00:55 | Remember that multiline comments
start with a forward slash and an asterisk
| | 00:59 | and then end with asterisk forward slash.
| | 01:02 | This comment explains what the code does.
| | 01:05 | Now, you've probably already done
this before, if you've ever used the
| | 01:08 | Code Snippets panel.
| | 01:10 | But another thing you can do with the
Code Snippets panel, if you're an advanced
| | 01:14 | user, is create your own code snippets.
| | 01:17 | Let's go back to the Code
Snippets panel and see how to do this.
| | 01:22 | To create your own snippet, click
the Gear icon at the top-right of the Code
| | 01:27 | Snippets panel. Then choose Create New
Code Snippet. Give your code snippet a
| | 01:35 | Title. Give your code snippet a tooltip.
| | 01:43 | You can autofill from code that's
already selected in the Actions panel if you
| | 01:47 | want, or you can simply
write your code in the Code area.
| | 01:59 | This code doesn't really do anything,
| | 02:00 | so you don't need to copy
it down if you don't want to.
| | 02:04 | Note that you can also check
this box to automatically replace
| | 02:07 | instance_name_here when
you're applying the code snippet.
| | 02:11 | You may have seen an example of that
when you, say select a button, and then use
| | 02:16 | a code snippet to make that link to a web site.
| | 02:19 | That's what you're essentially doing here.
| | 02:21 | To create the code snippet that does
that, you simply type instance_name_here,
| | 02:26 | and Flash will automatically replace
that code with the correct instance name
| | 02:30 | when you select it on the stage
and apply the code snippet.
| | 02:34 | Keep in mind that if you didn't
understand that, it's no big deal.
| | 02:37 | That's something that you're going to
understand more about when you learn
| | 02:40 | more about ActionScript.
| | 02:41 | So I'll click OK to create the code
snippet, and then you can see my example
| | 02:46 | snippet in the Custom section.
| | 02:47 | So, I'm going to apply it into my code by
double-clicking it, and there it is right there.
| | 02:53 | So if you ever find yourself
constantly writing the exact same block of code,
| | 02:58 | see if you can find it
prewritten in the Code Snippets panel.
| | 03:01 | If it's not there, you can always add
it yourself, so you can save time when
| | 03:05 | creating your projects.
| | Collapse this transcript |
| Using help| 00:00 | If you ever find yourself stuck, or
want to learn more information about a
| | 00:05 | particular topic in ActionScript, you
can actually highlight just about any blue
| | 00:11 | keyword, and press F1 on your
keyboard to launch Flash Help.
| | 00:17 | Here is the Flash Help menu.
| | 00:19 | If you look in this part of the window,
which is on the right side, you can
| | 00:23 | scroll down and find information
about the code that you highlighted.
| | 00:28 | Some of the explanations are in actual
sentences, and not just in code, so you
| | 00:34 | can have a better understanding of
how the ActionScript classes work.
| | 00:39 | You can find additional properties
and methods that you can run here as well,
| | 00:44 | along with explanations and examples.
| | 00:49 | So whenever you get stuck when you're
working with ActionScript, highlight any
| | 00:53 | blue word that may be giving you
trouble and press F1 on the keyboard to
| | 00:57 | launch Flash Help.
| | Collapse this transcript |
|
|
2. Becoming Familiar with ActionScript 3.0Understanding how ActionScript 3.0 code is processed in the Flash Player | 00:00 | Before you start writing your own code,
you should be familiar with how that
| | 00:03 | code is processed, so that you have an
idea of how your applications will react
| | 00:07 | when you start writing ActionScript.
| | 00:10 | Remember that ActionScript runs in the
Flash player, so your movie actually has
| | 00:14 | to be playing in order for code to be processed.
| | 00:17 | In Flash Pro, ActionScript can be placed
in external files, which we'll talk about
| | 00:22 | later, or in the Timeline in keyframes.
| | 00:25 | You can tell where ActionScript is in
the Timeline by looking for the lowercase
| | 00:29 | a instead of a keyframe.
| | 00:33 | So I'll click the first keyframe of
layer 1, and open the Actions panel with
| | 00:37 | Option+F9 on the Mac or F9 on the PC.
| | 00:41 | ActionScript code runs one line at a
time, in small fractions of a second.
| | 00:48 | In fact, many lines are processed in
one frame, which could be 1/60th of a
| | 00:54 | second, or 1/24th of a second.
| | 00:57 | So the code is processed very quickly.
| | 00:58 | Again, the code runs one line at a time,
| | 01:02 | but sometimes, a process will take a
little bit longer than another one;
| | 01:06 | for example, loading a PNG
file like I'm doing on line 3.
| | 01:13 | When this happens, instead of waiting
for that whole process to be finished,
| | 01:17 | Flash just moves on to the next line
and the file loads in the background.
| | 01:22 | This is called asynchronous code.
| | 01:26 | Another thing I want to point out when
you're working with ActionScript is some
| | 01:29 | code runs at a specified time,
or when a specified event occurs.
| | 01:34 | We're going to be talking about this
in more detail later, but for now I want
| | 01:39 | you to understand that some
code doesn't run line-by-line.
| | 01:43 | For example, before the file is loaded, I
connect the loading file to a block of code.
| | 01:52 | I tell Flash, when the file is done
loading, then I want you to run this block
| | 01:57 | of code called the fileLoaded.
| | 02:00 | That block of code will cause a
message to appear in the output window.
| | 02:05 | That's what a trace statement does.
| | 02:07 | It simply allows you to create a note
for yourself that will pop up in the
| | 02:12 | Output window while your movie is playing.
| | 02:13 | It can be used to fix problems in your code.
| | 02:17 | So before I test the movie, I just
want to point out that I have these trace
| | 02:21 | statements here to demonstrate in
what order the code is processed.
| | 02:25 | So I have the file loading on line 3,
and then the trace statement that says
| | 02:30 | started loading file on line 4,
| | 02:32 | so that's after the file starts loading.
| | 02:34 | Once the file is done loading, then
you'll see file loaded in the Output window.
| | 02:40 | So I'll test the movie.
| | 02:42 | It says started loading file, and then
file loaded after that in the Output window.
| | 02:48 | So you can see that the file starts
loading, and then Flash just moves on to the
| | 02:54 | next line, and when the file is
complete, this block of code runs.
| | 02:58 | So what I want you take out of
this is I want you to remember that
| | 03:04 | ActionScript code is processing the
Flash Player is asynchronous, so commands
| | 03:09 | that take more time to complete, like a
loading file, may still be running while
| | 03:13 | Flash moves on to other lines of code,
and that some lines of code will be
| | 03:19 | executed when an event occurs.
| | Collapse this transcript |
| Understanding variables | 00:00 | Variables are the building
blocks of many a programming language,
| | 00:03 | including ActionScript 3.
| | 00:06 | Knowing what variables are and how to
create and modify them is essential for
| | 00:10 | building any application.
| | 00:13 | I'm going to open up the Actions panel
by selecting the first keyframe of layer
| | 00:17 | 1 and pressing Option+F9 on the Mac, F9 on the
PC, or by using the menu command Window > Actions.
| | 00:27 | I'm going to create a
variable by typing the word 'var.'
| | 00:30 | That's var, short for variable, all lowercase.
| | 00:35 | If you typed it correctly, it should be blue.
| | 00:40 | In Flash, reserved keywords
will turn blue when you type them.
| | 00:44 | That's all based on your ActionScript
settings that you can set through Flash Preferences.
| | 00:50 | After var, type a space and
then type the name of the variable.
| | 00:55 | So, just type 'my' and then
Name with a capital N, no space.
| | 01:01 | When you're naming a variable,
you have to follow special rules.
| | 01:06 | Don't start with a number, but you
can use numbers, as long as it doesn't
| | 01:10 | start with a number.
| | 01:12 | Then don't use any spaces or special
characters, like an exclamation point or at symbol.
| | 01:19 | After you type the name of the
variable, you can type a colon to declare
| | 01:24 | the variable datatype.
| | 01:27 | Think of a variable like a noun.
| | 01:30 | So a noun could be a
person, place, thing, or idea.
| | 01:35 | When I tell the datatype of a variable,
it's the same thing as saying the type of noun.
| | 01:40 | It's like putting it in a category.
| | 01:42 | So, one category of variable is
called String, which can hold text.
| | 01:47 | So your name would be text.
| | 01:50 | So you can put that in a String type variable.
| | 01:56 | Again, I'm using code hinting.
| | 01:58 | I just have to type the first few
letters of string, and then I can select
| | 02:01 | that from the window.
| | 02:02 | Again, capital S, and it should all be blue.
| | 02:06 | When you're declaring a datatype, just
about every single datatype is going to
| | 02:11 | start with a capital letter.
| | 02:12 | There are about three or four that are
going to be starting with lowercase letters.
| | 02:17 | So myName, it's a String, which is
going to hold the text datatype.
| | 02:22 | Then if I want to set a value, I
type space, equals, and then space.
| | 02:28 | Then for a text value, you put that in
quotes, which is different from a number,
| | 02:32 | which doesn't need quotes.
| | 02:33 | So I'm going to type open and close quotes.
| | 02:36 | Those are going to be green.
| | 02:38 | Again, this comes from your Flash
ActionScript preferences, and then a semicolon.
| | 02:43 | Now, I'm going to move my cursor back
| | 02:47 | in between the quotes, and
I'm going to type my name.
| | 02:50 | You can type your name.
| | 02:53 | The semicolon at the end is
just like a period in a sentence.
| | 02:57 | It ends a statement.
| | 02:58 | Now if you want to see if this code is
working properly, you can use a trace statement.
| | 03:05 | Remember, a trace statement makes a
message appear in the Output window.
| | 03:09 | Again, it's usually used for testing your code.
| | 03:13 | So we'll go to the next line by pressing
Enter or Return, and then type the word
| | 03:18 | 'trace,' all lowercase, and it
should be blue when you type it.
| | 03:22 | Again, that's a reserved keyword in Flash.
| | 03:24 | Type some parentheses.
| | 03:27 | You'll notice that I do things like
typing open and close parentheses, and
| | 03:31 | then typing open and close quotes at
the same time, instead of typing one, and
| | 03:35 | then writing the code in the middle,
and then typing the other, I do that so I
| | 03:38 | don't forget to balance out the quotes
or braces, because you always need to
| | 03:42 | opening and close quotes.
| | 03:44 | You're always going to need opening and
close parentheses, curly braces, et cetera.
| | 03:49 | So I like to make sure I don't forget to
write the closed one by writing it at first;
| | 03:54 | same thing with the semicolon.
| | 03:55 | I'll move my cursor back in between
the parentheses by using my arrow keys.
| | 04:01 | Then inside of the trace area, which
is the parentheses, I'm going to type
| | 04:06 | myName, just as I typed it above.
| | 04:08 | So now I'm going to test the movie and
see what appears in the Output window.
| | 04:20 | Notice that it says Todd,
and it doesn't say myName.
| | 04:23 | So the value of the variable is showing up in
the output window, and not the variable name.
| | 04:30 | So I put the name Todd
inside of the myName container.
| | 04:36 | There are many different types of
variables that you'll be working with
| | 04:38 | throughout the rest of this title.
| | 04:40 | You'll learn more about them as
you get more practice using them.
| | 04:44 | But for now, the main thing I want
you to remember is that variables are
| | 04:48 | containers that hold data, are
comparable to nouns, and are the basic building
| | 04:53 | blocks of ActionScript 3.
| | Collapse this transcript |
| Understanding functions | 00:00 | Functions are the secondary building
block in programming, and allow you to
| | 00:04 | store related tasks in named groups,
so they can be reused in the most
| | 00:09 | efficient way possible.
| | 00:11 | In ActionScript, functions are actions,
comparable to verbs, so they do things.
| | 00:19 | Now I want you to think of riding a bicycle.
| | 00:23 | You think of riding a bicycle as one task,
| | 00:27 | but it's really a group of related tasks.
| | 00:31 | So you have sitting on the bike,
pedaling, balancing, et cetera.
| | 00:38 | So just like that, a function takes
a group of tasks and names in them.
| | 00:44 | They usually have active names, like
one of the functions you're familiar with
| | 00:49 | is probably Stop().
| | 00:52 | Stop is a built-in function.
Remember, it's blue, and that stops the timeline.
| | 00:58 | Notice that it's sort of an action word.
| | 01:03 | Another function is gotoAndPlay().
| | 01:09 | It looks pretty similar to stop, in
that there is a blue phrase and some
| | 01:15 | parentheses and a semicolon, except
for in the parentheses you place which
| | 01:19 | frame you want to go to.
| | 01:20 | So gotoAndPlay groups related tasks.
| | 01:25 | It takes the playhead, moves it to a
particular frame, in this case 3, and plays from there.
| | 01:35 | I can go on, but I think you get the point.
| | 01:37 | Now, there is a difference between
running a function and creating a function.
| | 01:44 | Running a function is as simple as
typing the function name in parentheses.
| | 01:48 | Creating the function is a
little bit more complicated.
| | 01:51 | To create a function in
Flash, type the word 'function.'
| | 01:56 | Remember, it should be all lowercase,
and it should be blue after you type it,
| | 02:01 | showing that it's a keyword reserved for Flash.
| | 02:05 | Type a space, and then
type the name of the function.
| | 02:10 | Let's say I wanted to create
a function that added numbers,
| | 02:14 | so I'll call this addNumbers.
| | 02:19 | Usually, a function name starts
with some type of action word.
| | 02:23 | Here my action word is add.
| | 02:25 | So it describes what the function does.
| | 02:28 | I also like to write in camel-case, meaning
each new word starts with a capital letter.
| | 02:35 | This is useful because you
can't use spaces in function names.
| | 02:41 | After the name of the
function, type some parentheses.
| | 02:45 | After the parentheses, you specify what
type of data the function will return.
| | 02:51 | We'll look at this in more detail later on,
| | 02:55 | but for now, just type a
colon, and then type void.
| | 02:59 | This is going to be one of the very few
datatypes that starts with a lowercase letter,
| | 03:03 | so v-o-i-d, with a lowercase v.
| | 03:08 | Go to the next line, type an open curly
brace, that's Shift+Square Bracket, and
| | 03:16 | then press Enter or Return.
| | 03:18 | Depending on your ActionScript
settings, Flash may or may not write a
| | 03:21 | curly brace for you,
| | 03:23 | so you might have to add that close curly brace.
| | 03:26 | Inside of the curly braces, I can
write my tasks that the function will do.
| | 03:31 | This is usually a set of
commands, one on each line.
| | 03:37 | So let's say I wanted to just
add a simple trace statement here.
| | 03:40 | So I'll type trace -
| | 03:41 | remember that puts a message in the output
window, some parentheses, and a semicolon.
| | 03:47 | In the parentheses, I'm not going to use quotes;
| | 03:50 | I'm just going to type 1 + 2.
| | 03:56 | So I'm going to trace 1 + 2.
| | 03:59 | Now if I were to test the movie,
then nothing would happen at this point,
| | 04:03 | because remember, I said that there
is a difference between declaring a
| | 04:06 | function and running a function.
| | 04:09 | So this block of code I have
highlighted here is simply declaring a function.
| | 04:13 | It's saying that it exists, and
you can run it whenever you want.
| | 04:17 | In order to run the function, go below
the curly braces, or of course, you can
| | 04:24 | go above the word 'function.'
| | 04:26 | It doesn't matter; as long as it's in your
code, Flash will find where the function is.
| | 04:33 | Then type the name of the function.
| | 04:34 | So it's addNumbers and some
parentheses, and a semicolon.
| | 04:40 | So notice that it looks
kind of like the stop function.
| | 04:44 | It has the command and then
the parentheses and a semicolon.
| | 04:48 | But it's not blue, because this is a custom
function that we just created. So test the movie.
| | 04:53 | There, you can see 3 in the output window.
| | 05:00 | To make a function more reusable, you
can add something called parameters.
| | 05:05 | Remember, when you ran the gotoAndPlay
function that you passed in a number that
| | 05:10 | tells Flash what frame to go to and play from.
| | 05:13 | So we'll look at doing that
here with our custom function.
| | 05:18 | So let's say when you addNumbers,
you're going to put the numbers that you want
| | 05:22 | to add inside of the function.
| | 05:24 | So every time you run the addNumbers
function, you can use different numbers,
| | 05:28 | and basically you have the function do
something unique each time you run it.
| | 05:33 | Let's look at how that works.
| | 05:35 | Put your cursor in the parentheses, at
the top of your code, right after the open
| | 05:40 | parenthesis after addNumbers; Type num1.
| | 05:45 | So all lowercase, num, n-u-m, and then a 1.
| | 05:50 | This is the first parameter, and I
am going to declare its datatype.
| | 05:55 | So I'm going to type a colon, and then
I'm going to type the word 'Number' with
| | 05:58 | the capital N. Once I see it's
highlighted in the Code Hinting window, I'm just
| | 06:01 | going to press Return, and
have Flash complete that for me.
| | 06:06 | Then I'm going to type a comma, and
then I'm going to type a space, and the I'm
| | 06:11 | going to type num2:Number,
just like I did for num1 function
| | 06:17 | Most of the time spaces don't matter, so I can
either have a space or not have a space here,
| | 06:21 | but I prefer to put spaces because it
helps me to read the code a little easier.
| | 06:29 | So we have num1 and num2.
| | 06:31 | Now I'm going to replace these numbers
inside of the function with num1 and num2.
| | 06:39 | So instead of adding 1 + 2,
it's going to add num1 + num2.
| | 06:44 | Now these numbers don't have any values yet.
| | 06:47 | They won't have any values until we
run the function and tell Flash which
| | 06:52 | values those should be.
| | 06:55 | So go down to the bottom of
your code, when you're running the
| | 06:58 | addNumbers function.
| | 07:00 | Right after the open
parenthesis, put one number -
| | 07:04 | I'll put 5, put a comma, and notice
the Code Hinting window comes up.
| | 07:09 | It says addNumbers, which
is the name of our function.
| | 07:12 | It says there are two values. There is num1 -
| | 07:15 | that is a number,
| | 07:16 | and then there is num2, that is also a number.
| | 07:20 | So for num2, I'll put in 10.
| | 07:22 | So now I'll test the movie, and look
in the Output window. So now I have 15.
| | 07:30 | So the magic of the function is that I
can reuse this as many times as I want.
| | 07:34 | I can highlight the addNumbers line of
code on line 6, copy it with Command+C or
| | 07:39 | Ctrl+C, and then go down and paste it,
and repeat that, paste in a few more
| | 07:45 | times, and I can change the numbers
that I'm adding to whatever I want.
| | 08:01 | So now I can test the movie again.
| | 08:05 | For some reason, the Output window
scrolled down, and I don't see anything, but
| | 08:09 | there actually is something there.
| | 08:10 | So if I close that window and close
the Actions panel and scroll up, you'll
| | 08:16 | see the numbers that were added for me.
| | 08:18 | So you've seen that I can reuse
this function as many times as I want.
| | 08:22 | Right now, it's only just one line of
code, but imagine if you wrote 20 lines
| | 08:27 | of code inside the function, and
instead of having to rewrite 20 lines of code
| | 08:32 | four times, you simply put it into
a function, and you can just call the
| | 08:36 | function or run the function four times,
passing in different values like we're doing here.
| | 08:41 | As we go throughout the rest of this
title, you'll see more uses of functions
| | 08:47 | and get experience learning
how effective they can be.
| | 08:50 | What I want you to remember now is
that functions are groups of commands that
| | 08:54 | are named and can be reused to
organize and optimize your applications.
| | Collapse this transcript |
| Understanding events and event listeners| 00:00 | When building applications in Flash Pro,
one of the programming elements you
| | 00:04 | will work with most is called an event.
| | 00:07 | Events are things that happen, like a mouse
click, keypress, a video is loaded, et cetera.
| | 00:12 | And event handlers are functions
that run when a particular event occurs.
| | 00:19 | Let's take this application I have here.
| | 00:21 | Now, if you don't have the exercise
files, all you need to do is create a movie
| | 00:25 | clip and give it an
instance name of boarder_mc.
| | 00:30 | So create a movie clip, select it on
the main Timeline, go to the Properties
| | 00:36 | panel, and in the Instance Name field
type 'boarder_mc,' just as I have it here.
| | 00:42 | We are going to talk a lot more about
instance names and about manipulating
| | 00:47 | movie clips later on, but
for now this is all you need.
| | 00:50 | Select the first keyframe of the
actions layer, or create an actions layer, if
| | 00:56 | you don't already have one,
and open up the Actions panel.
| | 01:01 | Now, if you've used code snippets,
you may have seen events in action, when
| | 01:04 | you've applied a mouse click
event handler to an object.
| | 01:08 | So, you'll select an object and apply
the mouse click through the code snippets.
| | 01:13 | Here, we are going to add keyboard
control to the character in the game.
| | 01:17 | Now, the first thing to do to be able to
respond to an event is to add something
| | 01:23 | called an EventListener;
| | 01:26 | that tells an object to wait
for a particular event to happen.
| | 01:30 | Now, if we are going to connect the
boarder to the keyboard, you would think
| | 01:35 | that we directly connect the boarder
to listen for the keyboard press, but
| | 01:41 | that's not how it works.
| | 01:43 | Keypresses are best
controlled when connected to the Stage.
| | 01:48 | So we're going to type the word
Stage, and then I'm going to type dot.
| | 01:56 | We'll talk more about what
dots do in another movie.
| | 01:59 | We'll type 'addEvent,' capital E, and
you'll see addEventListener selected in the
| | 02:06 | Code Hinting window before long, so
you can just press Return, and Flash will
| | 02:11 | write the rest of the code for you.
| | 02:13 | So, eventually I have a capital E, else
Listener, capital L, and then the event
| | 02:19 | that we want to listen to for
is called KeyboardEvent.KEY_DOWN.
| | 02:23 | So I just type a capital K. And
Flash highlights that code for me.
| | 02:27 | So I can press Return. Flash will
type the import line of code, which makes
| | 02:32 | sure that I can access a
keyboard event through my code.
| | 02:38 | We'll talk more about importing code
later on, but for right now just ignore that.
| | 02:42 | After KEY_DOWN, type a space and
then type 'keyPressed' and a close
| | 02:55 | parenthesis and a semicolon.
| | 02:57 | So, remember an EventListener,
connects an event, and the event here is
| | 03:02 | KeyboardEvent.KEY_DOWN, which
represents when a key is pressed, to a function,
| | 03:09 | which here is called keyPressed.
| | 03:11 | Now, we haven't defined that function yet,
but we'll define it in just a second.
| | 03:15 | So, if connected pressing
a key down to the stage.
| | 03:18 | Keep in mind that an event can occur
without anything happening, because you can
| | 03:23 | press a key without a key to an EventListener.
| | 03:27 | But when you add a listener, then
you're able to respond to that keypress.
| | 03:32 | So, I'll go down a few lines, and I'll
create a function. Type the word function
| | 03:37 | then a space, and then
keyPressed just as I typed it above.
| | 03:41 | So, keyPressed, just likes that
lowercase k, capital P, one word.
| | 03:46 | Open parenthesis, and
then I am going to type 'evt.'
| | 03:51 | This is a parameter that
represents the event that occurred.
| | 03:55 | This is data that is going to be sent
to the function when a key is pressed,
| | 03:59 | and it's going to have information about the
event that occur, which is going to be a keypress.
| | 04:03 | So type a colon and type Keyboard
Event, capital K, capital E. Once it
| | 04:11 | highlighted in the Code Hinting window, you
can just press Enter or Return, close out
| | 04:16 | the parentheses, type colon
and then void, all lowercase.
| | 04:21 | Go to the next line, create an open
curly brace, add a return and depending on
| | 04:28 | your settings, Flash will or
will not create a close curly brace.
| | 04:31 | If it's not there, make sure to add it
yourself. And then inside of the curly
| | 04:35 | braces, we are going to what
happens when a key gets pressed.
| | 04:40 | The thing that we want to
do is move the skateboarder.
| | 04:43 | So, I am going to type boarder, all lowercase,
_mc, also lowercase, dot x, plus equals five.
| | 05:00 | That's going to move the
boarder five pixels to the right.
| | 05:04 | Well talk more about this code later
on. For now you can just copy what I
| | 05:07 | have on the screen.
| | 05:10 | So, test the movie, and then press
any key on the keyboard and the boarder
| | 05:14 | will move to the right.
| | 05:15 | So here we have created a simple
EventListener, and connected an event to a
| | 05:28 | function, which is called an event
handler, and inside of that function, we
| | 05:32 | have moved the boarder.
| | 05:34 | This is a pretty simple example of an
event, but events are the backbone of your
| | 05:39 | applications, and by applying
EventListeners to objects, you can control what
| | 05:44 | code is executed when an event occurs.
| | Collapse this transcript |
| Working with conditional statements | 00:00 | Have you ever wondered how
applications can think and make decisions?
| | 00:04 | Conditional statements allow you to
specify a block of code that runs only if a
| | 00:09 | particular condition is met, and power
many different parts of code, including
| | 00:13 | artificial intelligence and games.
| | 00:16 | In this application I have here, I can
test the movie and press a key to make
| | 00:21 | the boarder move to the right.
| | 00:23 | Now, it doesn't matter which key I press.
| | 00:25 | I am pressing the up arrow now and the
Spacebar now; the boarder always moves to the right.
| | 00:30 | What if we wanted to only move him to
the right when we press the right key and
| | 00:34 | move him to the left
when we press the left key?
| | 00:38 | Let's look at how to do that.
| | 00:39 | I'll close the window, select the first
keyframe of the actions layer and open
| | 00:44 | up the Actions panel.
| | 00:46 | So, here I have some code that adds an
EventListener to the stage, listening for
| | 00:50 | the KeyboardEvent.KEY_DOWN event, and
then it runs a function call keyPressed.
| | 00:56 | Instead of the keyPressed function, I
can use something called the conditional
| | 01:01 | statement to check which key was pressed.
| | 01:04 | To do that, I'll put my cursor above the
boarder_mc line of code, then press Return
| | 01:12 | so I can get a space above that code.
| | 01:15 | Here I'll type the word 'if' lowercase,
some parentheses, and then I am going to
| | 01:22 | wrap that code that says
boarder_mc.x inside of curly braces.
| | 01:32 | Just for presentation's sake, I can tab
the boarder line of code in, just to clean
| | 01:39 | up the code a little bit.
| | 01:40 | In the parentheses after if, I'm going
to type the condition that needs to be
| | 01:45 | true in order for the
boarder to move to the right.
| | 01:51 | So, the condition is going to be if the key
that was pressed is the right key on the keyboard.
| | 01:58 | I mean right as in the direction
right, and also right as a correct.
| | 02:02 | So, if evt, and that's the
event that gets received,
| | 02:08 | That's an object that actually comes
in to the function whenever a key is
| | 02:12 | pressed, and that contains
information like what key was pressed and other
| | 02:16 | information like that.
| | 02:19 | So, evt.keyCode. As soon as I type a K
you'll see keycode highlighted in my Code
| | 02:27 | Hinting window, so I'll just press
Return and then a space and then two Equal signs.
| | 02:33 | That's different than one Equal sign.
| | 02:35 | One Equal sign is used to set a value
like when you're setting the value for a
| | 02:39 | variable, but two Equal signs is a comparison operator.
| | 02:44 | Instead of being 'is,' like one Equal
means, two Equal signs means 'is equal to.'
| | 02:52 | So we use two Equal signs in conditional statements.
| | 02:56 | So, event.keyCode is equal to, and then
a space, and then I am going to type the
| | 03:02 | right key command, which
is keyboard.RIGHT, all caps.
| | 03:11 | So, if the keycode of the event is
the right key, or in other words is equal
| | 03:17 | to the keycode of the right key on the
keyboard, then move the boarder to the right.
| | 03:23 | So let's test the movie
now and see what happens.
| | 03:26 | I am pressing the Spacebar.
| | 03:27 | I am pressing the Return key.
| | 03:29 | I am pressing up arrow and down
arrow and left arrow; he doesn't move.
| | 03:33 | I press the right arrow and the boarder moves.
| | 03:41 | So naturally, if we move to the boarder to
the right, we should also move him to the left.
| | 03:45 | Let's just copy and paste this whole block so
from the closed curly brace of the if statement up to
| | 03:50 | the word if, copy that with Command or
Ctrl+C, and then go down right below that
| | 03:56 | curly brace, make sure you are not messing with
curly brace for the function, but the
| | 03:59 | curly brace for the if
statement, and then paste the code.
| | 04:03 | So, I have two if statements.
| | 04:05 | Now, I am going to change the
keyboard.RIGHT to keyboard.LEFT in the pasted code.
| | 04:11 | Think about what you might change
in the boarder_mc line to make the
| | 04:15 | boarder move backwards.
| | 04:19 | Simply change the Plus sign to a Minus sign.
| | 04:22 | We added to its x position to move
him to the right; we subtract from the x
| | 04:26 | position to move him to the left.
| | 04:28 | Test the movie, and he moves to right and left.
| | 04:42 | Now, if the person playing the game
presses the right and the left key at the
| | 04:46 | same time, then there's going to be a conflict.
| | 04:50 | So, what we want to do is make it so
only one of these blocks of code runs.
| | 04:56 | So, we only move the boarder to the
left if the person playing the game is not
| | 05:01 | pressing the Right key.
| | 05:03 | To specify that, click before the second if
statement and type the word 'else' and then a space.
| | 05:11 | So, what this means is, first, we check
to see if the Right key was pressed, and
| | 05:20 | if not, or in another words 'else,'
check to see if the Left key was pressed.
| | 05:27 | In that case, move the boarder to the left.
| | 05:31 | Now, you can keep having if statements
and else if statements as many times as
| | 05:35 | you want, and you'll have like a
hierarchy with the else if statements.
| | 05:39 | Finally, you can end a
statement with an else statement.
| | 05:42 | You can specify what you want to have
if none of the conditions are met, so
| | 05:46 | I'll type the word 'else' and then some curly braces,
and inside of the curly braces, I'll type 'trace'
| | 05:57 | and then in quotes, in the trace statement,
I'll just type, "you didn't press left or right."
| | 06:08 | So I'll test the movie and left or
right moved the boarder, but if I push the up
| | 06:12 | arrow then I get that you
didn't press left or right message.
| | 06:16 | So of course you can run whatever code
you want in there, or not have the else
| | 06:21 | statement altogether.
| | 06:26 | Let's look at a different
type of conditional statement.
| | 06:28 | I am going to delete the code that I
have here inside of the function, making
| | 06:34 | sure to preserve the
curly braces of the function.
| | 06:37 | Then instead of using if and
else, I'm going to use a conditional
| | 06:41 | statement called switch case.
| | 06:42 | I am going to type the word switch, and in
parentheses I am going to type in 'evt.keyCode.'
| | 06:49 | So that's the keycode of the
event and some curly braces.
| | 06:55 | The switch statement allows us to
check one bit of data, in this case
| | 07:00 | event.keyCode, and do different
things based on the value of that
| | 07:05 | particular piece of data.
| | 07:06 | So when you're working with a
keyPressed, this is more effective and requires
| | 07:11 | less code than using an if statement.
| | 07:15 | So with the switch statement, I type the
word 'case,' and then I type the value in
| | 07:22 | for the first example, so
that's the Keyboard.RIGHT.
| | 07:27 | So this is a different way
of writing that if statement.
| | 07:31 | This is basically saying the same
thing: if event.keyCode is equal to
| | 07:36 | Keyboard.RIGHT. Then after that, type a
colon. Then go to the next line and then
| | 07:44 | tell Flash what you want to do
if the right key was pressed.
| | 07:48 | So, that's
boarder_mc.x += 5 and then a semicolon.
| | 07:57 | Then to optimize a switch case
statement, you tell the statement to stop looking
| | 08:02 | for different options by going to the
next line and typing the word 'break.'
| | 08:08 | So this is like the first if statement
that we created, case it's Keyboard.RIGHT,
| | 08:13 | then move the boarder to the right five pixels.
| | 08:15 | So, let's test this out and see how it works.
| | 08:18 | It works exactly the same as the if statement.
| | 08:20 | So, let's take those three lines, select
them all, copy: Command+ C or Ctrl+C, go
| | 08:29 | to the next line, paste the code.
| | 08:32 | Now you can change Keyboard.RIGHT to
Keyboard.LEFT, change the Plus to a Minus and
| | 08:38 | test the movie again.
| | 08:41 | So we can move the boarder right and left
now, but the other keys also don't work.
| | 08:49 | If you wanted to do a final else
statement, like we did with the other one where
| | 08:54 | none of the conditions are met, with a
switch case statement, you use the default
| | 08:58 | command, so we type 'default' and then
a colon, and then you can type in a
| | 09:05 | trace statement if you want, or you
can type in nothing; it doesn't matter.
| | 09:09 | So, in the trace statement, I'll put a
different key was pressed, and then we end
| | 09:19 | with a break statement.
| | 09:21 | So you can see that this code is a
little bit more concise than what we did
| | 09:27 | with the if statement.
| | 09:33 | So sometimes you are going to want to
use the if statement, but for something
| | 09:36 | like a keyPressed, the switch case
statement is the better way to go.
| | 09:39 | So, using conditional statements, you can
add logic to your code and decide which
| | 09:45 | code to run based on any criteria you choose.
| | Collapse this transcript |
| Creating arrays and vectors | 00:00 | When you're working with large amounts
of data, it is crucial to stay organized
| | 00:04 | so that data can easily
be accessed and utilized.
| | 00:08 | Using arrays and vectors, it is
easy to organize large amounts of data.
| | 00:14 | Let's start by looking at an array.
| | 00:17 | Let's say you wanted to load 50
different thumbnail images into a slideshow.
| | 00:24 | Now it'd be nice to have some organized
way to store all those image names, right?
| | 00:30 | Well, with an array, you can do that.
| | 00:34 | To create an array, type var,
then a space, then name your array.
| | 00:40 | I usually name my array something
plural, so thumbnails, for example.
| | 00:44 | I'd say these represent thumbnail images
that you would load into Flash. So thumbnails:
| | 00:53 | and now remember, you're telling Flash
what type of data the variable is, and
| | 00:58 | an array is an array.
| | 00:59 | So type capital A and begin to type
Array, and you'll see it selected in the
| | 01:04 | code hinting area, and you could just
double-click that or press Enter on your
| | 01:07 | keyboard, and Flash will finish it for you.
| | 01:10 | And then type space = space, and
there are actually several different ways
| | 01:15 | that you can create an array.
| | 01:17 | I can type new Array, capital A, and
Flash will create the array in memory.
| | 01:26 | And then I can go to the next line, and
every time I want to add something to
| | 01:30 | the array, I can type thumbnails.push.
This adds an item into the array, so I'll
| | 01:38 | just double-click push.
| | 01:40 | Notice it's an action word, so
it's like a command, like a function.
| | 01:44 | And inside the parentheses, I
put whatever object I want to add.
| | 01:48 | So in quotes, I would put
something like image1.jpg.
| | 01:53 | This isn't actually representing a real image.
| | 01:56 | I'm just giving an example.
| | 01:58 | So I'll close out the
parentheses and type a semicolon.
| | 02:01 | So if I wanted to add more images, I can
just select this line of code, copy it
| | 02:05 | with Command or Ctrl+C, go to the next
line, paste with Command or Ctrl+V, and
| | 02:10 | then repeat, and then change that
to image1, image2, image3, image4.
| | 02:16 | That's one way to create an array.
| | 02:18 | I'm going to delete all these
lines at the bottom now, and look at a
| | 02:21 | shorthand way to do all this.
| | 02:24 | Inside of the parentheses, when you create
the array, that's the new Array parentheses,
| | 02:29 | you can type comma-separated values.
| | 02:32 | Type image1.jpg in quotes, and then a
comma, a space, and then in quotes you can
| | 02:37 | type image2.jpg, and so on.
| | 02:43 | The last way to create an array is
a really shorthand way, which just
| | 02:47 | involves square brackets.
| | 02:49 | So I can replace new Array and the
open parenthesis with an open square bracket.
| | 02:57 | That's right under the curly brace, so
if you don't hold Shift and you press
| | 03:01 | Curly Brace key then you'll get square bracket.
| | 03:03 | Now I'll move to the right parenthesis and
replace that with a right square bracket.
| | 03:07 | So I've created an array, and now I
have an organized way to store my data.
| | 03:13 | Now I'm not going to type in all 50
images here, but you get the point.
| | 03:16 | Now let's say you wanted to access
one of the elements in the array.
| | 03:21 | So I store all my data in this array,
a big list, and then I want to pull out
| | 03:26 | one of the elements in it.
| | 03:28 | To do that, we're going to use
something called array access notation, which
| | 03:33 | sounds a lot more complicated than it is.
| | 03:35 | All it is is square brackets.
| | 03:37 | So go to the next line, type a trace
statement, and in the parentheses type
| | 03:45 | 'thumbnails' and then some square brackets,
and inside of the square brackets, type
| | 03:52 | the number of the thumbnail you want to access.
| | 03:56 | Now, arrays start at number zero, so
image1.jpg would be at index zero of the
| | 04:03 | array; image2.jpg would be at index 1;
| | 04:07 | the next one would be at index 2;
and then 3, and 4, and so on.
| | 04:11 | So to access the first piece of data
in the array I type a zero inside of
| | 04:16 | the square brackets,
| | 04:17 | and then I test the movie, and you
can see I have access to that data.
| | 04:24 | So right now that may not seem extremely
useful, but you can imagine how much
| | 04:29 | easier it would be to stay organized
when you have large amounts of data.
| | 04:32 | You put them into an array, and you
can access the data using a simple
| | 04:36 | array access notation.
| | 04:38 | Another way to hold this of
data is called a vector.
| | 04:43 | Because vectors are Flash Player 10
only, and the syntax is drastically
| | 04:49 | different from an array and anything
else we'll be doing in this title, I'm
| | 04:52 | going to focus on arrays for this title.
| | 04:55 | But typically if you're using Flash
Player 10, a vector is the more optimized option.
| | 05:03 | Here is how to create a vector.
| | 05:05 | Type the word 'var' and then a
space and the name of the vector.
| | 05:11 | I'm just going to call this 'v' type a
colon to declare the data type and set it
| | 05:17 | as a vector with capital V. And one of
the differences between a vector and an
| | 05:21 | array is that a vector can only hold one
type of data that you specify. An array
| | 05:27 | can hold numbers and strings at the
same time, and a vector can only hold all
| | 05:31 | strings, or all numbers, or all any
other data type, but they all have to be the
| | 05:37 | same data type in a vector.
| | 05:39 | That's part of what keeps them optimized.
| | 05:41 | So we're going to tell Flash that
this vector will only contain strings.
| | 05:45 | To do that, type a dot after Vector and
then a less than sign, and in there, type a
| | 05:52 | capital S, for String.
| | 05:55 | So start to type String. Once it's
highlighted, press Return and then close out with
| | 05:59 | a greater than sign.
| | 06:00 | This syntax here, the dot, less than,
greater than sign, is something we're really
| | 06:07 | not going to be working with in this
title, which is, again, why I'm going to work
| | 06:10 | with array in this title.
| | 06:12 | So after that, type space, then a new,
space, Vector, capital V, and you'll see that
| | 06:20 | Vector.<String> is highlighted, so I'm
just going to double-click that and then
| | 06:24 | some parentheses and a semicolon.
| | 06:27 | So that's how to create a
vector that'll hold a string.
| | 06:30 | Again, we're not going to be diving too
deep into vectors in this title, but it
| | 06:34 | is more optimized, and it's Flash Player
10 only, so if you want to use a Vector,
| | 06:38 | you can look up the vector class in Flash help.
| | 06:42 | The main thing I want you to take away
is that arrays and vectors allow you to
| | 06:46 | organize data for easy access.
| | Collapse this transcript |
| Using the For command to create a loop| 00:00 | Sometimes you will want to run the same
block of code many times, with little variation.
| | 00:05 | For example, let's say you have a
slideshow with a hundred images, and you need
| | 00:10 | to load and place all of the thumbnails.
| | 00:14 | It would be very tedious to copy and paste
the loading and placing code 100 times.
| | 00:20 | So to save time, and to be more
organized, you can use a loop and write the code
| | 00:26 | only once, and have it
repeat itself a hundred times.
| | 00:29 | What we're going to do here is use a
loop to place the trashcans on the stage.
| | 00:35 | I'm going to align the trashcans to
the Y position of the second trashcan.
| | 00:41 | If you don't have access to the
exercise files, just create nine instances
| | 00:45 | of any movie clip and name them can1_mc, can2
_mc, et cetera, all the way through can9_mc.
| | 00:53 | Let's go to the first keyframe of the
actions layer and open the Actions panel.
| | 01:00 | Here I've added all these
cans to a trashCans array.
| | 01:06 | Note that these values are not in
quotes, because they are referring to
| | 01:11 | instances on the stage.
| | 01:12 | Now let's take a look at writing a loop to
modify the position of each of these objects.
| | 01:19 | Type the word 'for' some
parentheses and some curly braces.
| | 01:23 | Notice the parentheses and
curly braces are becoming common.
| | 01:27 | We use them for functions, for the if
statements, switch/case statements, and
| | 01:33 | for this for loop here.
| | 01:34 | So inside of the parentheses,
type var space i, lowercase, colon, uint, u-i-n-t.
| | 01:43 | This is another data type
that starts with a lowercase letter. Set that = 0.
| | 01:51 | By the way, uint is a positive
integer, so a whole number, 0 and above.
| | 01:59 | Semicolon after that 0; and i, less than.
| | 02:05 | This is going to run nine times,
once for each of the trashcans, a
| | 02:11 | semicolon, and then i++.
| | 02:14 | Let's walk through what this line of code does.
| | 02:17 | These three different sections of
the loop specify different things.
| | 02:22 | The first part is called the iterator variable.
| | 02:27 | This is going to be a variable
that we'll use inside of the loop.
| | 02:31 | So we declare the variable, just like
any other variable. We call it i for
| | 02:36 | iterator, but it could be anything you want.
| | 02:41 | Declare the datatype as a
positive integer and set the value = 0.
| | 02:46 | That's a starting value for the loop.
| | 02:48 | You can set it to any value you want,
but most of the time it's going to be zero.
| | 02:53 | The next part refers to how
many times the loop will run.
| | 02:57 | The loop will run as long as i < 9.
| | 03:02 | Finally, you explain what will happen
after each time the loop runs. i++ means to
| | 03:09 | increment I by 1 or add 1 to
it each time the loop runs.
| | 03:13 | So just to see the loop in action,
type 'trace' inside of the loop and in the
| | 03:20 | parentheses for the trace statement, just
type i. Make sure not to put it in quotes.
| | 03:25 | So if you test the movie and take a
look in the Output window, you'll see the
| | 03:31 | numbers 0 through 8.
| | 03:34 | Let's go back to the code, and that
corresponds to an index of the array, or at
| | 03:44 | least we can tell Flash to make that
correspond to an index of the array.
| | 03:47 | So what we'll do is erase the trace
statement and place the trashcans.
| | 03:55 | To do that, we'll reference
the trashcans through the array.
| | 04:00 | So type trashCans, index i, which means
you put i inside of square brackets, so
| | 04:08 | that's referring to a trashcan each
time, and then type .y. That refers to the
| | 04:17 | vertical position of the object. And
we'll set that = can2_mc.y; so we're
| | 04:26 | aligning each object to
the Y position of can2_mc.
| | 04:32 | So let's test the movie
and see the code in action.
| | 04:35 | Now, all the trashcans are aligned.
| | 04:38 | Remember, if you look at the
stage, they're not aligned.
| | 04:40 | So you can use a loop to do that.
| | 04:43 | And the great thing about it is it
doesn't matter if we have 9 trashcans or
| | 04:48 | 10,000 trashcans; modifying this code
is as simple as modifying that number.
| | 04:53 | Finally, if you really want to
optimize this code and have it update based on
| | 05:01 | the size of the array, you can change
the 9 value to be the length of the array,
| | 05:08 | or how many items are in the array.
So change that to trashCans.length.
| | 05:17 | Again, that refers to the number of
items that are inside of the array,
| | 05:20 | which right now is nine.
| | 05:22 | That way if you ever change the array,
you won't have to update the for loop.
| | 05:28 | To test the movie again, show that it's working.
| | 05:31 | Now, if I were to click and drag and
erase, let's say almost all of the cans
| | 05:37 | inside of the array, so I
only have three cans now,
| | 05:39 | if I test the movie, then only the
first three cans will be aligned, so I don't
| | 05:46 | have to update the loop.
| | 05:47 | So this is a pretty a simple example, but you
can see how a loop can save you so much time.
| | 05:55 | Using a for loop, you can perform the
same block of code on every object in an
| | 06:00 | array and save loads of time
building your applications.
| | Collapse this transcript |
|
|
3. Working with the Display ListReviewing the display list | 00:00 | Before writing code to manipulate
objects in Flash, it is important to understand
| | 00:05 | how Flash organizes those objects.
| | 00:07 | In ActionScript, this is
referred to as the display list.
| | 00:11 | The display list contains
two primary types of objects:
| | 00:15 | display objects and display object containers.
| | 00:18 | Display objects are visual objects, like
shapes, movie clips, buttons, and text fields.
| | 00:26 | So I have a bunch of
display objects on the stage.
| | 00:28 | If I select them, you can see in the
Properties panel the Flash does not call
| | 00:33 | them display objects; rather, there are
their specific names, like movie clips,
| | 00:38 | a bitmap image, et cetera, but these all
fall under the category of display objects.
| | 00:45 | Some display objects are
display object containers.
| | 00:50 | Display object containers can contain other
display objects and display object containers.
| | 00:57 | Now, that may sound a kind of
confusing. Just think of a movie clip.
| | 01:01 | So on the stage here I have this border
object and if I double-click the border,
| | 01:05 | I'll enter its Timeline.
| | 01:07 | So the movie clip is a container.
| | 01:10 | It's simply a container,
holding all of these frames.
| | 01:13 | So I can click and drag. We can see that.
| | 01:19 | And inside of a movie clip, I can have
shapes, which are display objects, or I
| | 01:24 | can have other movie clips,
which are display object containers.
| | 01:27 | For example, I have this Fall movie clip,
and if I double-click it, you can see it
| | 01:33 | has its own display object inside of it.
| | 01:36 | There is a bitmap image inside.
| | 01:38 | So in code, a movie clip would be
considered a descendant of the display
| | 01:44 | object container, because it has the same
properties that display object containers have.
| | 01:50 | A bitmap or a shape or a text field
would be a descendant, also known as a
| | 01:56 | subclass, of the display object group, or class.
| | 02:00 | Now I'll return to the main Timeline.
| | 02:03 | All display objects in an
application are on the stage.
| | 02:08 | You may remember, in another movie, we
added a keyboard event listener to this
| | 02:13 | stage with a lowercase s, and that's
were all display objects and display
| | 02:18 | object containers reside.
| | 02:20 | Another thing you need to understand
about the display list is the language
| | 02:24 | between children and parents.
| | 02:26 | So the boarder on the stage would
be considered a child of the stage.
| | 02:31 | Now if I double-click the boarder and
enter its Timeline, then from here, the stage
| | 02:36 | would be the boarder's parent.
| | 02:38 | And yes, it is correct to call
things grandparents and grandchildren, but
| | 02:43 | understanding that relationship is key
to working with visual objects in Flash.
| | 02:48 | So to recap, the display list is the
term used to describe Flash's system
| | 02:53 | for organization for visual objects,
and consists of display objects and
| | 02:58 | display object containers.
| | Collapse this transcript |
| Understanding instances referenced through ActionScript | 00:00 | One of the more common tasks when
working with ActionScript in Flash Pro is to
| | 00:04 | use ActionScript code to
manipulate objects on the stage.
| | 00:08 | Now you probably already
have experience with this.
| | 00:10 | You have even done that in this title.
| | 00:12 | The easiest way to do that is to give an
object an instance name and use that
| | 00:16 | instance name to reference
the object in the Actions panel.
| | 00:19 | From the stage here, if I select my
border, you will see it's a movie clip, and
| | 00:23 | it has an instance name of boarder_mc.
| | 00:26 | Note that you won't see the instance
name field unless you have a particular
| | 00:30 | type of object selected.
| | 00:31 | Instance names are only applicable to
movie clips, buttons, some types of text
| | 00:37 | fields, and components, like
the FLV playback component.
| | 00:40 | Note that my instance name is boarder_mc.
| | 00:44 | Instance names are actually variables
that are created behind the scenes in
| | 00:48 | Flash, and need to follow
the same naming conventions.
| | 00:51 | In other words, you can't start with
a number - so you should start with a
| | 00:55 | letter, and you cannot include
any spaces or special characters.
| | 00:59 | I've followed this naming convention for a
few years now, so I am used to ending
| | 01:03 | every movie clip instance name with _mc.
| | 01:07 | A movie clip instance name ending in
_mc in previous versions of Flash would
| | 01:12 | give you access to instant code hinting.
| | 01:14 | And in this version of Flash, that
feature does not exist, so you don't really
| | 01:19 | need to have that in there.
| | 01:20 | That's just something I still
do because I am used to doing it.
| | 01:23 | So again, for you, that is optional.
| | 01:25 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 01:29 | So if we want to reference the boarder,
all we have to do is type that instance
| | 01:33 | name in our code, boarder_mc.
| | 01:35 | If you want to see what Flash sees
when you type boarder_mc, you can trace
| | 01:41 | boarder_mc and test the movie.
| | 01:43 | You can see that Flash sees an
object that is an instance of boarder_4.
| | 01:50 | The boarder part comes from that
boarder symbol that we created, and the
| | 01:54 | object is an ActionScript object,
which is basically an instance.
| | 01:59 | So again, Flash creates these
instances behind the scenes. So that you
| | 02:04 | don't create a conflict,
| | 02:05 | don't create variables with the same
names as your instance names, or else
| | 02:10 | Flash may break that connection that you
set up by giving an object an instance name.
| | 02:14 | So to recap, you can apply an
instance name to certain types of objects by
| | 02:19 | selecting them and going
to the Properties panel.
| | 02:21 | By adding an instance name to an
object, you can easily modify that object
| | 02:25 | using ActionScript.
| | Collapse this transcript |
| Using dot syntax to modify properties in an instance | 00:00 | To modify an instance using ActionScript,
you can use something called dot syntax.
| | 00:05 | Don't let the name scare you though; dot
syntax is simple and easy to learn, even
| | 00:09 | for the newest programmers.
| | 00:11 | On the stage I have an instance
of a movie clip called boarder_mc.
| | 00:15 | Make sure to create a movie clip instance
and name it, just like mine is named here.
| | 00:19 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:23 | Dot syntax simply means you can modify
an object's properties by typing a dot.
| | 00:29 | The real special thing about dot
syntax in Flash is that you can get code
| | 00:33 | hinting when typing a dot.
| | 00:34 | To get code hinting, I am going to make a
variable to hold the boarder on the stage.
| | 00:40 | Now this may seem a little bit
counterintuitive, because we have already
| | 00:42 | given it an instance name, and I am
not going to directly use that instance
| | 00:45 | name to modify the boarder.
| | 00:47 | I will show you why in just a second.
| | 00:48 | Type var and then a space, and we
will call this boarder, different from
| | 00:53 | boarder_mc, which is the
instance name of the border.
| | 00:56 | I am going to data type this to a movie clip, and
| | 00:59 | I am going to set it equal to boarder_mc.
| | 01:02 | That's the name of the
movie clip instance on stage.
| | 01:04 | Now here is why I do that.
| | 01:07 | If I want to modify the boarder's
properties, I'll just type boarder and then a dot.
| | 01:12 | I can scroll through a menu,
| | 01:14 | pick different properties and
methods that I can apply to this object.
| | 01:18 | Let's take a look at one of them.
| | 01:19 | I am going to double-click on alpha.
| | 01:21 | This value is a numeric value
between 0 and 1 and controls the alpha
| | 01:26 | transparency of an object.
| | 01:28 | So if you want to bring its alpha down to
25%, then the value is not 25 - it's 0.25.
| | 01:34 | boarder.alpha = 0.25.
| | 01:34 | So I will test the movie, and you can
see a semi-transparent boarder on stage.
| | 01:40 | Some other properties you can modify
are x. You have seen that before in this
| | 01:44 | title, so I can set it equal to 0,
| | 01:47 | make the boarder go to
the left edge of the stage.
| | 01:49 | I can set it to 500 and
| | 01:51 | move the character to the right.
| | 01:53 | Another position property is Y, which
controls the vertical position. If I set Y to 500,
| | 01:58 | the boarder is at the bottom of the stage.
| | 02:00 | If I set Y to 0, the boarder goes to the top.
| | 02:03 | Finally, I would like to show you
rotation, which allows you to, obviously, rotate
| | 02:08 | an object, but keep in mind
this is not animated rotation;
| | 02:11 | this is just simply
modifying the rotation property.
| | 02:14 | So I will set the value to 45, and
you can see the boarder is rotated 45 degrees.
| | 02:19 | You can go to -45. And keep in
mind that values for rotation
| | 02:24 | are between -180 and +180.
| | 02:28 | Also, position and rotation are all
relative to the registration point of the object.
| | 02:32 | See here that the cross is at
the top left of my movie clip.
| | 02:36 | Let's say I were to create another movie clip.
| | 02:38 | I will just take this trashcan and
go Modify > Convert to Symbol, and this
| | 02:44 | opens a Convert to Symbol dialog,
which allows you to set the registration.
| | 02:47 | The default is top-left, but you can
also set it to the center, the bottom-right
| | 02:51 | or wherever you want.
| | 02:52 | For the most part, you're going to want to
keep registration at the top-left, but if
| | 02:55 | you're ever going to rotate an object
using ActionScript, especially if you are
| | 02:59 | going to animate the rotation, you
might want to have the object's registration
| | 03:02 | point to be in the center.
| | 03:03 | So, that's the XY origin of an
object when you create it as a symbol.
| | 03:07 | I am going to cancel out of that menu now.
| | 03:09 | So wherever the registration point is, you can
still manipulate the object using dot syntax.
| | 03:14 | So to review, dot syntax allows you to
manipulate objects by using a dot after
| | 03:19 | the object's name, which opens the
Code Hinting window for easy access to all
| | 03:24 | the object's properties.
| | Collapse this transcript |
| Placing objects at the center of the stage | 00:00 | One of the common tasks in ActionScript is
to align an object to the center of the Stage.
| | 00:06 | On the Stage here, I have an instance
called boarder_mc and then a trashcan
| | 00:12 | that I call trash_mc.
| | 00:14 | So let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 00:18 | To align an object to the center of the
state horizontally, modify the objects X
| | 00:23 | property, so boarder_mc.x =.
| | 00:27 | Now one option would be to center the
object to the Stage with the Align panel
| | 00:32 | and write down the object's
position and then write it in right here.
| | 00:36 | Though that would work, the code would break
if you were to change the size of your document.
| | 00:41 | So you need something that's always going
to represent the entire width of the Stage.
| | 00:47 | You can get that information to
the stage.stageWidth property.
| | 00:51 | So if I set this X position equal to
stage.stageWidth, the registration
| | 00:56 | point would be aligned with the right
edge of the Stage, and you wouldn't be
| | 00:59 | able to see the boarder.
| | 01:01 | So we are going to do some simple math to
put him in the center, by dividing that by 2.
| | 01:05 | The Division symbol is simply a forward slash.
| | 01:07 | So there is the border in the
center of the Stage, well almost.
| | 01:12 | His left edge is aligned with the
center of the Stage, because his registration
| | 01:17 | is on his left side.
| | 01:19 | So in order to completely align the
boarder, we are going to need to shift him to
| | 01:23 | the left a little bit.
| | 01:24 | So after the 2, I'll type space minus space
boarder_mc dot width. That's how you access the width of a
| | 01:33 | movie clip, and then we take that, and
we divide that number by two as well.
| | 01:37 | We will test the movie, and there the
boarder is at the center of the Stage.
| | 01:41 | If you want to test yourself,
pause the movie and try to center the
| | 01:46 | boarder vertically.
| | 01:48 | To do that, all I am going to do is take
this line of code, copy it, paste it on
| | 01:53 | the next line, Ctrl+C or Command+C
to copy, Ctrl+V or Command+V to paste.
| | 01:58 | Change the x to a y, change StageWidth to
StageHeight and change boarder_mc.width
| | 02:04 | to boarder_mc.height.
| | 02:06 | That's it. Test the movie.
| | 02:08 | And the boarder is in the center of the Stage.
| | 02:10 | So here is the code to
center an object to the Stage.
| | 02:13 | What if you want to reuse this?
| | 02:15 | All you have to do is
wrap it inside of a function.
| | 02:18 | So above all my code, I am going to
create a function. Type the word 'function'
| | 02:22 | and a space, and I will call this 'align
to center,' I'm writing that in that CamelCase, so
| | 02:27 | capital T and capital C;
everything else is lower case.
| | 02:31 | Parentheses colon void, and I am going
to wrap these two lines of code in curly
| | 02:36 | braces and tab them in, just to stay clean.
| | 02:39 | Now what I am going to do is put a
parameter inside of alignToCenter, so that I
| | 02:45 | can align any object to the center of the Stage.
| | 02:48 | Obj, short for object, inside of the
parentheses, after alignToCenter, we're going to
| | 02:54 | datatype this as a MovieClip.
| | 02:56 | Flash will automatically
add that import statement.
| | 02:58 | And then I am going to
replace boarder_mc with obj.
| | 03:02 | I am just going to copy and paste
over each time it says boarder_mc.
| | 03:07 | Now I can center any object
to the center of the Stage.
| | 03:10 | For example, if I wanted to center
the trashcan, all I have to do is find an
| | 03:15 | empty line on my code and type
alignToCenter, capital T, capital C. Pass in the
| | 03:22 | movie clip I want to align, trash_mc,
close up the parentheses, add a semicolon.
| | 03:28 | Test the movie, and the
trashcan is at the center of the Stage.
| | 03:32 | If I want to change it back to the
boarder, all I do is change trash_mc to
| | 03:36 | boarder_mc, and there is the
boarder at the center of the Stage.
| | 03:39 | It's as simple as that.
| | 03:41 | So now you have a reusable function
to center any object to the Stage.
| | 03:45 | So, remember, you can center an object
to the Stage by positioning the object at
| | 03:51 | the width of the Stage divided by two,
minus half the width of the object.
| | 03:56 | The same rule applies with a Y
position for the Stage height and the
| | 04:01 | object's height.
| | Collapse this transcript |
| Placing objects at the edges of the stage | 00:00 | Often when working with ActionScript,
you want to align an object to the edge
| | 00:05 | of the Stage, or particularly in a game,
detect whether the object has touched
| | 00:09 | the edge of the Stage.
| | 00:11 | On the Stage, here I have
boarder_mc and trash_mc.
| | 00:15 | I'll select the first keyframe in the
actions layer, and open up the Actions panel.
| | 00:21 | Centering an object to the left or
top edge of the Stage is really easy, if
| | 00:26 | you have top-left registration.
| | 00:28 | Type boarder_mc.x = 0 and test the movie.
| | 00:34 | So there is the border at
the left edge of the Stage.
| | 00:40 | I can copy and paste this line of code -
Command+C or Ctrl+C to copy, Command+V or
| | 00:45 | Ctrl+V to paste - and simply change x to
y in the pasted code and test the movie
| | 00:52 | to see the boarder aligned
to the top edge of the Stage.
| | 00:56 | It's a little different if you want
to the object to be aligned to the right
| | 00:59 | edge of the state, or to detect
whether an object is at the right edge of the Stage.
| | 01:03 | The right edge of the Stage can be
reached by Stage.StageWidth - remember that
| | 01:09 | always represents the width of the
Stage, minus the width of the object.
| | 01:15 | Because remember, if we set the x
position of the boarder at the StageWidth, then
| | 01:20 | it would be off the Stage because the
left edge of the border would be aligned
| | 01:24 | with the right edge of the Stage.
| | 01:25 | So after the Minus sign, we'll
offset that by boarder_mc.width.
| | 01:32 | Test the movie, see the boarder
at the top-right of the Stage.
| | 01:34 | Now if I simply copy and paste this
line of code, change x to y, StageWidth to
| | 01:42 | StageHeight, and boarder_mc.
width to boarder_mc.height,
| | 01:50 | test the movie, and the same principle applies.
| | 01:54 | Now let's say you wanted to reuse this
code and put it inside of a function.
| | 01:58 | Let's wrap this code around a function.
Push everything down, create a function
| | 02:03 | called alignToEdge, parentheses,
colon, void, tab the lines in and wrap
| | 02:11 | everything with curly braces.
| | 02:13 | So now I've wrapped this into a
function. I can just call it whenever I want.
| | 02:17 | I am going to write obj, as a parameter,
datatype it to a MovieClip, and then
| | 02:22 | change boarder_mc to obj inside of the function.
| | 02:27 | That way, anytime I want to align an
object to the edge of the Stage, I can run
| | 02:31 | the alignToEdge function and pass in
whatever object I want, and it won't just
| | 02:36 | apply to the boarder.
| | 02:37 | Let's go below the function, and
then I am going to type alignToEdge.
| | 02:42 | Then I am going to pass in trash_mc.
| | 02:46 | So we'll align that to the
bottom-right edge of the Stage.
| | 02:49 | And test the movie, and it
applies to the trashcan.
| | 02:54 | So if I were to change that to
boarder_mc, it would apply to the boarder.
| | 03:00 | So I can apply it to any object
I want, as many times as I want.
| | 03:04 | Now if you really wanted to add
features in this function, you can have it
| | 03:07 | specify whether you want to align to the left,
or to the right, or to the top, or to the bottom.
| | 03:14 | Let's look at how to do that.
| | 03:15 | After MovieClip, inside of the
parameters area of the alignToEdge function,
| | 03:20 | type a comma and then type a t. This
will represent whether you want to align to
| | 03:25 | the top edge of the Stage.
| | 03:27 | Type a colon after the t and then type Boolean.
| | 03:29 | This is going to be a true or false value.
| | 03:31 | We'll do the same thing for the right,
with an r, also Boolean, for the bottom - I
| | 03:39 | am working clockwise, you see -
| | 03:41 | Boolean, and the left
which will also be Boolean.
| | 03:45 | So I can specify how I want to
align the object to the Stage.
| | 03:49 | And in here I can use IF statements to
determine how I want to align the object.
| | 03:53 | All right, inside of the function, I am
going to use an IF statement, and I am
| | 03:57 | just going to see if t is true.
| | 04:00 | If t is true, then I'm going to align
the object to the top edge of the Stage.
| | 04:05 | So obj.y equals zero.
| | 04:09 | I can copy and paste this IF statement,
change t to l, representing the left
| | 04:16 | edge of the Stage. If that's true
then we can set the x position to zero.
| | 04:21 | I'll go down below the curly braces,
I'll type if r, in parentheses, and wrap
| | 04:27 | this next line of code into curly braces.
| | 04:29 | So this will align to the right
edge of the Stage if r is true.
| | 04:33 | And lastly, check to see if b. If we
want to align to the bottom edge of the
| | 04:38 | Stage, tab that code in
and wrap it in curly braces.
| | 04:42 | So now we'll scroll down, and let's
say we want to align the boarder to the
| | 04:47 | bottom-left of the Stage.
| | 04:49 | So when we run alignToEdge, we're
going to pass in those four Boolean
| | 04:54 | parameters; remember,
Boolean is simply true or false.
| | 04:58 | So after boarder_mc, I'm going to type
a comma, and then I have - my code hinting
| | 05:04 | even shows me - t, r, b, l. So top is
going to be false, right is going to be
| | 05:11 | false, bottom is going to be
true and left is going to be true.
| | 05:16 | So I'll test the movie, and the boarder
is aligned to the bottom-left of the Stage.
| | 05:22 | So you can pass in whatever
parameters you want to align any object to any
| | 05:26 | corner of the Stage.
| | 05:28 | Now, if any of this got a
little bit confusing, don't worry.
| | 05:31 | I just went out there for people who
want to learn a little bit more and go a
| | 05:34 | little bit deeper into ActionScript.
| | 05:36 | If you take anything from this movie,
just take away that you can align the
| | 05:40 | object to the top-left, by setting its x
and y positions 0, and you can align an
| | 05:45 | object to the bottom-right by setting
its position to the width or height of the
| | 05:49 | Stage, minus the width or height of the object.
| | Collapse this transcript |
| Using the methods of an instance| 00:00 | Variables are to properties
as functions are to methods.
| | 00:04 | In other words, methods are functions
that are connected to objects. Just like
| | 00:08 | accessing properties of an object, accessing
an object's methods requires simple dot syntax.
| | 00:14 | Consider this boarder on the Stage.
Again, its instance name is boarder_mc.
| | 00:20 | If I test the movie, you'll see
that it animates to make him fall down.
| | 00:25 | That's because I removed the stop action
in his first frame, so if I double-click
| | 00:30 | the movie clip, you won't see
any action on the first frame.
| | 00:32 | So the animation plays, and then there
is a stop action on the last frame, as
| | 00:36 | you can see right here.
| | 00:38 | Just ignore the other code for now.
We'll talk about that later.
| | 00:40 | So I go back to scene one, and let's
say I wanted him to stop on frame 1.
| | 00:45 | Go to the first key from the actions
layer, and open up the Actions panel.
| | 00:50 | Now you may want to access to code
hinting, so let's just type 'var boarder,' and
| | 00:55 | datatype him as a MovieClip, and
we'll set it equal to boarder_mc.
| | 01:00 | Now remember this means exactly the same thing.
| | 01:03 | We could just type boarder_mc instead of
boarder, but this is just going to give
| | 01:07 | us access to code hintings.
So you can do this whatever way you want.
| | 01:09 | So go down a few lines and type
'boarder.' and then start to type stop, and
| | 01:15 | you'll see it highlighted
in the Code Hinting window.
| | 01:18 | Double-click that. Flash types
the open parenthesis for you.
| | 01:21 | You can close it out and add a semicolon.
| | 01:23 | So instead of just stop, like when you
want to stop the main Timeline, you type
| | 01:28 | the objects name, a dot and then stop,
and you are sending a command to that
| | 01:33 | object to stop playing.
| | 01:35 | So when I test the movie now,
the boarder won't animate.
| | 01:38 | So let's say I wanted to have the boarder stop.
| | 01:42 | I want it at a later frame.
| | 01:43 | So let's say I want it to stop at
frame 30, or something like that.
| | 01:47 | I can use to gotoAndStop command, so
boarder.gotoAnd, and then capital S, and
| | 01:55 | Flash will highlight gotoAndStop, and
press Return, and Flash tells me which
| | 02:00 | values that I need to pass into the method.
| | 02:02 | The only one I need a pass in is called Frame.
| | 02:05 | So I can just type in a frame number.
| | 02:07 | So I'll type in 30, close up the
parentheses and the test movie, and
| | 02:11 | there is the boarder on the ground.
| | 02:15 | I can also type gotoAndPlay, so I'll
just change Stop to Play, capital P, and
| | 02:20 | then let's say frame 2, and then
you'll see the boarder animate again.
| | 02:24 | Let's say you wanted the boarder
to fall down when you clicked on him.
| | 02:28 | So the first thing we'll do is to make him stop.
| | 02:30 | So right above gotoAndPlay, I'll type
boarder.stop. Make sure to close out the
| | 02:35 | parenthesis and add a semicolon, and
then we'll go down a few lines and type
| | 02:39 | boarder.addEventListener.
| | 02:42 | This is actually another method that
the boarder has, and the event is going to
| | 02:46 | be MouseEvent.CLICK.
| | 02:49 | As I type MouseEvent, you'll to start
to see MouseEvent.CLICK highlighted, so
| | 02:53 | might as well type that and have
Flash write the rest of the code for you.
| | 02:56 | And then type a comma and
then type clickedBoarder.
| | 02:59 | Go down a few more lines and create
the event handler function, so function
| | 03:06 | clickedBoarder, some parentheses,
inside of the parentheses, evt:MouseEvent.
| | 03:15 | After the parentheses, type :void, all
lowercase, wrap boarder.gotoAndPlay(2)
| | 03:21 | inside of the curly braces.
| | 03:22 | So now this code will be executed only
when you click on the boarder, because
| | 03:26 | we've attached this
function to an eventListener.
| | 03:29 | So we'll test the movie, click
on the boarder, watch him fall.
| | 03:37 | So using dot syntax, you can access
methods of an object and get all the code
| | 03:42 | hinting you need to run methods without errors.
| | Collapse this transcript |
| Accessing the parents, children, and grandchildren of objects| 00:00 | Your knowledge of the display list can
be used to access any object in Flash,
| | 00:05 | from virtually any location.
| | 00:07 | One example of that is the parent
property, which allows you to communicate
| | 00:11 | backwards from one object to its
parent display object container.
| | 00:15 | On the Stage here, I have
boarder_mc, which is an animation.
| | 00:20 | If I double-click on that movie
clip, you can see the animation.
| | 00:26 | Inside of that movie clip, on frame 1,
I have an instance called boarderSolo.
| | 00:32 | If I double-click on that instance,
I'll enter a movie clip called boarderSolo.
| | 00:36 | You'll see that I have the basic
bitmap shape with the boarder and then the
| | 00:40 | skateboard inside of a movie clip,
with an instance name of board.
| | 00:44 | So let's say I want to
communicate to the skateboard.
| | 00:48 | In order to do that, I'll need to
communicate to the boarder itself, which is
| | 00:52 | inside of the boarder_mc movie clip.
| | 00:55 | Let's go to the first keyframe of the
actions layer, and open up the Actions panel.
| | 01:00 | In here, under the line of code
where I created the variable, I'll type
| | 01:05 | boarder.boarderSolo.alpha = .25;
| | 01:14 | so to access the solo boarder,
I can simply use dot syntax.
| | 01:19 | So boarder, which is the outside
boarder or boarder_mc.boardersSolo, is the
| | 01:25 | boarder itself - not the animation.
Then I can tweak that by modifying its
| | 01:30 | properties with dot syntax.
| | 01:31 | So let's test the movie.
| | 01:33 | Now we see the boarder's alpha is .25, but
watch when I click the boarder. The alpha goes up.
| | 01:39 | Take a second to think about why that is.
| | 01:41 | Are we modifying the boarder's alpha,
| | 01:44 | or are we modifying the solo boarder's alpha?
| | 01:48 | Look at the code. boarder, which
is boarder_mc, or the animation,
| | 01:52 | .boarderSolo.alpha, so we are
only modifying that first frame.
| | 01:57 | So we are modifying the instance
on that first frame of boarder_mc.
| | 02:03 | Now take a second to think about how
you would access the skateboard, if you
| | 02:07 | only wanted to modify the skateboard.
| | 02:09 | Just like accessing the solo boarder, you
can access the skateboard through dot syntax.
| | 02:15 | So after boarderSolo, type .board,
and you can modify its properties.
| | 02:21 | So let's see what happens when we
set the x position of the board to 0.
| | 02:27 | I'll test the movie, and it appears
that the code is not working, because the
| | 02:33 | board doesn't seem to be moved;
| | 02:36 | however, the board's position is at 0,
relative to its parent movie clip.
| | 02:43 | So if I want to move it backwards,
I'd have to give it a negative value.
| | 02:50 | So I could then type -25, test the movie, and
the board has shifted 25 pixels to the left.
| | 02:59 | So using dot syntax, you can
modify child and grandchild elements,
| | 03:04 | but what if you want to modify a parent element?
| | 03:08 | Let's look at how to do that.
| | 03:09 | At the bottom of my code, I created a
simple function called restart. This would
| | 03:15 | represent restarting the game.
| | 03:17 | All it does is it puts the boarder on the
first frame and then sets his x position to 0.
| | 03:23 | Let's say we wanted to run this
function from inside of the boarder.
| | 03:29 | Let's take a look at why
you might want to do that.
| | 03:31 | Close the Actions panel and double-click
the boarder on Stage to enter its Timeline.
| | 03:37 | So let's say you click on the boarder
and he plays his closing animation
| | 03:42 | where he falls down.
| | 03:44 | Once the animation is complete, you
want to send the boarder back to his
| | 03:48 | original state by running that
restart function on the main Timeline.
| | 03:53 | So here's an instance where you want
some code to trigger after an animation has
| | 03:57 | played, so it makes sense to put code
inside of the Timeline of a movie clip.
| | 04:02 | I'll select the last keyframe with the
actions layer, and open up the Actions
| | 04:06 | panel. Make sure you're
inside of that boarder movie clip.
| | 04:09 | So that first frame says stop.
| | 04:11 | Now to communicate to an object's parent,
all you need to do is use the Parent command.
| | 04:17 | So type parent.restart();.
| | 04:20 | Now by itself, this code may not work.
| | 04:23 | So if I test the movie, I get an error.
| | 04:28 | Flash tells me, Call to a
possibly undefined method restart.
| | 04:33 | Let me explain why this is happening.
| | 04:37 | Flash knows who the parent of this object is;
| | 04:40 | it's the main Timeline.
| | 04:42 | Flash also knows that there is a
restart function on the main Timeline.
| | 04:46 | Here's the problem:
| | 04:47 | the datatype for this parent
property is not a movie clip;
| | 04:52 | it is the display object, and a display
object does not have a function called
| | 04:58 | restart built-into it.
| | 05:00 | So what I need do is tell Flash to
treat this as a different type of object.
| | 05:05 | So before parent, I'll type Object, with a
capital O, and wrap parent in parentheses.
| | 05:11 | Object is basically a generic object
that can have any properties and methods.
| | 05:16 | So this is the easiest way to do this.
| | 05:18 | Type Object, capital O, wrap parent
in parentheses and after the close
| | 05:21 | parenthesis, type .restart. Test the movie.
| | 05:25 | You don't get any errors.
| | 05:27 | If you click the boarder, he'll fall off, then
return to the left edge of the Stage on frame 1.
| | 05:35 | So this technique where we wrapped
parent inside of Object and told Flash to
| | 05:39 | treat it as a different type
of data is called Typecasting.
| | 05:42 | So using the parent property with the
Typecasting technique, you can access any
| | 05:47 | object from within any
timeline of your application.
| | Collapse this transcript |
| Creating instances from Library movie clips using ActionScript| 00:00 | Many types of apps, especially
games, need to be able to re-spawn or
| | 00:04 | clone different assets.
| | 00:06 | In order to do this in Flash, you
have to create new instances from
| | 00:09 | library symbols at run time.
| | 00:11 | So let's imagine a scenario - go ahead,
and test the movie here - and we have
| | 00:15 | this skateboarding game.
| | 00:16 | Let's say as a skateboarder is going
through the town, the whole background is
| | 00:20 | scrolling to the left, and as the
boarder goes to the town, there are going to
| | 00:25 | be little obstacles that come up, like trashcans.
| | 00:27 | One way to create the obstacles is to
build them in Flash and have them be part
| | 00:34 | of your FLA file from the beginning.
| | 00:35 | However, that creates more objects in
memory that you don't need because they
| | 00:39 | won't always be on the Stage.
| | 00:41 | The most effective way to create a game
is to have objects on the Stage appear
| | 00:47 | immediately when you need them, and delete
them as soon as you don't need them anymore.
| | 00:52 | The experience is the same to the user,
but as you program the game, you get
| | 00:56 | much better performance.
| | 00:58 | So the thing we want to do is add
trashcans to the game from the library, while
| | 01:03 | the Flash movie is playing.
| | 01:04 | That way we don't have to have them
taking up more memory than is necessary.
| | 01:09 | The first step to do that is
to create a MovieClip symbol.
| | 01:12 | So I already have one called TrashCan.
| | 01:14 | If I right-click TrashCan, and then
choose Properties, I can tell Flash that I'm
| | 01:21 | going to want to create new
instances of this symbol using ActionScript.
| | 01:25 | To do that, make sure you're in Advanced mode.
| | 01:28 | You may have to click the
Advanced button at the bottom-left of the
| | 01:31 | Symbol Properties window.
| | 01:32 | So you should see this Expanded View here.
| | 01:35 | Simply click the Export for
ActionScript box in the Linkage area.
| | 01:39 | In the Class field, you'll see
the name of the MovieClip symbol.
| | 01:43 | This is the name that you're going to
refer to this object by when you create
| | 01:47 | it with ActionScript.
| | 01:48 | The Base class says that
this is essentially a movie clip.
| | 01:53 | Now, we're going to get into a lot more
detail about what Class and Base Class
| | 01:57 | mean later on, but for now just know,
you just need to remember TrashCan.
| | 02:02 | So click OK. Flash will give you
messages that says, A definition to for this
| | 02:06 | class could not be found in the classpath.
| | 02:08 | It's not an error message;
| | 02:09 | it's just a warning
message, so I'll just click OK.
| | 02:12 | Again, we'll talk more about how that works
and why you got that warning message later on.
| | 02:16 | And then look into library and see
that there is something under Linkage for
| | 02:20 | your TrashCan MovieClip.
| | 02:22 | So Flash is telling me this is
exported for ActionScript as TrashCan. So it's
| | 02:27 | nice and easy to remember because it's
the same name as my MovieClip symbol.
| | 02:29 | Let's go over to the first keyframe of
the actions layer, and go ahead and open
| | 02:33 | up the Actions panel.
| | 02:34 | Create a variable called can
and datatype it to TrashCan.
| | 02:39 | You can also datatype it to a
movie clip since it's basically a descendent of a
| | 02:44 | movie clip, but for this purpose I
want to datatype it as a TrashCan.
| | 02:48 | So click OK and then type new,
space, TrashCan, capital T, capital C;
| | 02:55 | and parentheses and a semicolon.
| | 02:57 | At this point, if you want, you can test the
movie to make sure you don't have any errors.
| | 03:00 | It looks like everything is fine here.
| | 03:04 | And now what I'm going to do is
place the object on the Stage.
| | 03:09 | To do that, use a method called Add Child.
| | 03:13 | Type add, and then Child, with a
capital C, and in the parentheses, type can.
| | 03:20 | This adds an object to the Stage,
| | 03:23 | so it's going to put the
can on the main Timeline.
| | 03:25 | We'll talk more about
the Add Child method later.
| | 03:29 | See the can at the top-left of the Stage?
| | 03:32 | That's the can that we pulled out
of the Library using ActionScript.
| | 03:36 | Now let's just place it in a normal
spot, so it's not floating in the air.
| | 03:40 | The reason why it's floating in the
air is because it goes to 0,0 coordinate
| | 03:46 | automatically when you put addChild.
| | 03:48 | So let's set its x and
y position: can.x equals 577
| | 03:53 | and can.y equals 493.
| | 03:57 | In case you're wondering where I got
these numbers, I put the can where I wanted
| | 04:01 | it, and then I just jotted the
numbers down in the Properties panel.
| | 04:05 | So, test the movie, and there
is the trashcan right there.
| | 04:09 | If you remember, the trashcan is not on
the Stage in that position, so it's been
| | 04:15 | placed there using ActionScript code.
| | 04:18 | So using this technique, you can
draw objects out of the library as you
| | 04:22 | need them.
| | Collapse this transcript |
| Adding objects to the stage and changing parents with the addChild method| 00:00 | Placing objects on the Stage is an
essential skill when working with AS3
| | 00:04 | in Flash Professional.
| | 00:06 | Sometimes, however, you will want to
move an object into a different container
| | 00:10 | once you have already placed it in one.
| | 00:12 | For example, here I'm creating a trashcan
from the library and placing it on the Stage.
| | 00:19 | I'm adding it as a child object of the Stage.
| | 00:22 | But what if I started
creating more of these trashcans?
| | 00:26 | For example, I could copy and paste
this code, change the name of can, to can1
| | 00:38 | and change the position
of the can to 677 pixels.
| | 00:43 | So I test the movie, and I have two cans.
| | 00:46 | What if I'm going to have
many cans, like a hundred cans?
| | 00:50 | It might make sense to start
placing them inside of a container.
| | 00:53 | Let's take a look at how to do that.
| | 00:56 | Above all this code, I'm
going to create a new variable.
| | 00:59 | I'm going to call this 'container.'
I'm going to datatype it to a sprite.
| | 01:03 | Now a sprite might be a new concept to
you, but it's actually, fairly simple.
| | 01:07 | Think of a sprite as a
movie clip with only one frame.
| | 01:11 | That's all there is to it.
| | 01:13 | It's a movie clip, but it takes
up less memory in the Flash Player.
| | 01:17 | It's also ActionScript only.
| | 01:19 | So, I'm going to create a new sprite here.
| | 01:21 | So container, datatype it to a sprite.
| | 01:24 | Space, equals, space, new, space, Sprite,
with a capital S. Some open and close
| | 01:30 | parenthesis and a semicolon.
| | 01:31 | So that creates a new, empty sprite,
which is basically like an empty movie clip.
| | 01:36 | So, now what I'll do is I will
place the container on the Stage.
| | 01:42 | So I'll use the addChild method.
| | 01:44 | Remember that if you forget to use the
addChild method, you'll never see your
| | 01:48 | object on the Stage.
| | 01:49 | Creating a new instance of an
object simply creates it in memory.
| | 01:53 | addChild is what allows you to see
the object, so you need to put it in
| | 01:57 | some sort of Timeline.
| | 01:59 | So, I'm going to add the container to
the Stage, and then I'm going to set this
| | 02:03 | container's x and y equal to
577 for x, and container.y = 493.
| | 02:14 | Notice that they are the same
coordinates that I used for the original trashcan.
| | 02:18 | Now I'm going to delete the coordinates
for the original trashcan, and I'm going
| | 02:24 | to delete the coordinates for can1.
| | 02:25 | Now let's test the movie.
| | 02:29 | So I can't see the sprite container,
but it's in this area over here.
| | 02:35 | It's invisible because it's an empty
container, with nothing inside of it.
| | 02:39 | I do see the trashcans at the left of the Stage.
| | 02:42 | Now, if I want to put the trashcans
inside of the container, all I have to do
| | 02:49 | is have the container be the one that's
adding the child, instead of the main Timeline.
| | 02:53 | So, right before addChild(can), I
can type container.addChild(can).
| | 02:59 | So I can do that in both instances.
| | 03:04 | For the second can, which is can1, I'll
set its x-position to 100, can1.x =100.
| | 03:12 | Remember these coordinates are going
to be relative to the container object.
| | 03:16 | So a 0,0 position will start at
the container's x and y position.
| | 03:21 | So test the movie, and there are the trashcans.
| | 03:25 | The thing that's great about this is
when I move the container, I can also
| | 03:30 | move the trashcans.
| | 03:31 | So at the bottom of my code, let's
say I want to move the container 100
| | 03:33 | pixels to the left,
| | 03:35 | I could type container.x -=.
| | 03:39 | This is a shorthand way of subtracting a
value from its current position, = 100.
| | 03:46 | So, it's going to take the position of the
container and shift it 100 pixels to the left.
| | 03:51 | So test the movie, and you can see
the container is all the way over there.
| | 03:55 | For a more dramatic effect, I'll put in 500.
| | 03:59 | The trashcans are over there.
| | 04:01 | So this is an easy way to stay
organized because I can move all of my trashcans
| | 04:05 | at the same pace, because
they're in the same container.
| | 04:08 | Now there is one more thing I want to look at.
| | 04:11 | You can actually reparent a child object
if you've already added it to the Stage.
| | 04:17 | So let's take this code, container.addChild
(can1), and copy and paste it a few lines down.
| | 04:24 | I'm going to temporarily disable the
line of code that I pasted by pressing two
| | 04:29 | forward slashes at the beginning of the line.
| | 04:32 | So, it'll turn gray, and
Flash will not process that code.
| | 04:35 | I'm going to erase container.before
addChild, and then we'll test the movie.
| | 04:42 | So can1 is 100 pixels from the left
edge of the Stage, and it is now a child of
| | 04:47 | the main Timeline, unlike the original
can that's a child of the container movie
| | 04:53 | clip, which you can tell because
it's at the bottom-right of the Stage.
| | 04:59 | Now if I uncomment this line of code
and Flash processes it, you'll see that
| | 05:04 | the can goes from being a child of the main
Timeline to being a child of the container.
| | 05:11 | So test the movie, and now the
second can is a child of the container.
| | 05:16 | Notice that we don't see it move from
the one place to another because all this
| | 05:21 | code is processed before the frame is drawn.
| | 05:24 | So if you ever need to, you can
reparent a child object to another parent
| | 05:28 | by simply calling the new parent's addChild
method and passing in the new child object.
| | 05:35 | So to recap, the addChild method
allows you to place a display object, or any
| | 05:40 | other visual object, inside
of a display object container.
| | Collapse this transcript |
| Removing objects from the stage with the removeChild method| 00:00 | When you destroy an enemy object in
the game or click to close a menu in one
| | 00:05 | of your apps, you may need to free those
objects from memory to increase performance.
| | 00:09 | While you can't control which objects
Flash deletes from memory, you can control
| | 00:14 | which objects are
eligible for garbage collection.
| | 00:17 | Garbage collection refers to when
Flash incrementally cleans up memory.
| | 00:23 | When your movie begins to take up too
much memory, now this 'too much' is not
| | 00:28 | really defined by Flash or Adobe,
Flash will do something called garbage
| | 00:33 | collection, and take objects that are
no longer being used and throw them out,
| | 00:38 | deleting them from memory.
| | 00:40 | So in order to make sure that
objects get deleted when Flash does
| | 00:44 | garbage collection, you need to
make sure the objects are eligible for
| | 00:48 | garbage collection.
| | 00:49 | So on this Stage here I have
boarder_mc and a movie clip called can.
| | 00:55 | Now, boarder_mc has an animation that
starts on frame 2, and the frame 1 is stopped.
| | 01:01 | Let's go to the first keyframe in the
actions layer and open up the Actions panel.
| | 01:07 | So the boarder can be controlled with
the keyboard, and in that keyboard block
| | 01:12 | of code, I checked to see if
the boarder is touching the can.
| | 01:17 | That's a method called hitTestObject,
so boarder_mc.hitTestObject, capital T,
| | 01:25 | capital O, and in parentheses (can).
| | 01:28 | So if the boarder is touching the can,
then run the block of code in curly
| | 01:32 | braces, which will play at the
second frame of the boarder movie clip.
| | 01:35 | Let's see how that looks.
| | 01:38 | So I'll move the boarder to the right.
| | 01:41 | When it hits the trashcan, I'll
release my finger off the keyboard and see
| | 01:45 | him animate downward.
| | 01:47 | Let's say you wanted to remove
the trashcan when he hits it.
| | 01:52 | Go back to the code, and below that line of
code, type removeChild, can, in parentheses.
| | 02:00 | Make sure child has a capital C, and
that can is spelt just like it is in the
| | 02:06 | instance name on the Stage.
| | 02:08 | If you test the movie now, you may see errors.
| | 02:15 | So, the animation happens, but in the
Output window, you'll see that there
| | 02:19 | is something wrong.
| | 02:26 | Everything says that a supply
DisplayObject must be a child of the caller.
| | 02:33 | Now, what that's referring
to is the removeChild call.
| | 02:38 | Once we take the can out of the
display list, we can no longer remove it
| | 02:42 | from the display list.
| | 02:43 | So we've got to make sure this code stops
running once it executes the first time.
| | 02:49 | To do that, I'll go in to tell the
Stage to stop listening for keyboard events.
| | 02:53 | So, we'll scroll up in my code,
copy line of code where I add the
| | 03:02 | EventListener to the Stage -
| | 03:03 | that's Command+C or Ctrl+C, and then
right below removeChild(can), I'm going to
| | 03:08 | paste the code I just copied that
says addEventListener, and change the
| | 03:12 | word 'add' to 'remove.'
| | 03:15 | That will stop the Stage from listening
to keyboard events, and responding to them.
| | 03:20 | So when the boarder hits
the can, the can will disappear,
| | 03:23 | the skateboarder will fall over, and the
keyboard interactivity will be removed.
| | 03:29 | That should not give us any more errors.
| | 03:31 | So let's test the movie, drive over to the
trash can, and the skateboarder falls over.
| | 03:37 | So in order to make an object
eligible for garbage collection, you'll need
| | 03:41 | to take it out of the display
list, which you can do by using the
| | 03:44 | removeChild method.
| | 03:45 | In addition, you'll have to make sure
that any code that references that object,
| | 03:50 | like the code I have here and here,
is no longer executed, by removing the
| | 03:56 | appropriate event listeners.
| | 03:58 | You also have to make sure there are no
event listeners attached to that object.
| | 04:02 | Finally, make sure that object is
taken out of any arrays that it may be in.
| | 04:07 | If you do all these steps, your object
will be eligible for garbage collection
| | 04:11 | and will be deleted when that happens.
| | 04:13 | That way, your applications can be optimized.
| | Collapse this transcript |
| Using the numChildren property to loop through a container's child objects| 00:00 | Sometimes you may want to perform
an action on each child object in a
| | 00:04 | display object container.
| | 00:06 | Using arrays and for loops,
it's a simple process.
| | 00:10 | Let's take these trashcans on Stage here.
| | 00:12 | Notice that they're in a
movie clip called container.
| | 00:15 | If I double-click container,
I can enter its Timeline.
| | 00:19 | Notice that none of these trashcans
have an instance name, but I still want to
| | 00:25 | align them to the zero position, vertically.
| | 00:29 | Let's take a look at how that is possible.
| | 00:31 | This is a trick that's going to work,
whether or not objects have an instance name.
| | 00:36 | Let's select the first keyframe of the
actions layer, and open up the Actions panel.
| | 00:40 | I'll start by creating a for Loop.
| | 00:44 | Remember, it's for, and then
parentheses, and curly braces.
| | 00:50 | Inside of the for Loop,
type var space i, colon uint; -
| | 00:53 | remember that's a positive integer,
equals zero, semicolon, space, i, less than, and space.
| | 01:04 | We'll stop there for just a second.
| | 01:06 | Now here, we want to run a loop for
each child inside of the container object.
| | 01:12 | That way it will work whether or not we add
or subtract objects inside of the container.
| | 01:18 | So to get the number of
children inside the container, we type
| | 01:22 | container.numChildren with a capital
C, semicolon and the space, and then i++.
| | 01:32 | The great thing about the numChildren
property and using numbers in a loop
| | 01:37 | is that you can actually access each child
in a display object container by a number.
| | 01:43 | Within each display object
container, there is layering.
| | 01:46 | Each time a new child is added, it's
added in front of the highest child before it.
| | 01:52 | So we have sort of a stack going on.
| | 01:55 | It's just like the layers in Flash.
| | 01:57 | So each time you add a child,
it goes on top of the one before it.
| | 02:00 | So, to access the children, type getChildAt.
| | 02:06 | So getChild, with capital C, At with
capital A, and then parentheses and then
| | 02:13 | just pass in i in the parentheses.
| | 02:15 | Since we're looking for children inside
of the container, we're going to need to
| | 02:19 | add a container before getChildAt.
| | 02:21 | So container.getChildAt(i);.
| | 02:25 | So this is how we reference all of the
children inside the container, through
| | 02:29 | their index numbers.
| | 02:30 | Now after the close parenthesis, you
can type any property or method you
| | 02:34 | want, using dot syntax.
| | 02:36 | So dot, y, space, equals, space, zero.
| | 02:42 | So even though these objects don't
have instance names, they still exist, and
| | 02:46 | you can still reference
them through ActionScript.
| | 02:48 | Let's see how it works.
| | 02:50 | Test the movie, and all
the trashcans or aligned.
| | 02:53 | You'll notice that if I move the
container over, double-click it, and Option+Drag or
| | 02:58 | Alt+Drag to create more
trashcans, the code will not break.
| | 03:02 | I'll test the movie again, and
all the trashcans are aligned.
| | 03:07 | So using the numChildren property
inside of a for Loop, and the getChildAt
| | 03:12 | method, you can reference any object,
even if it doesn't have an instance name.
| | Collapse this transcript |
| Using the getChildByName method| 00:00 | Occasionally, you'll run into
situations where you cannot access a child
| | 00:04 | object through dot syntax.
| | 00:06 | This becomes more common as you work
with ActionScript classes in object-
| | 00:10 | oriented programming, which
we will look at later on.
| | 00:13 | In order to keep your code from
breaking, you should always be prepared
| | 00:16 | for those situations.
| | 00:18 | So on the Stage, I have boarder_mc.
| | 00:22 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:26 | Now, of course we can access this
object directly by typing boarder_mc. We also
| | 00:32 | look at storing the boarder in a variable.
| | 00:35 | Another option is to use a
method called getChildByName.
| | 00:38 | So I'll type var, space, and then
boarder, datatype it to a MovieClip.
| | 00:45 | I'll set it equal to getChildByName, and in
parentheses type some quotes, and then type boarder_mc.
| | 00:57 | When you use getChildByName, you've got
to make sure you're using a string, which
| | 01:00 | is going to be in quotes and green.
| | 01:02 | So we're referencing the object by its name.
| | 01:07 | Now, if you test the movie, you might
see an error because Flash is trying
| | 01:12 | to convert the object that comes from
getChildByName into a movie clip, and
| | 01:18 | it's having trouble.
| | 01:19 | So if you look in the Compiler
Errors window, you'll see an error.
| | 01:23 | If you read into it, it basically says
Flash is trying to treat a display object
| | 01:28 | as a movie clip and something is going wrong.
| | 01:30 | So let's go back to our
code and see what we can do.
| | 01:33 | You might remember earlier when we had
to typecast an object as another type of
| | 01:39 | object so that we didn't have an error.
| | 01:41 | That's the same thing we have to do here.
| | 01:43 | Right before getChildByName, we are
going to tell Flash to treat this data as a
| | 01:48 | movie clip because child objects, by
default, come in as display objects.
| | 01:55 | So when you run this method, Flash is going
to give you what it thinks is a display object.
| | 02:00 | So you want to tell Flash to treat
that display object as a movie clip.
| | 02:04 | So I'll type MovieClip;
| | 02:07 | capital M, capital C, and then wrap the
getChildByName and all the parentheses
| | 02:14 | inside of another set of parentheses.
| | 02:15 | So you should have two close
parentheses at the end.
| | 02:20 | So now if I test the movie, I
shouldn't receive any errors.
| | 02:24 | So now if I want to manipulate the
boarder, I can do that through that boarder
| | 02:28 | property I just created. So boarder.x =0.
| | 02:32 | I'll test the movie, and it works just fine.
| | 02:36 | Most of the time when you're working in
Flash you won't need to use this method,
| | 02:41 | so you'll be okay just by typing boarder_mc;
| | 02:44 | however, when you get into more
advanced ActionScript and you start using
| | 02:48 | external files, it will become a necessity
to use this technique to access your objects.
| | 02:55 | So using the getChildByName method,
you can access child objects using an
| | 03:00 | object's instance name without having
to worry whether Flash created custom
| | 03:04 | variables behind the scenes.
| | Collapse this transcript |
|
|
4. Working with TimelinesUnderstanding timelines| 00:00 | Timelines are somewhat infamous in Flash,
and many programmers refuse to write
| | 00:04 | code unless all assets can be
contained within a single frame.
| | 00:08 | While simultaneously working with
ActionScript in Timelines can be tricky, with
| | 00:13 | proper planning, you will be able to set up
your Timelines and code to best work together.
| | 00:17 | Let's take a look at some examples
of why Timelines can be frustrating.
| | 00:23 | I'll play the animation here.
| | 00:27 | So we have some text on the screen, then it
fades out, and a bear walks onto the Stage.
| | 00:33 | This is all controlled through motion tweens.
| | 00:36 | Let's say we wanted to communicate
with the bear through ActionScript.
| | 00:40 | So we'll close the window and go to the
first keyframe of the actions layer on
| | 00:44 | the main Timeline and open up the Actions panel.
| | 00:48 | Rather than navigating through my
whole file, I can find the bear instance
| | 00:52 | name, or give the bear an instance name,
through the Insert Target Path button
| | 00:57 | in the Actions panel.
| | 00:58 | I'll click that button, click on main_mc,
select BearWalking, and then it says,
| | 01:07 | "Instance name required to
use this object as a target."
| | 01:10 | So I'll click Rename.
| | 01:12 | Now I will give it an instance name of 'bear.'
| | 01:13 | I'll click OK, and now it has an instance name.
| | 01:18 | If I click OK, then Flash will
actually write the code to communicate with
| | 01:24 | that object for me.
| | 01:26 | I don't need object this there, so I'll just
delete that, and I will have main_mc.bear.
| | 01:35 | So let's say I want to put its x
position at zero, so you can type .x = 0.
| | 01:40 | Now I test the movie, and I get an error.
| | 01:43 | The reason why I get an error, it's
because if you look at the Timeline, you'll
| | 01:49 | see there is nothing on the main layer.
And if I scroll to frame 100, you will
| | 01:56 | see that the main layer
is what contains main_mc.
| | 01:58 | So I am trying to communicate
with an object that doesn't exist.
| | 02:03 | In order to communicate with that object,
I need to put the Timeline code on a
| | 02:08 | frame where the object exists.
| | 02:12 | So I'll go to frame 1, open up the
Actions panel, cut the code using Command+X
| | 02:18 | or Ctrl+X, move to frame 100, select
that keyframe of the actions layer, open up
| | 02:27 | the Actions panel and paste the code
with Command+V or Ctrl+V. Now when I test
| | 02:31 | the movie, after the text fades out,
you'll see the bear can be affected by
| | 02:36 | ActionScript, and there he is,
on the left side of the screen.
| | 02:40 | If you keep watching, you'll notice the
bear moves over to the left and walks in again.
| | 02:46 | Here is why that happens.
| | 02:50 | Look at my keyframes in the Timeline.
| | 02:52 | I have one keyframe on the main layer
here, and then on frame 145, there is
| | 02:59 | another keyframe on that same layer.
| | 03:03 | So when that keyframe hits, that change
that I made to the bear gets reset, and
| | 03:09 | the bear then walks in.
| | 03:12 | Also notice that modifying the bear
with ActionScript completely destroyed the
| | 03:17 | animation that I created.
| | 03:20 | So playing with Timelines,
again, can be very tricky.
| | 03:24 | You need to be very precise with how
you set up your FLA files so that you can
| | 03:29 | communicate effectively.
| | 03:31 | One way you can do that is to keep
objects that you are going to need to
| | 03:36 | communicate with in one frame.
| | 03:40 | So you have one keyframe, and you
manipulate the object only with ActionScript.
| | 03:46 | If you have to have multiple
keyframes, then maybe you can put different
| | 03:51 | ActionScript for each keyframe
and have the code reapply.
| | 03:56 | In some instances, you are going to
have to get really creative to pull it off.
| | 04:01 | I don't say this to scare you away from
working with Timelines, but you should
| | 04:04 | know what you're dealing with.
| | 04:06 | Now that you know potential problems of
working with Timelines, make sure to set
| | 04:10 | up all of your Timelines appropriately
so you can best integrate interactivity.
| | Collapse this transcript |
| Using common timeline navigation methods | 00:00 | There are many ways to navigate through
a Timeline, but some are highly useful
| | 00:04 | and incredibly common in ActionScript 3.
| | 00:08 | On the Stage here, I have several elements.
| | 00:10 | I have an animation contained in main_
mc, which if I double-click, you can
| | 00:15 | preview that its Timeline is
relatively simple. The bear stays stagnant for a
| | 00:20 | few frames, and then he walks on the Stage,
| | 00:22 | eats a fish, and walks off.
| | 00:27 | How the animation is set up is
irrelevant for this exercise.
| | 00:30 | We are just concerned about
controlling the Timeline of that movie clip.
| | 00:34 | Then I have back_btn, playPause_mc;
| | 00:42 | capital P for pause, and then forward_btn.
| | 00:46 | playPause_mc contains two buttons:
| | 00:50 | one called play_btn and
then one called pause_btn.
| | 00:57 | I have already written some ActionScript code,
| | 01:04 | so let's take a look at it,
| | 01:06 | importing the MouseEvents and adding
EventListeners to all of the buttons on the Stage.
| | 01:10 | We've already created the event
handler functions, and I've also hidden the
| | 01:17 | Pause button, since the movie clip
is going to be stopped by default.
| | 01:22 | So let's start by making the movie clip play.
| | 01:26 | Inside of the playClicked
function, I can type 'main_mc.play.'
| | 01:35 | After play, type parenthesis and then a semicolon.
| | 01:38 | So I will test the movie, and you won't
see the animation taking place until I
| | 01:45 | click the Play button.
| | 01:49 | After a few seconds, the
bear will walk onto the Stage.
| | 01:55 | So we can see that that's working.
| | 01:56 | When I click the Play button, I
also want to hide the Play button, and
| | 02:00 | reveal the Pause button.
| | 02:01 | So inside of this function, I'll type playPause,
| | 02:07 | capital P, underscore mc.
play_btn.visible = false.
| | 02:16 | This will both hide the button and
disable its interactivity.
| | 02:19 | Now I want the Pause button to show,
| | 02:25 | so I'll copy this line, paste it on the
next line, change play_btn to pause_btn,
| | 02:31 | and change the false value to true.
| | 02:35 | Now I'll test the movie, click the
Play button, and you will see the Pause
| | 02:40 | button shows, and of course,
you will see the bear walking in.
| | 02:47 | Now let's write the code for the Pause button.
| | 02:49 | Select all the code in playClicked,
copy it with Command+C or Ctrl+C, click
| | 02:55 | inside of the pauseClicked function, and
paste the code with Command+V or Ctrl+V.
| | 03:02 | In the pasted code, change play to
stop, change the first false to true, and
| | 03:10 | change true to false.
| | 03:12 | So we want to stop the Timeline.
| | 03:16 | We want to show the Play button.
| | 03:17 | We want to hide the Pause button.
Test the movie one more time.
| | 03:23 | Click the Play button to start the
animation, and once the bear comes on, click
| | 03:28 | the Pause button to watch the bear stop.
| | 03:30 | So we can pause the movie, and we
can click Play again to have it play;
| | 03:35 | it almost got that fish.
| | 03:42 | Now let's add the interactivity to skip
forward and backward one frame at a time.
| | 03:47 | Here what I am going to do is copy
the code that shows the Play button and
| | 03:53 | hides the Pause button.
| | 03:56 | This is because when I click to go to
the next or the previous frame, the movie
| | 04:00 | is actually going to pause anyway.
| | 04:02 | So I want to treat it like
I click the Pause button.
| | 04:04 | So copy those two lines, paste them
inside of backClicked and forwardClicked,
| | 04:13 | and then inside of backClicked, above the two
lines that you pasted, type main_mc.prevFrame,
| | 04:20 | p-r-e-v, short for previous, Frame,
capital F, some parenthesis and a semicolon.
| | 04:29 | So this will move back one frame, and
we can just copy and paste this line of
| | 04:34 | code into forwardClicked, above the
rest of the code that's already in there,
| | 04:40 | change prev to next, so it's nextFrame,
| | 04:44 | capital F. Test the movie.
| | 04:47 | You can click the Play button to start
the animation. Once the bear comes on
| | 04:56 | the Stage, you can press Forward button
to advance in frames or the Back button
| | 05:03 | to step back in frames. Then you can press
the Play button to continue the animation.
| | 05:15 | So you've seen that you can navigate
through the Timelines of various objects,
| | 05:20 | including animations, by using
several built-in methods, like nextFrame,
| | 05:25 | prevFrame, Play, and Stop, and you can
control the visibility and interactivity
| | 05:31 | of objects using the visible property.
| | Collapse this transcript |
| Using the currentFrame and totalFrames properties| 00:00 | Have you ever wanted to track the playback
of a SWF file as a percentage, like a video?
| | 00:06 | You can do that using simple
math and some built-in properties.
| | 00:10 | On the Stage, I have my main
animation, which is main_mc, and then I have
| | 00:16 | playPaused_mc that controls the
playing and pausing of the animation.
| | 00:21 | I am going to have prog_mc.
| | 00:24 | That's a progress bar.
| | 00:25 | By double-clicking, you can see that
its Timeline is a 100-frame animation.
| | 00:34 | As a side note, you'll see that I use
the classic tween instead of a motion
| | 00:37 | tween; sometimes I just do that
because it's faster for me, but there is no
| | 00:41 | particular reason why you would
need to use a classic tween here.
| | 00:45 | On the first frame, I have a stop action,
and that's all there is to that movie.
| | 00:53 | What we are going to do is track the
progress of the main animation as a
| | 00:59 | percentage, and tell the prog movie
clip to go to the frame that corresponds to
| | 01:05 | the percent that's played in the movie.
| | 01:07 | So let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 01:13 | Inside of playClicked, below the last
line of code that's in there, I am going
| | 01:19 | to add an EventListener to main_mc.
Type main_mc.addEventListener, capital E for
| | 01:28 | Event, capital L for Listener; it should
be blue after you type it. Then in the
| | 01:33 | parentheses, I am going to type
the event that I want to listen for.
| | 01:38 | Now this event is called ENTER_FRAME.
| | 01:41 | It runs every time your
movie enters a new frame.
| | 01:45 | So it's executed with each frame.
| | 01:50 | That's the perfect interval to track
the playback progress for this animation.
| | 01:55 | So the ENTER_FRAME event is Event with a
capital E Event, .ENTER, in all caps, _FRAME, also in all caps.
| | 02:05 | This should all be blue.
| | 02:06 | So type a comma, and then after
that, we'll type trackProgress.
| | 02:15 | So that will be the
function that it will create.
| | 02:18 | Now before we go on, I want to take this
line of code, copy it with Command+C or
| | 02:23 | Ctrl+C, and then paste it at the
bottom of the pauseClicked function.
| | 02:29 | Now the reason I want to do this is
because I want to remove the EventListener.
| | 02:34 | The ENTER_FRAME event runs very
frequently and takes up memory in the Flash player.
| | 02:41 | So when you don't need to run it, like when
the movie is paused, it's best to not use it all.
| | 02:47 | So let's change add to remove in the
pasted code, and that way we won't use
| | 02:54 | memory when we don't need to.
| | 02:57 | Below the pauseClicked function,
let's define the trackProgress function.
| | 03:01 | So type function trackProgress with
a capital P, some parentheses, and inside of
| | 03:11 | the parentheses we need to receive an
event object, so type evt:Event with a capital E. After the
| | 03:18 | close parenthesis, type colon, void,
| | 03:21 | all lowercase, then type some curly braces.
| | 03:27 | So I have open and close curly
braces, and I am indenting here.
| | 03:33 | To track the progress, we
are going to need two things:
| | 03:37 | the current frame that the movie clip
is on and the total number of frames
| | 03:43 | the movie clip has.
| | 03:45 | So in the trackProgress function, we
are going to create a variable called
| | 03:51 | percent. And this is going to be a Number,
capital N. I am going to set it equal
| | 04:01 | to the percentage of the
movie that has been played.
| | 04:04 | To find the percentage, we are going to
take the current frame that the movie is
| | 04:09 | on and divide that number by the
total number of frames in the movie.
| | 04:14 | That will give us a number between 0
and 1 that will represent the percentage,
| | 04:21 | and then we can multiply that number
by 100 to get a whole number percentage.
| | 04:29 | So let's see how that works.
| | 04:32 | Type main_mc.currentFrame / main_mc.totalFrames.
| | 04:47 | Before we move on, let's just trace
the value of percent to see what we get.
| | 04:55 | Test the movie and then click the Play
button and just look in the Output window.
| | 05:01 | We'll close the movie, and we'll scroll
down, and we get these values that start
| | 05:13 | off at 0.01, 0.02, 0.03, and going on and on.
| | 05:21 | So what this represents is right now
where I have highlighted 0.06 that is 6% of
| | 05:29 | the movie that's played.
| | 05:31 | So I ended at about 28% of the movie played.
| | 05:37 | So if we multiply this value by 100, by
moving that decimal point two places to
| | 05:42 | the right, then we can get a
whole number to use as a frame.
| | 05:46 | So let's go back to our code, and
we'll look at getting a whole number.
| | 05:54 | So the first I am going to do is wrap
some of this code in parentheses, and
| | 05:58 | parentheses in math, in ActionScript, work
just select like parentheses in math class.
| | 06:04 | They make sure that one process is
done before moving onto another process.
| | 06:09 | So they give this priority,
this division right here.
| | 06:12 | So I am going to take that,
| | 06:15 | I am going to multiply that value by 100
to move the decimal point, and there we
| | 06:22 | should have a number between zero and 100.
| | 06:23 | The problem is it's still
not going to be a whole number.
| | 06:27 | We need to round it off somehow.
| | 06:29 | So I'll take that and wrap this whole
thing in parentheses, so I'll have two open
| | 06:34 | parenthesis at the beginning of this
equation, and at the very beginning I am
| | 06:38 | going to type math.round, and then I am
going to delete that extra parentheses
| | 06:45 | that Flash created for me.
| | 06:46 | And what this is going to do is it's
going to take this whole number and round it
| | 06:51 | off. So instead of having 28.075,
I am just going to have 28.
| | 06:59 | So I can use this percent to correspond
to a frame in the progress bar movie clip.
| | 07:07 | So we'll go to the next line and type prog_mc.
| | 07:11 | That's the name of the
progress bar .gotoAndStop;
| | 07:16 | capital A, capital S, and in
parentheses pass in the word 'percent.'
| | 07:22 | Now let's test the movie, see what we get.
| | 07:26 | Click the Play button and watch the
playhead at the bottom of the screen track
| | 07:30 | the progress of the animation.
| | 07:32 | So you see the bear walk in, eat the
fish, and then walk out, and the whole time
| | 07:36 | you can see the progress
right at the bottom of the screen.
| | 07:39 | Notice at the end, the progress bar
goes all the way back to the beginning.
| | 07:44 | So now I'll close the preview window.
| | 07:48 | It looks like everything is working great.
| | 07:51 | So by using the current frame and
total frame properties, along with common
| | 07:55 | math equations and rounding numbers,
you can track the playback progress of an
| | 08:00 | animation.
| | Collapse this transcript |
| Controlling the timeline of an instance| 00:00 | Controlling the playback of an
animation is an important skill to have, and it
| | 00:04 | goes without saying that it's
sometimes necessary to control the Timelines of
| | 00:08 | movie clips from within other objects.
| | 00:11 | Let's take a look at the animation I have here.
| | 00:13 | I'll test the movie, and you'll see the bear
walks in, starts eating food out of the basket.
| | 00:21 | This is an information video about how
you shouldn't feed bears and how do put
| | 00:28 | your food up on a rope in a
tree to keep it away from a bear.
| | 00:33 | So, aside from looking a little bit
sloppy, this animation could be a lot better.
| | 00:37 | For example, we could change the
camera angles and have the animation cropped,
| | 00:41 | focusing on the most important parts.
| | 00:47 | So this animation is a movie clip,
and I have different keyframes in the
| | 00:52 | Timeline that are scaled and move the movie
clip to focus on key parts of the animation.
| | 01:01 | If you don't have access to the exercise
files, just create any animation inside
| | 01:06 | of a movie clip and then set different
keyframes upon the main Timeline with
| | 01:09 | different views of that movie clip.
| | 01:11 | So what we are going to do is go inside
of the movie clip and communicate back
| | 01:18 | to the main Timeline, and give it
cues as to when it should change scenes.
| | 01:23 | So, let's go to frame 1 and
double-click the movie clip.
| | 01:27 | So here you can see the animation.
| | 01:29 | Again, if you don't have exercise
files, just create any simple animation.
| | 01:33 | So, when the animation starts, we
want it to have the normal view,
| | 01:41 | in other words the full, panned-out view.
| | 01:43 | So, the bear walks in, and then the
bear starts munching on some food.
| | 01:49 | I've actually already created a
keyframe in the actions layer here.
| | 01:53 | So we'll put a command to go to the
appropriate frame on the main Timeline.
| | 02:00 | The appropriate frame, if we go
to Scene 1, is going to be frame 20;
| | 02:05 | that's this frame right here.
| | 02:06 | You can see where the keyframe is.
| | 02:08 | So, let's go back into the animation.
| | 02:10 | So I'll go up to frame one on the main
Timeline and double-click the movie clip.
| | 02:17 | Then I'll scroll to frame 103, click on
the first keyframe of the actions layer,
| | 02:23 | and open up the Actions panel.
| | 02:26 | So, we want to send a command to the parent.
| | 02:28 | I want to use gotoAndStop so the
playhead on the main Timeline isn't skipping
| | 02:32 | around in different views on its own.
| | 02:34 | I want to control all of that
from within this movie clip.
| | 02:37 | So gotoAndStop at frame 20.
| | 02:42 | The problem is the parent property, if
you remember, gives us a display object
| | 02:49 | container, which doesn't have
a property called gotoAndStop.
| | 02:53 | So we are going to Flash to
treat the parent as a movie clip.
| | 02:57 | So wrap the word in a parenthesis.
| | 03:03 | Before the parenthesis, type MovieClip,
| | 03:06 | capital M, capital C all one word.
| | 03:10 | So this code tells Flash to treat the
parent as a movie clip, which it is, and to
| | 03:18 | gotoAndStop at frame 20.
| | 03:20 | So let's the movie and see this in action.
| | 03:22 | So, when the bear gets to the basket,
the angle should change. There we have it!
| | 03:29 | So now all there is left to do is
update each one of the different
| | 03:34 | scenes appropriately.
| | 03:35 | So, let's go back to the main Timeline.
| | 03:39 | So we have a view of just the basket
at frame 41, and then it pans out a
| | 03:49 | little bit at frame 71.
| | 03:51 | So, let's go to frame 1, go back
inside the movie clip, and continue on,
| | 03:57 | previewing the animation.
| | 03:58 | So, the bear is eating out of the basket.
| | 04:03 | Then it shows the basket by itself.
| | 04:05 | So, this is a good place to show
the close-up view of the basket.
| | 04:09 | Let's select that keyframe of the
actions layer, on frame 196, open up the
| | 04:14 | Actions panel, and we'll type the same code.
| | 04:18 | Since we know where we are going from
the beginning, I'll type MovieClip to
| | 04:21 | start out with, capital M, capital C,
some parentheses, put parent inside of the
| | 04:26 | parentheses to treat the
parent as a MovieClip .gotoAndStop.
| | 04:34 | Then we'll pass in the
frame, that's going to be 41.
| | 04:37 | So, you can test the movie again.
The bear goes to the basket.
| | 04:48 | There is a close shot and then the shot
of just the basket by itself, and then
| | 04:55 | when the basket goes up, we
want to zoom out all the way.
| | 05:01 | So, let's scroll forward to frame 243.
| | 05:05 | That's where the animation starts of
the basket going up, and in that keyframe
| | 05:12 | of the actions layer, we'll do the
same thing: MovieClip(parent), after the
| | 05:22 | parenthesis .gotoAndStop, pass in
frame 1. That will give us the original shot
| | 05:28 | from the beginning.
| | 05:29 | I am just going to select this line and
copy it now, and we'll apply it one more time.
| | 05:37 | Close the Actions panel and go forward,
and the last part of the animation is the
| | 05:42 | bear reaching for the basket.
| | 05:44 | So select that keyframe of the actions
layer, which is on the frame 329, and open
| | 05:49 | up the Actions panel, paste the code
that you copied - it's Ctrl+V or Command+V
| | 05:53 | to paste - and then change the frame number to 71.
| | 06:02 | Test the movie, and you can
preview the entire animation.
| | 06:06 | So once the bear gets to the
basket, you have a close-up shot,
| | 06:11 | then a close-up shot
showing the basket by itself,
| | 06:14 | then the basket being pulled up into
the tree, and the bear trying to reach the
| | 06:20 | basket, but he can't.
| | 06:23 | So with dot syntax and some simple
built-in properties and methods, it's easy to
| | 06:28 | control Timelines of movie clips, even
if they are nested within other objects.
| | 06:33 | Using the typecasting technique by
wrapping the parent code inside of a
| | 06:37 | movie clip, you won't have any errors either.
| | Collapse this transcript |
| Detecting and navigating frame labels with ActionScript| 00:00 | One recurring theme in this title,
and many other titles for that matter,
| | 00:04 | is staying organized.
| | 00:06 | Making a project scalable is often a
crucial part in building a solid app,
| | 00:11 | and scalability is usually easiest
to maintain when using frame labels
| | 00:15 | instead of frame numbers.
| | 00:17 | Let's take a look at our file here.
| | 00:19 | On the main Timeline, I have this movie clip, and
if I double-click, it you can see its Timeline.
| | 00:26 | I have some actions telling the main
Timeline to jump to a specific frame so
| | 00:32 | that we can change the angle
of the view of this animation.
| | 00:37 | So I have this code here
MovieClip.(parent).gotoAndStop(20) and if I test the
| | 00:42 | movie, you can see an example of that.
When the bear gets to the basket the camera
| | 00:46 | sort of zooms in on the bear.
| | 00:48 | Really, what's happening is
the movie clip is scaling up.
| | 00:51 | I set that all up in
keyframes on the main Timeline.
| | 00:55 | If you are not familiar with frame
labels, frame labels enable you to
| | 00:59 | actually name a frame.
| | 01:01 | So, instead of saying go to frame 20, I
could say go to the frame where the bear
| | 01:06 | is eating out of the basket.
| | 01:08 | That way if I move around the
frame label, it doesn't matter.
| | 01:12 | So let's close this and
return the main Timeline.
| | 01:15 | Now, I am going to go to frame 20,
and I am going to create a new layer
| | 01:22 | above the frame layer.
| | 01:23 | I'll call this new layer 'labels.'
| | 01:27 | In the labels layers, I am going
to create a keyframe at frame 20.
| | 01:32 | I'll do that by pressing F7
to insert a blank keyframe.
| | 01:35 | When you're working with labels, you
should always have them on their own layer,
| | 01:40 | and use blank keyframes.
| | 01:43 | So, no art on the labels layer,
| | 01:45 | only blank keyframes.
| | 01:47 | Select frame 20 of the labels layer, and in
the Properties panel, click in the Name field.
| | 01:55 | Here, you don't want any spaces or
special characters, so type bear_eating and
| | 02:02 | then press Enter to commit the change.
| | 02:05 | You should see bear_eating in the Timeline.
| | 02:08 | Now, let's go back and change our
code to the label instead of the number.
| | 02:14 | Go to frame 1 on the main Timeline,
double-click the movie clip, move the
| | 02:20 | playhead to where the
ActionScript is, which is on line 103.
| | 02:25 | Select that keyframe of the actions
layer and open up the Actions panel.
| | 02:31 | Select 20 and delete it.
| | 02:35 | Now if you just type bear_eating right
here, just like you typed in the frame
| | 02:39 | label, you are going to get an error,
because there is no variable in Flash
| | 02:44 | that's called bear_eating.
| | 02:46 | It's not built-in to Flash, and you don't
create a variable when you create a frame label.
| | 02:52 | So, you need to refer to
frame labels as Strings.
| | 02:55 | So you should put them in quotes.
| | 03:00 | Just think of this bear_eating thing as text.
| | 03:02 | So, when you get a frame label,
you're assigning text to a frame.
| | 03:06 | Whenever you refer to an ActionScript,
you need to use a String because it's text.
| | 03:10 | So let's test the movie and see what we get.
| | 03:13 | So you can see that it works just the same.
| | 03:21 | Let's go through the rest of our frame labels
and repeat this change to get some practice.
| | 03:27 | Return to the main Timeline, and above
each keyframe in the main layer, create a
| | 03:32 | keyframe for the labels layer.
| | 03:40 | So on frame 41 in the labels layer, I
am going to select that frame, go to the
| | 03:45 | Name area in the
Properties panel, and type basket.
| | 03:49 | This is the view of just the basket.
| | 03:52 | Note, there are different types of frame labels,
| | 03:54 | so if you click that dropdown menu,
you'll see Name, Comment, and Anchor.
| | 03:58 | Names allow you to navigate with
ActionScript, like we've been doing.
| | 04:02 | Comments allow you to write comments,
just like you would in ActionScript, except
| | 04:05 | for they're in the Timeline.
| | 04:07 | So you can explain what's
happening in that part of the Timeline.
| | 04:09 | That's makes it actually really
easy to navigate around the Timeline.
| | 04:14 | Then finally, anchors allow you to
communicate with the back button in the browser.
| | 04:18 | Now, the feature does sound really exciting,
but it doesn't work with all browsers,
| | 04:22 | so I usually don't use it.
| | 04:23 | So we'll select the Name and then go to
the last frame of the labels layer that
| | 04:28 | we created, on frame 71, click in
the Name field, and type bear_reaching.
| | 04:39 | Press Enter or Return to accept the change.
| | 04:41 | You should see three named labels there.
| | 04:45 | Now, just for good measure, we can go
to the first frame, click on the first
| | 04:49 | keyframe of the labels layer, and then
click in the label field and type normal.
| | 04:53 | Now frame 1 is pretty much always going
to be the frame 1, but just in case if
| | 04:57 | ever you want to move it around,
it's wise to give it a name anyway.
| | 05:01 | So we have normal, bear_eating,
basket, and bear_reaching.
| | 05:05 | So, let's go to frame 1 and double-
click the main_mc movie clip and select the
| | 05:12 | first keyframe of the actions
layer and open up the Actions panel.
| | 05:16 | We are going to tell the main
Timeline to go to the normal frame here.
| | 05:20 | So MovieClip, in parenthesis put parent - remember, that
solves any errors that may occur from using
| | 05:29 | parent, because Flash looks at
parent as a display object container.
| | 05:32 | So you are telling Flash to treat it as a
MovieClip. .gotoAndStop, capital A, capital S.
| | 05:41 | Then instead of passing in 1,
I'm going to pass in normal in quotes.
| | 05:48 | Close out the parentheses and add a semicolon.
| | 05:51 | Now, we'll close the Actions panel, and
we'll make all the rest of the changes
| | 05:55 | for our navigation in the
actions layer of the main movie clip.
| | 05:58 | We've already made the change at 103,
| | 06:02 | so I'll go to 196, select that
actions keyframe, open up the Actions panel,
| | 06:09 | replace 41 with a String called basket.
| | 06:12 | Then we'll go to the next
keyframe, which is of the basket going up.
| | 06:22 | That's going to take us back to the beginning.
| | 06:23 | So I'll open up the Actions panel and
change 1 to the string normal. And moving on,
| | 06:33 | the last one is the bear_reaching.
| | 06:37 | So I'll open up the Actions panel on
that frame and change 71 to bear_reaching.
| | 06:47 | Now you should be able to test the
movie, and it should work just the same.
| | 06:50 | So the bear walks in.
| | 06:55 | When he starts eating the food, it zooms
in on him, then zooms out, just shows us
| | 07:00 | the container by itself.
| | 07:01 | The container goes up into the tree on
the rope, and the bear tries to reach at it.
| | 07:07 | So now we've replaced our
numbers with frame labels.
| | 07:16 | Let's take a look at the
advantage of doing that.
| | 07:18 | Go to Scene 1, and let's say we were to
move around our keyframes for some reason.
| | 07:23 | So, I'll select frame 20 on the main layer, so
that keyframe is selected, and I'll move it.
| | 07:30 | So I am moving it to frame 25.
| | 07:33 | Now all I have to do is move that bear_
eating label, and I don't have to change the code.
| | 07:38 | So, I'll test the movie, and you'll see
that I'll still go to the bear_eating at
| | 07:43 | the appropriate time. There it is!
| | 07:49 | So with frame labels your app can
withstand animation and design changes without
| | 07:54 | requiring any code modification.
| | Collapse this transcript |
| Solving problems when timelines and ActionScript animation collide| 00:00 | Even when you plan on adding code from
the foundation of your application, you
| | 00:04 | may still run into problems
because of working with the Timeline.
| | 00:08 | Let's take an example here.
| | 00:10 | Let's say I want to click on the bear in
this animation and have it take me to a
| | 00:17 | link to explorecalifornia.org.
| | 00:20 | Now, on the Stage, I have main.mc, and
inside of there, there is a bear, and
| | 00:26 | it's called bear_mc.
| | 00:30 | Let's return to the main Timeline, go to
the first keyframe of the actions layer
| | 00:35 | and open up the Actions panel.
| | 00:37 | So I have a link, so when you
click on bear_mc, you'll go to
| | 00:42 | explorecalifornia.org.
| | 00:44 | As a side note, if you're curious
to learn more about navigateToURL or
| | 00:48 | URLRequest, you can look
these things up in Flash Help.
| | 00:51 | So let's see how this code works.
| | 00:53 | I'll test the movie and click the bear
over and over again, but I don't get any link.
| | 01:03 | The first thing to do is check to see
if I typed the instance name correctly:
| | 01:07 | main_mc.bear_mc, all lowercase.
| | 01:11 | So on the main Timeline, I have main_mc,
and then inside of there, I have bear_mc.
| | 01:20 | However, the bear doesn't walk
into the Stage until frame 17.
| | 01:27 | I've also named this bear bear_
mc, but the code does not work.
| | 01:35 | Here is part of the problem.
| | 01:37 | This BearWalking instance is different
from what we see on frame 1, which is an
| | 01:43 | instance of a symbol called Bear.
| | 01:47 | Just because of that discretion,
this is not working, even though we have
| | 01:52 | the same instance name.
| | 01:53 | So you can start to see how
Timelines can be kind of difficult to work.
| | 02:00 | Here is one solution for that.
| | 02:02 | I'll return to the main Timeline,
click on frame 1 of the actions layer, open
| | 02:09 | the Actions panel, select all my
code, except for that stop() action -
| | 02:13 | we still want that - and then cut it using
Command or Ctrl+X. So I don't want to delete it.
| | 02:20 | I want to cut it and then
paste it somewhere else.
| | 02:24 | Now, I'm going to go to the
library, and I'll find the movie clip
| | 02:29 | called BearWalking.
| | 02:31 | I'll have to minimize all my folders.
| | 02:33 | I can find it right here, BearWalking.
| | 02:36 | So I'll double-click the
movie clip to enter its Timeline.
| | 02:39 | You can see its animation.
| | 02:41 | I'll add a new layer at
the very top, called actions.
| | 02:47 | I'll select the first keyframe of the
actions layer, and open up the Actions panel;
| | 02:56 | paste the code.
| | 02:58 | Now, of course, we don't want to
go from main_mc to bear_mc here;
| | 03:03 | we want to apply this code to the WalkingBear.
| | 03:06 | To apply this code to the object that
it's already within, I can simply delete
| | 03:12 | everything, except for
addEventListener, or I could also type
| | 03:15 | this.addEventListener.
| | 03:18 | This refers to, well, this object,
| | 03:22 | in other words the BearWalking movie clip.
| | 03:26 | So let's test the movie now and see what we get.
| | 03:29 | So I can click the bear, and the link opens.
| | 03:36 | Now, if I have another animation of
the bear, the link won't open; only that
| | 03:40 | BearWalking movie clip will work.
| | 03:42 | So we'd have to copy and paste this code into
each of the bear animations to get it to work.
| | 03:46 | I am not going to do that right now, but you
can use the same technique in other movie clips:
| | 03:51 | just copy and paste this code into any
movie clip, and then when you click on
| | 03:55 | that movie clip, the link will open.
| | 04:00 | Let's return to the main Timeline.
| | 04:03 | So if you have problems communicating
to an object from the main Timeline,
| | 04:07 | remember that you can just cut and
paste that code inside of the object itself,
| | 04:13 | so that you can guarantee
that the code will work.
| | Collapse this transcript |
| Condensing a multi-frame timeline into one frame| 00:00 | If you feel uneasy about working with
Timelines, you may want to condense your
| | 00:04 | Timelines into one frame wherever it's possible.
| | 00:08 | Let's take a look at condensing
this main Timeline into one frame.
| | 00:14 | So I have my bear animation, and then
at certain key frames the view changes.
| | 00:22 | So instead of controlling this with
frames, let's control the whole thing
| | 00:28 | using ActionScript.
| | 00:30 | To do that, all I need to do is mark
down the position and scale of the movie
| | 00:36 | clip in each of the keyframes.
| | 00:40 | So go to the first keyframe,
| | 00:43 | then look in the Properties panel at
the position and size of the movie clip.
| | 00:48 | The X position is 398.7 and the Y
position is 276.9, and then a Scale of 100.
| | 00:56 | I can go through each of these frames,
mark down the X position, the Y position
| | 01:03 | and the Scale, and then I can
apply those in ActionScript.
| | 01:10 | So what I'm going to do is just delete
the labels layer and then click and drag
| | 01:20 | from after the last frame on the bottom
layer all the way up to the second frame
| | 01:27 | of the top layer and then
press Shift+F5 on my keyboard.
| | 01:31 | Now I just have one frame.
| | 01:34 | Now what I'm going to do is make a
function that I can use from within the bear
| | 01:37 | movie clip to modify the movie
clip appropriately for each view.
| | 01:43 | So let's select the first keyframe of
the actions layer and open up the Actions
| | 01:47 | panel and create a function.
| | 01:49 | So type 'function,' and I'm going to call
this goto, and then I'm going to type View with a capital V.
| | 01:58 | I'm going to type parentheses, and
as a parameter, I'm going to type view,
| | 02:01 | lowercase, and datatype it to a String.
| | 02:06 | The return value will be void, so I'll
type :void after the parenthesis and
| | 02:11 | then some curly braces.
| | 02:13 | So what we're going to do is
basically replace that call to goto and stop
| | 02:19 | inside of main_mc with a call to this
function, gotoView, and we'll pass in the
| | 02:25 | same name of each view, like
bear_reaching, bear_eating, et cetera.
| | 02:31 | So we'll use the function here to handle that.
| | 02:33 | So I'm going to type a switch statement.
| | 02:35 | Remember, this is a conditional
statement that we looked at earlier, switch,
| | 02:40 | some parenthesis, and some curly braces.
| | 02:45 | In the switch statement, I'll type view.
| | 02:47 | So we're going to compare
everything against a view.
| | 02:50 | So the first case is going to be
"normal", and I'll type a colon after that and
| | 03:02 | go to the next line.
| | 03:04 | Now we'll set the position and scale of main_mc.
| | 03:11 | So I'll type main_mc.x = 399,
| | 03:20 | then I'll type main_mc.y = 276,
| | 03:29 | and then I'll type scale.
| | 03:32 | The scale is done through the
scale X and scale Y properties.
| | 03:36 | Since those properties are going to
be the same, or since the scale of the
| | 03:42 | horizontal and vertical axes are the
same for the movie clip every time, I'm
| | 03:48 | going to write a shorthand way.
| | 03:50 | I'll type main_mc.scaleX = main_mc.scaleY = 1.
| | 04:06 | ScaleX and scaleY are values
between 0 and 1, 1 being 100% scale.
| | 04:12 | So you can do 300% scale with a value of 3.
| | 04:16 | So I'm typing 1 right here, and
then I'll type break on the next line.
| | 04:21 | Now let's create the other three cases,
and then we'll apply the code inside of
| | 04:26 | the main_mc movie clip.
| | 04:29 | So select these five lines of code, copy
them with Command+C or Ctrl+C, go below
| | 04:35 | break, and then paste the code with
Command+V or Ctrl+V. I'm going to repeat
| | 04:41 | this, so I have four total blocks
of code, so two, three, and then four.
| | 04:48 | So we'll go to the second one and
change the string to bear_eating, just like
| | 04:56 | the frame label was before.
| | 04:59 | Here the x position is going to be 141,
the y position is going to be 237, and
| | 05:08 | the scale is going to be 1.89.
| | 05:16 | For the next label, I'll
change the case to basket.
| | 05:24 | Change the x to 352, change the y to -17 -
| | 05:31 | so just a minus sign and then
17, -and the scale to 3.91.
| | 05:40 | Finally, I'll do the bear
reaching, so bear_reaching.
| | 05:48 | The x will be 161, y will be
509, and the scale will be 1.98.
| | 06:07 | Now we'll have to update
the change inside of main_mc.
| | 06:11 | Now the shortcut to doing this
would be to open up the toolbox.
| | 06:14 | So I'll click that arrow on the left
side of Actions panel to open the toolbox.
| | 06:20 | Then I'll click and drag to expand
the bottom section of the toolbox.
| | 06:24 | I'll also expand its width a little bit.
| | 06:28 | So I can see I have actions at all of
these frames inside of main_mc, so you see
| | 06:35 | that Main movie clip here?
| | 06:36 | This is all the actions in there.
| | 06:38 | So I can click at frame 1 and then
change where it says gotoAndStop to gotoView.
| | 06:46 | Now I can quickly navigate to frame 103 here.
| | 06:50 | Click that and then type gotoView.
| | 07:01 | So gotoView, and for 243, gotoView, 329,
gotoView, and 410, which is set stop, so I
| | 07:17 | don't need to make any changes.
| | 07:19 | Now if you test the movie at this
point, you may notice a problem.
| | 07:25 | Let's see if we have any errors.
| | 07:28 | So the bear walks in. Everything looks
normal so far. The bear starts eating.
| | 07:32 | That looks normal. The basket view is normal.
The basket goes up. Then the bear reaches.
| | 07:44 | Everything looks good.
| | 07:46 | Now once in a while, when you use this
parent code with MovieClip, you might
| | 07:51 | run into a problem.
| | 07:53 | Now if that ever happens - and it's
very rare that it will happen - just type
| | 07:58 | Object instead of MovieClip.
| | 08:00 | Object allows you to write any
properties and methods you want; then you
| | 08:04 | shouldn't have any errors at all.
| | 08:06 | I'll go back and change it to MovieClip,
since we didn't have any problems with it.
| | 08:10 | So if you ever feel the need to condense
all of your frames into a one frame,
| | 08:18 | you can go through this process,
change your methods a little bit, write your
| | 08:23 | own custom function on the main
Timeline and navigate through the "frame
| | 08:28 | labels" and navigate through
the different views in this way.
| | Collapse this transcript |
| Creating a simple slide presentation app in the timeline| 00:00 | To get practice navigating
through Timelines, we'll build a simple
| | 00:03 | slide presentation app.
| | 00:05 | I've taken this bear animation, and
I've broken it up into different frames.
| | 00:11 | So we have this one, and this one,
and this one, and then the basket goes up
| | 00:16 | into the tree, and the bear tries to get it.
| | 00:17 | So, I'll just scroll up a little bit.
| | 00:21 | So you can see the bear
trying to get the basket.
| | 00:24 | These are all just still images that
I exported using the File > Export >
| | 00:30 | Export Image command.
| | 00:31 | If you want to do the same thing with
your animation, it's really best to do
| | 00:36 | this on the main Timeline and not
inside of a movie clip, because the
| | 00:40 | coordinates inside of the
movie clip are relative.
| | 00:42 | So just keep that in mind.
| | 00:46 | So on the Stage, I have a button called
back_btn and a button called forward_btn.
| | 00:53 | And then in my code, I've just
created some simple EventListeners and
| | 00:58 | EventHandlers for them.
| | 00:59 | So I don't have any code inside of
them, but I've just built this already.
| | 01:03 | So you've seen this function before,
the previous frame function, which is
| | 01:07 | prevFrame and parentheses.
| | 01:11 | So we can do that when we click the
Back button, and when we click the Forward
| | 01:15 | button, we can go to the next frame.
| | 01:17 | So we'll type nextFrame with
capital F, add some parentheses and
| | 01:21 | Before I test the movie I want
to add one more line of code.
| | 01:23 | I'm just going to put a stop action.
| | 01:25 | I'll put that at the top
of the code, below line 2.
| | 01:29 | So I'll go to the next line and
just type stop, some parentheses, and a
| | 01:32 | semicolon, because we don't
want the movie to plat by default.
| | 01:35 | So let's test the movie, and then we
have our little slide show, so we can click
| | 01:41 | the Next button to advance through the
slides and the Previous button to step
| | 01:46 | backwards through the slides.
| | 01:51 | So if you ever want to make a
slideshow, just whip up this code real fast,
| | 01:56 | and there you have it.
| | 01:57 | Let's say you wanted to advance in a
loop, so you go to the last frame and
| | 02:02 | you click the Next button, and you want to go
back to the first frame again, and vice versa.
| | 02:08 | You want to go from the first frame to
the last frame if you click the Back button.
| | 02:13 | Let's take a look at how to do that.
| | 02:15 | So go to forwardClicked and right
below nextFrame, type if, some curly braces.
| | 02:25 | Now, what we can do is check to see
if the current frame is the last frame.
| | 02:33 | So to do that, we could say, if
currentFrame is equal to - what's the last frame? 6 -
| | 02:42 | we could put 6 right there,
| | 02:44 | but the better way to do it is
to use the totalFrames property.
| | 02:49 | So if the currentFrame is the last frame,
or in other words, if the currentFrame
| | 02:53 | is equal to totalFrames,
you see why that's better?
| | 02:56 | That's because, if you add more frames
or take away frames, the code won't break.
| | 03:02 | So it's always better to make it so
that the code won't break if you change the
| | 03:06 | design, because it is pretty likely that
you will change the design in your app.
| | 03:10 | So the more solid the code is, the better.
| | 03:14 | So if the currentFrame is equal to
totalFrames, then we'll go back to frame 1.
| | 03:19 | Take a second to think of the code that
you would use to go back to the first frame.
| | 03:26 | Simply type gotoAnd with a
capital A, Stop, capital S, and 1 in parenthesis.
| | 03:32 | Now, I've stressed the
importance of using frame labels before.
| | 03:37 | So you could use one if you want here,
but actually, if I go to the last frame
| | 03:42 | and click the Next button, I'm always
going to want to go to the first frame.
| | 03:46 | So unless I completely redesign this app,
then this code is going to be solid, no
| | 03:50 | matter how many frames I have.
| | 03:52 | So using the number 1 is okay in this case.
| | 03:56 | So I have my code set up here, and
we'll test the movie and then click the
| | 04:01 | Forward button and watch as
we advance through the frames.
| | 04:05 | See if you notice anything off.
| | 04:08 | When the basket is up, I click the Next
button, and it goes back to the beginning.
| | 04:12 | But what about the frame where the bear is
trying to reach for the basket? We don't see that.
| | 04:18 | Let's take a look at why that is happening.
| | 04:24 | So the function goes to the
nextFrame, and then checks to see if the
| | 04:29 | currentFrame is equal to
the total number of frames.
| | 04:32 | If so, gotoAndStop.
Here is the problem.
| | 04:37 | The fact that nextFrame is before
this if statement makes the frame updated
| | 04:44 | before you see it updated.
| | 04:47 | So it happens without you seeing it.
| | 04:50 | Flash makes the frame go to the last
frame with the bear, but before you see it,
| | 04:54 | Flash runs this code to
go back to the first frame.
| | 04:58 | Occasionally, you'll run into these
problems when you're working with frames.
| | 05:02 | You have to make sure that you change
the frame last, so that the last thing you
| | 05:09 | see is the new frame.
| | 05:11 | To make sure this happens correctly,
cut nextFrame with Command+X or Ctrl+X.
| | 05:17 | Then below the if statement,
let's write an else statement.
| | 05:22 | So write else, and then some
curly braces, and then paste the code.
| | 05:30 | So if the playhead is on the last
frame, we'll go back to the beginning.
| | 05:34 | If not, then we'll go to the nextFrame.
| | 05:38 | So we don't have the nextFrame code
running every single time, like we did before.
| | 05:42 | It only runs when we're not on the last frame.
| | 05:45 | So let's test the movie now, and you
should see all the frames of animation.
| | 05:49 | So bear comes up, basket goes up, and
there is the bear. Click the Next button,
| | 05:54 | and you go back to the beginning.
| | 05:55 | So now what we'll do is we'll apply
the same technique, but in reverse, to the
| | 06:04 | backClicked function.
| | 06:05 | So let's scroll up.
| | 06:09 | Then above prevFrame,
let's write an if statement:
| | 06:12 | so if, some parentheses, and some curly braces.
| | 06:17 | In the if statement, we want to
see if we're on the first frame.
| | 06:21 | So all we have to do is check to see if
currentFrame - capital F - is equal to 1.
| | 06:27 | If so, then we're going to go to the last frame.
| | 06:31 | So gotoAndStop and then parentheses, pass
in that totalFrames property - capital F.
| | 06:39 | It should be blue after you type it.
| | 06:42 | Then we'll wrap prevFrame in an else statement.
| | 06:45 | So we only go to the previous
frame if we're not on the first frame.
| | 06:50 | I'll just tab that in and
write some curly braces around it.
| | 06:56 | So if the current frame is 1, we're
going to go back to the end, which is
| | 07:00 | represented by totalFrames.
| | 07:01 | Again, we're using that just in case we
increase or decrease the length of the
| | 07:05 | animation. And then the else statement
says if we're not on frame 1, then we're
| | 07:10 | going to go back to the previous frame.
| | 07:12 | So let's test the movie, and if you click
the Back button, you'll go to the last frame.
| | 07:18 | Continue to click it, and you'll step
backwards through the animation, and the
| | 07:22 | Forward button still works as well.
| | 07:27 | So by using these conditional
statements, along with the next frame and previous
| | 07:32 | frame commands, we can navigate through
each frame of the Timeline and have the
| | 07:37 | slideshow play in a loop.
| | 07:38 | So navigating through Timelines is a
key component in many apps, and as you get
| | 07:44 | more practice using these commands,
you'll be able to add Timeline navigation to
| | 07:48 | all sorts of applications.
| | Collapse this transcript |
| Using one event handler with multiple buttons| 00:00 | One excellent way to optimize your code
and prepare it for changes in the future
| | 00:06 | is to use one event
handler with multiple objects.
| | 00:11 | Here I have a Timeline organized
into three frame labels: board1, board2,
| | 00:18 | board3, and I have some
simple animations playing.
| | 00:24 | What I did here is I took each of
the buttons, notice they are all on the
| | 00:28 | buttons layer which only has one keyframe.
| | 00:33 | I intentionally did that to make sure I
wouldn't have any problems with my code.
| | 00:38 | So they are on one keyframe that lasts
for the whole duration of the Timeline.
| | 00:44 | So I named the buttons the same as my frame labels.
| | 00:48 | So I have that first one that's called
board1, the second one that's called board2,
| | 00:52 | and the third one is called board3.
| | 00:54 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 01:01 | Here I've connected board1 to
the buttonClicked event handler.
| | 01:06 | I've done the same thing for board2 and
board3, so they're all pointing to the
| | 01:11 | buttonClicked event handler.
| | 01:15 | Now what I'll do when a button is
clicked it send the Timeline to the frame
| | 01:19 | that corresponds to the clicked button.
| | 01:23 | Let's take a look at how to do that.
| | 01:25 | I know, for sure, I'm going to want to use
gotoAndPlay, and some parentheses and a semicolon.
| | 01:36 | Now, let's say, I want to access
information about the button that was clicked
| | 01:42 | that triggered this event handler.
| | 01:43 | So let's say I clicked the board1 button.
| | 01:46 | How do I find out which button I clicked?
| | 01:50 | To do that, I can go to event - that's the
name of the event - .currentTarget with
| | 02:06 | a capital T, and that's going to create a
reference to whatever button that I clicked on.
| | 02:11 | So if I clicked on board1, it's
going to give me a reference to board1.
| | 02:14 | If I happen to click on board2, it's going
to give me a reference to board2, et cetera.
| | 02:20 | Then I want to get the object's
instance name, because if I just have
| | 02:24 | event.currentTarget, the name would
be board1, board2, or board3, but that
| | 02:30 | gives me a reference to the
object and not its instance name.
| | 02:34 | So I need to just have its instance name as a
string, so that it will work as a frame label.
| | 02:39 | To do that, I type .name.
| | 02:43 | Now it gives me the name
property of the object that was clicked.
| | 02:47 | So it gives me board1 as a string,
board2 as a string or board3 as a string.
| | 02:52 | I can test the movie,
| | 02:53 | I can click the buttons, and
navigate around to the different frames.
| | 03:04 | So by using the currentTarget property,
I'm able to access any information I
| | 03:08 | need from the object that
triggered the event handler.
| | Collapse this transcript |
|
|
5. Working with Classes and Object-Oriented ProjectsCreating a class using Flash templates| 00:00 | Creating an ActionScript
class can be a daunting task.
| | 00:04 | There are many required phrases, and
the structure of your files has to be
| | 00:08 | perfect or the code will break completely.
| | 00:12 | To make this process easier, Flash
has pre-built templates for creating
| | 00:16 | ActionScript class files.
| | 00:19 | You can see these templates through the
welcome screen, or you can go to File > New.
| | 00:26 | I mentioned that this file is a template,
but you don't find it under the Templates tab.
| | 00:30 | You'll have to go to the General
tab in the New Document window to find
| | 00:34 | ActionScript 3.0 Class.
| | 00:36 | That's the first file.
| | 00:37 | That's an ActionScript file.
| | 00:39 | If you look at the description, you'll
see that it says, Create a new AS file
| | 00:43 | with a .as extension to define an
ActionScript 3.0 class. So I'll click OK.
| | 00:51 | Here, because of my ActionScript
settings, Flash is asking me which app I'm
| | 00:55 | going to use to write ActionScript code.
| | 00:59 | I can either use Flash
Professional or Flash Builder.
| | 01:03 | For this course, we're only going to
be working in a Flash Professional.
| | 01:08 | If you get deep into object-
oriented programming and you want a more
| | 01:13 | robust application for writing
ActionScript classes, then I recommend
| | 01:16 | getting into Flash Builder.
| | 01:19 | But for now, Flash Professional is fine,
and I'll click Don't Show Again, and
| | 01:23 | type the Class name.
| | 01:24 | I'll just call this Example,
capital E, and then I'll click OK.
| | 01:33 | So, Flash has created an
ActionScript file for me.
| | 01:37 | It's important to note then the
ActionScript file is really just a text file.
| | 01:42 | You can actually use the text editor
Notepad to create an ActionScript file.
| | 01:48 | As long as it's plain text - so, not
rich text - and as long as it has the .AS
| | 01:54 | extension, it can work in Flash.
| | 01:57 | So let's walk through this code.
| | 02:00 | The first thing inside of
here is the package declaration.
| | 02:04 | So it says the word 'package' and then a space.
| | 02:07 | The package identifies where this code resides.
| | 02:13 | If you want to be really organized,
you'll group your different ActionScript
| | 02:17 | class files into folders. And packages allow
you to tell Flash how that code is organized.
| | 02:24 | This is something that's more of a
deep concept in ActionScript classes, and
| | 02:28 | we'll talk about it later on in this course.
| | 02:32 | The next line of code says public class Example.
| | 02:38 | When you create an ActionScript class, use
the word 'public' and then a space and then class,
| | 02:46 | just like as if you're defining a function.
| | 02:49 | You specify the keyword class to create a class.
| | 02:53 | These words like 'public' and maybe
you'll see 'private' sometimes, these words are
| | 02:58 | special words that you only use inside
of a class file when defining functions
| | 03:03 | and classes as well.
| | 03:05 | Then we have the name of
the class which is Example.
| | 03:07 | Flash added that in for us when we
typed Example for the name of our class, and
| | 03:12 | then it says public function
Example and constructor code.
| | 03:17 | Let's take a look at the
organization of the curly braces.
| | 03:22 | Notice that the open curly
braces start on the same line as the
| | 03:25 | package declaration, the public
classic declaration, and the public
| | 03:29 | function declaration.
| | 03:30 | If I click the Auto Format button,
then Flash will organize this code how
| | 03:35 | I've been writing it throughout this course,
which is with open curly braces on separate lines.
| | 03:41 | So we can see the outer curly braces for
package wrap all the code in this file.
| | 03:47 | Then the class code is the first level in.
| | 03:52 | So that wraps the rest of the code in the file.
| | 03:55 | And finally we have the public function Example.
| | 03:59 | That's the most inner set of curly braces.
| | 04:01 | Each time you create a class, you
should have this function called a
| | 04:06 | constructor function.
| | 04:07 | A constructor function has the same name as
the class name, which in this case is Example.
| | 04:16 | This should also be the same
name of your ActionScript file.
| | 04:20 | So the file should be called
Example with a capital E .AS.
| | 04:26 | As we go forward, we'll get more in
practice working with ActionScript classes.
| | 04:30 | The main thing I want you to take away
from this is that using the ActionScript
| | 04:34 | class file templates in Flash CS5, you
can easily create class files without
| | 04:40 | having to worry about getting everything right.
| | Collapse this transcript |
| Setting a document class| 00:00 | If you're interested in getting all of
your code out of the Timeline and into
| | 00:04 | organized class files, then
document classes will allow you to do that.
| | 00:09 | With document classes, you can
create external ActionScript classes that
| | 00:12 | completely power your FLA files.
| | 00:15 | So you can take all or most of your
code out of the Timeline and put it into
| | 00:19 | ActionScript classes with only a few steps.
| | 00:23 | The first thing you're going to need
to do to create a document class that
| | 00:27 | powers your FLA file is to make
that class extend the MovieClip class.
| | 00:33 | That basically says you're going to
take the movie clip concept and add to it,
| | 00:39 | with whatever's in this file.
| | 00:42 | That may sound a little bit strange
and new, but you're already familiar with
| | 00:46 | that idea because every time you
create your own custom movie clip, you're
| | 00:51 | essentially extending the MovieClip class.
| | 00:53 | You're taking the idea of a movie clip,
and you're putting your own art and
| | 00:56 | your own animations inside of it.
| | 00:57 | This is the same thing, but it's with code.
| | 01:00 | So, right after DocumentExample, type
a space and then type the word extends.
| | 01:05 | Then type another space and type
MovieClip, capital M, capital C. When you type
| | 01:10 | that line of code, Flash will
automatically add the import statement for you.
| | 01:16 | Import statements will make sure
that you can use the code that you're
| | 01:21 | referencing in your files.
| | 01:22 | So you absolutely need to
have this line of code here.
| | 01:26 | If Flash doesn't insert it for you, or you
forget to insert it, then you'll get an error.
| | 01:30 | So just keep that in mind.
| | 01:33 | Also, make sure not to add a
semicolon after this line of code.
| | 01:38 | See this class declaration is
followed by curly braces, here and here.
| | 01:45 | If you put a semicolon, then you'll make
an error because these curly braces are
| | 01:51 | a part of this public class statement.
| | 01:56 | The next thing to do is to write
some code in the constructor area.
| | 02:00 | The constructor area is the initialization code.
| | 02:04 | That's going to be the function that
automatically runs when your FLA is initialized.
| | 02:10 | So in there, let's just put a simple
trace statement to make sure that this
| | 02:13 | is working properly.
| | 02:14 | So type 'trace,' some parentheses and a
semicolon and in quotes, type "it's working!"
| | 02:23 | with an exclamation point.
| | 02:25 | Before you go over to the
FLA file, save this file.
| | 02:32 | When you're working in an FLA, you
can change the ActionScript and test the
| | 02:36 | movie, and those ActionScript changes
will be reflected in the published movie.
| | 02:41 | With a class file, however, the file gets
loaded into Flash when you publish the movie.
| | 02:48 | So, it loads the last saved version of
that file. So if you ever make a change,
| | 02:53 | you need to save it for that change to be
reflected in the SWF file. So save the file,
| | 03:00 | then go back to the FLA file, and in the
Class section in the Properties panel -
| | 03:07 | and by the way you won't see this unless
you have nothing selected, so make sure
| | 03:09 | you deselect everything -
| | 03:10 | click in the Class section and type
the name of the DocumentExample class.
| | 03:16 | If you type it differently than the
name of the file, it won't work - and by
| | 03:20 | differently, I mean different casing,
like a lowercase e instead of an uppercase
| | 03:24 | E, and any other spaces or special
characters, aren't going to work.
| | 03:29 | So type it exactly as the name of the file is.
| | 03:31 | So DocumentExample, capital D,
capital E, and then press Enter or Return
| | 03:39 | to commit the change.
| | 03:41 | Then test the movie, and you
should see the code pop up.
| | 03:45 | It says it's working in the Output window.
| | 03:48 | Now, you'll notice that I can still
click the buttons and navigate around.
| | 03:53 | Let's say you wanted to put that
code inside of a document class.
| | 03:57 | Let's look at how it may be a little bit
different than the code is on the main Timeline.
| | 04:01 | Go to the first keyframe of the
actions layer and open up the Actions panel.
| | 04:08 | In here, select all of the code and then
press Command+X or Ctrl+X to cut the code.
| | 04:15 | Close the Actions panel and
move over to DocumentExample.as.
| | 04:21 | Highlight the trace statement
and paste the copied code over.
| | 04:27 | This is going to look a little bit
weird, so click the Auto format button to
| | 04:31 | rearrange the code a little bit.
| | 04:32 | Now we're just going to cut and paste
some of these lines of code to put them
| | 04:39 | in the right places.
| | 04:41 | Import statement needs to be with the
other import statement, and the function
| | 04:47 | should be outside of the
function that it's within right now.
| | 04:51 | So let's select that function real
quick, Command+X or Ctrl+X to cut, and
| | 04:56 | then you're going to want to paste
it right below the constructor method,
| | 05:00 | which is public function.
| | 05:01 | Keep in mind that a method is just a
function, but it becomes a method when it's
| | 05:05 | inside of a class file.
| | 05:08 | So, scroll down and find that closed
curly brace for the constructor, go a few
| | 05:14 | lines below it, and paste that function.
| | 05:17 | Again, I'm going to click Auto format.
| | 05:23 | Now I'll scroll up,
select that import statement,
| | 05:27 | the one that imports the MouseEvent,
| | 05:29 | and then press Command+X or Ctrl+X to
cut the code, scroll up, place the code
| | 05:36 | after the import MovieClip statement,
| | 05:38 | Command+V or Ctrl+V. So, in
the constructor, all I have are the
| | 05:43 | addEventListener lines of code.
| | 05:46 | I have the function organized in a
different spot outside the constructor
| | 05:51 | method, and then I have that import statement.
| | 05:55 | So let's save the file and then test the movie.
| | 06:00 | Remember that you can test the movie
directly from an ActionScript class file
| | 06:04 | as long as the targeted file is correct.
| | 06:06 | So see the Target is Document_Class.fla.
| | 06:09 | So, as long as that's set,
I can test it from here.
| | 06:13 | So the same keyboard shortcut:
Command+Return or Ctrl+Enter.
| | 06:16 | Looks like everything's working
and all the code is working properly.
| | 06:23 | Now I've taken it off of the main
Timeline and placed it inside an ActionScript
| | 06:28 | class, so it's clean and organized.
| | 06:31 | Note that I haven't taken off the stop
actions, because these need to happen
| | 06:35 | after a certain point in time.
| | 06:37 | So for me, it's ideal that they stay right here.
| | 06:40 | By using a document class, you can
keep all your code object-oriented or in
| | 06:46 | classes, and the document class can
be set up through the Properties panel.
| | Collapse this transcript |
| Preparing a class to be connected to a symbol| 00:00 | Just like a document class, classes
can be connected directly to movie clips,
| | 00:04 | so that code can be taken off the Timeline
and organized through ActionScript classes.
| | 00:10 | This organization through classes is
known as object-oriented programming.
| | 00:15 | It is especially useful when you have
many different objects and you want to add
| | 00:19 | the same functionality,
| | 00:21 | like if you wanted to add keyboard
control to multiple characters in a game or
| | 00:25 | use that same functionality in a different game.
| | 00:29 | Let's look at how to prepare a
class to be connected to a symbol.
| | 00:34 | I have the file Boarder.as that's a
basic class template created by Flash, and
| | 00:40 | then I have some code in the Timeline.
| | 00:42 | This code controls the
skateboarder on Stage with the keyboard.
| | 00:46 | So test the movie and use the left
and right arrows to move back and forth.
| | 00:54 | Let's go over to Boarder.as.
| | 00:56 | The first thing you need to do is either
extend the MovieClip class or the Sprite class.
| | 01:01 | Remember that a sprite is
a single-frame movie clip.
| | 01:05 | Since the skateboarder has
multiple frames, it's better to extend the
| | 01:08 | MovieClip class in this case.
| | 01:12 | So, after public class Boarder, type
a space and then type extends and then
| | 01:17 | another space and then MovieClip.
| | 01:20 | Note that Flash imports that line of code.
| | 01:23 | That's important.
| | 01:24 | Since I already know we're going to be
using the keyboard, I'm going to go to the
| | 01:31 | next line and type import flash.ui.Keyboard;.
| | 01:35 | It's important to note that these
names, like flash.display and flash.ui, are
| | 01:45 | actually package names.
| | 01:46 | Again, we'll get more into package
names later on, but for right now, make a
| | 01:51 | mental note that these are
actually folder structures.
| | 01:54 | Somewhere on your hard drive, there
is a folder called flash, and in there,
| | 01:57 | there's a folder called display, and in
there, there's a file called MovieClip.as.
| | 02:02 | Also, in the flash folder is the ui
folder, which contains a file called keyboard.
| | 02:08 | If you want to import all of the files
inside of a folder, or in other words
| | 02:12 | all of the classes within a package,
you can use the asterisk or wildcard
| | 02:17 | symbol, just like this.
| | 02:18 | I'm going to undo that change though for now.
| | 02:22 | Let's jump back to the Preparing.fla
file and go to our ActionScript code.
| | 02:27 | The first thing I'll do is select
the import statement and cut it using
| | 02:31 | Command+X or Ctrl+X. I'll move over to
Boarder.as and paste the code under the
| | 02:37 | Keyboard import line of code.
| | 02:40 | Note that the Keyboard is
different from KeyboardEvent.
| | 02:45 | Jump back to the FLA and into the code.
| | 02:48 | Select the stage.addEventListener line of code.
| | 02:51 | Cut that code, go back to Boarder.as
and add that code to the constructor.
| | 02:59 | Back to the FLA, to the Actions
panel, select the keyPressed function.
| | 03:06 | Cut it and delete the extra lines
of code and go back to Boarder.as.
| | 03:13 | Below the constructor method -
that's the closed curly brace right below
| | 03:16 | stage.addEventListener - paste the code
that you just cut. It may be indented
| | 03:24 | a little bit weird,
| | 03:25 | So just click the Auto format
button, and Flash will fix that for you.
| | 03:30 | Now, I'm going to make a simple change
to the code to make sure that this code
| | 03:33 | will work for any object we apply this class to.
| | 03:38 | Boarder_mc is going to be irrelevant.
| | 03:43 | We don't want to move boarder_mc
inside of the skateboarding movie clip;
| | 03:47 | we want to move the whole movie
clip itself - in other words the
| | 03:51 | whole skateboarder.
| | 03:53 | To do that, I can replace boarder_mc with this.
| | 03:58 | That will move the whole movie clip.
| | 04:01 | A shorter way to write that is to just eliminate
this and the dot and just use x += 5 and x -= 5.
| | 04:11 | So let's Save the file, and later
on, we'll connect this to a class.
| | 04:19 | The main thing I want you to take away
is that in order to prepare a file to be
| | 04:24 | connected to a symbol, you need to
extend the sprite or MovieClip Class.
| | Collapse this transcript |
| Using the Symbol Properties menu to connect a symbol to a class| 00:00 | Connecting a symbol to a class is a
simple process, but some parts of that
| | 00:04 | process can be confusing.
| | 00:06 | Before we look at how to do that, I
want to point out that I have the file
| | 00:09 | Boarder.as that's in the
same folder as my FLA file.
| | 00:15 | Note that it's the same name as the
movie clip I want to connect that to.
| | 00:20 | That's not necessary, but it's very
helpful, as you'll see in just a second.
| | 00:26 | Let's go to the FLA file, right-click the
Boarder movie clip and choose Properties.
| | 00:33 | In the Symbol Properties window,
make sure the Advanced area is expanded.
| | 00:38 | In the Linkage area, check
the Export for ActionScript box.
| | 00:43 | You may be familiar with this process
already, because we could have used it
| | 00:46 | earlier in this course.
| | 00:49 | In the Class field, you can specify the class
that you want to connect to this movie clip.
| | 00:53 | So the class name is Boarder.
| | 00:57 | If the class doesn't exist already,
Flash will create a class for you, which is
| | 01:03 | why you may see a warning when you
export a movie clip for ActionScript and
| | 01:07 | haven't created a custom class.
| | 01:09 | The warning simply says Flash can't find
the class, so it's creating one for you.
| | 01:17 | When you set the class like this, you
can only use one custom class per library,
| | 01:28 | so I can't do that with any other class.
| | 01:30 | If I wanted to take the Boarder
functionality and apply it to another object,
| | 01:34 | I could set it as the Base Class, and then
put whatever class I want as the Main Class.
| | 01:40 | What Flash would do is it would take
the functionality from the Base Class and
| | 01:44 | apply it to that created class.
| | 01:46 | We'll see how that works in just a minute.
| | 01:48 | So right now I have Boarder for
my Class, and then I'll click OK.
| | 01:54 | You shouldn't see any kind of
warning message when you click OK.
| | 01:57 | If you do, double-check the location
of your Boarder.as file, the name of the
| | 02:02 | file, the name of the class,
and the name of the constructor.
| | 02:08 | Once everything works, you should
see Boarder under the Linkage area.
| | 02:12 | Test the movie at this point, and
your Boarder has keyboard control.
| | 02:17 | Let's say we wanted to apply a keyboard
control to the little cat over there.
| | 02:22 | Simple! We've already written the keyboard
control code in the Boarder class,
| | 02:29 | so if we connect the Boarder class to
the Cat, everything should work, right?
| | 02:33 | Let's see. Right-click Cat in
the library and choose Properties.
| | 02:39 | Check Export for ActionScript,
change Class to Boarder, and click OK.
| | 02:47 | Flash then gives you an error message
that says "Please enter a unique class name
| | 02:52 | that is not associated
with other library symbols."
| | 02:55 | If you think about it for a second,
this message actually makes sense.
| | 02:58 | Remember, early in the course, we
exported a symbol for ActionScript, and we
| | 03:02 | created new instances of that
symbol by calling its class name.
| | 03:07 | We can't have multiple symbols with the
same exported class name, or else which
| | 03:12 | one is Flash going to use, when
you write the code to create one?
| | 03:16 | So it makes sense that each
of those should be unique.
| | 03:19 | So for this situation, I'm going to cut
the word Boarder, and paste it in Base Class.
| | 03:26 | Then for Class, I'm going to type "Cat."
| | 03:28 | When I do this, I should get a
warning message. I'll click OK.
| | 03:33 | The warning message says A definition
for this class, which is Cat, could not be
| | 03:39 | found in the class path.
| | 03:41 | So one will be automatically
generated in the SWF file upon export.
| | 03:45 | So Flash is going to make a Cat class
for me that I'm never going to see, and
| | 03:50 | it's going to extend the Boarder class.
| | 03:52 | So it's going to have all the
functionality of the Boarder class, but I don't
| | 03:56 | have to create a new class just to say that.
| | 03:59 | So I'll click OK, and now you can see
the Cat is exported as Cat, and when I
| | 04:06 | test the movie, the Boarder
and the Cat both move together.
| | 04:10 | It's like the Boarder is
chasing the Cat right now.
| | 04:19 | So using this technique, I can apply
keyboard functionality to any object I
| | 04:24 | want, simply by modifying its Base Class.
| | 04:28 | The ability to reuse code by connecting
a class to a MovieClip symbol is a very
| | 04:34 | powerful thing in Flash.
| | 04:36 | The more you use it, the more you'll
understand how much easier it is than
| | 04:41 | writing code time after time in the Timeline.
| | 04:45 | And again, all you have to do to
connect a symbol to a class is put your custom
| | 04:49 | class name in the Class or Base Class
field in the Symbol Properties window.
| | Collapse this transcript |
| Resolving problems with instances in a linked class| 00:00 | Occasionally, you'll run into
problems when linking a class to a symbol.
| | 00:04 | Knowing how to resolve these issues will
prevent countless headaches in the future.
| | 00:09 | I've mentioned before that whenever
you work with instances and Timelines and
| | 00:15 | object-oriented code, you could have problems.
| | 00:19 | In this file here, I've connected the
TrashCan symbol to the Obstacle Base Class.
| | 00:28 | Let's take a look at the Obstacle Base Class.
| | 00:33 | In Obstacle.as, the constructor
method adds an EventListener to listen for
| | 00:38 | the ENTER_FRAME Event.
| | 00:42 | Remember, the ENTER_FRAME Event
executes every frame, so over and over and over
| | 00:49 | again, 24 times a second or 30 times a
second, depending on how fast your frame
| | 00:54 | rate is for your FLA file.
| | 00:57 | So every frame, I'm running this
function called checkCollision.
| | 01:02 | This code may be familiar to
you because you used it before.
| | 01:06 | I simply copied and pasted this code
from another exercise and made very
| | 01:10 | small changes to it.
| | 01:12 | The only change is that I added the
removeEventListener line of code.
| | 01:16 | So the if statement checks to see
if the boarder is hitting the can.
| | 01:22 | If so, the boarder goes to the second
frame and plays, and removes the can from
| | 01:27 | the stage, the stage EventListener is
removed for the KeyboardEvent, and again, the
| | 01:34 | ENTER_FRAME Listener is removed.
| | 01:38 | Now, if I were to test the file at this
point, I would find a whole slew of problems.
| | 01:44 | Look at all of these problems.
| | 01:48 | First of all, there's an undefined
property called boarder_mc, but boarder_mc is
| | 01:55 | on the Timeline, as we know.
| | 01:57 | Why is there a problem here?
| | 01:58 | Well, first of all, boarder_mc is
not inside of the TrashCan's Timeline;
| | 02:04 | it's on the main Timeline.
| | 02:06 | That's why this doesn't work.
| | 02:09 | So what we can do is reference this
object from the TrashCan's parent.
| | 02:15 | The trashcan and the boarder have
the same parent, so this should work.
| | 02:19 | So we'll type MovieClip, then
parentheses, parent inside the parentheses, after
| | 02:27 | the parentheses, a dot.
| | 02:28 | So, I'm going to check that hitTestObject
in there, and then can does not exist either.
| | 02:35 | Remember that the obstacle is the can,
so we need to change can to this.
| | 02:42 | You'll find can in the removeChild
line of code as well, and it says this.
| | 02:50 | Also, the removeChild line of
code is going to break as well.
| | 02:54 | It's going to break because we're
calling it from inside of the trashcan.
| | 03:00 | It's calling it to itself,
and that's not going to work.
| | 03:04 | You need to have the
parent object remove the child.
| | 03:10 | So we can do this: parent.removeChild(this).
| | 03:15 | Now, we don't have to wrap this code
inside of a MovieClip in parentheses
| | 03:19 | because this is a display
object container already.
| | 03:21 | So that has the removeChild method.
| | 03:23 | So, you don't need to wrap that
in MovieClip if you don't want to.
| | 03:28 | But we will need to do that
for boarder_mc.gotoAndPlay.
| | 03:31 | So we'll type that again, MovieClip,
capital M, capital C, parentheses,
| | 03:37 | parent inside the parentheses, dot after the
parentheses, and then we can have boarder_mc.
| | 03:44 | Now let's see what we get. Test the movie.
| | 03:46 | We have just as many errors.
| | 03:51 | Now, before we test the movie,
I'm going to save the file.
| | 03:54 | Now I'll test the file again,
and I only have one error.
| | 04:03 | Flash says undefined property keyPressed.
| | 04:11 | So Flash is telling me there's a problem
with removing this EventListener on the
| | 04:16 | main Timeline, because it doesn't
recognize this keyPressed function.
| | 04:21 | It's not defined here;
| | 04:22 | it's defined in the main Timeline.
| | 04:25 | In this case, it may be better to
simply run a function on the main
| | 04:29 | Timeline from here.
| | 04:31 | So let's just cut this code, and then
type MovieClip, capital M, capital C, in
| | 04:40 | parentheses, parent, after the
parentheses a dot, and then we'll run a block of
| | 04:47 | code called disable.
| | 04:48 | Now we haven't created that yet.
| | 04:49 | We'll create it right now.
| | 04:51 | So disable, some parentheses and a
semicolon, save the file, go back to
| | 04:56 | Problems.fla, click the first keyframe of the
actions layer and open up the Actions panel.
| | 05:02 | In here, we'll create a function called disable.
| | 05:05 | So function, space, disable, some parentheses,
colon, void, some curly braces, and inside
| | 05:13 | of the curly braces, paste
the code that you just cut.
| | 05:18 | Now test the movie.
| | 05:19 | We don't have any errors.
| | 05:21 | We can control the
skateboarder with the keyboard.
| | 05:25 | When he hits the trashcan, he falls over.
| | 05:32 | Then we get this, "Cannot access a
property or method of a null object reference."
| | 05:39 | That's inside of the checkCollision function.
| | 05:42 | So let's go there and
take a look at what's wrong.
| | 05:45 | See if you can find out the problem.
| | 05:48 | To find it out, walk through the code,
line by line, and see if you can find
| | 05:54 | anything that could
possibly be undefined in this code.
| | 05:57 | So we have this code.
| | 05:59 | It looks all right, checking against
the hitTestObject which is going to be the
| | 06:03 | can, we have boarder gotoAndPlay.
| | 06:07 | That's not going to be null.
| | 06:09 | So there won't be a problem there.
| | 06:10 | Then we have parent.removeChild(this).
| | 06:15 | So after the child is removed,
then this code may create a problem.
| | 06:20 | So we'll just select that line of
code that says parent.removeChild(this),
| | 06:25 | cut the code, and then paste that at the
bottom of this function as the very last thing.
| | 06:30 | So, we don't take off the child until
after everything else is taken care of.
| | 06:35 | So let's test the movie
again after we save the file.
| | 06:40 | Run into the trashcan,
and we don't get any errors.
| | 06:45 | So, whenever you're going to remove an
object from the stage, make sure it's the
| | 06:51 | last thing that you have that object do.
| | 06:53 | Now, as you can see, things get a lot
more complicated when you start working
| | 06:58 | with class files, but it's much more
rewarding. Because I've already created
| | 07:04 | this Obstacle code,
| | 07:06 | if I go back to the main Timeline, and
let's say I want to make a different type
| | 07:10 | of Obstacle, like this cat, I can put
the cat in the way of the skateboarder,
| | 07:15 | I can right-click the cat, choose
Properties, check Export for ActionScript, set
| | 07:21 | the Base Class to Obstacle and then click OK.
| | 07:26 | Flash is telling me that the Cat class
doesn't exist, and it's going to create it for me.
| | 07:29 | I'll click OK, test the movie, make the
skateboarder run into the cat, and it's
| | 07:37 | an obstacle, just like the trashcan was.
| | 07:40 | So I'll close the window.
| | 07:42 | So by using these object-oriented
techniques, it'll take a little bit more
| | 07:47 | time upfront, but in the long run,
you'll save large amounts of time in
| | 07:51 | building your applications.
| | Collapse this transcript |
| Understanding packages| 00:00 | The more you get into object-oriented
programming by creating ActionScript
| | 00:04 | classes, the more you're
going to want to stay organized.
| | 00:08 | The best way to do that is by using packages.
| | 00:12 | Packages are simply folder
structures for your class files.
| | 00:15 | Let's take a look at
Finder at my folder structure.
| | 00:20 | In the same directory as my FLA
file, I have a folder called com.
| | 00:24 | Inside of that folder,
there is a folder called lynda.
| | 00:27 | Clearly this corresponds to lynda.com.
| | 00:32 | The reason why I'm using a reverse
domain name structure is because this is the
| | 00:36 | easiest way to stay organized.
| | 00:39 | At the root level, I could have a few
folders, like Com, Net, Org, Me, et cetera.
| | 00:46 | In each of those folders, I can have
organized all the domains that I'm working on.
| | 00:54 | So if I'm working on lynda.com I
have a com folder, then a lynda folder
| | 00:57 | inside that folder.
| | 00:58 | If I'm working on Explore california.org, then
I can have Explore California in my Org folder.
| | 01:05 | So obviously, having the end part of
the domain name at the root level makes
| | 01:11 | more sense than having the middle
part of the domain name at the root level,
| | 01:14 | because you could be working on a .com
version of a site and a .me version of
| | 01:20 | the site, and it could be two different things.
| | 01:21 | So the system always works
because all domain names must be unique.
| | 01:28 | So inside of the domain name folder, I have my
class files that are related to that domain.
| | 01:32 | Of course, if you wanted to, you could
organize it further by having a folder
| | 01:37 | called Games, for example.
| | 01:39 | But for now, this will do.
| | 01:41 | So in there I have my Boarder.as file.
| | 01:44 | When you have your files organized
into folders like this, you need to update
| | 01:47 | the code in ActionScript.
| | 01:49 | So let's go back to Flash,
and click on Boarder.as.
| | 01:54 | The code is already updated here.
| | 01:55 | So it says package, and then
there's a space, and then com.lynda.
| | 02:02 | So I'm using a dot structure,
| | 02:04 | just like flash.display.MovieClip
refers to a Movie Clip. I am using com.lynda
| | 02:10 | to refer to this Boarder file.
| | 02:11 | That's an important step when
you're working with a package.
| | 02:16 | So let's go back to packages.fla.
Then I'm going to connect the Boarder
| | 02:20 | movie clip to that class.
| | 02:23 | So right-click Boarder in the
library and choose Properties.
| | 02:27 | In the Symbol Properties window,
check Export for ActionScript.
| | 02:30 | In class, change Boarder to com.lynda.Boarder.
| | 02:35 | This is an important thing to know
because it's a common mistake for people that
| | 02:39 | are new to this technique.
| | 02:41 | You have to type out the full package name here.
| | 02:43 | So type that out, click OK.
You shouldn't get any error or warning messages.
| | 02:50 | I should test the movie, and the
boarder should move left and right.
| | 02:59 | So you can stay organized by putting
your files in folders using a reverse
| | 03:04 | domain structure, changing your classes
to support the packages, and when you
| | 03:11 | connect those classes to symbols,
make sure to use the full package name.
| | Collapse this transcript |
| Working with ActionScript source paths | 00:00 | Once in a while, you'll write code so
useful you want to add it to Flash and use
| | 00:05 | it all the time, just like
the other built-in classes.
| | 00:08 | Using source paths, it's easy to do that.
| | 00:11 | On the stage, I have a movie clip called
boarder_mc, that's an Instance of: Boarder.
| | 00:17 | Boarder is linked to com.lynda.boarder.
| | 00:20 | When I test the movie, you'll see
that it has keyboard interactivity.
| | 00:26 | If you look at my folder structure on
my computer, you'll see that in the start
| | 00:31 | folder, I have the com folder at
the same level as my FLA file.
| | 00:35 | By using a source path, I can move all
of my ActionScript classes to another
| | 00:40 | location on my hard drive and have
all my FLA files reference that point.
| | 00:45 | So I'll create a New Finder
window and go to my Documents folder.
| | 00:50 | In the Documents folder, I'll
create a folder called classes.
| | 00:55 | Now, I'll click and drag the
com folder into that folder.
| | 00:59 | So now there is no other file, along with my FLA.
| | 01:02 | All my files and my classes are inside of
that classes folder in my documents folder.
| | 01:06 | So let's go back to the Source
file and then test the movie.
| | 01:11 | Notice the keyboard interactivity is disabled.
| | 01:14 | So that connection is broken.
| | 01:17 | What I need to do is connect to that
classes folder and tell Flash that
| | 01:21 | that's where my ActionScript classes are.
| | 01:24 | You can do this on a per-FLA file basis,
or you can set this as a Flash preference
| | 01:29 | so it'll work with every FLA file.
| | 01:32 | Let's look at both ways of how to do that.
| | 01:35 | The first one is for one FLA file.
| | 01:38 | Deselect everything and
go to the Properties panel.
| | 01:42 | In the Properties panel, click the Edit
button next to ActionScript Settings.
| | 01:47 | This enables you to change a few
settings related to ActionScript.
| | 01:51 | For now, let's focus on Source path.
| | 01:54 | Click the Source path tab
and then click the Plus button.
| | 01:58 | After clicking the Plus button, click
the folder icon to browse for a folder.
| | 02:03 | I am going to go to my classes
folder and then click Choose.
| | 02:07 | Remember, if you save these files in
a different folder on your hard drive,
| | 02:10 | you'll have to pick that folder here.
| | 02:13 | So I'll click Choose and then click OK.
| | 02:16 | If I test the movie again, the
keyboard interactivity is restored.
| | 02:24 | So let's go back to ActionScript Settings,
select that Source path and remove it
| | 02:29 | by clicking the Minus sign and then click OK.
| | 02:34 | Test the movie again.
| | 02:36 | Keyboard interactivity is disabled.
| | 02:37 | So now let's look at setting up a
source path for all of your FLA files through
| | 02:45 | ActionScript preferences.
| | 02:48 | Go to Flash > Preferences and
then click the ActionScript category.
| | 02:52 | In the ActionScript category,
click ActionScript 3.0 Settings.
| | 02:57 | In here you can add a Source path, just
like you did before, by clicking the Plus
| | 03:01 | button and then clicking the folder icon.
| | 03:04 | Browse to the classes folder and click Choose.
| | 03:08 | Notice it's there in the Source path.
| | 03:10 | Keep in mind if you just opened the
final version of this file, this is not
| | 03:15 | going to work, because this is the setting
in Flash on my computer, not on your computer.
| | 03:20 | So you'll need to follow the
steps in order to get it to work.
| | 03:23 | So click OK, and then click
OK to close Flash Preferences.
| | 03:29 | Test the movie again, and
the connection is restored.
| | 03:33 | So I can put all of my ActionScript
classes in an organized place on my hard drive.
| | 03:39 | Then I don't have to worry about
bringing them along with the FLA files if I
| | 03:43 | ever move the FLAs. So you can see
that source paths can save massive amounts
| | 03:48 | of time, enabling you to reuse
code seamlessly, just like code already
| | 03:53 | built-in to Flash.
| | Collapse this transcript |
|
|
6. Using Symbol Linkage to Build a Simple Drag-and-Drop GameViewing the finished game| 00:00 | Let's take a look at the drag and drop game
we're going to build throughout this chapter.
| | 00:05 | I'll test the movie of this FLA file.
| | 00:07 | We'll see it in action.
| | 00:09 | So you can click and drag little
elements and drop them at a specified spot on
| | 00:16 | the California map.
| | 00:20 | When you drop an object on the wrong spot,
it snaps back to its original position.
| | 00:27 | But if you drop it in the
right spot, it slides into place.
| | 00:34 | Throughout this chapter we're going
to make this application, step-by-step.
| | 00:40 | So we'll add all the interactivity from scratch.
| | 00:42 | So now that you have an idea of what
you're going to build in this chapter,
| | 00:48 | you're ready to start creating this app.
| | Collapse this transcript |
| Viewing the FLA file| 00:00 | Before you start writing your code for
this game, let's take a tour of the file
| | 00:04 | to see how the FLA is structured.
| | 00:07 | You should take particular note of
this if you do not have access to
| | 00:10 | the exercise files.
| | 00:13 | On the Stage, you'll see the different
elements that are going to be made draggable.
| | 00:17 | So I have one called mission, hollywood,
grapes, redwood, goldengate - all one
| | 00:30 | word - all lowercase, joshuatree - all
one word - all lowercase, laketahoe - all one
| | 00:38 | word - all lowercase and then
deathvalley - all one word - all lowercase.
| | 00:44 | Also, I have copies of the movie
clips that you can't see, because I
| | 00:52 | turned down the alpha.
| | 00:53 | For example, right here, I have selected
deathvalley_target, deathvalley spelled
| | 01:00 | all lowercase, and then I
added _target to the end.
| | 01:04 | So then you can see
mission_target, hollywood_target,
| | 01:10 | joshuatree_target, et cetera.
| | 01:14 | So in the exact spot where I want the
target position to be for each movie clip
| | 01:19 | I've put a copy there.
| | 01:24 | Not only do I put a copy there, but I
copied the movie clip, and I made it a
| | 01:29 | separate movie clip altogether.
| | 01:30 | So we have the LakeTahoeTarget
movie clip, which is different from the
| | 01:35 | LakeTahoe movie clip.
| | 01:39 | So if you're creating this on your own,
just create duplicates of each of the
| | 01:42 | movie clips you make for the draggable
objects and then put them in the right
| | 01:46 | place and turn down the
alpha all the way to zero.
| | 01:51 | It's very important that you're
using copies of the movie clips that are
| | 01:55 | named _target, and that the movie clips
symbols themselves are different from
| | 02:01 | the draggable once.
| | 02:03 | So once you have all of your files set
up just like mine, you're ready to start
| | 02:07 | writing the code for this application.
| | Collapse this transcript |
| Creating the DragDrop and Map classes| 00:00 | The first step in writing the code
for this app is to create the DragDrop
| | 00:04 | class and the Map class.
| | 00:07 | The first thing we'll do
is create the Map class.
| | 00:10 | I'll do this by deselecting everything
and then going over to the Class area in
| | 00:16 | the Properties panel and by
clicking Edit class definition.
| | 00:19 | This will open up a window for
creating a new ActionScript class.
| | 00:25 | I'll choose Flash Professional as my
editor, and for the Class name, I'll type Map.
| | 00:30 | And then I'll click OK.
| | 00:32 | Since I clicked that button from the
Properties panel for the document class,
| | 00:38 | Flash already knew that I wanted to
extend the MovieClip class and added the
| | 00:44 | import line of code for me.
| | 00:45 | I'll click the button to auto
format the code, save the file. Flash
| | 00:53 | automatically goes to the same directory
I am in, and automatically gives me the
| | 00:58 | appropriate file name, which
is the same name as my class.
| | 01:01 | So I click Save As, and the file is saved.
| | 01:05 | Now to click the DragDrop class, I'll
go to File > New, choose ActionScript 3.0
| | 01:12 | Class, and then click OK.
| | 01:16 | I'll choose Flash Professional for my
editor and then type DragDrop, capital D's.
| | 01:26 | I'll autoformat this file,
and now I'll import some code.
| | 01:32 | So I import flash.display.*.
| | 01:36 | So import all of the display object classes.
| | 01:39 | Remember, that's what that wildcard does.
| | 01:44 | So one of the display classes is MovieClip.
| | 01:45 | Then I'll import all the event classes.
| | 01:48 | So import flash.events.*.
| | 01:54 | Then I'll extend the DragDrop class for this.
| | 01:57 | All of these draggable elements are
just one frame, so I can use the Sprite
| | 02:00 | class instead of the MovieClip
class, to have optimized code.
| | 02:07 | So I'll save the file.
| | 02:10 | Flash will automatically name the file for me.
| | 02:12 | So I'll just click Save As.
| | 02:14 | One more thing I want to do is import
some additional code into the Map class.
| | 02:20 | So I'll go back to the Map class.
| | 02:21 | I'm going to import all of the display
classes and all the event classes, as well.
| | 02:26 | So I can actually highlight those two
lines of code I just wrote in DragDrop,
| | 02:33 | copy them with Command+C or Ctrl+C,
go over to the Map file, highlight the
| | 02:38 | import line of code that's already there,
and then paste the code with Command+V
| | 02:41 | or Ctrl+V. Now again, make sure to
save this file after you change it.
| | 02:45 | So now we've set up the basic
classes that we're going to be using for
| | 02:49 | this application.
| | Collapse this transcript |
| Linking the draggable class to Library symbols| 00:00 | Now we'll link the DragDrop class to
all the library symbols that can be
| | 00:04 | dragged in the game.
| | 00:06 | We'll start with DeathValley.
| | 00:08 | Right-click, choose Properties,
check Export for ActionScript.
| | 00:14 | Now remember the difference
between Class and Base Class.
| | 00:19 | If we were to set DragDrop as the
Class, then we could not recycle DragDrop.
| | 00:25 | So what we want to do is set it as the
Base Class and have Flash automatically
| | 00:29 | create the main class, which is going
to be DeathValley in this case and
| | 00:34 | GoldenGate and Grapes and so on, without
us having to write that code ourselves.
| | 00:39 | So let's go to Base Class,
and then we'll type DragDrop;
| | 00:43 | capital Ds - Capital D for
Drag and capital D for Drop.
| | 00:48 | So click OK and you should get a
warning message but not an error message.
| | 00:53 | A definition for this class
could not be found in the class path.
| | 00:56 | That's right, because we want Flash
to create the DeathValley class for us.
| | 00:59 | We don't want to create that ourselves.
| | 01:01 | We are using DragDrop for the Base Class.
| | 01:03 | So click OK, and then
we'll just repeat this process.
| | 01:07 | So for GoldenGate, right-click, choose
Properties, check Export for ActionScript.
| | 01:12 | For the Base Class, type DragDrop.
| | 01:15 | Now you may want to copy DragDrop,
since you are going to be doing it several
| | 01:18 | more times, so click OK.
| | 01:22 | You can check "Don't show again" if
you want, so you don't have to see
| | 01:24 | that message again.
| | 01:27 | Go to Grapes, paste over the Base
Class, click OK, down to Hollywood.
| | 01:56 | So just keep moving through all of these
movie clips until you've gotten them all.
| | 02:01 | Make sure not to do anything to
the target movie clips, though.
| | 02:05 | Those are going to have different
interactivity that's not defined in an external class.
| | 02:22 | So you should have DeathValley,
GoldenGate, Grapes, Hollywood, JoshuaTree,
| | 02:28 | LakeTahoe, Mission and Redwood.
| | 02:31 | Once you've done all that, you should be
able to test the movie and not have any errors.
| | 02:37 | So it looks like everything is working
properly. So now we successfully linked
| | 02:43 | the DragDrop class to all
of the necessary symbols.
| | Collapse this transcript |
| Adding drag-and-drop functionality| 00:00 | The next step in making the game is
to add drag and drop functionality.
| | 00:04 | Now you may already be familiar
with adding drag and drop functionality
| | 00:07 | through code snippets.
| | 00:09 | This time we are going to write the
code all by hand, so you get some more
| | 00:12 | practice and become more
comfortable writing the code.
| | 00:14 | The first thing I am going to do is go in
the constructor, and right below where
| | 00:19 | it says, constructor code, I am going to type
| | 00:28 | (MouseEvent.MOUSE_DOWN, and
then we'll run a function called drag.
| | 00:41 | So we will create the drag function now.
| | 00:48 | Go down a few lines below the
constructor, so right below that next curly brace,
| | 00:53 | and then type function drag(evt:
MouseEvent), type :void, all lowercase and
| | 01:10 | write some curly braces.
| | 01:11 | Now to drag an object, all you need
to do is write this one line of code,
| | 01:16 | startDrag, with capital D. Close out
the parentheses. Type a semicolon.
| | 01:23 | Now to test out the drag code, save
this file and then test the movie.
| | 01:30 | You should be able to drag any one of these
objects if you click your mouse down, there we go.
| | 01:34 | Now it looks like the only way to
drop one is to pick up something else.
| | 01:41 | We will look at how to
fix this in just a second.
| | 01:46 | Right above startDrag, let's add an
EventListener so we can stop dragging as
| | 01:52 | well, but instead of adding the
EventListener just directly to this object, like
| | 01:57 | we are doing with addEventListener,
| | 01:59 | we are going to add it to the Stage.
| | 02:00 | So stage.addEventListener and event
is going to be MouseEvent.MOUSE_UP.
| | 02:10 | Remember, that's all caps.
| | 02:14 | Now we are adding it to the stage
because if someone clicks and drags an object
| | 02:18 | around and releases the mouse button,
they might drag really fast and release
| | 02:23 | the mouse over something that's not
the object that are meaning to drag.
| | 02:26 | Now in case that happens, we are
applying this EventListener to the stage, so
| | 02:31 | wherever they release their
mouse, the object will drop.
| | 02:34 | Just type a comma and then type drop,
and then close up the parentheses, and
| | 02:37 | then type a semicolon.
| | 02:41 | So now let's just copy and paste the
drag function, and change the name to drop.
| | 02:49 | Change stage.addEventListener to
stage.removeEventListener and then change
| | 02:54 | startDrag to stopDrag.
| | 02:59 | Save the file and test the movie. We should
then be able to click and drag and drop
| | 03:07 | all the draggable objects.
| | 03:09 | So just in case, you should try to drag
and drop each one of these. It looks like
| | 03:16 | it works for every one.
| | 03:19 | So now the drag and drop functionality
is there, and all the objects that link
| | 03:24 | to this class are draggable.
| | 03:26 | Again, you can see the power of writing
this code in a class file, instead of
| | 03:31 | writing it in a main timeline.
| | 03:33 | It's easy to recycle, and it
applies to as many objects as you want.
| | Collapse this transcript |
| Saving and resetting an object's position| 00:00 | Now that all other right objects are
draggable, the next step is to be able to
| | 00:04 | save and reset an object's position
if it's dropped in the wrong place.
| | 00:09 | To do that, we're going to have to
create variables inside of this class.
| | 00:14 | Remember that variables connected to
an object, as these variables will be,
| | 00:19 | are called properties.
| | 00:21 | So we'll create our properties
right below the open curly brace for
| | 00:26 | public class DragDrop.
| | 00:28 | So go down right there and then type
'var orig,' short for original, X then
| | 00:38 | datatype it to a Number and
then just type a semicolon.
| | 00:42 | You can do this when you create a
variable or property to tell Flash
| | 00:45 | you are going to give it a value later on.
| | 00:47 | So we'll just do the same thing
for the Y position, origY:Number;
| | 00:55 | So these values are going to hold the
original X and Y positions of each of the
| | 01:02 | drag and droppable objects.
| | 01:04 | We'll store those values
in the constructor method.
| | 01:08 | Remember, this code runs
whenever the object is initialized.
| | 01:13 | So when the application first loads,
you have access to the original X and Y
| | 01:18 | positions of all of the objects.
| | 01:21 | So let's capture them here, origX = x;
| | 01:27 | that's the X position of the object,
and then origY = y, and that's it.
| | 01:35 | So we capture them there, and then
when you drop the object, we'll snap them
| | 01:40 | back to the original position.
| | 01:42 | So scroll down, and at the bottom of the
drop function, or rather the drop method,
| | 01:51 | remember that a method is the name
for a function attached to an object,
| | 01:54 | we'll add the code.
| | 01:56 | x = original X, or origX, and
the same thing for Y. So y = origY.
| | 02:06 | So wherever you drop it, it will snap back
to the original X and original Y position.
| | 02:11 | Save the file and test the movie.
| | 02:16 | Click and drag, and drop
the object wherever you want.
| | 02:19 | It'll snap back to its
original position, as simple as that.
| | 02:32 | You may notice, as you are dragging
these objects around, that sometimes they go
| | 02:35 | under other objects.
| | 02:39 | Let me show you how to fix that real quick.
| | 02:45 | In the drag method, at the very
bottom, add one line of code.
| | 02:49 | It's going to be parent.addChild(this).
| | 02:57 | So what that will do is re-add the
current object you are dragging to the
| | 03:02 | parent object's display list, the parent
being the main timeline, and will bring
| | 03:06 | that object to the front.
| | 03:08 | So let's save the file and test the movie,
and you can click and drag any object
| | 03:16 | over any other object, and it
will always be in the front.
| | 03:21 | So now we have our drag and drop
functionality completely set up.
| | 03:25 | Every time you drop an object in the
wrong place, and for now, of course, the right
| | 03:29 | place, the object snaps
back to its original position.
| | Collapse this transcript |
| Giving a target drop object to the draggable objects| 00:00 | Now we will connect each of the
draggable objects to a target object so we can
| | 00:04 | control what happens when an
object is dropped in the right place.
| | 00:08 | If you remember, each object, like the
Mission object here, corresponds to a
| | 00:14 | target object that has the same
instance name but ends with _target.
| | 00:22 | Remember that when you test the movie
everything snaps back to its original position.
| | 00:33 | So let's set up the target
object functionality now.
| | 00:36 | Go to DragDrop.as, and in here we will
create another property called target.
| | 00:44 | Right under original y (origY) create
a property called target, and you can
| | 00:50 | datatype that to a display object.
| | 00:55 | Remember, a display object
can be any visual object.
| | 00:59 | For now our targets are movie clips,
but if we wanted to reuse this code with
| | 01:02 | another type of visual object, this generic
display object will work for that as well.
| | 01:08 | So now scroll down. Find the drop method.
| | 01:14 | Again, method and function
is pretty much synonymous.
| | 01:18 | I am calling it a method because
it's inside of the DragDrop class.
| | 01:21 | So right below stopDrag, I'm
going to create an if statement.
| | 01:26 | What I want to do is check to see whether
this object is touching the target object.
| | 01:35 | So I type hitTest, with a capital T,
Object, with a capital O, and some parentheses,
| | 01:43 | and then I pass in target.
| | 01:45 | So if the object that you drop is
touching the target object, which by the way
| | 01:50 | we haven't set yet so don't worry
about that, then we will run the code inside
| | 01:54 | of these curly braces.
| | 01:55 | So the first thing we are going to do
is we are going to hide the object that
| | 02:00 | you dropped, and instead of putting
the object that you dropped into place,
| | 02:05 | we are still going to put it back to
it's original position. We are just
| | 02:09 | going to show the target object.
| | 02:13 | If that's confusing at all, just
write the code and take a look at how it
| | 02:17 | works in just a second.
| | 02:19 | Type visible = false so we are hiding
the object that you dropped and disabling
| | 02:27 | it's interactivity - that's
what the visible property does.
| | 02:29 | Go to the next line. Then we
are going to show the targets.
| | 02:33 | So target.alpha = 1.
| | 02:38 | So we are showing the target there, and then
we will run a method inside of the map class.
| | 02:45 | We haven't created this method yet,
but we are going to call it 'match.'
| | 02:48 | So go down to the next line and then
type parent, because remember this is
| | 02:56 | on the main timeline so the parent object
would be the map class or the document class.
| | 03:01 | So parent.match and some
parentheses and semicolon.
| | 03:08 | Now take a second to think about anything that
could possibly be wrong with this line of code.
| | 03:14 | What do we have to add to
avoid getting any errors?
| | 03:19 | We have to tell Flash to treat
parent as a different type of object.
| | 03:24 | In this instance, I am going to tell Flash to
treat parent as an instance of the Object class.
| | 03:32 | So instead of MovieClip,
I am going to use Object.
| | 03:35 | The reason why I am doing that is
because object always works.
| | 03:39 | Again, if I ever change around my code
a little bit to reuse this, and I use a
| | 03:44 | different type of class for the
parent class, my code won't break.
| | 03:49 | So let's save this file and jump over
to Map.as. And here what we are going to
| | 03:58 | do is connect each of the objects on the stage
that you can drag and drop with the target object.
| | 04:06 | Now before when we worked in DragDrop,
we didn't connected to the target object,
| | 04:10 | we just specified what happens
when it hits its target object.
| | 04:15 | So let's go back map.as
and set up the code here.
| | 04:19 | The first thing I am going to do is
create a property, right below the open curly
| | 04:24 | brace, under public class Map.
| | 04:28 | So I'll create a new line there and
type var dragdrops, all lowercase.
| | 04:36 | Datatype it to be an array and
then just type a semicolon there.
| | 04:42 | So we are creating our property.
We will give it a value later on.
| | 04:47 | Scroll down into the constructor method.
| | 04:50 | Remember, the constructor always
has the same name as the class.
| | 04:56 | Below the constructor code comment,
we will give a value to dragdrops.
| | 05:01 | So type dragdrops equals and then
square brackets for shorthand array notation,
| | 05:09 | and in the square brackets, type the
following: mission, hollywood, grapes,
| | 05:23 | deathvalley, redwood, goldengate,
joshuatree - no space all lower case - and
| | 05:41 | laketahoe - also no spaces, all lowercase.
| | 05:44 | Now notice this correspond to all
of the draggable instances on stage.
| | 05:50 | Before you go forward, you want to make
sure that you have typed these all correctly.
| | 05:53 | So save this file, make sure to save
dragdrop.as and then test the movie, and
| | 06:01 | you shouldn't see any errors.
| | 06:05 | It looks like everything is working okay.
| | 06:08 | If you see any errors, just go through
all the code you just typed in this movie
| | 06:12 | and make sure that everything is correct.
| | 06:16 | We could write code like mission.
target equals mission_target,
| | 06:23 | and then repeat that code for
each of the objects inside of
| | 06:27 | the dragdrops' array.
| | 06:29 | However, now that the object are stored
inside of an array, we can just create a
| | 06:33 | loop and write the code once and
have Flash to do all of the work.
| | 06:38 | So let's take a look at how that works.
| | 06:41 | Create a for loop. Just type for,
some parentheses, and some curly braces.
| | 06:48 | In the parentheses, we will create a
variable called i, datatype it to a positive
| | 06:54 | integer that's uint - all
lowercase - set equal to 0, and
| | 06:57 | we will run this loop as long as i
is less than dragdrops.length,
| | 07:05 | and then we will increment
i by one each time the loop runs.
| | 07:11 | So we are going to run this on
each object in the dragdrops array.
| | 07:14 | So before we write the code inside of the
loop, I am going to add one line above the loop.
| | 07:20 | I am going to create a variable
called current object, so type var currentObject
| | 07:26 | capital O, datatype that to DragDrop.
| | 07:33 | One of the new features in Flash
CS5 is that you get code hinting for
| | 07:36 | your custom classes,
so we have it right here.
| | 07:38 | It's nice and convenient. Don't give
it a value now; just type a semicolon.
| | 07:44 | This is going to represent the current
object in the array as we loop through it.
| | 07:50 | So inside of the loop, type
currentObject, capital O, equals, dragdrops, all
| | 07:59 | lowercase, index i, or put i in
square brackets, and then a semicolon.
| | 08:05 | So each time the loop runs, the current
object is going to be mission and then
| | 08:10 | hollywood and then grapes, etc.
| | 08:13 | So let's go down to the next line,
and then what we are going to do is set
| | 08:17 | the target property.
| | 08:19 | So currentObject,
capital O.target, see how that property
| | 08:26 | comes up in the hinting window, even
though w just created it a few minutes ago.
| | 08:29 | It's the magic of Flash CS5. So we will
type that and then space = space.
| | 08:38 | And what we are going to
do is set it equal to the
| | 08:42 | object that corresponds to the name of
the current object, which is mission for
| | 08:47 | example, or hollywood for
example, and then add on _target.
| | 08:52 | To do that, we are going to
use the get child by name method.
| | 08:56 | So type getChild, capital C, By
capital B, Name with a capital N, and some
| | 09:03 | parentheses and a semicolon.
| | 09:05 | Now here we need to type
in the name as a string.
| | 09:09 | So we have type in currentObject
capital O, .name to get
| | 09:15 | the current object's name as a string.
| | 09:16 | So this is going to be mission or
hollywood, but not as the object - as a string,
| | 09:23 | so, text and not a movie clip, and
then we need to tack on _target.
| | 09:28 | So after that, type a space then a plus
and space, and in quotes, type _target.
| | 09:36 | So now save the file, and we'll just add a
little bit more code to this Map file, and
| | 09:42 | then we can test it out and see how it works.
| | 09:44 | So scroll down, and right below the
constructor - now this is going to be kind
| | 09:51 | of confusing which curly brace to use because
we have four closed curly braces in a row -
| | 09:56 | so what you can do is scroll up and
look right under the constructor names of
| | 10:00 | public function map, and there
is an open curly brace there.
| | 10:04 | If you go straight down, the closed
curly brace is the one that corresponds
| | 10:10 | to the constructor.
| | 10:12 | So we have the closing curly brace for
the for loop and then the constructor.
| | 10:15 | We want to put it after that.
| | 10:17 | If we put it after the next closed
curly brace, it would be outside of the
| | 10:22 | class declaration, and if we put it
after the for loop, then it would be inside
| | 10:27 | of the constructor method.
| | 10:28 | So we are going to define the match
method as a method inside of the class.
| | 10:33 | So type public, and the reason why we are
typing public is so we can access this
| | 10:38 | method from inside the dragdrop class.
| | 10:42 | Remember, we made a reference to this
function earlier in this movie, but we
| | 10:45 | didn't create it yet, so we are creating it now.
| | 10:47 | It's public function match, and some
parentheses, colon void, and some curly braces
| | 10:56 | We will add the code that this function runs
later on, but for now we just want to define it.
| | 11:02 | So save the file, and you should be
able to test the movie without any errors.
| | 11:09 | So click and drag an object to the right place.
| | 11:13 | If it works for one object, it should work
for every object and looks like it.
| | 11:20 | Oh, that was a wrong one.
| | 11:22 | You should know this as a California native, huh?
| | 11:30 | So I close this window, and if you
want to make one more change, you can
| | 11:36 | actually add the hand cursor to
appear when you roll over a movie clip that
| | 11:40 | you can drag or drop.
| | 11:41 | Let's take a look at how to do that real quick.
| | 11:43 | Go to DragDrop.as. I am going to add one
more line to the constructor method and
| | 11:51 | for this line, just type buttonmode,
capital M, equals true, and a semicolon.
| | 11:58 | Save the file, test the movie,
and there is the hand cursor.
| | 12:11 | So now that we are in DragDrop.as and we
have written all the code, scroll down,
| | 12:16 | and we will review the drop method.
So here is what this code says:
| | 12:22 | if the object that you drop is
touching its target, which we set in the Map
| | 12:26 | class, you are going to hide the object
that you dropped and show the target.
| | 12:35 | So what you are actually saying when
you let go of the object that you drop
| | 12:39 | is the target object showing.
| | 12:42 | The object that you dropped is always going
to go back to its original x and y position.
| | 12:47 | The reason why we are doing that is to
make it easy to reset the game later on.
| | 12:52 | Then what happens is we are running the Map
classes match method that we just defined.
| | 13:00 | So now when an object is dropped in the
right place, it snaps into position, and
| | 13:05 | the interactivity for that object is
disabled. In addition to that, we have set up
| | 13:11 | a hand cursor for when you roll
over any of the interactive objects.
| | Collapse this transcript |
| Showing a Win screen| 00:00 | Once a game is finished, we will show a
screen indicating the game has been won.
| | 00:05 | This screen is inside of a
movie clip that I called 'win.'
| | 00:09 | So if you look at the Properties panel
you see it's just win, all lowercase, and
| | 00:14 | there's really nothing special to it.
| | 00:16 | There is a button in there, but the
interactivity is all going to be on the
| | 00:20 | whole movie clip, and not just on that button.
| | 00:23 | So I am not going to go
inside the movie clip for now.
| | 00:25 | So if you don't have the exercise
files, you can just put anything you want
| | 00:31 | inside of a movie clip.
| | 00:32 | But it should take up the full
width and height of the stage.
| | 00:35 | So let's go over to Map.as. In here, we
will create some new properties under
| | 00:43 | the dragdrops property.
| | 00:44 | Create one called numOfMatches, capital
O, capital M. This is going to represent
| | 00:53 | how many matches the person got when
they are playing the game. And so we will
| | 00:58 | use that to count against the number
of items inside of the dragdrops Array.
| | 01:03 | So if they have a number of matches
that is the same as the total number of
| | 01:07 | objects in the dragdrops array, that means
they dropped everything in the right spot.
| | 01:14 | So in that case, they have won the game,
so we want to show the winning screen.
| | 01:18 | So let's datatype this to a uint,
and we will set it equal to zero.
| | 01:23 | Then we will cerate a variable or
property called speed right under that.
| | 01:30 | That's going to be a number.
| | 01:31 | I will give that a default value of 25.
| | 01:35 | Now speed is going to represent how fast
the win screen comes up, because we are
| | 01:38 | going to have it animate using ActionScript.
| | 01:42 | Now scroll down to the match function.
| | 01:48 | In here, type numOfMatches, capital O
capital M, plus, plus.
| | 01:55 | Remember, the plus plus
operator increments a value by one.
| | 01:59 | So it adds one to the current value of it.
| | 02:01 | So each time it get a match, we are going
to add to the value of numOfMatches.
| | 02:06 | And just like you would expect, minus
minus decrements a value by one.
| | 02:10 | So it takes one away from the current value.
| | 02:11 | But for now, we just
need the plus plus operator.
| | 02:14 | So go to the next line of code and
create an if statement, and here we are going
| | 02:19 | to check to see if they won the game.
| | 02:23 | So they won the game when numOfMatches
is equal to the total objects inside of
| | 02:28 | the dragdrops array.
| | 02:30 | So inside the parentheses here, we will type
numOfMatches, capital O, capital M, space,
| | 02:37 | equals, equals, space.
| | 02:39 | Remember that two equal signs means 'is equal to.'
| | 02:41 | That's the comparison operator
that you use when you are using an if
| | 02:46 | statement - different from the single equal
sign which is used to set a value in ActionScript.
| | 02:52 | So then type dragdrops.length.
| | 02:57 | That signifies the amount of items that
are inside of the dragdrops array, which
| | 03:01 | is every drag-and-dropable object.
| | 03:04 | So when we have a match for every drag-
and-dropable object, then we won the game.
| | 03:08 | So we are going to put the winning
code right in this if statement here.
| | 03:12 | So type win.addEventListener, capital E,
capital L, put in some parenthesis
| | 03:21 | and a semicolon, and here I am going to
type Event, capital E .ENTER_FRAME all
| | 03:28 | caps. This is going
to run with every frame of the movie.
| | 03:33 | So it's going to run 24, 30, 60 times
a second, depending on your frame rate.
| | 03:37 | So comma and space, and then we'll run
a method called winGame, capital G, so we
| | 03:43 | will define that method right now.
| | 03:47 | Right below the Match method, create a
new method. This time we can just type
| | 03:54 | function, we don't have to type the word 'public.'
| | 03:55 | So we will call it winGame, capital G,
and in the parentheses, that will receive an
| | 04:00 | event with the datatype of Event.
| | 04:04 | Notice this parameter is blue saying it
is a built-in key word in Flash, but I
| | 04:09 | am using it anyway as my custom
parameter, and in this case, it's actually okay.
| | 04:15 | You will notice that if you had a code
snippet that has an event handler, Flash
| | 04:19 | will actually use this word Event.
| | 04:21 | So if you don't like that, you can just
simply type evt, but personally I mostly
| | 04:28 | use the word event here, so your call.
Colon, void, and some curly braces,
| | 04:35 | and here we are going to
have the win movie clip animate.
| | 04:39 | So we will type win.y -= speed;
| | 04:44 | so each frame, the win movie clip is
going to move up - that's what the minus says.
| | 04:49 | Remember, the top edge of
the stage is the 0,0 position.
| | 04:53 | That's going to move about 25 pixels per frame.
| | 04:58 | So that's how it's going to animate.
| | 05:00 | Then what we are going to do is wait
until the win movie clip gets all the way
| | 05:06 | to the top of the stage, and then stop it.
| | 05:09 | So type if and some parenthesis and
some curly braces. We are going to
| | 05:15 | check to see if the win object's
position is less than or equal to zero.
| | 05:20 | So if win.y is less than, so less than sign,
or equal to, so equal sign 0,
| | 05:26 | then we are going to set its position to zero.
| | 05:30 | So win.y = 0, and then we are going to
stop running that inter-frame command.
| | 05:37 | Just remember that takes up a lot
of memory running a command in
| | 05:42 | multiple times per second.
| | 05:44 | So let's just highlight
win.addEventListener(Event.ENTER_FRAME and copy it with
| | 05:49 | Command+C or Ctrl+C. And right below
where we set win's y position to 0, we will
| | 05:54 | paste that code and then change
'add' in addEventListener to 'remove.'
| | 06:00 | So we are going to take away that EventListener.
| | 06:04 | So we are just disabling that block of
code, so winGame won't continue to run
| | 06:09 | after the win movie clip is in the top position.
| | 06:13 | All right, so let's see this in action.
| | 06:16 | But remember, before you test it, you need to
save the ActionScript, or else it won't work.
| | 06:20 | File > Save and then test the movie and
then put all the objects in the right place.
| | 06:27 | So this goes here. Look at that.
| | 06:39 | All right, now there is the good job screen.
You can click it and nothing happens.
| | 06:47 | There we go.
| | 06:48 | We successfully detected
whether the player won the game.
| | 06:53 | So remember, if you ever want to
animate object vertically, you can add an
| | 06:57 | inter-frame listener, but just make
sure to remove it once the object is
| | 07:01 | in place.
| | Collapse this transcript |
| Resetting the game| 00:00 | After someone is finished with the
game, they may want to play again.
| | 00:04 | Let's take a look at how to do that.
| | 00:06 | So let's scroll down and
find the winGame method.
| | 00:16 | Now if you're ever looking at these
methods in here, because we're going to have to tab
| | 00:19 | in so much to organize the code,
| | 00:22 | if the word wrap bothers you,
then you can always turn it off.
| | 00:25 | But if you still want it on
anyway, but you want more space,
| | 00:29 | you can always just click these
Minimize buttons to minimize the panels, and
| | 00:34 | double-click the Timeline to
get a little bit more space.
| | 00:39 | So here, right below
win.removeEventListener, I'm going to add
| | 00:44 | win.addEventListener, capital E,
capital L. This is going to be for a mouse
| | 00:51 | click, and this is how
we're going to reset the game.
| | 00:53 | So we'll type MouseEvent capital
M, capital E, .CLICK, in all caps,
| | 00:57 | then a comma and space,
and then clickWin capital W.
| | 01:03 | So we'll have to define that method now.
| | 01:05 | Right below the winGame method, make sure
you're doing it below the right curly braces.
| | 01:12 | So you should have two extra ones at the bottom:
| | 01:15 | one to close out the class
and one to close out the package.
| | 01:19 | So here, type function
clickWin, capital W, in parentheses,
| | 01:24 | type event:MouseEvent.
| | 01:27 | After the parentheses, type
colon void, add some curly braces.
| | 01:33 | Then what we're going to do is remove
that mouse click event listener in here.
| | 01:36 | So highlight win.addEventListener,
copy it, paste it into clickWin and
| | 01:43 | change add to remove.
| | 01:46 | So we want to disable it
after we've clicked it once.
| | 01:48 | Then we're going to add an event
listener to have the object animate downward.
| | 01:54 | So actually, I'm going to copy
win.removeEventListener, winGame right here.
| | 02:00 | Copy that, Command+C or Ctrl+C
and then paste it right below,
| | 02:05 | win.removeEventListener(MouseEvent.CLICK).
| | 02:09 | Here, I'm going to change
removeEvetnListener to addEventListener.
| | 02:12 | I'm going to leave Event.ENTER_FRAME.
| | 02:15 | Then I'm going to change
winGame to animateDown, with a capital D.
| | 02:20 | For animatingDown, I'm simply going
to select and copy the winGame method,
| | 02:26 | Command+C or Ctrl+C, and
paste it right below clickWin.
| | 02:32 | Change the method name in the pasted
code to animateDown, capital D, and then
| | 02:38 | change, win.y -= speed to win.y += speed.
| | 02:44 | Then change the conditional statement
to be if win.y is greater than or equal
| | 02:51 | to the height of the stage,
which can be accessed through stage.stageHeight.
| | 03:00 | When that happens, we'll set win.y
equal to the height of the stage, which
| | 03:04 | is stage.stageHeight.
| | 03:05 | This is going to align the top of the
win movie clip with the bottom of the
| | 03:09 | stage, just like it is before you play the game.
| | 03:11 | Then we're going to remove that
event listener to animateDown.
| | 03:15 | So I'm going to highlight
win.addEventListener animateDown.
| | 03:20 | That's on line 50 in my code.
| | 03:21 | I'll copy that, and then I'll
highlight win.remove EventListener and
| | 03:27 | win.addEventListener in the animateDown
method, and paste the code I just copied.
| | 03:33 | In the pasted code, I'll change
addEventListener to removeEventListener.
| | 03:38 | So basically, all that we've done so
far is make it so that when you click the
| | 03:41 | win movie clip, the win movie
clip just animates right back down.
| | 03:45 | So we haven't reset all the
properties of the game yet.
| | 03:47 | We'll do that in just a second.
| | 03:49 | First, let's test to see
if this animation works.
| | 03:51 | Go to File > Save and test the movie.
| | 03:56 | Drag all the objects into the right place.
| | 04:03 | You should be an expert at this by now.
| | 04:09 | You get the win screen.
| | 04:11 | If you click on it, it goes back down.
| | 04:13 | So now all we have to do
is reset all the objects.
| | 04:16 | So let's close the SWF, and
then go up to the clickWin method.
| | 04:23 | At the bottom of the code, we're going
to add a for loop to loop through all of
| | 04:27 | the drag/drop objects.
| | 04:29 | We've actually already written the for
loop that goes through all the drag/drop
| | 04:33 | objects at the top of this file.
| | 04:34 | So let's just copy that.
| | 04:35 | I'm going inside of the constructor
method, and I'll copy every line from var
| | 04:41 | currentObject:DragDrop to
the end of the for loop.
| | 04:46 | Copy that with Command+C or
| | 04:47 | Ctrl+C. Scroll down to clickWin, and
still inside of the method, I'm going to
| | 04:52 | paste the code with Command+V or Ctrl+V.
| | 04:56 | Note that I have a variable
called currentObject here.
| | 04:59 | I'm also declaring it here, in the constructor.
| | 05:05 | Whenever you create a variable inside of a
function, that variable can only be used
| | 05:10 | within that function.
| | 05:11 | So I can't make a reference to
currentObject outside of this function.
| | 05:14 | If I define the variable in the class,
outside of any method, then I can use it
| | 05:19 | wherever I want in the file.
| | 05:22 | This existence of variables, like
whether they can exist inside of a function or
| | 05:27 | throughout all of your whole
file, is called a variable's scope.
| | 05:34 | So let's scroll down, and in clickWin,
I'm going to change the line of code that
| | 05:41 | says currentObject.target = getChildByName.
| | 05:45 | I'm just going to erase everything
before getChildByName in this line of code.
| | 05:50 | So I'm referencing that currentObject's target.
| | 05:54 | I want to set every
target object's alpha to zero.
| | 05:57 | So right after the close
parenthesis here, I'll type .alpha = 0.
| | 06:04 | Then I want to show all the
objects that you can drag and drop.
| | 06:06 | So I'll go below that, and then
type currentObject.visible = true.
| | 06:17 | So I don't need to position them,
because I already positioned them in the
| | 06:19 | drag and drop class.
| | 06:20 | Remember, they just go back to their
original position, but they turn invisible.
| | 06:25 | So right below the for loop, I'm
going to add the - one of the last lines of
| | 06:29 | code to finish the game.
| | 06:31 | I need to set the number of matches
back to zero, because if I don't set it
| | 06:37 | back, then it's going to
keep going up every time,
| | 06:39 | so I'm going to have a problem.
| | 06:42 | So I'll type numOfMatches =0. Now
let's save this file, and test the movie,
| | 06:51 | and see what we get.
| | 06:55 | Click and drag all the objects into place.
| | 07:07 | Look at the win screen.
| | 07:09 | Now I want you to pay attention to
what happens when I click the win screen.
| | 07:12 | Watch where the drag and drop objects are.
| | 07:16 | Notice that they all come
up above that win movie clip.
| | 07:19 | That's a little bit awkward and that's
happening, because every time we drag an
| | 07:23 | object, we bring it all the way to the front.
| | 07:25 | So we can fix that by putting
the win object in the front.
| | 07:32 | So we can actually do that
right here inside of clickWin.
| | 07:35 | So I'll go down one more line, and type
addChild, and in parentheses, pass in win.
| | 07:43 | Save this file and test it one more time.
| | 07:50 | Drop all the objects into place.
| | 07:58 | Watch the win screen.
| | 08:00 | When you click the win screen, pay
special attention to the drag drop area.
| | 08:02 | So the win screen is now in
front of all of those objects.
| | 08:07 | Note that you can still see them
because there is a little transparency.
| | 08:10 | But they're not clearly in the front,
fully opaque in front of the win object.
| | 08:15 | So now the game is completely finished,
and the person playing can click to
| | 08:20 | reset the game, and play
as many times as they want.
| | Collapse this transcript |
|
|
7. Working with Bitmap Images to Create a SlideshowLoading bitmap images from the Library| 00:00 | There are few different ways to
work with image files in Flash.
| | 00:03 | Of course, you can display the
images in the Timeline by importing them.
| | 00:07 | You can load them in through the
library at run time using an ActionScript, and
| | 00:12 | you can load external bitmap images.
| | 00:15 | Right now, we are going to focus on
loading the image from the library.
| | 00:20 | The advantage to doing this is that the
image gets embedded inside of your SWF
| | 00:24 | file so that you can access the file
anytime you want, and you don't have to
| | 00:28 | worry about the file
creating additional load time.
| | 00:32 | Now of course the disadvantage is that
your SWF file has a bigger size, but for
| | 00:37 | your application, it may be
better to not have to wait to load.
| | 00:42 | So right now this application has a
simple preloader-type graphic on the stage.
| | 00:46 | If I test the movie, you will
see the animating circles.
| | 00:49 | If you are curious about how this is
set up, I simply have a bunch of different
| | 00:54 | graphic symbols of circles fading in -
it's all the same one - and then I have
| | 00:59 | them starting at different frames.
| | 01:03 | So, for example, this one starts at frame 21,
| | 01:06 | this one starts at frame 18, et cetera.
| | 01:08 | So let's go over to the library, and
I will right-click alcatraz.jpg, and I
| | 01:15 | will choose Properties.
| | 01:17 | Here I will check Export for ActionScript.
| | 01:19 | If you don't see that, just make
sure to click the Advanced button in the
| | 01:22 | Bitmap Properties window.
| | 01:24 | When you check Export for
ActionScript, you will see that the Base Class and
| | 01:29 | Class fields are populated.
| | 01:31 | For the Class, you don't want to use
alcatraz.jpg because it has a dot in it.
| | 01:35 | You want to use a name with no spaces
or special characters, including dots.
| | 01:40 | So type Alcatraz, with a capital A. Note
that the Base Class is the BitmapData class.
| | 01:50 | That's a class that holds
pixel information for an object.
| | 01:53 | So let's click OK, and then we will
go to the first keyframe of the actions
| | 01:59 | layer, and open up the Actions panel.
| | 02:02 | The process of creating a bitmap from
the library is pretty similar to creating
| | 02:06 | a movie clip from the Library,
with one significant difference.
| | 02:09 | We are working with pixel data in the
BitmapData class, so we need to take that
| | 02:14 | data and display it in a visual manner.
| | 02:17 | So type var and then a space.
| | 02:19 | I will call this 'bd,' short for
BitmapData, and this is going to be Alcatraz.
| | 02:27 | Remember, Alcatraz has the
Base Class of the BitmapData.
| | 02:32 | Set that equal to a new
instance of the Alcatraz class.
| | 02:41 | So the next step is to display the pixel
information, because right now Alcatraz
| | 02:46 | is just a whole bunch of pixel
data, and they are not displayed yet.
| | 02:51 | So we need to display it in a
container called Bitmap, so I create a variable
| | 02:56 | called 'bmp,' and that's short for
bitmap, datatype it to a bitmap.
| | 03:01 | Again, a bitmap object is something
that can display bitmap data, or in other
| | 03:05 | words pixel information.
| | 03:07 | Set that equal to new bitmap, and in the
parentheses, pass in 'bd' for the BitmapData
| | 03:14 | So the Bitmap is a display
object for displaying BitmapData.
| | 03:19 | So go to the next line add.
| | 03:22 | If you test the movie right now, you
won't see the image because it's not added
| | 03:26 | to any display object container.
| | 03:28 | So we need to put it on the stage first.
| | 03:31 | Type addChild, capital C, and in the
parentheses, pass in bmp.
| | 03:37 | Test the movie, and there is the image
on the stage, loaded from the library.
| | 03:44 | So to load a bitmap image from the
library, right-click it, choose Properties,
| | 03:51 | export it for ActionScript and then
your code, remember that you need to create
| | 03:57 | a BitmapData object, which is going to
be the pixel information for your image,
| | 04:01 | and you need to put that inside of a
bitmap and simply add it to the stage.
| | Collapse this transcript |
| Loading bitmap images from external files| 00:00 | Loading images from external files
allows you to change the images in your
| | 00:04 | applications without
having to republish your SWF.
| | 00:08 | In addition, your SWF files don't get
bloated by the file size of the images.
| | 00:14 | In the same folder as this FLA
file, I have a folder called assets.
| | 00:20 | In that folder, there is
a file called boats.jpg.
| | 00:24 | If you don't have the exercise files, make
sure you have your files set up in a similar way:
| | 00:30 | an assets folder in the same
directory as the FLA, and an image called
| | 00:34 | boats.jpg, all lowercase.
| | 00:36 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:41 | In order to load an external image file or
SWF, you use a class called the loader class.
| | 00:48 | So type 'var,' and then a space, and then
type 'loader' lowercase, datatype it to a Loader.
| | 00:58 | Flash writes the import line of code.
| | 01:03 | Set it equal to a new Loader();.
| | 01:09 | So loader is a class that's not built
into the Flash interface, like a movie
| | 01:13 | clip or a bitmap image is.
| | 01:15 | But at the same time, calling this
code to create a new loader is just like
| | 01:21 | saying create a new empty movie clip.
| | 01:24 | So that's what the New command does.
| | 01:27 | Let's go to the next line, and we'll
have the loader load the file that we want
| | 01:32 | to load, so loader.load.
| | 01:35 | In parentheses, you can see that the first
parameter is request, which is a URLREQUEST.
| | 01:41 | You may be familiar with URLREQUESTs already.
| | 01:46 | The code snippet that links to it an
external web site,= uses the URLREQUEST.
| | 01:51 | So use the same URLREQUEST concept when
you're loading any kind of file into Flash.
| | 01:57 | So in here, I'm going to type
new URLREQUEST and parentheses after that.
| | 02:05 | Flash tells me I need to
put a string inside of there.
| | 02:07 | That's going to represent
the location of the file.
| | 02:10 | So I'll close out the parentheses first.
| | 02:12 | So I have should have two close parentheses:
| | 02:13 | one for the new URLREQUEST, and
then one for the load command.
| | 02:19 | Inside of the URLREQUEST parentheses,
I'm going to type some quotes, and then
| | 02:23 | the path of the file I want to load, which is
| | 02:26 | assets/, so assets is a folder,
| | 02:32 | inside of there is the file I
want to load called boats.jpg.
| | 02:38 | So if you don't have the exercise files,
make sure you're typing the correct
| | 02:41 | path to your file here.
| | 02:43 | Again, this is relative to your SWF file.
| | 02:47 | Now I'll go to the next line
and add one more line of code.
| | 02:52 | Remember, that in order to see anything
on the stage, you have to add it to some
| | 02:57 | sort of display object container.
| | 02:59 | So add the loader to the stage, by
typing at addChild, with a capital C, and in
| | 03:05 | parentheses, type in loader, all lowercase.
| | 03:09 | So I'll test the movie.
| | 03:13 | There is the boats image on the stage.
| | 03:15 | Now I'll close the preview window.
| | 03:19 | Let's take a look at one more thing.
| | 03:22 | Let's say we wanted to make sure that
we didn't put the object on the stage
| | 03:27 | until the file was done loading.
| | 03:29 | So you want to check to see when the
loader is done loading the boats file.
| | 03:39 | To do that, go above the line of code
where you have the loader load the file.
| | 03:44 | This is very important.
| | 03:45 | You want to make sure that this
line of code is processed first.
| | 03:48 | So we go in and tell Flash to add an event
listener, listening for when the file is done loading.
| | 03:54 | So type loader and then a dot.
| | 03:58 | Now you may be thinking that you're
going to type addEventListener right here,
| | 04:03 | but actually, you don't add the
EventListener to the loader itself.
| | 04:06 | The loader actually has a property
called contentLoaderInfo, and you're going to
| | 04:10 | add the event listener to that
object, and not the loader directly.
| | 04:15 | So the key things are: add the event
listener before you load the file, and
| | 04:18 | you add it to the contentLoaderInfo
property, and not the loader itself.
| | 04:24 | So after that, I'll type a dot,
and then addEventListener.
| | 04:25 | The event is just going to be event.COMPLETE.
| | 04:30 | This is usually used when
files have done loading.
| | 04:33 | So a comma, and then a space,
and then type fileLoaded.
| | 04:38 | Close out the parentheses and type a semicolon.
| | 04:40 | Then just wrap that
addChild command in a function.
| | 04:44 | So type function fileLoaded, capital L.
Then in the parentheses, type event:Event,
| | 04:52 | with a capital E. Close out
the parenthesis. Type :void.
| | 04:57 | Wrap addChild in curly braces.
| | 04:59 | You can autoformat if you want.
| | 05:02 | Then test the file, just to confirm that the
image is still on the stage, and there it is.
| | 05:09 | So you can load external
files using the loader class.
| | 05:13 | Remember that you need to add the
EventListener to the contentLoaderInfo
| | 05:17 | property before issuing
the command to load the file.
| | Collapse this transcript |
| Adding mouse functionality to bitmap images| 00:00 | The bitmap class doesn't come with
support for interactivity, like mouse clicks.
| | 00:04 | In order to make an image clickable,
you'll need to take a few extra steps.
| | 00:09 | Now, think of the bitmap class in
ActionScript just like a bitmap on the Stage.
| | 00:15 | So, if I go to the library and I
click and drag this boats image onto the
| | 00:19 | Stage, like so, I select it, I can see
that it's a bitmap in the Properties panel.
| | 00:27 | So, when I work with a bitmap it's a
little bit different than working with, say
| | 00:32 | a movie clip or a button.
| | 00:34 | I can't give it an instance name, so I
can't add things like mouse interactivity.
| | 00:37 | So that's the same as it is in code.
| | 00:40 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:46 | So if I were to type bmp.
addEventListener and MouseEvent.CLICK, capital M,
| | 00:54 | capital E, and then CLICK in all caps,
and I were to run a function called
| | 00:59 | bitmapClicked, I create the function
now, so bitmapClicked, capital C, in
| | 01:08 | the parentheses to event:MouseEvent,
capital M, capital E, colon, void, no
| | 01:15 | return data here, and then inside of
bitmapClicked, I'll just simply type a trace statement.
| | 01:23 | So trace, in parentheses, some quotes,
and I'll type clicked inside of the quotes.
| | 01:29 | Now, if you test the movie and
click the image, nothing happens.
| | 01:33 | So we don't have that interactivity,
but what can you do if you're working with
| | 01:39 | a bitmap image and you want to add
interactivity? Think about this.
| | 01:43 | What do you do when you want to add
interactivity to a bitmap on the Timeline?
| | 01:47 | You wrap it inside of a
button or a movie clip symbol.
| | 01:51 | So I can wrap it inside of any other
clickable object, and it will work just fine.
| | 01:56 | For this situation, a MovieClip would
work, but it's only one image, so we might
| | 02:01 | as well use the sprite for the optimization.
| | 02:04 | Remember, a sprite is a single frame movie clip.
| | 02:06 | So right below the line of code where
you created the new bitmap, let's create a
| | 02:11 | variable called sprite, all
lowercase, and datatype that to a sprite.
| | 02:14 | We'll set that equal to a new
sprite and then add it to the Stage.
| | 02:22 | So addChild and sprite in parentheses.
| | 02:27 | So that essentially creates an empty
one-frame movie clip, and then we'll add
| | 02:33 | the bitmap as a child of the sprite.
| | 02:36 | So the line of code that says
addChild bitmap, just change that to
| | 02:40 | sprite.addChild bitmap.
| | 02:42 | So, we're taking the bitmap image and
putting it inside of a sprite, just like
| | 02:46 | putting it inside of a MovieClip.
And now instead of adding the EventListener to
| | 02:50 | the bitmap, we add the
EventListener to the sprite,
| | 02:54 | test the movie and click, and there you have it.
| | 03:02 | If you ever want to see the hand
cursor, just set the buttonmode property.
| | 03:06 | So, sprite.buttonmode = true;
| | 03:11 | and then test the movie,
and there is that hand cursor.
| | 03:17 | So just like when working on the
Timeline, if you want to add functionality to
| | 03:21 | an object, all you have to do is wrap
it inside of an object that supports that
| | 03:26 | functionality, just like we did with
the sprite and the bitmap image here.
| | Collapse this transcript |
| Using a loop to load multiple images| 00:00 | When you're loading thumbnails for a
slideshow, you want to make sure you're not
| | 00:03 | writing the same code multiple times.
| | 00:06 | Using a loop, you can write the code
once and have that code repeat until all of
| | 00:10 | the thumbnail images are loaded.
| | 00:12 | Let's take a look at the
application I have here.
| | 00:15 | If test the movie, you can see an
image in the background that's loaded
| | 00:19 | externally and then a clear bar
that's going to hold the thumbnails.
| | 00:26 | The clear bar is just a movie clip that's
transparent called thumbBg, so the Alpha is set to 60.
| | 00:34 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:39 | So in my code, I have some import statements,
and then I have all the images in an array.
| | 00:46 | Notice that these are the file names of the
images and not the full paths to the images.
| | 00:52 | I'm adding the full paths later on.
| | 00:54 | The reason why I want to do that is so I
can use the file names to represent the
| | 00:58 | full size image as well as the thumbnail.
| | 01:03 | Next, I have variables that store the
X and Y position for the thumbnails.
| | 01:08 | These represent the position of the
first thumbnail's X and Y coordinates.
| | 01:14 | Using a loop, we'll modify these values
each time an image is loaded. I'll scroll down.
| | 01:22 | Here is the code to load that background image -
| | 01:27 | this is the only full-size image in
this application, and then after that's
| | 01:31 | loaded and added to the stage, I added
the thumb background, so that
| | 01:35 | it's in front of the loaded image.
| | 01:37 | Then I'm running a function called loadThumbs.
| | 01:41 | Here is the loadThumbs function.
| | 01:42 | Notice that it's empty right now.
| | 01:44 | Here's where we're going to write
all the code to load the thumbnails.
| | 01:47 | So the first thing we'll do is create
a variable called thumbLoader and data-
| | 01:52 | type it to a loader.
| | 01:54 | We'll give it a value later.
| | 01:56 | This is going to be recycled for
each of the thumbnails that loads.
| | 02:01 | Let's create a loop now.
| | 02:04 | Create the skeleton of a for loop;
| | 02:06 | so 'for' some parentheses and some curly braces.
| | 02:09 | Inside the parentheses, type var i:uint,
positive integer, = 0; i < images.length.
| | 02:25 | That's the amount of items that are in
the images array, so it's going to run
| | 02:28 | for each image, and then a semicolon
and a space and then i++. Standard loop.
| | 02:36 | In here, we're going to create a new
thumbLoader, so thumbLoader = new Loader.
| | 02:46 | Now I want to point out that it's not
creating the same loader every single
| | 02:51 | time, so each time the loop runs, we're
actually creating a new instance of the Loader class.
| | 02:56 | So we're going to have one loader
for each of the thumbnail images.
| | 03:01 | That's significant because if you use
the same loader image then each time the
| | 03:06 | loop runs it would have the
same loader load the image file,
| | 03:10 | so by the end of the loop, we will only see
the last image that's loaded into the loop.
| | 03:16 | So we need to create a new loader each time.
| | 03:18 | That's what we're doing here.
| | 03:20 | So then we'll load the image,
thumbLoader.load, and in the parenthesis, we'll
| | 03:26 | pass in a URLRequest.
| | 03:29 | Before I write that, I want to make sure I
close out the parentheses and type a semicolon.
| | 03:33 | So go back in the parentheses and type
new URLRequest and then some parentheses.
| | 03:39 | Now we are going to type the path to the file.
| | 03:43 | Remember, we didn't have the path to
the files inside of the array, so we're
| | 03:49 | going to need to write the path now.
| | 03:51 | Here's the path to the thumbnail images.
| | 03:55 | Put some quotes and type assets/thumbs/ -
these are both forward slashes - and then
| | 04:04 | after the quotes, type space plus
space, and then we'll type images Index i,
| | 04:10 | which is represented by i in
square brackets after images.
| | 04:14 | So let's go and represent each image
file as we loop through this for loop.
| | 04:20 | Let's go to the next line.
| | 04:23 | Then we'll begin positioning the thumbs.
So thumbLoader.x = thumbX, make sure
| | 04:32 | that X is capitalized in
thumbX, and thumbLoader.y = thumbY.
| | 04:42 | Now what we're going to do is add to
the thumbX property, so we'll shift each
| | 04:47 | thumbnail by 85 pixels each time.
| | 04:50 | So type thumbX, make sure
the X is capital, + = 85.
| | 04:58 | So each time the loop runs, we're going
to add on to the value of thumbX in the
| | 05:03 | amount of 85 pixels (thumbX += 85;).
| | 05:07 | So the first time the loop runs, thumbX
will be a value of 30, so the X position
| | 05:14 | of the first thumbnail will be 30.
| | 05:15 | Then the next thumbnail will
be at a position of 30 plus 85.
| | 05:20 | You can do the math in your head if you
want. And then the next one will be 85,
| | 05:25 | after that and then 85 after that, and so on.
| | 05:28 | So let's go the next line and then
add the thumbnails to the stage by using
| | 05:32 | the addChild method.
| | 05:33 | So addChild and in parentheses, pass in
thumbLoader, with a capital L. Test the
| | 05:40 | movie, and there are all the thumbnails.
| | 05:43 | Now of course, they don't do anything
when you click on them just yet, but we
| | 05:46 | can add that functionality later on.
| | 05:51 | The thing that I want you to take
away is that to load multiple images most
| | 05:55 | effectively, put the image names inside of an
array and use a for loop to load each image.
| | 06:03 | That way you only have to write the
code once, and no matter how many images you
| | 06:07 | have, you don't have to write additional code.
| | 06:11 | You just need to add the images to your array.
| | Collapse this transcript |
| Creating a simple slideshow| 00:00 | Now that you're familiar with all the
different parts of creating an image
| | 00:03 | viewing app, we'll finalize the slideshow.
| | 00:06 | We'll do that by adding
interactivity to the thumbnail images.
| | 00:10 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:15 | Scroll down to the line of code where
you add that the thumbLoader to the stage.
| | 00:20 | That's inside of a loop
that's inside of loadThumbs.
| | 00:23 | So right below addChild(thumbLoader),
I'm going to add an event listener to
| | 00:28 | thumbLoader. So, thumbLoader, capital L,
dot addEventListener, and the event's
| | 00:34 | going to be MouseEvent.CLICK, capital M,
capital E, and then CLICK is in all
| | 00:39 | caps, and then I'll type
thumbClicked, with a capital C.
| | 00:46 | Below the loadThumbs function, type
function thumbClicked, capital C, and
| | 00:53 | we'll see an event with the data type of MouseEvent
:void for no return data and some curly braces.
| | 01:03 | So here what we want to do is create a
reference from the thumbnail that was
| | 01:06 | clicked to the image that we want to load.
| | 01:10 | They have the same file names, but
we're going to need to break apart the file
| | 01:18 | name of the thumbnail to get
the path to the full size image.
| | 01:22 | For example, the thumbnail is
in the folder assets/thumbs.
| | 01:29 | The full size images are in the assets
folder, so we're going to need to get the
| | 01:35 | path to the file that was clicked, and
| | 01:37 | then what we need to do is break apart that
path and change it to load just the image.
| | 01:46 | So in the thumbClicked function, let's get
the URL, or the path in other words, to the
| | 01:52 | image that was clicked.
| | 01:53 | To do that, create a variable
called path. Datatype it to a string.
| | 01:59 | Here, we'll set the path equal to event -
| | 02:03 | that's the event that occurred, in other
words the mouse click - dot currentTarget.
| | 02:08 | That refers to the object that was
clicked, so it's going to be a thumbLoader.
| | 02:15 | It could be for any thumb that was clicked.
| | 02:18 | So we want to get that
particular thumb's URL, so then we type
| | 02:23 | .contentLoader, capital L, Info,
capital I. Now the contentLoaderInfo comes
| | 02:32 | from the loader object.
| | 02:34 | Remember, the contentLoaderInfo is the
object where you add the event listener
| | 02:39 | to check when the file is done loading.
| | 02:41 | This is the object inside of a loader
that has all of the information about the
| | 02:46 | loaded files, so this is how we
access the URL. So type .url.
| | 02:53 | If you want to see the long URL to the
file, you can trace that by typing out
| | 02:58 | trace and putting some
parentheses and typing path.
| | 03:01 | Make sure there are no
quotes inside the parentheses.
| | 03:03 | So test the movie and click on the thumbnail.
| | 03:07 | Then you can close the window
and look in the Output window.
| | 03:10 | So we see file, then all of these forward
slashes, and the direct location of that file.
| | 03:17 | So what we really want to do is just
cut off everything except for alcatraz.jpg,
| | 03:22 | and then add on assets after that.
| | 03:24 | So let's go back to our code, and
| | 03:28 | then we'll set a new value for
path, so type path = path.substr.
| | 03:38 | This is short for substring. So when you take a string
and you want to get a substring of that, so we just
| | 03:44 | want to get a piece of this giant string.
| | 03:47 | In the parentheses, we need
to put the starting index.
| | 03:51 | Now we want to start at the last
time there is a forward slash.
| | 03:56 | So there is a forward slash after thumbs,
and that's the last forward slash in the
| | 04:00 | file, so we want to start one after that spot.
| | 04:05 | So inside of the parentheses, type
path.lastIndexOf - capital I, capital O, make
| | 04:13 | sure you close out the parentheses
first - and inside the parentheses type some
| | 04:18 | quotes and type a forward slash, so
that's going to be the last index of the
| | 04:23 | forward slash, so the last
time the forward slash appears.
| | 04:26 | Then after the closed parentheses
for last index of and before the closed
| | 04:31 | parentheses for substring, type space
plus space and then one, so we want to
| | 04:37 | start one after the forward
slash, and go all the way to the end.
| | 04:41 | So let's test the movie again and
see what we get in the Output window.
| | 04:45 | So click on an image, and now
we get just the image name.
| | 04:49 | Nice! So, we've successfully broken apart that string.
| | 04:55 | So the next step is to have the loader, which
is the main image loader, not the thumbLoader,
| | 05:01 | the one we created right here on line 12
in my code, we'll have that loader load
| | 05:08 | the appropriate image.
| | 05:09 | So type loader.load.
| | 05:11 | I'll need to create a URLRequest,
so type new urlRequest, capital R, some
| | 05:20 | parentheses, make sure you close
out both the load command and the
| | 05:23 | urlRequest command.
| | 05:26 | Inside of those parentheses, we're going
to start with assets, because the image
| | 05:29 | is inside of the assets folder, so type
assets/ and after the closed quote, type
| | 05:36 | space plus space, and then type path,
so the path is going to be different for
| | 05:42 | any image that's clicked on.
| | 05:43 | Then we're going to manipulate that
string to get just the file name and then
| | 05:48 | tell Flash to load the
appropriate full size image.
| | 05:52 | So now I'll test the movie,
and we'll preview the application.
| | 05:54 | Click through the different thumbnails,
and the full size images will load in. Nice!
| | 06:03 | Now there is only one thing missing.
| | 06:06 | One thing this app can improve upon is
to have the hand cursor show when you
| | 06:10 | roll over the images.
| | 06:11 | Let's take a look at how to do that.
| | 06:14 | One problem that you'll encounter when
you try to add the hand cursor is that
| | 06:18 | the loader class does not
support the buttonmode property.
| | 06:21 | So you can't put the hand cursor in a loader.
| | 06:26 | The way to work around that is just
like how you would do it on the Timeline.
| | 06:30 | You take the object, and you put
it in something that supports the
| | 06:33 | functionality you want.
| | 06:36 | If you can't perform a motion tween on a text
field, then just put it inside of a MovieClip.
| | 06:39 | If you need to change the alpha
of a bitmap, put it inside of a
| | 06:44 | MovieClip, et cetera.
| | 06:45 | So we're going to do that here with the sprite.
| | 06:48 | Let's scroll up to the loadThumbs
function, and right below the thumbLoader
| | 06:54 | variable, I am going to create
a new variable called Container.
| | 06:58 | Datatype it to a sprite.
| | 07:01 | Set it equal to a new
instance of the sprite class.
| | 07:03 | Remember, sprite is a one-frame movie clip.
| | 07:06 | On the next line, I'll add it to
the Stage using the addChild method.
| | 07:11 | Then I'll set its buttonmode property
to true, so container.buttonmode = true,
| | 07:20 | and then instead of putting the thumb
loaders inside of the main timeline,
| | 07:25 | I'll put them inside of the container.
| | 07:26 | So where it says addChildthumbLoader
inside of the loop, I'll just add container
| | 07:32 | and a dot right before addChild.
| | 07:33 | So, each of the thumbnails will be
loaded into the sprite container, which
| | 07:39 | supports hand cursor interactivity.
| | 07:41 | I actually don't even have to
change the addEventListener code.
| | 07:45 | I can still have the listener on the
thumbLoader, but because it's inside of a
| | 07:49 | sprite that has the buttonmode property
set to true, the hand cursor will still show.
| | 07:55 | So, we'll test the movie again,
| | 07:57 | roll over the different
thumbnails, click on them,
| | 08:01 | they load in, and you see the hand cursor.
| | 08:04 | So now the slideshow is complete, all
the code is organized, and the images load
| | 08:10 | in when you click on thumbnails.
| | 08:12 | So just remember that if you need to get
a part of a string, you can break it up
| | 08:21 | using the substring method.
| | 08:22 | If you ever need to add mouse
interactivity, specifically showing the hand
| | 08:28 | cursor, you can wrap the
elements inside of a sprite and set the
| | 08:34 | buttonmode property to true.
| | Collapse this transcript |
| Using Flash Player 10 color management| 00:00 | One of the features added in Flash
Player 10 was the ability to manage color.
| | 00:05 | That's an important feature, because
color profiles previous to Flash Player 10
| | 00:11 | would always get stripped
out when loaded into Flash.
| | 00:15 | Since color is so important to many
people, especially photographers, it's best
| | 00:20 | to manage color through Flash
whenever you're loading images.
| | 00:25 | All it takes is one line of code.
| | 00:28 | Go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:32 | Above all the rest of the code,
create a new line of code that says
| | 00:37 | stage.colorCorrection, capital C
for correction, space equals space
| | 00:45 | ColorCorrection, capital Cs, dot
ON in all caps and a semicolon.
| | 00:53 | Now you test the movie, and Flash will
apply any color profiles that are attached
| | 01:00 | to the image that you're loading.
| | 01:02 | So just remember, you can add this
simple line of code to have Flash manage
| | 01:07 | color, and without it, color
profiles will be stripped out.
| | 01:11 | Also remember that this is a
Flash Player 10 only feature.
| | Collapse this transcript |
|
|
8. Loading and Working with External SWF FilesLoading an external SWF| 00:00 | Just like loading external image files,
loading external SWF files can keep your
| | 00:04 | timelines clean and their
file sizes low. So on the stage,
| | 00:09 | I have a button called play_mc.
| | 00:12 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:17 | The first thing we'll do is add
an EventListener to this button,
| | 00:20 | play_mc.addEventListener, capital E,
capital L, and in the parentheses, type
| | 00:25 | MouseEvent.CLICK, make sure mouse is
capital M and E, and CLICK is in all caps.
| | 00:32 | So we'll create a function called playClicked.
| | 00:44 | It's going to receive an event with the data
type of MouseEvent:void for no return data.
| | 00:51 | Then in here, we're going to load the SWF file.
| | 00:54 | So we'll create a variable called
loader, datatype it to a Loader with a
| | 01:00 | capital L. Now this may look pretty
familiar if you've loaded an image file before.
| | 01:05 | We're setting it equal to new Loader, so
we're creating a new instance of the
| | 01:09 | Loader class, basically like an empty MovieClip.
| | 01:11 | Then we add it to the stage.
| | 01:17 | Then we can have the loader load the
SFW file by using the load method, so
| | 01:22 | loader.load, and in the parentheses
create a new URLRequest. Make sure to write
| | 01:30 | open and close parentheses for the URLRequest.
| | 01:33 | In there, type some quotes.
| | 01:34 | Now we'll load a file called
assets/vid2.swf. That's it.
| | 01:43 | Test the movie and click the Play button.
| | 01:50 | So you'll notice that the movie loads in
just fine and plays just like you'd expect.
| | 01:55 | However, there is one little problem.
| | 02:01 | Now you notice that some of
the rock is kind of hanging over.
| | 02:05 | You can solve that in multiple ways.
| | 02:09 | The easiest way would be take that bar at
the bottom and use ActionScript to put it
| | 02:14 | in front of the loader once the
file is loaded. So let's do that.
| | 02:17 | I'm going to select the background
and then Shift+Click the Play button.
| | 02:23 | I'll press F8 on my keyboard.
| | 02:25 | I'll create a new MovieClip
called Front, capital F. Then click OK.
| | 02:32 | Give it an instance name of
front_mc and then go back to my code.
| | 02:39 | In my code, I'll change the
addEventListener line of code to be
| | 02:45 | front_mc.play_mc.addEventListener.
| | 02:52 | So we'll add the event listener to the play movie
clip that's inside of the front movie clip.
| | 02:56 | After we add the loader as a child,
we'll add the front movie clip,
| | 03:01 | so addChild(front_mc),
| | 03:05 | and we'll bring that movie clip to the front.
| | 03:07 | Now when I test the movie, I can click
the Play button and preview the animation.
| | 03:13 | Now as you're watching this animation,
pay particular attention to the rocks at
| | 03:17 | the bottom-left of the screen.
| | 03:19 | Notice they aren't coming
over the player anymore.
| | 03:22 | They're right in the back where they should be.
| | 03:25 | Now I'll just let this animation finish.
| | 03:34 | So now I'll close Preview window.
| | 03:37 | It's important to note that when you
load a SWF file in Flash, only movies
| | 03:41 | that have the same ActionScript
version can communicate with each other.
| | 03:46 | So if I loaded in an ActionScript 2
SWF file, the movie would play and the
| | 03:51 | interactivity would work, but I
couldn't communicate and send data between an
| | 03:57 | ActionScript 3 movie and
an ActionScript 2 movie.
| | 04:00 | So just keep that in mind.
| | 04:02 | Other than that, loading a SWF
works just like loading an image.
| | 04:06 | Simply use the Loader class and then
load the image and then load the SWF file
| | 04:12 | using the load method.
| | Collapse this transcript |
| Running ActionScript code in an external SWF from its parent| 00:00 | Sometimes, you'll want to run
code inside a child SWF file.
| | 00:06 | So let's say I load this movie into
the parent, and I want to issue some
| | 00:11 | commands to objects inside of the child movie.
| | 00:16 | For example, this file, AS_From_Parent,
loads in the video two (vid2) SWF here.
| | 00:21 | What if I wanted to communicate with
objects inside there, and access that
| | 00:26 | file's properties and methods?
Let's take a look at how to do that.
| | 00:30 | Again, this is only possible when both files
are using the same version of ActionScript.
| | 00:37 | It can be a different Flash player, but
you're going to need all ActionScript 3 files.
| | 00:42 | If you're going to use all ActionScript
2, you should watch the ActionScript 2
| | 00:46 | Essential Training title to learn about that.
| | 00:49 | So let's go to our code.
| | 00:51 | I'm loading in vid2 when
I click the Play button.
| | 00:56 | So we'll test the movie, just to
see what it does, click Play, and then
| | 01:00 | the animation comes in.
| | 01:04 | Let's take a look at accessing the
properties and methods of that movie from
| | 01:09 | within this parent movie.
| | 01:12 | The first thing I'm going to do is add
an EventListener to the loader, so that I
| | 01:17 | can detect when the movie is fully loaded.
| | 01:19 | You don't want to be messing with
objects that are inside of a loaded file until
| | 01:25 | the file is completely loaded.
| | 01:28 | That makes sense because variables and
functions may not exist yet while the
| | 01:33 | file is loading, so you want to make
sure that it's all done before you try to
| | 01:37 | access any of that stuff.
| | 01:38 | So right below addChild(front_mc),
I'm going to write this line of code:
| | 01:43 | loader.contentLoaderInfo, remember
that you add EventListeners for loaders to
| | 01:48 | the contentLoaderInfo property, not
directly to the Loader itself, dot
| | 01:52 | addEventListener and event's going to be
Event.COMPLETE, all caps, and we'll run
| | 01:58 | a function called swfLoaded, swf lower
case, Loaded has a capital L. So I'll
| | 02:06 | create the function
below playClicked, swfLoaded.
| | 02:19 | So now create the swfLoaded function.
| | 02:21 | Note that it will receive an event with
a data type of Event, with a capital E,
| | 02:26 | colon void for no return data, and then
inside of this function, we'll create a
| | 02:31 | variable called mainTimeline, capital T.
This will represent the main Timeline
| | 02:38 | of the loaded movie, which is vid2.
| | 02:43 | So I'm going to datatype this as a
movie clip, because the main Timeline is
| | 02:49 | essentially a movie clip, which is why
you need to extend the MovieClip class
| | 02:53 | when you create your own document class.
| | 02:55 | I'm going to set this equal to loader.content.
| | 03:00 | That's how we reference the content
that's loaded inside of the loader.
| | 03:05 | Now if you look at the code hinting, you'll see
that the datatype of content is DisplayObject.
| | 03:10 | Now that's important, because Flash
is going to think that you're working
| | 03:15 | with the DisplayObject.
| | 03:16 | So you can modify properties that all
display objects have, like X and Y, but
| | 03:21 | if you modify properties that are unique to say
a MovieClip, then you're going to get an error.
| | 03:27 | So let's look at how to resolve that.
| | 03:28 | So we'll type content.
| | 03:31 | Then I'll wrap this inside of a movie clip.
| | 03:35 | So right before loader.content, I'll
type MovieClip, capital M, capital C and
| | 03:42 | then wrap loader.content in parentheses.
| | 03:47 | It's worthy of note that when I say
we'll wrap this in a movie clip, in this
| | 03:52 | instance when you type MovieClip in
parentheses and wrap something in the
| | 03:57 | parentheses, that doesn't
convert that to a movie clip.
| | 04:00 | That just is a message to Flash that
says, treat this data as a movie clip.
| | 04:05 | When you see the code that says new
movie clip and addChild, then that's
| | 04:11 | wrapping an object in a
movie clip in a different way.
| | 04:13 | That's actually placing
it inside of a movie clip.
| | 04:15 | This is just treating the data as a movie clip.
| | 04:17 | It's called typecasting.
| | 04:19 | That's what we're doing here.
| | 04:20 | So we'll just end this line with a semi-colon
and then we can go to the next
| | 04:25 | line and we can access anything we
want using our mainTimeline property.
| | 04:29 | So I can type something like
trace(mainTimeline.totalFrames);
| | 04:38 | so I can see how many total frames are in
the main timeline of the loaded SWF file.
| | 04:42 | So test the movie, and click the Play button.
| | 04:47 | Then you can see that there are 243
frames on the main timeline of the loaded SWF.
| | 04:57 | So to run code inside of a loaded
SWF file, simply use the loader's content property.
| | 05:04 | Depending on the type of data that
you're loading, you'll need to typecast the
| | 05:08 | data as a movie clip or
some other type of object.
| | 05:12 | In almost every case though, you
can use the MovieClip class, and
| | 05:17 | everything will work.
| | 05:19 | If you're running into trouble, try
using the Object class, but the most
| | 05:23 | important thing you need to remember
is that the content property gives you
| | 05:27 | access to all of your loaded content.
| | Collapse this transcript |
| Running parent code in a child SWF| 00:00 | Another important skill when working
with loaded SWF files is the ability to run
| | 00:04 | a parent's code from within a child SWF.
| | 00:07 | In addition, the code should not
cause any errors if the child SWF is
| | 00:11 | published without the parent.
| | 00:13 | So, let's see what we have here.
| | 00:15 | I'll test the movie, click the Play
button, and load the child SWF animation.
| | 00:19 | What we'll do is make it so when you
click the Play button and the child SWF
| | 00:25 | loads, will make the Play
button on the parent SWF disappear.
| | 00:30 | To access the Play button, you need
to be familiar with the structure of
| | 00:34 | the parent FLA file.
| | 00:36 | On this stage, I have front_mc, and
inside that movie clip, I have play_mc.
| | 00:42 | So we'll need to know
that path to get to play_mc.
| | 00:47 | Let's go to vid2a.fla,
| | 00:50 | select the first keyframe in the
actions layer, and open up the Actions panel.
| | 00:54 | Before we start writing the code that
we're going to use, let's do a trace
| | 00:58 | statement and type in
'parent' in the trace statement.
| | 01:02 | I want to point on
something very significant here.
| | 01:06 | Test the movie, and you'll see that
the parent of the child SWF is the Stage.
| | 01:13 | Remember that there is only one Stage
instance in every application, and all of
| | 01:19 | the highest level objects
are children of the stage.
| | 01:22 | So now that this movie is published,
I'll return to the parent FLA file
| | 01:27 | and test the movie.
| | 01:28 | When I click the Play button, I can see
that the parent object is now a Loader.
| | 01:37 | So remember, there is only
one Stage in an application.
| | 01:40 | So now the only Stage instance in this
application is the parent of the main
| | 01:46 | timeline of the parent SWF.
| | 01:49 | So to access the main Timeline of the
parent SWF, we'll need to go through
| | 01:54 | that Loader instance.
| | 01:59 | Let's go back to the child FLA, select
the first keyframe in the actions layer
| | 02:03 | and open the Actions panel.
| | 02:06 | One way that we can make sure that this
file is being loaded as an external SWF
| | 02:10 | file is to use an If statement.
| | 02:12 | So write a simple skeleton of an if statement.
| | 02:14 | That's if in parentheses and curly braces.
| | 02:18 | Inside the parentheses, check
to see if parent is a Loader.
| | 02:24 | So parent space is space
Loader with a capital L.
| | 02:28 | The Is statement is used to check a datatype.
| | 02:33 | So if the datatype of parent is Loader,
then run the code in the curly braces.
| | 02:40 | So in here, we'll create a variable
called mainTimeline, and it will represent
| | 02:46 | the main Timeline of the parent SWF file.
| | 02:48 | So type colon MovieClip, capital M,
capital C, and we'll set that equal to
| | 02:54 | parent, which refers to the Loader, dot
parent, which refers to parent of the
| | 03:00 | Loader, which is the main
Timeline. Type a semicolon.
| | 03:05 | We're going to run into a problem because,
remember, parent is a display object.
| | 03:12 | So I need to tell Flash to treat
parent as a movie clip. Again, this is
| | 03:17 | called typecasting.
| | 03:18 | So right before the first parent,
I'm going to type MovieClip, capital M,
| | 03:23 | capital C, and wrap the two
parents inside of the movie clip.
| | 03:28 | Again, I'm not creating a new movie clip here.
| | 03:31 | I'm simply telling Flash to treat this
particular piece of data as a movie clip.
| | 03:36 | So let's go to the next
line, and then we'll type
| | 03:41 | mainTimeline.front_mc.play_mc.visible = false.
| | 03:54 | So once the child movie clip loads,
this code will run and hide play_mc.
| | 04:02 | So we should be able to test the
movie now without getting any errors.
| | 04:06 | Everything looks good.
| | 04:08 | So let's go to the main
FLA file and test the movie.
| | 04:11 | When we click the Play button, the
button should disappear. There it goes.
| | 04:17 | So, we've successfully navigated from a
child SWF and manipulated objects in a parent SWF.
| | 04:30 | So remember, the parent property
refers to the Stage when you're in the main
| | 04:36 | Timeline of a SWF file, unless that
SWF file is loaded into another SWF file.
| | 04:42 | In that case, the parent property of
the child SWF refers to the Loader that
| | 04:48 | loaded the child SWF.
| | 04:49 | So you can access the main Timeline by
moving it backwards by using parent command.
| | 04:57 | Once you get into the main Timeline, you
can edit any of objects or run any code
| | 05:03 | just as if you're writing that
code in the parent's main Timeline.
| | Collapse this transcript |
| Creating a timeline-based preloader to load an external SWF file| 00:00 | There are several different
ways to create preloaders.
| | 00:03 | One of the most common is to use a
100-frame Timeline animation and go to the
| | 00:09 | frame that corresponds to the
percent of the movie that is loaded.
| | 00:12 | On the stage, I have a
movie clip called prog_mc.
| | 00:16 | If I double-click that movie clip,
you can see its Timeline is a simple 100-
| | 00:20 | frame animation that shows
that blue bar going across.
| | 00:26 | You may also notice that on the actions
layer, I put a stop action on frame one.
| | 00:30 | That's so that movie
just doesn't play by itself.
| | 00:34 | So let's go to Scene 1, and then I have play_mc -
| | 00:37 | that's a Play button, and then I
have a movie clip called mask_mc.
| | 00:42 | This is actually going to work as an
ActionScript mask, which I will show you
| | 00:45 | how to apply in just a second.
| | 00:47 | Click the first keyframe in the
actions layer and open up the Actions panel.
| | 00:52 | So I have some code here already, but it
should look pretty familiar to you by this point.
| | 00:56 | I am loading a file, and I have the
Play button's buttonmode set to true, the
| | 01:03 | file gets loaded whenever
you click the Play button;
| | 01:06 | pretty standard stuff.
| | 01:08 | Here is the new line of code:
| | 01:09 | loader.mask = mask_mc.
| | 01:12 | That's all you need to do to
apply an ActionScript mask.
| | 01:16 | The funny thing is it's almost easier
than applying a mask in the Timeline.
| | 01:20 | Just use the Mask property,
and set it to a movie clip.
| | 01:24 | So now that we have walked through
our code, let's look at adding the
| | 01:29 | EventListener for loading the file.
| | 01:32 | I will add the EventListener
right under play_mc.addEventListener.
| | 01:35 | So we are going to add an
EventListener to track the loading file.
| | 01:41 | So we want to see the percentage of the SWF
that's loaded and show that inside of prog_mc.
| | 01:47 | So type loader.contentLoaderInfo -
| | 01:52 | remember to add EventListeners to
contentLoaderInfo, not to loader itself -
| | 01:57 | .addEventListener, and the event is
going to be ProgressEvent, capital P,
| | 02:01 | capital E, dot PROGRESS in all caps.
| | 02:03 | Then we will run a function called
trackProgress, capital P. Close up the
| | 02:10 | parentheses, and define
trackProgress right below playClicked.
| | 02:14 | So function trackProgress,
capital P, some parentheses.
| | 02:19 | Inside of the parantheses type event:
ProgressEvent, capital P and capital E. It should be blue.
| | 02:28 | After the parentheses, colon,
void and some curly braces.
| | 02:34 | In the trackProgress function,
create a variable called perLoaded, short
| | 02:40 | for percent loaded.
| | 02:42 | After perLoaded, type a colon and
declare the datatype as a Number.
| | 02:47 | Right after that, type space equals
space, and then we are going to get the
| | 02:52 | percent loaded by dividing the number of bytes
that have loaded by the number of total bytes.
| | 02:58 | We can get all that data
from the Event property.
| | 03:02 | So type event.bytesLoaded, divided by -
which is a forward slash - event.bytesTotal.
| | 03:11 | Then we need to multiply that value by 100.
| | 03:18 | Wrap that whole expression in parentheses.
Don't forget the semicolon at the end.
| | 03:25 | And then right before the
first parenthesis, type Math.round.
| | 03:34 | Don't type an open
parenthesis; we only need one.
| | 03:38 | So now I have the percent loaded and
this expression here, and it's held inside
| | 03:43 | of the perLoaded variable.
| | 03:44 | So now we'll just send the progress
movie clip to the appropriate frame:
| | 03:50 | prog_mc.gotoAnd with capital A,
Stop with S and in parentheses, pass in
| | 03:58 | perLoaded, capital L.
| | 04:00 | So now, I will test the movie, and
then I will click the Play button.
| | 04:07 | You can see that blue bar
is loading in the background.
| | 04:11 | Now, it went really fast
because it's not online.
| | 04:15 | So if you want to mimic the loading,
you can test the movie again with the SWF
| | 04:19 | open, and that will launch the Simulate
Download command, and you can click the
| | 04:26 | Play button from there to see
the progress a little more slowly.
| | 04:29 | It looks like it's working just right.
| | 04:37 | I will just let it finish,
and then close the window.
| | 04:46 | So there is our preloader.
| | 04:48 | So remember that you can access all
the preload information through the
| | 04:53 | contentLoaderInfo property, and
the event that dispatches every time
| | 04:58 | LoadProgress is made is
called ProgressEvent.PROGRESS.
| | Collapse this transcript |
| Displaying playback progress of a loaded SWF file| 00:00 | When you load a SWF into Flash, you may want
to track its playback progress like a video.
| | 00:05 | You may have seen earlier in this course
when we did that with a single SWF movie.
| | 00:10 | The process is slightly
different with external files, though.
| | 00:14 | In addition, we're going to be using all
ActionScript, instead of using the Timeline.
| | 00:21 | So if I test the movie, I can
click the Play button and load the SWF.
| | 00:28 | The blue bar represents
the amount that's loaded.
| | 00:31 | So this little element on the left
side will display the playback progress.
| | 00:40 | Let's close the window, select the first
keyframe of the actions layer, and open
| | 00:46 | up the Actions panel.
| | 00:48 | In your code, find the line of
code that adds the EventListener to
| | 00:52 | contentLoaderInfo, copy it,
and paste it on the next line.
| | 00:56 | We're going to add another
listener to listen for the complete event.
| | 01:00 | So change ProgressEvent.PROGRESS to
Event, with a capital E, dot, COMPLETE -
| | 01:07 | all caps. Change trackLoad
to swfLoaded, with a capital L.
| | 01:21 | Now, create a function called swfLoaded.
| | 01:25 | swf are lowercase, Loaded has a
capital L. In the parentheses, type event,
| | 01:32 | colon, Event, with a capital E.
Close out the parentheses and then
| | 01:36 | afterwards, type colon, void - all lowercase.
| | 01:41 | After that, type some curly braces.
| | 01:45 | Inside the curly braces, we're
going to add another EventListener.
| | 01:48 | So type addEvent, capital E, Listener
with a capital L, and this time we're going
| | 01:56 | to listen for the ENTER_FRAME event,
because we want to track the load progress
| | 02:02 | every frame of the loaded SWF.
| | 02:04 | We don't want to start tracking
progress until the SWF starts playing.
| | 02:09 | So here we'll type Event, with a capital E,
dot ENTER_FRAME in all caps and a comma
| | 02:16 | and a space, and then we'll type
trackPlayback. Below the swfLoaded function,
| | 02:23 | create the trackPlayback function:
| | 02:26 | function trackPlayback with a
capital P. In the parentheses, type event
| | 02:35 | lowercase, colon, Event with a capital
E, colon, void for no return data and
| | 02:42 | then some curly braces.
| | 02:45 | Now we want to get the percent
of the movie that has been played.
| | 02:49 | We can get that information by typing
var, space, per and then Played with a
| | 02:57 | capital P. So we're holding this in a
variable. Datatype it to a number and then
| | 03:03 | set the value at loader.content.currentFrame.
| | 03:11 | Now we're going to need to wrap
loader.content in parentheses, and write
| | 03:16 | MovieClip before it.
| | 03:17 | You want to make sure that Flash treats
that as a movie clip so we don't get any errors:
| | 03:22 | so MovieClip with capital M and a capital C.
| | 03:25 | Now I'm going to select that little statement,
| | 03:29 | the MovieClip, loader.content, and currentFrame.
| | 03:31 | I'm going to copy with Command+C or
Ctrl+C and then after currentFrame, I'll
| | 03:36 | type a space, and forward slash and
space, and then paste the code and change
| | 03:42 | currentFrame to totalFrames.
| | 03:44 | That's how we get the percentage.
| | 03:46 | We simply divide the currentFrame by
the total number of frames, and we'll get a
| | 03:51 | number between 0 and 1 that
will represent a percentage.
| | 03:56 | This time we're not going to round the number.
| | 03:58 | So go to the next line, and we're going to
specify where the Progress slider is going to be.
| | 04:08 | That's the little element on
the left side of the Progress bar.
| | 04:14 | So type prog_mc.drag.x, space, equals, space,
and then we have to determine its position.
| | 04:25 | Now, in order to get its position,
all we have to do is multiply the
| | 04:30 | percentage that we already have in the
perPlayed variable by the maximum right
| | 04:39 | position of the object.
| | 04:42 | Now we can get the maximum right
position by starting with the width of prog_mc.
| | 04:48 | So type prog_mc, and then dot width.
| | 04:53 | I'll close the Actions panel, and
let's take a look at this visually.
| | 04:58 | So on the stage, I have prog_mc.
| | 05:01 | Let's enter its Timeline.
| | 05:03 | So if we were to move the drag movie
clip to the amount of prog_mc.width,
| | 05:10 | its left edge would align with the
right edge of the Progress bar, and
| | 05:17 | that's too far to the right.
| | 05:18 | So we need to shift it back to the
left in exactly the amount of the width
| | 05:23 | of the drag object.
| | 05:25 | So I can shift it right here.
| | 05:29 | That's what we want it.
| | 05:31 | So let's go back to our code and write that.
| | 05:34 | Go back to Scene 1, select frame 1 in the
actions layer and open up the Actions panel.
| | 05:40 | So we'll offset that by negative
prog_mc.drag.width So we'll wrap the
| | 05:49 | subtraction in parentheses and
multiply that value by the percentage played,
| | 05:56 | which is per, and then
Played, with a capital P.
| | 06:00 | So when the currentFrame is the same
as the totalFrames, then perPlayed will
| | 06:06 | equal 1, which means drag element will
be at prog_mc.width minus the width of
| | 06:17 | the drag, times one, or just
minus the width of the drag.
| | 06:22 | So it will be in exactly the right spot
at the end, and it will start out at 0.
| | 06:28 | So let's test the movie and see what we've got.
| | 06:31 | Click the Play button, and watch the progress.
| | 06:34 | It looks like it's working perfectly.
| | 06:50 | Just let it finish.
Then I'll close the playback window.
| | 06:54 | So notice as the movie loops around then
the playback progress loops around as well,
| | 07:00 | so we don't even have to recode that.
| | 07:02 | So to track playback progress,
reference the main timeline by getting to
| | 07:08 | loader.content, and then you can
access the currentFrame and totalFrames
| | 07:13 | properties, and you divide
currentFrame by totalFrames to get the
| | 07:17 | percentage played.
| | Collapse this transcript |
|
|
9. Working with TextCreating plain text files| 00:00 | Throughout this chapter we are going to
be working a lot with plain text files.
| | 00:04 | A plain text file is a file that does
not have any formatting applied to it, and
| | 00:10 | has the .txt extension.
| | 00:14 | Let's look at how to create a plain text file.
| | 00:16 | Of course, I can't show how to do this
in every application, on every operating
| | 00:20 | system, but I am just going to show
you the basic rules for creating a plain
| | 00:25 | text file, and you should be able to
apply these same concepts in whatever
| | 00:29 | application you use to create your files.
| | 00:32 | If you are working on a Mac,
I recommend using the built-in
| | 00:34 | application TextEdit.
| | 00:36 | If you are working on a PC, use
the built-in application Notepad.
| | 00:41 | These applications can
definitely create plain text.
| | 00:44 | One example of an application you
absolutely do not want to use to create your
| | 00:48 | plain text files is Microsoft Word.
| | 00:51 | So you want to use a barebones
text editor, like TextEdit or Notepad.
| | 00:56 | In your text editor, you
should have a Preferences area.
| | 01:01 | TextEdit has Preferences under TextEdit.
| | 01:04 | So I click Preferences, and then you
can explain that whenever you create a new
| | 01:09 | document - so click the New Document tab -
| | 01:12 | that you want to use Plain text,
which is different from Rich text.
| | 01:16 | So I'll click Plain Text and
then close the Preferences window.
| | 01:20 | Now what I am going to do
is create a new document.
| | 01:23 | So I will close this one
and then go to File > New.
| | 01:28 | Notice that I have no controls for styling text.
| | 01:31 | I can type, and it's plain, un-styled text,
and I have no options to style the text.
| | 01:41 | When you are ready to save the file,
just go to File > Save, and make sure you
| | 01:46 | end the file name with .txt.
| | 01:47 | I am just going to cancel out of that for now.
| | 01:51 | So to create a plain text file, use a
barebones text editor, like TextEdit or Notepad,
| | 02:00 | make sure you are working in plain
text mode, not rich text mode, and save the
| | 02:04 | file with the .txt extension.
| | Collapse this transcript |
| Loading text from an external text file| 00:00 | Just like loading any other external
file into Flash, using external text files
| | 00:05 | gives you the advantage of updating text
in an app without having to republish a SWF.
| | 00:11 | On the stage, I have a text field.
| | 00:15 | I've given it an instance name of info_txt.
| | 00:18 | Note that I'm using
Classic Text instead of TLF Text.
| | 00:25 | Most the time, I like to use Classic
Text because it doesn't require an
| | 00:29 | additional file to be bundled with
my SWF when I publish my application.
| | 00:34 | I typically only use TLF Text where I
want to use specific features that I can
| | 00:39 | only access to that text engine.
| | 00:42 | So I'm using a Dynamic Text field, and
then I'll scroll down, and then I've have
| | 00:48 | added a drop shadow to the text.
| | 00:49 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:56 | At the top of my code, I'm going to
create a few new lines. In here, I'll create
| | 01:01 | a variable called textLoader, with a
capital L. Then I'll datatype it to an URLLoader.
| | 01:11 | The URLLoader class is
used to load external data.
| | 01:15 | This is more for files like text files,
whereas the Loader class is used to load graphics.
| | 01:22 | So we'll type space equals space and
then the standard new space, URLLoader, URL
| | 01:29 | is all capital, and Loader has a capital L, some
parenthesis and a semicolon. = new URLLoader();
| | 01:33 | So we've created that object.
| | 01:39 | In ActionScript, object and instance
are synonymous, so back_btn would be an
| | 01:46 | instance and also an object.
textLoader is an instance of an URLLoader class,
| | 01:53 | just like back_btn is an instance of
the simple Button Class or the MovieClip
| | 01:58 | class, for example.
| | 01:59 | So let's go to the next line, and
then what we want to do is add an
| | 02:06 | EventListener to textLoader.
| | 02:07 | So type textLoader.addEventListener,
and when you want to listen for when the
| | 02:16 | file has done loading, it's Event.COMPLETE,
| | 02:20 | just like with the Loader class.
| | 02:21 | So Event, capital E .COMPLETE, in all caps.
| | 02:26 | Notice that I'm not adding an
EventListener to a specific property of the textLoader;
| | 02:31 | I'm just adding it directly to textLoader.
| | 02:34 | So this is a little bit different from when
you add the EventListener to the Loader class.
| | 02:38 | You add it directly to the URLLoader.
| | 02:41 | So after Event.COMPLETE, type comma
and a space, and then type textLoaded.
| | 02:49 | So, remember that's different from
textLoader, which is the object. textLoaded
| | 02:54 | is the event handler name.
| | 02:56 | So, close out the parenthesis and then scroll
all the way down to the bottom of your code.
| | 03:06 | At the bottom of your code, create a
function. Call it textLoaded. And in the
| | 03:14 | parenthesis, I'm going to evt, short
for event, colon and then Event, with a
| | 03:22 | capital E. After the parentheses, I'll
type a colon and then void, for no return
| | 03:30 | data, and some curly braces.
| | 03:34 | Once the text is loaded, we're going to
put the text inside of that text field,
| | 03:40 | which if you remember, is info_txt.
| | 03:44 | If you ever want to double-check that,
you can click the target path icon at the
| | 03:49 | top of the Actions panel, and you can
review the instance names of objects in
| | 03:53 | your code. So, I have info_txt.
| | 03:57 | Names in parentheses are objects
that don't have instance names.
| | 04:01 | I'll just click Cancel there.
| | 04:03 | So to set the text of a text field,
you use the text field's text property.
| | 04:10 | So type info_txt.text space equals space,
and then we can access the text data
| | 04:21 | from the URLloader object, which we
named textLoader through its data property
| | 04:29 | So we'll set info_txt.text equal
to textLoader, capital L, dot data.
| | 04:36 | Now, the last thing that we have to
do is actually load the text file.
| | 04:42 | We'll load that right below the
addEventListener line of code.
| | 04:50 | Always remember to load files after you
add the EventListener, just in case the
| | 04:55 | file gets loaded before the
EventListener is added, because in that situation
| | 05:00 | the event handler, which in this case
is textLoaded, would never be triggered.
| | 05:04 | So always load the file
after adding the EventListener.
| | 05:07 | So textLoader.load, and Flash
is asking for a URLRequest.
| | 05:15 | So in the parentheses, I'm going to type,
new, space, URL, all caps, Request
| | 05:22 | with a capital R, and then some parentheses.
| | 05:25 | Then I'm going to type the string
that will represent the path to the file
| | 05:31 | that we want to load.
| | 05:33 | In the quotes, I'll type the path of the file.
| | 05:36 | The file is in the assets folders,
so I'll type assets first, forward slash, bear_01.txt.
| | 05:48 | So let's test the movie
and preview the application.
| | 05:51 | There is the text field loaded into Flash.
| | 06:01 | So whenever you want to load text data
into Flash, you can use the URLLoader class.
| | 06:09 | Make sure to add the EventListener directly to
your URLloader object before you load the file.
| | 06:17 | Once the file is loaded, you can
place that data wherever you like for the
| | 06:22 | URLloader object's data property.
| | Collapse this transcript |
| Loading multiple text files| 00:00 | Currently, our application loads one text file,
which corresponds to one image in the slideshow.
| | 00:07 | I'll test the movie to show an example of that.
| | 00:11 | So I have my slideshow here, and it
starts out with, "If you leave your food
| | 00:14 | at night while you're camping," and I
can click through the slides, but the
| | 00:18 | text never changes.
| | 00:20 | Let's say we wanted to load one bit of
text for each slide. And one thing we
| | 00:27 | could do is copy the code that loads the
single text file on each frame of the application,
| | 00:34 | but then if you wanted to make a change,
you'd have to change the code in each
| | 00:39 | frame, which wouldn't be insanely
tedious in this six-frame application, but you
| | 00:44 | can imagine if you had a hundred frames.
| | 00:48 | Let's take a look at how to make a
reusable function that can apply for each
| | 00:52 | frame of the application.
| | 00:55 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:59 | In the Action panel, scroll to the
top of your code and look at the string
| | 01:08 | that's loading a text file.
| | 01:12 | The path of the file is assets/bear_01.txt.
| | 01:20 | The files that I've created for this
application are bear_01 through bear_06,
| | 01:28 | so the only thing that's
changing is that single digit.
| | 01:32 | So the goal is to make something that
can simply swap out that digit in each
| | 01:38 | frame. The wonderful thing for this
example is that the numbers perfectly
| | 01:44 | correspond to the frames.
| | 01:46 | So there are six images that are in a
sequence and then six text files that are
| | 01:52 | in a sequence as well.
| | 01:55 | So if we use the current frame
number, that should work perfectly.
| | 01:59 | So right below this, I'm going to run
a function that we haven't created yet
| | 02:04 | called loadText, with a capital T. Then
I'll define that function right below
| | 02:13 | textLoaded, all the way
at the bottom of my code.
| | 02:17 | So function, loadText with a capital T, some
parentheses, colon void and some curly braces.
| | 02:25 | Standard skeleton of function.
| | 02:28 | In here, I'm going to create a variable
called fileName, and that's going to be
| | 02:36 | a string, and here what I'm going to do is
I'll set it equal to something that
| | 02:43 | I've already written.
| | 02:44 | So let's scroll up and select that
line of code that loads the file,
| | 02:50 | so that's line 7 in my code, textLoader.load.
| | 02:52 | I'm going to cut that code, I'll scroll
all the way down to the bottom, and then
| | 02:59 | I'll paste that code right below
var Filename:String, and then what
| | 03:06 | I'll do is I'll take that string,
including the quotes, cut it with Command+X or
| | 03:14 | Ctrl+X and then paste it after the Equal sign.
| | 03:18 | So I'm setting the file name
equal to the full path of the file.
| | 03:24 | Then inside of the URLRequest, on the
next line of code, I'm going to use
| | 03:29 | fileName instead of writing
the full path of the file.
| | 03:36 | So essentially, this should do the exact
same thing as it did before, except that
| | 03:40 | the loading code is now inside of a function.
| | 03:44 | So test the movie, and it should work just fine.
| | 03:47 | Okay, I'll close the Preview window,
and now we'll look at making the simple
| | 03:53 | changes that will make this function
apply to every frame of the slideshow.
| | 04:00 | What I'm going to do is at the bottom
of each of the event handlers, for the
| | 04:07 | mouse clicks - so forwardClicked and
backClicked - I'm going to run loadText.
| | 04:14 | So after the frame is manipulated, I'm
going to run loadText to load a file in.
| | 04:20 | So I'll do that at the very bottom of
backClicked, so I'll type loadText with
| | 04:23 | a capital T, and then scroll down to the
bottom of forwardClicked and do the same thing.
| | 04:30 | Right before that final close curly
brace for that function, I'll type loadText
| | 04:35 | capital T, some parentheses and semi
colon, and then I'll scroll all the way
| | 04:39 | down to the loadText
function, where it's defined.
| | 04:44 | Remember that the only thing we had to
change each time is the number of the text file.
| | 04:51 | So there's bear_01, and
there is bear_02, and 03, et cetera.
| | 04:57 | So we just need to change that single digit.
| | 04:59 | So I'm going to break this
string up, by typing two quotes.
| | 05:05 | Now I'll type some spaces, and I'll
put a space in between the ending of the
| | 05:10 | first string, type a Plus sign, and then
some extra space and another Plus sign.
| | 05:19 | So as this reads now, it's
just going to add-on bear_02.txt.
| | 05:26 | So if we put the correct number inside
the Plus signs, and that'll get inserted,
| | 05:32 | and the right file will be loaded.
| | 05:35 | As I said earlier, the correct number
simply corresponds to the current frame.
| | 05:41 | So if I just type currentFrame,
then it should work perfectly.
| | 05:46 | So let's test the movie and click the
Next buttons and the Previous button,
| | 05:53 | click the Next button and the Previous button,
and you can see all the text files loading.
| | 06:05 | So again, we're simply taking the string
that ends with bear_0, and each time the
| | 06:10 | frame is updated we're running loadText,
we are setting that number, or the file to
| | 06:16 | load, equal to the current frame.
| | 06:19 | So bear_01, bear_02 depending on the frame.
| | 06:24 | And at the end we tack on ".txt",
| | 06:27 | and the appropriate file loads.
| | 06:30 | So by adding a reusable function,
like loadText here, you can use the same
| | 06:35 | code to loadText files for as many
frames as you want, as long as you name the
| | 06:41 | text files accordingly.
| | Collapse this transcript |
| Rendering simple HTML in a text field| 00:00 | Text fields support simple HTML code.
| | 00:04 | If I test the movie, you'll see that
I have some HTML code that links to
| | 00:09 | explorecalifornia.org in my text field.
| | 00:13 | This is a standard HTML link.
| | 00:16 | If you're curious about HTML code, you
can watch Dreamweaver Essential Training.
| | 00:23 | Close the window, go to the first keyframe of
the actions layer, and open the Actions panel.
| | 00:28 | Note that I'm loading a
file called bear_html.txt.
| | 00:34 | That file has the HTML code inside of it.
| | 00:37 | So, if you want to have Flash render
simple HTML code, you can scroll down and
| | 00:45 | change text in info_txt.text inside
of the textLoaded function, to html all
| | 00:53 | lowercased and then Text with a capital T.
| | 00:56 | That's it, test the movie, and then
explorecalifornia.org will be a link.
| | 01:02 | So you can click that,
and the web site will open.
| | 01:09 | Now, Flash doesn't support
all HTML, just parts of it.
| | 01:14 | If you want to find more
information about what specific HTML tags are
| | 01:17 | supported, you can look htmlText up
in Flash Help by highlighting it and
| | 01:23 | pressing F1 on your keyboard.
| | 01:27 | Let's take this to the next level.
| | 01:29 | Let's say that when you roll over the
link, you want an underline to appear.
| | 01:34 | To do that, you can apply a CSS style.
| | 01:38 | This works pretty close to how it works
in HTML, except for we're going to use
| | 01:43 | CSS using ActionScript only.
| | 01:47 | So, scroll to the top of the code and
above the var textLoader line of code,
| | 01:54 | create a new line of
code and type var space css.
| | 02:00 | We'll datatype that to
a StyleSheet, capital Ss.
| | 02:06 | I'll set that equal to a new
instance of the StyleSheet class, so some
| | 02:12 | parentheses and a semicolon. So, I'm
creating in the new StyleSheet, and then I'm
| | 02:16 | going to apply a style to it.
| | 02:18 | So go to the next line and type
css.set, capital S for Style, and in the
| | 02:26 | parentheses, Flash is asking for two things:
| | 02:29 | styleName and styleObject.
| | 02:32 | The name is like what the
CSS rule would be for. So a:
| | 02:37 | hover would be for a
link when you hover over it.
| | 02:40 | So that's a string, so I'll type a string
here, two quotes, and then inside of the quotes,
| | 02:45 | I'll type "a:hover."
| | 02:48 | Now this is standard CSS for styling a link.
| | 02:52 | Again, I'll refer you to
Dreamweaver Essential Training for more
| | 02:55 | information about that.
| | 02:57 | After the quotes, type a comma and a
space, and then we're going to create
| | 03:02 | a styleObject. And this is where we
specify that there is going to be an underline.
| | 03:11 | To create the styleObject, type curly
braces, so open and closed curly braces,
| | 03:17 | and make sure to close up the
parentheses and type a semicolon.
| | 03:22 | Now put your cursor inside of the curly braces.
| | 03:26 | These curly braces are shorthand
notation for creating an ActionScript object.
| | 03:32 | Inside of the curly braces, type
textDecoration with a capital D;
| | 03:38 | this is all one word.
| | 03:39 | So textDecoration. This is not going to
turn blue this time, but it is something
| | 03:44 | that Flash already knows.
| | 03:46 | Then type a colon, add some quotes, and in
the quotes, type underline, all lowercase.
| | 03:56 | So here is how you set a CSS style.
| | 04:00 | If you wanted to set additional styles,
you can highlight the setStyle method
| | 04:07 | and then press F1 on your keyboard to
read about the supported styles, and
| | 04:11 | then you can add them by typing a
comma after the quotes and underline and
| | 04:16 | adding the additional styles.
| | 04:18 | For now, we're just going to
leave it at textDecoration underline,
| | 04:21 | so this is only going to apply when
you roll over the link, or in other words
| | 04:25 | when you hover over the link.
| | 04:27 | Scroll all the way to the bottom of your
code, and now we'll need to connect the
| | 04:32 | text field to the CSS style.
| | 04:34 | So right below this htmlText line
of code, we'll create a new line.
| | 04:41 | So on the next line, type info_txt.styleSheet,
| | 04:49 | capital S for Sheet, space,
equals, space, css, and then a semicolon. That's it.
| | 04:57 | Test the movie, and now when you
roll over explorecalifornia.org, you'll
| | 05:03 | see that underline.
| | 05:05 | You can also click it to
see if the link still works.
| | 05:08 | Now, I'll close the Preview window.
| | 05:10 | So you can have Flash render simple HTML
code by changing the Text property to htmlText.
| | 05:17 | Remember that Flash doesn't support
all HTML, just a few specific tags.
| | 05:23 | Then you can create an
ActionScript StyleSheet by using the new
| | 05:28 | StyleSheet command.
| | 05:30 | Then you use the setStyle method to set a style.
| | 05:34 | You specify the styleName as a string
and then the specifics of the style inside
| | 05:41 | of an ActionScript Object,
which you can create like this.
| | 05:45 | Finally, you set the StyleSheet
property of the text field to the
| | 05:49 | StyleSheet that you created.
| | Collapse this transcript |
| Creating a scroll bar for a text field| 00:00 | You can always use a simple built-
in scroll bar to scroll a text field.
| | 00:04 | But using some standard math, you can
create your own custom scrollbar with
| | 00:09 | any graphics you want.
| | 00:10 | So I'll scroll up and on the Stage I
have a movie clip called drag, and then
| | 00:16 | another movie clip called bar.
| | 00:18 | So those are all lower case.
| | 00:20 | Let's go to the first keyframe of
the actions layer and open up the Actions panel.
| | 00:24 | Here we will use code to make those
graphics become a scrollbar to scroll
| | 00:30 | our text field.
| | 00:31 | Scroll to the top of your code and right
above the stop action, it's on 11 in my
| | 00:36 | code, create a new lines and type the following.
| | 00:40 | drag.addEventListener, capital E,
capital L, and in parentheses the event's
| | 00:46 | going to be MouseEvent.MOUSE_DOWN
Remember MOUSE_DOWN is in all caps,
| | 00:51 | separated with an underscore.
| | 00:54 | And then we'll run a
function called dragMouseDown.
| | 00:55 | We'll scroll to the bottom of your
code and below everything else I'll
| | 01:02 | create that functions.
| | 01:03 | So function and dragMouseDown
and in the parentheses we'll type
| | 01:09 | EBT:MouseEvent:void after the
parentheses for no return data and inside of the
| | 01:15 | curly braces, I will tell
Flash to drag the drag movie clip.
| | 01:21 | So drag, which is the name of the movie
clip, .startDrag with a capital D. Type
| | 01:26 | some parentheses and a
semicolon and test the movie.
| | 01:29 | So just click and drag and
you can drag that movie clip.
| | 01:34 | Notice that when you let your
mouse go that it still drags.
| | 01:38 | So we'll need to tell it to stop dragging.
| | 01:40 | So go to the next line.
| | 01:41 | And we'll type stage.addEventListener
Event's going to be a MouseEvent.MOUSE_UP
| | 01:49 | and we'll run a function called
dragMouseUp, capital M, capital U. Now the
| | 01:54 | reason I'm adding the event listener to
the Stage and not to drag, is because if
| | 01:59 | the person viewing the application
moves their mouse really fast and lets go in
| | 02:04 | a different spot and doesn't happen to
be on drag, then we will miss that event
| | 02:09 | if we attach the event to drag.
| | 02:11 | So we attach it to the Stage to
capture the event wherever it happens.
| | 02:15 | So I'll copy this block of code, and
then paste it a few lines down, and change
| | 02:21 | dragMouseDown to dragMouseUp and drag.
StartDrag to drag.StopDrag then I'll
| | 02:28 | change stage.addEventListener
to stage.removeEventListener.
| | 02:32 | So I will test the movie again.
| | 02:35 | Now we can drag-and-drop the drag movie clip.
| | 02:39 | Now the next step is to constrain
the movement of the drag movie clip.
| | 02:44 | You can do this using a rectangle.
| | 02:47 | Basically you give Flash a bounding box
for the draggable movie clip, and it's
| | 02:52 | in the shape of a rectangle.
| | 02:53 | So scroll up to the top of your
code and we will define that rectangle.
| | 02:57 | I'll do that right above where I defined
| | 03:00 | drag.addEventListener(MouseEvent.MOUSE_DOWN.
| | 03:03 | So I create a variable and we will
call this dragRect, data type it to
| | 03:08 | a Rectangle.
| | 03:09 | We will set equal to a new rectangle
and in the parantheses the parameters go
| | 03:16 | to X,Y, width, height.
| | 03:19 | So the starting position of the
rectangle that we want to be able to drag is
| | 03:23 | wherever the drag is
currently, which is at the top.
| | 03:26 | So if you close the Actions panel, take
a look at the drag movie clip, we want
| | 03:30 | that origin of the rectangular
area to be at the same origin as drag.
| | 03:35 | So that should be nice and easy.
| | 03:37 | Go back to the code and then type
drag.x, drag.y. And then the width.
| | 03:44 | The width is easy because we don't
want to move left or right when we have a
| | 03:48 | scroll bar that's vertical.
| | 03:49 | So we just type in zero and in for the
height we want it to go all the way into
| | 03:54 | the bottom of the bar.
| | 03:56 | So a good starting point
is the height of the bar.
| | 04:00 | So we'll type bar.height.
| | 04:01 | Now before we test the movie I want to
apply this dragged rectangle to the drag.
| | 04:06 | So scrolling to the bottom of your
code and find the startDrag line of code.
| | 04:12 | On mine it's 51 and it's inside
of the dragMouseDown function.
| | 04:16 | Inside of startDrag we're
going to pass in two parameters.
| | 04:20 | The first is whether to lock the
center of the draggable object.
| | 04:24 | Now, here, we want to type false.
| | 04:26 | If we were to put true, then it the top-
left of the drag movie clip would lock
| | 04:32 | to the mouse point, which
would be really weird looking.
| | 04:34 | So let's just say false and then
a comma, and then dragRectangle.
| | 04:40 | Test the movie.
| | 04:42 | And now drag the scrollbar.
| | 04:44 | Notice you can't drag it left or right.
| | 04:46 | And if you try to scroll it all the
way to the bottom, it stops at the point
| | 04:49 | where the top of drag is
aligned at the bottom of bar.
| | 04:53 | We don't want to it to be like that.
| | 04:54 | We want it to be so the bottom of
bar is aligned at the bottom of drag.
| | 04:58 | So we need to offset that by the height
of the drag movie clip, shifting it up
| | 05:04 | to the appropriate position.
| | 05:05 | So to do that, scroll to the top of
your code and after bar.height on the line
| | 05:11 | were you create the new
rectangle, subtract drag.height.
| | 05:14 | Now test the movie.
| | 05:15 | The scrollbar should work just right.
| | 05:20 | I'll close the preview window.
| | 05:22 | So all you need to do to create a
draaggable scroll bar is used to startDrag
| | 05:26 | command and pass in the constraining rectangle.
| | Collapse this transcript |
| Scrolling a text field| 00:00 | If you have a custom scrollbar, the
next step is to use it to scroll a text field.
| | 00:05 | On the stage you'll see I have
text field hat's called info_txt.
| | 00:11 | Go to the first keyframe of the
Actions layer and open up the Actions panel.
| | 00:16 | Scroll all the way to the
bottom of your code and right below
| | 00:20 | stage.addEventListener and drag MOUSE_UP
we'll add a ENTER_FRAME event listener.
| | 00:26 | So addEventListener.
| | 00:30 | And the event's going to be
Event.ENTER_FRAME in all caps.
| | 00:37 | We will run a function called scrollText.
| | 00:43 | Once we stop dragging the scrollbar,
then we'll remove that event listener.
| | 00:47 | So I'll just copy and paste this code
at the bottom of dragMouseUp and change
| | 00:51 | addEventListener to removeEventListener.
| | 00:55 | Now right below dragMouseUp
let's define the scrollText function.
| | 00:59 | So make sure it receives an event
object with the datatype of the Event, :void
| | 01:06 |
| | 01:06 | for no return data, and some curly braces.
| | 01:09 | To scroll the text field
you need to do two things.
| | 01:13 | To show the first I'll test the movie.
| | 01:16 | When you drag the scrollbar you need to
calculate the percentage the scrollbar
| | 01:22 | has moved down and using that
information you'll do the second thing, which is
| | 01:28 | to scroll the actual text field.
| | 01:30 | So again first step is to
define the percentage that scrolled.
| | 01:34 | So create a variable called
percentScrolled with a capital S. We'll data type it
| | 01:40 | to a number, and this is going to
be a value between zero and one.
| | 01:45 | So a decimal value.
| | 01:47 | Now to find that, we have to divide the
current position of the scrollbar by the
| | 01:52 | total height that the
scrollbar could be dragged.
| | 01:55 | So the current position of the
scrollbar is actually wherever drag.Y is.
| | 02:01 | However we need to offset
this by the position of the bar.
| | 02:07 | So we'll subtract bar.Y.
We'll put that in parentheses.
| | 02:16 | If we didn't subtract bar.Y, the the
percent scroll would be based on the top
| | 02:21 | of the stage.
| | 02:22 | We have to shift it down to
the position of the scrollbar.
| | 02:26 | That's why we're subtracting that.
| | 02:28 | So we'll divide that value by
another value in parentheses.
| | 02:32 | We want to get the total height
of the scrollbar to be dragged.
| | 02:36 | So the maximum value.
| | 02:39 | Now we are to set this actually at
the top of our code in our rectangle.
| | 02:44 | The height of the scrollable area
is bar.height minus drag.height.
| | 02:49 | So you can highlight and copy that if you want.
| | 02:51 | Or you can type it all over.
| | 02:53 | It doesn't matter.
| | 02:54 | And put that in the parentheses after
the forward slash and that's how we get
| | 02:58 | the percent scrolled.
| | 03:00 | Now if you just want to test to make
sure you are getting the right values
| | 03:04 | you can trace percentScrolled and
just confirm that you're getting a value
| | 03:08 | between zero and one.
| | 03:10 | So you should get zero at the top
and then one all the way the bottom.
| | 03:14 | Or something really close to that.
| | 03:17 | Because sometimes the
pixels don't line up perfectly.
| | 03:20 | So I'll click and drag the scroll bar.
| | 03:21 | At the top I get zero and at the
bottom, I get pretty close to one.
| | 03:25 | I get .992 and that's good enough.
| | 03:29 | So let's close the preview
window and erase the trace statement.
| | 03:33 | So we have the percentage that's been scrolled.
| | 03:36 | Now we just need to apply it to the text field.
| | 03:39 | So to do that we will reference the
text field, which is in info_txt and it
| | 03:44 | has a property called scrollV and that
represents the vertical scroll, as you
| | 03:51 | may have guessed.
| | 03:52 | So we'll set that equal to the
number and the number is the line number.
| | 03:57 | So to find out which number we should
go to, we're going to use math.round.
| | 04:04 | We need to have a whole number, an
integer, and in parentheses we'll take
| | 04:08 | percentScrolled and multiply that by
the maximum and scrolling value, which can
| | 04:16 | be accessed through info_txt.maxScrollV.
| | 04:21 | So we take that percentage and we
multiply it by the maximum value and when we
| | 04:30 | round that number, it will give us
the line that we need to scroll to.
| | 04:36 | So test the movie.
| | 04:39 | And then click and drag the drag
movie clip to watch the text field scroll.
| | 04:48 | And that's it.
| | 04:50 | So you can contact a scrollbar to a
text field by finding the percentage that
| | 04:54 | was scrolled and applying
that to the scrollV property.
| | Collapse this transcript |
| Scrolling movie clips and other objects using masks| 00:00 | Scrolling objects other than
text fields is possible too.
| | 00:04 | If you scroll other objects you can add
special effects to your scrolling that
| | 00:07 | you couldn't add otherwise,
like easing and smoother animation.
| | 00:11 | To see example of why you
would want that, test the movie.
| | 00:16 | As you stroll the text field,
notice that the text field that doesn't
| | 00:21 | scroll very smoothly.
| | 00:23 | It scrolls one line at a time.
| | 00:26 | Using the text field scrollV property,
that's the best you're going to get.
| | 00:30 | So you want to do is embed the text
field into a movie clip and scroll the movie
| | 00:38 | clip so that we get completely smooth animation.
| | 00:42 | So I'll select the text field and my
goal now is to makes sure that the size of
| | 00:47 | text field is big enough to
accommodate all the text without scrolling.
| | 00:52 | So I'll click and drag the text field
size down to about here and test the movie
| | 00:58 | to make sure it can accommodate all the text.
| | 01:00 | And it looks good.
| | 01:01 | So I'll close the preview window.
| | 01:04 | Add the next step is to embed
the text field into a movie clip.
| | 01:11 | So with the text field selected, I'm
going to press F8 on my keyboard convert
| | 01:17 | it to a movie clip.
| | 01:18 | I'll call the movie clip Container with
a capital C and give it an instance name
| | 01:24 | of container with a
lowercase C. So symbol, capital C;
| | 01:30 | instance, lowercase C. So
now I have container here.
| | 01:35 | And if I test the movie, you'll see
that I get some errors and that's just
| | 01:40 | because I need to tell Flash where info_txt is.
| | 01:45 | So if I double-click the errors Flash
will take me to the right line and then
| | 01:49 | instead of info_txt, I'm
going to type container.info_txt.
| | 01:56 | And I'll change that everywhere in my code.
| | 01:59 | Except for the scrollV line of code,
which I'm going to comment out for now.
| | 02:06 | So that should do it.
| | 02:07 | Now I should be able to test
the movie without any errors.
| | 02:10 | And that's good.
| | 02:13 | Now what we want to do is scroll the
movie clip instead of the text field.
| | 02:18 | Scroll down to the bottom of your code,
and what were going to do is change the
| | 02:23 | code that says info_txt.scrollV.
| | 02:26 | So obviously you're going to
have to uncomment it as well.
| | 02:28 | We'll change that to container.Y. And
so we're setting the Y position of the
| | 02:35 | container instead of messing
with the scroll of the text field.
| | 02:40 | So I'm going to erase the
part that says math.round.
| | 02:45 | So we have container.Y and then
an equal sign and then we will
| | 02:50 | type percentScrolled.
| | 02:53 | Simply because we know we're going to
need that percentage in calculating where
| | 02:57 | to place the container.
| | 02:58 | Now the next step is to figure
out what the maximum scroll spot is.
| | 03:05 | So if you shut the Actions panel and
you select the container on the stage, the
| | 03:11 | thing that we want is for the bottom
of the container to be aligned with the
| | 03:16 | bottom of the scrollbar.
| | 03:17 | So it's about right here.
| | 03:19 | So how do we get that number, other
than just writing down the Y position that
| | 03:24 | we see in the Properties panel?
| | 03:27 | First Command+Z to undo that.
| | 03:29 | So what we do is we take the height
of the bar, which is the height of the
| | 03:35 | visible area that we want, and we
subtract the height of the container.
| | 03:41 | And that's going to put
the container at about here.
| | 03:45 | And we just need to offset that by the
position of the bar which will push it
| | 03:50 | down just to the right spot.
| | 03:52 | So I'm going to undo that change and
we'll go back to our code and see what
| | 03:56 | that looks like.
| | 03:58 | So we'll take percentScrolled . After
percentScrolled type an asterisk and
| | 04:03 | then in parentheses, type bar.height
minus container.height and after the
| | 04:11 | parentheses, We're going to add
on bar.Y. So this will work for our
| | 04:18 | container's position.
| | 04:19 | Now test the movie.
| | 04:22 | Click and drag the scrollbar, and it
looks like everything is just right.
| | 04:29 | Except for one thing.
| | 04:30 | We can still see the
whole text field all the time.
| | 04:33 | So what we have to do is mask it Close
the preview window, close the Actions
| | 04:40 | panel, and we will create an
mask right above the text field.
| | 04:44 | So I'll create a new
layer and I'll call it mask.
| | 04:49 | And I'm going to just draw a solid
rectangle I like to use green for my masks
| | 04:57 | in this movie.
| | 04:58 | It's the color that's not being used.
| | 05:00 | So I'll want to make sure that if
it's showing it's really obvious.
| | 05:04 | So I'm going to click and drag.
| | 05:09 | Approximately the area of that shadow
and then I'll release my mouse button
| | 05:15 | and then what I'm going to do is
just right-click the mask lauer and then
| | 05:19 | click Mask.
| | 05:21 | And that's it.
And now I test the movie.
| | 05:24 | And the scroll bar should work just right.
| | 05:27 | So now we have smooth scrolling text
that's based on pixels instead of lines
| | 05:33 | in a text field.
| | 05:35 | So to scroll any object you want,
simply set the Y position of a container movie clip.
| | Collapse this transcript |
| Modifying TLF text properties through ActionScript| 00:00 | The Text Layout Framework is new to
Flash Pro, and using simple ActionScript,
| | 00:05 | you can apply complex
changes to TLF text fields.
| | 00:09 | If you see a warning message telling
you that you can't stream your content
| | 00:12 | when you're using a TLF text field,
you can adjust that in Advanced
| | 00:16 | ActionScript settings.
| | 00:17 | So on the stage here, I have a text field
called info_txt, and I'm using TLF text.
| | 00:24 | So I'll go to the first keyframe in
the actions layer and open the Actions
| | 00:28 | panel, and we'll look at some unique
Text Layout Framework properties that you
| | 00:33 | can manipulate using ActionScript.
| | 00:35 | For the most part, you don't really
have to change anything in your code when
| | 00:40 | you're working with the Text
Layout Framework text field.
| | 00:42 | This code I have here is code that I
wrote when I worked with the dynamic text
| | 00:46 | field using the Classic Text engine.
| | 00:48 | If I test the movie, you
can see that it still works.
| | 00:55 | So just make a note that the Text
Layout Framework is essentially the same,
| | 00:59 | except it adds a few new properties.
| | 01:01 | To look at the properties, create a
variable called info, and then capital TLF.
| | 01:09 | Datatype it as a TLFTextField, TLF is all
caps, and we'll set that equal to info_txt.
| | 01:19 | Now when we refer to the
text field, we'll use infoTLF.
| | 01:22 | So scroll to the bottom of your code,
and at the bottom of the textLoaded
| | 01:27 | function, create a new line and then
type infoTLF., and here you can see the
| | 01:37 | unique properties for a TLFTextField.
| | 01:39 | So if you want to look at all the
different properties and methods you can work
| | 01:43 | with with the Text Layout Framework,
simply scroll through this menu.
| | 01:47 | Some things that are not available
on the standard text field are things
| | 01:51 | like padding and margin.
| | 01:57 | So for example, I have paddingBottom,
paddingLeft, paddingRight, paddingTop.
| | 02:02 | So let's use paddingLeft.
| | 02:04 | Just double-click that, and I'll set
the value equal to 10, for 10 pixels on
| | 02:13 | the left side.
| | 02:14 | I'll test the movie, and you can see
that the text is brought in a little bit.
| | 02:22 | If I increase that value to say 50
pixels, it's a little bit more obvious.
| | 02:30 | So you can see I can add padding on
the different edges of the text field.
| | 02:35 | Of course, this is just one property
that you can modify on a Text Layout
| | 02:39 | Framework text field.
| | 02:41 | For more information about working
with the Text Layout Framework in
| | 02:44 | ActionScript, you can highlight
TLFTextField, where it's all blue, and then
| | 02:50 | press F1 on your keyboard.
| | Collapse this transcript |
|
|
10. Using XML with Data-Driven ComponentsReviewing XML and E4X syntax| 00:00 | XML provides an easy way to
organize data for use in Flash.
| | 00:05 | ActionScript 3.0 can read and write XML
natively, using something called E4X syntax.
| | 00:12 | Let's take a look at an XML file.
| | 00:14 | If you're unfamiliar with XML, XML data
is organized like the data I have on my
| | 00:19 | screen and is saved in a plain
text file, with the extension XML.
| | 00:26 | XML stands for Extensible Markup Language.
| | 00:29 | It's pretty similar to HTML, except for
with XML you are allowed to create your
| | 00:34 | own tags, and so I can
name anything however I want.
| | 00:38 | So let's take a look at this code,
and I'll walk through how XML works.
| | 00:43 | In XML, there are elements and attributes.
| | 00:47 | This is just like HTML.
| | 00:49 | So you'll see things like this images tag here.
| | 00:52 | That would be considered an element.
| | 00:55 | Inside of the images tag
are individual image elements.
| | 00:59 | So I have one representing each picture here.
| | 01:03 | After all the single image tags, I have
the closing tag for the main images element.
| | 01:09 | This outer element is also
known as the root element in XML.
| | 01:15 | Elements inside of other
elements are known as child elements.
| | 01:18 | So image is a child of the images element.
| | 01:23 | Attributes are values that are
placed inside the element tag.
| | 01:27 | So we have the image tag, and then
it says file, equals, and then in
| | 01:31 | quotes, alcatraz.jpg.
| | 01:34 | Attributes are all given values
using quotes, whether they are strings or
| | 01:38 | other types of data.
| | 01:39 | For example, I can add another
attribute here called width by typing a space
| | 01:44 | after the close quote, typing the width,
an equals sign, and some quotes, and
| | 01:49 | then I could type the width of the image.
| | 01:51 | So this is the syntax for working with XML code.
| | 01:55 | So using XML data, I can organize a
large amount of data without having to put
| | 02:00 | this code inside of my FLA
that has an array, for example.
| | 02:03 | That way, I can make changes outside of Flash.
| | 02:06 | So let's select all this code and see
how it's supported natively in Flash.
| | 02:11 | Copy the code with Command+C or Ctrl+C
and then tab over to Flash, select the
| | 02:15 | first keyframe of the actions
layer and open up the Actions panel.
| | 02:19 | If you don't have access to the
exercise files, you can use any file you like
| | 02:23 | for this example, even a blank file.
| | 02:25 | Paste in the code, and here we can
actually hold the XML data, written just like
| | 02:30 | this, in a Flash variable.
| | 02:32 | So right before the less than sign for
images at the very top of my code, I am
| | 02:36 | going to type var and space.
| | 02:38 | I'm going to call this images, then
capital XML, datatype it to XML, and type
| | 02:44 | space equals space, and that's it.
| | 02:46 | This data is understood by Flash as is.
| | 02:52 | So now if I do a simple trace
statement, like trace(imagesXML), I can see that
| | 02:57 | data in the Output window
without getting in there.
| | 03:00 | So I can bring XML data right into
Flash without having to change it at all.
| | 03:05 | This native reading of XML data
is known as E4X, which is short for
| | 03:11 | ECMAScript for XML.
| | 03:14 | ActionScript is what's called an
ECMAScript language, and that's why it works
| | 03:19 | with ActionScript 3.0.
| | 03:20 | So again, XML allows you to organize
data for your apps and can be manipulated
| | 03:26 | in ActionScript as native code.
| | Collapse this transcript |
| Loading an XML file| 00:00 | Loading files into Flash allows
for smaller SWF file sizes and easier
| | 00:04 | adjustments to your applications.
| | 00:06 | XML is no exception.
| | 00:07 | Let's take a look at how to load
an external XML file into Flash.
| | 00:11 | Select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:15 | If you've loaded in a text file, then
an XML file is exactly the same process.
| | 00:20 | So we'll create a variable called
imagesXML, in all caps. Datatype it to XML.
| | 00:25 | We'll give this variable a value
later on, once the data is loaded. And I
| | 00:30 | am creating a variable here so that
we can access it anywhere in our code.
| | 00:34 | Go to the next line and create a
variable called xmlLoader, with a capital L.
| | 00:40 | Datatype it to URLLoader. Set it equal
to a new instance of the URLLoader class,
| | 00:45 | exactly like what you would
do with loading a text file.
| | 00:49 | Go to the next line.
| | 00:50 | Add an EventListener to the XML loader;
| | 00:52 | xmlLoader.addEventListener. Event is
going to be Event.COMPLETE, which means the
| | 00:57 | file is finished loading.
Type comma and a space.
| | 01:00 | I'll run a method called xmlLoaded.
| | 01:03 | Go down a few lines and
create the xmlLoaded function.
| | 01:07 | Make sure it receives an Event object,
which I'm going to call evt, with the
| | 01:12 | datatype of Event, close up the
parentheses, type colon, void, and some curly
| | 01:17 | braces. And here we'll set the value
of imagesXML equal to the loaded data.
| | 01:24 | Remember that you can access the loaded
data through the URLLoader's data property.
| | 01:29 | So type xmlLoader.data.
| | 01:32 | Now, what we're going to do is make
sure that Flash treats this data as XML,
| | 01:37 | because the code as it is could cause errors.
| | 01:40 | Data loads in similar to a string.
| | 01:43 | So we want to make sure that
this data is not a string, but XML.
| | 01:47 | So to do that, I am going to type new,
space, XML before xmlLoader.data.
| | 01:52 | XML is going to be in all caps, then I'm
going to wrap xmlLoader.data inside of parentheses.
| | 01:58 | After that, we'll go to the next
line, and we'll trace(imagesXML).
| | 02:03 | And before we test the movie, we'll add one
more important line of code to load the file.
| | 02:07 | Make sure you do that below
where you add the EventListener.
| | 02:11 | So we'll go down right to the next line,
under adding the EventListener, and type
| | 02:14 | xmlLoader, capital L, dot load, and in
parentheses, we'll create a new URLRequest.
| | 02:22 | URL is in all caps, Request is with a
capital R, and in the parentheses after
| | 02:26 | URLRequest, we'll type a string.
| | 02:28 | So type quotes and then type
the path to the XML file, which
| | 02:33 | is assets/images.xml.
| | 02:37 | Test the movie, and you should see the
XML data inside of the Output window.
| | 02:46 | So to load an XML file, load the data
just like you would load a text file.
| | 02:51 | So use the URLLoader class.
| | 02:54 | Once the data is loaded, pass in the
data property of the URLLoader inside the
| | 03:00 | parentheses of a new XML object.
| | 03:03 | So make sure to tell Flash to
treat that text data as XML data.
| | 03:08 | So to load an XML file into Flash, use
the URLLoader class, just like when you
| | 03:13 | load a text file, and then set the
loader's data property as the value inside
| | 03:19 | of a new XML object.
| | 03:21 | That way Flash knows for sure that
that text data can be treated as XML data.
| | Collapse this transcript |
| Using dot syntax to access XML data| 00:00 | Once you've loaded XML data into Flash,
you can work with that data using dot syntax.
| | 00:06 | That's part of the benefit of XML
being native in ActionScript 3.0.
| | 00:10 | Here if I test the movie, you can see the XML
data in the Output window. Let's take a look.
| | 00:20 | So we have the images root element
and then inside of there are image child
| | 00:26 | elements, and each one of those
elements has an attribute called file that has
| | 00:31 | the file name of an image.
| | 00:33 | Now, let's say we want to
access the file name of each image.
| | 00:38 | Let's go back to our code
and see how to do that.
| | 00:43 | We'll just leave this code
in a trace statement for now.
| | 00:47 | We'll look at applying it
to an actual image later on.
| | 00:49 | So after imagesXML, you can
type a dot and then type image.
| | 00:55 | Now if you test the movie
right now, here is what you'll get.
| | 01:01 | Let's look in the Output window.
| | 01:05 | This actually gives us a list of
all the child elements named image.
| | 01:11 | So if we go back to our code,
imagesXML represents that outer XML element.
| | 01:19 | It has a child called image.
| | 01:21 | When we reference image, Flash
gives us a list of XML objects.
| | 01:28 | The datatype of this list is
called XMLList. It looks like this:
| | 01:33 | XML in all caps, and then List with
the capital L. If you want to know
| | 01:37 | everything you can do with an XMLList,
highlight it, and press F1 on your keyboard.
| | 01:42 | For now, we're going to look at something basic.
| | 01:46 | Let's say we wanted to only
access one object in a XMLList.
| | 01:50 | After image, we can use square brackets,
just like when you're working with an array.
| | 01:55 | Remember that when you're working with
an array, the first index is 0 and not 1.
| | 02:01 | So type in 0, test the movie,
and then we don't get anything.
| | 02:07 | Now, that actually is not a bad sign.
| | 02:11 | The reason for that is that the image
element doesn't have any child elements,
| | 02:16 | or child data at all.
| | 02:18 | So that's what we're actually
seeing here. When we reference that image,
| | 02:21 | we're seeing any children or any data
that's inside of that image element, and
| | 02:26 | right now there's not anything.
| | 02:28 | The data that we want to access is
inside of an attribute of that element.
| | 02:34 | So again, we're accessing the first
image element, and when we reference that
| | 02:38 | image by itself, we don't see anything just yet.
| | 02:41 | After the close square bracket,
type a dot and then type an at symbol,
| | 02:46 | this stands for attribute, and then type in
the attribute name that you want to access.
| | 02:52 | That's called file.
| | 02:55 | So inside of the image element, there
is an attribute called file, and this
| | 02:59 | is how you access it.
| | 03:01 | Test the movie, and there is
the data that we're looking for.
| | 03:06 | So to review, when you create a new XML
object with loaded data, that XML object
| | 03:12 | represents the root of the loaded data.
| | 03:16 | So in this case, it would be the images element.
| | 03:21 | When you access child elements that
have the same name, Flash gives you an
| | 03:26 | XMLList, which is different from an XML object.
| | 03:30 | You can access single elements in that
list by using square bracket notation and
| | 03:36 | an index number, just like when
you're working with an array.
| | 03:40 | Once you have access to an element, you
can access attributes of that element by
| | 03:44 | typing a dot and then by typing
at symbol and the attribute name.
| | 03:49 | So by using this line of code, we're
able to access specific names of files that
| | 03:55 | we want to work with.
| | 03:56 | So remember that E4X enables you to
work with XML data using dot syntax.
| | Collapse this transcript |
| Using XML data to populate a DataGrid component| 00:00 | Flash's built-in components give you
an excellent option for displaying data.
| | 00:04 | Since these components already have many
interactive and organizational features,
| | 00:09 | you can use them to quickly
prototype data-intensive applications.
| | 00:13 | On the stage, I have an
instance of a data grid component.
| | 00:16 | You can access the components through
the Components panel, which you can find
| | 00:20 | at Window > Components.
| | 00:22 | So you can just drag and
drop a data grid onto the stage.
| | 00:26 | So I close that menu and note that I've
named the component grid, all lowercase.
| | 00:32 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:37 | Now let's say I wanted to put
the image names inside of the grid.
| | 00:42 | One reason you may want to do this is
to create a menu so that you can click
| | 00:45 | images that you want to view.
| | 00:46 | So, to do that, I'm going to
use my XML data that I've loaded.
| | 00:50 | In the XML loaded function, I
have a trace statement that has
| | 00:53 | (imagesXML.image(0).@file).
| | 00:58 | I don't want to delete this line of code.
| | 01:00 | I just want to disable it for now.
| | 01:01 | So type two forward slashes at
the beginning of that line of code.
| | 01:05 | On the next line, we're going to
create a loop to loop through the data.
| | 01:10 | So create the skeleton of a for loop.
| | 01:13 | Here, just create a standard loop.
| | 01:16 | So var space i:unit =0;
| | 01:22 | i <, and then what we're going to do is
run it for each image inside of the XML file.
| | 01:28 | Now remember, if we type
imagesXML.image, we get an XML list. And I mention
| | 01:36 | that it's like an array.
| | 01:38 | Well, just like an array, I can get the
length of an XML list to find out how
| | 01:43 | many items are inside of it. So I type .length.
| | 01:46 | Now, the difference between an XML list
and an array is that length is actually
| | 01:51 | a method and not a property when
you're working with an XML list.
| | 01:54 | So you need to type some parentheses.
| | 01:55 | Just type a semicolon and a space and then i++.
| | 01:59 | So this will loop through each
image inside of the images XML file.
| | 02:06 | Now to populate any data-driven
component, including the data grid, you need to
| | 02:11 | create an instance of the data provider class.
| | 02:14 | So I'll do that right above the loop.
| | 02:15 | So create a variable called
componentProvider, capital P. Datatype it to a
| | 02:25 | DataProvider and then set it = a new
instance of the DataProvider class.
| | 02:30 | So after that, type some
parentheses and semicolon.
| | 02:34 | Then each time the loop runs I'm
going to add the XML data inside of the
| | 02:39 | componentProvider, and then after the loop,
we'll set the data inside of the data grid.
| | 02:44 | So in the loop, we'll type
componentProvider, with a capital P, .addItem, capital
| | 02:50 | I, and then we'll put in the
current XML object in the data grid.
| | 02:55 | Now the way that you do this is first
we'll close out the parentheses and then
| | 03:00 | inside of the parentheses,
type open and closed curly braces.
| | 03:04 | So this is a shorthand notation to
create an ActionScript-generic object.
| | 03:10 | So what we do here is we put a name
and a value pair separated by a colon.
| | 03:16 | So the name is going to be Images.
| | 03:20 | After that, type a colon, and
then we're going to give the value.
| | 03:24 | For the value, we want to put the file name.
| | 03:28 | Now, we've actually written
the code in that trace statement,
| | 03:30 | so if I highlight imagesXML.image(0).@
file inside of the trace statement, I can
| | 03:37 | copy that code paste it after the colon, and
| | 03:41 | then change the 0 to an i so it will
work for each image as the loop iterates.
| | 03:48 | Now the last thing to do, once the
dataProvider is all set up, is to connect it to
| | 03:53 | the component on the stage.
| | 03:54 | So under the loop, create a new line
of code, and type grid.dataProvider =
| | 04:04 | componentProvider, with a capital P.
So test the movie, and then you should see
| | 04:12 | all of the images inside of the data grid.
| | 04:15 | So I have a scrollbar, I can click and
select each of the images, and I can even
| | 04:19 | click images at the top to organize the data.
| | 04:23 | Now, the way that the data grid works
is the name Images came from the value
| | 04:29 | that we put right here.
| | 04:31 | So if you wanted to create additional
categories, we could type a comma after
| | 04:36 | file, and then we can create another category here.
| | 04:39 | I'm not going to do that now, but
using that technique, you can simply follow
| | 04:43 | that colon separation for name
value pairs, and add more information.
| | 04:47 | It's also important to note that this
name Images here can only have one word,
| | 04:53 | and no spaces or special characters.
| | 04:55 | So just keep that in mind when
you're working with the component.
| | 04:58 | The same dataProvider technique follows for
any of the ActionScript data-driven components.
| | 05:05 | So if I wanted to, I can use the
same code to apply to, say, a list.
| | 05:09 | Let's see how that works.
| | 05:11 | We'll open the Components panel.
Make sure it's on the component layer.
| | 05:20 | Scale that up just a little bit,
| | 05:22 | so it's about the same size as the data grid.
| | 05:24 | I'll give it an instance name of list.
| | 05:27 | I'll go back to my code, copy of the
grid.dataProvider line of code, paste it on
| | 05:33 | the next line, change grid
to list, and test the movie.
| | 05:38 | Notice that it doesn't work, but it
does have the right amount of fields.
| | 05:43 | Now the list is a little bit
pickier than the data grid is.
| | 05:46 | With the data grid, I can select any
name I want for the header of the images.
| | 05:52 | So I can call it Images here.
| | 05:54 | With the list, I need to use a specific
term, which is label, and that's how it
| | 05:59 | label an item in a list.
| | 06:01 | This label pattern is what most of the
data-driven components are looking for.
| | 06:05 | So you set the label in the
dataProvider and you test the movie, and then it
| | 06:09 | should work properly.
| | 06:10 | So now you see that the list is
populated, and the data grid is also populated,
| | 06:14 | but that title field is now label.
| | 06:16 | Of course, I can click the label field
in the data grid to organize the data.
| | 06:21 | As I click the list and the
data grid get updated at the same time.
| | 06:26 | That's because as I click that, the
dataProvider is being manipulated, and since
| | 06:31 | these are both linked to the same
dataProvider, the data for both is updated.
| | 06:36 | So the data component allows you to display
data and organize it in a variety of ways.
| | 06:42 | To use the data grid, you need to
create an instance of the DataProvider class
| | 06:46 | and use its addItem method to put the
right objects inside of the DataProvider.
| | 06:52 | Then you need to connect that object
to the data grid using the data grid's
| | 06:56 | dataProvider property.
| | 06:57 | If you want to use the same technique
with other components, make sure that you
| | 07:01 | use the label property when you call addItem.
| | Collapse this transcript |
| Using XML data to load image files| 00:00 | XML data can be used to power
nearly every type of application.
| | 00:05 | Here is an example where XML can
power a slideshow viewing application.
| | 00:09 | On the stage, I have several
instances of the UILoader component.
| | 00:15 | The main image loader is
called mainLoader, with a capital L.
| | 00:18 | Then I have the thumbnail images: thumb0 - all
lowercase, thumb1, thumb2, thumb3, et cetera.
| | 00:28 | Now, if you're creating your own files,
make sure that you start with the 0 and not 1.
| | 00:33 | We're going to have these numbers
correspond to indices of our XML list.
| | 00:39 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:43 | I've actually already written the
code for loading the thumbnails.
| | 00:47 | Let's take a look at how it works.
| | 00:49 | Outside of the loop, I created a
variable called thumbLoader, and inside of the
| | 00:53 | loop, I set thumbLoader = a typecasted
UILoader. And then inside of there, I'm
| | 01:00 | grabbing the thumbnail, and there
is going to be one thumbnail for each
| | 01:05 | iteration of the loop.
| | 01:06 | So it's thumb + i. So it's
starts at thumb0, and then thumb1, et cetera.
| | 01:13 | That thumbnail is going to load
the appropriate thumbnail image.
| | 01:18 | So we have images.XML.image(i).@file.
| | 01:23 | So it's loading that file.
| | 01:25 | Then I set its buttonmode property to
true, and I added an EventListener to each
| | 01:30 | thumbnail loader so that it runs
a function when you click on it.
| | 01:33 | So let's take a look inside
the thumbClicked function.
| | 01:36 | The code that we're going to write
is going to apply to the main image.
| | 01:39 | In order to get the image to load, I
need to find out the number at the end of
| | 01:44 | the thumb that was clicked.
| | 01:45 | We can start by accessing the thumb's name.
| | 01:48 | So create a variable called thumbName
with a capital N. Datatype it to a
| | 01:52 | string and the value will be evt, which
is the event object .currentTarget, which
| | 01:59 | will refer to the object that was clicked,
| | 02:01 | so thumb0, thumb1, thumb2, et cetera
.name, which will give us the name of
| | 02:06 | the object as a string.
| | 02:08 | Now we need to extract the last number of
the thumbnailed name and treat it as a number.
| | 02:15 | So create a new variable on the next
line called thumbIndex, capital I. Datatype
| | 02:23 | this to unit a positive integer.
| | 02:26 | We'll set it = thumbName.substr,
in the parentheses pass in 5.
| | 02:37 | Now, I got 5 because each
thumbnail's name has six letters;
| | 02:41 | thumb has five letters and
then the additional number makes six.
| | 02:48 | We're going to referencing a position
of a character in a string, the first
| | 02:51 | one starts at zero.
| | 02:52 | So then the number would be index 5,
because the last letter of thumb would be index 4.
| | 02:59 | So 0, 1, 2, 3, 4, and then 5 for the number.
| | 03:07 | Now in order to tell Flash that this is
a number, I'm going to write uint before
| | 03:11 | thumbName and then wrap
thumbName.substr in some parentheses.
| | 03:17 | So Flash will treat that as a number.
| | 03:19 | Then we'll create one more variable
that will represent the full path to the
| | 03:25 | image we want to load.
| | 03:26 | So we'll call this fullPath, with a
capital P, datatype it to a string, and
| | 03:33 | we'll set the value.
| | 03:34 | We'll start off with assets and a forward slash.
| | 03:38 | So type some quotes to create a string
and then type assets and a forward slash.
| | 03:44 | After the quotes, type a Plus sign.
| | 03:46 | Then we're going to get
the data from our XML object.
| | 03:50 | To get that data, I'm going to copy
code that already exists in this frame.
| | 03:55 | In line 20 on my code,
I'm loading the thumbnail images.
| | 03:59 | In that code, I'm going to select the
portion of code that starts with images.XML
| | 04:06 | and ends with attribute file.
| | 04:08 | So the code will be referencing the XML.
| | 04:11 | Copy the code with Command+C or Ctrl+C,
and then paste the code after the Plus
| | 04:15 | sign in the thumbClicked function, in
the line of code with a semicolon and
| | 04:20 | replace i in the pasted code with thumbIndex.
| | 04:25 | Before we go any further, let's review
what these three lines of code are doing.
| | 04:29 | thumbName is a string, and it's
holding the name of the thumbnail that was
| | 04:34 | clicked. thumbIndex is a positive integer.
| | 04:38 | It's holding the last character of the
thumbName string. fullPath is the path to
| | 04:45 | the full-size image.
| | 04:46 | We're getting the correct full-size
image through the XML data, by passing in the
| | 04:52 | thumbIndex as the index
number of the image XML list.
| | 04:58 | Now let's add one more
line of code to this function.
| | 05:00 | We're going to have the
mainLoader load the image file.
| | 05:05 | So type mainLoader.load and then in
parentheses, create a new URLRequest. Inside the
| | 05:14 | parentheses for URLRequest,
type fullPath, with a capital P.
| | 05:19 | Test the movie, and you shouldn't get
any errors, and you should be able to
| | 05:23 | click the different thumbnails to
load the different images into Flash.
| | 05:27 | So the slideshow is complete, and
all of the data is powered by XML.
| | 05:32 | So if you ever wanted to change the
files that are loading into the app, you can
| | 05:36 | make the change without
having to republish your SWF file.
| | Collapse this transcript |
|
|
11. Creating an Audio PlayerLoading audio from the Library| 00:00 | If you want to have audio in your
applications and not have to worry about
| | 00:04 | whether they will be loaded when you
need them, then loading audio from the
| | 00:08 | library is an excellent option.
| | 00:11 | When you load audio from the library,
it gets embedded inside of your SWF
| | 00:14 | file, so you guaranteed that it's there when
your ActionScript code is ready to be accessed.
| | 00:20 | In order to use a file from the library,
go to the library and right-click the
| | 00:24 | audio file you want to use;
| | 00:26 | mine is called BGLoop.mp3.
| | 00:29 | Then click Properties.
| | 00:31 | After that, check the box to export
for ActionScript, and just take .mp3 off the
| | 00:36 | end of your file name.
| | 00:38 | So I have BGLoop, with B,G, and L capitalized.
| | 00:43 | If you're using a different file,
note the name of the class here.
| | 00:47 | Make sure you don't use spaces or
special characters, and that the class name
| | 00:51 | starts with a letter.
| | 00:52 | So click OK, and you'll see
BGLoop under Linkage in the library.
| | 00:57 | Go to the first keyframe of the
actions layer and open up the Actions panel.
| | 01:02 | Create a variable called song. Datatype
it to whatever you class you set in library,
| | 01:08 | so I'm going to type BGLoop, with a capital L, and
then create a new instance of that class.
| | 01:13 | So new BGLoop, capital B, capital G,
capital L. After that, all you have to do is
| | 01:21 | use the play method. So song.play();.
| | 01:26 | I'll test the movie.
| | 01:29 | (Music playing.)
| | 01:31 | So you can hear the background music playing.
| | 01:34 | So after you've exported your song for
ActionScript, create a new instance of
| | 01:38 | that class, and then use the
play method to play the song.
| | Collapse this transcript |
| Loading audio from external files| 00:00 | If you want to keep your SWF file size
low, and are loading multiple songs, it
| | 00:05 | is best to store that audio in external files.
| | 00:08 | Before we look at loading audio,
let's look at the assets onstage.
| | 00:11 | I have a button called play_btn.
| | 00:16 | There is a button underneath it called pause_
btn, all lowercase, just like the Play button.
| | 00:22 | There is a movie clip called slider
that's going to show the playback progress.
| | 00:28 | Behind that is a movie clip called bar.
| | 00:32 | If I hide my mask and lock it, and
hide the slider layer as well, you can
| | 00:39 | see this blue block
| | 00:41 | that has an instance name of load_
progress, and it's going to display the
| | 00:45 | progress of the loading file.
| | 00:48 | Then I have mute_btn.
| | 00:50 | So, all of my instances are on the
main Timeline for this application.
| | 00:54 | So, let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:59 | The first thing we're going to do is
reference the audio file that we want to load.
| | 01:03 | We'll hold that inside
of a URL request variable.
| | 01:06 | So create a variable called audioFile,
and we'll datatype it to a URLRequest.
| | 01:13 | Set that equal to a new instance of
the URLRequest class, and inside of the
| | 01:18 | parentheses for the URLRequest
constructor, type some quotes, and then type the
| | 01:23 | path to the file you want to load.
| | 01:25 | The file I want to load is in assets/bg.mp3.
| | 01:32 | I mentioned earlier that this is a
constructor, this new URL request line of code.
| | 01:37 | If you remember when you created your
custom class, you had a function, or method,
| | 01:41 | in there that was the same name as your class.
| | 01:45 | That's the constructor.
| | 01:46 | And that's exactly what we're
doing here when we use the New command.
| | 01:49 | We're running the constructor
method of the URLRequest class.
| | 01:52 | In other words, we're initializing it.
| | 01:54 | Go to the next line and create a variable
called song, and this will be a sound datatype.
| | 02:01 | Create a new instance of
the sound class after that.
| | 02:04 | So new Sound();. Go down a few lines, and
we'll add an EventListener to the song.
| | 02:10 | So type song.addEventListener, and this is
going to trigger when the file is done loading.
| | 02:16 | So we're going to type Event.COMPLETE.
Make sure Event has a capital E and
| | 02:20 | Complete is in all caps.
| | 02:21 | After that, type a comma and a space,
and type songLoaded, with a capital L.
| | 02:26 | On the next line of code, we'll type song.load,
and in parentheses, we'll pass in audioFile.
| | 02:33 | In the past when we used the load
method, we created the URL request inside
| | 02:38 | of the parentheses.
| | 02:39 | For this example, I held it
in a variable outside of that.
| | 02:42 | That way, if you ever want to
reference it later, you have easy access, and
| | 02:46 | you don't have to retype the code.
| | 02:48 | Also, note that you always add the
EventListener before you load the file.
| | 02:53 | So, let's go down a little bit
and define the songLoaded function.
| | 02:56 | So type function songLoaded, with a
capital L, evt:Event, for the datatype,
| | 03:06 | colon, void for no return data, and
then inside of the curly braces, we're
| | 03:10 | going to play the song.
| | 03:12 | So just type song.play, some
parentheses and a semicolon, and that's it.
| | 03:18 | So you should be able to test the movie,
and hear the song playing. (Music playing.)
| | 03:20 | (Music playing.)
| | 03:25 | So to load an external sound file,
create a new instance of the sound class and
| | 03:30 | run that class's load method,
passing in the file you want to load.
| | 03:34 | Remember to add the EventListener
before loading the file and then use the
| | 03:38 | play method once the file
is loaded to play the sound.
| | Collapse this transcript |
| Playing, pausing, and stopping sounds| 00:00 | The sound class lets you load and
play audio files, but if you need more
| | 00:04 | control over playback, including
pausing and stopping sounds, you'll need to
| | 00:09 | work with other classes.
| | 00:11 | So right below the new Sound line of
code, which is line 6 in my code, I'm going to
| | 00:16 | go to the next line, create a new
variable called songController, with a capital C.
| | 00:22 | And this object will give us more
control over working with the sound.
| | 00:26 | Datatype it to SoundChannel, capital S,
Capital C. Don't give it a value yet;
| | 00:32 | just type a semicolon.
| | 00:33 | The next thing we're going to do is add
event listeners to the Play and Pause buttons.
| | 00:38 | We'll start with the Play button.
| | 00:39 | Scroll down to songLoaded, and delete
the line of code that says song.play.
| | 00:44 | We'll make the sound play later
on when you click the Play button.
| | 00:47 | So type play_btn.addEventListener,
capital E, capital L, and in parentheses, type
| | 00:55 | MouseEvent, capital M and a capital E,
.CLICK in all caps, comma and space, and
| | 01:00 | then type clickedPlay, with a capital P.
| | 01:04 | Now we'll just copy and paste this
line of code for the Pause button.
| | 01:08 | So select it. Command+C or Ctrl+C to
copy. Go to the next line. Command+V
| | 01:13 | or Ctrl+V to paste.
| | 01:14 | Change play_btn to pause_btn in the pasted code.
| | 01:20 | Then change clickedPlay to
clickedPause, with a capital P. Now we'll define the
| | 01:25 | clickedPlay function.
| | 01:26 | So go down a few lines, below the
songLoaded function, and create the clickedPlay
| | 01:31 | function. Make sure to type a capital P.
In parentheses, type evt:MouseEvent, with
| | 01:37 | a capital M and a capital E, :void for
no return data, and then inside of the
| | 01:42 | function, we're going to play the song,
| | 01:44 | except instead of typing song.play, we're
going to type songController = song.play().
| | 01:53 | So, we're setting the controller
object equal to the playing sound.
| | 02:00 | That way, we get more control
over working with the sound,
| | 02:03 | because the SoundChannel class is
basically a controller for sound, and the
| | 02:07 | Sound class simply loads and plays sound.
| | 02:11 | Before we add more code into the play
function, let's just click and drag to
| | 02:15 | select this function, and copy
and paste it a few lines below.
| | 02:19 | In the pasted code, change clickedPlay
to clickedPause, and then delete the line
| | 02:24 | of code that says songController = song.play();.
| | 02:27 | Instead, type songController.
stop, and some parentheses.
| | 02:34 | So, stopping a sound is
something you can't do without using the
| | 02:37 | SoundChannel class.
| | 02:39 | So let's test the movie, and we can
click to play the song.
| | 02:42 | (Music playing.)
| | 02:48 | You'll notice that if you keep
clicking, the sound will start all over
| | 02:51 | again from the beginning.
| | 02:52 | Now, we don't want that to happen,
| | 02:54 | so we'll disable the Play button and only
show the Pause button after you click it.
| | 02:58 | That way before you can play the
song, you have to stop it first.
| | 03:02 | So in clickedPlay, right above
songController = song.play, type the following code:
| | 03:09 | play_btn.visible = false, and on the
next line type pause_btn.visible = true.
| | 03:19 | Select these two lines of code, copy
them with Command+C or Ctrl+C, and paste
| | 03:24 | them at the top of the clickedPause
function, above songController.stop.
| | 03:29 | In the pasted code, switch false and true,
so change false to true and true to false.
| | 03:37 | So that way, when you click the play
button, the Play button will hide and the
| | 03:40 | Pause button will show, and then when
you click the pause button, the Play
| | 03:44 | button will show and
the Pause button will hide.
| | 03:47 | Also, by using the visible command, the
functionality will be disabled, so you
| | 03:51 | can't play the song multiple times.
| | 03:53 | Test the movie and click to play
and stop the song.
| | 03:57 | (Music playing.)
| | 04:02 | Notice that after you click Pause,
and you click Play again, the song
| | 04:06 | starts from the beginning.
| | 04:07 | So what if you wanted to
just pause instead of stop?
| | 04:10 | Let's take a look at how to do that.
| | 04:12 | Scroll up to the top of the code, right
below var songController:SoundChannel,
| | 04:18 | which is on line 9 in my code. Create a
new variable called resumeTime, capital
| | 04:22 | T. Datatype it to a number,
and set its value at zero.
| | 04:27 | This is going to represent
when the sound should resume.
| | 04:30 | Scroll down and then go to the
clickedPause function, right above
| | 04:34 | songcontroller.stop. Create a new
line of code and type resumeTime =
| | 04:41 | songController.position.
| | 04:46 | That represents the position
of the sound when you pause it.
| | 04:49 | So we'll save in that resumeTime variable,
and then apply it when we play the song.
| | 04:55 | So go to the clickedPlay function and
click inside of the parentheses after
| | 04:59 | song.play, and just type resumeTime.
| | 05:01 | So the song will start from the
resumeTime, which at the beginning is going to
| | 05:07 | be zero, or at the beginning of the song.
| | 05:09 | So when you click the Pause button,
the resume time is captured, and when you
| | 05:15 | click Play again, it's applied, so
the sound continues from that point.
| | 05:19 | So test the movie, click Play and
Pause and Play again.
| | 05:23 | (Music playing.)
| | 05:28 | So you can see that the
pause functionality works.
| | 05:31 | So using the SoundChannel class, you
have more control over your audio by being
| | 05:35 | able to add, stop, and pause functionality.
| | Collapse this transcript |
| Muting all audio with the SoundMixer.stopAll method| 00:00 | Have you ever been surfing the web and
been surprised by an unexpectedly loud site?
| | 00:05 | This surprise can quickly turn into anger if
you can't find a way to control the volume.
| | 00:09 | When you have audio on the web,
providing a Mute button is always a plus.
| | 00:14 | In your code, scroll down
to the songLoaded function.
| | 00:17 | In there, copy and paste one of
addEventListener lines of code.
| | 00:21 | So you should have three lines of code in there.
| | 00:24 | Change pause button or play button,
which ever one you chose, to mute_btn.
| | 00:31 | Change the name of the function,
clickedPause or clickedPlay, to clickedMute.
| | 00:38 | Scroll down in your code and
create the clickedMute function.
| | 00:42 | I'll do this at the very bottom of my code.
| | 00:45 | So function clickedMute, capital M, and
parentheses evt:MouseEvent, capital M,
| | 00:52 | capital E, close out the parentheses
:void, make some curly braces, and inside
| | 00:58 | of there, you can mute audio by typing
soundMixer, capital M, .stopAll, capital A,
| | 01:08 | curly braces, and some
parentheses, and a semicolon.
| | 01:12 | So test the movie, and when you play this sound,
you can click the mute button to mute the audio.
| | 01:17 | (Music playing.)
| | 01:22 | So with the soundMixer.stopAll, you
can stop all ActionScript sounds.
| | Collapse this transcript |
| Tracking load progress| 00:00 | Just like any other file loaded into
the Flash player, you can track the load
| | 00:04 | progress of an audio file.
| | 00:06 | On the Stage, I am going to track the
load progress and display it by using this
| | 00:11 | movie clip Load_Progress.
| | 00:13 | There is one thing you
should know about this movie clip:
| | 00:15 | its full size is the whole
width of that background bar.
| | 00:20 | So if you look in the Transform panel, I
have 3.2% for the Scale Width, and if I
| | 00:26 | change that to 100%, you
will see it's much wider.
| | 00:32 | So I am going to undo that change, and
what we are going to do is set its scale
| | 00:36 | X property to scale to
the full width of this bar.
| | 00:40 | So let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:44 | Scroll all the way up to the
top of your code, and right below
| | 00:48 | song.addEventListener Event.COMPLETE,
create a new line of code and type
| | 00:53 | song.addEventListener and
type ProgressEvent.PROGRESS.
| | 00:58 | This refers to the progress of the
file loading, not the progress of the file
| | 01:03 | playing. And then type a comma and
space, and trackLoad, with a capital L.
| | 01:10 | Scroll down, all the way to the bottom
of your code, and create that function.
| | 01:15 | So function trackLoad.
| | 01:19 | In parentheses, type evt:ProgressEvent
with a capital P and a capital E. After the
| | 01:25 | parentheses, colon void, all
lowercase, some curly braces.
| | 01:30 | Now here, we are going to scale the movie clip.
| | 01:34 | So type load_progress -
| | 01:36 | that's that Load_Progress movie clip -
dot scaleX with a capital X. We'll set
| | 01:41 | that equal to the percent loaded.
| | 01:44 | Remember that we can get the percent
loaded by dividing the total bytes loaded
| | 01:49 | by the total amount of bytes.
| | 01:51 | So type evt.bytesLoaded /
evt.bytesTotal, with a capital T.
| | 01:59 | Close it out with a
semicolon and test the movie.
| | 02:02 | You will see that bar animate
to the right across the stage.
| | 02:07 | Now, this is a pretty small file, but
you can test the movie again, and you can
| | 02:13 | see it loading from the left to the right.
| | 02:15 | If you want to confirm that it's
working properly, because you can't see it, you
| | 02:19 | can always trace the
value of load_progress.scaleX.
| | 02:24 | The Output window will show you that
it's scaling bit by bit as the file loads.
| | 02:28 | So to track load progress, add a
listener for ProgressEvent.PROGRESS to your
| | 02:33 | sound object, and then you can
display visual feedback in the EventHandler.
| | Collapse this transcript |
| Displaying sound position| 00:00 | Most audio players you see provide some
feedback about the playback progress of a song.
| | 00:05 | Let's take a look at how to add
that functionality to our app.
| | 00:09 | Scroll down to the clickedPlay function.
| | 00:12 | At the bottom of that function, type
addEventListener, with a capital E,
| | 00:16 | capital L, and in the parentheses
listen for Event.ENTER_FRAME, in all caps.
| | 00:23 | After that, type a comma and a space,
and then we will run a function called
| | 00:27 | trackPlayback, capital P.
| | 00:29 | Remember that when you listen for the
ENTER_FRAME event, Flash runs that code
| | 00:33 | multiple times per second.
| | 00:35 | So if possible, you want to disable that
code when you are not going to need it.
| | 00:39 | So let's copy this line of code, select it,
| | 00:42 | Command+C or Ctrl+C to copy, and then
at the bottom of clickedPause, we will
| | 00:47 | paste that code and change add to remove.
| | 00:50 | That way when the sound is not playing,
| | 00:52 | we won't be listening for the ENTER_FRAME event.
| | 00:54 | So now we will define
the trackPlayback function.
| | 00:58 | Scroll to the bottom of your code
and create the trackPlayback function.
| | 01:01 | Make sure the playback has a capital P.
You will receive an event object with
| | 01:06 | the datatype of Event, with a capital E,
colon void for no return data.
| | 01:12 | Then in the curly braces, we will write
the code to display playback progress.
| | 01:17 | The first task is to get the
percentage that has been played.
| | 01:20 | So create a variable called perPlayed,
with a capital P, datatype it to a number,
| | 01:25 | and set it equal to the current
position of the song divided by the total
| | 01:30 | duration of the song.
| | 01:31 | So to get the position, you go
through the SoundChannel class, and our
| | 01:35 | SoundChannel instance is called
songController, capital C. After that, type a
| | 01:40 | dot, and then type position.
| | 01:42 | So we will divide that by song.length.
| | 01:46 | So you get the length of the song
through the sound class, and our instance of
| | 01:51 | the Sound class is named song, and you
get the position of the song through the
| | 01:55 | SoundChannel class, and our
instance is called songController.
| | 01:59 | So that will give us the
percentage that has been played.
| | 02:01 | Now, we are going to position the
slider based on that percentage.
| | 02:04 | Let's type slider.x, space, equals, space.
| | 02:08 | Now, we know we are going to
multiply the percent played by something.
| | 02:12 | So just type perPlayed, with a
capital P, space, asterisk, and a space.
| | 02:16 | Now, the way we want to multiply it is
so that when perPlayed is equal to 0,
| | 02:21 | then the slider is all the way at the
left edge of the bar, and that when it's
| | 02:24 | equal to 1, which is when the whole
song has been played, the slider goes all
| | 02:29 | the way to the right edge of the bar.
| | 02:31 | So here, I'll write some parentheses,
and then type bar.width - slider.width.
| | 02:38 | Remember, we always subtract the
width of the object for this reason.
| | 02:42 | I close the Actions panel and reveal the slider.
| | 02:45 | If I had it equal to bar.width, then the
maximum position would be right here at
| | 02:50 | the edge of the bar. But since I
am setting it equal to bar.width -
| | 02:54 | slider.width, the right edge of the
slider will be aligned with the right edge
| | 02:58 | of the bar at the end.
| | 03:02 | Now, we need to take this whole value
right here that we are going to have,
| | 03:06 | and we need to offset, that because if
we don't, the playback progress will
| | 03:10 | look a little bit weird.
| | 03:12 | Just to see an example, type a semicolon
at the end of this line and test the movie.
| | 03:17 | Click the Play button,
and then watch the slider,.
| | 03:19 | (Music playing.)
| | 03:24 | Notice that it starts at the
left edge of the stage;
| | 03:27 | watch where it ends.
| | 03:28 | (Music playing.)
| | 03:37 | There is a little empty space after the end
of the song, which is why it's still moving.
| | 03:42 | So we have a little bit of space.
| | 03:45 | It looks like this has
shifted to the left a little bit.
| | 03:47 | Let's take a look at why that's happening.
| | 03:50 | The reason why is because we are just
multiplying percentage played by the width of the bar.
| | 03:56 | We are not offsetting the
position by the X position of the bar.
| | 04:00 | So if we offset the position by adding
a value at the very end, so we'll add on
| | 04:04 | bar.x, then we'll shift that whole
movement to the right and the amount of the X
| | 04:09 | position of the bar, so that when
percentage played is 0, and 0 times whatever
| | 04:15 | this value is is going to be 0, then the
0 position of the slider is going to be
| | 04:20 | aligned with the left side of the bar.
| | 04:22 | Let's test the movie, preview the animation.
| | 04:25 | Click the Play button, and watch the slider.
| | 04:27 | (Music playing.)
| | 04:40 | So the slider goes all the
way to the end and then stops.
| | 04:46 | So to provide playback progress, you'll
have to write the custom code yourself
| | 04:51 | by adding an ENTER_FRAME EventListener.
| | 04:56 | Inside the ENTER_FRAME event, you can
get the percentage played through the
| | 05:00 | SoundChannel's position property
and the SoundClass's length property.
| | Collapse this transcript |
| Adjusting volume| 00:00 | We've already looked at
muting an audio file using the
| | 00:04 | soundMixer.stopAll method,
| | 00:06 | but let's say you want better
control over the volume of your file.
| | 00:11 | To do that, we can use the sound
transform class to manipulate volume precisely.
| | 00:17 | Right before the soundMixer.stopAll
method, type two forward slashes.
| | 00:22 | This is inside of a clickedMute function,
by the way, which is on line 41 in my code.
| | 00:27 | Go down to the next line and then
create a variable called volControl, with a
| | 00:31 | capital C. Datatype it to
a SoundTransform object.
| | 00:36 | We'll set it equal to
songController.soundTransform.
| | 00:41 | So we're taking that sound transform property in
song controller and storing it in a variable.
| | 00:47 | Let's go down a few lines, and then we
will adjust the volume control object.
| | 00:52 | So we will type volControl.volume = 0.1.
| | 00:59 | So instead of muting it completely,
we are going to get it really quiet.
| | 01:02 | Then to apply that volume
transformation, go down a few more lines and then type
| | 01:08 | songController.soundTransform = volControlled;
| | 01:17 | to end the statement.
| | 01:18 | So once you manipulate the volume of a
sound transform object, you need to reapply
| | 01:23 | that to the sound transform
property of your sound channel object.
| | 01:27 | So let's test the movie and then
click Play and click the Mute button to
| | 01:31 | hear the sound muffled.
| | 01:32 | (Music playing.)
| | 01:38 | It looks like it's working.
| | 01:40 | So let's say we wanted to make
that more of a sound toggle button.
| | 01:45 | So instead of just muting the sound,
we want to toggle the sound on and off.
| | 01:49 | So right above volControl.
volume = 0.1, create an if statement.
| | 01:54 | Grab volControlled.volume in some curly
braces, like so, and in the if statement,
| | 02:04 | type volControl.volume == 1.
So, two equal signs and then 1.
| | 02:11 | So if the volume is at 1, and by
the way volume goes between 0 and 1,
| | 02:17 | anything below 0 or above 1 will be distorted.
| | 02:20 | So if that's the case, then we're going
to change volumeControl.volume to 0.1.
| | 02:26 | We will create an else
statement and set volControl.volume = 1.
| | 02:33 | So we'll toggle back and forth
between muffled at 0.1 and full volume at 1.
| | 02:38 | So let's test the movie. Preview the animation.
| | 02:41 | (Music playing.)
| | 02:49 | So now you can click Mute button and
toggle the volume to be full volume or muffled.
| | 02:55 | Now of course, if you wanted to mute
this all the way, you can set volume at 0.
| | 02:59 | So I'll test the movie one more
time, and you can see this in action.
| | 03:02 | (Music playing.)
| | 03:08 | So that completes our video player.
| | 03:09 | By using the SoundTransform class, you
can manipulate the volume of objects.
| | 03:14 | Just make sure that after you
manipulate the volume, you reset the
| | 03:19 | SoundTransform property
of the SoundChannel object.
| | Collapse this transcript |
|
|
12. Working with VideoTouring the FLA file| 00:00 | There are multiple ways to play
back video in the Flash Player.
| | 00:04 | You can use an entire ActionScript
interface, called NetStream and NetConnection,
| | 00:09 | or you can use the FLVPlayback
component and have a visual interface.
| | 00:14 | For this application we are going
to go with the FLVPlayback component.
| | 00:17 | Don't think you're missing out though, by
not doing ActionScript version, because
| | 00:21 | the FLVPlayback component opens up a
whole new world of interactivity when you
| | 00:25 | start using ActionScript to control it.
| | 00:27 | Before we start building the app,
let's take a look at this FLA file.
| | 00:31 | I've already added some code to
it and set up a pretty complex
| | 00:35 | organizational structure.
| | 00:36 | So we'll go through each piece.
| | 00:38 | On the Stage, in the main Timeline, I
have an instance of the FLVPlayback
| | 00:43 | component called flv_mc.
| | 00:47 | I'm linking to a source movie that's in the
assets folder, and the file is called bear.f4v.
| | 00:54 | I don't have a skin for the component.
| | 00:56 | Also, note that I added four cue points.
| | 00:58 | Each of the cue points has a parameter.
| | 01:03 | I named the parameter 'caption' in each case.
| | 01:07 | And there in the Value section, I set some text.
| | 01:11 | The text describes what's going on in the movie.
| | 01:14 | So you can click through the different
cue points and see that I have a caption
| | 01:17 | parameter and then a
different value in each one.
| | 01:21 | The names of the cue points are CuePoint1,
CuePoint2, CuePoint3, and CuePoint 4,
| | 01:25 | so I kept those generic.
| | 01:27 | In front of the video, I have a
movie clip called captions_mc.
| | 01:32 | This will display the
caption text for the cue points.
| | 01:35 | If I double-click the movie clip, I can
enter its timeline, and you'll see that
| | 01:39 | I have a text field called caption_txt.
| | 01:43 | I use a dynamic text field, embedded
the font, and have a drop shadow on it.
| | 01:47 | Let's go back to the main Timeline
and look at some of the other elements.
| | 01:52 | This movie clip is called playPause_mc.
| | 01:55 | It's an instance of a
movie clip called PlayButton.
| | 01:58 | If I double-click it, you can see its
timeline, where there's a movie clip named
| | 02:02 | pause_mc and another movie clip named play_mc.
| | 02:07 | Back to the main Timeline.
Then I have the progress bar.
| | 02:10 | I call this progbar_mc.
| | 02:15 | Inside of that movie clip, I have a
background bar that I called bg_mc, and then
| | 02:21 | the little slider is called controller_mc.
| | 02:25 | The volume button is called volume_mc.
| | 02:29 | Double-click it to enter its
timeline to see that there's another movie
| | 02:33 | clip that's hidden.
| | 02:34 | That movie clip is called bar_mc.
| | 02:36 | If I scroll up the alpha, you
can see it has a slider on it.
| | 02:40 | I will leave the alpha, just so we
can take a tour of his movie clip.
| | 02:43 | But the way this is going to work is
that when you roll over the Volume icon,
| | 02:48 | this bar_mc movie clip will show and
when you roll out, it will hide again.
| | 02:53 | So let's double-click bar_
mc to enter its timeline.
| | 02:56 | So I have a bar in the background and
then an element that I call drag at the top.
| | 03:01 | I've already added drag
interactivity for the slider.
| | 03:04 | You can see the code in the
first keyframe of the actions layer.
| | 03:07 | If you don't have access to the exercise
files, make sure to copy this code down.
| | 03:11 | I have a variable called scrollPercent, and
then I have the standard drag and drop code.
| | 03:16 | Add an EventListener to start
dragging, and I start drag with a
| | 03:19 | constrain rectangle.
| | 03:21 | We talked about this earlier in this
course, when we built the scrollbar for the
| | 03:25 | text field. Add an EventListener to the
stage to listen for MouseEvent.MOUSE_UP.
| | 03:30 | Then while dragging, I added an
EventListener to listen for the ENTER_FRAME
| | 03:33 | event, and I removed it
when we stopped dragging.
| | 03:36 | In the ENTER_FRAME event, and I set the
scrollPercent to the percentage that was scrolled.
| | 03:41 | Since this code here gives a value of
zero at the top when you're scrolling and
| | 03:46 | one at the bottom, I inverted the value,
because we are going to do the opposite
| | 03:51 | of the scrollbar when we do the volume slider.
| | 03:54 | The full value needs to be at the top, and
the minimum value needs to be at the bottom.
| | 03:58 | So to offset that,
I subtracted scroll percent from 1.
| | 04:02 | So close this window and
return to main Timeline.
| | 04:05 | There is a movie clip called info_mc.
| | 04:07 | That's just a simple graphic.
| | 04:11 | Finally, we have some code on the main Timeline.
| | 04:14 | Select the first keyframe of the
actions layer and open up the Actions panel.
| | 04:18 | In here I'm adding EventListeners to
volume_mc for MOUSE_OVER and MOUSE_OUT and
| | 04:24 | then info_mc for mouse CLICK.
| | 04:27 | I set buttonmode to true for info_mc and
volume_mc, so that you can see hand cursor.
| | 04:32 | I've defined those functions here.
| | 04:35 | So I have toggleCaptions.
| | 04:37 | This is going to happen when you click
on the caption button, that little i, and
| | 04:39 | what it's going to do is toggle the visibility.
| | 04:42 | I set the visible property
= to !captions_mc.visible.
| | 04:48 | Exclamation point means 'not' in ActionScript,
| | 04:51 | so what it does is it sets the visible
property to the opposite of what it currently is.
| | 04:57 | So if it's visible, then it will set
it to be not visible, and vice versa.
| | 05:02 | The volumeOver and volumeOut
functions are pretty straightforward.
| | 05:06 | When you roll over the volume movie
clip, the bar will show, and when you roll
| | 05:11 | out, the bar will hide.
| | 05:13 | Note that I'm using alpha instead of visible.
| | 05:16 | That's because I don't want to
disable the interactivity of the Volume bar.
| | 05:20 | Before we test the movie to preview what
we have to start with, I will close the
| | 05:24 | Actions panel, and then go back into the
volume movie clip, select the volume
| | 05:29 | slider, and turns its alpha back to 0.
| | 05:31 | Now let's test the movie, preview what we have.
| | 05:36 | I can click the Captions button to
show and hide captions movie clip up here.
| | 05:40 | I can roll over and roll out to
show and hide the volume movie clip.
| | 05:45 | When I roll over I can click and drag the slider.
| | 05:49 | So once your FLA is set up just like mine is,
| | 05:51 | if you feel comfortable to
structure the file, you are ready to start
| | 05:55 | programming your video player.
| | Collapse this transcript |
| Controlling video playing and pausing with ActionScript| 00:00 | Using some simple code, you can
connect Play and Pause buttons to an
| | 00:04 | FLVPlayback component.
| | 00:06 | So here we're going to connect
custom buttons to control the
| | 00:09 | FLVPlayback component.
| | 00:10 | The great thing about the FLVPlayback
component is that you get a shortcut for doing this.
| | 00:15 | Let's take a look at how it works.
| | 00:18 | On the Stage, I have my movie clip, playPause_mc.
| | 00:22 | If I enter its Timeline, you'll
note that I have a movie clip called
| | 00:26 | play_mc, and then pause_mc.
| | 00:31 | Now if you structure a movie clip like
this, and name a movie clip play_mc and
| | 00:37 | another one pause_mc, something magical
happens with the FLVPlayback component.
| | 00:43 | Go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:47 | Right below, where we are
setting buttonmode for info and volume,
| | 00:50 | I'll create a new line of code.
| | 00:52 | I'll type flv_mc.playPauseButton = , and
we'll set that equal to playPause_mc.
| | 01:10 | So after that, just type a
semicolon, and test the movie.
| | 01:14 | Check out the button functionality.
| | 01:14 | (Music playing.)
| | 01:25 | So that one line of code made it so
that it shows the hand cursor when you
| | 01:29 | roll over the Play button or the Pause
button, that when you click the Play or
| | 01:33 | Pause button, the appropriate button
hides, and the appropriate button shows,
| | 01:38 | and the Play and Pause buttons both work just
as you'd expect them to, to control the video.
| | 01:43 | This is a pretty nice
shortcut when you're working with the
| | 01:45 | FLVPlayback component.
| | 01:47 | So by using the Play/Pause button
property, you can add custom Play and Pause
| | 01:52 | buttons to your FLVPlayback
component with only one line of code.
| | Collapse this transcript |
| Working with ActionScript cue points to add closed captioning| 00:00 | Using the Flash CS5 cue point system, you can
add ActionScript cue points to your FLV files.
| | 00:07 | Remember, as we looked at earlier, when
you select an FLV file, you can add cue
| | 00:11 | points through the Properties panel.
| | 00:13 | Remember that each cue point has a
parameter called caption with a value that
| | 00:18 | we're going to place inside of that text field.
| | 00:20 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:25 | At the bottom of all lines of code that
say addEventListener, I'm going to add a
| | 00:28 | new line and a new EventListener.
| | 00:32 | We'll add the EventListener
to the FLVPlayback component.
| | 00:35 | So flv_mc.addEventListener() and a semicolon.
| | 00:43 | Now the event that we're
going to listen for is the
| | 00:47 | MetadataEvent.CUE_POINT event.
| | 00:50 | Now you'll just have to remember this,
because even though ActionScript cue
| | 00:55 | points are embedded into a video's
metadata, you are still going to treat them as
| | 01:00 | if they are metadata in the code.
| | 01:02 | So Metadata, only a capital M, Event with a
capital E, should turn blue .CUE_POINT all
| | 01:12 | caps, and then a comma and a space.
| | 01:16 | We'll run a function called cuePointReached.
| | 01:21 | So above the toggleCaptions
function, I'm going to define the
| | 01:25 | cuePointReached function.
| | 01:26 | Make sure it receives an event with
a datatype of MetadataEvent :void, no
| | 01:35 | return data, then some curly braces.
| | 01:39 | Now we are going to set the text of
the text field inside of captions_mc.
| | 01:44 | So it's captions_mc.caption_txt -
| | 01:50 | that's a text field inside of
the movie clip - .txt = evt.info.
| | 01:58 | Notice in the code hinting area,
info property is an object.
| | 02:02 | That gives us the metadata.
| | 02:04 | Inside of the metadata, there is
another property called parameters.
| | 02:09 | So type .parameters.
| | 02:11 | The code hinting looks a little bit
weird right here, because the code hinting
| | 02:15 | for the Object datatype is just these
few things, because the Object datatype
| | 02:20 | can hold any number of parameters
that you can create whenever you want.
| | 02:25 | So you can't get code
hinting for the Object datatype.
| | 02:28 | So after parameters, then we type the
name of the parameter that we want to
| | 02:32 | access, which is caption.
| | 02:34 | So we type .caption. Type a semicolon.
| | 02:39 | Now you should be able to test the movie,
| | 02:42 | click the Play button,
and watch the captions appear.
| | 02:45 | (Music playing.)
| | 02:55 | Of course, if you want to, you can click
the i button and show and hide the captions.
| | 03:01 | If you continue on,
everything will still work properly.
| | 03:04 | (Music playing.)
| | 03:16 | So once you've set up your cue points,
you can use them for just about anything
| | 03:20 | you want, including closed captions.
| | 03:22 | To use them, you listen for the
MetadataEvent.CUE_POINT event.
| | 03:28 | You can access the data
through the info property.
| | 03:31 | You can access the parameters
through that object's parameters property.
| | Collapse this transcript |
| Displaying video playback position| 00:00 | Now we'll connect the progress slider
to the FLVPlayback component to show
| | 00:05 | the playback progress.
| | 00:06 | Unfortunately, there is not an
amazing shortcut that's as simple as adding
| | 00:12 | the Play/Pause button.
| | 00:13 | So we'll have to write the code ourselves.
| | 00:15 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:20 | In here, I'm going to add an
EventListener in the addEventListener section of
| | 00:24 | code, right below flv_mc.addEventListener.
| | 00:29 | So here I'll add an EventListener,
and just type addEvent, with a capital E,
| | 00:34 | Listener, with a capital L, and the
event is going to be Event.ENTER_FRAME in
| | 00:42 | all caps, and we'll run a
function called trackPlayback.
| | 00:54 | Let's define the
trackPlayback function right above the
| | 00:56 | cuePointReached function.
| | 00:58 | So create a function called
trackPlayback, capital P. In the parentheses, write
| | 01:06 | an event object with the datatype of
Event, capital E, :void, for no return data.
| | 01:13 | We'll track the playback right here.
| | 01:16 | The first thing we'll do is create a
variable called per and then Played, with a
| | 01:19 | capital P. Datatype it to a Number.
| | 01:22 | We'll set it equal to a value in just a second.
| | 01:26 | We can get the playback
percentage through the FLV object, so
| | 01:31 | flv_mc.playheadPercentage.
| | 01:35 | Playhead is all lowercase.
| | 01:38 | Percentage has a capital P. It should be blue.
| | 01:41 | Then we're going to divide that value by 100.
| | 01:45 | The playheadPercentage property gives
you a whole number between 1 and 100.
| | 01:50 | We don't want a whole number.
| | 01:51 | We want between zero and one.
| | 01:53 | So we simply divide that by 100.
| | 01:54 | That's what we'll get.
| | 01:57 | Now we'll place the movie
clip to show the progress.
| | 02:01 | Go to the next line, and then we'll
type progbar_mc.controller_mc.x = perPlayed,
| | 02:16 | capital P, times, asterisk, and then in
parentheses, we're going to write the
| | 02:25 | maximum X position that we
want the controller to go.
| | 02:29 | Remember, that's going to be the whole width of
the progbar minus the width of the controller.
| | 02:34 | So, in here, type progbar_mc.width space
- space progbar_mc.controller_mc.width.
| | 02:52 | So we'll test the movie,
and preview the animation.
| | 02:58 | Click the Play button to play the
movie, and watch the progress slider
| | 03:02 | move across the screen.
| | 03:03 | (Music playing.)
| | 03:24 | So notice, it starts at the right
place and ends at the right place.
| | 03:29 | So by using the playheadPercentage
property, we can get the position of the
| | 03:33 | movie that's being played
in the FLVPlayback component.
| | 03:36 | We divide that by 100, and wee can use that
information to display the progress of the movie being
| | 03:42 | played back.
| | Collapse this transcript |
| Adjusting video volume| 00:00 | Now we'll use the volume
slider to control the volume in the
| | 00:04 | FLVPlayback component.
| | 00:06 | Let's start by adding some
code to the volume slider.
| | 00:10 | I'll double-click the volume movie
clip on the main Timeline and then
| | 00:14 | double-click the volume bar, bar_mc,
inside of the volume control movie clip.
| | 00:21 | Inside that movie clip, I'll select the
first keyframe of the actions layer and
| | 00:25 | open up the Actions panel.
| | 00:28 | In here, I'm going to add one line of code.
| | 00:31 | If you ever want to create your own
custom event, it's as simple as calling the
| | 00:36 | method called dispatchEvent.
| | 00:39 | So let's say I want to announce
that the scrollbar has been updated.
| | 00:45 | So every frame, I want to tell anyone who
wants to listen that the scrollbar is updating.
| | 00:53 | So to do that, I'm going to go right
below scrollPercent = 1 - scrollPercent;
| | 00:59 | so that's in sendUpdate,
at the bottom of the code.
| | 01:01 | I'll go right below that line of code
and then type dispatchEvent, with a
| | 01:08 | capital E, some parentheses and a
semicolon, and inside the parentheses, I'm
| | 01:13 | going to create a new event.
| | 01:16 | So I'll type new Event, with a
capital E, some parentheses, and inside of
| | 01:24 | those parentheses, for the new event,
I'm going to tell Flash which type of
| | 01:28 | event I want to send out.
| | 01:31 | For this, I'm going to use a
built-in event that's made for sending out
| | 01:35 | information like updates.
| | 01:38 | The event is called Event, with a
capital E, .CHANGE in all caps.
| | 01:43 | So, let's go back to the
code in the main Timeline.
| | 01:46 | If you want to take your shortcut, you
can open up the toolbox, and then you can
| | 01:51 | find Scene 1 actions : frame 1, and click that.
| | 01:56 | Now, I'll close the toolbox.
| | 01:59 | I'm back in my code, on the main Timeline.
| | 02:02 | In this code, I'll go to my
addEventListener area, and on line 8, right after
| | 02:08 | addEventListener(Event.ENTER_FRAME),
I'm going to go to the next line, and I'm
| | 02:13 | going to add an EventListener to the bar.
| | 02:16 | So type volume_mc.bar_mc.
addEventListener, capital E, capital L. And in the
| | 02:29 | parentheses, I'm going to listen for
the event that I executed in there,
| | 02:33 | which was Event.CHANGE.
| | 02:35 | So Event, with a capital E, .CHANGE, in all
capitals. Type a comma and a space.
| | 02:41 | We'll run a function called volslider,
with a capital S, Updated, with a capital U.
| | 02:48 | Now, we'll define the volsliderUpdated function.
| | 02:52 | I'll do this right above
the track playback function.
| | 02:55 | So create a function there called
volsliderUpdated, capital S, Updated with U,
| | 03:02 | some parentheses, evt:Event, with a
capital E, close out the parentheses, colon
| | 03:10 | void, some curly braces, and inside of
there, I'm going to set the volume of the
| | 03:15 | FLVPlayback component.
| | 03:18 | Type flv_mc.volume = volume_mc.bar_
mc.scrollPercent, with a capital P.
| | 03:31 | Remember that's the
variable that was inside of bar_mc.
| | 03:35 | So we're accessing a custom
variable that we created inside of bar_mc.
| | 03:41 | So we're just setting the volume equal
to the scrollPercent of the scrollbar.
| | 03:47 | Let's test the movie, and use the volume slider.
| | 03:52 | So play the movie. As I drag the
volume slider down, the volume goes down.
| | 04:00 | As I drag it up, it goes up.
| | 04:02 | (Music playing.)
| | 04:16 | I love that.
| | 04:18 | So now I'll close the playback window,
and we've completed our video player.
| | 04:23 | So to adjust volume on an
FLVPlayback component, use its volume property.
| | 04:28 | If you want to send out a custom event,
then use the dispatchEvent command,
| | 04:34 | create a new event inside the parentheses,
and inside the new event parentheses,
| | 04:40 | dispatch any event you like.
| | Collapse this transcript |
|
|
13. Flash CS6 ActionScript FeaturesUsing new code snippets for AIR and mobile| 00:00 | Flash added a few extra snippets
for AIR and mobile applications.
| | 00:06 | You can find them in the Code Snippets panel.
| | 00:08 | If you scroll down in the Code Snippets
panel, you will see Mobile Touch Events,
| | 00:12 | Mobile Gesture Events, Mobile
Actions, AIR for Mobile, and AIR.
| | 00:17 | You can expand these to see the various
snippets that you can add in, including
| | 00:22 | in the AIR section, Click
to Read from a Text File.
| | 00:25 | So you will see that we have many new and
useful actions for building mobile and AIR apps.
| | 00:33 | As an example, we will click on the
skateboarder on the stage and then in the
| | 00:38 | Code Snippets panel, I am going to
double-click in the Mobile Actions section, the
| | 00:42 | Move with Accelerometer snippet.
| | 00:45 | Once the Actions panel
opens with the snippet inside,
| | 00:48 | you will see all the code.
| | 00:51 | Now if I were to test this on a mobile
device, I would see that the kid on the
| | 00:55 | screen moves along with accelerometer data.
| | 00:59 | So, in two clicks I can do something as
complicated as moving an object on the
| | 01:04 | screen based on the accelerometer.
| | 01:07 | Using the new AIR and mobile
features, you can more quickly develop
| | 01:10 | applications in Flash.
| | Collapse this transcript |
| Viewing the new code snippets HUD| 00:00 | In addition to having more snippets to
work with, the Code Snippets panel also
| | 00:05 | gives you more information
about each individual snippet.
| | 00:09 | If I open the Code Snippets panel and
single-click any snippet, you will notice
| | 00:14 | on the right side you will see an
info button and then a code button.
| | 00:19 | Now this heads-up display, or HUD, gives
you information about each code snippet.
| | 00:26 | So if I click the little information
icon then I can see information about the
| | 00:30 | code snippet in plain English.
| | 00:33 | If I click the code icon, I can see an
example of the code, and then of course
| | 00:38 | click the button to insert the code into my app.
| | 00:41 | Now of course this works for any of the
snippets existing in the Code Snippets
| | 00:46 | panel, so you can quickly get the
information. And you don't have to worry that
| | 00:50 | you accidentally put the wrong
one in before committing to it.
| | 00:53 | So you can click through all of them,
make sure you are selecting the right one,
| | 00:57 | and then click to insert.
| | 00:59 | And if you want to hide this Code
Snippets heads-up display, you can just click
| | 01:03 | the Options button and it will go away.
| | 01:07 | The new heads-up display serves you by
enabling you to speed up your workflow
| | 01:12 | so you make less mistakes and you
can use code snippets more efficiently.
| | Collapse this transcript |
| Loading assets with the new ProLoader class| 00:00 | The ProLoader class was introduced to
overcome problems that occurred when you
| | 00:06 | would use the loader class to load a
SWF file that contained a TLF text field.
| | 00:11 | Let's look at how the Loader class works.
| | 00:14 | Select a skateboarder on the
stage and in the Code Snippets panel,
| | 00:18 | double-click the Click to Load
or Unload SWF or Image snippet.
| | 00:23 | The code is then written and if you
scroll through it, you can see that
| | 00:28 | it's pretty simple.
| | 00:30 | The ProLoader class works a
lot like the Loader class.
| | 00:33 | You create a new instance
and you load in a URL request.
| | 00:36 | So let's change that URL
request to something local.
| | 00:39 | TLF in all caps .swf.
| | 00:43 | There is my URL, and then I am just going
to test this in the Flash Player, and so
| | 00:49 | I have my skateboarder on the screen
and I can click him and the SWF file loads,
| | 00:54 | including a TLF text field.
| | 00:57 | So using the ProLoader class, you can
load SWF files that contain TLF text fields.
| | 01:03 | If you are interested in learning more
about the ProLoader class, you can look
| | 01:07 | it up in Flash Help.
| | Collapse this transcript |
| Understanding Flash Player premium features| 00:00 | As a Flash instructor, I'm often asked,
Whatdo you think about the future of Flash?
| | 00:06 | And I've been saying for a long time that Flash
is an excellent platform for developing games,
| | 00:12 | particularly browser-based games.
| | 00:15 | Adobe has published a document that explains
the future of Flash, where they plan on moving
| | 00:22 | the Flash platform. Unsurprisingly, they're
going to be focused on video and gaming.
| | 00:29 | In the gaming realm, there is a new feature called
Stage 3D, which you can read about @Adobe.com/devnet/games.html.
| | 00:40 | Stage 3D is a new hardware-accelerated way
to develop 2D and 3D games. Now just at this
| | 00:48 | site, you can see a lot of resources for developing
games using Flash. Stage 3D is just one of
| | 00:55 | them. Some of these features are free and
some of them are Premium Flash Player features.
| | 01:02 | So if you scroll down a little bit, you will
see a section called Game development in detail.
| | 01:08 | In here there is a section called Gaming
engines, 3D and Stage 3D. So I am going to
| | 01:13 | click that. Here we will see a list of some
first-party and third-party engines for creating
| | 01:21 | games. So there are many lists and links to
download the frameworks.
| | 01:24 | You could see that Adobe is very committed
to gaming using the Flash platform. But I
| | 01:30 | encourage you to go to Adobe's devnet and
to look at the different gaming engines they
| | 01:35 | have available and see how much easier it
is now to create a game with Flash. So if
| | 01:42 | you love Flash, now is the best time to
get into developing Flash games, because there
| | 01:48 | are more tools than ever to make high-quality
games using the Flash platform.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, you've reached the end of this course.
| | 00:03 | I hope you feel more comfortable
using ActionScript in Flash CS5.
| | 00:09 | If you're eager to learn more, there
are plenty of ActionScript titles in the
| | 00:12 | Online Training Library.
| | 00:14 | So, I'll see you next time.
| | Collapse this transcript |
|
|
