IntroductionWelcome| 00:03 | Welcome to Flash CS4 Object-Oriented
Programming. Hi, I'm Todd Perkins.
| | 00:09 | As an Adobe Certified Instructor, I spend
a lot of time showing people the ins and
| | 00:13 | outs of Adobe's web development software.
In this course, I'll show you how to
| | 00:18 | build applications using classes and
objects with object-oriented programming
| | 00:23 | in ActionScript 3.0.
| | 00:25 | If you are not familiar with the new
version of ActionScript, you can learn
| | 00:28 | everything you need in my companion course,
ActionScript 3.0 in Flash CS4 for Designers.
| | 00:35 | This is what I like about object-
oriented programming or OOP. Your programming code
| | 00:40 | is more organized, more efficient
and easier to reuse than code on the Timeline.
| | 00:45 | I'll introduce you to the basics
of OOP working with classes and
| | 00:49 | packages, inheritance and
polymorphism. You will learn to build a complex
| | 00:54 | slideshow from scratch, where you
will put the various language elements
| | 00:58 | together to build a Flash application.
| | 01:00 | Basically, you will find out how to
put more flash in your Flash, using more
| | 01:05 | organized, reusable code. So let's head
on to the next movie and get you going
| | 01:11 | with Flash CS4 Object-Oriented Programming.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you are a Premium subscriber to
lynda.com or have purchased this title on a disc,
| | 00:06 | you have access to the Exercise
Files for this title. Exercise Files for
| | 00:10 | this title are organized by chapters.
Each chapter contains all the files and
| | 00:15 | folders that we will be
working with throughout that chapter.
| | 00:18 | Some chapters are organized like
Chapter 1 here with start and final states of
| | 00:23 | each FLA file. You can tell the
difference between the start and final states
| | 00:27 | because the final states end with
_final. In some chapters, the files are
| | 00:32 | organized into folders. From there,
each folder has a Final and a Start folder.
| | 00:38 | For the exercises, I'll be starting in
the Start folder every time and if you
| | 00:42 | want to see the exercise in its
finished state, you could open up the Final
| | 00:45 | folder and see the files in there. So
that's how the Exercise Files are set up
| | 00:49 | and if you don't have access to
the Exercise Files, don't worry.
| | 00:53 | You can still follow along.
| | 00:55 | Throughout the title, I'll show you
how to set up your files in the same way
| | 00:58 | that mine are set up so that you can
follow along and have your applications
| | 01:02 | work in the same way.
| | Collapse this transcript |
| Course overview| 00:00 | Let's take a look at what you are
going to be learning in this title.
| | 00:04 | You are mainly going to be learning about
object-oriented programming. But here is what
| | 00:08 | you are going to build. This is a
slideshow application and it has animations for
| | 00:13 | images fading in and the interactivity
is controlled by clicking on the image
| | 00:19 | or by clicking on the Next and Previous buttons.
| | 00:26 | So throughout this title, we are going
to build this application from scratch
| | 00:30 | and we are going to build it using
classes. I'll show you how to organize your
| | 00:35 | classes to most effectively build an
application like this. So along the way,
| | 00:40 | you are going to learn complex
programming concepts and the end result is
| | 00:45 | a slideshow that you can use for your own images.
| | 00:48 | We will also talk about how to add
extra functionality to the slideshow and how
| | 00:53 | you can apply the same concepts to
create your own unique applications.
| | 00:58 | So I hope you are excited because I sure am!
| | Collapse this transcript |
| Who this course is for| 00:00 | Before we get into object-oriented
programming, I want you to make sure that
| | 00:04 | this title is right for you. Here is
some prerequisite knowledge before you go
| | 00:09 | into object-oriented programming in
ActionScript 3.0. You should have a knowledge
| | 00:14 | of Flash CS4 basics. So either Flash
CS4 Essential Training from lynda.com or
| | 00:21 | equivalent knowledge of Flash
CS4 basics from somewhere else.
| | 00:25 | So you should know what movie clips are,
how to work with the Timeline, how to
| | 00:28 | create layers, and how to do all the
basic tasks in Flash CS4. ActionScript 3.0
| | 00:35 | in Flash CS4 for Designers
shows the basics of ActionScript 3.0.
| | 00:41 | If you are completely new to programming,
I recommend watching that title first
| | 00:45 | before coming here. If you are already
familiar with programming, especially if
| | 00:51 | you are familiar with object-oriented
programming in those languages like PHP,
| | 00:55 | JavaScript, C, etcetera, then this title
is right for you. So going forward,
| | 01:01 | I'm going to assume that you have a basic
knowledge of Flash and either a basic
| | 01:04 | knowledge of ActionScript
3.0 or programming in general.
| | 01:08 | Now that you have an understanding
of what you need to know, if you feel
| | 01:11 | prepared to learn some advanced
programming concepts in ActionScript 3.0,
| | 01:15 | let's get started.
| | Collapse this transcript |
| About the artwork| 00:00 | Artwork for this title was provided
by Chris Orwig. Chris is not only an
| | 00:05 | amazing photographer but he is also
another lynda.com author. I would like to
| | 00:09 | take a minute to thank Chris for
providing amazing artwork for this title
| | 00:12 | to make it better.
| | 00:13 | You can show your appreciation by
watching his titles on ynda.com. I have seen
| | 00:18 | his training in Photoshop and in
LightRoom and I have never seen anyone more
| | 00:22 | passionate in all my life. So I highly
recommend checking out his work.
| | 00:26 | So thank you, Chris Orwig. And to everyone else,
enjoy the artwork in this title.
| | Collapse this transcript |
|
|
1. ActionScript 3.0 EssentialsUnderstanding ActionScript 3.0| 00:00 | In this chapter, we are going to
be working with ActionScript 3.0.
| | 00:04 | ActionScript 3.0 works in the Flash
Player. That means you will have to test
| | 00:08 | the movie from Flash or publish a SWF
file to see the code in action.
| | 00:12 | Before we get started writing ActionScript
3.0 code, make sure you are working with an
| | 00:16 | ActionScript 3.0 file. You can
see that in your Publish Settings,
| | 00:19 | in the Properties panel.
| | 00:20 | If you need to change your Publish
Settings, you can click the Edit Profile
| | 00:24 | button in the Properties panel and
then in the Flash tab adjust the Player
| | 00:27 | version and ActionScript version.
I'll click Cancel to close that menu.
| | 00:31 | Now we will write some ActionScript code.
ActionScript can be placed in two places.
| | 00:36 | On keyframes in the Timeline or in external files.
| | 00:40 | The focus of this title is going
to be writing external files using
| | 00:44 | object-oriented programming. For
quick examples, I'm going to use Timeline code.
| | 00:47 | When you are using Timeline code,
you should have a layer named Actions
| | 00:52 | with no art in it. That way your
code is organized and easy to find.
| | 00:56 | Let's write some simple ActionScript
code and test it in the Flash Player to
| | 00:59 | see it run. Let's select the first
keyframe of the Actions layer to write code
| | 01:03 | using the Actions panel. You can find
the Actions panel under Window > Actions
| | 01:08 | or by using the keyboard shortcut
Option+F9 on the Mac or F9 on the PC.
| | 01:12 | In the Actions panel, I want you to
turn off Script Assist mode. So you
| | 01:16 | shouldn't see any gray space at the top
of the panel. I'm mostly going to hide
| | 01:20 | the toolbars on the left side by
clicking the Hide button. One of the essential
| | 01:25 | ActionScript statements is a trace
statement. That's a function that's built
| | 01:28 | into the Flash Player that you can
call anywhere. So it's what's called a
| | 01:31 | global function. This can be used to
debug your code. What happens when
| | 01:35 | the Flash movie runs and this line of
code is reached, is a message appears in
| | 01:39 | Flash's Output window.
| | 01:41 | So you can use it to make sure the code
is running properly. To use a trace statement,
| | 01:45 | type the word trace and trace
is actually a function. So I can type
| | 01:49 | some parenthesis, which is what you use
in Flash to run a function, a semicolon
| | 01:54 | to end the statement and then I'm
going to pass in a string into the
| | 01:57 | parenthesis. So I'm going to type some
quotes and in the quotes, I'm going to
| | 02:00 | type Hello from ActionScript.
| | 02:04 | I will test the movie using Command+
Return on the Mac or Ctrl+Enter on the PC
| | 02:08 | and watch the message appear in the
Output window. I'll close the Preview
| | 02:11 | window and return to the code. So to recap,
ActionScript code runs in the Flash Player.
| | 02:16 | It can be placed in the
Timeline or in external class files,
| | 02:20 | and this code we used here is a trace statement,
which makes the message appear in the Output window.
| | Collapse this transcript |
| Working with variables| 00:00 | Variables in ActionScript 3.0 are
pretty similar to variables in other
| | 00:04 | languages like JavaScript. Here, I'm
going to go to the keyframe of the Actions
| | 00:07 | layer and open up the Actions panel.
Remember that's Option+F9 on the Mac or F9 on the PC.
| | 00:12 | You create variables using the keyword
var. So type var and then a space and
| | 00:16 | now we will type the variable name. So
let's say I wanted to create a variable
| | 00:19 | called myName. We will call my and
then Name and that's my variable name.
| | 00:25 | What you do in ActionScript is
declare a data type. You declare a data type
| | 00:29 | using a colon. So type a colon and
then the Code Hinting window pops up.
| | 00:33 | The Code Hinting window shows you the
different data types that you can type to
| | 00:37 | the different variables.
| | 00:38 | Here, my name is going to be a string.
So I'm going to type String and once it
| | 00:43 | gets highlighted in the Code Hinting
window, I'll press Enter or Return on my
| | 00:46 | keyboard to have Flash complete the code for me.
| | 00:49 | Now if you want to set it equal to a
value, you can type = and then the value
| | 00:54 | in quotes and then a semicolon to end
the statement. So my name is Todd so
| | 00:58 | I type a capital T in the quotes and
let's say I wanted to see that value in
| | 01:01 | the Output window, I can type trace,
some parenthesis and a semicolon and
| | 01:06 | inside of the parenthesis you are going
to trace the value with the variable by
| | 01:08 | just typing the variable name.
So my name (Todd.) And if I test the movie,
| | 01:12 | I'll see my name in the Output window.
| | 01:14 | I will close the Preview window and
return to my code. In ActionScript you can
| | 01:18 | give a value right away on the same
line of code as you declare the variable.
| | 01:22 | You can also give the value later on.
So let's say I deleted everything after
| | 01:26 | the word String except for the semicolon.
I wanted to declare the variable on
| | 01:31 | a later line of code.
| | 01:32 | I can do that by typing myName= and the value
in quotes, semicolon to end the statement,
| | 01:40 | test the movie and we get the same result.
Variables are pretty easy to work with.
| | 01:45 | Generally, the data type starts with
a capital letter. There are a few exceptions.
| | 01:49 | I'm going to erase the two lines
of code where I define the myName variable.
| | 01:53 | I'm going to delete the value
of myName in the trace statement.
| | 01:55 | I am going to create some number
variables. I'll create a variable called
| | 01:58 | myNum, data type it to a Number, and
I'll set it equal to 15. Now I'll trace
| | 02:04 | the value of myNum, test the movie
and there is 15 in the Output window.
| | 02:09 | The Number data type supports positive
numbers, negative numbers and floating
| | 02:14 | point numbers. So I can have a number like
15.2349, a bunch of numbers and test the movie
| | 02:19 | and there is my value in the
Output window. There are two other number
| | 02:23 | data types and these don't
start with a capital letter.
| | 02:25 | There is int and uint. Int, that's int.
I'm just going to change the data type
| | 02:30 | of myNum, all lowercase. This is for
whole numbers. So if I put a floating
| | 02:34 | point number in there, the number is
actually going to get truncated when
| | 02:37 | I test the movie.
| | 02:38 | So you will just see 15 instead of
15.234987234. Integers can be positive or
| | 02:45 | negative, so I'll erase the decimal
and all the numbers after that and I'll
| | 02:48 | change the value to -15. I'll test the
movie again and see -15 in the Output window.
| | 02:53 | Using the int data type when you
are working with integers will optimize
| | 02:57 | your applications.
| | 02:59 | In other words, the Number data type
is a little bit heavier and therefore,
| | 03:03 | slower than the Integer data type so
use Integer data type wherever you can to
| | 03:08 | optimize any applications that you
have. Another data type is the uint or
| | 03:12 | positive integer. So uint. Make sure
that you don't type unit instead. And then
| | 03:19 | I'm going to type 15 in there, not -15,
I'll test the movie and then I get 15
| | 03:24 | in the Output window.
| | 03:25 | Now if you try to put an unacceptable
value in there like a negative value and
| | 03:29 | then I test the movie, then I'm going
to get this really high number. That's
| | 03:32 | actually the maximum value of a
positive integer. So, when you are working with
| | 03:37 | positive integers just make sure
that they are always positive. Note that
| | 03:40 | positive integers also include zero.
| | 03:45 | The last thing I want to show you is
Boolean data type. So I'm going to erase
| | 03:47 | myNum from the trace statement,
erase line 1 in my code, create another variable,
| | 03:53 | call it myBool, and then
data type it to Boolean,
| | 03:57 | and in ActionScript, Boolean values are
true or false, all lowercase, not in quotes.
| | 04:02 | So true. And I'll trace myBool. Test
the movie, Command+Return on the Mac,
| | 04:08 | Ctrl+Enter on the PC. I get true.
| | 04:10 | I can change it to false, so that's all
lowercase, test the movie again, I get
| | 04:14 | false in the Output window. And the
default value of the Boolean variable is false.
| | 04:18 | So if I don't set a value, I test
the movie and then I'll get false. So,
| | 04:22 | to work with variables in ActionScript 3.0,
define them using the var keyword,
| | 04:26 | type a space, name your variable
avoiding spaces and special characters,
| | 04:31 | data type with a colon, declare the data
type. Most values begin with a capital
| | 04:35 | letter. In fact, all values begin
with a capital letter except for int and uint.
| | 04:40 | End the statement with a semicolon and
you can trace the value in a trace statement.
| | Collapse this transcript |
| Using and creating functions| 00:00 | Let's take a look at ActionScript 3.0
functions. I'm going to go to the first
| | 00:04 | keyframe in the Actions layers in my
file here and open up the Actions panel by
| | 00:08 | pressing Option+F9 on the Mac or F9
on the PC. You define a function in
| | 00:13 | ActionScript 3.0 by using the keyword
function. So it's all lowercase.
| | 00:17 | Just type function and then a space and
the name of your function. So let's say
| | 00:20 | I call it myFunction.
| | 00:21 | Then you type some parenthesis,
a colon and define the return data type.
| | 00:30 | If the function has no return data, the return
data type is void and that's all lowercase.
| | 00:34 | The function is then defined within curly
braces. So type open and closed curly braces
| | 00:40 | and here we put the function code. So let's say
my function code simply traces some numbers.
| | 00:46 | So it's going to trace (3+4);
and in ActionScript 3.0 you run
| | 00:56 | a function by calling the function's name.
So myFunction(); So I'll test the movie.
| | 01:04 | Command+Return on the Mac, Ctrl+Enter
on the PC. And I'll see the result
| | 01:07 | in the Output window, which is 7.
That's the result of 3 + 4.
| | 01:11 | Functions in ActionScript 3.0 can
hold parameters, which are also knows as
| | 01:15 | arguments. So let's say I'm going to
pass in two numbers. Num1, I'm going data
| | 01:19 | type it as a Number. So I'm going to
put that in the parenthesis where I define
| | 01:22 | the function and then I'm going to
define another parameter by typing in a
| | 01:26 | comma and then the name of
second parameter. So num2:Number.
| | 01:32 | Now when I run the function, I'll need
to pass in a value for num1 and num2.
| | 01:36 | So it will be a number, a comma and then
another number. So let's say I wanted to
| | 01:42 | trace three plus four so I'll type 3, 4
and then I'm going to replace the 3 and
| | 01:47 | the 4 with num1 and num2 inside the
function. Then I'll test the movie using
| | 01:53 | Command+Return on the Mac or Ctrl+Enter
on the PC. I'll see the same result in
| | 01:56 | the Output window.
| | 01:58 | Functions in ActionScript can also
return values. So let's say I wanted to
| | 02:02 | return a number. I'm going to change
the return data type from void to Number
| | 02:09 | and I'm going to change that trace
statement to return num1+num2 using the
| | 02:14 | return keyword. So I'll type return
num1 + num2 and I'll make sure to delete
| | 02:20 | that closed parenthesis there.
| | 02:22 | Now what I can do is wrap the call to
myFunction in a trace statement here.
| | 02:26 | So I'll type trace and then some
parenthesis around the call to myFunction.
| | 02:29 | Then we will see that same result in the
Output window. So basically what's
| | 02:34 | happening is myFunction runs, the data
is returned, and then myFunction or the
| | 02:39 | value of the call to myFunction
here is 7, when we pass in 3 and 4.
| | 02:43 | You could also use a function call
that's a value for a variable. So let's say
| | 02:48 | I create a variable above this
function called myNum. Data type it to Number
| | 02:54 | and I'll set it equal to myFunction(5,6);.
So the data type for this function
| | 03:04 | when I run it is a Number,
because its return data type is Number.
| | 03:07 | So now if I trace the value of myNum,
I'm going to get the result that is
| | 03:13 | returned from running myFunction's
passing in 5 and 6, which when I test the
| | 03:18 | movie should be 11 in the Output window.
| | 03:21 | So to create a function use the
function keyword, type a space, the name of the
| | 03:25 | function, parenthesis with any
arguments or parameters inside of the
| | 03:30 | parenthesis separated by commas. After
the parenthesis declare the return data type
| | 03:35 | of the function using a colon. If
there is no return data, the data type
| | 03:38 | is void. If you do have a return data
type, you will need a return statement
| | 03:42 | inside of your function.
| | 03:43 | A return statement just has the word
return and space, then the value to
| | 03:47 | return. The value needs to be the same
data type as the return data type of the
| | 03:51 | function. Then to run a function
you just type in name of the function,
| | 03:55 | parenthesis, then any parameters you
are passing in separated by commas.
| | Collapse this transcript |
| Responding to events| 00:00 | Now we are going to look at listening
for and responding to events.
| | 00:04 | For our example we will use a mouse click,
but rest assured listening for and
| | 00:10 | responding to any event is
pretty much the same process.
| | 00:13 | On the stage here I have a button
that is clearly anxiously awaiting being
| | 00:17 | clicked, that says click me on it and
it's a button symbol. So if you are going
| | 00:21 | to communicate with a display object
or a visual object on the stage using
| | 00:25 | ActionScript, it should be either an
instance of a movie clip or a button.
| | 00:30 | From there it will need an instance name.
You can assign an instance name in the Properties panel.
| | 00:35 | So select the button on the stage and
on the Properties panel, click in the
| | 00:39 | Instance Name field that says text
field at the top and then type the instance name.
| | 00:42 | Here I called it my_btn. This _btn
suffix is just so you get code hinting
| | 00:48 | in the Actions panel. So it's not
mandatory; it's just for code hinting.
| | 00:52 | When you are naming an instance, make
sure to fall the same naming conventions
| | 00:56 | you use when naming variables. So you
don't want to use any spaces or special
| | 01:00 | characters or anything. Let's go to the
first keyframe of the Actions layer and
| | 01:04 | open up the Actions panel and here what
I'm going to do is listen for the event.
| | 01:09 | Now events in ActionScript 3.0
require two parts. First you have to have an
| | 01:14 | event listener and you have an event
handler. An event listener connects an
| | 01:19 | object to an event. So, for example,
you want to connect this button to the
| | 01:23 | mouse click event. Event handler is a
function that runs that responds to the event.
| | 01:29 | So let's take a look at how
to define an event listener first.
| | 01:32 | So I'm going to type my_btn and then a
dot, so use dot syntax in ActionScript
| | 01:37 | 3.0 to manipulate properties and
methods of objects. What we are going to do
| | 01:42 | here is run a method which is
actually a function attached to a class.
| | 01:46 | It's called addEventListener. So add, all
lowercase, Event and by then it should be
| | 01:52 | highlighted in Flash's code hinting.
So you can just press Enter or Return on
| | 01:55 | your keyboard to have Flash type it out for you.
| | 01:58 | You should also see code hinting for
the event in the Actions panel. So Flash
| | 02:02 | is first asking for a type and then a
listener, which is function. So the type
| | 02:06 | is a string. Now, you are actually
never going to type a string here.
| | 02:11 | You are always going to use the formal way,
which is typing the event class and
| | 02:15 | the event property of that class.
| | 02:18 | So, anything you do with the mouse,
like a rollover, a click, mouse move,
| | 02:23 | etcetera, is in a mouse event class.
So here we are going to type the class.
| | 02:27 | So MouseEvent. It's all one word. It
should turn blue when you type it correctly,
| | 02:33 | and then a dot. This property that we
are going to use is actually connected to
| | 02:37 | the class, not an instance of the
MouseEvent class. So it's called a static property.
| | 02:42 | All the events are what are called
constants meaning they don't change.
| | 02:46 | Constants are always created with all
caps. So MouseEvent.CLICK in all caps.
| | 02:51 | You should be able to start typing
click and it should get highlighted in the
| | 02:54 | code hinting area. Press Enter or
Return and it get written out for you there.
| | 02:59 | So the event that we are listening for
is a mouse click. So again, all events
| | 03:03 | related to the mouse are
held in the MouseEvent class.
| | 03:06 | So type a comma and a space; the space
is actually not necessary. It's just for
| | 03:11 | prettiness in code writing and now I'm
going to type the name of a function that
| | 03:15 | I'm going to run when the button is
clicked. So I'm going to call this
| | 03:18 | btnClick, close out the parenthesis,
type a semicolon, then we go down a few lines.
| | 03:24 | That's important to know that it
doesn't really matter where this function is.
| | 03:27 | It could be above the addEventListener
code or below it, because what's going
| | 03:32 | to happen is when the event happens,
Flash is just going to look for the button
| | 03:35 | click function and run it wherever it is.
| | 03:37 | So we will define a function called
btnClick and whenever you are working with
| | 03:41 | an event your function needs to
receive the event data. So I'm going to type
| | 03:46 | some parenthesis here. I'm going to
receive it in a parameter I'm going to call event.
| | 03:51 | Now you can call this whatever
you want. I just have the habit of
| | 03:54 | calling it event all the time. So
whenever I'm responding to event,
| | 03:57 | parameter name is going to be event.
| | 04:00 | So the data type is going to be
MouseEvent. So that's going to match the data
| | 04:04 | type of the event class, so MouseEvent
in the case of anything related to the mouse.
| | 04:09 | The return data type is always
void for events, type some curly braces
| | 04:14 | and here I'm just going to use a
trace statement. So I'm going to type
| | 04:16 | trace("button clicked!").
| | 04:24 | Now we will test the movie and
preview this. So notice that we don't see
| | 04:28 | anything appear in the Output window,
because we actually have to click the
| | 04:30 | button to trigger the event. So click
on the button and there is the message in
| | 04:33 | the Output window. Click on it
multiple times and the function will run
| | 04:36 | multiple times causing multiple trace
statements to appear in the Output window. Nice!
| | 04:41 | Let's close the preview window and
return to the code. Not only can we run a
| | 04:45 | block of code when a function runs but
we can actually access data about that event.
| | 04:51 | So whenever we click something,
the event object that we are receiving
| | 04:54 | as a parameter has information about
that event including the event type, like
| | 04:59 | whether it was a mouse event like a
click event or a rollover or whatever.
| | 05:03 | You can access that through the event
object's type property, so event.type.
| | 05:08 | You test the movie, click the button,
and I'll see 'click' in the Output window.
| | 05:12 | Back to the code.
| | 05:13 | Then if you want to access the
object that was clicked, use the target property.
| | 05:17 | So event.target. This is
going to prefer to the object that
| | 05:20 | initiated the event. So if I click
on my_btn, event.target is going to be
| | 05:26 | my_btn. So test the movie, click on
the button. We don't see my_btn there,
| | 05:32 | because the button is an ActionScript
object. So in your code you will see
| | 05:37 | object SimpleButton.
| | 05:38 | But let's say we wanted to get the
button's instance name for some reason.
| | 05:42 | I can use event.target and then type
.name after that and that will give me the
| | 05:46 | instance name of the button. So the
name property is a property of my_btn.
| | 05:51 | So when we type event.target, we are
making a reference to the button and we can
| | 05:55 | access that button's properties
through dot syntax after target.
| | 05:59 | So event.target.name will give us the
value of the name property of my_btn,
| | 06:04 | because that's the instance name of
the button. Test the movie, click the button,
| | 06:09 | and there is
my_btn in the Output window.
| | 06:12 | Now this isn't that impressive right now,
because we already know the name of the button.
| | 06:15 | But let's say we had 100
event listeners added to the various
| | 06:19 | objects writing the same btnClick
function and we wanted to do essentially
| | 06:23 | the same thing when a button was clicked,
and that's to do something with
| | 06:25 | the button's name.
| | 06:26 | By using this event.target.name
property this can be a more dynamic function
| | 06:31 | that can be used for multiple objects
to perform the same task. So in other words,
| | 06:36 | this can represent the name of
whatever button that was clicked and not
| | 06:39 | just my_btn.
| | 06:41 | So to recap, when you are working with
events, you are first going to need to
| | 06:45 | add an event listener to your object.
So we are adding an event listener to
| | 06:49 | my_btn and adding an event listener is
a method of just about every object. So,
| | 06:55 | every interactive object in
ActionScript 3.0 has this addEventListener method.
| | 06:59 | So you call that object's method and
in the parentheses you pass in first
| | 07:03 | the event to listen for and the format for
doing that is the event class, which in
| | 07:07 | this case is MouseEvent, dot, the event
name, which is CLICK in this case, and
| | 07:11 | event names are always in all caps with
words separated by underscores and then
| | 07:15 | a comma and then the name of the function
that you are going to run when the event occurs.
| | 07:19 | Then you define that function like a
normal function. You receive an event
| | 07:22 | object and this event can be called
anything. I just happen to call it event
| | 07:27 | all the time, but it needs to have the
same data type as the event class. So,
| | 07:30 | MouseEvent in addEventListener and
then MouseEvent for the data type in
| | 07:34 | the btnClick function.
| | 07:36 | Inside of your event handler function,
you can access properties of the event
| | 07:40 | through the event object. So this event
parameter here has the property target,
| | 07:45 | which refers to the object that
triggered the event. In this case, it's my_btn.
| | 07:48 | We can access its properties through
event.target, just like here where
| | 07:53 | we are accessing the object's name.
| | Collapse this transcript |
| Creating loops| 00:00 | Now we are going to look at creating of
loops using ActionScript 3.0. Let's go
| | 00:04 | to the first keyframe of the Actions
layer and open up Actions panel. There are
| | 00:08 | a few different types of loops in
ActionScript, and you can find out about all
| | 00:12 | of them using Flash Help. But the most
common one you are going to use is a for loop.
| | 00:16 | To create a for loop, type for, and
some parentheses and some curly braces and
| | 00:24 | the code inside the curly braces is
what's going to be repeated based on what
| | 00:28 | you type in the parenthesis. So in
the parenthesis we are going to create
| | 00:31 | a variable called i. This is going to
be our loop's iterator. So var i and
| | 00:36 | the data type is typically going to be
a positive integer. So uint, it's all
| | 00:41 | lowercase, and by using this data
type when I'm going to use only positive
| | 00:46 | whole numbers, I'm optimizing my application.
| | 00:48 | I am just going to set that equal to 0.
I'll type a semicolon. So that's the
| | 00:52 | first part of the loop is you clear
your iterator. You don't actually have
| | 00:55 | to create it in this part. I can just
put i if I already had a variable called i,
| | 01:00 | and then I can also set it equal to
0 in here if I wanted to. So I have that
| | 01:05 | and then we declare how long our loop
is going to run for, how many times
| | 01:07 | the loop is going to run.
| | 01:09 | It's going to run until this condition
is false. So as long as i is less than 10.
| | 01:15 | So that's the second part. Type the
semicolon and then a space and then we
| | 01:20 | define what's going to happen if
the code inside the loop executes and
| | 01:24 | this condition is not true.
That conditions being i<10.
| | 01:29 | We are going to increment i by 1, so
type i++ and then we will write the code
| | 01:33 | in the loop. So I'm just going to do a
trace statement. trace(); and I'm going
| | 01:41 | to trace the value of i. So I'm going
to test the movie. Command+Return on the Mac,
| | 01:45 | Ctrl+Enter on the PC and in
the Output window I have 0 through 9.
| | 01:51 | So if I close the Actions panel you
could see that a little bit better.
| | 01:53 | I'll scroll to the Output window.
So 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Nice!
| | 01:58 | I return to my Actions panel. And really
that's all there is to it. You can create a for
| | 02:03 | loop like this. There is also a
while loop and there is a do while loop.
| | 02:08 | For more information about the while
and do while loops, you can look them up
| | 02:11 | in Flash Help. But to create a for loop,
use the word for, and in the parentheses
| | 02:16 | you need to declare three things
separated by semicolons. First the iterator,
| | 02:21 | which in this case is i. It's a
positive integer equal to 0. Second is the
| | 02:25 | condition of the loop as long as i<10
the loop will run, and third what happens
| | 02:31 | if the condition is not met once the
block of code runs, and what we are going
| | 02:35 | to do here is increment i by 1.
| | 02:38 | So this is the typical loop. Really
the only thing that usually changes is the
| | 02:43 | number 10 here, and that just changes
the number of time that the loop will run.
| | 02:46 | You put all the looping code inside of curly braces
and here we are just tracing the value of i.
| | Collapse this transcript |
| Defining conditional statements| 00:00 | Conditional statements in ActionScript
3.0 are pretty similar to conditional
| | 00:04 | statements in just about any other
programming language. Let's go to the first
| | 00:08 | keyframe in the Action layer, and we
will open up the Actions panel to create a
| | 00:11 | similar if statement. An if statement
in ActionScript is created by typing the
| | 00:15 | word if, parenthesis and some curly
braces. If the condition inside the
| | 00:23 | parenthesis is true, then the block
of code in the curly braces will run.
| | 00:27 | So we will do a simple if statement to
start out. We will do if (4 > 3), so if
| | 00:35 | 4 is greater than 3, which is true.
Then we are going to trace condition is
| | 00:40 | true. So in that parenthesis I'm going
to type some quotes and then I'm going
| | 00:43 | to type the String, condition is true!
Test the movie, and you should get
| | 00:49 | condition is true in the Output window.
| | 00:51 | If I change that greater than sign to
a less than sign to make the condition
| | 00:55 | false and test the movie, I get
nothing in the Output window. Now if you want
| | 00:59 | to run a block of code, if this
condition were false, then you can use
| | 01:03 | something called an else statement.
| | 01:04 | So right below that if statement, I'll
type else and then below that, I'll type
| | 01:08 | some opening quotes, curly braces and
then a trace statement inside of there
| | 01:13 | that says condition is false. Make
sure to close up the quotes and the
| | 01:18 | parenthesis, add a semicolon to end
the statement and then test the movie
| | 01:22 | again. So now I get condition is
false in the Output window. So if this
| | 01:26 | condition is not true, then the block
of code in the else statement will run.
| | 01:29 | We can actually setup a hierarchy
of conditions using these conditional
| | 01:33 | statements. There is another type of
conditional statement called an else if
| | 01:36 | statement. That runs if the first
condition is not true, then we can check to
| | 01:40 | see the second condition. So I'm going
to go right below that if statement, and
| | 01:44 | above the else statement and I'm
going to type else if (), and some curly
| | 01:49 | braces, and in the parenthesis I'm
going to write a statement that is true. So
| | 01:54 | I'm going to type if (10 > 1), then I'm
going to type trace(); and I'll pass in
| | 02:04 | a string that says else if
statement is true. Test the movie with
| | 02:11 | Command+Return on the Mac or Ctrl+
Enter on a PC; we get else if statement is true.
| | 02:15 | Now you may be wondering why we don't
see condition is false even though the if
| | 02:19 | statement is false. Because we have
here a hierarchy of conditions. So if
| | 02:24 | statement one is true, then this block
of code that I have highlighted will run
| | 02:28 | which says condition is true, and then
the block of code will stop processing
| | 02:32 | because the else and the if statements
are all connected to this if statement.
| | 02:37 | So that is evaluated as false, and then
the ActionScript processor will go down
| | 02:41 | to the else if statement and
see if that condition is true.
| | 02:44 | If it is, that block of code will run
and then the else statement will not be
| | 02:49 | processed. If this conditional
statement in the else if is false, so if I just
| | 02:54 | change that greater than sign to a less
than sign, then the else statement will
| | 02:57 | be reevaluated. So the else statement
is kind of like a default statement. So
| | 03:01 | if I test the movie again,
then I get condition is false.
| | 03:04 | Now, greater than and less than signs
aren't the only ActionScript operators
| | 03:08 | for comparing values. You can use an
equal sign after a greater than or less
| | 03:14 | than sign to mean greater than or
equal to or less than or equal to. You can
| | 03:18 | use two equal signs to mean is equal to.
You can use an exclamation point and
| | 03:24 | equal sign to mean is not equal to.
| | 03:27 | There are a few others, but those are
the most common ones. If you want to find
| | 03:30 | more information about conditional
statement operators, look at Conditional
| | 03:34 | Statement Operators in Flash Help.
So to review creating conditional
| | 03:38 | statements, you can create a basic if
statement by using the if keyword in
| | 03:42 | parenthesis, pass in the condition,
and then in curly braces, write the code
| | 03:46 | that you want to execute
if the condition is true.
| | 03:48 | You can use an else if statement
with an if statement to run if the if
| | 03:52 | statement is false, passing in a second
condition. The syntax for that is else
| | 03:58 | if. Make sure it's below an if
statement, and then in the parenthesis, the
| | 04:01 | second if statement or the else if
statement, and in the curly braces below
| | 04:06 | that, you put what you want to happen
if the else if statement is evaluated as true.
| | 04:10 | If nothing is evaluated as true, you
can use an else statement by using else
| | 04:14 | keyword, and then writing the code
that you want to execute in curly braces.
| | Collapse this transcript |
| Working with display objects| 00:00 | In this movie, we'll use ActionScript
to manipulate objects on the stage.
| | 00:05 | The first thing you need to do is give
your object an instance name. So it should
| | 00:08 | be an instance of either a movie clip
or a button symbol. Select it on the
| | 00:12 | stage and within the Property inspector,
click on the Instance Name field and name
| | 00:16 | your object my_btn.
| | 00:17 | If you don't have access to the
Exercise Files, this could be any movie clip or
| | 00:21 | button symbol. I'm going to press
Enter or Return to accept the change to its
| | 00:25 | instance name. Go to the first
keyframe in the Actions layer and open up
| | 00:28 | the Actions panel.
| | 00:29 | So let's say I wanted to move the button
when I clicked it. So the first thing
| | 00:32 | I'm going to do is add an
event listener to the button.
| | 00:34 | So my_btn.addEventListener and event is
going to be MouseEvent.CLICK. Now I'll run a
| | 00:43 | function called btnClick, capital C,
and then below this we'll define that
| | 00:48 | function. So function btnClick. In
the parenthesis it's going to receive an
| | 00:54 | event object with the data type of
MouseEvent, return data type is going to be
| | 00:58 | void, and in the curly braces
I'm going to manipulate the button.
| | 01:03 | To access an object's properties or
methods, you use dot syntax. So if I want
| | 01:08 | to manipulate its x or y position,
I would type my_btn.x. If I want to
| | 01:14 | manipulate the x position, for example,
equals, let's set it equal to 0, it
| | 01:18 | will be the left edge of the stage.
| | 01:20 | The coordinates for visual objects by
default are top-left based. So when we
| | 01:26 | move an object for manipulating, it
based on its top-left coordinate. So test
| | 01:31 | the movie right now and then you
notice the button is in the middle of the
| | 01:33 | screen, click on it and then see it
go to the left edge of the stage, nice.
| | 01:38 | Close the Preview window and change
x to y. Remember that in ActionScript
| | 01:42 | everything is based on the top-left. So
a y position of 0 means the top of the
| | 01:47 | stage, not the bottom like it does in
math class. So test the movie, click the
| | 01:52 | button, and it goes to
the top of the stage, nice.
| | 01:55 | Now, let's say we wanted to
manipulate other properties. You can actually
| | 02:01 | preview all the properties in that
code editing window. So you'll see
| | 02:05 | properties like alpha, which control
the transparency. So if I select alpha,
| | 02:10 | and let's say I set it equal to 0.5.
Then you will see it change alpha, when
| | 02:15 | you test the movie. So I'll click on
the button and it goes to 0.5 alpha.
| | 02:20 | The buttons are instances of the
simple button class. So what you would do is
| | 02:24 | go to Flash Help and look at the simple
button class to see its properties and
| | 02:28 | methods. You can see that you can
manipulate using dot syntax. If you are
| | 02:32 | working on the movie clip, you want to
look up the movie clip class in Flash Help.
| | 02:36 | Let's say you wanted to take this
object off the stage. So I'm going to delete
| | 02:40 | this line of code and I'm going to use
a method called removeChild. The button
| | 02:45 | is on the main Timeline. So if I
wanted to remove that button from the main
| | 02:51 | Timeline, I would have the main
Timeline call its method removeChild.
| | 02:55 | So one way to do that is to type this,
which refers to the main Timeline,
| | 02:58 | .removeChild, and in parenthesis
pass in the visual object that I want to
| | 03:06 | remove. So this has to be called from
the child's parent, my_btn being the
| | 03:10 | child and the main Timeline being its parent.
| | 03:13 | So when I pass in my_btn and I test
the movie, I click "click me!", it
| | 03:19 | disappears and now it's no longer there
at all. So removeChild takes an object
| | 03:25 | out of what's called a display list, so
it's no longer visual. This can make an
| | 03:29 | object eligible for garbage collection,
which means it can be deleted from memory.
| | 03:34 | In this example, however, the
object would not be eligible for garbage
| | 03:37 | collection because there is still an
event listener attached to the button. So
| | 03:41 | we would have to remove that event
listener, calling its removeEventListener
| | 03:44 | method to do so. I won't do that here though.
| | 03:46 | I am going to erase this and the dot,
because actually that code is kind of
| | 03:49 | redundant because when I just call
removeChild from the main Timeline, Flash
| | 03:53 | knows that I'm referring to the main
Timeline. So I don't have to use this
| | 03:57 | keyword at all actually. So if I
test the movie, I get the same result
| | 04:00 | when I click the button.
| | 04:02 | So basically, working with the
display objects you can use dot syntax.
| | 04:06 | Display objects are in some sort of display
object container like the main Timeline,
| | 04:12 | or a parent movie clip, or something
like that. If you want to remove an object
| | 04:16 | from a container, just call that
container's removeChild method and pass in the
| | 04:20 | object that you want to remove.
| | Collapse this transcript |
| Creating classes| 00:00 | Now look at creating ActionScript 3.0
classes. I'm going to start by going
| | 00:05 | over to SimpleClass.as. If you don't
have this file, then you can create a new
| | 00:09 | ActionScript class by going to File >
New, then you can choose ActionScript File.
| | 00:13 | Make sure to name it SimpleClass,
same case that I have here, .as and
| | 00:20 | save it in the same folder as your FLA file.
| | 00:22 | When you are declaring a class in
ActionScript 3.0, the first thing to do
| | 00:27 | is to declare a package. A package is
a folder that contains classes. So type
| | 00:31 | package and here we are not going to
put the class in any kind of folder or
| | 00:35 | anything. So I'm not going to type
anything else. I'm just going to type some
| | 00:37 | curly braces below the package.
So package and some curly braces.
| | 00:41 | The next step is to define the class.
When you define a class in ActionScript
| | 00:46 | 3.0, you are typically going to start
it out using the public keyword. So type
| | 00:50 | public class and then the name of the
class, which is going to be the same name
| | 00:56 | as your ActionScript file which in this
case is SimpleClass, and you don't type
| | 01:05 | 'as' here or anything, and
then some curly braces below that.
| | 01:09 | Now this word public may be kind of
foreign to you. We'll talk about it in a
| | 01:13 | more detail in another movie. So
inside of the package we declare the class,
| | 01:18 | and inside of the class we are going to
require a method called the constructor
| | 01:22 | method. In a class, functions are
called methods and variables are called
| | 01:27 | properties. So a method is just a
function that's inside of a class.
| | 01:31 | The constructor method here, I'm going
to declare as public as well. So type
| | 01:34 | the word public function and even
though we are using the word function, this
| | 01:40 | is officially a method. This is going
to be the constructor, so it's going to
| | 01:43 | have the same name as SimpleClass here.
| | 01:46 | The constructor method is actually
just a method that runs when the class is
| | 01:50 | initialized. So SimpleClass, some
parenthesis, some curly braces below that.
| | 01:57 | Inside of here, I'm going to write a
simple trace statement. So trace, and some
| | 02:00 | parenthesis, and some quotes inside of
there. I'm going to type "SimpleClass is running".
| | 02:08 | I'll save the file, so File > Save.
Then in order to test it out I'm going to
| | 02:14 | jump over to my FLA file. So let's go
over there, select the first keyframe in
| | 02:18 | the Actions layer and open up the
Actions panel. I'm going to create an
| | 02:22 | instance of my SimpleClass.
| | 02:25 | So to create an instance of the class,
you are going to hold it inside of a
| | 02:28 | variable. So create a variable called
simple. I'm going to data type it to
| | 02:32 | SimpleClass. Notice it doesn't show up
in code hinting because Flash doesn't
| | 02:36 | know SimpleClass is not built into Flash.
| | 02:39 | I am going to set that equal to a new
instance of SimpleClass, and you do that
| | 02:42 | by using the New keyword, and type in a
space, the name of the class, which is
| | 02:47 | SimpleClass. This is going to run the
constructor method. So some parenthesis
| | 02:52 | and a semicolon. So for running the
constructor method right here, we'll use
| | 02:56 | the new keyword.
| | 02:57 | So when I test the movie, I'm going
to see "SimpleClass is running" in the
| | 03:03 | Output window. So I'm going to
close the Actions panel. Go back to
| | 03:07 | SimpleClass.as. We'll review what it
takes to create an ActionScript 3.0 class.
| | 03:12 | All classes need to be in a package.
So use the keyword package and then type
| | 03:17 | some curly braces. All the class codes
are going to be in those curly braces.
| | 03:21 | We declare the class typically using
the public keyword and then class, the
| | 03:25 | name of the class, which is going to
correspond to the name of the ActionScript
| | 03:29 | file, which by convention
always starts with a capital letter.
| | 03:33 | Inside of the class, you declare the
constructor method; which is a function
| | 03:37 | that's going to run whenever a new
instance of the class is created. Here, all
| | 03:41 | we are doing is running a trace
statement. Note that the constructor method has
| | 03:45 | the same name as the class. Also note
that it doesn't have any return data. So
| | 03:51 | when you have a constructor in
ActionScript 3.0, don't type a colon after the
| | 03:54 | parenthesis because
constructors do not return data.
| | 03:57 | Go to FLA file, and to the code on the
Timeline, and to create a new instance
| | 04:01 | of the class, assuming the class is in
the same folder as your FLA file, create
| | 04:05 | a variable to hold it. This one is
called simple; the data type is the same
| | 04:09 | name as the class. Set that equal to a
new instance of the class, so I use the
| | 04:13 | new keyword, space, the class name and
some parenthesis, and this will run the
| | 04:18 | class's constructor method.
| | Collapse this transcript |
| Defining properties and methods| 00:00 | In this movie, we'll look at
defining properties and methods for our
| | 00:04 | SimpleClass. I'm going to jump over to
SimpleClass2.as, which is actually just
| | 00:09 | a skeleton of the class. So I have the
name SimpleClass2 and the constructor is
| | 00:13 | called SimpleClass2 as well.
| | 00:16 | So let's look at properties first. So
I'm going to create a new public property
| | 00:21 | by typing the word public var. So
remember, properties are just variables that
| | 00:27 | are attached to a class. Now let's
give this a value of simpleProp, data type
| | 00:34 | this to a String, and we
won't give it a value yet.
| | 00:37 | Now here the public keyword just means
we can access this variable or property,
| | 00:42 | rather, from the main Timeline in our
FLA file. Again, we'll talk more about
| | 00:47 | these access modifiers in another movie.
| | 00:49 | So let's give that a value inside of
the constructor method. Anything that's a
| | 00:53 | property should receive its value
somewhere besides above the constructor. This
| | 00:59 | is because any objects that you are
referring to inside of your code don't
| | 01:03 | exist until the constructor runs. So
above the constructor is the best place to
| | 01:08 | declare properties but giving them a
value should happen somewhere else in your
| | 01:13 | code, inside of the
constructor or another method.
| | 01:16 | So let's give the value of simpleProp,
a string value, and let's call this
| | 01:22 | "value of simple prop". Now my code is
kind of expanding a little bit and so I
| | 01:28 | have to scroll this here. So I'm going
to turn on Word Wrap and I'm going to do
| | 01:32 | that by going to View > Word Wrap. So
it is a little easier to read. I'm also
| | 01:36 | going to minimize the Properties panel
and the Library by clicking the minimize
| | 01:39 | button. I'm going to minimize
the Timeline by double-clicking it.
| | 01:42 | Now I have a little bit more space to
write my code. So I'm going to test this
| | 01:45 | out by saving the file first.
So File > Save. I'll go over to
| | 01:50 | Properties_Methods.fla, open back up
the Timeline, go to the Actions panel, and
| | 01:55 | see I'm creating a new instance of SimpleClass2.
| | 01:57 | If I want to access the value of
simpleProp, I can trace simple.simpleProp. I
| | 02:06 | test the movie, then I see the value
of simpleProp in the Output window. So I
| | 02:10 | can access my custom properties
through dot syntax. So I have the instance
| | 02:15 | name, which is simple, dot, and the
property name, which is simpleProp. That
| | 02:18 | gives me the value of simpleProp,
which I set in the class file.
| | 02:22 | Now let's take a look at creating and
using methods in a custom class. So below
| | 02:29 | the constructor, I'm going to create
another public method. Again, public means
| | 02:33 | we can access it from the main
Timeline. So, public function. Remember, a
| | 02:38 | method is just a function that's
attached to a class. And we'll call this
| | 02:42 | simpleMethod. No parameters, return
data type is void, type some curly braces.
| | 02:50 | In the curly braces, I'm just going to
put a trace statement. I'm just going to
| | 02:53 | type "simpleMethod running!" I'll
save the file, so File > Save. Then I run
| | 03:02 | that method from the main Timeline.
Go back to the main FLA file, into the
| | 03:06 | Timeline, open the Actions panel,
delete the trace statement, and then run the
| | 03:10 | method by typing the instance name,
which is simple, dot(.), and then the
| | 03:13 | method name, which is simpleMethod.
| | 03:16 | You run a method just like a function
and that is with parenthesis. So type the
| | 03:20 | parenthesis and a semicolon, and
test the movie and you will see that
| | 03:23 | simpleMethod is running.
| | 03:25 | So to recap, you can create properties
in a class by using the var keyword. For
| | 03:30 | now, we are just declaring them as
public, which means we can access them on
| | 03:33 | the main Timeline. So I type public var
and create the variable as usual. Give
| | 03:38 | the variable a value, either inside of
the constructor or some other method.
| | 03:42 | Then to create a custom method, we are
using the public keyword here. Then you
| | 03:46 | just create a function from there as
usual. You can access the properties and
| | 03:50 | run methods on the main Timeline by
creating an instance to hold the object
| | 03:56 | which is here as a new instance of
SimpleClass2. Then you can use dot syntax to
| | 04:00 | access its properties to run its methods.
| | Collapse this transcript |
| Working with packages| 00:00 | In this movie we are going to talk
about something called packages. Packages
| | 00:05 | are a way to keep class files organized.
If you don't have the exercise files,
| | 00:10 | you can just use any class file
for this exercise and that will work.
| | 00:13 | So what I'm going to do is remove this
SimpleClass3 file, I'm going to put it
| | 00:18 | somewhere else. So let's just put it
on the Desktop for a temporary place and
| | 00:22 | then I'm going to go in a folder called com.
| | 00:24 | Now if you don't have the exercise
files, make this com folder in the same
| | 00:28 | folder as the FLA file that we will be
using in this exercise. So I have the
| | 00:32 | com folder and then inside of there I
have the lynda folder. I'm just going to
| | 00:36 | drop SimpleClass3 into that folder.
| | 00:39 | As I said earlier, packages keep your
classes organized. Rather than having a
| | 00:45 | bunch of classes floating around, you
can organize your classes into different
| | 00:49 | folders. These folders can be
based on the purposes of the classes.
| | 00:54 | So you can have an interactive
package with all classes that are related to
| | 00:58 | interactivity. One of the most common
ways to organize classes is this com
| | 01:03 | folder structure that I'm showing here.
So here I have a folder called com and
| | 01:08 | that's the outermost folder. This
com lynda structure is what's called a
| | 01:12 | Reverse Domain Structure.
| | 01:14 | So if I'm working on a project for the
lynda.com website then I would have the
| | 01:20 | com folder as the outermost folder and
then the lynda folder is the next folder
| | 01:25 | down. And if I was working on
another site like my site, which is
| | 01:28 | chadandtoddcast.com, I have a folder
called chadandtoddcast in here that had
| | 01:32 | the class files related to that site in there.
| | 01:35 | In this way you can keep all of your
files organized by which site they are
| | 01:41 | related to. And if somebody else sends
you files that they are working on in
| | 01:45 | their site, it would easily integrate
with your system. So let's open up this
| | 01:49 | class file here and that's going to
come up in Flash and I have an FLA file as
| | 01:53 | well as this class file.
| | 01:55 | When your class file is buried folders
down from your FLA file, you are going
| | 02:01 | to need to declare that package that
it's in. So I'm going to start right after
| | 02:06 | the word package, we are going to type
a space and then I'm going to type the
| | 02:09 | outermost folder and this is going to
be the same as that path from the FLA file.
| | 02:14 | So the package is com.lynda. So instead
of using forward slashes like you do on
| | 02:19 | your operating system, in ActionScript
code you are going to use dots, when you
| | 02:24 | are declaring a package. So this is
part of the com.lynda package. So I'll go
| | 02:27 | to File > Save and save the file and
move over to packages.fla. I'll select the
| | 02:32 | first keyframe of the Actions
layer and open up the Actions panel.
| | 02:35 | Now the SimpleClass3 is no longer in
the same folder as FLA file. So I'm
| | 02:40 | actually going to have to import it.
So above all the rest of my code, I'm
| | 02:44 | going to type the word import com.lynda.
SimpleClass3 and that imports that file
| | 02:53 | from that package. If I test the
movie you will see that the code works.
| | 02:58 | So by organizing your files into
packages rather than just having them all in
| | 03:03 | one folder on the computer, you
could organize files related to certain
| | 03:07 | websites or related to the
functionality of the classes and keep in mind that
| | 03:12 | you can have multiple classes, as many
as you want even in the same package and
| | 03:17 | again all you have to do is put it
inside of the folder and you need to declare
| | 03:20 | the package when you declare your class,
so package package name and then you need to
| | 03:26 | import the class using an import
statement when you are using that class.
| | 03:30 | And so you import it using the package name,
then a dot and then the class name.
| | Collapse this transcript |
| Understanding and using class paths| 00:01 | When you are working with classes in
ActionScript 3.0, you are going to build
| | 00:04 | class libraries. In other words, you
don't want to have to create the same class
| | 00:09 | a whole bunch of times or go looking
for it in some random folder every time
| | 00:13 | you want to use a class.
| | 00:15 | For that reason the best practice is
to put all of your classes in a central
| | 00:19 | location on your computer. In this
movie we are going to look at how to tell
| | 00:23 | Flash to look for a particular folder
to find classes. That way you don't have
| | 00:27 | to keep all of your classes in the
some folder as your FLA file when you are
| | 00:31 | working on the project.
| | 00:32 | The folder that I have my classes in is
in the Chapter 1 folder and it's called
| | 00:38 | class_path. In there I have that com
folder structure and there is one class
| | 00:42 | called SimpleClass4 in there. Let's
just imagine that I have a whole bunch of
| | 00:46 | classes in here and this is where I
happen to keep all of the classes that
| | 00:50 | I work on my computer
in this class_path folder.
| | 00:53 | Now just as a note, obviously you
don't want to keep all of your classes on
| | 00:58 | something like the Desktop. You want
to keep your classes somewhere that's
| | 01:02 | not going to messed with too often
like maybe your Documents folder or something.
| | 01:06 | For me I have a folder called
as3classes in my Documents folder and that's where
| | 01:10 | I keep all my ActionScript classes.
So you may want to look into doing
| | 01:14 | something like that if you are going to
build a lot of ActionScript classes. So,
| | 01:17 | here I have my classpath set up and
now let's tell Flash that the classes
| | 01:20 | we are going to be
working with are in that folder.
| | 01:23 | You do that by setting up something
called the classpath. A classpath can be
| | 01:27 | either set for an FLA file or for Flash
itself. Let's look at setting it up for
| | 01:34 | an FLA file first. I'm going to go to
File > Publish Settings and in my Publish
| | 01:39 | Settings I'm going to go to Flash
and I'm going to go to ActionScript 3.0 Settings.
| | 01:43 | So I'll click that button.
| | 01:44 | And here you are going to see Source Path
area and this is where you can set a classpath.
| | 01:50 | So I'm going to click the
button there to add a new path--
| | 01:53 | that's the plus button-- and then I'm
going to click Browse to Path, which is the
| | 01:56 | folder icon. I'm going to select the
class_path folder and then click Choose.
| | 02:01 | So I'll do that and then click OK and
click OK to close the Publish window
| | 02:05 | and accept the changes.
| | 02:06 | I will go to my code and I'll import
that SimpleClass4 class. So that's going
| | 02:12 | to be com.lynda.SimpleClass4. This is
the one that's inside of the class_path folder.
| | 02:19 | So if this works then everything
is great. So I'll create a variable
| | 02:22 | called simple, data type it to
SimpleClass4, set it equal to a new instance of
| | 02:28 | SimpleClass4 and then run the
simpleMethod. So simple.simpleMethod.
| | 02:37 | So some parenthesis and a semicolon,
test the movie and I have
| | 02:40 | 'simpleMethod is running!' So I have
successfully connected to that classpath.
| | 02:45 | But let's say we didn't want to set it
just for this FLA file. So if I create
| | 02:51 | another FLA file, it won't automatically
be linked to SimpleClass4. So maybe what
| | 02:57 | you want to do, and what I do
personally, is tell Flash to look for all
| | 03:00 | my classes in my main class_path folder.
So instead of having to define it for
| | 03:05 | individual FLA files, I define it
for every file I create in Flash.
| | 03:09 | Let's look at how to do that. First thing
I'm going to do is go to the Publish Settings,
| | 03:13 | I'm going to undo what I did
with the classpath. So I'm going to go
| | 03:16 | to ActionScript 3.0 Settings. So I'll
select the classpath and click the minus
| | 03:21 | button to remove the classpath,
click OK and now if I test the movie,
| | 03:26 | my code should give me errors.
| | 03:27 | So that's working just like it should,
and now I'm going to set up
| | 03:30 | the classpath for Flash. I'm going to
go to Flash > Preferences or Edit >
| | 03:34 | Preferences on the PC, I'm going
to go ActionScript and then go to
| | 03:38 | ActionScript 3.0 Settings towards
the bottom and then I'm going to add a
| | 03:42 | source path. So find the source path,
click the plus button, click the folder icon,
| | 03:46 | select the class_path folder,
click Choose, click OK and then click OK to
| | 03:53 | close Preferences, accepting the changes,
test the movie and simpleMethod is running.
| | 03:57 | So now whenever I create an FLA file
in Flash it's automatically going to be
| | 04:02 | linked to that classpath. And again,
if you do this and you actually have a
| | 04:06 | class library somewhere on your hard
drive on your computer you can store all of
| | 04:11 | your classes there, keep them organized
and you never have to copy class files into
| | 04:16 | the same folder as your FLA files.
| | Collapse this transcript |
|
|
2. Advanced ActionScript TechniquesWorking with TextFields| 00:00 | If you are new to ActionScript 3.0 or
at least relatively new, there are a few
| | 00:05 | key techniques that you need to know to
get around. Throughout this chapter
| | 00:09 | we will be looking at the main techniques
that you will need to use to get around in Flash.
| | 00:14 | We will start by talking about working
with text fields. On the stage here I
| | 00:18 | have a text field and if I select it
you will see that it's a dynamic text field,
| | 00:22 | so if you don't have the exercise files
you can create the dynamic text field
| | 00:26 | and then click in the Instance Name field
and give the text field an instance name.
| | 00:29 | I am going to call this my_txt. It is
not a necessary suffix; it just gives us
| | 00:35 | code hinting in the Actions panel.
Let me select the first keyframe of the
| | 00:39 | Actions layer and go ahead and open
up the Actions panel and in the Actions panel
| | 00:43 | I can put text in the
text field using dot syntax.
| | 00:47 | So I'll reference the text field
through its instance name. So my_txt and then
| | 00:51 | I can modify its text using its text
property. So I type a dot and then when
| | 00:56 | you type a t, you are going to see
tabEnabled selected in the Code Hinting window.
| | 01:01 | When you type an e after that
you will see text highlighted.
| | 01:04 | So when text is highlighted you can
press Enter or Return on your keyboard,
| | 01:08 | Flash will auto complete that for you.
| | 01:10 | The text property defines what text is
there in the text field. Its value is a
| | 01:14 | string. So if I want to put some text
in there, I just set its value equal to a
| | 01:18 | string and then in the quotes I'll type
the string that I want to appear in the
| | 01:22 | text field, something like this text
is written using ActionScript. Test the
| | 01:31 | movie and there is the
text is the text field. Nice.
| | 01:34 | You could also access the text in the
text field using its text property. So if
| | 01:40 | I go to the next line and I trace the
value of my_txt.text, I'll see the string
| | 01:47 | value that I put inside of the text
field on line 1 in my code. Test the movie
| | 01:51 | and there it is in the text
field and in the Output window.
| | 01:54 | Let's go back to our ActionScript and
that's the main thing you need to know
| | 01:57 | when working with the text field. You
can modify its X and Y position or Alpha
| | 02:01 | just like you could modify any other
visual object, but mainly you are going to
| | 02:05 | be putting text in the text field and
you do that through its text property.
| | Collapse this transcript |
| Loading external text| 00:00 | Often when you are working with text
fields in Flash, you want to use text
| | 00:04 | from an external text file or an
external XML file. In this movie, we will look
| | 00:08 | at loading text in from an external
file and putting that text in a text field
| | 00:12 | on the stage.
| | 00:13 | On the stage here, I have a text field.
It's a dynamic text field. It has an
| | 00:17 | instance name of my_txt. In the same
folder as this FLA file, I have a plain
| | 00:23 | text file called External.txt. We
will load that text into this text field.
| | 00:28 | Let's select the first keyframe of the
Actions layer and open up the Actions
| | 00:32 | panel, and there are a few steps that
you need to know when loading an external file.
| | 00:36 | So we are going to create some
variables here. So let's create a variable
| | 00:38 | called req, data type it to URLRequest.
URL is all caps and Request is a capital R.
| | 00:46 | URLRequest class represents the URL
of a file. So whenever you are going to
| | 00:52 | work with an external file in
ActionScript 3.0, you are going to use a
| | 00:55 | URLRequest to represent that file. So
we are going to set this equal to a new
| | 00:59 | URLRequest and I'm going to type some
parentheses, and into the Constructor I'm
| | 01:05 | going to pass in a string path to the file.
| | 01:08 | My file is called external.txt. Now if
you don't have the Exercise Files, just
| | 01:14 | create a plain text file in a text
editor, save it as external.txt in the same
| | 01:20 | folder as your FLA file. So our req
variable represents external.txt as a file.
| | 01:27 | Let's go down to the next line.
| | 01:29 | Now we need to create an instance of
the class that loads external text data.
| | 01:34 | That class is called the URLLoader
class. So I'm creating a variable called
| | 01:38 | loader, I'm going to data type it to
URLLoader. I'll set it equal to a new
| | 01:43 | instance of the URLLoader class.
| | 01:45 | I am going to go down a few lines and
the next thing to do is add the event
| | 01:51 | listener to the loader to listen for
when the file has finished loading. That
| | 01:55 | event is called Event.COMPLETE. So
type loader.addEventListener, same process
| | 02:02 | that we used for listening for a mouse
event, and the event type is going to be
| | 02:05 | Event. That's the event class. It
handles general events, like when a file
| | 02:09 | finishes loading and so on.
.COMPLETE in all caps.
| | 02:14 | For more information about the events
in the Event class, you can highlight
| | 02:18 | Event and then press F1 on your
keyboard to open Flash help. After the event
| | 02:22 | type, I'm going to type a comma and
a space. Then I'm going to define a
| | 02:26 | function that's going to run when a
file has done loading. I'll call this
| | 02:30 | textLoaded, close out the parentheses,
and a semicolon. Then we will define the
| | 02:34 | textLoaded function in just a minute.
| | 02:36 | Go down to the next line and then have
the loader load the external file.
| | 02:41 | Note that I'm adding the event listener
on the line before loading the file.
| | 02:46 | This is an important tip here. You always
want to add the event listener to listen for
| | 02:50 | the COMPLETE event before you load the
file. So this sequence is very important.
| | 02:56 | Sometimes if you try to load the file
first, the data will be loaded before the
| | 03:01 | event listener is added causing your
code not to work properly. So always add
| | 03:05 | the event listener first. Type loader.
load. In the parentheses we need to pass
| | 03:10 | in a URLRequest to the file that's
going to load. That's going to be req.
| | 03:13 | Now I'm going to define the textLoaded
function. Remember that's what going to
| | 03:19 | run when the file has done loading. So
I'm going to define that in between my
| | 03:22 | variable section and then my code that
runs immediately here. So here I'm going
| | 03:26 | to create a function. So type function
and a space and the name, which is going
| | 03:30 | to be textLoaded. Remember that it
needs to receive an event object. So I'm
| | 03:34 | going to call that event, all
lowercase, and the data type is going to be
| | 03:37 | Event, with an uppercase E. That
refers to the event class that we used, when
| | 03:42 | telling Flash which event we are listening for.
| | 03:45 | The return data type is going to be void,
type some curly braces, and there you
| | 03:50 | have it. First thing I'm going to do
is use a trace statement. Type trace and
| | 03:56 | some parentheses and a semicolon. You
can access the loaded data through the
| | 04:00 | URLLoader's data property. So I'm going
to type loader.data inside of the trace
| | 04:05 | statement. This is going to return a
string of data that is contained inside of
| | 04:08 | the external text file that we are loading.
| | 04:10 | So test the movie and you should see
the text file's information in the Output
| | 04:15 | window. So mine says, "here's some
text from an external file." Nice! If you
| | 04:19 | don't see anything in the Output window,
make sure that external.txt contains some text.
| | 04:24 | So if we wanted to use that data, all
we have to do is put the data in the text
| | 04:28 | field. So if I delete this trace
statement and then I type my_txt.txt, so we
| | 04:34 | are using its text property. We set
it equal to a string and conveniently
| | 04:39 | loader.data is a string, and now that's
going to display the external data in the
| | 04:44 | text field on the stage. So test the movie
and there is the text from the external file.
| | 04:49 | So to load an external file, you need
a URLRequest to the file, you need an
| | 04:53 | instance of the URLLoader class. This
is for loading all text files. You need
| | 04:58 | to add an event listener to listen for
the Event.COMPLETE event, which executes
| | 05:02 | when the file has done loading. Load
the file. Make sure the loading happens
| | 05:06 | after the event listener is added. Then
when you handle the complete event,
| | 05:11 | you can access the data of the
URLLoader through its data property.
| | Collapse this transcript |
| Understanding XML in ActionScript 3.0| 00:01 | ActionScript 3.0 uses something called
ECMAScript for XML or E4X to work with
| | 00:08 | XML data. If you are not familiar with
XML data right now, I recommend the Working
| | 00:13 | with XML Data in ActionScript 3.0 title
in the lynda.com Online Training Library.
| | 00:19 | So for this exercise, I'm going to
assume that you are familiar with XML data.
| | 00:23 | E4X essentially means that you can
manipulate XML data using dot syntax.
| | 00:30 | So XML data is now a native data format.
| | 00:34 | On the stage here I have a text field
and it has an instance name of my_txt.
| | 00:39 | Let's go to the Actions panel by
selecting the first keyframe of the Actions
| | 00:42 | layer, opening it up using Option+F9
on the Mac or F9 on the PC. We will look
| | 00:47 | at how XML and E4X syntax
works in ActionScript 3.0.
| | 00:51 | So I'm going to hold an XML object
in a variable. I'm going to call this
| | 00:55 | variable, gallery, and data type it to
XML. I'm going to set it equal to an XML
| | 01:01 | object. So I'm going to use shorthand
notation and create an XML element called
| | 01:09 | gallery. Now you don't have to have the
same name between your XML instance in
| | 01:13 | ActionScript and your XML code, but I'm
doing that so that it's really easy to
| | 01:17 | understand what we are doing with the data.
| | 01:20 | So let's go down a few lines and let's
say we want to trace this value and have
| | 01:24 | it show up in Output window. If you
were to just trace gallery, then nothing
| | 01:28 | would show up in the Output window
because gallery doesn't have any child data.
| | 01:32 | So what we would do, if we want to
see the actual XML data, is use the XML
| | 01:37 | instances toXMLString property. So
gallery.toXMLString and this will show all
| | 01:43 | of the XML data as a string.
Let's see what that looks like.
| | 01:47 | Test the movie and look in the Output
window. So there is gallery just like we
| | 01:51 | created it on line 1. If you want to
create child elements, you can use dot
| | 01:56 | syntax. So let's say I wanted to make
an image in my gallery data. So let's say
| | 02:01 | this is going to represent
a photo slideshow gallery.
| | 02:04 | So on line 2, I'm going to use dot
syntax to create an element called image
| | 02:09 | inside of the gallery. Type gallery.
image = and then let's say I just wanted to
| | 02:16 | put the file name inside of that image
element. Let's say the image is called
| | 02:20 | image01.jpg. So I'm going to type
a string out and I'm going to type
| | 02:24 | image01.jpg. Now I'll test
the movie and see the result.
| | 02:31 | There is the XML data, there is
gallery has a child element called image and
| | 02:36 | that image element has a value of
image01.jpg. Let's say we wanted to access
| | 02:42 | that element. Let's go back to our
ActionScript and instead of tracing
| | 02:46 | gallery.toXMLString, I'll trace gallery.
image. Test the movie and you will see
| | 02:52 | that message in the Output window.
| | 02:53 | Let's say instead of having the
image file name, the value of the image
| | 02:59 | element, let's say we wanted to make it
the value of an attribute inside of the
| | 03:03 | image. Let's say the attribute was
called file. To access or to create XML
| | 03:10 | attributes using E4X, we use the @
symbol. So the syntax is image.@file. So
| | 03:18 | it's gallery.image.@file, @ symbol is
setting for attribute, equals image01.jpg.
| | 03:26 | Now let's trace gallery.toXMLString.
Test the movie again. Then we see that
| | 03:32 | image now has an attribute of file
with the value that we specified. Back to
| | 03:38 | our ActionScript code.
| | 03:40 | Now let's say we wanted to give the
image a child element, something like
| | 03:43 | title, that would represent a title
for the image. I'm going to delete the
| | 03:46 | trace statement here. I'll type
gallery.image.title. This is going to be a
| | 03:51 | child element of image and I'll set
that equal to a string and the string will be
| | 03:56 | "Title for image 1".
| | 03:58 | Now let's say we wanted to put that
data in a text field. So I'll put that in
| | 04:03 | the text field on the stage. So it's
my_txt.text = gallery.image.title.
| | 04:13 | Test the movie; there is the
data inside of the text field.
| | 04:16 | So using E4X syntax in ActionScript 3.0,
it's very easy to work with XML data
| | 04:23 | because you can just use dot syntax. class,
So here we have an instance of the XML
| | 04:28 | we set it equal to a raw XML
element, which is gallery here, then you
| | 04:33 | could set elements using dot syntax and
you can work with attributes using the @ symbol.
| | Collapse this transcript |
| Loading an external XML file| 00:00 | In this movie, we will look at loading
XML data from an external XML file.
| | 00:06 | In the same folder as my FLA file, I have
a file called data.xml. I'm going to tab
| | 00:11 | over to TextEdit to show you what the
XML file looks like. It's very simple.
| | 00:15 | It has an outer element called gallery,
which is also called the root element.
| | 00:19 | Then it has repeating element called image.
Each image has an attribute called file,
| | 00:24 | and an element called title.
| | 00:27 | Let's look at loading this data into
Flash. I'll tab over to Flash. On the
| | 00:31 | stage I have a dynamic text field
with an instance name of my_txt. I have
| | 00:35 | already written some code in the
Actions panel here because loading an external
| | 00:39 | XML file is exactly the
same as loading a text file.
| | 00:42 | I am going to open up the Actions panel
with the first keyframe on the Actions
| | 00:45 | layer selected and take look at the
code I have here. I have a URLRequest to
| | 00:49 | the file data.xml, a URLLoader,
adding the event listener to listen for the
| | 00:55 | complete event, loading the file,
and I have an event handler function to
| | 00:59 | respond when the file has done loading.
So you can see here it's exactly the
| | 01:03 | same as loading an external text file.
| | 01:06 | So below my variables I'm going to
create a third variable called gallery.
| | 01:10 | This is going to be our XML data, so I'm
going to data type it to XML. I'm not going
| | 01:14 | to give it a value yet; I'm just
going to declare it there. I'll give it a
| | 01:17 | value inside of the xmlLoaded function.
| | 01:20 | So I'll set gallery equal to a new
instance of the XML class. Inside of the
| | 01:25 | Constructor I'm going to pass in loader.
data. That's going to be that string of
| | 01:29 | data of the file that's loaded. So
that's going to be made into a new instance
| | 01:34 | of the XML class. Now I'll be able
to access that data using E4X syntax.
| | 01:39 | So let's go to the next line and put
that XML data inside of the text field on
| | 01:43 | the stage. So it's going to be
my_txt.text = gallery.toXMLString.
| | 01:51 | Now I'll test the movie and see the
text appearing in the text field, nice! So
| | 02:01 | when you are loading external XML data,
you do it just like you are loading any
| | 02:06 | other file. So you will need a
URLRequest, a URLLoader, add the event listener
| | 02:10 | listening for the COMPLETE event,
load the file, and you can create a new
| | 02:13 | instance of the XML class and pass in
the data string to the constructor through the
| | 02:18 | URLLoader's data property.
| | Collapse this transcript |
| Using XML data| 00:00 | Now we will look at using external XML
data that contains repeating elements.
| | 00:06 | On the stage I have a text field
called my_txt. I'll put some text in that field.
| | 00:11 | Let's go to the first keyframe of
the Actions layer and open up the Actions panel.
| | 00:14 | This code is loading an external XML
file called data.xml. Once the file is loaded,
| | 00:20 | it's held in an XML instance
called gallery. I'm going to erase the
| | 00:24 | next line of code. That's line 8
in my code and then I'm going to use
| | 00:27 | a trace statement to trace the value of
gallery.image. Image is the repeating element
| | 00:33 | inside of the gallery.
| | 00:34 | So I'm going to type trace and in
parentheses, gallery.image. Gallery
| | 00:42 | represents the root element and image
represents the repeating element. So we
| | 00:47 | have three images inside of the gallery.
Let's see what we get in the Output window.
| | 00:51 | Test the movie and you will see
that you get every image element.
| | 00:57 | So we have all three of them.
| | 00:59 | So we need a way to access individual
elements. Repeating XML elements are what's
| | 01:05 | called an XML list. Think of an
XML list as an array of XML elements.
| | 01:12 | You can access those elements using array
access notation, meaning you can use
| | 01:18 | square brackets and index
numbers to reference the data.
| | 01:21 | So instead of tracing gallery.image,
I'll trace gallery.image, index 0. So 0 in
| | 01:27 | square brackets. Now I'll test the
movie and I'll only have the data that I want.
| | 01:34 | Back to the code. So gallery.image
is an XML list because it's a
| | 01:38 | repeating element, but gallery.image 0
is just an XML object because
| | 01:44 | it represents the first
XML element in the XML list.
| | 01:48 | So from there we can access its
attributes and child elements using dot syntax.
| | 01:54 | So if I wanted to get its file
information, I can get it here. Type a dot and
| | 01:58 | it has an attribute called file so I'll
type attribute file, so @ symbol then file,
| | 02:03 | and then test the movie and
there it is. So let's say I wanted to put
| | 02:07 | the title for the image in
the textbox on the stage.
| | 02:09 | I will delete the trace statement.
I'll set the value of my_txt.text =
| | 02:16 | gallery.image, index 0, .title.
Now I'll test the movie and see the title
| | 02:24 | in the text field. So there is the
title for image 1. If I wanted to get a
| | 02:28 | title for another image, I can just
change that index number. So I'll change 0
| | 02:31 | to 1 here, test the movie again.
There is the title for image 2.
| | 02:35 | If I change that 1 to 2, then
we will see the title for image 3.
| | 02:40 | So when you are working with
repeating elements in XML, remember that any
| | 02:43 | repeating element is handled as an XML
list, which is essentially an array of
| | 02:49 | XML elements. You can access
individual elements in the XML list using array
| | 02:55 | access notation. You can check out
Flash Help for more information about the
| | 02:59 | properties and methods of
XML and XML list classes.
| | Collapse this transcript |
| Loading external images| 00:00 | Let's take a look at using ActionScript
3.0 to load external images into Flash.
| | 00:06 | I have an empty stage here and a
layer called Actions. I'm going to select
| | 00:09 | first keyframe of the Actions layer and
open up the Actions panel. Loading an
| | 00:13 | external image file, and when I say
image I'm talking about a JPEG, PNG, GIF, or
| | 00:19 | SWF file, it's all the same process.
It's pretty similar to loading a text file.
| | 00:23 | There is one key difference.
I'll show you that real quick.
| | 00:27 | Create a variable called req. That's going
to be a URLRequest and this is just like when
| | 00:32 | we made a request to the file when we loaded
an external XML file or an external text file.
| | 00:37 | We'll set that equal to a new
URLRequest and my file that I'm going to load is
| | 00:43 | in the same folder as my FLA file and
it's called images_01.jpg. So I'm going
| | 00:50 | to type that here. So of course if you
don't have Exercise Files, you will need
| | 00:56 | some image inside of the same folder
as your FLA file. It doesn't matter what
| | 01:01 | the image is called, it doesn't matter
what file format it is, JPEG, GIF, PNG, SWF,
| | 01:04 | it will all work. So I'm going to
go to the next line and here's what's different.
| | 01:09 | I'm going to create a variable
called loader and instead of using
| | 01:13 | the URLLoader class, which is used to
load text, I'm going to data type it an
| | 01:17 | instance of the Loader class which
is used to load images and SWF files.
| | 01:22 | So I set that equal to a new instance
to the Loader class. A Loader is actually
| | 01:27 | a visual class. So think of it as kind
of like a movie clip where I create a new
| | 01:32 | instance of it and it's kind of
floating in space and then I need to put it
| | 01:35 | inside of some Timeline. So if I want
to put it on the main Timeline, I can use
| | 01:40 | a method called addChild. That puts a
child element inside of a visual container.
| | 01:46 | So the main Timeline is essentially a
movie clip. The MovieClip class has a
| | 01:51 | method called addChild and that takes
a visual object and puts it inside of
| | 01:56 | that movie clip. So when I call the
addChild method I can pass in the loader
| | 02:01 | instance and that puts the loader on stage.
Now we haven't actually loaded the file;
| | 02:06 | we will do that on the next line.
But just to remember that whenever you
| | 02:09 | are loading an external image file,
you're going to need to call addChild
| | 02:12 | to put that element in some sort of stage.
| | 02:14 | So just creating a new instance of the
Loader class doesn't do that. Let's go
| | 02:18 | right below the addChild line of code
and then what I'm going to do is load the file.
| | 02:21 | So type loader.load. I'm going
to pass in the request and
| | 02:25 | that's really all you have to
do to load an external image file.
| | 02:28 | So I'm going to test the movie and
there is the image on the stage. Pretty simple.
| | 02:32 | Now let's say I didn't want to
put the loader on the stage until
| | 02:36 | the file was done loading.
| | 02:37 | I am going to delete the addChild line
of code and above the loader.load line of code,
| | 02:42 | you are going to add an event listener.
| | 02:44 | Now here's the thing that's really
unintuitive about working with event
| | 02:48 | listeners and the Loader class. Instead
of adding the event listener to the loader,
| | 02:52 | you add the event listener
to the loader's contentLoader info property.
| | 02:57 | So type loader.contentLoaderInfo and
that is an instance of the LoaderInfo class.
| | 03:06 | Again, you can look that up using Flash
Help and this is a quick shortcut-
| | 03:09 | you can just highlight LoaderInfo here and
press F1 on the keyboard and Flash Help
| | 03:14 | would open up and take you to the
LoaderInfo page. So the LoaderInfo class
| | 03:18 | contains information about the
loaded files, including how many bytes are
| | 03:22 | loaded when the file is loading
and the file size and all that stuff.
| | 03:26 | So you're going to add the event
listener to this contentLoaderInfo property.
| | 03:29 | So type .addEventListener
and then in the parenthesis
| | 03:34 | we're going to listen
for the event, Event.COMPLETE.
| | 03:38 | And then I'll run a function called
imageLoaded which we will define in a minute.
| | 03:42 | We'll define that right above the
addEventListener line of code. So function
| | 03:46 | imageLoaded(). This is going to receive
an event object with the data type of Event.
| | 03:52 | It's not going to have return data
type. So it's going to be void and then
| | 03:56 | inside of the curly braces here I'm
just going to addChild on the main Timeline
| | 03:59 | and add the loader as a child
of the main Timeline. I'll test the movie
| | 04:04 | and I get the same result.
| | 04:09 | While it's not that exciting that I
get the same result, this is a much better
| | 04:12 | practice way to handle loaded files.
When you are loading just about any type of file,
| | 04:17 | you don't want to do anything
with the loaded content until the file is
| | 04:22 | done loading. So it's the best
practice to listen for the COMPLETE event
| | 04:26 | through the contentLoaderInfo
property of the Loader class and do anything
| | 04:30 | you want to do once the file is loaded
inside of your event handler function.
| | 04:35 | So again, the process to load an
external image file is to create a request to
| | 04:39 | the file, create an instance of the
Loader class, add the event listener to
| | 04:43 | listen for Event.COMPLETE on the
contentLoaderInfo property, load the file
| | 04:49 | using the loader's load method and
then do whatever you want to do once the
| | 04:53 | file is loaded inside of your event
handler function. And always remember to
| | 04:57 | put the loader object inside of another
object on stage using its addChild method.
| | Collapse this transcript |
| Working with bitmaps and bitmap data| 00:01 | One of the common tasks that you'll
want to do in working with ActionScript 3.0
| | 00:05 | is copy an element. Here, I'll show
you how to use bitmap graphics to copy
| | 00:11 | a movie clip symbol. On the stage
have a very simple movie clip called the
| | 00:15 | circle_mc. It's just a black circle.
Let's go to our code, select the first
| | 00:20 | keyframe in the Actions layer and go
ahead and open up the Actions panel.
| | 00:23 | When you are working with bitmap images
in order to create a bitmap copy of an
| | 00:28 | object, you need two things. One is an
instance of the bitmap data class and
| | 00:32 | two is an instance of the bitmap class.
The bitmap class is used to display
| | 00:37 | bitmap data. So let's
create a bitmap data instance.
| | 00:42 | So I created a variable bd, short for
bitmap data. Data type it to BitmapData
| | 00:48 | and we'll set it equal to a new
instance of the BitmapData class. The
| | 00:54 | BitmapData constructor has two required
parameters: width and height. These are
| | 00:59 | read only property. So once you set
them you, can't modify them. For the width
| | 01:03 | I'm going to type circle_mc.width
and for the height, circle_mc.height.
| | 01:10 | So I have that there. And the next
thing we're going to do is create a variable
| | 01:15 | to hold the bitmap image. So let's
called this bmp data type it to your Bitmap.
| | 01:20 | Remember the Bitmap class is used to
display a bitmap data and the bitmap data
| | 01:25 | just holds the pixel information. So
we'll set that equal to a new instance of
| | 01:28 | the Bitmap class and in the Bitmap
constructor you can pass in a BitmapData
| | 01:33 | instance to connect to the Bitmap.
| | 01:35 | So I'll do that here. Just pass in
bd and then I'm going to go down a few
| | 01:39 | lines. Then I'm going to copy the
pixel information inside of the movie clip
| | 01:43 | circle_mc into our bitmap data object.
| | 01:47 | You can do that using the bitmap
data's draw method. So it's bd.draw and then
| | 01:53 | here we have to pass in any object
that's drawable which is essentially any
| | 01:57 | visual object. So circle_mc. We'll pass
that in there and then all I need to do
| | 02:05 | is put the bitmap on the stage. Just
like the loader class we looked at earlier
| | 02:10 | in this chapter, the Bitmap class is a
visual class. So in order to see it, it
| | 02:15 | needs to be placed inside of some other
visual container. So we'll use the main
| | 02:20 | Timeline here and call its
addChild method pass in bmp.
| | 02:25 | Test the movie and there is the bitmap
copy of the circle. It has the default X
| | 02:29 | and Y position of 0 and 0. Now how can
you tell that it's actually a bitmap,
| | 02:34 | because they look exactly the same
here? If you zoom in, I'm going to press
| | 02:37 | Command+Plus on the Mac or Ctrl+Plus
on the PC a few times, you will begin to
| | 02:41 | see the pixelation of the bitmap image.
| | 02:43 | Now if I click-and-drag to pan to
the right a little bit, you'll see the
| | 02:47 | pixelation of the bitmap on the left
versus the smooth vector lines of the
| | 02:51 | vector image on the right.
| | 02:52 | So to copy a movie clip symbol into
a bitmap, create an instance of the
| | 02:58 | BitmapData class. In the constructor,
pass in the width and height of the
| | 03:02 | object that you want to copy, create
new instance of the Bitmap class, passing
| | 03:05 | in the BitmapData object you
created into the constructor, call the
| | 03:09 | BitmapData's draw method, passing in
the movie clip that you want to copy, then
| | 03:14 | add the bitmap object to the stage.
| | 03:17 | That's all there is to it. For more
information about the Bitmap and BitmapData
| | 03:20 | classes, you can look up
BitmapData and Bitmap in Flash Help.
| | Collapse this transcript |
| Using TweenLite for ActionScript animation| 00:00 | When you are using ActionScript 3.0
to create animations, you have two basic options.
| | 00:06 | You can write all the animation
code by hand using built-in Flash events
| | 00:10 | or you can use ActionScript tweens.
ActionScript tweens are available in
| | 00:17 | a variety of formats. Adobe has a
tweening engine built into Flash that you can use.
| | 00:22 | You can use this through the tween class.
| | 00:25 | There are also third parties who have
created tweening engines that are faster
| | 00:29 | and easier to use than the built-in
Adobe tweens. For that reason I prefer to
| | 00:34 | use the third party tweens. My
favorite third party ActionScript tween is
| | 00:38 | called TweenLite. You can download
TweenLite for free at TweenLite.com.
| | 00:47 | When you go there you'll be directed
to the TweenLite for ActionScript 3.0 page.
| | 00:51 | Just click the Download Now link.
Make sure to read over the license
| | 00:56 | agreement and if you agree, click the
I Agree button to download TweenLite. Now
| | 01:02 | I'm going to choose to save the file
and I'll click OK. I'll just save it to
| | 01:06 | my Desktop for now and click Save.
Once the file is done being downloaded,
| | 01:12 | I'll minimize Firefox and minimize Flash
and go to my Desktop. So here I have the
| | 01:18 | TweenLiteAS3.zip package. I'll double
-click this archive to get a folder.
| | 01:23 | Inside of the TweenLiteAS3 folder,
there is a folder called gs. This is the
| | 01:27 | folder that you want to drop into the
same folder as the FLA file you are going
| | 01:31 | to be working with in this exercise. So
I'm going to open up the Exercise Files folder.
| | 01:35 | Go to the Chapter 2 folder and
drop the gs folder into the Chapter 2 folder.
| | 01:41 | I'll close the Finder windows and go
to Flash. There is great documentation
| | 01:47 | for TweenLite in the TweenLite
ActionScript file. If you go to File > Open,
| | 01:52 | open up the gs folder and open up
TweenLite, you can see great documentation
| | 01:58 | written in the comments.
| | 02:00 | For now, I'm not going to talk about
those but you can find that information
| | 02:04 | right there if you would like to. I'm
going to return to my FLA file and on the
| | 02:08 | stage here I have a movie clip called
image_mc. I'm going to use TweenLite to
| | 02:13 | fade in this image. Let's go to the
first keyframe in the Actions layer and
| | 02:16 | open up the Actions panel. TweenLite is
in the gs package. So I'm going to type
| | 02:22 | import gs.TweenLite. Go down a few
lines and then we'll use TweenLite.
| | 02:30 | TweenLite can be used in one line of
code. To use TweenLite, type TweenLite,
| | 02:37 | dot, and there are two main methods
you are going to use: from and to.
| | 02:42 | TweenLite.from is what we will look at
first. TweenLite.from tweens an object's
| | 02:48 | properties based on the values you pass
into this method. Let's take a look at
| | 02:53 | how that works. After from we'll type
some parenthesis and a semicolon and
| | 02:58 | inside of the parenthesis I'm going to
pass in the three parameters that are
| | 03:01 | required to use TweenLite.
| | 03:02 | The first one is the object it's going
to tween. The object is called image_mc.
| | 03:07 | Second is the duration of the tween in
seconds. Let's say I wanted it to last 2 seconds.
| | 03:13 | The third property is an object,
which I'll create using shorthand
| | 03:17 | object notation. I'll do that using curly braces.
So open curly brace and a closed curly brace.
| | 03:23 | If you are unfamiliar with object
notation, basically we are creating an instance
| | 03:28 | of an object that has essentially
no properties and methods.
| | 03:32 | Here's how we define them. We simply name
the property that we want to animate.
| | 03:36 | So the property is alpha. So I'm going to
type alpha, all lowercase, and then you give
| | 03:41 | a value in shorthand object notation
using a colon. So type a colon. So this is
| | 03:46 | instead of an equal sign, then we're going
to put the starting value for the animation.
| | 03:51 | So I want it to fade from zero to one.
So I'm going to pass in zero right here.
| | 03:55 | I'll now test the movie to preview
the animation. And there it is.
| | 04:03 | That's how easy it is to create fading using
ActionScript 3.0 with TweenLite. Now let's look at
| | 04:08 | one more method and that's TweenLite.to.
TweenLite.to animates an object starting
| | 04:14 | with its current property values and
ending with the values that you pass in.
| | 04:18 | So I'm going to close the Actions panel,
select the movie clip on the stage and
| | 04:24 | use the Color Effect part of the
Properties panel to set its alpha to zero.
| | 04:29 | I'll drag that alpha slider to zero,
return to the Actions panel, then I'm going
| | 04:33 | to use TweenLite.to to change its alpha
to one. Let's change TweenLite.from to
| | 04:38 | TweenLite.to, then change alpha zero
to alpha one. Test the movie and you get
| | 04:44 | the same result. So TweenLite.from
allows you to pass in starting values for
| | 04:49 | the tween and TweenLite.to, you pass
in ending values. The great thing about
| | 04:54 | TweenLite is that it's very easy to
animate multiple property values. Let's say
| | 04:58 | I also wanted to animate the object's
x position. Let's do that like this.
| | 05:03 | We close the Actions panel, select
the object on the stage, notice its x
| | 05:06 | position is 50 and I'm going
to slide the object off the stage.
| | 05:11 | Go to the Actions panel, open up the Actions
panel and then I'll pass in another property
| | 05:16 | into the object that I created in the
TweenLite line of code. So alpha is going
| | 05:20 | to tween to one and then I'll have x
tween to 50. So we can pass in as many
| | 05:24 | properties as we want here and
they will all animate at the same time.
| | 05:27 | Command+Return on the Mac to test,
Ctrl+Enter on the PC and the object slides
| | 05:32 | and fades in at the same time.
| | 05:34 | So you can see here TweenLite is an
excellent animation engine for ActionScript 3.0.
| | 05:40 | To use it, make sure the gs folder
is in the same folder as your FLA file,
| | 05:44 | or that it's in your class path, import
gs.TweenLite, then use TweenLite.to
| | 05:49 | to animate an object to certain values
or use TweenLite.from to animate from other values.
| | Collapse this transcript |
|
|
3. Object-Oriented Programming FundamentalsUnderstanding object-oriented programming| 00:00 | In this chapter we are going to be
working with object-oriented programming concepts.
| | 00:05 | Object-oriented programming involves
working with classes and objects.
| | 00:11 | If you are new to ActionScript 3.0 and
programming altogether you may be wondering,
| | 00:15 | why you would want to build classes to
work with your code, when you can just
| | 00:20 | put simple code on the Timeline that
usually requires less code? That's a great question.
| | 00:26 | The answer is this. When you create
very simple applications, then you can't
| | 00:31 | really tell the benefit from going from
Timeline code to a class, but take this
| | 00:36 | application for example and this is
just an example. It's not even a working
| | 00:40 | application; it's just a lot
of code so that you can see.
| | 00:43 | If I scroll down, there is a ton of
code here and it's really hard to tell what
| | 00:49 | code is related to what. This is
code to power a slideshow. So without
| | 00:55 | object-oriented programming you can
have gobs of unrelated code on the main
| | 01:00 | Timeline that are very hard to read.
And more importantly, they are hard to
| | 01:05 | update or change if you ever
have a problem in your code.
| | 01:09 | With object-oriented programming you
can have each class or each part of your
| | 01:14 | application be in a different class and
have a different assignment. So in our
| | 01:19 | slideshow anything to do with the XML
data that's loaded or controlling that
| | 01:25 | data would be in a certain class.
| | 01:27 | Displaying the visual content would be
controlled by a certain class and all
| | 01:32 | the button functionality would be
controlled in yet a third class. That way if
| | 01:37 | you ever want to make changes to the
application, you just ask yourself what
| | 01:41 | the change is and what it's related to,
and if it's related to the data of the
| | 01:45 | application, then you would change that
particular class. So it's very easy to
| | 01:50 | modify your code.
| | 01:52 | So throughout this chapter we're
going to be talking about the basics of
| | 01:56 | object-oriented programming and how to
build simple object-oriented programming
| | 02:00 | applications using
ActionScript 3.0 and Flash CS4.
| | Collapse this transcript |
| Understanding encapsulation| 00:00 | One of the key concepts in object-
oriented programming is something called
| | 00:04 | encapsulation.
| | 00:06 | Encapsulation involves keeping certain
parts of a class behind the scenes and
| | 00:11 | exposing other parts. In other words,
encapsulation involves exposing only what
| | 00:18 | is necessary to use the class.
| | 00:21 | Now to understand that concept I want
you to think of a TV, and I have this
| | 00:25 | image here to get your imagination
going. When you are using a TV you can
| | 00:29 | control the TV using simple buttons.
In order to get a TV to work and benefit
| | 00:35 | from its technology, you don't have to
know too much about the inner-workings
| | 00:39 | or behind-the-scenes stuff in order
to understand how to work a TV and to
| | 00:44 | benefit from a TV.
| | 00:45 | Now to relate that back to code, you
may have classes where you want to hide
| | 00:50 | certain functionality and expose other
functionality. You can have methods and
| | 00:55 | properties working behind the scenes in
a class just like you would in a TV or
| | 01:00 | another complicated electronic device.
| | 01:03 | The person using the class does not
have to know every single thing about how
| | 01:07 | the class is built in order to benefit
from it. So the main thing I want you to
| | 01:12 | understand about encapsulation is that
when you use classes in object-oriented
| | 01:16 | programming, you want to keep some
things behind the scenes and some things
| | 01:20 | exposed so they can easily be used,
just like the inner-workings of a TV are
| | 01:26 | behind the scenes, and its buttons,
and remote control are easy to use and
| | 01:31 | accessible by virtually anyone.
| | Collapse this transcript |
| Understanding inheritance| 00:00 | Another important object-oriented
concept is something called inheritance.
| | 00:05 | In this movie we'll talk about what
inheritance is and show some examples of it in code.
| | 00:10 | On the stage here I have a movie clip
called tv_mc. If I go to the Actions
| | 00:16 | panel by selecting the first keyframe
of the Actions layer and opening up the
| | 00:20 | Actions panel, I can modify
Properties of the movie clip.
| | 00:24 | For example if I type tv_mc.x = 0, and
I test the movie, the TV will be hugging
| | 00:32 | the left edge of the stage. If I
wanted to change its alpha to 0.5, and test
| | 00:39 | the movie and the TV will be 50%
alpha. So there is a working movie clip,
| | 00:44 | pretty simple and I'll delete the code
that I just created. I'm going to close
| | 00:49 | the Actions panel and I'm going to
jump over to ActionScript class TV.as.
| | 00:54 | Later in this movie we'll link this
ActionScript class to the TV movie clip.
| | 00:59 | I am going to expand my code running
area by minimizing the Timeline in the
| | 01:03 | Properties panel. So here let's create
a basic class. So package, some curly
| | 01:10 | braces, public class TV, remember it
matches the name of the as file. And we're
| | 01:17 | going to do something different here
and we're going to take the MovieClip
| | 01:20 | class and we're going to do something
called Extended. What that does is it
| | 01:24 | adds functionality to the MovieClip
class. So this TV class is basically going
| | 01:29 | to be an enhanced
version of the MovieClip class.
| | 01:33 | So TV type a space then use the word
extends MovieClip. Some curly braces under
| | 01:41 | there and since we are using the
MovieClip class, we're going to need to import
| | 01:45 | that class. So I'm going to do that
right above the declaration of the class.
| | 01:49 | So I'm going to type import flash. This
is the package that the MovieClip class
| | 01:55 | is in, flash.display.MovieClip. Inside
of the class declaration I'm going to
| | 02:02 | create a constructor method. So
public function TV(), some curly braces and
| | 02:11 | then what I'm going to do is create a method.
| | 02:14 | I am going to do that right below the
Constructor. So I'm going to create a
| | 02:19 | custom method, so public function and
then I'm going to call this getChannel.
| | 02:23 | This really isn't going to do anything
super-special here. It's going to have
| | 02:29 | it returned void and some curly braces,
and here I'm just going to trace a
| | 02:34 | string here and it's just going to
say tv is on channel 3. It's going to be
| | 02:43 | very, very simple. This is just to
demonstrate the principle of inheritance.
| | 02:49 | Let's go to File > Save, and then I'm
going to go back to Inheritance.fla. Now
| | 02:54 | here I'm going to expand the
Properties panel and the Timeline, and then I'm
| | 02:58 | going to link this movie clip, the TV,
to that class. So I'm going to go to the
| | 03:02 | Library, I'm going to right-click or
Ctrl+Click the TV movie clip and choose
| | 03:06 | Properties. Then I'm going to
click the Advanced button in the Symbol
| | 03:11 | Properties window. You want the Symbol
Properties window to be big like this
| | 03:15 | with lots of options.
| | 03:16 | Now to link a movie clip to a class
check the Export for ActionScript box, and
| | 03:22 | then for the class put in the name of
the class, TV. We've defined it here,
| | 03:27 | it's not in any package, it's in the
same folder as the fls file. It doesn't
| | 03:30 | have to be. It just needs to be in
your class path. Click OK, which will link
| | 03:35 | the TV movie clip to the TV class that
I created. It's going to be a movie clip
| | 03:41 | with the additional method getChannel.
| | 03:44 | So let's go to the Timeline in the
Inheritance.fla file and select the first
| | 03:49 | keyframe in the Actions layer and open
up the Actions panel. The instance name
| | 03:53 | is still tv_mc, so type tv_mc.
getChannel and some parentheses and semicolon,
| | 04:03 | and test the movie and you'll see that
the getChannel method is running. TV is
| | 04:06 | on channel 3. Great!
| | 04:08 | Now let's take a look at how
inheritance works. Remember when I mentioned that
| | 04:13 | the TV is basically an extension of
the movie clip class, so it has all the
| | 04:18 | properties and methods of a movie clip.
If I go to the next line of code I can
| | 04:22 | adjust TV's properties just like I'd
adjust the properties of any movie clip.
| | 04:26 | So I can adjust its alpha to 0.5 and
there is its alpha = 0.5, I could adjust
| | 04:34 | its X position and use any of its other
properties and methods. The TV class is
| | 04:41 | inheriting from the MovieClip class or
extending the MovieClip class inheriting
| | 04:46 | all of its properties and methods.
| | 04:48 | For another example of this, go down
in the next line in your code and type
| | 04:52 | MovieClip, it should turn blue if you
type it correctly. With MovieClip typed
| | 04:59 | out like this, highlight it, and then
press F1 on your keyboard. This should
| | 05:05 | launch your default web browser and
take you to Flash Help. In Flash Help
| | 05:10 | you'll see the MovieClip class. Here
you can read about all the properties and
| | 05:15 | methods of the MovieClip class.
| | 05:16 | I am scrolling down to find the
Public Properties section. The properties
| | 05:22 | listed here are new for the MovieClip
class. It's kind of like our getChannel
| | 05:26 | method that's unique to the TV class.
Well, these properties are unique to the
| | 05:30 | MovieClip class. If you want to see
all of the properties of the MovieClip
| | 05:34 | class, you can click Show
Inherited Public Properties.
| | 05:38 | The movie clip class actually extends
another class called Sprite. So movie
| | 05:43 | clip and class inherits from
Sprite, which inherits from
| | 05:46 | DisplayObjectContainer, which inherits
from InteractiveObject, which inherits
| | 05:50 | from DisplayObject, which inherits
from EventDispatcher, which inherits from Object.
| | 05:57 | So basically the movie clip class has
all the properties and methods of all of
| | 06:01 | its ancestor classes. So it inherits
all the object properties and methods,
| | 06:05 | event dispatcher properties and
methods, and so on down the chain.
| | 06:09 | So if you click Show Inherited Public Properties,
you can see all of the properties the MovieClip has.
| | 06:15 | On the right side of the menu here you
can see where the property is inherited
| | 06:21 | from. So Accessibility properties is
inherited from display Object, Alpha is
| | 06:25 | inherited from DisplayObject, and so on.
| | 06:29 | So inheritance is just a principle
that you use in your custom classes,
| | 06:32 | it's used in virtually all of the built-in
ActionScript classes. I'll return to my
| | 06:37 | FLA file and delete the reference that
says MovieClip, because if we had that
| | 06:42 | there and test the movie, we'll get an error.
| | 06:43 | We'll recap what inheritance is. When
you extend an existing class you inherit
| | 06:50 | that class's properties and methods
like we did for the MovieClip class here.
| | 06:54 | You can create inheritance when you
define your class by using the extends
| | 06:59 | keyword. So you define your class with
the class name and after that you type
| | 07:03 | extends, and then the class that you
want to extend. Your class will then
| | 07:07 | inherit all of the properties and
methods of the class it's extending.
| | Collapse this transcript |
| Understanding polymorphism| 00:00 | In this movie we will look at yet
another object-oriented programming term.
| | 00:05 | This one is called Polymorphism.
Polymorphism is actually a lot less
| | 00:10 | complicated than it sounds, but you can
sound really cool if you know what it means.
| | 00:14 | On the stage here I have a movie clip
called tv_mc that if you look in the
| | 00:19 | Library is connected to TV class. You
could see that under the Linkage column
| | 00:25 | in the Library. The TV class is just a
simple class; it basically extends the
| | 00:29 | movie clip adding one
extra method called getChannel.
| | 00:32 | Let's go to the first keyframe of the
Actions layer and open up the Actions panel.
| | 00:37 | If we trace tv_mc, let's see
what we get in the Output window.
| | 00:44 | object TV. In other words tv_mc is an
instance of the TV class. It inherits from the
| | 00:52 | movie clip class, but is not a movie clip.
| | 00:55 | Polymorphism is basically the
concept where an object that inherits from
| | 01:01 | another class can be used in place of
an instance from that class. That may
| | 01:06 | sound complicated, but it's actually
pretty simple. Let's say I made a function
| | 01:10 | a here that required a movie clip. So
we create a function called isMovieClip.
| | 01:15 | You'll receive one property called mc
with the data type of MovieClip, return
| | 01:22 | void. Let's put a simple trace
statement with some quotes in there and I want
| | 01:28 | to say that this is a movie clip.
| | 01:32 | So the theory is if we're passing a
movie clip then the function will work, if
| | 01:36 | not, we'll get an error. To test that
out I'll draw a simple button symbol on
| | 01:40 | the stage and we'll pass that in and
see if that is acceptable. On this stage
| | 01:45 | I'm just going to make a simple
rectangle. So a little black rectangle there.
| | 01:49 | I'll select it and press F8 on the
keyboard to convert it to a button symbol.
| | 01:53 | So for the Type, I'll choose Button and
for the Name, I'll choose MyButton, and
| | 02:00 | then in the Properties panel I'll give
it an instance name of my_btn. And also
| | 02:03 | we accidentally drew some artwork on
the Actions layer so I'll just cut and
| | 02:09 | paste it onto the art layer. I'm
pasting with Shift+Command+V on the Mac.
| | 02:12 | That's the keyboard
shortcut for Edit > Paste in Place.
| | 02:16 | Let's go to the first keyframe of the
Actions layer and open up the Actions
| | 02:19 | panel and run isMovieClip, passing
in my_btn. See what we get? An error.
| | 02:30 | Implicit coercion of a value of type
simple button to an unrelated type movie clip.
| | 02:35 | Flash is saying, you can't tell
me that this is a movie clip because it's
| | 02:39 | a button. So any button symbols are
actually an instance of the simple button
| | 02:42 | class and if you look up the simple
button class, which we will do right here.
| | 02:46 | So we'll type SimpleButton, capital S,
capital B, highlight and then use the
| | 02:52 | keyboard shortcut F1 to open that
up in Flash help. You can see that it
| | 02:56 | inherits from InteractiveObject,
DisplayObject, EventDispatcher and then
| | 03:00 | eventually Object.
| | 03:01 | So there is no movie clip in there.
Because of that we can't treat my_btn as a
| | 03:09 | movie clip. But if I pass in tv_mc,
even though tv_mc is an instance of the TV
| | 03:17 | class, because it inherits from the
movie clip class Flash will tell us that
| | 03:21 | this is a movie clip.
| | 03:23 | So Polymorphism is simply the idea
that something that inherits from it's
| | 03:28 | particular class can be treated as
that data type. So anything that inherits
| | 03:35 | from movie clip is an acceptable
data type to pass in as a value to this
| | 03:39 | function. Doesn't matter how many
descendants down the chain that class object is
| | 03:44 | just as long as it inherits
from movie clip at some point in its
| | 03:49 | hierarchy of inheritance,
then it's acceptable data.
| | Collapse this transcript |
| Understanding access modifiers| 00:00 | To control encapsulation
ActionScript 3.0 has something called access
| | 00:05 | modifiers. This allows you to define
what properties and methods are available
| | 00:11 | behind the scenes or exposed to everyone.
| | 00:14 | The first access modifier is something
that we have used a lot so far. It's the
| | 00:18 | Public access modifier. Properties and
methods and classes for that matter that
| | 00:23 | are declared as public are accessible
everywhere. That means public properties
| | 00:29 | and methods can be accessed on an
object from anywhere. It doesn't have to be
| | 00:33 | inside of the same class where it was
defined. It could be in any other class
| | 00:38 | or in the main Timeline of an FLA file
or the Timeline of any movie clip even
| | 00:42 | in an FLA file.
| | 00:44 | The next access modifier is the Private
access modifier. Private properties and
| | 00:50 | methods are only accessible within the
class in which they are defined. So if I
| | 00:56 | had a class called TV and I had a
private property called Channel, the Channel
| | 01:02 | property would only be accessible
inside of the TV class and if I try to access
| | 01:07 | that property anywhere outside of that
class I would get an error. This keeps
| | 01:12 | properties and methods behind the scenes.
| | 01:15 | Sometimes you will have properties
and methods that you will want to keep
| | 01:19 | private for the most part, but
available to descendant classes. That's where
| | 01:24 | you would use the Protected access modifier.
| | 01:28 | Protected properties and methods are
only usable in sub-classes. A sub-class is
| | 01:34 | a class that extends another class.
So the TV class that we created that
| | 01:38 | extended the movie clip class would be
considered as sub-class of the movie clip class.
| | 01:44 | Last we have Internal access
modifiers. The internal keyword identifies
| | 01:50 | properties and methods that are only
accessible within the same package where
| | 01:55 | they are defined. So if I had a TV
class and a remote class the remote class
| | 02:01 | would be able to work with the TV's
channel if the TV's channel were an
| | 02:05 | internal property.
| | 02:07 | If I wanted to manipulate that on the
main Timeline I wouldn't be able to do that.
| | 02:11 | So using access modifiers, you have
great control over the encapsulation
| | 02:17 | of your classes.
| | Collapse this transcript |
| Using access modifiers| 00:00 | In this movie, we will get practice
using access modifiers. We are just going
| | 00:05 | to use the public and private access
modifiers, but you can use the other
| | 00:09 | access modifiers in exactly the same way.
On the stage here, I have a TV.
| | 00:14 | Its name is tv_mc and in the Library you
can see that it's connected to the TV class.
| | 00:22 | The TV class is pretty simple. It just
has a public method called getChannel.
| | 00:27 | Because the method is public it can be
used anywhere a TV exists. If I go to my
| | 00:34 | FLA file, open up the Timeline, select
the first keyframe of the Actions layer
| | 00:39 | and open up the Actions panel. I can
run tv_mc's getChannel method without
| | 00:46 | getting an error.
| | 00:51 | So it's accessible on the main Timeline
or anywhere there is an instance of the
| | 00:55 | TV class. Let's say I made the method
private instead of public, going to go to
| | 01:03 | the TV class and change the public
method to a private method just by replacing
| | 01:08 | the word public with private.
| | 01:11 | Before I test this, we are going to
make sure to save the file because it won't
| | 01:13 | work unless I save it. I'll go back to
the FLA and test the movie. And here is
| | 01:19 | the area that I get. Attempted access
of inaccessible method getChannel through
| | 01:25 | a reference with static type TV.
Flash tells us that the method is not
| | 01:30 | accessible, so we get an error.
| | 01:33 | Let's see what happens when we create a
private property and try to access it.
| | 01:39 | Right above the constructor method, so
right above that constructor a private
| | 01:44 | property and I'm going to call it
channel. This is data type it to a positive
| | 01:50 | integer and will set it equal to 3.
| | 01:52 | Now save the file again, so File >
Save, jump back over to the FLA and then
| | 01:57 | what I'm going to do is trace tv_mc.
channel to see if we can access that
| | 02:04 | private property from the main Timeline.
Test the movie and you get the same error.
| | 02:09 | Flash tells you that you are trying
to access an inaccessible property.
| | 02:14 | So to sum up, to use access modifiers,
type the modifier name, public, private,
| | 02:20 | internal or protected, right before
the method or property declaration when
| | 02:25 | you are creating it.
| | 02:26 | Using access modifiers, you can more
fully control encapsulation in your
| | 02:31 | ActionScript 3.0 classes.
| | Collapse this transcript |
| Working with getter and setter methods| 00:01 | It's considered a best practice to
keep all class properties private. You can
| | 00:07 | access those properties through
public methods. Let's take a look here.
| | 00:13 | I'm go to TV.as and work with the
private property channel. I'm going to expand
| | 00:18 | my working area here, and I'm going
to make this method getChannel public.
| | 00:24 | I nstead of returning void, I'm going
to return a positive integer, the same
| | 00:29 | data type as the channel. All this
method is going to do is return the channel.
| | 00:37 | So we can access this private property
through a public method. Save the file,
| | 00:44 | so File > Save, back to the FLA file,
go to the code in the Timeline and
| | 00:51 | instead of tracing tv_mc.channel, we'll
trace tv_mc.getChannel, and now we get three.
| | 01:00 | So we've protected the private property
and we can expose it using the public method.
| | 01:06 | Now, of course, we can also perform
other operations inside of this method.
| | 01:12 | If you wanted to manipulate the channel
in some way or notify some other elements
| | 01:17 | of this class in another way, we can
do that. I'm not going to do it here,
| | 01:20 | but just know that it's possible to do that,
and that's one advantage of using a method
| | 01:25 | over a property value.
| | 01:27 | Now let's say we wanted to have a
way to change the value of the channel
| | 01:30 | without messing with the private
property. To do that, I can create another
| | 01:35 | public method, just type public
function right under the getChannel method,
| | 01:39 | we'll call this setChannel. We'll use
this to change the channel. This is going
| | 01:45 | to return void and inside of the curly braces,
I'm just going to set the value of channel.
| | 01:50 | In order to do that we'll need to pass
in a value into the setChannel method.
| | 01:56 | Just call this c for short. It's going
to be a positive integer and inside of
| | 02:01 | the method, we'll set channel = c.
Save the file, lets go to File > Save,
| | 02:08 | return to the FLA. Return to your
ActionScript, and above the trace statement
| | 02:13 | call tv_mc.setChannel.
| | 02:18 | Pass that in a different positive
number to change the channel. Let's say
| | 02:22 | I wanted to change the channel to 100.
Pass in that value, make sure to close up
| | 02:27 | the parenthesis, type a semicolon and
then we'll trace the value of the channel
| | 02:30 | using getChannel.
| | 02:32 | So now we can adjust the value of
the channel even though it's a private
| | 02:36 | property using these public methods.
Some developers find this a little
| | 02:42 | awkward, setChannel and getChannel, and
prefer to use property values instead.
| | 02:50 | Using special get and set methods
you can do that. I'm going to close the
| | 02:55 | Actions panel, return to TV.as. Now I'm
going to modify these functions just a
| | 03:01 | little bit, I mean, get some more
working area here, scroll up to the top,
| | 03:05 | I'm going to change the name of channel to
_channel. This is not something you have
| | 03:10 | to do for a private property, but
it's something that I do and many other
| | 03:14 | developers do to let themselves know
that a property is private, so _channel.
| | 03:20 | So I'm going to have to return
_channel and the getChannel method.
| | 03:24 | Now I'm going to have to set _channel = c
in the setChannel method. Now let's create
| | 03:30 | the get and set methods. A get
method is basically the same thing as out
| | 03:34 | getChannel method here. The syntax is
just a little bit different. I'm going to
| | 03:38 | delete the C for Channel and then type
a space. So it's public function get,
| | 03:43 | notice that get turned blue. It's
because it's a keyword in Flash.
| | 03:47 | Then I'm going to type a lowercase c.
So channel is now a method, it's a get
| | 03:52 | method. A get method and a set method,
which we'll look out later, can be used
| | 03:56 | just like a property. We'll see that in
action when we go back to our FLA file.
| | 04:00 | So I'm going to do the same thing for
the set method and delete the C, type a
| | 04:04 | space, and then a lowercase c.
| | 04:07 | A get method needs to return the
private property that's requested in the get
| | 04:12 | method and the set method simply sets
the value past in as a parameter. So now
| | 04:18 | we have a public property called
channel that we've created using a method.
| | 04:24 | Let's save the file, so File > Save,
jump back over to Get_Set.fla. Go to your
| | 04:29 | ActionScript code in the Timeline. And
now instead of the awkwardness of this
| | 04:33 | code running in a method to set the
channel, we can type tv_mc.channel, which
| | 04:40 | is going to call that setChannel
method. Because we're setting a value for
| | 04:44 | channel, it's going to pass in the
value that I passed in here. I'm going to
| | 04:47 | pass in 25.
| | 04:49 | Now when we want to get the TV's
channel we can just access it through its
| | 04:52 | channel property, which is actually a
get method, so we're setting the value of
| | 04:57 | the property. It's using the set
method and we're retrieving the value of the
| | 05:02 | property it's using the get method.
| | 05:04 | I test the movie now and don't get any
errors. That's a look at how to use get
| | 05:08 | and set methods. To recap you just type
public methods, so public function get
| | 05:15 | for the get method. This allows you to
access property, and by the way if you
| | 05:19 | only have a get method and no set method,
then the properties what's called read-only
| | 05:23 | so you can only access
the value and cannot change it.
| | 05:26 | Name the method the same name as the
property that you want to make public.
| | 05:29 | Make sure to return the same data type
as the public property and then for the
| | 05:34 | set method, public function set, the
name of the method which is going to be
| | 05:39 | the name of the property you're going to
access. Make sure it receives the right
| | 05:42 | type of data as a parameter, returns
void and sets the value of the private property.
| | Collapse this transcript |
| Understanding static properties and methods| 00:00 | In this movie we're going to look at
something called static properties and
| | 00:04 | static methods. Static properties and
methods are attached to a class rather
| | 00:10 | than attached to an instance of a
class. To understand the need for static
| | 00:14 | properties and methods, take a look at
the TV on the stage here. It's at the
| | 00:18 | top left of the stage. What if I wanted
to align it to the center of the stage?
| | 00:23 | Now I could easily write that code in
the Timeline and I don't necessarily need
| | 00:27 | to create a custom class for it,
except for that's kind of a common task in
| | 00:31 | ActionScript is aligning the object to
the center of the stage. So you want to
| | 00:35 | write code that's reusable but at
the same time you don't want to have to
| | 00:39 | create a new instance of a class every
time you want to align an object to
| | 00:42 | the center of the stage. This is where
static properties and methods come into play.
| | 00:47 | What we're going to do is create a
static method that will align this object to
| | 00:51 | the center of the stage. Before we do
that, we'll take a look at how static
| | 00:54 | properties work. I'm going to jump
over to my Utils.as file and above the
| | 00:59 | constructor here, I'm going to create a
public static property var. That's the
| | 01:06 | syntax for creating a static property
and I'm going to call this staticProp.
| | 01:12 | I'm going to data type it to a string
and I'm going to give it a value of static.
| | 01:18 | When you're defining a static
property you want to give it a value when you
| | 01:23 | define it. The reason for that is when
you're working with static properties
| | 01:27 | and methods; you may never actually
create an instance of the class that you're
| | 01:31 | working with. There may not be another
opportunity to define the value of that property.
| | 01:36 | So let's save this file, so File > Save,
jump over to our FLA file and we'll
| | 01:42 | trace Utils.staticProp. So I'm going to
trace Utils.staticProp. Notice I never
| | 01:50 | created an instance of the Utils
class. I can just access that property
| | 01:54 | directly through the Utils class, test
the movie, and there is the value of the
| | 02:00 | property in the Output window.
| | 02:01 | So now that we've looked at how to
create static property, let's create a
| | 02:05 | static method that can be reused. I'm
going to delete the trace statement and
| | 02:10 | jump over to Utils.as. Here what I'm
going to do is create a public static
| | 02:16 | method right below the constructor.
So public static function, and then I'm
| | 02:22 | going to call this alignToCenter and
this is going to align an object to the
| | 02:30 | center of the stage.
| | 02:31 | So I'm going to pass in an object. I'm
just going to call that obj, and I'm not
| | 02:35 | going to data type it to a movie clip.
I want this to be usable for any kind of
| | 02:39 | visual object. I'm going to call the
data type display object. So any object
| | 02:44 | that's visible, this is going to be any
object that has an X or a Y property or
| | 02:48 | width or height, I'll return
void and write some curly braces.
| | 02:53 | Now remember, because of polymorphism
we can pass in any object that inherits
| | 02:59 | from display object, so that's going
to make movie clips count or custom TV
| | 03:04 | class we created earlier in this
chapter we count. Basically, any visual class,
| | 03:10 | this allows for maximum reuse.
| | 03:13 | The first thing we'll do is set the
object's X position. Centering your object
| | 03:16 | to the center of the stage is just a
simple mathematical formula. Take the
| | 03:21 | object, so obj, set its X position =
half the stage's width. Now if we just
| | 03:27 | type stage, the Utils class doesn't
have a stage property so it won't know what
| | 03:33 | you're talking about.
| | 03:34 | So we're going to rather get
the stage of the object. So it's
| | 03:37 | obj.stage.stageWidth, that's the width
of the stage, / 2. So the half the width
| | 03:46 | of the stage. That will align the left
edge of the object assuming it has top
| | 03:49 | left alignment with the center of
the stage. So now what we need to do is
| | 03:53 | subtract half of the object's width
to shift it in the right amount to the
| | 03:58 | left, so it will be centered with
the stage. So we'll subtract obj.width
| | 04:04 | divided by 2. So the X position of
the object is half the stage width minus
| | 04:08 | half the object's width.
| | 04:09 | That will center the object to its stage.
Let's copy and paste this line of
| | 04:13 | code on the next line and just modify
a few things to make this apply to a y
| | 04:17 | position. Set the object's y position =
obj.stage.stageHeight / 2 - obj.height / 2.
| | 04:29 | That will center the object vertically,
and before we test it out there is
| | 04:33 | one more thing we have to do. See how
we're using the display object class.
| | 04:38 | If we were to test the movie without
importing that class in here we would get
| | 04:42 | an error. Remember that when you're
creating classes in ActionScript, any time
| | 04:48 | you use a class, there is now what's
the top level of class, then you need to
| | 04:53 | import that class into your code. You
can find out which classes are top-level
| | 04:58 | classes in Flash Help.
| | 05:00 | In general, top level classes are
basic things like strings, arrays, numbers,
| | 05:07 | XML data, and Boolean variables to
visual object needs to be imported. So above
| | 05:16 | our class declaration I'm going to
import the DisplayObject class. That's
| | 05:19 | inside the Flash Display package. So
import flash.display.DisplayObject.
| | 05:25 | All right. I'll save the file, jump
back over to our FLA file, go to the
| | 05:34 | Timeline, open up the Actions panel
and then I'm going to run that method to
| | 05:39 | align the TV to the center of the stage.
It's Utils.alignToCenter and then pass
| | 05:47 | in that TV movie clip which is tv_mc.
Test the movie and the TV is aligned
| | 05:53 | exactly to the center of the stage.
| | 05:55 | So using static properties and methods,
all you have to do is add the word
| | 06:00 | static. So you can use your access
modifier, after that use the word static,
| | 06:06 | and then define your property or method
as usual. As you can see in this file,
| | 06:11 | one of the great uses for static
properties and static methods is that we can
| | 06:16 | have a method like this alignToCenter
method that we can reuse all the time
| | 06:22 | with as little code as possible.
| | Collapse this transcript |
| Using static constants| 00:00 | In this movie we're going to look at
creating static constants. A static
| | 00:05 | constant is basically the same thing as
a static variable except for it doesn't
| | 00:10 | ever change. So it's connected to a
class, but it's unchangeable. Static
| | 00:15 | constants are typically used with events.
I'm going to jump over to my TV class
| | 00:20 | here and I'm going to create a new
public static constant and here's the
| | 00:25 | syntax, public static, and instead of
var you're going to type const, short for constant.
| | 00:34 | Let's say that this is going to
represent an event. So let's say we add an
| | 00:38 | event called channel change. So I'll
call this CHANNEL_CHANGE, notice that I'm
| | 00:45 | typing in all caps. It's not something
you have to do for a static constant,
| | 00:48 | but it is what Flash does for all of
its static constants. So you think of
| | 00:54 | mouseEvent.CLICK. Click is a static
constant, it's in all caps. event.COMPLETE,
| | 01:00 | Complete is a constant
and it's also in all caps.
| | 01:03 | Flash also separates words with
underscores. I'm just following what Flash does
| | 01:09 | here to make it easy for me to
remember the casing that I use for my static
| | 01:14 | constant. I'm going to expand my
working area here a little bit and we're going
| | 01:18 | to data type this to a string and I'm going
to set it equal to channelChange. That's it.
| | 01:27 | So I'm going to save the file,
so File > Save, jump back over to
| | 01:30 | Static_Constants.fla, and go to the
Timeline. Below the code that's already there,
| | 01:35 | I'm going to trace TV.CHANNEL_CHANGE.
Test the movie and there is
| | 01:43 | channelChange in the Output window.
Let's see what happens if we try to change
| | 01:46 | the value of TV.CHANNEL_CHANGE.
| | 01:50 | Erase that trace statement and
replace it with TV.CHANNEL_CHANGE =
| | 01:57 | "someOtherString." Get an error in the
Output window and the error says Illegal
| | 02:06 | assignment to a variable specified as
constant. So you can't change the value
| | 02:10 | of a constant, back to the Timeline.
I'll comment out this line of code so that
| | 02:15 | our application doesn't break.
| | 02:17 | All that there is to creating a
constant is just using the word const instead
| | 02:22 | of var. So we can create a static
constant with the syntax, public static const,
| | 02:28 | and static constant should be in all
caps with words separated by underscores.
| | Collapse this transcript |
| Dispatching events| 00:00 | Now we are going to look at
dispatching events. Before we start writing any code,
| | 00:05 | I want to show you how this file is set up.
I have two movie clips on the stage,
| | 00:09 | one called remote_mc. It is a
remote control and it is an instance of
| | 00:16 | the Remote movie clip, which is
connected to a class called Remote,
| | 00:20 | which we will look at in a minute.
| | 00:21 | The Remote movie clip has two
important button symbols: one called up_btn,
| | 00:28 | which is going to change the channel up,
and one called down_btn, which is
| | 00:33 | going to change the channel down.
| | 00:35 | Here we have a TV with an instance name
of tv_mc, which is connected to the TV
| | 00:43 | movie clip which is an instance of the
TV class. Finally, there is a text field
| | 00:49 | with the name channel_txt. This is
going to display the channel that
| | 00:53 | the TV is currently on.
| | 00:55 | Let's take a look at the Remote class
file, going to expand my working area
| | 01:00 | here. Now this may look pretty
complicated but it is actually pretty simple.
| | 01:05 | We have the basic class that is extending
the MovieClip class and importing the
| | 01:09 | MovieClip class and the MouseEvent class.
| | 01:13 | In the constructor I'm adding an event
listener to listen for a mouse click and
| | 01:18 | that will change the channel. Note
that I'm not adding the event listener to
| | 01:22 | the individual buttons. That is one
way to do it but by adding an event
| | 01:27 | listener just to the Remote, we can
react based on what object was clicked on.
| | 01:32 | This makes us have less methods to work with.
| | 01:35 | So I have a private method called
changeChannel. Keep in mind that it is
| | 01:39 | private. Figure what it does. It
receives that MouseEvent data and then it uses
| | 01:44 | a switch case statement to handle
what happens. Now if you are not familiar
| | 01:49 | with the switch case statement, it
is a lot like an if else statement.
| | 01:53 | The switch statement allows us to
work with a particular bit of data, so
| | 01:59 | event.target.name. We are going to
taste everything inside of the switch
| | 02:03 | statement against that value. So, event.
target.name is going to be the name of
| | 02:08 | the object it was clicked on. If it
is just the Remote, it is going to be
| | 02:11 | remote_mc; if it was the Up button, it
is going to be up_btn. And if it is the
| | 02:16 | Down button it is going to be down_btn.
| | 02:21 | So switch statement is really good
when you are working with one bit of data
| | 02:24 | and you are going to a different thing
based on the value of that data. So here
| | 02:29 | is the syntax here, case, which means
if the value is whatever you put after
| | 02:35 | the space, so if the value is up_btn,
then a colon, then what to do on the next
| | 02:41 | line. Make the TV's channel go up one.
| | 02:46 | Now If you scroll up you'll see that
there is a public property called TV. That
| | 02:51 | does not have a value yet, so it will
need to be set before the remote really
| | 02:54 | works. Then there is a break statement
which ends the switch case statement and
| | 02:58 | that stops evaluating these. So just
think of this as like an if else statement.
| | 03:03 | It is basically saying if event.target.
name is equal to up_btn, then change the
| | 03:10 | TV's channel and break just simply
stops this processing to switch statement.
| | 03:16 | So if the value is down_btn, then
decrement the channel by one and the default
| | 03:22 | is sort of like the else statement at
the very end of a series of if and else
| | 03:26 | if statements.
| | 03:27 | All right, so the thing that we have
to do to make this work is connect the
| | 03:32 | remote to the TV. So when you go to the
main Timeline in my FLA file and you go
| | 03:37 | to my ActionScript code, and I have
this line of code here, remote_mc.tv,
| | 03:43 | remember that is a public property in
the Remote class equals tv_mc. So now the
| | 03:48 | Remote can change the channel of the TV.
But remember that method, that channel
| | 03:55 | changing one, is a private method so
we can't use that method and check the channel.
| | 03:59 | What we are going to do is have the
TV send out a notification whenever its
| | 04:04 | channel changes, and we can listen
for that notification event on the main
| | 04:11 | Timeline. Let me show you how this
works. Close the Actions panel. Go over to
| | 04:16 | the TV ActionScript file. In a
previous movie we created a public static
| | 04:22 | constant called CHANNEL_CHANGE. Now
what we are going to do is dispatch an
| | 04:26 | event saying that the channel has
changed whenever the channel gets changed.
| | 04:30 | So the first thing I'm going to need
to do is to import the event class, so
| | 04:34 | import flash.events.Event. So we have
that class and now we are going to send
| | 04:40 | out notification using
this CHANNEL_CHANGE constant.
| | 04:44 | Now, we are going to be creating a
custom event, but that's going to be the
| | 04:46 | channelChange event. If you want to
create a detailed custom event you can do
| | 04:51 | that and what I would refer you to,
because it is a more advanced topic is
| | 04:56 | Flash Help under Custom Events.
| | 04:58 | So I'm going to scroll down to the set
channel, this is where the channel is
| | 05:01 | changed. So after channel = c, I'm
going to go to the next line and here I'm
| | 05:07 | going to create an event. I'm
going to do that by using the method
| | 05:11 | dispatchEvent; dispatchEvent is defined
by the event dispatcher class, which is
| | 05:18 | one of the ancestor
classes of the MovieClip class.
| | 05:21 | So in the parenthesis, I need to pass
in an event. So what I'm going to do is
| | 05:26 | create a new instance of the event
class. So new Event, I'm just creating it
| | 05:32 | right in here, some parenthesis, and
inside the parenthesis I pass in a string
| | 05:38 | to identify what type of event it is.
| | 05:41 | Now here I can just pass in
CHANNEL_CHANGE. So I'm going to type
| | 05:44 | TV.CHANNEL_CHANGE. So I'm dispatching
the CHANNEL_CHANGE event and its class is
| | 05:54 | going to be the event class. So I'm
dispatching the TV. CHANNEL_CHANGE event so
| | 06:01 | that we can listen for that event on
the main Timeline and respond when it happens.
| | 06:06 | So save the file, so File > Save,
back to the FLA, back to the code in the
| | 06:11 | Timeline. And now after we set the tv--
that is very important, you need to set
| | 06:16 | the tv first-- I'm going to type tv_mc.
addEventListener and the event is going
| | 06:24 | to be TV.CHANNEL_CHANGE. Remember,
this is going to be dispatched when the
| | 06:31 | channel changed as we set up just a
second ago or run a function called
| | 06:36 | channelChanged. Create the function
channelChanged. It's going to receive an
| | 06:43 | event with the data type of Event.
| | 06:47 | Now return data. Now I'm going to put
the value of the current channel inside
| | 06:52 | of the text field on this stage so
channel_txt.text = tv_mc.channel and that is
| | 07:01 | an integer so we're going to need to
tell Flash to treat it as a string. So
| | 07:04 | right before tv_mv.channel I'm going
to type String and wrap tv_mc.channel in
| | 07:11 | parenthesis. That's going to treat that
integer as a string so it can go inside
| | 07:15 | a text field because the text property
of a text field needs to be a string.
| | 07:20 | Test the movie, click the Channel
button and you will see the channel in the
| | 07:26 | text field on the stage.
| | 07:27 | Now you may be wondering why we are
doing such a complex process. The beauty of
| | 07:32 | this is that the remote controls the
TV's data and we can access the TV's data
| | 07:38 | through events that are dispatched
whenever the channel changes from anywhere
| | 07:44 | in our code. So we do not really need
to know too much of information about the
| | 07:47 | remote or anything; we just listen for
when the channel changes on the TV and
| | 07:51 | then we can respond accordingly.
| | 07:53 | This is great preparation for object-
oriented programming concepts that we will
| | 07:58 | be talking about throughout the rest
of this title. So to recap, all you have
| | 08:02 | to do to dispatch an event is called
the dispatchEvent method. Any class that
| | 08:06 | is a sub class or descendebt class
of the event dispatcher class has this method.
| | 08:11 | Inside of there you can
simply create a new Event object. Inside of
| | 08:15 | that constructor, pass in your customized event
which is usually going to be a static constant.
| | Collapse this transcript |
| Throwing errors| 00:01 | In this movie, we are going to look at
throwing errors. That is, creating your
| | 00:06 | own errors. Now, if you are new to
object-oriented programming, you may be
| | 00:11 | wondering why you would want to create errors.
| | 00:15 | Let me show you here. I'm going to go
to the first keyframe in the Actions layer
| | 00:19 | in my application and open up the
Actions panel. We wrote this code in the
| | 00:23 | previous movie. If you remember, the
remote class needs its TV property set in
| | 00:29 | order to work properly. Let's say we
commented out this line of code or forgot
| | 00:35 | to give a value to the TV property of
the remote. We are going to test the movie
| | 00:39 | and see what happens.
| | 00:41 | I will click a button to change the
channel and we get an error in the Output window.
| | 00:46 | Let's see what the error says.
Cannot access a property or method of a
| | 00:52 | null object reference. So the problem
with this error is that it's very vague.
| | 00:56 | I don't necessarily know
where the problem is in my code.
| | 00:59 | What would be great is if this message said,
Error, you need to set TV property
| | 01:06 | in order to use the remote. We will
look at how to do that in just a minute.
| | 01:09 | So you can see that the importance of
creating errors is that when you are
| | 01:13 | using your code or somebody else is
using your code and something goes wrong,
| | 01:18 | the error message can be clear and
tell the person exactly what's wrong. So,
| | 01:24 | we will do that right now.
| | 01:25 | What I'm going to do is go to the
Remote class and expand my working area here,
| | 01:32 | then I'll go to the changeChannel
method. Right above the switch statement,
| | 01:35 | I'll check to see if TV is undefined.
So I'll create an if statement, if and
| | 01:41 | some parenthesis and some curly
braces and in the parenthesis, type an
| | 01:46 | exclamation point and then TV.
| | 01:48 | The exclamation point is the not
operator; TV represents our TV property.
| | 01:54 | And so if it's undefined or not set,
then this statement will be true. So if not TV,
| | 02:00 | or in other words, if TV is
undefined then run this block of code.
| | 02:05 | Now here we will create an error
that's very clear in the Output window.
| | 02:10 | Type throw, space, new, space, error with
capital E and in the parenthesis, this is
| | 02:17 | the constructor for the Error class by
the way, we will just type in a string
| | 02:21 | that's an error message. I'll type
'TV property for Remote needs to be set.'
| | 02:30 | Save the file, File > Save, back
to the FLA file and test the movie.
| | 02:37 | Click one of the channel buttons.
Look at the message in the Output window.
| | 02:40 | Error: tv property for remote needs to
be set. From there, I know exactly what
| | 02:46 | the problem is. So I can go to my code
and find where I should have set the TV
| | 02:50 | property and uncomment the code, test
the movie, and everything works properly.
| | 02:57 | So to recap, if you want to create
a new error, this is the syntax.
| | 03:01 | throw, space, new, space error with capital E,
then the error message as a string
| | 03:07 | inside of the constructor.
| | 03:08 | For more information about errors,
including useful statements to control
| | 03:13 | errors, look up the Error class in
Flash Help by selecting Error and pressing
| | 03:18 | F1 on your keyboard.
| | Collapse this transcript |
| Creating interfaces| 00:00 | In this movie, we are going to look
at creating interfaces. Interfaces are
| | 00:06 | basically a list of methods. The
power of interfaces comes when multiple
| | 00:11 | classes implement an interface and
have the methods defined in the interface.
| | 00:16 | You can really see how powerful
interfaces are when you use an interface as a
| | 00:22 | data type requirement for a function or
a method. We will look at that in more
| | 00:25 | detail in a later movie. For now,
we will just create a basic interface.
| | 00:31 | To create an interface, you start it
out just like a class. So use the word
| | 00:35 | package, then some curly braces, and
then public and instead of class use the
| | 00:40 | keyword interface and then I'm going
to call this ISpeech, which is the same
| | 00:45 | name as my file. ISpeech interfaces by
convention all start with a capital I
| | 00:52 | and then a capital letter that defines
the interface, and then some curly braces.
| | 00:57 | This interface is going to be
applicable for different types of classes that
| | 01:02 | could be possibly unrelated. Think of
a person, a cat and a dog. All of them
| | 01:08 | have their own form of speaking, but
each one of them speaks in a different way.
| | 01:13 | People talk, dogs bark, cats meow.
So each class can implement methods of
| | 01:20 | the interface in a different way. They just
have to use the methods defined in that interface.
| | 01:25 | Here is how to define interface method.
Type the word function; you don't
| | 01:30 | define public or private because all
interface methods need to be public methods.
| | 01:34 | Once they are implemented
they all need to be public.
| | 01:38 | And then, we define the name of the method.
So it's going to be speak, some parenthesis, and
| | 01:44 | any parameters that would be required,
you'd put in there. You declare the return
| | 01:49 | data type and then a semicolon.
| | 01:51 | You don't put what the function does
here. You merely just define the name of
| | 01:55 | the function, its parameters and its
return data type. And that's really all
| | 02:00 | there is to creating an interface.
| | 02:02 | So I'll save the file, File > Save,
and again all you need to do is create a
| | 02:07 | package, then just like you create a
class, you use the term public, interface,
| | 02:11 | the name of the interface, which by
convention starts with a capital I and
| | 02:15 | inside of the curly braces,
the methods that your interface requires.
| | Collapse this transcript |
| Implementing interfaces| 00:00 | Now we are going to look at using an
interface inside of a class. Remember
| | 00:05 | that we have an interface defined
called ISpeech that has a method called speak
| | 00:10 | defined that returns a value of void.
| | 00:12 | So, I'm going to go to my Person class and
then I'm going to implement that interface
| | 00:18 | right after the class declaration.
So public class Person implements.
| | 00:24 | It should turn blue if you have typed it
correctly and then the interface name, ISpeech.
| | 00:30 | By the way, we have multiple
interfaces that a class is implementing,
| | 00:33 | you can separate them by commas here.
| | 00:35 | So now before we do anything else,
what I'm going to do is save the file.
| | 00:40 | As we talked about in another movie, any
class that implements an interface needs to
| | 00:45 | define the methods that are set up
in that interface. So every class that
| | 00:50 | implements ISpeech, needs to have a
public method called speak. I haven't
| | 00:55 | defined that in the Person
class, so let's see what happens.
| | 00:58 | When we are going to go to the first
keyframe in the Actions layer, open up the
| | 01:02 | Actions panel, create a variable called
person, data type it Person and create
| | 01:07 | a new instance of the Person class.
Test the movie and see what happens in the
| | 01:12 | Output window.
| | 01:14 | So it says interface method speak
in namespace ISpeech not implemented by
| | 01:18 | class Person. So you get an error if
you don't implement that method in your class.
| | 01:24 | So let's go to Person.as and
define a public method called speak.
| | 01:31 | It needs to return void and it can't
accept any parameters because that's how we
| | 01:34 | defined it in the interface.
| | 01:36 | So now we will just do a trace
statement and I'll trace "hello". Save the file,
| | 01:45 | go to the FLA file. On the line after
the Person is created, run the speak method.
| | 01:52 | So person.speak(); Test the movie
and there's 'hello' in the Output window.
| | 01:59 | I am going to close the Actions panel.
Let's take a look at some of the other
| | 02:02 | classes that I have created. I have
a Dog class and it already implements
| | 02:07 | ISpeech. It has the speak method
defined and since that's a simple trace
| | 02:12 | statement, the trace is woof. I have
a Cat class that implements ISpeech and
| | 02:18 | the speak method says meow. So
each method does something different.
| | 02:22 | It's just the same name and it's
all based on that interface, ISpeech.
| | 02:27 | Let's go back to the FLA file. Now
here's where this can be really useful.
| | 02:32 | I'm going to create a function on the
main Timeline and I'm going to call this
| | 02:37 | speak. It's not significant that
it's the same name as the method in the
| | 02:41 | classes. That doesn't matter here.
| | 02:43 | Then I'm going to take one parameter
and that's going to be called speaker and
| | 02:48 | the date type for that instead of
being a class type, it's going to be an
| | 02:52 | interface data type. So it has to
be something that implements ISpeech.
| | 02:58 | So you can use an interface as a data
type. It's going to return void and
| | 03:05 | in here it's going to call up the
speaker's speak method. So speaker.speak.
| | 03:11 | So I'm going to go to the bottom of my code
and I'll run the speak method and
| | 03:15 | I'll pass in the Person. Test the movie
and it works. So I'm passing in a Person
| | 03:22 | into the speak method and because it
implements ISpeech, the method works properly.
| | 03:28 | So let's say I created a Cat and a Dog.
So I created a variable called cat,
| | 03:33 | data type as to Cat, set it as a new
instance of the Cat class. And create a dog,
| | 03:38 | just like I created the cat. I can
pass in the cat or the dog into the
| | 03:45 | speak method and because they
implement ISpeech, it works properly.
| | 03:52 | So using interfaces, you can
implement methods and classes that can be
| | 03:56 | completely unrelated and then you can
accept an interface as a data type in a
| | 04:03 | function or a method and you can know
that any object to pass in there has all
| | 04:08 | of the methods defined in the interface.
| | Collapse this transcript |
| Understanding design patterns| 00:01 | Just as object-oriented programming
is a more organized approach to writing code,
| | 00:07 | design patterns are a more
organized approach to object-oriented
| | 00:12 | programming. When you create classes
in an object-oriented application,
| | 00:18 | those classes need to exchange data.
Design patterns deal with how to solve problems
| | 00:25 | that can come up when building object-
oriented applications to get the data
| | 00:30 | where it needs to go.
| | 00:31 | There are many different types of
design patterns and there are actually books
| | 00:35 | about design patterns only and
further, only design patterns and only in
| | 00:40 | ActionScript 3.0. Let me show you an
example of some design patters here in action.
| | 00:46 | I am going to test the movie here and
I have a slideshow application and
| | 00:51 | this is a very complex application.
When I click the image, the images advance
| | 00:55 | and I can click the next and
previous buttons for the images to change.
| | 01:00 | Now you can just clump all this
code on the main Timeline and have it
| | 01:04 | unorganized or you can build random
classes and just start writing code or
| | 01:10 | you can use design patterns, which present
plans for laying out your code to solve
| | 01:16 | particular problems.
| | 01:17 | For example, this application is
powered by XML data. So, one of the problems
| | 01:25 | when working with an object-oriented
application is getting that XML data to
| | 01:29 | display images on the stage and to
update text and to have that XML data
| | 01:34 | update based on button clicks.
| | 01:38 | Using the design pattern called the
Model View Controller, I set up that
| | 01:43 | application with that in mind. The
Model View Controller design pattern
| | 01:48 | presents a solution for exchanging
data to display visual content and other
| | 01:55 | content, like the images and text than
to control that data in some way. Here,
| | 02:00 | I'm using buttons.
| | 02:02 | So to sum up, there are many different
design patterns and you can look at the
| | 02:06 | term design patterns online to find
out more about them. And when you are
| | 02:10 | creating your object-oriented
applications, it's best to plan them out and
| | 02:14 | to research which design
patterns will work well for you.
| | 02:19 | Throughout the rest of this title, we
are going to be looking at one particular
| | 02:22 | design pattern and talking about how to use
that pattern in building your applications.
| | Collapse this transcript |
|
|
4. The Model View Controller Design PatternUnderstanding the Model-View-Controller pattern| 00:00 | In this chapter, we are going to look
at a design pattern called the Model
| | 00:04 | View Controller Pattern. The Model
View Controller Pattern is a very popular
| | 00:10 | design pattern because it provides a
very effective way to organize your code.
| | 00:16 | The Model class or classes hold and
control the data in the application.
| | 00:22 | The View classes control what the user sees
and Controller classes control the data
| | 00:31 | in the model and can change that data.
Based on the current data of the Model,
| | 00:37 | the view updates.
| | 00:40 | Let's look at how the Model View
Controller Pattern works in an application.
| | 00:45 | So let's say a person is interacting
with an application. So we will picture a
| | 00:50 | slideshow for this example. The
person sees images on the screen and then
| | 00:55 | buttons to control those images. A
person clicks a button which is linked to a
| | 01:00 | Controller class. The Controller class
then updates the data in the model based
| | 01:06 | on the person's input. From there
the model manipulates its data and then
| | 01:12 | dispatches an event announcing that his
data has changed. After that, the view
| | 01:18 | is updated for the person to see.
| | 01:22 | The great thing about the Model View
Controller Pattern is it allows you to
| | 01:27 | easily switch out a model, a view or a
controller. That functionality in the
| | 01:33 | application is separated so it won't
break if you decide to put different
| | 01:38 | buttons or a different controller in
your application or decide to present the
| | 01:42 | data view in a different way. So
throughout this chapter, we will look at how
| | 01:47 | Model View Controller Pattern
applications work and how you can plan them out
| | 01:51 | to create them yourself.
| | Collapse this transcript |
| Viewing an MVC application| 00:01 | In order to understand how the Model
View Controller design pattern really works,
| | 00:05 | I want to show you what it looks
like in a real world application.
| | 00:10 | This application here is very, very simple
but it shows you how an MVC or Model View
| | 00:17 | Controller application can work.
| | 00:19 | So here I have a TV, a remote and a
text field. The TV has a channel.
| | 00:28 | So the channel is the data and the TV here
is going to represent the Model. The TV is
| | 00:35 | connected to a class called TV and the
TV class is very simple. It just has a
| | 00:42 | private property called channel, which
can be accessed through public get and
| | 00:46 | set methods. Whenever the channel
changes, it dispatches an event called
| | 00:50 | TV.CHANNEL_CHANGE and
that's really all there is to it.
| | 00:54 | Now let's look at the remote. The
data in the TV, or in other words
| | 00:58 | the channel of the TV, is controlled
by the remote. It has Channel Up and
| | 01:04 | Channel Down buttons. Let's look at the
Remote class and see how it is set up.
| | 01:08 | The Remote class has a property to hold
the TV. It has an event listener to listen
| | 01:13 | for a click. If the channel up button
is clicked, the channel on the TV is goes up.
| | 01:17 | If the channel down button is clicked,
the channel on the TV goes down.
| | 01:22 | So basically the whole purpose of the
remote is to capture user interactivity
| | 01:27 | to change the channel on the TV. So
the TV is the Model. The remote is the
| | 01:32 | Controller and it controls the data
inside of the Model. So the remote controls
| | 01:38 | what channel the TV is on.
| | 01:41 | Now depending on what channel the TV
is on, you are going to see a different
| | 01:45 | thing on your TV set. Now instead of
showing different things on the TV set,
| | 01:50 | I have a text field displaying
different text values. The text values are
| | 01:54 | controlled using the Channel View class.
The Channel View class simply displays
| | 02:01 | text based on the current data
inside of the Model, which is the TV.
| | 02:07 | So here I have two public properties:
channelText and television. When you
| | 02:10 | create a new instance of the Channel
class, then you need to pass those values
| | 02:14 | in there. So the TV and the channelText
and they are captured in the television
| | 02:18 | and channelText properties respectively.
Then the event listener is added to
| | 02:22 | the TV, listening for TV.CHANNEL_CHANGE,
which will run the channelChanged method.
| | 02:27 | The channelChanged method simply
updates the text on the stage. So,
| | 02:33 | this is our View class.
| | 02:34 | Now let's return back to our FLA file.
So the TV is the Model, the remote is
| | 02:40 | the Controller which controls the data
in the Model, and the text field is the View,
| | 02:44 | which is updated based on the events that
the TV dispatches when its channel changes.
| | 02:51 | So that's how a Model View Controller
application works. So just think the
| | 02:56 | Model represents the data, the
Controller changes the data and controls that
| | 03:02 | data and then the View updates based
on the data value within the Model.
| | 03:08 | So there is a simple Model View
Controller application. As we move on, you'll
| | 03:13 | see a more advanced application
of this when we build a slideshow.
| | Collapse this transcript |
| Planning an MVC application| 00:01 | When you are creating your own Model
View Controller pattern, you need to do
| | 00:06 | three things. I call these the three Ds.
The first D is to define Model, View
| | 00:12 | and Controller roles. So what you want
to do is figure out what the Model is
| | 00:18 | going to do, what the View is going to
do and what the Controller is going to do.
| | 00:22 | So you need to have conceptual idea
of your application and how it's going
| | 00:26 | to work from the ActionScript
object-oriented perspective.
| | 00:31 | Second D is to determine how classes
will exchange data. The most common way to
| | 00:36 | exchange data in a Model View
Controller application is having the model
| | 00:40 | dispatch events and having the view
respond to those events. If there needs to
| | 00:46 | be a different way to exchange data,
plan out how that will work or at least
| | 00:52 | think about it and then finally, if
you are a visual person like I am,
| | 00:57 | draw a quick sketch of your application on paper.
| | 01:01 | For some reason, this helps me a lot
when I'm programming. I'll draw out a
| | 01:07 | really simple sketch of my application
using rectangles and simple shapes and
| | 01:11 | I'll write what the Model, View and
Controller classes will do and how the data
| | 01:17 | will communicate. This pre-
creation really helps me in programming my
| | 01:23 | applications because I have a view of
the end, right from the get-go. Before I
| | 01:29 | start writing any code, I know where
my application is going to end up and
| | 01:33 | I know how my classes are going to be organized.
| | 01:36 | So whenever you are creating a Model
View Controller application, make sure to
| | 01:40 | follow these steps, so that your
application is organized and well prepared
| | 01:45 | before you start writing any code.
That way you will solve any of the problems
| | 01:49 | that may come up before they even
have a chance to get in your way.
| | Collapse this transcript |
|
|
5. Building a Model ClassDefining the Model class| 00:00 | We are going to start out our slideshow
application by creating the Model class first.
| | 00:05 | In our slideshow application, we are
going to use XML data for the model.
| | 00:12 | Remember that the model is the
class that controls the data, however,
| | 00:17 | we may not be using XML data in every
model we create. What we are going to do
| | 00:22 | with this Model class is to basically
create a super class for all models in
| | 00:28 | the future to extend. So basically
this is just going to have the general
| | 00:33 | functionality that's going
to be needed in every model.
| | 00:37 | So we will start by creating a package.
So if you are creating this file from
| | 00:41 | scratch, just make sure that you save
it in a folder called mvc, all lowercase.
| | 00:48 | And then we will put this in the package mvc.
mvc is just short for Model View Controller.
| | 00:54 | So we are going to put all of
our classes that are related to
| | 00:57 | Model View Controller inside of this package.
Put some curly braces there and we will
| | 01:03 | define the class. So it's going to be
a public class Model and it's actually
| | 01:08 | going to extend the EventDispatcher class.
| | 01:12 | Remember the EventDispatcher class
is where the dispatchEvent function
| | 01:17 | originates. So by extending this
class we have access to the dispatchEvent
| | 01:22 | function and can dispatch events.
EventDispatcher should turn blue if you have
| | 01:28 | typed it correctly and then some curly
braces below that. And before anything else,
| | 01:33 | since we are using the EventDispatcher
class and EventDispatcher is not a
| | 01:37 | top level class, we are going
to need to import that class.
| | 01:41 | So I'm going to import that above our
class declaration. So import and
| | 01:45 | it's flash.events.EventDispatcher. This
class is going to be loading external data
| | 01:54 | files, so we might as well import all
of the classes that we are going to be using.
| | 01:58 | The classes that we are
going to be using in addition to
| | 02:02 | the EventDispatcher class are the
URLRequest class to create a request for the file.
| | 02:07 | The URLLoader class to load the
external file and the event class to
| | 02:12 | respond when a file is done loading.
| | 02:15 | So I'll import the event class next.
Import flash.events.Event. Note that if
| | 02:22 | you want to import all of the classes
in a package you can simply add and *
| | 02:27 | instead of typing the whole class name.
You are not going to bloat your files
| | 02:31 | by importing all the classes in a
package but by typing them out by hand,
| | 02:36 | you can see which classes you
are importing in a class.
| | 02:40 | And my personal preference on that is
to typically use the * for speed sake.
| | 02:45 | But if I'm ever going back to the
class, I like to just import each class
| | 02:48 | individually so I can quickly see what
classes I'm working with in the class
| | 02:53 | file. So let's import flash.net.
URLRequest and then on the next line import
| | 03:00 | flash.net.URLLoader. Remember that you
can know which package a class is part
| | 03:07 | of by highlighting the class and then
pressing F1 on the keyboard and
| | 03:10 | opening up Flash Help.
| | 03:11 | All right, we have defined our class.
Let's define our constructor method. So
| | 03:17 | public function Model() like so and
we will define some properties. Let me
| | 03:24 | create a public property called
currentIndex, it's going to represent the
| | 03:27 | current index of the data.
| | 03:29 | So if we are working with an XML file,
it's going to represent the current
| | 03:32 | index of data in that XML file. So
that's going to be an integer = 0. Add their
| | 03:40 | public property called totalItems
for working with XML. This is going to
| | 03:44 | represent how many total items are in
the XML object. So if we have a slideshow
| | 03:50 | with repeating images, this is going
to represent the total number of images.
| | 03:54 | So totalItems is going to be an
integer. We are not going to initialize it.
| | 03:59 | Then we are going to create a
protected property called loader. The data type
| | 04:05 | is URLLoader. Remember that protected
properties and methods are ones that can
| | 04:10 | only be accessed by sub-
classes or descendant classes.
| | 04:14 | Let's go to the next line and one more
public property called data and again
| | 04:19 | the data type of this to *. Now in
most cases, I'm going to use XML as data
| | 04:24 | type for this model. But let's say I
wanted to use a string or an object or an
| | 04:30 | array or something else. Data typing
this property to an * leaves it open so
| | 04:37 | that we can use any data type
when we extend the Model class.
| | 04:40 | Now let's define what's happens in the
constructor. We are going to scroll down
| | 04:43 | a little bit and the first thing I'm
going to do is create a new instance of
| | 04:47 | the URLLoader class. So set loader
equal to a new instance of URLLoader class
| | 04:52 | and then add event listener to the
loader listening for the complete event.
| | 04:57 | So loader.addEventListener and it's
going to be Event.COMPLETE and we will run
| | 05:03 | a method called dataLoaded. Capitalize
the L in dataLoaded. Now let's define
| | 05:11 | some methods. The first one I'll
define is dataLoaded. This is going to be a
| | 05:16 | protected method meaning it can only
be used in a descendant or sub-class.
| | 05:21 | So protected function dataLoaded. We
are going to receive an event with a data
| | 05:28 | type of Event. It's going to void and
once the data is loaded, we are going to
| | 05:34 | set the data property = loader.data.
| | 05:38 | Next we will define a public method
called load. This will load the external
| | 05:42 | data. It's going to receive an
URLRequest. So type req for the parameter name.
| | 05:53 | It's going to be a URLRequest. This
basically going to work like loading any file.
| | 05:58 | We need to pass in a URLRequest to
the file and then we are going to load it here.
| | 06:02 | It's going to return void and
in inside of the method all we are going
| | 06:09 | to do is run the URLLoader's load
method, passing in the request to load the
| | 06:13 | file and there is the basic
functionality for our model. Just make sure to save
| | 06:19 | the file before moving on.
| | Collapse this transcript |
| Setting values for properties| 00:00 | Now we will add some more methods and
set values for some of the properties in
| | 00:05 | our Model class. I'm going to scroll
down in my code to the dataLoaded
| | 00:10 | function and below the code that's
already in there, I'm going to write a
| | 00:14 | function that we have to define
yet called setCurrentIndex. I'm going to
| | 00:23 | pass in a value of currentIndex.
currentIndex is a property here that we have
| | 00:31 | defined at the top of the code. It's
initialized to zero. Now let's define the
| | 00:37 | setCurrentIndex method.
| | 00:39 | I will do that right above the
dataLoaded method. This is going to be public,
| | 00:44 | so public function setCurrentIndex.
It's going to receive a parameter called index,
| | 00:53 | which will have data type of
integer. We'll have it return void and
| | 00:59 | type some curly braces there.
| | 01:01 | Now we will define what happens inside
of this method. First, we will set the
| | 01:05 | value of currentIndex equal to
whatever value is passed in through the index
| | 01:12 | property. So currentIndex = index.
| | 01:15 | Next, we will run some methods that
we will define later. First we will run
| | 01:19 | controlCurrentIndex. This is a method
that's going to make sure that the index
| | 01:27 | is in bounds, so to speak, so that
the currentIndex isn't a number that's
| | 01:32 | invalid. So let's say we have four
images in our gallery, we don't want the
| | 01:38 | index number to be 15, because that
number is out of bounds and it will give an error.
| | 01:43 | So controlCurrentIndex will control that.
| | 01:46 | Next, we will run a method called
updateData. UpdateData is going to update the
| | 01:53 | data in the model. We are going to talk
about this more, later in this chapter.
| | 01:59 | For right now, let's define
controlCurrentIndex and updateData.
| | 02:04 | controlCurrentIndex is going to be a
private method. So to create a private
| | 02:08 | method called controlCurrentIndex,
it's not going to receive any parameters,
| | 02:17 | it's going to return void and I'm
not going to define it other than just
| | 02:21 | defining a skeleton right here.
| | 02:23 | And last, right above the
controlCurrentIndex method I'm going to create a
| | 02:28 | protected method called updateData.
Again, protected methods can only be used
| | 02:37 | by sub-classes. It's not going to
receive any parameters, the return data type
| | 02:42 | is void and I'll just write the curly
braces there. Save the file, check your code
| | 02:49 | to make sure there aren't any errors.
| | 02:52 | Now we have the basic functionality of
our model. I just need to do a few more things
| | 02:56 | until it's complete.
| | Collapse this transcript |
| Constraining property values| 00:00 | Now we are going to look at
constraining the property values of currentIndex
| | 00:05 | so that it doesn't go out of bounds.
In other words, if it goes below zero,
| | 00:10 | it will go to the last item or above the
number of total items. Then we will make
| | 00:15 | the data kind of loop around to go to
zero. We are going to do that in the
| | 00:19 | controlCurrentIndex method.
| | 00:21 | So I'm going down there and I'm going
to use some conditional statements.
| | 00:25 | First thing I'm going to do is check to see
if currentIndex is greater than or equal
| | 00:33 | to totalItems. If so, the index is too
high and it's out of bounds. Remember
| | 00:42 | that the total number of items is going
to be different than the highest index.
| | 00:47 | If we had an XML file with four images
in it, the number of total items would
| | 00:51 | be four, but the highest
index number would be three.
| | 00:55 | So if we pass in a value of 4, for
example, and set currentIndex and
| | 01:02 | currentIndex is set to 4, when we run
controlCurrentIndex, that value will then
| | 01:07 | be out of bounds. So if it's equal to
or greater than totalItems then we are
| | 01:10 | going to set it equal to
zero. So currentIndex = 0.
| | 01:15 | Below that we will create an else/if
statement. This is going to run only if
| | 01:20 | the if statement is evaluated as false.
So else if, some parenthesis and some
| | 01:25 | curly braces. We are going to see if
it's less than zero. So currentIndex < 0.
| | 01:33 | If so, we are going to set it to
the last index, which is going to be
| | 01:36 | totalItems - 1.
| | 01:41 | Now the model is set to handle the
index number no matter what it is and
| | 01:46 | it will loop around forwards or backwards.
Save the file and you are ready to move on.
| | Collapse this transcript |
| Dispatching events| 00:00 | Now we are going to look at making
our custom Model class dispatch an event
| | 00:04 | once it's data has been changed. The
first thing we will do is create a public
| | 00:09 | static constant right below
the rest of our properties.
| | 00:13 | So I'm going to create a public
static constant called MODEL_CHANGE.
| | 00:21 | That's going to be a string and I'll set
its value right here because remember
| | 00:25 | whenever you are working with the
static constant, you want to set its value
| | 00:28 | right where you define it. I'm going to
have the value be modelChange, and then
| | 00:33 | I'm going to dispatch an event.
It's going to dispatch the string here.
| | 00:37 | So we can listen for that modelChange event.
| | 00:39 | Scroll down and at the bottom of
setCurrentIndex, below everything else inside
| | 00:46 | of there, we are going to dispatch
that modelChange event. I'll do that using
| | 00:49 | the dispatchEvent method. So dispatchEvent.
In the parenthesis I'll pass in a new Event
| | 00:56 | and in the parenthesis we are
going to pass in model.MODEL_CHANGE.
| | 01:05 | Don't forget to close out the
parenthesis for both the new Event and
| | 01:09 | dispatchEvent.
| | 01:11 | Now we are ready to start testing this.
So save the file, File > Save.
| | 01:15 | Jump over to the Main.fla file. You are
going to need an FLA file that's in the same
| | 01:20 | folder as your MVC folder, unless the
MVC folder is in your class path already.
| | 01:28 | The file we are going to load into the
Model is called data.xml. Here is a look
| | 01:33 | at that file. The root element is
called gallery and there are repeating
| | 01:39 | elements called image. So we will close
the file, go to the Timeline in the FLA file.
| | 01:45 | Create a new layer called Actions.
| | 01:48 | In the first keyframe of the Actions
layer, I'm going to open up the Actions
| | 01:51 | panel and import the Model class. So
import mvc.Model. On the next line, create
| | 01:58 | a new variable called m that will
represent our Model. So the data type is
| | 02:03 | going to be Model, set it equal to
a new instance of the Model class.
| | 02:07 | Then we are going to load our external
file. So right below our Model variable,
| | 02:12 | let's create a URLRequest. So I'm
going to call it req, data type it to
| | 02:18 | URLRequest, set it equal to a new
URLRequest and the file is data.xml and
| | 02:25 | that's going to be in the same
folder as this FLA file. So data.xml.
| | 02:29 | Your file doesn't necessarily need to
be set up in the exact same way as
| | 02:33 | my data file but it should have a pretty
similar structure. So it should have
| | 02:37 | repeating elements called image and
each one of those should have a file and
| | 02:41 | a title. So I'm going to go down a few
lines and I'm going to make the Model load
| | 02:45 | the URLRequest.
| | 02:47 | And above the line of code where
I load the request, I'm going to add
| | 02:50 | an event listener to the Model.
m.addEventListener and the event is going to be
| | 02:56 | Model.MODEL_CHANGE, then I'm going
to run a function called dataChanged.
| | 03:07 | We will define that in between my
variables and my other code. So I'll create a
| | 03:11 | function called dataChanged, remember
the event data type is Event, no return
| | 03:18 | data type and in the curly braces, we
can put a trace statement that just says
| | 03:26 | "data changed!"
| | 03:29 | Test the movie. Make sure everything is
working okay. Make sure to look in the
| | 03:35 | Output window to see 'data changed!'
Nice! So we successfully dispatched events
| | 03:42 | from out Model. The Model class is now
ready to extend and use in our slideshow application.
| | Collapse this transcript |
| Extending the Model class| 00:00 | Now we are going to extend our model
class in a class called SlideshowModel.
| | 00:06 | So if you don't have the Exercise Files
make sure to create the SlideshowModel
| | 00:10 | class in the same folder as your
Model class. So I'm going to declare the
| | 00:14 | package as mvc, same package as the
model and then I'm going to create a public
| | 00:19 | class called SlideshowModel and
it's going to extend the Model class.
| | 00:29 | It's important here to know that you
don't need to import the Model class
| | 00:33 | because the class is in the same
package as SlideshowModel. Whenever you are
| | 00:37 | working with something that's in the same package,
you don't need to worry about importing it.
| | 00:40 | Now let's declare the Constructor method,
public function SlideshowModel,
| | 00:48 | some parenthesis and some curly braces,
and there is our constructor. And then the
| | 00:53 | last thing that we are going to do is
import the event class because we are
| | 00:57 | going to be using it in this class.
So import flash.events.Event. That's it.
| | 01:04 | Save the file and to make sure it's
working, you can just jump over to our FLA file.
| | 01:10 | Go to the first keyframe with
the Actions layer. Open the Actions panel
| | 01:17 | and make a few modifications to the code.
| | 01:20 | On a line of code after importing
mvc.Model, go to import mvc.SlideshowModel.
| | 01:28 | Then I'm simply going to change the
Model in our m variable to SlideshowModel.
| | 01:35 | So it's going to be a new instance of
the SlideshowModel class, just like that.
| | 01:42 | And we will test the movie and if
it still works then we know that our
| | 01:45 | SlideshowModel class is working properly.
I'm going to close the Preview window
| | 01:51 | and I can see data changed in the
Output window. So everything is working great
| | 01:56 | and we have successfully
extended the Model class.
| | Collapse this transcript |
| Defining the SlideShowModel class properties and methods| 00:00 | Now we will define the properties and
methods for this SlideshowModel class.
| | 00:04 | We will start by the defining some
properties above the Constructor method.
| | 00:09 | So create a public property images.
This is going to be an XMLList.
| | 00:14 | So this is going to represent all of the
repeating XML image elements in the Slideshows data.
| | 00:21 | Create another public property. This
one is going to be called currentImage.
| | 00:24 | This is going to represent the current
XML image that we are working with. So,
| | 00:30 | the SlideshowModel is basically is
going to have a current XML image element
| | 00:36 | and we can access its data to that.
| | 00:38 | Now we will create two more public
properties. One called the currentTitle that
| | 00:44 | represents the title for the current
image. It's going to be a String. And then
| | 00:48 | another one called currentFile that
represents the file location for the image,
| | 00:54 | which is also going to be a String.
| | 00:56 | Now before we define the methods that
we are going to use I want to take you
| | 00:59 | over to the Model class file. In the Model
file, there are two protected methods.
| | 01:06 | First, let's look at updateData.
It doesn't do anything in the Model class.
| | 01:12 | Now why is that? It's for this reason. In
the setCurrentIndex method, currentIndex
| | 01:18 | is set, ControlCurrentIndexI occurs
and then updateData happens before the
| | 01:24 | event is dispatched.
| | 01:26 | UpdateData is a method that can be
different than any descendant of the Model
| | 01:32 | and this is where the unique code
processing happens for each descendant. So
| | 01:37 | when I have the SlideshowModel I'm
going to do something different with the
| | 01:41 | data than I would in another application.
In just a minute we'll look at how to
| | 01:45 | override the definition for
updateData in the SlideshowModel class.
| | 01:50 | Other projected method you want to draw
your attention to is all the way at the
| | 01:55 | bottom in dataLoaded. We are going to
override this method or redefine what
| | 01:59 | this method does in the SlideshowModel
class. So that we can react differently
| | 02:04 | once the data is loaded.
| | 02:05 | So with a protected method not only can
you just use it in a descended class or
| | 02:11 | sub-class but you can also override
that method and redefine it in a sub-class.
| | 02:18 | So let's go back to SlideshowModel and
we will see how this works. So let me go
| | 02:21 | down a few lines, right below the
constructor and I'm going to type override
| | 02:26 | protected function updateData. And
that's going to have void for the return
| | 02:35 | data type, no parameters.
| | 02:37 | And for right now we are not going to
put anything inside of it. Basically what
| | 02:41 | this is saying is whatever I define
inside of this subclass of Model for
| | 02:47 | updateData, it's going to override the
original definition of updateData in the
| | 02:54 | Model class. SO update data is now
going to run whatever is defined in
| | 02:59 | SlideshowModel instead of Model.
| | 03:02 | So let's override one more method. So
I'll type override protected function
| | 03:10 | dataLoaded. It's to receive an
event with the data type of Event.
| | 03:18 | It's going to be void and inside of
here we are going to do something pretty
| | 03:23 | similar to what we did in the Model
class i.e. we are going to set data equal
| | 03:27 | to the loader's data. However, since
we know we are working with XML data in
| | 03:31 | the SlideshowModel we are going to data
type it to XML, so type new XML and in
| | 03:36 | the parenthesis pass in loader.data.
| | 03:38 | Remember the data property in the
Model class is defined as an asterisk,
| | 03:43 | meaning it can be any data type. So
it's perfectly acceptable to set it as an
| | 03:47 | XML instance here.
| | 03:48 | Further the loader property is not
defined in the SlideshowModel class but
| | 03:52 | rather it's a protected property in the
Model class. Meaning it can be accessed
| | 03:57 | by its sub-classes. All right, right
below we will reset the data. The next
| | 04:01 | step is to set the value of images.
Remember that's the XML list of all the images.
| | 04:07 | Images is going to be equal to data.
image. Image again is the repeating XML
| | 04:14 | element inside of our XML file. Since
it's a repeating element, Flash reads it
| | 04:18 | as a XML list. So we are setting
images equal to all of those images. We can
| | 04:24 | access them using an array access
notation, which we will do later on.
| | 04:27 | Go to the next line and then we will
just run setCurrentIndex, passing in the
| | 04:33 | value of currentIndex, which again is
defined in the Model class. Save this file,
| | 04:39 | File > Save, and then I'm just
going to jump over to my FLA file.
| | 04:44 | Take a look at the code in the Timeline.
It's the same code that we wrote in the
| | 04:47 | previous movie, just creating a new
instance of SideshowModel and running
| | 04:51 | dataChanged once the data has been changed.
| | 04:54 | So just making sure this works.
We'll test the movie and we don't get any
| | 04:57 | errors and we get the appropriate
message in the Output window.
| | 05:01 | So we are good to move on.
| | Collapse this transcript |
| Working with external XML data| 00:00 | Now we are going to look at using
the external XML data in our slideshow.
| | 00:06 | Remember that your external XML data is
set up as follows. We are going to tab
| | 00:10 | over to TextEdit to look at the XML
file. So gallery is the root XML element,
| | 00:15 | then there is a repeating element
called image. Each one of those has a child
| | 00:18 | element called file and one called title.
So we are going to be able to access those
| | 00:22 | in this movie.
| | 00:23 | Let's go over to Flash and I'm going
to do that inside of the updateData method.
| | 00:28 | Remember the updateData method
is the last thing that happens before
| | 00:32 | the changeEvent occurs. So this is what
controls how the data is manipulated in
| | 00:37 | this particular Model. So I'm just
basically going to set all of the properties
| | 00:42 | based on the currentIndex.
| | 00:44 | Remember that the currentIndex is
already in bounds when the updataData method runs.
| | 00:50 | That's all based on how everything
is set up in the Model class. So first
| | 00:55 | currentImage = images and the index is
going to be currentIndex. On the next line,
| | 01:05 | set the value of totalItems.
We will set that equal to images.length and
| | 01:11 | some parenthesis.
| | 01:12 | Length is a method of the XMLlist
class. So it's not exactly like an array
| | 01:17 | where it's a property in an array. It's
a method here. So it's something that's
| | 01:22 | kind of a gotcha in ActionScript 3.0.
So if you want to get how many elements
| | 01:26 | are inside with the XMLlist, the Length method.
| | 01:29 | And by the way that doesn't work with
an XML element only in XMLlist. So then
| | 01:34 | we are going to set the value of
currentTitle. That's going to be
| | 01:38 | currentImage.title. And then lastly,
we will set value of currentFile and we
| | 01:46 | will set that equal to currentImage.
file. All right, that's looking good. So
| | 01:53 | let's save the file and
then jump over to our FLA file.
| | 01:56 | Let me go to my ActionScript code
and instead of the trace statement that
| | 02:00 | traces dataChanged, we are going to
trace some properties of the SlideshowModel
| | 02:04 | class. So I'm going to trace m.
currentFile. Test the movie, and you should get
| | 02:12 | the first image file in the Output window.
| | 02:16 | Nice. Last thing we will do is just
check the currentTitle. So I'm going to
| | 02:19 | replace the currentFile with
currentTitle, and there's the appropriate title.
| | 02:28 | So it looks like everything is
working great. So now we have successfully
| | 02:31 | accessed the XML data using our SlideshowModel.
| | Collapse this transcript |
| Creating the SlideShowDocument class| 00:01 | In this movie we are going to take all
of the ActionScript code out of the FLA file
| | 00:05 | and put it in an external ActionScript
file that's connected to the FLA file.
| | 00:11 | This is what is called a document class.
The file I have opened is called
| | 00:15 | SlideshowDocument.as and it's in the
same folder as the FLA file. So if you
| | 00:21 | don't have the Exercise Files make
sure to put it in that same folder.
| | 00:25 | So here we are going to create a basic
class or package. Inside of that package
| | 00:30 | we are going to create a public class
called SlideshowDocument. Make sure the S
| | 00:34 | in Slideshow is capitalized and the D
in the Document is capitalized. Also make
| | 00:39 | sure that matches your file name
as well and it's going to extend
| | 00:43 | the MovieClip class.
| | 00:45 | Now whenever you are creating a
Document class or a class that's going to run
| | 00:49 | your FLA file, it needs to extend the
MovieClip class. So I'm going to extend
| | 00:56 | the MovieClip class here and then I'll
just create the Constructor. Remember
| | 01:01 | that's going to match the name of the
class and the name of the file. So public
| | 01:06 | function SlideshowDocument() and
then we are going to import some of the
| | 01:15 | classes that we are going to use.
| | 01:17 | So above the class declaration, I know
we are going to be using some display classes.
| | 01:22 | So I'm going to import flash.dispay.*.
We will just import them all.
| | 01:27 | That's going to import the classes
like MovieClip and button and other visual
| | 01:31 | objects. We will import flash.events.*,
import flash.net.URLRequest, and
| | 01:41 | finally we will import flash.text.*
and that's going to import text fields in
| | 01:48 | classes to work with text fields.
Those are the built-in classes that we will export.
| | 01:53 | Besides that we are going to need to
import our SlideshowModel class. So type
| | 01:58 | import mvc.SlideshowModel. We are
going to create a public property to
| | 02:04 | represent our Model. So public var,
right above the constructor, call this
| | 02:11 | slideModel, data type it to a
SlideshowModel, and we won't get a bit of value
| | 02:18 | here. And then in the constructor, we
are going to set the slideModel equal to
| | 02:24 | a new instance of the SlideshowModel class.
| | 02:29 | The last thing we are going to do is
have the slideModel load the external XML
| | 02:34 | file. Now you can actually create a
URLRequest right here. So inside of the
| | 02:40 | parenthesis I can create a new
instance of the URLRequest class. Since I'll
| | 02:44 | never need to refer to it later and I
don't have to have a property holding it.
| | 02:49 | So I'll create a new URLRequest right
inside the parenthesis there. So have
| | 02:53 | some parenthesis both for the
URLRequest and load and in there I'm going to
| | 02:58 | pass in data.xml. That's all there is
to the SlideshowDocument class. We are
| | 03:03 | not going to listen for the event
because we are going to control that in a
| | 03:05 | later movie.
| | 03:06 | So save the file. File > Save and
return to the FLA file. And in the Timeline
| | 03:12 | we are going to delete the Actions
layer and then in the Property Inspector,
| | 03:18 | make sure everything is deselected and
then in the Class field that's in the
| | 03:22 | Publish area we are going to type the
name of our document class, which is
| | 03:25 | SlideshowDocument, and if Flash lets
you type that in and click away and it
| | 03:36 | stays in the field, then it means
SlideshowDocument is defined and that
| | 03:40 | everything is working properly.
| | 03:41 | Let's test the movie to make sure
we don't get any errors.
| | 03:46 | Looks like everything is working okay. Now
our document class is set up and all of the code
| | 03:51 | is out of the FLA file and in an
external ActionScript class files and now
| | 03:55 | the model part of our application is complete.
| | Collapse this transcript |
|
|
6. Building a View ClassDefining the View class| 00:00 | In this chapter, we are going to be
looking at the View classes of our
| | 00:03 | application. Remember the View class
controls what the user sees and it's
| | 00:10 | dependent on updates of the model.
My View class here is saved in the mvc
| | 00:17 | folder, so it's in the MVC package.
| | 00:20 | So we will create the class. So we'll
declare that it's in the MVC package and
| | 00:25 | it's a public class called View, just
like the name of the file, capital V. And
| | 00:29 | just like the model class we created,
this is going to be a View class that can
| | 00:34 | be extended to add specific
functionality. So this is going to be the view
| | 00:39 | super class. This class isn't
going to extend any other class.
| | 00:43 | So I'm going to write some curly
braces there, and before we move on, I know
| | 00:48 | I'm going to be using the Event class
in here. So I'm going to import the Event
| | 00:53 | class. Right above the class declaration,
import flash.events.Event, capital E.
| | 01:01 | Then inside of the class we will
declare the constructor method. So public
| | 01:05 | function View, no parameters, and
that's it. I'm going to declare one private
| | 01:11 | property right above the Constructor,
and that's going to be called _model. The
| | 01:18 | data type of this is going to be a Model.
| | 01:20 | Then we are going to use get and set
methods to make the model property public.
| | 01:26 | So I'll only be manipulating the true
model, which is _model of the private
| | 01:30 | property in the View class, but will
give access to it through public get and
| | 01:36 | set methods. Let's define
those get and set methods now.
| | 01:39 | First we will define a set method. So
public function set model, this is not
| | 01:44 | going to have an underscore. Remember
this is going to be the public version of
| | 01:47 | the property and some parentheses and
it's going to need to receive a model to
| | 01:52 | set the value, so type m, data type it
to a Model. It's going to return void
| | 01:57 | and then inside of the method, we are
going to set _model to the value that's
| | 02:01 | passed in as m.
| | 02:02 | Then we are going to add an event
listener to listen for the change event. So
| | 02:06 | it's going to be model_model.
addEventListener and the event is going to be
| | 02:13 | model, which we don't have to import
because it's in the same package as the
| | 02:16 | View class, .MODEL, all caps, _CHANGE,
also all caps. Then we will run a method
| | 02:23 | called update.
| | 02:25 | So another advantage to using get and
set methods is that we can run a block of
| | 02:30 | code, instead of just setting the
value inside of the method. So by setting a
| | 02:36 | model, we automatically add the event
listener to that model in here. So that
| | 02:40 | saves us a step, when we
are using the View class.
| | 02:43 | So below this, I'm going to define
the get method for the model and then we
| | 02:47 | will define the update method. It's
going to run, whenever the model is
| | 02:50 | updated. So I declare a public
function called get model, it doesn't have any
| | 02:58 | parameters, return data type is going
to be an asterisk, I'll tell you why in
| | 03:02 | just a minute, and then some curly braces here.
| | 03:06 | Now why on earth will the return data-
type be asterisk? Well, inside of the
| | 03:11 | method I'm just going to return _
model. Now, go through polymorphism, a
| | 03:19 | slideshow model can't count as a model.
We don't want the data return from the
| | 03:24 | model to be just a model. We want it to
be whatever data type the subclass is.
| | 03:29 | So we wanted to be a slideshow model,
when we are using a slideshow model and a
| | 03:33 | regular model for using a regular model.
You don't absolutely have to do this
| | 03:37 | and there are some ways around it, but
this just makes it easier when we are
| | 03:40 | writing the code later on. So all it's
going to do is just return _model, and
| | 03:44 | again, that could be an instance of
the model class or an instance of the
| | 03:48 | slideshow model class.
| | 03:49 | Last thing we need to do is define the
update method. I'm going to define that
| | 03:52 | right above the set model method. So
it's going to be a public method called
| | 03:58 | update, and it's going to receive an
event with the data type of Event.
| | 04:04 | No return data, so void in there.
We are not going to put anything inside of
| | 04:08 | this method for now.
| | 04:10 | The update method is going to occur,
whenever the model is updated. So whenever
| | 04:14 | the data changes, we are going to
update the view. So the view is completely
| | 04:19 | dependent on the data of the model.
Here we are not going to define anything;
| | 04:23 | we are going to leave that to the
subclass to define. Also, let's say we wanted
| | 04:28 | to update the view for another reason.
May be the model didn't change, but we
| | 04:32 | still want to update the view.
| | 04:33 | In order to run an event-handler method
without causing an event, we just have
| | 04:39 | to make sure that this event
parameter has a default property. So if we run
| | 04:45 | update without passing in an event,
then the method will still work properly.
| | 04:49 | All we have to do is just initialize
this to null in the parameters area. So
| | 04:54 | event with a data type of Event, with a
capital E, equals null. So if no value
| | 04:59 | is passed in when update method runs,
then it will still work properly, and
| | 05:04 | that is our View class, and now we
are ready to extend the class and add
| | 05:09 | specific functionality to it.
| | Collapse this transcript |
| Creating the SlideShowView class| 00:01 | In this movie, we will create the
SlideshowView class, which will extend the
| | 00:05 | View class to add specific
functionality for our application. Before we write
| | 00:10 | the SlideshowView class, I want to direct
your attention to the setup of this FLA file.
| | 00:15 | On the stage there is a big white
rectangle that is an instance of a movie clip
| | 00:20 | called MainContent. In the Properties
panel when the movie clip is selected,
| | 00:26 | you could see that the instance name
is container_mc. So this is going to be
| | 00:31 | the container for all of the view's content.
| | 00:34 | We are going to double-click the
container and inside of there, there is only
| | 00:38 | one shape. It's a drawing object. We
are going to look at how to work with this
| | 00:44 | later on. So if you don't have the
Exercise Files, just create a movie clip,
| | 00:49 | give it an instance name of container_mc,
and put a big white rectangle inside of it.
| | 00:54 | We will go over to SlideshowView and
you will see that it's a blank class and
| | 00:58 | it's inside of the mvc package with our
other Model View Controller classes. So
| | 01:04 | define that it's inside of the mvc
package, some curly braces there, and create
| | 01:10 | the public class SlideshowView. It's
going to extend the view and to give a
| | 01:16 | little bit more space here; I'll just
minimize the Properties panel and the Timeline.
| | 01:19 | Some curly braces below that,
define the Constructor, public function
| | 01:27 | SlideshowView. Now we'll import the
classes that we are going to be using in
| | 01:34 | this file. We are going to be using a
lot of display classes. The bitmap class,
| | 01:39 | the bitmapdata class, the loader class,
the shape class, and the sprite class.
| | 01:44 | So what I'm going to do to save some time?
I'm going to import flash.display.*
| | 01:51 | and that's just going to
import all the display classes.
| | 01:54 | Next I'm going to use the
event class. So I'm going to import
| | 01:57 | flash.events.Event. Next I'll
import the URLRequest class. So import
| | 02:06 | flash.net.URLRequest. And last I'm
going to import the TweenLite class.
| | 02:15 | So if you are following along, make
sure that you have the gs folder for
| | 02:18 | TweenLite inside of the same folder as
your FLA file, or at least in your class
| | 02:23 | path. So import gs.TweenLite. We are
going to be using TweenLite to fade in and
| | 02:31 | fade out images in the slideshow.
| | 02:34 | In the Constructor Method, we are
going to receive one parameter. Above the
| | 02:38 | Constructor Method, I'm going to
create one public property called container.
| | 02:43 | This is going to represent the
container for all of the content
| | 02:48 | that's going to be displayed.
| | 02:49 | So in our FLA file, we saw that the
container element was that container_mc
| | 02:54 | movie clip. So I'm going to create
a public property called Container,
| | 02:58 | data type it to Sprite. Valid data is
anything that extends the Sprite class
| | 03:04 | which movie clip works for. Then we
have the public method SlideshowView which
| | 03:08 | is the Constructor. In there we will
receive a parameter called c, which will
| | 03:12 | also be a Sprite. We will set container
= c. So basically we're going to create
| | 03:19 | a new instance in slideshow class.
When we create a new instance of the
| | 03:23 | SlideshowView class, we passed in the
container object and it's held in that
| | 03:27 | public property. Then we are going to
set the property of its buttonMode equal
| | 03:32 | to true. So container.buttonMode = true.
| | 03:36 | When you set an object's buttonMode =
true, you will see a hand cursor if the
| | 03:41 | object is mouse active. In other words,
if it has an event listener listening
| | 03:46 | for a mouse event, then you will see
the hand cursor when you hover over that object.
| | 03:50 | This is the default setting
for button symbols, but not the default
| | 03:54 | setting for movie clip
symbols as well as sprites.
| | 03:58 | There is our basic SlideshowView class.
So let's save the file and move on.
| | Collapse this transcript |
| Setting up properties and methods| 00:01 | In this movie, we will set up some
properties and methods for our slideshow
| | 00:04 | view class. The first thing that we
are going to do is create some more
| | 00:08 | properties above the Container
property that we already created. I'm going to
| | 00:12 | create a private property called Loader.
That's going to be an instance of the
| | 00:16 | Loader class. We won't give it a
value yet. We will just declare it.
| | 00:19 | Create another private property called bmp.
That's going to be a bitmap image.
| | 00:25 | The Loader is going to be the object
that does all the loading of all the files.
| | 00:30 | The Bitmap object is basically going to
hold copied bitmap data from the Loader
| | 00:35 | object and fade that out when the user
picks a new slide to look at. The way
| | 00:40 | that it will be organized is that there
is only one loader instance loading the
| | 00:44 | file and one bitmap image.
| | 00:46 | One of the alternatives is to create a
new loader instance every time we load a file,
| | 00:50 | but that can create a memory issue.
This way, we have one loader instance
| | 00:55 | and one bitmap and the application is
optimized. We will look at more about how
| | 01:00 | that works in a later movie. I'm going
to go down a few lines and create one
| | 01:04 | more property. This one is going to
be public and it is called bg.
| | 01:08 | The data type is a Shape.
| | 01:09 | This is going to be the background
shape in that container movie clip.
| | 01:14 | Remember that the movie clip container_mc
in the FLA file contains a white rectangle.
| | 01:20 | We are going to hold it in this property.
Now let's go inside of our constructor
| | 01:25 | and below where we set the other
properties, we will set some more properties.
| | 01:29 | So we will set the value of bg=container
.getchild(0); This is going to grab the
| | 01:37 | one and only child object of the
container, which is simply the background object.
| | 01:42 | So we are holding that shape in the bg
property. Next, we will set bmp equal to
| | 01:48 | a new instance of a Bitmap class. Then
we will set loader = new instance of the
| | 01:53 | Loader class. We will add the Bitmap
and the Loader as children of the container.
| | 01:58 | So container.addChild(bmp),
container.addChild(loader).
| | 02:10 | And last we will have the Loader listen for
the complete event that will execute when
| | 02:14 | the file is done loading.
| | 02:17 | So loader.contentLoaderInfo. Remember
that you don't add the event listener to
| | 02:21 | the Loader; you add it to
its contentLoaderInfo property.
| | 02:25 | .addEventListener and the event is
going to be event.COMPLETE. Remember that
| | 02:30 | complete is in all caps and then we
will run a method called imageLoaded.
| | 02:37 | Now let's define the imageLoaded method.
| | 02:39 | This is going to be a private method so
a private function, imageLoaded, it is
| | 02:45 | going to receive an event with the data
type of Event. Now return data types,
| | 02:49 | so void, and then we won't put anything
inside of it for now. Now let's create the
| | 02:55 | update method. Remember that the
update method was a public method defined in
| | 03:00 | the SlideshowView's parent class,
View. Here, we are going to override it
| | 03:05 | specifying SlideshowView's own
definition of the update method. So it is going
| | 03:10 | to be override the public function update
and it needs to be exactly the same in
| | 03:17 | its definition as it was in its
superclass or its parent class.
| | 03:22 | And that is it needs to receive an
object called event, with the data type of
| | 03:27 | Event and the initial value is going
to be null. Return data type is void and
| | 03:35 | add some curly braces. So anything we
put in here will override the definition
| | 03:39 | of the update method in the View class.
So I'll save the file, File > Save, and
| | 03:45 | now our properties and methods are set up.
| | Collapse this transcript |
| Connecting a model| 00:00 | Now we will look at creating a new
instance of the SlideshowView class in the
| | 00:04 | SlideshowDocument class and connecting
that instance with a model. So in the
| | 00:09 | SlideshowDocument class, right below
importing SlideshowModel, I'm going to
| | 00:14 | import mvc.SlideshowView. Now we will need
to create a property to represent the view.
| | 00:22 | So I'll create a new public property
in the property section called slideView
| | 00:27 | and data type it to SlideshowView.
Right above where I defined the
| | 00:31 | SlideshowModel in the constructor,
I'm going to give the value to the
| | 00:35 | SlideshowView. So slideView = new
SlideshowView(). Remember that in the constructor,
| | 00:43 | we need to pass in a container
and that is container_mc from the
| | 00:48 | main Timeline of our FLA file. So if
I select it here in the FLA, you can see
| | 00:53 | that it's container_mc.
| | 00:56 | Back to SlideshowDocument. Before I
load the data file in slideModel.load,
| | 01:02 | I'm going to go right above that,
set the model property of the slideView,
| | 01:06 | so slideView.model. Remember that's a
property defined in our View class so the
| | 01:14 | view has a public property called
Model and when we set that value,
| | 01:17 | it automatically listens for the Model_
Change event. So I'm going to set that
| | 01:21 | equal to slideModel and that's all
there is to making this file work.
| | 01:25 | So we have created a new SlideshowView
and connected it to a model using its
| | 01:29 | model property. To test if everything
is working properly, I'm going to save
| | 01:33 | this file, so File > Save, go over to
the SlideshowView class file and then
| | 01:39 | I'm going to put a trace
statement in its update method.
| | 01:41 | Remember, the update method executes
whenever the model is updated,
| | 01:45 | so I'm going to trace "Model updated!",
save the file, File > Save, go to the FLA file.
| | 01:58 | If it's working properly, we will
see the Model updated message; if not,
| | 02:02 | we will get an error. So test the movie
and sadly, we have an error. I'm going to
| | 02:07 | close the Preview window.
Let's take a look at the error.
| | 02:09 | It says implicit coercion
of a value with static type
| | 02:12 | flash.display.DisplayObject to a
possibly unrelated type flash.display.Shape.
| | 02:18 | Now just as a tip, if you get a whole
bunch of error messages when you test the movie,
| | 02:22 | typically, solving the first
error will fix everything else.
| | 02:26 | So I'm just going to double click that
first error and Flash will take me to the code
| | 02:30 | that's breaking the rules. So it takes
me to bg = container.getChildAt(0).
| | 02:36 | Now something very important and an
error message that you may run into
| | 02:40 | frequently. That's why I'm talking
about it here. When you set a value that is
| | 02:46 | not a display object, so bg is a shape,
equal to the returned value from the
| | 02:52 | getChildAt, then you are going to run
into a problem. The getChildAt method is
| | 02:58 | a display object. So container runs
that method and returns to display object.
| | 03:02 | So basically we are saying a shape
equals a display object. That's where
| | 03:07 | the error comes in.
| | 03:08 | However, we know that the ChildAt(0)
is in fact a shape. So really, this code
| | 03:14 | isn't a big mistake because we know
what we are doing. Flash is just confused
| | 03:18 | because of the data type returned from
getChildAt. All you need to do is tell
| | 03:23 | Flash what type of data to treat
the display object as. So I know that
| | 03:29 | ChildAt(0) is a shape, so I just have
to tell Flash to treat that as a shape.
| | 03:34 | So if I type Shape right before
container.getChildAt(0) and wrap that all in
| | 03:39 | parenthesis, then everything is going
to work properly. So all we are doing is
| | 03:44 | saying, hey Flash, treat this data as
a shape. It's not going to change the data.
| | 03:49 | It just tells Flash a different way
to treat it. So let's save the file again.
| | 03:53 | You can actually test
right from this class file.
| | 03:56 | So if you don't see any errors, that's
great. Close the Preview window and
| | 03:58 | you see "Model updated!" Now we have
successfully connected the model to our
| | 04:03 | SlideshowView class and we have fixed
an error by what's called typecasting. So,
| | 04:09 | if you are ever trying to get code that
returns a display object and set it as
| | 04:12 | something else like a shape or a movie
clip or whatever data type, you can tell
| | 04:17 | Flash to treat it as whatever data
type you want by typing the name of that
| | 04:20 | data type, which in this case is Shape,
and passing that data into parenthesis.
| | Collapse this transcript |
| Loading external images| 00:00 | Now we are going to actually make our
SlideshowView class display visual data
| | 00:06 | by loading external images. I'm going
to scroll down in the SlideshowView class
| | 00:11 | to the update method. I'm going to
delete the Trace statement that's there and
| | 00:15 | I'm going to replace it with making
the loader load the external file.
| | 00:18 | So loader.load and in the parenthesis
I'm going to create a new URL Request.
| | 00:24 | I'm going to pass in a new URLRequest
in the parenthesis. Just like we looked
| | 00:31 | at in an earlier movie, you don't
necessarily need to create a variable to hold
| | 00:35 | the URLRequest. You can just
create it when you are loading the file.
| | 00:39 | The file that we are going to load is
whatever the model's current file is. So
| | 00:44 | it is going to be model.currentFile.
Remember that's a property of the model
| | 00:48 | that it represents the current image
file. So that's going to load and then
| | 00:52 | once it's loaded the imageLoaded
function is going to execute. Remember that
| | 00:57 | what's defined in the constructor
when we added the event listener to the
| | 01:01 | loader. So when the image is loaded I'm
just going to bring loader all the way
| | 01:05 | to the front. So it's going to
be container.addChild(loader).
| | 01:09 | So it's going to bring that loader to
the front of the container and that's
| | 01:14 | really all there is to it. If I go to
File > Save and I test the movie which I
| | 01:19 | can do directly from here and if the
FLA file is open and it says the name of
| | 01:23 | the FLA file I want to use in the
Target area, this will work. So test the
| | 01:27 | movie and there is the first image
displaying in the slideshow, nice.
| | 01:34 | So now our SlideshowView is successfully
connected to the model and can display images.
| | Collapse this transcript |
| Using TweenLite to animate images| 00:00 | Instead of just loading the images and
making them appear, we are going to use
| | 00:04 | TweenLite to make the images fade in
when they are done loading. Remember that
| | 00:09 | for this to work you will need to be
importing the TweenLite class and you will
| | 00:13 | need to have the GS folder in the
same folder as your FLA file or in your
| | 00:17 | classpath. Scroll down
to the imageLoaded method.
| | 00:21 | Right below the code we already have,
so that's going to be loader.alpha = 0,
| | 00:27 | and then we are going to use TweenLite.to
to fade it in. So go to the next line,
| | 00:31 | type TweenLite.to and in the
parenthesis we pass in three parameters.
| | 00:36 | First, the object that we want to tween,
which is the loader; second, the amount
| | 00:40 | of time we want the tween to take,
which I'm going to put here as one.
| | 00:44 | You can do a faster tween if you'd like,
but just for the video demonstration,
| | 00:49 | I wanted to take a little bit
more time so that you can see it.
| | 00:51 | So the third parameter is going to be
an object, so it's in curly braces and
| | 00:55 | then we are just going to have the
alpha go to one. So alpha:1 and that's it.
| | 01:00 | Save the file, File > Save, test
the movie and the image fades in
| | 01:10 | and that's all there is to using TweenLite.
We just set the alpha over the loader to zero
| | 01:15 | and faded in using the TweenLite engine.
| | Collapse this transcript |
| Optimizing image loading with bitmaps| 00:00 | In this movie we are going to look at
how to cross fade images using bitmaps.
| | 00:06 | We are going to start out by
manipulating the model in our SlideshowDocument
| | 00:11 | class and watching the images change.
In the bottom of the constructor I'm
| | 00:15 | going to type container_mc.
addEventListener and the event is going to be
| | 00:21 | MouseEvent.CLICK.
| | 00:25 | Since I'm using the MouseEvent class
we will need to make sure that that gets
| | 00:27 | imported. And it is, because I'm
importing all events. And then I'll run a
| | 00:33 | method called containerClicked. Let's
define it as public it doesn't matter if
| | 00:39 | you define it as public or private
because no other classes are going to use
| | 00:43 | the methods in this class anyway.
| | 00:45 | So containerClicked is going to be an
event with the data type of MouseEvent,
| | 00:53 | no return data type and in here we are
going to change the slideModel's current
| | 00:58 | index. So it's going to be slideModel.
setCurrentIndex. This allows us to change
| | 01:06 | the current index of the slideModel
and in the parenthesis we are going to
| | 01:10 | change the current index by adding
1 to the slideModel's CurrentIndex.
| | 01:15 | So it's going to be slideModel.
currentIndex +1. So it's just going to go to the
| | 01:22 | next image. So whenever we click the
container, then the slideshow is going to
| | 01:27 | go to the next image. So let's save
the file. Because remember that when we
| | 01:31 | change the index in the slideModel,
that model change event occurs, which the
| | 01:35 | view is dependent on for updating. So
whenever the model's value changes the
| | 01:40 | view will update.
| | 01:41 | So let's test the movie now, make sure
that your FLA file is set as your target
| | 01:46 | in your class so that we have our
image 1 loading in and now when I click it
| | 01:52 | the next image loads in. So it
disappears and then starts loading in a new one.
| | 02:00 | That looks great and you may be
perfectly happy with this and that's fine. If
| | 02:04 | you are then you could just have your
application work like this. But let's say
| | 02:08 | you wanted to cross fade an image and
basically, whenever I start to load the
| | 02:13 | next image I want to create a bitmap
copy of the current image and then fade
| | 02:18 | that out while the loader is loading
the next image and then that will cross
| | 02:22 | fade when the loader is done loading.
| | 02:24 | So I'll close the Preview window, go
to the SlideshowView class and we will
| | 02:28 | look at how to do that. In the update
method above the loader.load line of
| | 02:32 | code, and by the way I'm on line 29 in
the SlideshowView class, I'm going to
| | 02:37 | create an If statement. So if some
parenthesis and some curly braces and in the
| | 02:42 | parenthesis we are going to see
if the loader has any content.
| | 02:45 | Now a really easy way to do that is
to see if the loader's width is greater
| | 02:48 | than 0. So if(loader.width > 0) that
means the loader has some kind of content
| | 02:54 | inside of it. Then we are going to work
our bitmap code. So the first thing we
| | 02:59 | are going to do is put the bitmap
in the front. So it's going to be
| | 03:02 | container.addChild and the child is
going to be bmp, so it's that bitmap image.
| | 03:07 | Next we are going to set the bitmap's
Alpha equal to 1. So bmp.alpha=1 and then
| | 03:15 | on the next line we will work with the
bitmap's bitmap data to create a copy of
| | 03:20 | the loader. Now if you remember, a
bitmap data is an array of pixel information
| | 03:25 | that's displayed by a bitmap object
and you can actually adjust bitmap data
| | 03:30 | through its bitmap data property.
| | 03:31 | So I can type bmp.bitmapData=new
BitmapData and then I can define the width and
| | 03:39 | height of the bitmap data object here.
So that would be loader. Content, that's
| | 03:46 | the content that's inside of
the loader image.height.width,
| | 03:52 | loader.content.height. So the bitmap data
is the same size as the content in the loader.
| | 03:58 | Go to the next line and then we will
have the bitmap data draw the loader. So
| | 04:03 | it will basically just copy the loader.
So bmp.bitmapdata.draw(loader). Pass in
| | 04:09 | the loader and there is a copy of the
loader. Now to make it cross fade we just
| | 04:14 | need to fade out this bitmap. We will
do that using TweenLite. So go to the
| | 04:18 | next line and then type TweenLite.2
and in the parenthesis we will first pass
| | 04:23 | in the bitmap. That's the object to fade.
Time to fade, which I'm going to type
| | 04:27 | as 1 but you can do one or less if you
like. And then finally the object that's
| | 04:32 | going to have the
finished values for properties.
| | 04:36 | So we are going to have the fade out.
We are going to fade the alpha to 0. So
| | 04:39 | {alpha:0}, save the file with File >
Save and test the movie to check out the
| | 04:47 | cross fading.
| | 04:49 | So now when I click on the image, the
current image fades out and the new one fades in.
| | 04:58 | And I can keep clicking images,
going through all of them and
| | 05:02 | they will loop properly because the model
controls how the current index works. So
| | 05:08 | if we try to go out of bounds of the
current index then the model simply loops
| | 05:12 | around and goes to the first image.
Pretty nice, huh? With that said we have
| | 05:19 | successfully set up cross fading
for our images using a bitmap copy.
| | Collapse this transcript |
| Updating text fields| 00:00 | Now we are going to create another
class that extends our View class that will
| | 00:05 | control the updating of the text in
our FLA file. Before we write the code I
| | 00:10 | want to show you a little bit more
about how our FLA file is set up.
| | 00:13 | On the stage I have a text field to
hold the title of each image and that's
| | 00:17 | called title_txt. So it's a dynamic
text field. If you don't have the Exercise File,
| | 00:22 | make sure to create that now.
And then on the bottom right of the image
| | 00:28 | there is a little movie clip called
right_mc; this is all the content on the
| | 00:32 | right. If I double-click it, inside
of there, there is a text field called
| | 00:35 | numbers_txt.
| | 00:37 | So those are the two elements we are
going to be manipulating here. Let's go
| | 00:41 | over to SlideshowTextView.as and this
is again in the mvc package. So if you
| | 00:46 | don't have the Exercise Files, make
sure to create this file in the mvc
| | 00:50 | package. So package mvc and inside up
here public class SlideshowTextView,
| | 00:57 | I should expand my working area here and
this is going to extend the View class.
| | 01:06 | So some curly braces below that and
before we define the constructor, we are
| | 01:12 | going to be using a few classes in here.
So we will import those now.
| | 01:16 | Import flash.events.Event and also import
flash.text.TextField. Now we will define the constructor.
| | 01:28 | So public function SlideshowTextView()
and some curly braces and
| | 01:38 | now we are going to have a couple of
public properties. One called the title
| | 01:42 | and one called numbers.
| | 01:43 | The title will represent the title of
the image and the numbers will represent
| | 01:47 | the numbers displayed below the image.
Those numbers refer to the amount of
| | 01:52 | total images of the slideshow and
the number of the image that you are
| | 01:56 | currently viewing. So the first image
which would be 1 out of 10 for example,
| | 02:00 | if there were 10 total image or 2
out of 10, 3 out of 10 and so on.
| | 02:03 | So we are going to create two public
properties: public var title and that's
| | 02:09 | going to be a text field and then
another public property called numbers, also
| | 02:16 | a text field. In the constructor we
are going to pass in two properties, one
| | 02:21 | for the title text field and one for
the numbers text field. So t is a text
| | 02:25 | field and then n will also be a
text field. And all we will do in the
| | 02:30 | constructor is capture those values
in our title and numbers properties.
| | 02:34 | So title=t, numbers=n and below the
constructor we will define that update
| | 02:42 | method that defines what happens when
the model is updated. So override public
| | 02:49 | function update, and remember it has
to receive an event object called event
| | 02:54 | with the data type of Event and an
initial value of null, return data type
| | 03:00 | needs to be void and here we will just
update those two text fields. title.text
| | 03:06 | = model.currentTitle, and this is
going to be title of the current image.
| | 03:13 | And then we will go to the next line
and set the text for the numbers text
| | 03:16 | field. So numbers.text =, and this is
going to be a little more complicated.
| | 03:21 | We are going to take a number and convert
it to a string and the number is going
| | 03:23 | to be model.currentIndex+1. Remember a
model's index starts at 0 and we don't
| | 03:30 | want image 1 to show a 0 in the text
field. We want it to show a 1 and this is
| | 03:36 | going to display the current image/ and
then the total number of images in the model.
| | 03:42 | So to add on a forward slash after
this I'm going to use the concatenation
| | 03:47 | operator, which is a plus sign, and
I'll just add on a forward slash. So type
| | 03:51 | some quotes and then a forward slash
and quotes and then a plus sign after that
| | 03:55 | and then another String, which will
convert from a number. So String() and the
| | 04:00 | number is going to be the total
number of items in the model. So it's
| | 04:03 | model.totalItems and that looks good.
| | 04:07 | So all we have to do now is connect
this SlideshowTextView to a model in the
| | 04:12 | SlideshowDocument class and
everything will work. So we will save the file,
| | 04:16 | File > Save, and then jump over to
SlideshowDocument and then we will have to
| | 04:21 | import SlideshowTextView. So import mvc.
SlideshowTextView and it will create a
| | 04:28 | public property and we will call
this textView. Data type will be a
| | 04:34 | SlideshowTextView. We will create a new
instance of the SlideshowTextView. I'll
| | 04:40 | do that right below where we
create the slideview. So textView = new
| | 04:46 | SlideshowTextView. Make sure to have
the appropriate casing and then we are
| | 04:51 | going to pass in the title text
field and then the numbers text field.
| | 04:55 | The title text field is just title_txt
and the number text field is right_mc.
| | 05:04 | That's the movie clip that contains
the text field. Remember we can access
| | 05:08 | child objects using dot syntax. This
is only for child objects that were
| | 05:13 | created on the stage in the FLA
file by the way. So it's going to be
| | 05:16 | right_mc.numbers_txt and the last thing
that we have to do is connect the model
| | 05:24 | to the textView.
| | 05:25 | So right below slideView.model=
slideModel in the constructor
| | 05:30 | textView.model=slideModel. And that
is it. So we have set up the textView class,
| | 05:37 | we have created a new instance
of the textView class, added a model to it
| | 05:41 | and now it's going to update along
with the slideView. So save the file,
| | 05:46 | File > Save and then test the movie
and you will see that the text fields are updated.
| | 05:53 | So here is the description of this
image, which is liquid gold, and then
| | 05:56 | the number on the image, which is 1 out
of 14, and as I click through the images
| | 06:01 | you will see the text update at the
bottom and you will see the image number
| | 06:04 | update at the bottom as well. So now
we have successfully connected a second
| | 06:09 | view to our application to display the text.
| | Collapse this transcript |
|
|
7. Building a Controller ClassDefining the Controller class| 00:00 | In this chapter we are going to be
working with our Controller classes.
| | 00:04 | Remember the Controller class
manipulates the model. So the controller will
| | 00:09 | manipulate the model and the model will
send notification then it's updated and
| | 00:13 | then the view updates.
| | 00:15 | The controller mainly works with user
interactivity to manipulate the model. So
| | 00:20 | this file, Controller.as, is in the
same file as our other classes. So that's
| | 00:25 | the mvc folder. So this class is
going to be a part of the mvc package. So
| | 00:31 | package mvc and we will declare the
class and this class is not going to extend
| | 00:40 | anything and we will declare the
constructor and there we go. We are going to
| | 00:50 | need to import one class that's the event class.
| | 00:55 | So it's import flash.events.Event and
then above the constructor we are going
| | 01:03 | to have one public property called
Model. Data type is going to be model.
| | 01:10 | Remember we don't have to import it
because the model class is in the same
| | 01:13 | package as the controller. And then
in the constructor we will receive one
| | 01:17 | parameter called m and that's going
to be a model and then we will set the
| | 01:21 | value inside the constructor. So model = m.
| | 01:23 | Now we will define two public methods.
First one is called nextItem as it's
| | 01:31 | going to receive an event with the
data type of event initialized to null.
| | 01:38 | Return data type is void and I'll just
write the curly braces there. By having
| | 01:41 | an event with the data type of Event
we can trigger nextItem with any type of
| | 01:46 | event because remember that every
Event class is a sub class of the event
| | 01:53 | class. So we can trigger it with an
event or without an event because it has an
| | 01:57 | initial value of null.
| | 02:00 | All we are going to do here is
manipulate the model's data. So it's going to be
| | 02:03 | model.setCurrentIndex and in the
parenthesis we are just going to add one to
| | 02:10 | the model's Current Index. So it's
model.currentIndex+1. So what I'm going to
| | 02:16 | do is just copy this entire method
and then make one to go to the previous item.
| | 02:21 | So Command or Ctrl+C copy. Paste it
below using Command or Ctrl+V. Change
| | 02:28 | nextItem to prevItem, short for
previous item, in the pasted code and then
| | 02:33 | change the plus sign in the pasted code
to a minus sign. And that is all there
| | 02:38 | is to the Controller class.
| | 02:40 | So basically it just manipulates the
model using the nextItem and prevItem
| | 02:45 | methods. So I'll choose File >
Save and the Controller is complete.
| | Collapse this transcript |
| Creating the SlideShowController class| 00:00 | Now we are going to extend our
Controller class in a class called
| | 00:04 | SlideshowController. This class should
be in the mvc folder. So it can be part
| | 00:10 | of the mvc package, package mvc and
some curly braces. Now I'll declare the
| | 00:17 | public class SlideshowController to
extend Controller class. Again make sure
| | 00:28 | that your class name matches your file
name and your constructor name. We will
| | 00:32 | define the constructor right now.
| | 00:34 | Public function SlideshowController and
there is the skeleton of our class.
| | 00:43 | We will import a few classes here that
we were going to use. We're going to use
| | 00:46 | the DisplayObject class. So import
flash.display.DisplayObject and then
| | 00:53 | we're going to import all of the
event classes. So import flash.events.*.
| | 00:58 | Now remember that the Controller had a
value passing to the constructor called
| | 01:03 | m and that was a model. So we are
actually going to need to do that here. So
| | 01:07 | every time we create a sub class of
the Controller, it's going to need to
| | 01:10 | receive this property. So it's going
to receive m, which is the data type of
| | 01:13 | Model, and then instead of setting the
value of Model here I'm just going to
| | 01:18 | run the constructor of SlideshowController's
parent class, also known as the SuperClass.
| | 01:25 | You run the SuperClass constructor
using the keyword super. So it's basically a
| | 01:31 | method that runs the superclass's
constructor. So just type of super all lower
| | 01:36 | case and in parenthesis pass in m
and that's going to run the Controller
| | 01:42 | constructor method, passing
in the value passing through m.
| | 01:46 | All right. Now let's define a couple
of methods. We are going to define two
| | 01:51 | methods and basically this class is
going to connect buttons in the FLA file to
| | 01:56 | run the nextItem and prevItem methods
that we defined in the Controller class.
| | 02:01 | So we are going to have public method
called addNextButton. So we can add as
| | 02:07 | many buttons as we want and they are
going to go to the next item in the model.
| | 02:11 | So addNextButtons in the parenthesis,
it's going to receive a value called btn.
| | 02:16 | This is going to be a DisplayObject.
So basically any visual object can be a
| | 02:20 | button that goes to the next object in
the model. Void is the return data type,
| | 02:26 | some curly braces and inside of the
curly braces we are going to add an event
| | 02:29 | listener to the button to
listen for the mouse click.
| | 02:31 | So btn.addEventListener and it's going
to be Mouse Event.CLICK and then we will
| | 02:38 | run the function nextItem that was
defined in the SuperClass, in other words
| | 02:43 | the Controller class. So we don't need
to define it here and all I'm going to
| | 02:47 | do is just Copy this method and Paste
it right below and just change the word
| | 02:53 | next to Prev. So addNextButton should
be changed to previous button. Let's add
| | 03:00 | PrevButton. Make sure to capitalize
the P by the way and then instead of
| | 03:03 | running the nextItem methods we are
going to run the previous item methods,
| | 03:06 | which is prevItem capitalized.
| | 03:09 | So when you pass in a button or some
sort of visual object to the addNextButton
| | 03:14 | method then that button will then
have mouse interactivity to go to the
| | 03:18 | nextItem in the model. And the exact
opposite happens to be the previous
| | 03:21 | button. The button will have mouse
interactivity to go to the previous item in
| | 03:25 | the model. And that's all there is to
the SlideshowController class. So let's
| | 03:30 | save the file and now we are
ready to finish the application.
| | Collapse this transcript |
| Connecting buttons to the controller| 00:00 | In this movie we are going to finish
our Model View Controller slideshow
| | 00:05 | application by connecting buttons to
the Controller class. In the FLA file
| | 00:11 | I have a movie clip on the bottom right
and that is called the right_mc, which
| | 00:15 | you can see in the Properties
inspector. If I double-click that movie clip,
| | 00:18 | there are two buttons inside
of it: prev_btn and next_btn.
| | 00:25 | So we are going to connect these
buttons to our SlideshowController class.
| | 00:29 | Let's go over to the SlideshowDocument
and then the first thing I'm going to do
| | 00:34 | is import the SlideshowController
class. So I'm going to import
| | 00:37 | mvc.SlideshowController and then I'm
going to create a new public property.
| | 00:44 | I'll call the slideController
and the data type is going to
| | 00:49 | SlideshowController.
| | 00:52 | After I've define the model, so on line 24,
I'll go to the next line I'll give a value
| | 00:57 | to the slideController.
Slidercontroller = new SlideshowController
| | 01:05 | and then I'll pass in the model, which is
SlideModel. From there I'm going to delete
| | 01:13 | the extra method I created called
containerClicked because from here on,
| | 01:17 | all of the functionality is going
to be controlled using the controller.
| | 01:21 | So I'll delete that method. Delete the
addEventListener line of code and replace it
| | 01:25 | with the following. I'm going to
make the next and previous buttons
| | 01:28 | go to the next and previous data in the
model by using the SlideshowController's
| | 01:34 | add next button and add previous methods.
| | 01:36 | So it's going to be slideController.
addNextButton and then I'm going to pass in
| | 01:44 | the button that I want to make the
model go to the next item. So the first thing
| | 01:50 | I'm going to use is right_mc.next_btn
and then I'm going to copy and paste this
| | 01:56 | line of code. So select it, copy it
with Command+C or Ctrl+C, paste with
| | 02:00 | Command+V or Ctrl+V and then in the
next line I'm actually going to replace
| | 02:03 | right_mc.next_btn with container_mc,
and yes, this is totally acceptable.
| | 02:11 | We can pass in as many objects as we
want as long as they are display objects or
| | 02:15 | descendents of the DisplayObject class.
Pass them into the addNextButton method
| | 02:19 | and then that element magically becomes
a clickable element that will make the
| | 02:24 | model go to the next item. So you can
see really the power of the Model View
| | 02:28 | Controller design pattern here.
It's very easy to control the model,
| | 02:33 | which updates the view once you set everything up.
| | 02:37 | Lastly, I'm going to paste the code in
a second time. So Command or Ctrl+V and
| | 02:40 | then I'm going to change the
addNextButton method to addPrevButton,
| | 02:44 | which is capital Prev instead of Next,
and then I'm going to change the
| | 02:48 | right_mc.next_btn to right_mc.prev_btn.
Save the file with File > Save, preview
| | 02:59 | the application in the Flash Player,
and behold the working finished application.
| | 03:05 | So I can click the next button. Go to
the next image. I can click the previous
| | 03:10 | button to go to the previous image and
I can move forward by clicking on the image.
| | 03:17 | And there is our finished, XML-powered,
Model View Controller object-oriented slideshow.
| | Collapse this transcript |
|
|
8. Improving and Debugging the ApplicationAdding high-definition pictures| 00:01 | In this movie, I'm going to show
you how I added a feature to show high
| | 00:06 | definition pictures to the slideshow.
We are not going to create it from
| | 00:09 | scratch; rather this is just to show
you in what ways you can add it to your
| | 00:15 | Model View Controller applications to
improve them. So, here there is an extra
| | 00:19 | button called toggle hd, and that's
inside of the right_mc movie clip and
| | 00:24 | it's called hd_btn.
| | 00:27 | That's mostly what's changed with the
FLA file. If you deselect everything,
| | 00:31 | you'll notice that there is a new
document class that I'm using, which is
| | 00:34 | SlideshowDocumentHD. We'll look at that
in a minute. And there is a new publish profile.
| | 00:38 | If you go to Publish Profile and
then go to the HTML, I have Flash Only -
| | 00:44 | Allow Full Screen selected.
| | 00:47 | All that really does is it adds a
parameter to your Flash content in the HTML,
| | 00:52 | when you publish it from Flash, and it
sets the Allow Full Screen parameter to true,
| | 00:57 | so that your application can go full screen.
| | 01:00 | I changed it to Percent, to 100% Width
by 100% Height, content is centered and
| | 01:06 | it does not scale. So I have that set up.
I'll just click OK. And the last thing
| | 01:10 | that I added extra was an XML file
that links to high-resolution versions of
| | 01:15 | the same images.
| | 01:16 | Now that we have discussed that, let's
take a look at what we have in our web
| | 01:20 | browser. So I'm going to go to File >
Publish Preview > Default - (HTML).
| | 01:25 | So here is my HTML preview. Notice
that's pretty much the same application and
| | 01:29 | then when I click the toggle hd button,
the application goes to Full Screen.
| | 01:34 | Nothing changes size except for the images.
I can click through the images and
| | 01:42 | we can look at the high-resolution
versions of them. So that's the end result
| | 01:50 | and you can press the Escape to get out
of Full Screen Mode and go back to
| | 01:53 | the regular version.
| | 01:54 | Let's take a look at how it's set up.
I'm going to go to SlideshowDocumentHD,
| | 01:59 | and we'll walk through this file.
You will notice right off that there is a lot
| | 02:03 | more code than in our original
slideshow document class. That's because I put
| | 02:07 | all of the high definition
code inside of this class.
| | 02:11 | So if you scroll down, you'll see some
new properties. I have a public property
| | 02:17 | called hd that's a SimpleButton and
that's going to just hold the hd button.
| | 02:20 | Properties for the original width and
original height of the images, and full
| | 02:25 | width and full height, and these are
going to hold the maximum size of the screen
| | 02:29 | when you go to hd mode. Then I
have a public property called the ratio.
| | 02:33 | If you scroll down, at the very bottom
of the constructor I'm running a method
| | 02:37 | called initializeHD. This just
initializes everything that has to do with high
| | 02:42 | definition content. Here I'm setting
the original width and original height
| | 02:47 | based on the width and height of the
container inside of the slide view.
| | 02:51 | Setting the ratio as origWidth
divided by origHeight and
| | 02:55 | I'm setting the hd button. Here I'm
adding an event listener to the button
| | 02:59 | to run a method called hdClick.
We'll look at that method in just a minute.
| | 03:03 | Next I'm setting the stage's
scale mode not to scale, by using the
| | 03:07 | StageScaleMode.NO_SCALE property.
I'm aligning the stage here to the top-left
| | 03:13 | and that's put the X, Y origin at the
top-left of the stage. Then I'm adding an
| | 03:19 | event listener to the stage to listen
for Event.RESIZE. That's when the stage
| | 03:23 | is resized. This occurs when you go
into or exit out of Full Screen Mode.
| | 03:29 | Then I'm adding an event listener to listen
for when the stage goes into Full Screen Mode.
| | 03:33 | Then I'm running a method called
centerContent. So we have a lot to look at here.
| | 03:37 | Let's start with hdClick. I'm going to
scroll down. I'll find that in my code.
| | 03:42 | And when you click the HdButton,
if the display state of the stage--
| | 03:46 | that's going to be either Normal or
Full_Screen. If it's normal, it will set it
| | 03:50 | to Full Screen; if not, it will set
it to Normal. That's pretty simple.
| | 03:54 | So if you are interested in doing a
full screen Flash content, this is all you
| | 03:59 | have to do. Just make sure that full
screen is initiated inside of a mouse click
| | 04:04 | or a keyboard press. So in order
to go into full screen, the user has to
| | 04:09 | initiate it somehow. You can't just
go into full screen automatically.
| | 04:12 | That's a Flash Player security restriction.
I'll scroll up and the next method to look at
| | 04:17 | is going to be stageResized.
So let's look at that.
| | 04:21 | When the stage is resized, the contents
are centered using the centerContent method.
| | 04:27 | Let's look at that method next.
centerContent is actually pretty simple.
| | 04:31 | It just centers all the content
on the stage. So I'm running the
| | 04:35 | static method called centerObjectToStage
defined in the Utils class and this
| | 04:40 | basically just aligns all the objects
so that they have the same alignment.
| | 04:44 | Now you can look at this code or copy
it down or whatever if you want to.
| | 04:48 | But that's basically what it does.
I'm not going to into detail there.
| | 04:51 | If you want to see these methods that center of
the content, I'm going to go to my Utils file
| | 04:56 | and show you them right now.
| | 04:57 | Again, I'm not going to discuss them
in detail, but you can copy them down
| | 05:01 | if you would like. In the Utils class,
I have a bunch of static methods. These are
| | 05:05 | all for aligning objects. So alignLeft
allows you to pass in an object and
| | 05:11 | then objToAlign is the object that you
are going to move to align to the first
| | 05:16 | parameter passed in. And the Padding
is number of space in between the object
| | 05:21 | and its left edge when you align it to
the left. And so basically alignRight,
| | 05:26 | alignTop, and alignBottom all work in
the same way. CenterObjectToStage simply
| | 05:33 | centers the object to its stage.
| | 05:36 | So again, you can just pause the movie
at any point here and look at how I use
| | 05:40 | the math to align objects, but it's
pretty straightforward for the most part.
| | 05:45 | So back to SlideshowDocumentHD.
So that's every time the size of the
| | 05:49 | stage changes, then the content is
centered. So, last we are going to look at
| | 05:54 | the controlFullScreen method. This
happens whenever the stage goes into or
| | 05:59 | out of Full Screen mode.
| | 06:01 | The first thing that happens is the
unload method runs in the slideView object,
| | 06:07 | and that's an instance of the
SlideshowViewClass. I added that method for this
| | 06:11 | hd program. So I'm going to go over
there now and show you how it works.
| | 06:15 | And I'll show you what else I added to
this class. So I'm in the SlideshowViewClass.
| | 06:18 | The unload method simply stops the
tweens that are currently tweening using
| | 06:24 | TweenLite.killTweensOf, so it stops
the bitmap and loader from animating.
| | 06:29 | It sets both of their alphas to zero
and sets the bitmapData property of the
| | 06:33 | bitmap to null. That just basically
clears out all of that bitmap data so
| | 06:36 | that there is no more bitmap data
inside the bitmap. And then if the loader's
| | 06:40 | width is greater than zero, then the
content inside of the loader is removed
| | 06:44 | using it's unload method.
| | 06:46 | Let's take a look at what else I added.
In the imageLoader method, I'm setting
| | 06:50 | the loader's width and height equal to
the background width and height. This is
| | 06:54 | going to be controlled more in the
SlideshowDocumentHd class, which we'll look
| | 06:58 | at later. Just note for now that
I'm matching the width and height of
| | 07:01 | the background by scaling the loader.
| | 07:04 | One more thing to look at is I
change the update method; this is very important.
| | 07:08 | When you are copying an object
using the bitmapData class,
| | 07:13 | Flash does not copy that object's scaling.
So we changed the width and height of the
| | 07:20 | object in imageLoaded. But when we
copy that image in the update method,
| | 07:24 | that scaling doesn't get copied.
| | 07:26 | So in here, the bitmapData is the same
size as the content width and height of
| | 07:31 | the loader and then I scale the bitmap up.
So you don't scale the bitmap data.
| | 07:36 | You draw the same bitmap data then
you match the scale of the bitmap to the
| | 07:40 | scale of the loader. And that's
all I did here. So let's go back to
| | 07:43 | SlideshowDocumentHd and finish our
discussion of the setup of this file.
| | 07:47 | So now we have unloaded all the
content in the slide view, and then if
| | 07:51 | the stage is Full Screen, here is what
happens. The height of the background object
| | 07:56 | inside of the Slide view-- remember
that's what the loader is dependent on--
| | 08:00 | it goes the height of the stage, minus
the height of the logo minus height of right_mc.
| | 08:06 | Now remember the logo is just simply
the text fill on the top, which is
| | 08:10 | called logo_txt. And then minus 50.
50 is just extra padding for the space of
| | 08:18 | the other visual elements, other than
the image that you are looking at.
| | 08:22 | So this is talking about the logo,
the right movie clip and the title text.
| | 08:26 | So that's going to give those
objects some breathing room.
| | 08:29 | Now here we are setting the
width of the background equal to
| | 08:32 | slideView.container.height*ratio.
Remember the ratio is what we got when
| | 08:38 | we divided the origWidth by the origHeight.
So we are maintaining the same aspect
| | 08:43 | ratio of the image here. And basically
we are saying that the background image
| | 08:48 | is going to be as big as the users
screen can possibly allow, and it's going to
| | 08:53 | maintain the same aspect ratio using this code.
| | 08:56 | Then we load in a new model for the
slideModel. So that loads in a new XML file
| | 09:02 | called hd-data.xml, and that's the one
that contains links to all the hd image files.
| | 09:08 | So again, when that file loads and
initializes, it's going to shoot out the
| | 09:12 | Model_Change event, which is going to
update the view. And that will load the
| | 09:16 | new higher resolution images. If the
fullScreen event is going back to Normal display,
| | 09:21 | then here is what happens.
| | 09:23 | The width and height of the background
inside of the slideView object are set
| | 09:27 | to their original values and the original
data that was loaded, and then of course,
| | 09:30 | the content is centered and
that's it. That's how it works and
| | 09:33 | if you want to see it again, I'll show it
again in the web browser. So File > Publish
| | 09:38 | Preview > Default, and there is the
application and then if I click toggle hd,
| | 09:43 | it's in Full Screen mode, and I press
Escape and it goes back to Regular mode.
| | 09:48 | So now I leave you with this challenge.
Whether or not you have the exercise files,
| | 09:52 | I challenge you to find a
way to recreate this application.
| | 09:56 | And if not recreate this application, then
add your own functionality to the slideshow
| | 10:02 | and see what you can do to improve it.
| | Collapse this transcript |
| Fixing errors in your application| 00:00 | When you are building complex object-
oriented programming applications,
| | 00:06 | it's inevitable that you are going to get
errors in your code every once in a while,
| | 00:10 | unless you are the type of person who
never makes a mistake ever. You are going
| | 00:15 | to make a mistake every once in a
while in your applications. This movie is
| | 00:19 | dedicated to showing you how to
fix those errors when they come up.
| | 00:22 | Here I have our application that's
basically our finished application, but
| | 00:27 | I have gone through the classes and made
three errors throughout the classes.
| | 00:31 | Now we are working with several different
classes here, so it could be pretty hard
| | 00:36 | to find small errors in them. I'll
test the movie and I'll walk you through
| | 00:40 | with how to fix errors in your code.
| | 00:42 | So I'll test it right now, and I get
some errors in the Output window. I get
| | 00:46 | two right here: Syntax error and
Syntax error. What I'm going to do is what I
| | 00:51 | always do and that's double-click
the first error. The second error is
| | 00:56 | typically something that's an error
that happens because of the first error.
| | 01:01 | Sometimes you will have one mistake
in your code and you will get five
| | 01:04 | different error messages for it.
| | 01:05 | So you will always want to go to the
first one first. So double-click that
| | 01:08 | first error, and then Flash will take
you to the offending codes and it will
| | 01:14 | open up that class file where the
code is and have the line highlighted.
| | 01:18 | So here, I'm looking at this line of
code for some type of problem. It says
| | 01:24 | expected a definition keyword such
as function after attribute public,
| | 01:28 | not slideController.
| | 01:29 | So after public, there should be
something, not slideController. Oh! It looks
| | 01:33 | like I missed the word, var. So I'll
type public var and that looks like I have
| | 01:38 | fixed the problem. So I'll save the file,
File > Save, and then test the movie
| | 01:42 | again. I get another error.
| | 01:44 | This time it says Syntax error:
expecting leftbrace before extends.
| | 01:50 | So I'll double-click and it looks like extends
has something wrong with it. Now here is
| | 01:57 | how I know that. Extends is a keyword
in Flash and therefore it should be blue.
| | 02:03 | Here it's black. So I know that there
is some sort of a problem. So I'm missing
| | 02:08 | the t in extends, when I type that, it
turns blue. So I can choose File > Save,
| | 02:13 | save the file, test the movie,
and then I get more error messages.
| | 02:17 | It says Access of undefined property
title_txt. I'll double-click that error
| | 02:24 | and Flash will take me to the
offending code and this is actually in the
| | 02:27 | SlideshowTextView class and it doesn't
have a property called title_txt. It's
| | 02:33 | actually called title. So I actually
gave it extra text in its variable name,
| | 02:38 | so if I delete that extra text, and I
just have title, I can save the file,
| | 02:44 | test the movie and everything works okay.
| | 02:47 | So whenever you see messages in the
Compiler Errors panel, just double-click
| | 02:50 | the top one, Flash will take you to
the offending code, or at least, the
| | 02:54 | offending area, and you can look around
that area using the descriptive text in
| | 02:59 | the error message to find where the problem is.
| | 03:02 | Now, not every single error is going to
result in a compiler error and take you
| | 03:08 | to the exact line of code that you need
to fix. Sometimes errors will be very vague;
| | 03:13 | in those cases, make sure to
read all of the text in the error,
| | 03:18 | and if you still don't understand what
the problem is, you can look up the error
| | 03:22 | number because each error has its
identification number in Flash Help or
| | 03:26 | online, and through those resources,
you can find solutions to your problems.
| | Collapse this transcript |
|
|
9. Moving ForwardCreating other applications using the MVC pattern| 00:00 | Now that you have used object-
oriented programming and the Model View
| | 00:04 | Controller design pattern to build
a complex application, you may be
| | 00:08 | wondering how you can use the same
knowledge to build a totally unrelated
| | 00:13 | application. Now I don't by any
means want you to think that you are
| | 00:17 | limited to building slideshows, when
you are using the Model View Controller
| | 00:20 | design pattern. You can use this design
pattern for many different situations.
| | 00:26 | For example, we are going to look at
our slideshow here and I'll tell you how
| | 00:30 | you can apply the same concepts to
build, say, an MP3 player or another
| | 00:35 | different type of application.
| | 00:37 | Let's start with the model. When
you are working with the model in our
| | 00:41 | slideshow class, it's powered by XML
data. When you are working with the model
| | 00:46 | in an MP3 player application, you
may be using XML data as well that has
| | 00:52 | information about various MP3 files.
Where they are located, title, description
| | 00:57 | information, the length of the song, etcetera.
| | 01:00 | So you can use the model class and
then extend it and add specific properties
| | 01:06 | and methods that apply for your MP3
application. For the view in an MP3
| | 01:11 | application, you want to think about
what happens or what gets updated when
| | 01:17 | the model's data changes.
| | 01:18 | Well, for one, the visual data updates.
When somebody clicks the button and
| | 01:23 | changes the song and the model changes,
not only is the view going to change,
| | 01:28 | maybe you see different title or
description of the song, but you are also
| | 01:32 | going to hear a different song. So
instead of you're extending the view class
| | 01:36 | and loading images in that class,
maybe you would extend the view class and
| | 01:40 | load sounds, and play them back, and
have another text view class that will
| | 01:44 | display different text depending on the
song that's loaded, or in other words,
| | 01:48 | depending on the data of the model.
| | 01:51 | Finally, the controller class. The
controller class for a slideshow is pretty
| | 01:55 | similar to a controller class when you
are working with an MP3 player. You can
| | 01:59 | accept data when the user wants to
change a song, to move forward or backward,
| | 02:04 | or select the song from a playlist,
and then you can have the controller
| | 02:09 | connected to different buttons that
manipulate the model in different ways. So
| | 02:15 | based on how the model is updated,
the view will control what text the user
| | 02:20 | sees and what songs the user hears.
| | 02:22 | So you can see the concept of Model
View Controller or any design pattern for
| | 02:27 | that matter, can apply to all the
different types of applications.
| | 02:31 | So I leave you at this challenge.
Try to make an application that's totally
| | 02:34 | unrelated to a slideshow that uses the
Model View Controller design pattern.
| | 02:40 | Have fun, and feel free to let
me know what you come up with.
| | Collapse this transcript |
| Learning more about object-oriented programming in ActionScript 3.0| 00:00 | Now that you have built at least one
complex object-oriented ActionScript 3.0
| | 00:06 | application, you may want to learn more
about ActionScript 3.0 object-oriented
| | 00:10 | programming and design patterns. In
this movie I'll show you some of my
| | 00:14 | favorite resources on those subjects.
| | 00:16 | The first place I'm going to refer
you to is the lynda.com Online Training
| | 00:20 | Library. Here if you go under Learn by
and you select ActionScript, you will be
| | 00:27 | taken to the ActionScript page, which
has many different titles about learning
| | 00:31 | ActionScript 3.0 code. You also
look at Flash CS4 titles to learn about
| | 00:36 | ActionScript there.
| | 00:38 | Beside from that there are three books
that I have used a lot to learn about
| | 00:42 | ActionScript and I recommend them in
the following order. First, Essential
| | 00:47 | ActionScript 3.0 by Colin Moock. This
is one of the best guides to ActionScript
| | 00:53 | 3.0 programming. This book is not
about how to build every single thing that
| | 00:59 | you can build with ActionScript, but
rather it's a very detailed description of
| | 01:04 | the ActionScript 3.0 language. I highly
recommend this book if you are serious
| | 01:08 | about learning ActionScript 3.0.
| | 01:11 | Next there is a book called Object-Oriented
ActionScript 3.0. I absolutely love this book.
| | 01:17 | This is a great book for
using design patterns and for building
| | 01:21 | object-oriented applications using
ActionScript 3.0. And finally there is
| | 01:26 | another book called ActionScript 3.0
Design Patterns. This book has more design
| | 01:32 | patterns than the Object-Oriented
ActionScript 3.0 book and it's all about
| | 01:37 | different design patterns that you
can use and how to solve different
| | 01:40 | programming problems with it.
| | 01:42 | So with these resources, you have a
lot of places to go to learn about
| | 01:46 | ActionScript 3.0 and make better
object-oriented programming applications.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:01 | Sadly, you have reached the end of
this title. I hope you had a great time
| | 00:06 | learning about object-oriented
programming and design patterns in ActionScript 3.0.
| | 00:10 | Remember that you can learn
more in the Online Training Library and
| | 00:14 | through ActionScript 3.0 books.
I would absolutely love to see your work.
| | 00:19 | Please feel free to contact me on my
website chadandtoddcast.com. So enjoy
| | 00:26 | using what you learned
and I'll see you next time.
| | Collapse this transcript |
|
|
