IntroductionWelcome| 00:00 | (Music playing.)
| | 00:05 | Let's take a look at what we're going
to build throughout this course.
| | 00:08 | We're going to learn how to build user
interface elements. Now what are those elements?
| | 00:14 | First we'll build a progress bar. So
we'll load an external file and have a
| | 00:19 | progress bar track the progress of that
file loading. It will show that update
| | 00:24 | on a progress bar and in a text field.
| | 00:27 | We'll create a scrollbar so you can
scroll a text field. We'll connect that
| | 00:32 | scrollbar to a text area that will
have customized scaling. We'll create user
| | 00:39 | interface checkboxes and radio
buttons as well as standard user interface
| | 00:45 | buttons with different states.
| | 00:48 | Finally, we'll take all of the user
interface elements that we created and look
| | 00:52 | at how they can be applied in a form
application. Then I'll show you how to
| | 00:57 | skin those elements so that you
can customize their look and field.
| | 01:01 | So that's a brief look at what we're
going to be doing throughout this title,
| | 01:05 | hope you're excited. Now let's get
started writing some ActionScript 3.0 code
| | 01:09 | to build these user interface elements.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium subscriber to
Lynda.com or have purchased this title on a
| | 00:04 | disc, then you have access to the
Exercise Files for this course. Exercise
| | 00:09 | Files are organized by chapters. Each chapter
has the files we'll be working on for that chapter.
| | 00:15 | In each movie you'll see on your
screen, which files to open up so that you
| | 00:19 | can follow along. For your convenience,
I've saved the start and final states
| | 00:25 | for each movie so you can have the
finished version of the files and the
| | 00:29 | starting version of the files
for each movie that you watch.
| | 00:32 | If you don't have access to the
Exercise Files, don't worry. You can still
| | 00:36 | follow along. For each application
that we create, we'll write the code from
| | 00:40 | scratch and I'll show you how I set up my FLA
files so that you can set up yours in the same way.
| | 00:46 | So let's get started!
| | Collapse this transcript |
| Prerequisites| 00:00 | Because of the advanced nature of this
title, I expect you to know a lot coming in.
| | 00:05 | In this movie I want to show you what the
prerequisite courses are to watch this course.
| | 00:11 | First, Flash CS4 Essential Training,
that just shows the basics of Flash.
| | 00:15 | Basically, you need to know what movie
clips are and how to organize elements
| | 00:20 | in Flash. So you should be familiar with
the Library, the Properties panel, etc.
| | 00:25 | Second, Flash CS4 ActionScript 3.0 for
Designers. This title teaches the basics
| | 00:32 | of ActionScript 3.0. You should
definitely be familiar with this before coming
| | 00:36 | in here. If you don't have any
ActionScript 3.0 experience, I recommend
| | 00:41 | starting with that title, especially if you
do not come from a programming background.
| | 00:46 | Finally, I recommend that you have
watched Flash CS4 Object Oriented
| | 00:51 | Programming. This title shows advanced
programming with ActionScript 3.0. Much
| | 00:59 | of what we'll cover in this course
assumes that you've already seen that title,
| | 01:03 | and so things may be
confusing if you haven't watched it.
| | 01:06 | If you're new to ActionScript and are
already a programmer, I recommend going
| | 01:10 | straight to Object Oriented Programming.
From there you'll learn the basics of
| | 01:14 | the language, see how everything works
and you'll learn how to apply more of
| | 01:17 | those principles throughout this title.
| | 01:19 | So if you have a background in Flash
and ActionScript, and feel comfortable
| | 01:24 | tackling User Interface
elements, let's get started.
| | Collapse this transcript |
|
|
1. Making a Progress BarExploring the FLA file| 00:00 | In this chapter we're going to build a
progress bar that we can attach to any
| | 00:05 | instance of the loader class that
loads an external image or SWF file. We'll
| | 00:09 | start off the chapter by exploring
the FLA file that we'll be using.
| | 00:14 | On the main Timeline in my FLA file, I
have an actions layer and a layer called
| | 00:18 | prog. Let's look at the code in the
actions layer. So there are three lines of
| | 00:23 | code already. The first line creates
an instance of the loader class, the
| | 00:27 | second line adds a loader to the stage and
the third line loads the file flower.jpg.
| | 00:33 | Instead of flower.jpg, if you don't
have that file, you can use any JPG image.
| | 00:40 | Obviously, just make sure it's not
super huge; in other words, it's not ten
| | 00:44 | times the width of the stage. Try to get
something that's about the same size as your stage.
| | 00:49 | Then we have the prog, which has an
instance of a movie clip called Prog and
| | 00:55 | instance name is prog_mc. I'm going
to Double-Click Prog in the Library to
| | 01:00 | enter its Timeline. So in the Prog
movie clip we have four layers. So the text
| | 01:05 | layer, which is a dynamic text field
called prog_txt. As usual, I embedded the
| | 01:13 | font and I have my font settings here.
I have the font to align to the center.
| | 01:19 | This is actually going to display the
load progress, so 1%, 2%, etc. So I want
| | 01:25 | it to be aligned to the center.
| | 01:27 | Then in the next layer I have the
outline, which is basically just that outline
| | 01:31 | graphic that you see on the screen.
Then in the mask and the main layers, if I
| | 01:37 | unlock them you can see the content
inside of them. The mask layer is a shape
| | 01:41 | tween, just a rectangle, tweening from
left and right revealing the progress
| | 01:46 | bar. So if I pan to the right a little
bit, you could see that. So the mask is
| | 01:50 | revealing the progress bar and if I
lock the mask in the main layer, you could
| | 01:53 | see that in action.
| | 01:54 | Now at this point, if you test the movie,
you're going to see the flower image
| | 01:59 | load. Obviously, you'll see that
ProgBar moving in the background. But it's not
| | 02:04 | controlled by ActionScript yet, so it's
not really monitoring the status of the load.
| | 02:08 | So once you test the movie once,
you'll see that image load, and if you go to
| | 02:13 | View, and now make sure that
you're in the Flash Player not in Flash,
| | 02:17 | View, Download Settings. I'm going to
set mine to T1 and then Click Simulate
| | 02:22 | Download, or you can just use the same
keyboard to test the movie again. Then
| | 02:26 | you'll get simulated download.
| | 02:29 | So you'll wait a few seconds and then
the flower image will load. Again that
| | 02:32 | progress bar was just going through the 100
frame animation and not indicating the load progress.
| | 02:39 | So we have our file loading properly
and once your FLA file is set up, you're
| | 02:44 | ready to start writing the
code for the progress bar.
| | Collapse this transcript |
| Defining the ProgressBar class| 00:00 | Now we'll begin defining the ProgBar
class that will hold down the code for our
| | 00:05 | progress bar. If you don't have the
Exercise Files, make sure that you set up
| | 00:10 | your folder structure properly.
| | 00:12 | So in the same folder as your FLA file,
you should have the image that you're
| | 00:15 | going to load. Mine is called flower.jpg
here. In that folder, you should have
| | 00:21 | a folder called com and in the com
folder there should be a folder called
| | 00:24 | lynda. In that folder, have a folder
called ui and in that folder, create the
| | 00:29 | file ProgBar.as. Make sure to
capitalize the P and the B. Also make sure that
| | 00:36 | com, lynda and ui are all lowercase.
| | 00:39 | Let's go over to Flash and inside of
the ProgBar class file, we'll define the
| | 00:45 | ProgBar class. The first thing we'll
do is declare the package. So I'll type
| | 00:48 | package com.lynda.ui, some curly braces,
and inside of the curly braces, I'm
| | 00:58 | going to import some code. So
import flash.display.*, all those display
| | 01:06 | classes, and then we'll import flash.
events.*. Finally, we'll import the text
| | 01:15 | field classes, so flash.text.*.
| | 01:17 | Then we'll declare the class. So public
class ProgBar and make sure to spell it
| | 01:24 | the same as your class file which is
ProgBar.as. Then we're going to extend the
| | 01:31 | MovieClip class. You need to extend
the MovieClip class because our progress
| | 01:37 | bar movie clip has 100 frames. So
you can't use Sprite in this case.
| | 01:43 | So in here, I'm going to define the
constructor method. So public function
| | 01:48 | ProgBar, capital B and some
parenthesis and curly braces and I'll declare one
| | 01:55 | private property right above the
constructor. So private var _loader, datatype
| | 02:04 | it to a Loader, and we're just going to write
a little bit of code inside of the constructor.
| | 02:09 | So the first thing we're going to do
is hide the progress bar. So set its
| | 02:13 | visible property to false. The reason
why I'm doing this is because when the
| | 02:18 | ProgBar initializes, I don't want it to
show. I only want it to show when it's
| | 02:24 | loading a file. So I want to connect it
to a loader and only show the progress
| | 02:29 | bar when that loader is loading
content. So before and after, it should not
| | 02:35 | show. That's why we're initializing it
to have its visible property set to false.
| | 02:40 | On the next line, run the stop
method. So type stop and some parenthesis.
| | 02:45 | Now what we're doing here is making
sure that the Timeline doesn't play. Now,
| | 02:49 | of course, we could have this inside
of the Timeline of our movie clip, but
| | 02:53 | there is no point in putting just a
little bit of code in there and then some
| | 02:57 | other code inside of this class. You
might as well have all the code inside of
| | 03:00 | the class, if we're going
to define a class anyway.
| | 03:03 | So we have that there. Let's do File,
Save. I'll go to the FLA file and connect
| | 03:10 | the progress bar to the class. So
I'll go to the Library, Right-Click or
| | 03:15 | Ctrl-Click the Prog movie clip and
then Click Properties, check Export for
| | 03:20 | ActionScript, make sure you're in
Advanced mode so you can see that. Then for
| | 03:25 | the base class we're going
to put that ProgBar class.
| | 03:28 | In order to do that, we need to put the
fully qualified class name which includes
| | 03:34 | the package. So com.lynda.ui.ProgBar,
and that's it. You should Click OK, and
| | 03:43 | then you should get the definition
for the class could not be found. That's
| | 03:45 | good. Then no other problems. Looking good.
| | 03:49 | Now at this point I should be able to
test the movie and see the file load,
| | 03:54 | which it does. If I push that keyboard
shortcut to test the movie again, that's
| | 03:58 | Command+Return on the Mac or Ctrl+Enter
on the PC. It should take a few seconds
| | 04:02 | for the image to show. Perfect!
| | 04:05 | So what we're looking for is no
errors and not seeing the progress bar. So
| | 04:10 | we're good. So now we've
successfully defined our ProgBar class.
| | Collapse this transcript |
| Connecting a Loader instance| 00:00 | In this movie, we're going to look at
connecting a loader instance in our FLA
| | 00:04 | file to the ProgBar class. So the
first thing we're going to do is take this
| | 00:09 | private property and make a public
version of that using Set and Get methods.
| | 00:15 | Now if you're unfamiliar with Set and
Get methods, I recommend watching my
| | 00:19 | title on Object Oriented
Programming in Flash CS4.
| | 00:23 | So let's define the Set method below
the constructor. So declare the method
| | 00:28 | public, function set loader. In the
parenthesis, receive one parameter. We'll
| | 00:40 | call it l and datatype it to a Loader, :
void, no return data, and some curly braces.
| | 00:46 | Now if you're not familiar with Get
and Set methods, basically, Set and Get
| | 00:51 | methods work like properties. So, for
example, you set the loader property in
| | 00:55 | FLA file using the = sign. So ProgBar.
loader equals some loader. Now what that
| | 01:02 | does is it runs the set loader method.
So, our advantage here is that we can
| | 01:07 | run a huge block of code or as much
code as we want whenever our property is
| | 01:12 | set. That gives us an advantage to
just having the loader property be public.
| | 01:16 | That's what we're doing here.
| | 01:18 | Again, you could find more detail
about Set and Get methods in my Object
| | 01:21 | Oriented Programming title. So here
we have our Set method and in here the
| | 01:26 | first ting we'll do is set _loader = l,
and then we're going to add some event
| | 01:32 | listeners to our loader. So _loader.
contentLoaderInfo. Remember for loaders,
| | 01:37 | you don't add the event listener to
the loader itself. You add the event
| | 01:40 | listener to its contentLoaderInfo property.
| | 01:43 | So contentLoaderInfo.
addEventListener and the first one is going to be
| | 01:51 | Event.OPEN. That's when the load
starts and we'll run a method called
| | 01:59 | loadStarted. We'll define that in
just a minute. I'll add one more event
| | 02:04 | listener. So just copy and paste this
line of code on the next line, change the
| | 02:08 | Event to Event.COMPLETE, rename the
method to loadFinished in the pasted code.
| | 02:19 | Then before we define loadStarted and
loadFinished, right below the Set method
| | 02:24 | here we're going to define the Get
method. This is for retrieving property. So
| | 02:28 | public function get loader, no
parameters, returns a loader, and then inside of
| | 02:39 | this method just return _loader.
| | 02:42 | So basically, if you wanted to, let's
say, trace the value of loader from the
| | 02:46 | FLA file, then the loader property will
be triggered here via this Get method,
| | 02:51 | since we're not setting a value, we're
getting a value and we return that _loader property.
| | 02:58 | Right above the set method, I'm
going to define loadStarted. So private
| | 03:03 | function loadStarted. Again, this is
private because we don't need to access it
| | 03:11 | from the main Timeline or anywhere else.
So create an event with the datatype
| | 03:16 | of event, :void for no return data.
When the load starts, all we want to do is
| | 03:22 | show the ProgBar. So visible = true.
Now just copy and paste loadStarted and
| | 03:31 | then change the name to loadFinished
and we'll set visible = false. That's it.
| | 03:42 | So I'll save the file and then go to
the FLA and we'll connect the loader on
| | 03:48 | the Timeline. So if you don't remember
the instance name of the ProgBar, you
| | 03:52 | can always Click Insert a target path.
See right there? It's prog_mc. Cancel
| | 03:56 | out. Right above loader.load, you
always want to do this before you load the
| | 04:01 | file, we'll set prog_mc's loader
property equal to loader. That's that loader
| | 04:10 | instance we created on line 1 in this code.
| | 04:13 | So we connect the loader and load the
file and the progress bar does its magic.
| | 04:18 | So you test the movie, you don't see
anything right now, but if you test it
| | 04:21 | again, you'll see the outline of the
loader for a few seconds and then the
| | 04:24 | image. So obviously, we're not
seeing the load progress but the loader is
| | 04:29 | showing and hiding at the right time and
we note it's stopping on that first frame.
| | 04:34 | So we've successfully connected our
loader to our progress bar and we've
| | 04:40 | responded it to the Event.OPEN and Event.
COMPLETE events in our progress bar class.
| | Collapse this transcript |
| Showing load progress| 00:00 | The last thing we have to do for our
progress bar is actually show the progress
| | 00:05 | of the file loading. So
we'll do that in this movie.
| | 00:09 | The first thing I'm going to do is
scroll down to the bottom of my code and
| | 00:13 | above all the other event listeners in
the Set Loader method, I'm going to add
| | 00:18 | one more event listener
to my _loader property. So
| | 00:22 | _loader.contentLoaderInfo.
addEventListener and the event is going to be the
| | 00:29 | pre-loading event, which is
ProgressEvent.PROGRESS. Then we'll run a method
| | 00:38 | called fileLoading.
| | 00:41 | Now, we'll define the fileLoading
method. I'll do that right above the set
| | 00:45 | loader method. So private function
fileLoading, receive an event with the
| | 00:51 | datatype of ProgressEvent, call in
void, no return data and then here we'll
| | 01:00 | create a variable called percent. It's
going to be a number. It's going to be a
| | 01:05 | value between 0 and 100, will
reflect the progress of your loaded file.
| | 01:11 | Now, the progress is held in this
event object. So it has one property called
| | 01:16 | bytesLoaded and one called bytesTotal.
So you divide bytesLoaded by bytesTotal
| | 01:22 | and you get the percentage. That's just
the number between 0 and 1. To get the
| | 01:28 | whole number between 0 and 100, we just
multiply that value by 100 and round it.
| | 01:34 | Here's what that code looks like. I'm
going to start by writing Math.round on
| | 01:38 | the outside, some parentheses. So
we're going to take this whole number and
| | 01:42 | round it. So the first thing we're
going to do is take event.bytesLoaded and
| | 01:46 | divide it by event.bytesTotal.
| | 01:48 | I am going to wrap that in
parentheses. So event.bytesLoaded /
| | 01:56 | event.bytesTotal. Then after the
closed parenthesis so I'm still inside of
| | 02:04 | Math.round but outside of event.
bytesLoaded / event.bytesTotal. Then I'm going
| | 02:09 | to multiply that value by 100. It's
going to give me my whole number between 0
| | 02:15 | and 100. That will show the
percentage that's loaded. And we'll use that
| | 02:17 | variable on the next few lines.
| | 02:20 | So go down to the next line and we'll
put it inside the text field first. So
| | 02:24 | prog_txt.text. That's our text field
inside of that Progress Bar movie clip.
| | 02:31 | I'm going to set it equal to percent +,
and then I'm going to put the percent
| | 02:38 | string after that. It's a little percent
symbol. So we'll say 0%, 1%, 2% and so forth.
| | 02:46 | So the next line. We'll gotoAndStop,
and pass in percent in the parentheses. So
| | 02:55 | we'll take that value between 0 and 100,
translate to a frame number, and go to
| | 03:00 | that frame. So if it's 0, it's just
going to go to Frame 1. So we'll go to each
| | 03:04 | one of the frames and as the file
loads, it will show the percentage in our
| | 03:09 | Progress Bar. So save this file, test
the movie, remember that you have to test
| | 03:15 | it again to see the load
progress, and there you have it.
| | 03:20 | Now, it's important to note that
occasionally you might have an error. So if I
| | 03:24 | keep testing the movie here like
really fast, over and over again, I get this
| | 03:27 | weird error that says Load never completed.
| | 03:31 | Now, I just want to tell you here
that you don't need to worry about that.
| | 03:33 | That's just some error that happens
only in the Flash Player when you're
| | 03:38 | testing it in Flash. This is not going
to create a problem when it goes online.
| | 03:42 | This is just some kind of glitch in
the Flash Player that's installed in the
| | 03:46 | Flash. So totally disregard that and
you'll be fine. If you absolutely do not
| | 03:52 | want to see any kind of error,
what you need to do is listen for this
| | 03:56 | IOErrorEvent. You can look up
information on that in Flash Help.
| | 04:00 | So with that code written, that
completes our Progress Bar. So remember that
| | 04:06 | you can listen for that Event.
ProgressEvent and you can get that amount that's
| | 04:13 | loaded by dividing bytesLoaded by
bytesTotal and multiplying that by 100,
| | 04:19 | taking that number and rounding it.
That's how we get the percentage, simply
| | 04:23 | put it in the text field, and then go
to that frame to create the Progress Bar.
| | Collapse this transcript |
|
|
2. Creating a Scroll BarExploring the FLA file| 00:00 | In this chapter we're going to build a
scroll bar that scrolls the text field.
| | 00:05 | Before we do that I want to walk you
through how this FLA file is set up. This
| | 00:09 | is particularly important to you
who don't have the Exercise Files.
| | 00:12 | So on the stage here I have two layers,
one called Actions and one called Art.
| | 00:16 | The Actions layer currently has no
code and the Art layer has two elements on
| | 00:22 | the Stage. First, there is the main_txt,
if you don't have this file. An
| | 00:27 | optional thing to do is to embed the font.
| | 00:30 | I always do that whenever I work with
dynamic text fields, just because I find
| | 00:33 | it renders a little bit prettier. So
embed the font if you want to and then I
| | 00:39 | have Show border around text and
Selectable. You don't have to do that. It's
| | 00:42 | just a personal preference.
| | 00:44 | So here I'm going to go to Scroll Bar
and if I Double-Click it, you could see
| | 00:48 | what's inside. So on the top I have
a button called up_btn. That's just a
| | 00:53 | simple three-frame button, Up, Over
and Down. The Hit stage is just the Up,
| | 00:58 | Over or Down stage, since they're
all the same shape and it's pretty much
| | 01:01 | rectangular. So back to
the Scrollbar movie clip.
| | 01:04 | Then we have down_btn at the bottom.
It's an instance of the same Scroll button
| | 01:09 | that's at the top and we have bar_mc.
That is the bar or the background of the
| | 01:15 | Scroll Bar. If I Double-Click that,
you'll see it's just a bitmap image. Back
| | 01:20 | to the Scrollbar movie clip. Then we have
drag_mc and that's just a simple bitmap image.
| | 01:28 | So pretty straightforward. Basically,
if you don't have the Exercise Files,
| | 01:31 | you're going to need a bar for the
background. Name it bar_mc. I'm go to need
| | 01:36 | up_btn, down_btn and then something to
drag called drag_mc. Of course, in the
| | 01:43 | text for the stage called main_txt.
Obviously make sure it's a dynamic text
| | 01:48 | field. Once your FLA file is set up,
you're ready to start coding the scroll bar.
| | Collapse this transcript |
| Creating the ScrollBar class| 00:00 | Now we're going to look
at creating the Scrollbar class. Now if
| | 00:03 | you don't have the Exercise Files, I
want you to pay particular attention to
| | 00:07 | how the folder structure is set up.
| | 00:10 | So I'm going to my Create Scrollbar
Class folder and then the Start folder.
| | 00:14 | If you don't have the Exercise Files,
here is what you should have. You should
| | 00:16 | have an FLA file called Scrollbar.fla
and in that same folder I want you to
| | 00:22 | make a folder called com. And in the
com folder, make a folder called lynda.
| | 00:26 | And in the lynda folder, make a folder
called ui. Notice that they're all lower
| | 00:30 | case. Make sure you have
this exact same spelling as me.
| | 00:33 | In the ui folder, I want you to make an
ActionScript file called Scrollbar.as.
| | 00:39 | So by putting it in the same package
as my file, you ensure that your code is
| | 00:43 | going to be exactly the same as mine.
So if there are any problems, you can
| | 00:47 | look to my code to make sure that
you're on the right track. So get that all
| | 00:51 | set up, and then I'll meet you over in Flash.
| | 00:55 | So on the Stage here, we have our
Scrollbar component and that's all good to
| | 00:58 | go. I'm going to go to Scrollbar.as.
So right now this is just a blank file.
| | 01:03 | I'm going to minimize the Timeline
and the other panels to get the maximum
| | 01:07 | amount of room for my file here.
We'll start writing the code.
| | 01:11 | So first we'll declare the package.
Now, you probably already know what the
| | 01:15 | package is going to be because it's in
com.lynda.ui. That's what we just looked
| | 01:23 | at. That's the same folder structure.
So we declare the package and some curly
| | 01:27 | braces and then we declare the public
class, Scrollbar, and we're going to
| | 01:33 | extend the Sprite class. So extend
Sprite and then some curly braces below that.
| | 01:41 | Now since we're using the Sprite class,
we're going to need to import that
| | 01:44 | class. Since we're going to be using
other display classes, notice we'll just
| | 01:49 | import all of the display classes of
flash.display.*. Remember that imports all
| | 01:55 | of the classes in the particular package.
In this case, the package is flash.display.
| | 02:00 | While we're importing we might as well
import events since we're going to be
| | 02:04 | using a few different types of events.
So flash.events.*. We'll also be using
| | 02:10 | the Rectangle class. So flash.geom.
Rectangle and the TextField class. So import
| | 02:19 | flash.text.TextField. Go to
import statement straightaway.
| | 02:24 | Now, let's declare the constructive
method. So public function Scrollbar, again
| | 02:31 | you are going to make sure that you
have the same spelling and casing as the
| | 02:35 | name of your ActionScript
file and the name of your class.
| | 02:37 | Now we'll declare the properties that
we're going to be using. So we'll start
| | 02:40 | with two public properties. So public
var value, and it's going to be a number.
| | 02:47 | I'm going to instantiate that here.
Notice that value is blue. So that's a
| | 02:52 | reserve keyword for Flash.
| | 02:54 | So people consider that a no-no to
use reserved keywords. It's a little bit
| | 02:58 | hard to look at. But one reason why I
like to use them in certain instances is
| | 03:04 | to follow the same
consistency as built-in Flash element.
| | 03:08 | So Flash components or the Flash
scrollbar specifically has a property called
| | 03:14 | value that represents 0-1 value of
where the dragged element is on the
| | 03:19 | scrollbar. So if I use that same value
property here, then it's easer to work
| | 03:25 | with because I already know
how to use the built-in property.
| | 03:28 | So I'm kind of being consistent here
with what's built in to Flash. If you
| | 03:32 | really don't like value being blue or
using a reserved keyword, you can feel
| | 03:36 | free to use something else. Just make sure that
you consistently use something else in the code.
| | 03:40 | So another public property. Call this
padding, and that's going to be a number.
| | 03:46 | We'll set it equal to 5 and this is
going to represent some spacing for the
| | 03:51 | draggable bar. We'll talk
about that in another movie.
| | 03:54 | Then we'll declare some private
property. So private var _textField. That's a
| | 04:02 | TextField. That's going to represent
the text field that's going to scroll
| | 04:06 | private property called Max. This is
the maximum position to drag the draggable
| | 04:12 | element in scrollbar. So that's going
to be a number. I don't have the value
| | 04:16 | yet. And private property called Min,
also a number, represents the minimum
| | 04:23 | draggable area for the
scrollbar's draggable element and that's it.
| | 04:27 | So we have our basic Scrollbar Class
set up. So what we want to do is just put
| | 04:32 | a trace statement in here, so we can
just make sure that everything is working
| | 04:35 | properly. So I'm just going to trace and in
quotes I'll put Scrollbar class is running.
| | 04:45 | So save this file, File, Save, jump
over to the FLA, and then we're going to
| | 04:51 | need to connect the Scrollbar movie
clip to that Scrollbar class. So go ahead
| | 04:56 | and open up the Library, and then right-
Click or Ctrl-Click the Scrollbar movie
| | 05:01 | clip, choose Properties, make sure
you're in Advanced mode so you can see the
| | 05:06 | linkage area, check Export for
ActionScript and for the base class, type in
| | 05:13 | com.lynda.ui.Scrollbar.
| | 05:18 | One thing you want to look out for is
that not just typing name Scrollbar, you
| | 05:23 | need to type the full package name,
which is also called the fully qualified
| | 05:28 | class name which includes package.
| | 05:30 | So type that in there, then you
should Click OK and you should get this
| | 05:34 | message, A definition for this
class could not be found, Click OK. You
| | 05:38 | shouldn't get any other error. If you do,
check the name of your base class. If
| | 05:42 | it's correct, check the name of the
package in your class file, if that's
| | 05:46 | correct, check the way that your
folders are named to make sure that the casing
| | 05:50 | and spelling is correct. So we got that.
| | 05:53 | I'm going to minimize the library, and
now that I connected the Scrollbar to my
| | 05:58 | Scrollbar class, I'll test the movie
and I should see that Trace statement in
| | 06:01 | the output window. We have Scrollbar
classes running. Sweet! Close this window,
| | 06:09 | clear the output window, jump over to
Scrollbar.as, delete the trace statement
| | 06:15 | and save the file. Now, we got our
Scrollbar class set up and successfully
| | 06:21 | connected to the scrollbar on the stage.
| | Collapse this transcript |
| Adding drag functionality| 00:00 | Now we are going to add drag
functionality to the scrollbar. Scroll down to the
| | 00:04 | constructor method and we'll
set values for max and min here.
| | 00:08 | So first we'll set the value for min.
We'll set that equal to bar_mc.y, which
| | 00:15 | is the Y position of the bar. It's the
highest up the draggable element can go,
| | 00:20 | and then we'll set max = bar_mc.height
- drag_mc.height. So it's as far down as
| | 00:33 | the draggable element can go. So we
have the height of the bar minus the height
| | 00:37 | of the draggable element. So that
will align the bottom of the draggable
| | 00:43 | element with the bottom of the bar.
| | 00:45 | So let's go to the next line. Add an
event listener to drag_mc. The event is
| | 00:51 | going to be MouseEvent.MOUSE_DOWN.
It's going to be the event where the user
| | 00:57 | Clicks their mouse down, so it's
going to start dragging. To run a method
| | 01:00 | called dragHandle, I'll define
dragHandle right below the constructor method as
| | 01:08 | a private method, since we don't need to
access it anywhere else other than this class.
| | 01:12 | So private function dragHandle is
going to receive an event with the datatype
| | 01:17 | of MouseEvent, no return data, so :
void same as with any event handler
| | 01:24 | function, and inside of here we are going
to set the drag element to start dragging.
| | 01:29 | So drag_mc.startDrag and I'm going to
pass in false as the first parameter,
| | 01:36 | which is lock center. A value of true
would lock the registration point of the
| | 01:41 | draggable element to the mouse and
we don't want to do that because the
| | 01:45 | registration point is at the top left,
so I guess it's just kind of an awkward
| | 01:49 | drag if we do that.
| | 01:50 | Usually, use a value of true if you
are going to create some sort of custom
| | 01:54 | cursor. So we are not doing that, so
false here and then the next parameter is
| | 01:59 | a rectangle, and this is the
draggable area for the object. So we are just
| | 02:04 | going to create a new Rectangle inline here.
| | 02:06 | So new space, rectangle, capital R,
some parentheses, and in the parentheses,
| | 02:11 | we pass in the x and y coordinates for
the drag and then we pass in the width
| | 02:18 | and height that this can be dragged.
| | 02:20 | So the first one is x, so we are going
to pass in 0. Next one is y, which is
| | 02:27 | going to be min and then 0 for the
width. So we don't want to be able to drag
| | 02:32 | it left or right, and then for the
height, we want to use max. So this defines
| | 02:37 | our draggable boundaries here.
| | 02:40 | So I'm going to add another closed
parenthesis there to close up the startDrag
| | 02:45 | method. Remember we need one to close
out the newRectangle method and one to
| | 02:49 | close out startDrag. So right after
that, semicolon and then we'll save the
| | 02:53 | file and then go test it in Flash.
| | 02:56 | So Save, jump over to the FLA, test
the movie. Now, Click and drag, up and
| | 03:05 | down, and we can drag the little
draggable element, and that looks great. The
| | 03:10 | only thing is when you release the
mouse button it still drags. So we are going
| | 03:14 | to need to stop that.
| | 03:17 | So right under that line of code, we
are going to add an event listener to stop
| | 03:23 | dragging. Now, you may be tempted to
add that event listener to drag_mc. But
| | 03:28 | however if you do that, then user
will have to have their mouse on the
| | 03:33 | draggable element when they release it,
and if a mouse is somewhere else on the
| | 03:38 | stage, then the event won't be caught.
| | 03:40 | So we are listening for mouseEvent.MOUSE
_UP and so it needs to be on stage and
| | 03:46 | not on drag_mc, or else you are
going to run into glitches. So
| | 03:50 | stage.addEventListener. That event is
going to be MouseEvent.MOUSE_UP, and I'll
| | 03:58 | run a method called stopDragging.
| | 04:02 | Below the dragHandle method, we'll
define another private method called
| | 04:06 | stopDragging. It too wil receive
an event with a datatype of Mouse event,
| | 04:14 | no return data, so :void, and in the
parentheses, we're going to stop dragging.
| | 04:19 | drag_mc.stopDrag, no parameters and
then we are going to remove that event
| | 04:26 | listener from the Stage.
| | 04:27 | So just copy and a paste that line of
code that says stage.addEventListener
| | 04:31 | that we wrote a few minutes ago
and change addEventListener to
| | 04:34 | removeEventListener, save the file, and
then return to the FLA. Test the movie.
| | 04:44 | Drag the little draggable element,
release your mouse, and it stops.
| | 04:49 | So it doesn't matter if we release it
right on the draggable element or if we
| | 04:53 | release it anywhere on the Stage. Now,
we can successfully drag the scrollbar
| | 05:02 | in the appropriate boundaries.
| | Collapse this transcript |
| Updating the scroll bar's value| 00:00 | In this movie, we'll look at updating
the value of the scrollbar. So as the
| | 00:04 | scrollbar goes up and down, we'll
broadcast a change event that will tell a
| | 00:10 | value the scrollbar is at between 0 and 1.
| | 00:14 | So we'll start in the dragHandle method.
So we'll do this at the very bottom of
| | 00:21 | that method, and add an event listener
to the Stage and it's going to listen to
| | 00:27 | MouseEvent.MOUSE_MOVE. So it's
going to run wherever the mouse moves.
| | 00:33 | We will run a function called
updateValue. We'll define this right below
| | 00:38 | stopDragging and updateValue will be a
private method and it will receive an
| | 00:44 | event with the datatype of MouseEvent.
Sometimes we are actually going to want
| | 00:48 | to use updateValue without
triggering to MouseEvent.
| | 00:52 | So what we are going to do is give
this Event parameter a default value of
| | 00:56 | null, right inside of the parenthesis
there, and so we can run updateValue as a
| | 01:03 | method without passing in
anything and we won't get an error.
| | 01:07 | Before we define what's in the
updateValue function, I want to make sure that
| | 01:11 | we don't forget to remove the event
listener from the Stage. So just copy that
| | 01:14 | line of code where we added the event
listener to the Stage to listen for the
| | 01:17 | MOUSE_MOVE event and right at the
bottom of the stopDragging method, paste that
| | 01:21 | code and change
addEventListener to removeEventListener.
| | 01:25 | MOUSE_MOVE is definitely an event that
you want to make sure you stop listening
| | 01:29 | for as soon as you don't need to
listen for, because it weighs pretty heavily
| | 01:33 | on the Flash Player to calculate code
every time the mouse moves. So make sure
| | 01:39 | to remove that in appropriate
places in the stopDragging method.
| | 01:42 | So now let's define updateValue. In
updateValue, we'll set a value for that
| | 01:46 | value property. Remember that when we
first define this class, so we have that
| | 01:50 | public property called value. It's
going to be a value between 0 and 1.
| | 01:54 | So when the scrollbar is all the way at
the top, it's going to have a value of
| | 01:58 | zero, all the way at the bottom,
it's going to have a value of 1. So here's
| | 02:03 | how we set that. We basically divide
the position of the draggable element by
| | 02:09 | the max range we can go.
| | 02:11 | So the way that we get that position is
we start out with some parentheses and
| | 02:15 | we take the Y position of drag_mc, then
we subtract the minimum position and we
| | 02:23 | divide that value in the parentheses
by the maximum value. Remember, the
| | 02:27 | maximum value is not necessarily the
maximum Y position of the draggable
| | 02:31 | element, but it's the length of the drag.
| | 02:35 | So what we want to do here is then
kind of broadcast that the value has been
| | 02:41 | updated by dispatching an event. So we
use the dispatchEvent method. This is
| | 02:47 | built in to Flash. Capital E for Event
and in the parentheses, we are going to
| | 02:52 | create a new instance of the event class.
| | 02:54 | So type new space, event, capital E.
In the parentheses, we are going to
| | 02:59 | broadcast the changeEvent. So the
changeEvent is part of the event class. So
| | 03:03 | it's Event.CHANGE and basically what we
are saying here is that this value has
| | 03:10 | changed. So if we want to listen for
respond to that changeEvent from somewhere
| | 03:16 | else like our FLA file for
example, we can easily do that.
| | 03:19 | So let's save this file and then go
to the FLA and we'll check that scroll
| | 03:26 | value, select the first keyframe of
that layer, and open up the Actions panel,
| | 03:32 | and in the Actions panel, type
scrollbar_mc. Remember that's the name of the
| | 03:38 | scrollbar on the Stage. You could see
that, if you Click the Insert Target Path
| | 03:41 | button, and then .addEventListener and
the event that we are listening for is
| | 03:47 | that Change Event. So Event.CHANGE. So
whenever the value changes, it's going
| | 03:51 | to dispatch that Change Event that we just
wrote and this event listener will trigger.
| | 03:58 | So here I'll pass in handleChange. So
we'll define that handleChange function
| | 04:05 | right here. It's going to receive an
event with the datatype of Event, capital E.
| | 04:10 | No return data, and here what it is
going to trace, scrollbar_mc.value, and
| | 04:19 | so test the movie. And then just Click
and drag the scrollbar, and you should
| | 04:25 | see the value update in the output window.
| | 04:28 | I will just close the Preview window
here, and the Actions panel we'll check,
| | 04:31 | and in the Output window, see
what we've got. So there we go.
| | 04:35 | Now, what I'm going to do is test it
one more time. I'm going to drag it all
| | 04:39 | the way to the top, and you see that
it's 0 in the Output window, and I'm going
| | 04:44 | to drag it all the way to the bottom,
and it should be 1 in the Output window.
| | 04:48 | So what I'm going to do is just scroll
all the way to the bottom Output window,
| | 04:51 | and see that there is 1 there. So we
have appropriate values between 0 and 1
| | 04:56 | and that changeEvent is dispatching
properly. Nice. Return to the Actions
| | 05:01 | panel, delete the code that you
wrote there, and we are good to move on.
| | Collapse this transcript |
| Connecting the scroll bar to a text field| 00:00 | The first thing that we are going to
do is create public functions to handle
| | 00:05 | this private property. If you watch
my title on Object Oriented Programming
| | 00:10 | then you know what getter and setter
methods are. If you didn't watch that
| | 00:15 | title, don't worry. I'll explain it here.
| | 00:17 | So getter and setter methods allow you
to handle properties like methods. So a
| | 00:24 | SET method allows you to set properties
using a method and a GET method allows
| | 00:30 | you to retrieve property values using a method.
| | 00:34 | So we'll declare this as public. So
public function setText field, so the
| | 00:40 | public property is going to be text
field, whereas the private one begins with
| | 00:45 | an underscore. So it's _textField.
| | 00:47 | This is something that I and other
programmers do is have a private version of
| | 00:52 | a property, have an underscore, and
the public version does not have an
| | 00:55 | underscore. That way, it's easy to manage.
| | 00:57 | So in the parentheses, I'm going to
accept a value of tf and the datatype is
| | 01:02 | going to be TextField. That's going to
return nothing, so void. And then we are
| | 01:09 | just going to set _textField = tf.
So we set the private property there.
| | 01:15 | Now, remember you are wondering why we
go through all of this effort to set the
| | 01:19 | property here, when we could just have
textField be a public property and you
| | 01:23 | would set it? Well, right now,
it's actually exactly the same, so there's
| | 01:26 | really no benefit to doing that,
though some programmers like to have all
| | 01:30 | properties private and have the
retrieval and setting of property values
| | 01:34 | controlled this way.
| | 01:36 | I don't really carry that way, and the
only reason why I use getter and setter
| | 01:40 | methods is when I want a property
value to set and trigger other code. So
| | 01:45 | that's what we are going to do here,
but we are going to that in another movie.
| | 01:48 | So below this set method, we'll create
a get method. So remember this is going
| | 01:53 | to return that private property.
So public function getTextField, no
| | 01:58 | parameters, datatype it's going to
return is a Text Field and it's just going
| | 02:03 | to return _textField. Pretty straightforward.
| | 02:07 | So let's go to File, Save and then
jump over to the FLA, and go to the first
| | 02:13 | keyframe of the Actions layer, open
up the Actions panel. Remember that's
| | 02:17 | Option+F9 if you are on a Mac or
F9 if you are on a PC and we'll set
| | 02:21 | scrollbar_mc.textField = main_txt.
| | 02:28 | Now, if you want to check that
instance name, you can always Click the Insert
| | 02:31 | Target Path button, and confirm the
instance name there. I'll just Click Cancel
| | 02:35 | to close that window.
| | 02:36 | All right, you should be able to test
the movie, and though the Text Field
| | 02:40 | won't scroll if you Click the
Scrollbar, but you at least shouldn't get an
| | 02:44 | error. So looks like everything is
working properly. So close the Actions
| | 02:48 | panel, jump back over to the Scrollbar Class.
| | 02:51 | Now, what we are going to do is handle
the scrolling of the text field in the
| | 02:55 | updateValue method. So find the
updateValue method and right below where we set
| | 02:59 | the value, we are going to
see if Text Field is defined.
| | 03:03 | So if(_textField) and then what we want
to do is make sure that this only gets
| | 03:16 | called when the mouse is moving. So
that value has to be set for event. So if
| | 03:23 | there's a value for the Text Field, so
in other words, if Text Field is defined
| | 03:27 | &, so two ampersand events. So if
there is an event and it's not set to null,
| | 03:33 | so if the mouse is indeed moving and
this is not triggering for some other
| | 03:36 | reason, then we're going to do
what's in the Curly Braces here.
| | 03:40 | So here we'll set text field ScrollV
property. So _textField.scrollV, that's
| | 03:48 | vertical scroll and to get the proper
scroll, all we've got to do is take the
| | 03:52 | value and multiply that by the Text
Field's maximum vertical scroll, and that
| | 03:59 | will make the Text Field scroll to the
right place. Because value is going to
| | 04:02 | be between 0 and 1, so it's basically
a percentage. We multiply that by the
| | 04:06 | maximum scroll value, and that gives
us the perfect range to apply the scroll
| | 04:12 | to the Text Field. So _textField, make
sure to capitalize the F, .maxScrollV.
| | 04:21 | So this is pretty standard for
setting up a percentage being applied to
| | 04:26 | something. To set the proper
scroll value here, we just multiply our
| | 04:30 | percentage, which is going to be
between 0 and 1, by the maximum value of the
| | 04:35 | scroll. Now, this is actually
precisely right in theory, but in practice,
| | 04:42 | scaling of the Text Field and
the Scrollbar can affect this.
| | 04:48 | For example, let's say for some reason
value is just not quite getting to 1.
| | 04:56 | Something about the scaling of the
scrollbar and the Y position of the
| | 05:01 | draggable element makes it so value
doesn't quite get to 1. And I have seen
| | 05:06 | this happened when elements are scaled
to not full pixels or in other words,
| | 05:11 | instead of being 200 pixels high, it's
200.3 pixels high. So you can run into
| | 05:17 | these errors when that happens.
| | 05:20 | Now, if value doesn't get to 1 all
the way, then multiplying that by
| | 05:25 | textField.maxScrollV will not return
the maximum scroll. Because let's say
| | 05:31 | maxScrollV is 19, and any value less
than 1 multiplied by 19 is going to be
| | 05:37 | something less than 19.
| | 05:39 | Now scrollV, if you look it up in
Flash Help, you'll that it's an integer
| | 05:44 | value. What that means is that it's a
whole number, and any decimal values will
| | 05:49 | be cut off. So anything less than 19
would be truncated to just be 18. So we
| | 05:56 | wouldn't get that last line of text.
| | 05:58 | Now, to make sure that never happens
what I'm going to do is just round this
| | 06:03 | value up using the built-in Flash
method Math.ceil. So Math.ceil, and then just
| | 06:11 | wrap (value * _textField.maxScrollV)
and then you won't get any problems.
| | 06:19 | All right, so that should fix any
current or future problems that could arise
| | 06:26 | with the Text Field scrolling. So
let's save this file, and then go ahead and
| | 06:31 | test the movie. There is the Text Field
scrolling up and down correctly. So now
| | 06:39 | we've successfully connected the Text Field
to our Scrollbar, and it's scrolling properly.
| | Collapse this transcript |
| Using buttons for scrolling| 00:00 | Now that we've connected our
scrollbar to a text field and the text field
| | 00:03 | scrolls properly when we drag the
scrollbar, we are ready to set up the buttons
| | 00:08 | for the scrollbar. So let's scroll down
to the bottom of your code and find the
| | 00:12 | public set textField method. Right
below where we set the text field we are
| | 00:17 | going to add event listeners
to the Up and the Down button.
| | 00:20 | So up_btn.addEventListener, MouseEvent.
CLICK for the event type and then we'll
| | 00:28 | run a method called ClickScrollButton.
Make sure to capitalize S and the B. So
| | 00:36 | let's copy this line of code, paste
in on the next line. We'll use a same
| | 00:40 | method to handle the Click for down_btn.
| | 00:42 | All right, right above this method
we'll define a new private method called
| | 00:48 | ClickScrollButton. So private function,
ClickScrollButton and that will receive
| | 00:54 | an event with a data type of MouseEvent,
void because there is no return data
| | 00:59 | for event handlers.
| | 01:01 | And the first thing we'll do in here
is create a variable called percent and
| | 01:04 | we'll define that later, but that's
going to represent the percentage that the
| | 01:10 | text field is scrolled down.
| | 01:11 | So what we'll do on the next line is
actually scroll the text field. Now since
| | 01:15 | we are using this event handler for
two buttons, up_btn and down_btn, either
| | 01:22 | one of those could be Clicked to
trigger this event handler. So what we want to
| | 01:26 | do is use a conditional statement to
check to see which button is Clicked.
| | 01:31 | So if the up button was Clicked, we
scroll down, the down button was Clicked,
| | 01:34 | we scroll down. Now conditional
statement that would check that would require
| | 01:38 | approximately eight lines of code and
of course, you can write in less. But
| | 01:43 | what I want to show here is a
shorthand way to write a conditional statement.
| | 01:48 | So _textField.scrollV += and we'll
write the conditional statement. So we are
| | 01:57 | not going to use the word if, but we
are going to use parenthesis. So we type
| | 02:00 | some parenthesis and I'll put the
condition in the parenthesis. So the
| | 02:04 | condition is going to be event.
currentTarget. Remember currentTarget holds a
| | 02:09 | reference to the object that added
the event listener. So this can only be
| | 02:13 | up_btn or down_btn.
| | 02:16 | So == up_btn and then after the
parenthesis put a question mark. The question
| | 02:25 | mark is kind of like saying then. So if
the event.currentTarget == up_btn, then
| | 02:32 | what we are going to do here is put a
value of -1. So if you remember math
| | 02:37 | class back in high school adding a
negative number is the same thing as
| | 02:41 | subtracting a positive number. So this subtracts
1 from scrollV, if the current target is up_btn.
| | 02:49 | So after that what we are going to do
is we are going to say what happens if
| | 02:53 | the current target is not up_btn. To
define sort of an else statement shorthand
| | 03:00 | use a colon. So we type : 1 and there
is our shorthand conditional statement
| | 03:08 | condensing what have been on
eight lines into one line of code.
| | 03:12 | And just to recap, all you do is
you put the conditional statement in
| | 03:15 | parenthesis, use a question mark and
after the question mark you put what
| | 03:20 | happens if the statement is true,
which is this -1 and then you have for the
| | 03:25 | else statement a colon and then
just put the value right after that.
| | 03:29 | So there is your shorthand conditional
statement. So let's go to the next line
| | 03:34 | and we'll set the value of percent. So
type percent and we'll set that equal to
| | 03:39 | the percentage of the text field to
scroll down. Now to figure that out we need
| | 03:43 | to take where the text field is scrolled to and
divide that by the text field's maximum scroll.
| | 03:49 | Now we have one problem in doing that
is that the minimum scroll value is 1. So
| | 03:56 | we don't have this 0 beginning index.
So what we want is to offset the minimum
| | 04:01 | and maximum value so that we have a
value, let's say the maximum was 19, so we
| | 04:07 | could scroll down 19 times. Then we
want to offset that from being between 1-19
| | 04:13 | to 0-18. So that way the minimum
percent value is 0 and the maximum is 1.
| | 04:21 | So percent = and in parenthesis we'll
take _textField.scrollV as its current
| | 04:28 | vertical scroll -1 and then a
forward slash, because we are going to be
| | 04:33 | dividing and some parenthesis
after that. I'm going to divide that by
| | 04:37 | textField's max scrollV. So _textField.
maxScrollV. That's the maximum amount of
| | 04:44 | vertical scroll that we can have here. And
we subtract 1 again to offset that value.
| | 04:50 | So we can start at 0. So percent gives
us a value between 0-1 and then we'll
| | 04:53 | set the Y position of the drag movie
clip. So drag_mc.y = percent. So standard
| | 05:04 | thing, we take the percent and multiply
by the maximum range. So percent * max
| | 05:08 | and then because the maximum range as
we set earlier in our code, if you will
| | 05:13 | find out where we set the value of max,
is just the maximum range that
| | 05:19 | draggable movie clip can scroll. It's
not the maximum Y position that the movie
| | 05:25 | clip can scroll down.
| | 05:26 | So in order to get the maximum Y
position, we are going to have to add on the Y
| | 05:30 | position of the bar, which is held in
the min property. So scroll back down,
| | 05:34 | find out where we are saying the Y
position of drag_mc and then add on min. So
| | 05:41 | that will put drag_mc in Y
position when we Click the scroll button.
| | 05:45 | Finally, what we want to do is update
that value property and dispatch the
| | 05:50 | change event. So all we have to do is
here run the updateValue method. We don't
| | 05:55 | have to pass in any kind of event or
anything as remember we set an initial
| | 05:58 | value for that event parameter to
null. So we can run the method without
| | 06:03 | passing in any parameters.
| | 06:04 | All right. So that looks good. Let's
save and test. So I'll Save the file, test
| | 06:09 | the movie and then what we are going
is Clicking the scroll buttons to scroll
| | 06:13 | the text field. So we'll see it
scrolls all the way down to the last line and
| | 06:18 | then all the way up to the first line.
You notice that drag_mc movie clip is
| | 06:23 | moving as I Clicked.
| | 06:24 | Nice! So now we have successfully not
only connected the text field to the
| | 06:29 | scrollbar, but we can scroll
the text field using our buttons.
| | Collapse this transcript |
| Controlling scroll bar scaling| 00:00 | In this movie we are going to finish
our scrollbar by adding a special feature
| | 00:04 | to control the scaling of the scrollbar.
| | 00:06 | So let's say this text field was
way too big. Let's say I want it to be
| | 00:11 | smaller. So I'm going to double-Click
it and then I'm going to Click-and-drag
| | 00:14 | the handle to scale the size of the
text field. And I'll make it approximately
| | 00:23 | half the size. That looks good. Make
sure about the way that you don't use a
| | 00:27 | Free Transform tool when you are doing
it, but you are actually double-Clicking
| | 00:30 | it and changing the size of the dynamic
text field, not scaling the dynamic text field.
| | 00:35 | For the scrollbar we'll use the Free
Transform tool. Select the scrollbar, and
| | 00:40 | Click-and-drag up, make sure to hold
to Option or Alt to anchor at the top as
| | 00:45 | you drag from the bottom. So you have
a scale to scrollbar now. And as I test
| | 00:49 | the movie, it works okay, but the
scrollbar is scaled and it looks a little bit
| | 00:57 | pixilated and awkward.
| | 00:58 | So what I'm going to do is change the
code so that the size of the scrollbar is
| | 01:04 | the same, but there is none of this
awkward scaling. So close the Preview
| | 01:08 | window, jump over to your Scrollbar
class. Here go to the constructor method,
| | 01:13 | select the lines of code where we set
the min and max values and cut them,
| | 01:18 | Command+X or Ctrl+X.
| | 01:20 | Run a method called draw. This is
something that we are going to define in just
| | 01:24 | a moment. Notice it's a built-in method
as well, and this is actually something
| | 01:28 | that components use to control the
scaling of themselves. So we are basically
| | 01:34 | staying consistent with Flash here. So
this is an instance where I prefer to
| | 01:39 | use this built-in word since it
kind of keeps everything standard.
| | 01:43 | So in the parenthesis here I'm going
to passing the width and the height of a
| | 01:47 | scrollbar via the Width and Height
properties. So let's define our draw method
| | 01:52 | and this is going to be public, so we
can run it from anywhere. It's going to
| | 01:57 | receive a parameter called w. It's a
number and then h, also a number, no
| | 02:03 | return data. And then inside of the
method the first thing we are going to do
| | 02:07 | is just paste the code that we just cut.
| | 02:10 | Above that code, we are going to set
the scale X and scale Y properties of the
| | 02:14 | scrollbar to 1. So scaleX = scaleY = 1.
So on the next line we are going to set
| | 02:24 | the height of bar_mc. So type bar_mc.
height. That's the bar that's kind of the
| | 02:30 | background for the scrollbar and this
can scale vertically without giving any
| | 02:34 | awkwardness at all.
| | 02:35 | So we are going to set a type = h.
That's the height of the scrollbar when the
| | 02:40 | code initializes. So this is the
scaled height minus in the parenthesis
| | 02:44 | that I'm going to type up_btn.height and
from there I'm going to subtract padding.
| | 02:50 | So if we where at up_btn.height, it
would be a line at the bottom of the up
| | 02:56 | button. We subtract the padding since
the up button has a little curve on a
| | 03:00 | bottom. So we want to account for that,
so we subtract the padding. And finally
| | 03:04 | we multiply that by 2, and so it's
actually following the mathematical order of
| | 03:10 | operation. So the code in the parenthesis
gets multiplied by 2 and not everything.
| | 03:16 | So we take that full height, we
multiply (up_btn.height - padding) by 2 to
| | 03:25 | account for the up button and the down
button. So that gives us the height that
| | 03:29 | we want the bar to be. So on the next
line, we'll set the Y position of the
| | 03:34 | bar. So bar_mc.y = up_btn.height - padding.
| | 03:42 | Remember that up_btn has a little curve
at the bottom. So we want to move it up
| | 03:47 | a little bit behind that so there is
not any space where that curve is. So we
| | 03:51 | go to the next line, now we need to
set the down button's Y position. So
| | 03:55 | down_btn.y = bar_mc.height + bar_mc.Y
- padding. So that puts the down button
| | 04:06 | in the right place. We don't need to
mess with the up button, because that's
| | 04:08 | always going to be at the top. So it's
going to have a value of 0, so that's okay.
| | 04:13 | So we set min and max, that's correct,
and finally we are going to set the Y
| | 04:19 | position for the draggable element
to put at the top of the beginning. So
| | 04:23 | drag_mc.y = min. So that its
minimum position. And that's it.
| | 04:30 | Basically, we just take the width and
height of the object is already and we
| | 04:34 | set the scaleX and scaleY to 1.
Then we use the height property here to
| | 04:39 | properly scale the height of the
scrollbar. So save this file, test the movie,
| | 04:46 | and the scrollbar is the appropriate size, but
it's not scaled awkwardly like it was before.
| | 04:52 | So I can go back to my FLA file and
using the Free Transform tool can hold the
| | 04:57 | Option on my keyboard and Click-and-
drag to scale it down whatever size I want,
| | 05:03 | and the scale is going to look just
right. So I can still control it just fine
| | 05:07 | by Clicking-and-dragging
or by Clicking the buttons.
| | 05:11 | So to recap what you learned in this
chapter, you learned how to drag the
| | 05:15 | element in the scrollbar
constraining its positions, you connected the
| | 05:20 | scrollbar to the text field on the stage,
added the functionality to scroll the
| | 05:24 | text field, and the scrollbar with the
buttons, and you can control the scaling
| | 05:29 | of the scrollbar, so you can scale it
to whatever height you want, and it will
| | 05:33 | still render properly. Good job.
| | Collapse this transcript |
|
|
3. Creating a Text AreaExploring the FLA file| 00:00 | In this chapter we are going to build
the TextArea user interface element. Now
| | 00:04 | we've already seen how to create a
scrollbar, how to combine that scrollbar and
| | 00:09 | the text field. So what's different here?
| | 00:11 | What we are doing in this chapter is
combining the scrollbar and the text field
| | 00:16 | into one element so that we can scale
and have everything rendered properly. We
| | 00:22 | also want to create a quick way to
load external text and to display any type
| | 00:27 | of text in the text field. So in this
chapter we are going to do that and build
| | 00:31 | this application from scratch.
| | 00:33 | So on the stage here, I have two layers
one called actions and one called art.
| | 00:38 | Actions has no code in it. The art
layer has a movie clip instance called TA.
| | 00:43 | It's an instance of the TA movie
clip, short for TextArea, and if I
| | 00:47 | Double-Click it on its timeline,
you'll see that on the stage there is a
| | 00:51 | dynamic text field with no instances
name. I have it with the border around the
| | 00:56 | text and I have embedded all the characters.
| | 00:58 | Again, because I like the way that
renders better than not embedding the
| | 01:02 | characters. So you can choose to do it
wherever you like. And then there is a
| | 01:05 | scrollbar. Scrollbar also has no
instance name. It's an instance of scrollbar,
| | 01:11 | which is connected to the Scrollbar
class we created in another chapter. So you
| | 01:15 | can see that here in that
Symbol Properties window.
| | 01:17 | So if you don't have the exercise files,
what your need is the scrollbar from
| | 01:22 | the chapter where we created the
scrollbar in this TextArea, and this text
| | 01:26 | field inside of one movie clip called
TA, and they don't need instance names.
| | 01:31 | Once you have your FLA file setup,
you are ready to get started.
| | Collapse this transcript |
| Defining the TextArea class| 00:00 | Now before we get started writing the
TextArea class, I want to make sure you
| | 00:04 | have all your files and
folders organized properly.
| | 00:07 | So here I have the Text-Area.fla. This
is where I'm working in this movie and
| | 00:12 | then I have a file called external.txt.
You don't need to worry about that for
| | 00:16 | now, it's just external text file that
contains some text. In the same folder
| | 00:20 | as the Text-Area.fla file I have a
folder called com. Inside to that folder
| | 00:24 | there is a folder called lynda, these
are all lowercase, and this will need to
| | 00:28 | be lowercase as well. Inside of the
lynda folder I have a folder called the ui
| | 00:33 | and then inside there I have two
files: Scrollbar.as and TextArea.as.
| | 00:37 | The Scrollbar.as file is an
ActionScript class that you created in the chapter
| | 00:43 | where we created the scrollbar. So
you'll need that file here. You'll also need
| | 00:48 | a blank ActionScript file called
TextArea.as. So once you've created these
| | 00:52 | files, and they are in the right
folder structure, you're ready to start
| | 00:56 | working. And I'm going over to TextArea.as, and
we'll start writing the code to define this class.
| | 01:02 | The first thing we do is declare the
package. So the package is com.lynda.ui,
| | 01:07 | some curly braces below that, and it
will declare the class, so public class
| | 01:14 | TextArea. Notice this is blue, this
is also a reserved class in Flash, but
| | 01:20 | because we are declaring in our own
package, then it's not going to have any
| | 01:24 | conflict. You can feel free to name
this file differently, if you'd like, and
| | 01:29 | name the class differently. But we are
using something that's kind of the same
| | 01:33 | as what's build in the Flash already.
So I'm basically recreating it here
| | 01:38 | myself. That's why I'm okay using this reserved
keyword. Again, you can use it or not, it's okay.
| | 01:44 | After public class TextArea, we'll
extend the Sprite class. The Sprite class is
| | 01:50 | basically a one-frame movie clip. So
if you are not going to have multiple
| | 01:53 | frames in a timeline when you are
extending some class, then you might as well
| | 01:57 | use the Sprite class instead of movie
clip and it's going to be less memory
| | 02:01 | intensive. So curly braces below that,
and I'll declare the constructor method.
| | 02:05 | So public function TextArea, some
parenthesis, and some curly braces.
| | 02:10 | Now we'll import the classes that we'll
be using in this file. So I'm going to
| | 02:15 | import flash.display.Sprite. On
the next line I'm going to import
| | 02:22 | flash.events.Event, and we are going
to use the urlRequest and urlLoader
| | 02:30 | classes so import flash.net.* and
then finally we'll import the textField
| | 02:36 | class. So flash.text.TextField.
| | 02:39 | All right, now that we've imported
the proper classes, we'll start creating
| | 02:43 | some properties. So first we'll
create the public properties. So one public
| | 02:48 | property called scrollbar. And a data
type is a Scrollbar. Make sure the b is
| | 02:54 | lowercase. And remember Scrollbar is
the Scrollbar class we created in another
| | 03:00 | chapter, and this will represent
the scrollbar for our TextArea.
| | 03:05 | So below that create another public
property, call this one textField. Again
| | 03:10 | it's a reserved keyword, but since
it makes sense to use something called
| | 03:14 | textField to represent a text field,
then I feel good about using this reserve
| | 03:18 | keyword. If you'd rather use
something else, that's okay too.
| | 03:21 | So data type this to your textField,
and now we'll create some private
| | 03:25 | properties. So private var _source,
this will represent the source for external
| | 03:32 | text files, we'll look at loading
those later on, and then we'll have another
| | 03:36 | private property called _text. That's
going to be a string as well. This will
| | 03:41 | be text that goes inside of textField. So
that's pretty much it for our TextArea class.
| | 03:46 | And the first thing I'm going to do is
just use a trace statement to make sure
| | 03:49 | that everything is running properly.
So trace TextArea class is running, and
| | 03:56 | we'll save this file, jump over to
the FLA and then open up the Library,
| | 04:04 | Right-Click the TA movie clip, go
to Properties, check our Export for
| | 04:09 | ActionScript. Make sure you are in
advanced mode, or else you won't see Export
| | 04:12 | for ActionScript. And for the base
class .com.lynda.ui.TextArea, hit OK, you
| | 04:22 | should get this message that the class
definition is not found. That's okay.
| | 04:27 | And it looks everything is working
properly. So we'll test the movie, and sure
| | 04:32 | enough I get that message in the Output
window; everything is running properly.
| | 04:35 | So clear the Output window, go to the
class file, delete the trace statement,
| | 04:42 | save the file, and our TextArea
class is created and running properly.
| | Collapse this transcript |
| Initializing the text area| 00:00 | At the beginning of this chapter, we
setup our FLA file without giving instance
| | 00:05 | names to the dynamic text field or the
scrollbar inside of the TextArea movie
| | 00:10 | clip. In this movie, I'll show you how
to access those elements to initialize
| | 00:15 | the TextArea. So in the constructor
method let's run a method called init,
| | 00:20 | which we'll define right now.
| | 00:21 | We will make init a private method,
no return data and this is going to
| | 00:30 | basically initialize the TextArea. So
part of that initialization process is
| | 00:35 | going to be going through all of the
elements inside of this TextArea and
| | 00:41 | looking for the dynamic text field, as
well as the scrollbar. So we are going
| | 00:47 | to create a loop that's going to loop
through all of the children inside of the
| | 00:51 | TextArea. So for(var i:uint = 0; i <
numChildren; i++). And inside of loop
| | 01:05 | write an if statement and write inside
of there, if(getChildAt(i) is Scrollbar).
| | 01:19 | So if this child is a Scrollbar then
scrollbar = Scrollbar(getChildAt(i)). So
| | 01:30 | basically we are taking some data and
we are telling Flash to treat it as a
| | 01:33 | scrollbar and that's because getChildAt(i)
returns a display object. So we are
| | 01:39 | just basically saying that, treat this
object as a scrollbar so that we won't
| | 01:43 | get an error. So highlight
getChildAt(i), copy it, put it inside the
| | 01:47 | parenthesis for Scrollbar and that's it.
So copy that if statement, paste it
| | 01:53 | below, and then change Scrollbar and the if
statement that you just pasted to TextField.
| | 01:59 | So if this child is a TextField and
then we are going to set the TextField. So
| | 02:03 | textField = TextField(). This is
type casting again, remember, because
| | 02:08 | getChildAt(i) returned the display
object. So again I'm just going to copy and
| | 02:12 | paste that inside the parenthesis for
the TextField type caster and that's it.
| | 02:17 | So these objects don't have instance
names but they are still inside of the
| | 02:21 | TextArea, so we can loop through that
as long as there is one TextField and one
| | 02:25 | Scrollbar. No problem. Now we want
to make sure that this worked properly
| | 02:29 | before we move forward. So what we are
going to do is throw errors if there is
| | 02:34 | no Scrollbar or no TextField. We are
going to check to see in this if statement
| | 02:38 | is Scrollbar is undefined.
| | 02:40 | You can do that by just writing an
exclamation point before the property. So
| | 02:46 | !scrollbar, which means if no
scrollbar or in other words if scrollbar is
| | 02:50 | undefined, then we are going to create
an error. So throw new Error and at the
| | 02:58 | parenthesis just write a string out that
just basically says "No scrollbar found!".
| | 03:04 | That way if you are using this code
later on in a TextArea and let's say you
| | 03:10 | forget to put a scrollbar in there,
then you are going to get this error which
| | 03:14 | will basically remind you that you
need to have a scrollbar inside of the
| | 03:18 | TextArea. So just copy and paste that
if statement right below itself. Check to
| | 03:25 | see if TextField is undefined and then
change ("No Scrollbar found!") in the
| | 03:29 | pasted code to ("No textField found!").
| | 03:33 | That's it! So we'll save the file,
File, Save. Jump over to the FLA file and
| | 03:40 | just to prove that it's working
properly, we'll go to our ActionScript on the
| | 03:44 | Actions layer and we are just going
to trace ta. That's our TextArea on the
| | 03:48 | stage. Again, you could check it if
you Click that in certain target path
| | 03:51 | buttons, you will see ta right there.
| | 03:53 | I will cancel out of that. .textField.
So if this gives us any kind of value or
| | 04:00 | if it says object TextField then we
are in business. So it looks like we had
| | 04:05 | the TextField defined. So Flash found
the TextField even though it didn't have
| | 04:08 | an instance name and has it inside of
that TextField property. So if you ever
| | 04:13 | want to not have to add an instance
name to something, you can use this same
| | 04:17 | form that we just did to do that.
| | 04:19 | So now our TextArea is initialized and
it has the Scrollbar property and the
| | 04:24 | TextField property, and the last thing
we'll do here is just add one line of
| | 04:29 | code right below that if(!textField)
statement and we are going to connect the
| | 04:33 | scrollbar to the text field.
| | 04:34 | So scrollbar.textField = textField.
So we set the scrollbar as textField
| | 04:44 | property. So now the text field should
scroll when you drag the scrollbar. So
| | 04:49 | Save this file, and then test it out
in the Flash Player, Click-and-drag to
| | 04:56 | scroll and we are good. So now our
TextArea is completely initialized.
| | Collapse this transcript |
| Setting text in the text area| 00:00 | In this movie we are going to look at
making a simple way to put text in the
| | 00:05 | TextArea. Right now, you have to go
through the textField property, so it would
| | 00:09 | be TextArea.textField.text
equals whatever text you want.
| | 00:14 | Now although you can do that, it's
not as clean as going through a property
| | 00:18 | like text. So basically it would be
TextArea.text equals whatever text you
| | 00:23 | want. So it cuts out that text field in the
middle and makes it a little bit cleaner to use.
| | 00:28 | So we already have this _text private
property and what we are going to do is
| | 00:33 | create a public property called text
via set and get methods and whenever you
| | 00:39 | set that text property, it will
automatically update the text field. So it will
| | 00:43 | be a bit more user friendly from the
main timeline. So scroll down all the way
| | 00:49 | to the bottom of the code and then right
below the init method, let's define a set method.
| | 00:55 | So, public function set text and and
we'll receive a property called t, which
| | 01:02 | will be a string. No return data. And
so all we'll do is set _text =t and then
| | 01:11 | set the textField.text = _text and of
course, we want to have a get method as
| | 01:18 | well. So public function get text(),
return a string and inside of this method
| | 01:25 | all we'll do is return whatever
values inside the text field, so return
| | 01:28 | textField.text. That's it.
| | 01:32 | So we'll save the file, File, Save,
and then jump over to the FLA and on the
| | 01:38 | main timeline, I'll select the first
keyframe of the Actions layer and open up
| | 01:42 | the Actions panel and set ta,
remember that's the name of our text field,
| | 01:46 | ta.text = "Here's some text set with
text property". So test the movie, and
| | 01:58 | there is your text in the text field. Nice.
| | 02:01 | So now we have successfully established a quick,
easy, clean way to put text inside of the text area.
| | Collapse this transcript |
| Adding text from an external file| 00:00 | Just like in another movie where we
made a quick and easy way to set text our
| | 00:04 | text area, in this movie we'll create
a quick and easy way to set an external
| | 00:09 | text file to load into our text area.
So right now I have my file external.txt
| | 00:16 | open in a text editor called TextEdit.
| | 00:19 | Now for those of you folks who don't
have the Exercise files, you will need to
| | 00:22 | create a plain text file now and put
some text inside of it, preferably enough
| | 00:26 | text to scroll. You can create a plain
text file using TextEdit on the Mac or
| | 00:31 | Notepad on the PC. So let's jump over
to our ActionScript file. So we have the
| | 00:37 | private var _text to set the text
value and here we have the source property
| | 00:43 | that's private that we'll use to set
the source of the external text. Now
| | 00:48 | before we set that, I want to go to
the FLA file and delete the text that's
| | 00:53 | currently in the text field.
| | 00:54 | So I'm going to just go inside of
that movie clip, Double-Click in the text
| | 00:57 | field, Command or Ctrl+A to select
all that text and then delete it. So the
| | 01:02 | text field is still there just not
the text. So back to the class file and
| | 01:07 | we'll scroll down to the bottom of
the code and now add some get and set
| | 01:11 | methods for that source property.
| | 01:13 | So the first thing we'll do is define
the set method. So public function set
| | 01:17 | source and the parenthesis will
receive one parameter called src:String. That
| | 01:23 | will represent the path to the file,
no return data so :void. And the first
| | 01:29 | thing we'll do in here is create a url loader.
| | 01:31 | So var loader:urlLoader = new urloader
(). On the next line we'll set _source =
| | 01:43 | src and then we'll add an
event listener to the loader,
| | 01:47 | loader.addEventListener. Remember to
always add your event listeners before you
| | 01:51 | load the file. So Event.COMPLETE. We'll
run a function called fileLoaded, we'll
| | 01:56 | define that in just a moment, and then
finally we make the loader and load the files.
| | 02:00 | So loader.load and we'll create the
new urlRequest inline right here. So load
| | 02:06 | (_source)), make sure to have two
closed parenthesis there, loader.load(new
| | 02:10 | urlRequest(_source)). And now
let's define the get method and then we'll
| | 02:13 | define file load. So public function
get source():String. This is right below
| | 02:18 | set source and all it's going to do is
just return String. And inside of the
| | 02:22 | method, we are just going to return _source.
| | 02:26 | All right, above set source,
define a private method called
| | 02:31 | fileLoaded(event:Event):void. Now
since the loader variable, was a local
| | 02:38 | variable for the set source method, we
can't access that variable here. But we
| | 02:43 | can get the loaded data through the
event parameter. So that's what we'll do.
| | 02:47 | So textField.text = event.target.
That's going to return a reference to the
| | 02:53 | loader and then .data and that will
return the loaded data. So save the file
| | 03:00 | and if you go to the FLA, once you go
to the main timeline and go to the first
| | 03:06 | keyframe in the Actions layer, open up
the Actions panel and replace the code
| | 03:10 | that's currently there with the
following: ta.source = "external.txt".
| | 03:20 | Now for those of you who don't have
the exercise files, you need to make sure
| | 03:23 | that this file is in the same folder
as your FLA file in order for this to
| | 03:26 | work. So test the movie and there is
our external text inside of our text
| | 03:33 | field. All we had to do
is set the source property.
| | 03:36 | Now I'll Click-and-drag to scroll down,
you can scroll with the buttons and it
| | 03:40 | looks great. So I'll close the preview
window. And now you have an unbelievably
| | 03:44 | easy and intuitive way to set text
from the external file in your text area.
| | Collapse this transcript |
| Capturing text input| 00:00 | Now up to this point, we looked at
putting text in our text area using the text
| | 00:05 | property and the source property by
applying text from an external source. In
| | 00:10 | this movie, we are going to change
our Dynamic text field to an Input text
| | 00:15 | field, and then capture the data that's
put inside the text field from the user
| | 00:21 | and store that in our text property.
| | 00:24 | So the first thing we'll do is just
Double-Click our text area on the stage,
| | 00:28 | select the text field, open up the
Properties panel and change the Dynamic text
| | 00:33 | field to an Input text field. It is easy enough.
| | 00:35 | Let's jump over to our ActionScript
file. When you are capturing text input
| | 00:40 | data, there is actually an event that
fires off that tells you that text has
| | 00:44 | been entered into a text field. That
event is called text event and its part of
| | 00:48 | the events package. So all I'm going to
do is just change that import statement
| | 00:52 | that imports flash.events.event to flash.
events.* to make sure that imports that class.
| | 00:58 | Now what we do is scroll down to the
bottom of init method, and then we are
| | 01:03 | just going to add one line. So right
below scrollbar.textField = textField, we
| | 01:08 | are going to type textField.
addEventListener and the event is going to be Text
| | 01:15 | Event.TEXT_INPUT and we'll run a
method called newText. So this is when text
| | 01:27 | comes in from the user,
entered into the text field.
| | 01:31 | So let's create a private method right
below the init method and we call this
| | 01:36 | newText and we'll receive an event
with the data type of TextEvent. No return
| | 01:46 | data, so :void and in here the first
thing we are going to do is use a trace
| | 01:52 | statement to check what text has
been added. The way to get that text is
| | 01:56 | through the event object. It has a
text property that contains the last
| | 02:01 | character that was put inside of the text field.
| | 02:03 | So it's just going to give one
character at a time. So we are tracing
| | 02:07 | event.text. Save the file and then
test the movie and we can just delete all
| | 02:15 | the text in here, so you can just do
a Ctrl+A or Command+A, and then type a
| | 02:19 | character. So I'll type a, then we see
the a up here in the output window. So
| | 02:25 | type anything you want and you
will see that text appear there.
| | 02:27 | So this is going to give us one
character at a time. Now I'm just going to
| | 02:33 | minimize the output window, so we have
some more room. So basically all we have
| | 02:37 | to do is just append that character to
our _text private property. So text +=
| | 02:43 | event.text. Now we'll just trace(text)
to make sure it's working properly.
| | 02:49 | So File, Save, test the movie, delete
the text that's in there, type some text
| | 02:57 | and notice that it begins with null.
So the reason is that we are starting of
| | 03:04 | with not defining _text. So what we
are going to do is just use the simple if
| | 03:10 | statement right above where we set _text,
so write if some parenthesis and some
| | 03:15 | curly braces and in that if statement,
we'll check to see if _text is not
| | 03:21 | defined. So if(!_text). Then we'll
just set _text = "" and that way we won't
| | 03:30 | get null at the beginning of our string.
| | 03:32 | So let's test the movie after we save
this file, delete all the text in there
| | 03:37 | again, type and then it doesn't start
with null. Now let's erase the trace
| | 03:44 | statement and save the file and now we
have successfully captured data from the
| | 03:51 | text field using the TextEvent.TEXT_INPUT event.
| | Collapse this transcript |
| Controlling text area scaling| 00:00 | Just like we did with the scrollbar
in a previous chapter, we're going to
| | 00:04 | enable this text area to support
scaling. So that way, I can take this text
| | 00:10 | area, and using the Free Transform tool,
I could scale it down to a size, say
| | 00:15 | like this, and test the movie. Instead
of getting this result, I would get a
| | 00:23 | resized text field that's not scaled.
So I'm going to close this SWF file. I'm
| | 00:29 | going to go over to TextArea.as.
| | 00:30 | So the first thing I'm going to do is
run a method called draw, right below the
| | 00:35 | init method. Again, draw is built in
and it's used with components to re-render
| | 00:43 | them, just like we're doing with our
text area, so I think it's appropriate to
| | 00:46 | use that same method name here. So in the
parenthesis, we're going to pass in width and height.
| | 00:55 | Then right below the constructor
method we'll define a public method called
| | 00:59 | draw, receive a parameter called w
that will be a number, and a parameter
| | 01:05 | called h that will also be a number. It
won't return anything, so :void. In the
| | 01:12 | curly braces, the first thing we'll do
is set the scaleX and scaleY properties
| | 01:16 | equal to 1. We'll do that on the same
lines, so scaleX = scaleY = 1. So we're
| | 01:23 | taking away the scaling but we still
have w and h for those sizes that the
| | 01:28 | person wanted to scale the TextArea to.
| | 01:30 | So we can use those later, but we're
just making sure the TextArea is not
| | 01:34 | scaled at this point. So you go to the
next line and type textField.width = w.
| | 01:39 | That's the full width the person can
scale the TextArea to. So we're going to
| | 01:46 | subtract the width of the scrollbar now.
So - scrollbar.width, and that's how
| | 01:53 | wide the text field should be. So
we'll set the text field height,
| | 01:58 | textField.height = h.
| | 02:01 | Now, one thing to note about a text
field is that when you set its width and
| | 02:06 | height properties, it doesn't scale the
text field. It just changes the size of
| | 02:11 | the text field. So the Font will be
of the same size but the area where the
| | 02:15 | text will appear, will change.
| | 02:17 | So we go to the next line and we'll
set scrollbar as x, so scrollbar.x =
| | 02:22 | textField.width, aligning it with
the right edge of the text field and
| | 02:30 | scrollbar.y = 0. So we'll align it
with that top edge of the TextArea,
| | 02:38 | scrollbar.draw. So we'll redraw the
scrollbar, passing in w and h. Then
| | 02:45 | finally, we connect the scrollbar to
the text field. So scrollbar.textField =
| | 02:51 | textField. And that's it.
| | 02:56 | So save the file, test the movie
again, and now our previously, awkwardly
| | 03:04 | scaled text area now looks great. So we
can see that we can scroll down and see
| | 03:10 | all the text in there and the scroll
buttons work as well. It's the size that
| | 03:15 | we wanted, that we set using the
Free Transform tool in our FLA, but it's
| | 03:20 | scaled appropriately by using our draw method.
| | Collapse this transcript |
|
|
4. Creating a CheckboxExploring the FLA file| 00:00 | In this chapter we're going to make a
standard user interface checkbox. So
| | 00:05 | you'll be able to Click on the checkbox
and the check will appear, if you Click
| | 00:08 | on it again, the check will disappear.
We also make it so you can control the
| | 00:11 | text to the right of the
checkbox using ActionScript.
| | 00:15 | Before we start, let's take a look
at our FLA file. This is especially
| | 00:18 | important for those of you who don't
have this FLA file. So on the stage here,
| | 00:23 | I have a layer called actions with no
code in it and a layer called checkbox
| | 00:27 | with three checkboxes.
| | 00:29 | So, the first one is called box1_mc,
second one, box2_mc, and if you want to
| | 00:35 | guess what the third one is, yes, it's
box3_mc. So here, let's take a look at
| | 00:41 | this movie clip, they are all instances
of checkbox. So let's Double-Click that
| | 00:46 | Checkbox movie clip to enter its Timeline.
| | 00:48 | Top layer is text so if I show and
hide that, you'll see that's just the
| | 00:52 | Dynamic Text field. If you select the
Dynamic text field see that it's called
| | 00:56 | label_txt. So I used a font
and font size and colors on this. That's
| | 01:03 | not very important for this exercise but if
you want to copy me, feel free to do that.
| | 01:08 | Always embed fonts with Dynamic Text
boxes because it always renders a little
| | 01:12 | bit better. So I just embed Uppercase,
Lowercase, Numerals and Punctuation. So
| | 01:18 | you can do that if you want, and I have
none of the options checked and have it
| | 01:22 | be selectable or render as HTML
or show border around the text.
| | 01:27 | The main thing that you need here is to
name it label_txt. So that's that, and
| | 01:32 | on the next layer we have selected. If
I hide that, you'll see that that's the
| | 01:37 | checkbox with X on it. If I select that,
you'll see it's called selected_mc. So
| | 01:41 | it's just a simple bitmap graphic, stored in a
movie clip with an instance name of selected_mc.
| | 01:48 | Now the bottom element doesn't even
have an instance name, it's just a movie
| | 01:52 | clip. So, if you don't have the
Exercise Files, you don't have to make these
| | 01:56 | bitmaps. You just make any simple
artwork, just make an X, call it selected_mc.
| | 02:02 | Then you'll need the textbox called label_txt.
| | 02:05 | So once everything is set up in your FLA file,
you're ready to start coding your checkbox.
| | Collapse this transcript |
| Defining the Checkbox class| 00:00 | The code for our Checkbox is going to
be stored in our Checkbox class, which is
| | 00:04 | going to be in the ActionScript file
Checkbox.as. For those of you who don't
| | 00:08 | have the Exercise Files, you will
need to setup your folder structure
| | 00:12 | appropriately. I'm going to tab over
to Finder to show you how mine is setup.
| | 00:16 | So you will have your Checkbox.fla and
then a folder called com in that same
| | 00:20 | folder. Inside of the com folder,
create a folder called lynda. Notice these
| | 00:23 | are all lowercase. Inside of the
lynda folder you have a folder called ui.
| | 00:27 | Inside of the folder called ui,
create a file called Checkbox.as.
| | 00:32 | Back to Flash. All right in Checkbox.as,
the first thing we are going to do is
| | 00:36 | declare the package. Just like the
other classes that we have created, the
| | 00:39 | package is going to be com.lynda.ui.
Type some curly braces and we'll import
| | 00:46 | some classes that we'll be using. So
we'll import first flash.display.* and
| | 00:52 | then we'll import flash.events.* and then
finally we are going to import flash.text.*.
| | 01:02 | Then we'll declare a class, public
class Checkbox, we are going to extend the
| | 01:13 | Sprite class, because we had
essentially one frame movie clip. So we can
| | 01:17 | optimize our application by using the
Sprite class instead of movie clip. So
| | 01:21 | right below that some curly braces,
we'll declare some private properties.
| | 01:25 | So the first one is going to be _
label that will be a String that will
| | 01:29 | represent the label that's on the
Checkbox or in other words the text that's to
| | 01:33 | the right of the Checkbox. And then
another private property called _isSelected
| | 01:39 | and the data type is Boolean, and we'll
just initialize that to false. And I'm
| | 01:44 | just doing this here just so I know
for sure that it's initialized to false.
| | 01:48 | Boolean properties are actually false
by default anyway, but here I just want
| | 01:53 | to be able to look at my code and see
that I initialize it to false. So it's
| | 01:58 | not 100% necessary to have this. I
just have it as a quick reference for
| | 02:01 | myself. So below this we'll create a
public function called Checkbox, this is
| | 02:07 | our constructor method, make sure to have
a lower case b, curly braces below that.
| | 02:11 | We are going to set a few initial
properties. So the first one is buttonMode.
| | 02:15 | So buttonMode = true. buttonMode is
what shows the hand cursor when you have
| | 02:22 | Clickable elements. So the Checkbox
is going to be Clickable, we are making
| | 02:25 | this whole movie clip Clickable and we
are going to make the hand cursor show
| | 02:29 | when you roll over that.
| | 02:30 | Now by default text fields don't
show the hand cursor even when you set
| | 02:35 | buttonMode to true in their parent
movie clip. That's because text fields show
| | 02:40 | the cursor when you hover over them. To
disable that functionality what you do
| | 02:46 | is you set that text field's
mouseEnabled property to false. So that's
| | 02:50 | label_txt as a reference for a
text field. .mouseEnabled = false.
| | 02:59 | So that way when the whole Checkbox is
Clickable. Then you will see the hand
| | 03:03 | cursor when you roll over the text
field and last we are going to set
| | 03:07 | selected_mc. Remember that's the check
for our Checkbox or the x in this case.
| | 03:12 | .visible = _isSelected. So that _
isSelected is false. So we are hiding that
| | 03:20 | selected movie clip at the beginning,
so the Checkbox will not be selected.
| | 03:24 | Okay, so everything looks good. Let's
save this file, File, Save. Jump over to
| | 03:30 | the FLA and then we'll connect the
Checkbox to our checkbox class, test the
| | 03:35 | movie to make sure we are not getting
any errors. So I'm going to go to the
| | 03:37 | Library. I'm going to Right-Click or
Ctrl-Click Checkbox, go to Properties and
| | 03:44 | then check Export for ActionScript.
Make sure you are in the Advanced mode.
| | 03:49 | Leave the Class at Checkbox. That's
fine. That can actually be pretty much
| | 03:52 | anything you want at this point. So
that's not important at all really, what's
| | 03:57 | important is the Base class. We want
to set the base class to com.lynda.
| | 04:02 | Remember this is the fully qualified class
name which includes the package .ui.Checkbox.
| | 04:09 | Again, the fact that the Class is as
same as the Base class isn't really
| | 04:13 | significant. So you just need to have
the Base class right. So this could be
| | 04:16 | something totally unrelated. I just
happened to have the same name here. So
| | 04:20 | make sure you have the Base class
correct and Click OK. And you should get this
| | 04:24 | warning message, unless you check Don't
Show Again. Basically it says Flash is
| | 04:27 | creating the Checkbox class for you, OK and
that's the Checkbox class, not the Base class.
| | 04:32 | You define the Base class that
absolutely needs to be defined by you when you
| | 04:37 | do this. The regular class does not
have to be defined by you. It can be
| | 04:41 | created by Flash. I just want to test
the movie to make sure I'm not getting
| | 04:44 | any errors and I'm not, it's not really
Clickable yet, but I can hover over the
| | 04:51 | Checkbox and the text and I see that
hand cursor. Nice, so I'll close that
| | 04:56 | window, and now our Checkbox
class is defined and running properly.
| | Collapse this transcript |
| Selecting a checkbox| 00:00 | In this movie, we'll add the
interactivity to select and deselect the Checkbox
| | 00:05 | with and without ActionScript. So the
first thing we'll do is add and event
| | 00:09 | listener to the Checkbox at the
bottom of the constructor method. So
| | 00:12 | addEventListener, and it will be
MouseEvent.CLICK, and we'll run a method
| | 00:19 | called updateSelected.
| | 00:22 | So that's going to be private method.
So private function updateSelected, all
| | 00:28 | one word, capital S, receive an event
with the data type of MouseEvent. No
| | 00:33 | return data, so :void, add some curly
braces and then what we are going to do
| | 00:39 | is set a property that we
haven't defined yet called isSelected.
| | 00:42 | Notice that we defined _isSelected as
a private property. We are going to use
| | 00:46 | public get and set methods for a
property called isSelected. So that's without
| | 00:50 | the underscore, because we wanted to do
certain things when the person from the
| | 00:55 | FLA file selects the Checkbox using
ActionScript. So what we'll do is we'll set
| | 01:01 | isSelected = !isSelected.
| | 01:09 | So remember the exclamation point is
operator that means not, so it's going to
| | 01:14 | be whatever it's not. So basically if
it's selected and I Click on it, it will
| | 01:18 | be deselected and if it's deselected
and I Click on it, it will be selected. So
| | 01:22 | let's define the public get and set
method for isSelected. So public function
| | 01:28 | set isSelected, and then we'll pass
in a property called S that will be
| | 01:37 | Boolean. No return data for set methods.
And then here the first thing we'll do
| | 01:42 | is we'll set _isSelected = s, so it's
whatever is passed in there. Now we'll
| | 01:49 | set selected_mc's visible property
equal to _isSelected. So if it's selected,
| | 01:57 | then we'll see the check or the x in the
box. If it's not selected then we don't.
| | 02:02 | So finally, we'll dispatch a change
event to broadcast so the Checkbox has been
| | 02:08 | updated. So dispatchEvent, some
parenthesis, and in the parenthesis we'll
| | 02:13 | create a new event right there. For
the parenthesis for the event constructor
| | 02:19 | we are going to pass an Event.CHANGE.
| | 02:21 | So we are just broadcasting that the
Checkbox's state changed. So now you see
| | 02:27 | the effectiveness here of using the
public isSelected property versus the
| | 02:32 | private _isSelected property. By using
the public set method here, when we set
| | 02:37 | the value, we are actually taking a
shortcut to writing three lines of code and
| | 02:43 | condensing that down to one line of code.
| | 02:45 | So when we use without the underscore,
we are actually running this set method.
| | 02:50 | So that saves you some code
writing and keeps your code a little more
| | 02:53 | efficient. And below the set method,
let's define the get method. So public
| | 02:57 | function get isSelected and we'll just
return _isSelected. It's going to return
| | 03:03 | a Boolean value and inside of the
method it will just return _isSelected.
| | 03:10 | Looks good, let's save the file and
then test the application. You should be
| | 03:15 | able to Click the Checkbox or the
Checkbox Text to select and deselect the
| | 03:21 | Checkbox. Looking good. All right, the
next thing to do is to see if we can set
| | 03:29 | the Checkbox's state using
ActionScript with our public set method.
| | 03:35 | So let's go to the FLA file, and then
we'll go to the Actions panel and open it
| | 03:41 | up. We'll set box1_mc, again, if you
are not sure of the instance name, just
| | 03:46 | Click that Insert Target Path button
to confirm the instance name, and cancel
| | 03:50 | out. So box1_mc.isSelected = true, so
that should be selected. We are going to
| | 03:59 | test the movie. And sure enough it is. Nice.
| | 04:02 | Finally what we want to do is check
to see if we can listen for that change
| | 04:08 | event. So box1_mc.addEventListener and
it's going to be event.CHANGE and then
| | 04:14 | I'm just going to run a method called
stateChanged. So run a function called
| | 04:19 | stateChanged. So let's define that now.
So function stateChanged and we'll
| | 04:24 | receive an event with a data type of
Event. :void for a no return data. And in
| | 04:31 | here we'll just simply
trace(box1_mc.isSelected).
| | 04:38 | Test the movie. Whenever you Click on
that Checkbox, you will see true when
| | 04:43 | it's selected and false when it's
deselected. Nice, so with that I'm just going
| | 04:49 | to delete the code that we have in
here, and close the Actions panel. Now
| | 04:53 | return to the Timeline and with that we
have a Checkbox that can be controlled,
| | 04:59 | with or without ActionScript.
| | 05:00 | So we can set it by Clicking on it or
we can use ActionScript to set it if we
| | 05:04 | want to. So we now have a
Checkbox that works with mouse Clicks and
| | 05:08 | ActionScript, so you can
set it whichever way you like.
| | Collapse this transcript |
| Setting a label| 00:00 | Now that we set up the
functionality for selecting and deselecting the
| | 00:03 | Checkbox, we are going to look at
controlling the label text for our Checkbox.
| | 00:08 | So the first thing we are going to do
is set the label property which is going
| | 00:12 | to be the public version of that
private property equal to nothing. So right
| | 00:17 | above the addEventListener line of code
in the Constructor method, set label = "".
| | 00:23 | And again we haven't set label
yet. We are going to do that now.
| | 00:26 | So we have our private version, which
is _label, and the public version, which
| | 00:30 | is label with no underscore. So
we'll define that right below the get
| | 00:34 | isSelected public method. So public
function set label, and in the parenthesis
| | 00:43 | we'll receive a value called l, be a String,
void for no return data, and we'll set _label = l.
| | 00:54 | On the next line, we'll take that label
and put it inside of the text field. So
| | 00:58 | label_txt.text = _label. Now we'll
define the get method for the label. So
| | 01:07 | public function get label, no
parameters returns a String and I'll just return
| | 01:15 | _label. That's it. So basically at
the beginning we are running that label
| | 01:22 | method passing in a value of nothing to
initialize the Checkbox to not have any kind of value.
| | 01:29 | So let's just save the file, jump over
to the FLA. Now we see Checkbox Text,
| | 01:35 | which is the default text for the
Checkbox. Test the movie. You should see no
| | 01:38 | text there. What we are going to do is
set these values on the main timeline.
| | 01:42 | So open up the Timeline go to the first
keyframe of the Actions layer, and get
| | 01:47 | the Actions panel up and now we'll
set the labels for the three Checkboxes.
| | 01:52 | Again, if you need help remembering
the instance names, just Click the Insert
| | 01:56 | Target Path button, you could see box1_
mc, box2_mc and box3_mc right there. So
| | 02:02 | box1_mc.label equals, make sure you
use quotes because we are working with a
| | 02:09 | string, Label for box 1, I'm just going to copy
and paste this and change box1, box2 and box3.
| | 02:20 | So Label for box 2 and Label for box 3.
Test the movie and we see the labels
| | 02:28 | and the checkboxes and we can check them.
Let's say you wanted to check when a
| | 02:35 | checkbox is checked or what box it is
or what label it is and what the value
| | 02:40 | is? What you could to is add
event listeners to all the boxes. So
| | 02:45 | box1_mc.addEventListener(event.CHANGE,
stateChanged) and then I'm going to copy
| | 02:55 | and paste this line twice, for box2_mc
and box3_mc, and then we'll define that
| | 03:03 | stateChanged function.
| | 03:04 | So function stateChanged receives an
event with a data type of Event. No return
| | 03:12 | data so :void and what we'll do is
we'll run a simple trace statement. And what
| | 03:18 | I'm going to is above the trace
statement is create box variable and I'll data
| | 03:23 | type it to a Checkbox. Make sure that
the b is lowercase. The uppercase b is
| | 03:28 | used in Flash's ui checkbox. We'll set
that equal to Checkbox, lower case b in
| | 03:34 | parenthesis. Basically we are
type casting here. event.target.
| | 03:38 | So we are just taking that target
whatever box was Clicked. We are telling
| | 03:42 | Flash to treat it as a Checkbox, and
then hold it in that box variable. So
| | 03:47 | we'll trace(box.label +, and then a
colon and some quotes and a space after the
| | 03:55 | colon, after the quote, it's + box.
isSelected). So now we can test the movie
| | 04:02 | and we Click the box and then we'll see
in the Output window, the value of the box.
| | 04:09 | So Label for box 1: true, and so we
can Click the various checkboxes, and see
| | 04:16 | them as they get updated and get all
that information there. So now we can set
| | 04:23 | the text for the checkbox and the
Checkbox is Clickable and we can set values
| | 04:28 | for it. Our checkbox is complete.
| | 04:31 | So just to recap what you learned in
this chapter, we looked at showing and
| | 04:34 | hiding movie clips for the Checkbox. We
set public and private properties using
| | 04:40 | get and set methods and we
successfully created a way to control the text for
| | 04:45 | the Checkbox using ActionScript
as well as User Interactivity.
| | Collapse this transcript |
|
|
5. Creating a Radio ButtonExploring the FLA file| 00:00 | In this chapter, we are going to be
creating Radio Buttons. I'm going to start
| | 00:04 | by showing you how I set up my FLA file.
If you don't have access to this FLA
| | 00:09 | file, this is especially important for
you, so that you can know how to setup
| | 00:12 | your files to follow along. So on this
stage here I have two layers, actions
| | 00:17 | and radio. The actions layer has nothing in it,
not on the timeline, not in the Actions panel.
| | 00:22 | The radio layer has one movie clip on
the stage. It's called rg_mc and it's an
| | 00:29 | instance of the movie clip called
Group with the capital G. If I Double-Click
| | 00:32 | that movie clip, I can enter its
timeline. Inside of the Group movie clip,
| | 00:36 | there is a text field called title_txt.
Note that it's a Dynamic Text field
| | 00:41 | with the following settings,
Myriad Pro, Regular, 16 point, etcetera.
| | 00:47 | Again, whenever I use a Dynamic Text
field, I always embed the font, so might
| | 00:50 | want to do that as well. I just find
that embedded fonts give a lot more
| | 00:55 | control over anti-aliasing. So then I
have three Radio Button movie clips. So
| | 01:02 | we have r1_mc, r2_mc and of course, r3_mc.
| | 01:10 | Now before we go inside of the radio
movie clip's timeline, I want to point out
| | 01:15 | that there is also an actions layer
inside of this movie clip and that has no
| | 01:18 | code in it as well. So these are all
instances of a movie clip called Radio and
| | 01:24 | if you look in the Library, you will
see that the Radio movie clip is Exported
| | 01:29 | for ActionScript. So open up its
Properties, and you could see its base class
| | 01:33 | is com.lynda.ui.RadioButton. So the
class is actually already defined.
| | 01:39 | For those of you who don't have the
Exercise Files, I'll show you how the class
| | 01:43 | is setup, so you could set up yours in
the same way. Note that it needs to be
| | 01:47 | in this package and folder structure
com. Inside of the com folder should be
| | 01:51 | the lynda folder. Inside of that folder
should be the ui folder. Inside of that
| | 01:55 | folder, should be the RadioButton class.
| | 01:58 | If don't have the access to the
Exercise Files, I would do this after defining
| | 02:02 | the RadioButton class which we'll look
at in another movie. Just don't forget
| | 02:05 | to do this. So with that I'll just
Click OK and Double-Click Radio to enter its
| | 02:10 | timeline. So there is a text field
that says Radio Button Label. That's a
| | 02:15 | Dynamic text field that's called label_txt.
You can copy my settings if you
| | 02:19 | would like. It's not necessary. Again
I embedded the font, just a matter of
| | 02:23 | personal preference, and then the top
movie clip is called selected_mc. If you
| | 02:28 | watched the movies about creating a
Checkbox, then this is very familiar
| | 02:31 | because we did the exact same thing.
| | 02:33 | So if I hide that selected movie clip,
then you will see the unselected movie
| | 02:38 | clip which has no instance name. All
right that's how our FLA file is setup. So
| | 02:44 | once you have this setup in the same
way you are ready to start writing the
| | 02:47 | code for your Radio Buttons.
| | Collapse this transcript |
| Viewing the RadioButton class| 00:00 | Now we'll take a look at the
RadioButton class. Remember that if you don't have
| | 00:04 | exercise files, this class will need to
be saved in the ui folder. So inside of
| | 00:10 | the same folder as your fla, you
should have a folder called com, in there a
| | 00:13 | folder called lynda, in there a
folder called ui and in there a file called
| | 00:17 | RadioButton.as. Don't worry about RadioGroup.as
right now. That's just a blank text file.
| | 00:24 | To make sure that these are all lower
case and they are spelled just like mine
| | 00:27 | are here. So back to Flash and now you
might be wondering why on earth I'm not
| | 00:32 | showing you how to write all the
code for this. It's actually because the
| | 00:37 | RadioButton class is pretty much the
exact same thing as the CheckBox class
| | 00:41 | which we did in another chapter.
| | 00:43 | So if you have any questions about
this file, I'll recommend watching the
| | 00:48 | chapter on creating the check box,
because a radio button is basically a check
| | 00:52 | box, except for a radio button is part
of a group and only one can be selected
| | 00:57 | at a time. So that's
really the only difference here.
| | 01:00 | So I'm going to scroll down here down
here and you can copy down the code or if
| | 01:04 | you don't have the exercise files,
I'll recommend copying the check box code
| | 01:07 | and just modifying it slightly for
this. So here we have our package
| | 01:11 | declaration, import statements.
RadioButton class extends the Sprite class
| | 01:16 | because we are using a one-frame movie clip.
Two private properties, _label and _ isSelected.
| | 01:23 | And then in the constructor we are
setting that mouseEnabled property of the
| | 01:26 | text field equal to false, and that
will make it so you will see the hand
| | 01:30 | cursor when you roll over it, setting
the selected movie clip to hide or to
| | 01:36 | have it's visible properties set to
false, setting buttonMode to true, label= "",
| | 01:40 | so basically setting label to nothing,
and adding the event listener to the
| | 01:44 | RadioButton that listened for a
Mouse Click to run updateSelected.
| | 01:46 | Now here is the difference between
this class and the check box class. In the
| | 01:51 | check box class whenever you Clicked
on the check box, if it was selected, it
| | 01:54 | will be deselected, and vise versa.
In other words if it was deselected you
| | 01:57 | Click it, it will be selected. Here
we're only setting isSelected = true, if
| | 02:03 | the RadioButton is not selected.
| | 02:05 | So you don't toggle a radio button, you
just select it when it's deselected. So
| | 02:09 | if it is selected, we are not doing
anything. So that's the main difference
| | 02:13 | here. So if you look at the set
isSelected method, you will see the same thing.
| | 02:17 | Whenever we run isSelected, we check to
see if isSelected is true. If it's true
| | 02:23 | then we'll dispatch that change event;
if not then there is no need to do it.
| | 02:28 | So we only want to announce when this
RadioButton has been selected and not
| | 02:32 | when it's been deselected. So we have
the get isSelected method that returns
| | 02:38 | _isSelected. That's the private
version of the public property isSelected and
| | 02:42 | we have the set and get
label and that's pretty much it.
| | 02:46 | So once you have your radio button set
up, test the movie and you should see no
| | 02:51 | text for the ration buttons, since we
set the label property = "" inside of the
| | 02:57 | RadioButton class, and you should be
able to Click on the radio buttons and
| | 03:01 | have them select. They shouldn't do
anything when you Click them the second
| | 03:03 | time and so each one
should select but not deselect.
| | 03:07 | All right, so that's working properly.
So that's a look at the RadioButton
| | 03:10 | class. Once yours is set up properly, you
are ready to start defining the Radio Group.
| | Collapse this transcript |
| Defining the RadioGroup class| 00:00 | Now we'll create the RadioGroup
class that will manage a set of radio
| | 00:04 | buttons. If you don't have the
exercise files, make sure to create this class
| | 00:09 | file in the same directory as your
RadioButton class, so that it can be in the
| | 00:13 | com.lynda.ui package. So let's declare
that package now. It's package com.lynda.ui.
| | 00:22 | Just to import the movie clip class,
so import.flash.display.MovieClip and on
| | 00:29 | the next line we are going
to import the event class. So
| | 00:32 | import.flash.events.Event. Now we'll
define our RadioGroup class, so public
| | 00:40 | class RadioGroup, make sure that's the
same name as your files, same casing and
| | 00:46 | everything, extends MovieClip. Some
curly braces below that and then we are
| | 00:53 | going to create the constructor
method, so public function RadioGroup().
| | 00:59 | Again, same spelling, casing as your
class and as your file name and above the
| | 01:06 | constructor method, we are going to
create some properties. So first we'll do
| | 01:11 | the private property, so private var
allButtons. This is going to represent all
| | 01:16 | of the radio buttons. That's going to
be an array, and I'll just initialize it
| | 01:20 | right here to an empty array. That's
short hand notation open square bracket
| | 01:24 | and closed square bracket.
| | 01:25 | So we can go private property, called
_titles, it's going to represent the
| | 01:30 | title of the radio button group that
will display in the title text field above
| | 01:35 | all of the radio buttons. A few lines
down and now we'll create some public
| | 01:39 | property. So public var label:String.
This will represent the label of the
| | 01:45 | radio button that is currently selected.
| | 01:47 | So on the next line, public var
selectedIndex:uint or a positive integer.
| | 01:55 | That's going to represent the current
index of allButtons that is selected.
| | 01:58 | Basically this will allow us to access
all the radio buttons directly through
| | 02:02 | this RadioGroup. So if we want to
access them from the main timeline for some
| | 02:06 | reason, we can do that.
| | 02:07 | All right, that's it for initializing
this class. So let's save the file and
| | 02:12 | before testing the movie jump over to
the FLA file, connect the Group Movie
| | 02:17 | Clip to the RadioGroup. So you go to
the Library, right Click that Group Movie
| | 02:21 | Clip or Ctrl-Click. Choose Properties.
Make sure you are in Advanced mode.
| | 02:26 | Check Export for ActionScript, you will
see that Class name is Group just like
| | 02:30 | the name of your symbol. Just leave
it like that and we are just going to
| | 02:33 | modify the Base class here. So we are
going to set it to our RadioGroup class.
| | 02:37 | Again, you need to make sure that you
are referencing the fully qualified class
| | 02:41 | name, which includes the package name.
So com.lynda.ui.RadioGroup, so Click OK.
| | 02:49 | Flash should tell you that it's
creating in class. That's good. Click OK.
| | 02:55 | If you don't get any problems then it
means that class is connected to your
| | 02:58 | movie clip successfully.
| | 03:00 | So test the movie and if you don't get
any errors, then everything is working
| | 03:04 | properly. Nice, so now we have
successfully defined the RadioGroup class and
| | 03:11 | we are ready to start
adding some functionality to it.
| | Collapse this transcript |
| Initializing the RadioGroup class| 00:00 | In this movie, we are going to look at
initializing our RadioGroup class and
| | 00:04 | basically making it work with all of
the radio buttons together. So inside of
| | 00:09 | our constructor method, let's add an
event listener and what we want to do is
| | 00:15 | listen for the event.activate event.
And what that is it's going to trigger
| | 00:20 | once all of the RadioGroup's child elements
are ready to manipulate using ActionScript.
| | 00:26 | So we want to make sure that we can
work with them and they are ready to
| | 00:30 | perform tasks and everything before we
do anything with the RadioGroup class.
| | 00:35 | So if the event is going to be Event.
ACTIVATE, we'll run a method called init.
| | 00:41 | We will define init as a public
function init, receives an event with a data
| | 00:47 | type of Event, void for no return data.
| | 00:52 | Inside of the init method, we are
going to loop to all the children inside of
| | 00:56 | RadioGroup. So create a for loop and
inside of the for loop type (var i:uint =
| | 01:01 | 0; i < numChildren; i++) so this is
going to run for all the children that are
| | 01:09 | inside of the RadioGroup.
| | 01:10 | So the first thing that we are going
to do is create a conditional statement
| | 01:17 | here. So write an if statement, and
inside of the parenthesis of the if
| | 01:21 | statement check to see if (getChildAt(i)
is RadioButton), we are going to see
| | 01:31 | if this child is a radio button.
| | 01:38 | Here I use the same RadioButton class
name as the class name in Flash and Flash
| | 01:44 | knows the difference because I'm
talking about RadioButton inside of the
| | 01:47 | com.lynda.ui package. So by putting it
under different package, I'm allowed to
| | 01:51 | use the same class, same and that's okay.
| | 01:52 | Then what we are going to do is create
a variable to hold it. So var, I'm just
| | 01:56 | going to call this radio, data type it
to RadioButton and I'll set it equal to
| | 02:03 | RadioButton. So basically we
are type casting and we are saying
| | 02:09 | (getChildAt(i)), which returns the
display object, telling Flash treat it as a
| | 02:13 | radio button and holding
it in that radio variable.
| | 02:16 | So go to the next line and we'll put
that RadioButton inside of the allButtons
| | 02:25 | array. So allButtons.push
(radio) and then right below that,
| | 02:34 | radio.addEventListener
(Event.CHANGE, handleAllClicks).
| | 02:40 | We will define that method in just a
moment. Right below the for loop, I'm
| | 02:49 | going to set the first radio button to be selected.
So allButtons, index 0, .isSelected = true.
| | 02:59 | So that first radio button will
then be selected. Now we'll define the
| | 03:03 | handleAllClicks method that will
handle all of the changes for the radio
| | 03:08 | buttons. So whenever you Click on a
radio button and change the current
| | 03:12 | selected radio button this
handleAllClicks method is going to run.
| | 03:16 | So we'll create a private function
handleAllClicks(event:Event):void and in
| | 03:30 | here we are going to loop through the
allButtons array. So create a for (var i:
| | 03:37 | uint = 0; I < allButtons.length; i++)
and inside of the loop we are going to
| | 03:48 | check to see if the
(event.target) is allButtons index i.
| | 03:52 | So if(event.target), see if event.target,
which refers to whatever radio button
| | 04:00 | fires that CHANGE event,
is equal to allButtons index i.
| | 04:07 | Notice we are not using the word is
here, just like we did earlier. Is if you
| | 04:12 | want to check something is class. So
if getChildAt(i) is an instance of or is
| | 04:18 | RadioButton. Two equal signs is
saying is equal to. So is only for classes.
| | 04:25 | So if event.target == allButtons, index i,
then we'll set selectedIndex = i and then
| | 04:35 | we'll set label = allButtons, index i, .label.
| | 04:41 | Then what we'll do is have an else
statement right below the if statement. So
| | 04:45 | if event.target == allButtons index i,
when that's the selectedIndex, right,
| | 04:50 | because that means if I Clicked on that
one last and it's newly selected and if
| | 04:55 | not we don't want that one to selected.
So we'll deselect that radio button.
| | 04:59 | So in the else statement allButtons index i
.isSelected = false. So we make sure that
| | 05:08 | they are all deselected. Finally, we
are going to dispatch the change event. So
| | 05:14 | right below this for loop, type
dispatchEvent(new Event(Event.CHANGE)). So when
| | 05:29 | the RadioGroup changes that means a new
radio button is selected. So we should
| | 05:34 | then be able to access this
selectedIndex and the label of the button.
| | 05:39 | So let's save the file, File, Save and
jump over to the FLA file. So in our fla
| | 05:46 | file, we want to go inside of that
RadioGroup movie clip, go to the first
| | 05:52 | keyframe of the Actions layer, open up
the Actions panel. Go in to Click the
| | 05:56 | Insert Target Path button so I can get
the instance names of my radio buttons.
| | 06:00 | So if I expand rg_mc,
I'll see r1_mc, r2_mc, r3_mc.
| | 06:04 | We are going to set the labels for
these movie clips. So I'll cancel out of
| | 06:09 | that. So we have got r1_mc.label =
"Radio label 1". I'll just copy and paste
| | 06:18 | this twice more and then change the 1
to 2 and then to 3 on the third line and
| | 06:27 | on the main timeline I'm going to
listen for that CHANGE event. I'm going to
| | 06:31 | check to see what the label of the
RadioGroup is and it should be the appropriate label.
| | 06:36 | So go to main timeline, first
keyframe of the Actions layer. We go to that
| | 06:42 | RadioGroup. If you check
Insert Target Path, it's rg_mc. So
| | 06:45 | rg_mc.addEventListener(event.CHANGE,
radioChanged). To find that function now,
| | 06:59 | radioChange(event:Event):void and
here we'll just trace (rg_mc.label).
| | 07:11 | That should display the label of the
currently selected radio button. So we'll
| | 07:16 | test the movie. So right now we get the
first thing as Radio label 1, so we get
| | 07:20 | that and Click Radio label 2 and
it displays that, Radio label 3.
| | 07:23 | So now it's firing off that event
and I can react whenever the button is
| | 07:28 | selected. So the basic functionality
of our radio button is complete. We can
| | 07:34 | select one at a time and we have an
event that handles when the radio changes.
| | 07:39 | Now whenever the current selected radio
button changes, we just respond to that
| | 07:43 | CHANGE event and we can get the current label or
the current selectedIndex in that radio button group.
| | Collapse this transcript |
| Adding a title| 00:00 | To finish off our Radio Buttons, we'll
create a way to quickly and easily set a
| | 00:05 | title for the RadioGroup using
ActionScript or the main Timeline.
| | 00:10 | The first thing we'll do is go inside
of the constructor method and right above
| | 00:15 | the addEventListener line of code,
we're going to check the titles text values.
| | 00:19 | So we are going to create an if
statement and in there, we are going to check
| | 00:23 | to see if title_txt.text-- remember
that's the title of the RadioButton Groups.
| | 00:28 | If you go to the FLA file, that's
this text right here, Radio Group Title.
| | 00:33 | So if it's defined, or in other
words if it's not empty, then title =
| | 00:40 | title_txt.text. Now, we have defined
the private property title but we haven't
| | 00:45 | defined the public version of that
private property, the one without the
| | 00:49 | underscore. So let's define it now.
| | 00:50 | Scroll down to the bottom of your
code and right below the handleAllClicks
| | 00:55 | method, define public function set title.
It will receive one parameter called
| | 01:03 | t that's a String, no return data, so :
void and in the set title method, we'll
| | 01:10 | set _title = t, so whatever is passed
into this method, and then we'll set the
| | 01:16 | text field. So title_txt.text = _title.
| | 01:22 | Now, the convenience of this is that
we don't have to go through title_txt
| | 01:26 | outside of the Radio Group. We just
type RadioGroup.title = whatever title and
| | 01:33 | all the rest of the magic happens inside
of this class. So it saves you some time.
| | 01:37 | So another public method, this is
going to be the get method for title. So
| | 01:41 | public function get title, no
parameters, turns a string, and in the curly
| | 01:48 | braces, just return_title. That's it.
Save the file and if you go to the main
| | 01:58 | Timeline in your FLA file, open up the
Actions panel, delete the code that's
| | 02:04 | there and we'll just trace rg_mc. Remember
that's the RadioGroup on the stage.title.
| | 02:12 | Test the movie, and it says Radio Group
Title, just like it's reflected on the
| | 02:17 | stage. So if you wanted to update
that on the Timeline, you can just
| | 02:20 | Double-Click the Radio Group, select
the Text Field, I'll just type New Radio
| | 02:26 | Title right in there. So test the
movie. Now, it says New Radio Title.
| | 02:32 | So if I wanted to override that by
setting it with ActionScript, I can just go
| | 02:36 | to the main Timeline, open up the
Actions panel and right above where we set
| | 02:41 | the title, type rg_mc.title = "Title
set using ActionScript" and there it is.
| | 02:56 | So now that we can control the title of the
RadioGroup, a RadioButton group is complete, ready to go.
| | Collapse this transcript |
|
|
6. Creating a ButtonExploring the FLA file| 00:00 | In this chapter, we are going to build
a simple button. We'll start by looking
| | 00:04 | at how this FLA file is set up. This is
particularly for those of you who don't
| | 00:09 | have the Exercise Files.
| | 00:11 | So on the Stage here, I have two layers:
Actions, which neither has code nor
| | 00:16 | art, and the Art layer that just has a
button. The button's instance name is
| | 00:20 | btn and the symbol name is Button.
| | 00:24 | If I Double-Click that Button symbol
in the Library, you can see that it has
| | 00:29 | four layers. So there is Label layer,
which is a text field, and if you Click
| | 00:32 | on the text field, you can see that its
instance name is label_text and it's a
| | 00:37 | Dynamic text field.
| | 00:38 | You can set your Font settings like
mine if you'd like. Just make sure to
| | 00:42 | Format your Paragraph alignment to the
center. So you're always going to have
| | 00:45 | the text aligned in the center of the button.
| | 00:48 | So then, we have the Normal layer,
which contains the up state of the button.
| | 00:53 | That's a movie clip called Normal and
the instance name is up_mc. Below that,
| | 00:59 | we have the Over layer, with an instance name
over_mc. It's an instance of the Over symbol.
| | 01:06 | Finally, we have the Down layer. down_mc
for the instance name and the symbol
| | 01:12 | name is Down. I'll show all these layers.
I'm going to Double-Click the Normal
| | 01:17 | layer to enter its Timeline.
| | 01:19 | I want to show you how this symbol is
set up. Notice inside of here I have a
| | 01:24 | layer folder with three layers. Now,
inside of the layers, if I zoom in a
| | 01:29 | little bit, you can see it's a
bitmap graphic because it certainly gets a
| | 01:34 | little bit pixilated if I zoom in, and
if I hide the top one, you will see that
| | 01:39 | left portion of the button disappears.
If I hide the second layer, you will see
| | 01:45 | that the right portion of the button
disappears. So we have Normal Left, Normal
| | 01:50 | Right, and then the Button layer.
| | 01:52 | So these layers contain the sides of the
button. Now, what we are going to do is
| | 01:57 | make this button so you can scale it
horizontally as big as you want and that
| | 02:01 | center portion is going to scale while
the end caps do not scale. That's why I
| | 02:07 | set it up like this.
| | 02:09 | So if you don't have the Exercise Files,
just make sure to set up your files in
| | 02:13 | same way. You don't necessarily have to
use a bitmap graphic. You can even just
| | 02:16 | use a rounded rectangle and just cut
it up so that you have three different
| | 02:20 | layers, and convert one of those into
a movie clip. So we have left_mc here,
| | 02:25 | main_mc, and then right_mc.
| | 02:28 | So you just need to do that for each of
the states of the button. So each of the
| | 02:34 | three button states, Normal, Over, and
Down, have those three instances inside
| | 02:39 | of them. That's pretty much it for the
FLA file. So once you have everything
| | 02:44 | set up, you are ready to start
writing the code for a button.
| | Collapse this transcript |
| Creating the BasicButton class| 00:00 | In this movie, we're going to create
the class file for our button. When you're
| | 00:04 | creating this class file, make sure
that you have the com folder in same
| | 00:09 | directory as your FLA file. And in
that com folder you have a folder called
| | 00:12 | lynda and then ui and then the
BasicButton.as file in there.
| | 00:18 | In BasicButton.as, we'll start by
declaring the package. So it's of course
| | 00:22 | com.lynda.ui. Inside of there,
we'll declare the class. So public class
| | 00:33 | BasicButton extends, and we're going
to extend the Sprite class. That's just
| | 00:39 | because we have a one frame movie
clip, so we're going to optimize the
| | 00:42 | application by using Sprite as opposed
to MovieClip. Remember that a MovieClip
| | 00:47 | takes a little bit more memory than a Sprite,
so always use the Sprite whenever you can.
| | 00:51 | Let's import some classes, so import
flash.display.* and then we'll import
| | 00:59 | flash.events.*, and finally we'll
import flash.text.*. Inside of the class,
| | 01:10 | we'll declare the constructor method.
So public function BasicButton, and some
| | 01:18 | Curly Braces. Right above the
constructor decoration, we'll declare some
| | 01:22 | private properties. So private var _
label, this will represent the label of the
| | 01:27 | button. It's going to be a String.
Another private property, so private var
| | 01:32 | allButtons. This is going to be an
array of all of the buttons. So we have
| | 01:39 | _label that's a String and
allButtons that is an array.
| | 01:42 | Now let's add some values inside of
the BasicButton constructor method. So
| | 01:47 | first thing we'll do is set buttonMode
to true. Remember, this is going to show
| | 01:51 | the hand cursor when we add an event
listener to the button. There we're going
| | 01:56 | to disable mouse
interactivity for the label text field, so
| | 01:59 | label_txt.mouseEnabled = false.
| | 02:04 | If you don't do this, then you won't
see the hand cursor when you roll over the
| | 02:08 | text field. You don't want that
because it looks kind of weird, it's awkward
| | 02:12 | for a user to see the hand cursor
for a second and for the hand cursor to
| | 02:16 | disappear when they roll over the
text on the button. So always do this,
| | 02:19 | whenever you want to make a
text roll over, show a hand cursor.
| | 02:23 | Let's save this file and then jump
over to the FLA and connect our Button
| | 02:27 | symbol to this class and test the
movie to make sure it's working properly.
| | 02:32 | Open up the Library, right-Click or
Ctrl-Click the Button symbol, choose
| | 02:36 | Properties, check Export for
ActionScript, and again you'll need to be in
| | 02:40 | Advanced mode to see this.
| | 02:42 | For the base class, we'll set that to
our fully qualified class name, which is
| | 02:46 | com.lynda.ui.BasicButton, Click OK.
You should get one warning message that
| | 02:55 | says the class could not be found.
That's correct. Everything is running okay
| | 03:00 | so far. Let's test the movie, and no
errors. Also, you see that hand cursor
| | 03:06 | when you roll over the button. Nice!
| | 03:09 | So we've successfully created our
BasicButton class and it is now connected to
| | 03:14 | our Button symbol.
| | Collapse this transcript |
| Defining button states| 00:00 | Now look at displaying the various
button states like UP, OVER and DOWN, based
| | 00:05 | on user interactivity. So we'll start
by adding some event listeners in the
| | 00:10 | constructor method. So right below label
_txt.mouseEnabled = false, let's add an
| | 00:15 | event listener. Let's pour in a note.
This is going to the whole button and not
| | 00:19 | to the individual states of the button.
That way every mouse Click, MOUSE_OVER,
| | 00:24 | MOUSE_DOWN, gets captured.
| | 00:26 | So addEventListener and in the
parenthesis we'll pass in MouseEvent.MOUSE_UP,
| | 00:36 | and run a method called handleMouse,
we'll define that method in just a minute.
| | 00:41 | What we're going to do is just copy
and paste this a three more times. We'll
| | 00:47 | change the event each time, so we have
MOUSE_UP and then we want to change _UP
| | 00:52 | to _DOWN. It should still be blue and
then we want ROLL_OVER and then ROLL_OUT.
| | 01:04 | All right, now let's define the
handleMouse method. We'll define that right
| | 01:10 | below the constructor, private
function handleMouse, receive an event with a
| | 01:17 | datatype of MouseEvent, :void for no
return data. In the Curly Braces, we're
| | 01:23 | going to use a Switch Case statement
instead of an If Else statement to handle
| | 01:28 | what event happened.
| | 01:29 | Remember the Switch Case statements
are better when you have one data source,
| | 01:35 | in this case the event type, and you
want to do a different thing based on that
| | 01:40 | one data value. So let's use a Switch
Case statement. So type the word switch,
| | 01:46 | some parenthesis and some curly braces.
In the parenthesis we're going to put
| | 01:50 | the value that we're checking, which is
event.type. So this is either going to
| | 01:53 | be MouseEvent.MOUSE_UP,
MouseEvent.MOUSE_DOWN, etc.
| | 01:57 | So in there, we're going to use Case
statements to check to see the value. So
| | 02:03 | case MouseEvent.ROLL_OVER, do that one
first, and a colon. Now in the next line
| | 02:12 | we'll define what happens when we roll
over the button. Now what we're going to
| | 02:18 | is actually run a method called hideAllExcept. Now
we haven't defined this yet, but we'll in just a minute.
| | 02:25 | In the parenthesis we're going to pass
in over_mc. We're basically going to do
| | 02:32 | this for each button. So on the next
line, type break;. So that just means to
| | 02:40 | stop processing the Switch Case
statement, once this Case has been met.
| | 02:45 | So let's copy those three lines we
just wrote and then paste them and change
| | 02:50 | the event. So ROLL_OUT for the
next one and we'll change over_mc and
| | 02:56 | hideAllExcept to up_mc. That's the UP
state for the button. Go down below the
| | 03:05 | break statement, paste the code again,
change the event type to MOUSE_DOWN,
| | 03:10 | hideAllExcept(down_mc), and we'll
paste one last time. Change the event to
| | 03:19 | MOUSE_UP. Make sure to
capitalize the event name. We'll have
| | 03:23 | hideAllExcept(over_mc).
| | 03:28 | So when you roll over, we'll show over_
mc. When you roll out, we'll show up_mc.
| | 03:34 | When you put your mouse down, we'll
show down_mc, and when you put your mouse
| | 03:39 | up and are still over the button,
we'll show over_mc. Now we'll define the
| | 03:44 | method that controls the
visibility in just a minute.
| | 03:47 | The last thing we need to do in the
Switch Case statement is to find what
| | 03:50 | happens as a default. So type default.
This is basically if none of these cases
| | 03:56 | are true if it's some other event,
which it won't be, but we just put this as a
| | 04:00 | matter of best practice. So default :.
In the next line type break;. So we're
| | 04:05 | not going to put anything there
and that's it for that method.
| | 04:08 | Now we'll define the hideAllExcept
method. So we'll do that right below the
| | 04:12 | handleMouse method, private function
hideAllExcept. In the parenthesis we'll
| | 04:21 | receive one parameter called except.
That's going to be a MovieClip, :void, no
| | 04:27 | return data here, and in the curly braces,
we're just going to loop through all of the buttons.
| | 04:34 | Now in order to loop through all the
buttons, we're going to need to put all of
| | 04:36 | the buttons in an Array. So I'm going
to do that right above where we add the
| | 04:41 | event listeners in the constructor
method. So I'll type allButtons =, and then
| | 04:47 | some Square Brackets. In the square
brackets, we'll pass in all of the buttons.
| | 04:52 | So we have up_mc, down_mc and finally over_mc.
| | 04:59 | All right, let's scroll down to
hideAllExcept and we'll loop through all the
| | 05:03 | buttons. So for, some parenthesis and
some curly braces, standard loop, loop
| | 05:08 | into the Array, var i:uint = 0 for i <
allButtons.length, i++. Inside of
| | 05:18 | the loop, we'll set allButtons, index i,
.alpha, based on a shorthand conditional step.
| | 05:30 | So some parenthesis to write the
condition, we're going to check to see if
| | 05:33 | allButtons index i is equal to except.
If so, so question mark and we'll set the
| | 05:40 | alpha to 1. If not, so :, alpha will be 0.
| | 05:45 | The last thing that we're going to do
is scroll up to the top of the code and
| | 05:52 | right below we set the
allButtons Array, we'll hide everything except
| | 05:58 | up_mc. So we'll have that be the
initial state of the button that shows.
| | 06:03 | Save the file, test the movie,
test the button, and there we go.
| | 06:09 | So now we've successfully set up the difference
states of the button using mouse interactivity.
| | Collapse this transcript |
| Setting a label for the button| 00:00 | In this movie, we're going to look at
setting a label for the button. So scroll
| | 00:04 | down to the bottom of your code in your
BasicButton file and then we'll go down
| | 00:09 | a few lines and create some public Set
and Get methods to access that private
| | 00:14 | label property as a public property.
| | 00:17 | So public function set label will receive one parameter called l. That will be
| | 00:22 | a String, :void for no return data.
Inside of our set method, all we are going
| | 00:30 | to do is set the value of _label = l, and
then label_txt.text = _label, and that's it.
| | 00:41 | Then right below this, we'll create
the Get method. So public function get
| | 00:45 | label. It's not going to receive any
parameters. It's going to return a String.
| | 00:50 | All we'll do in here is
just return _label. That's it.
| | 00:54 | So we'll save this file and then jump
over to the FLA to see what we have. So
| | 01:00 | go to the FLA, open up the Timeline.
Go to the first keyframe in the actions
| | 01:05 | layer and open up the Actions panel.
In there you can check the Insert Target
| | 01:09 | Path button to confirm the instance name of
the button. So mine is btn. Cancel out of there.
| | 01:13 | So we'll type btn.label = "Button",
make sure to put the String value in
| | 01:22 | quotes, and then test the movie.
And there is our label on the button.
| | 01:27 | So now we have successfully created a
way to easily and quickly set a label for
| | 01:35 | our button, using ActionScript.
| | Collapse this transcript |
| Controlling the button's scale| 00:00 | Up to this point our button is
basically the same as a button symbol that you
| | 00:05 | can just create in Flash. What we're
going to do now is add a special unique
| | 00:09 | feature to control the scaling of the button.
| | 00:12 | So now let's say I use the Free
Transform tool and select the button and scale
| | 00:18 | it out to, say, maybe this big. Now
when I test the movie, it has a pretty
| | 00:23 | awkward scale. So what we're going to
do is make the button that wide when you
| | 00:29 | scale it this big, but not scale the
button. So in other words, keep the size
| | 00:34 | of the button preserved by only
scaling the middle of the button.
| | 00:38 | So let's jump over to our ActionScript
file. I'll minimize the Timeline to get
| | 00:43 | some more room and right above the
addEventListener lines of code in the
| | 00:47 | constructor method, go in to run a method
called draw, which we'll define in a moment.
| | 00:52 | So in the draw method, I'll pass in
width and height. Now the draw method is
| | 00:57 | something that's built into Flash
components and it's used to re-render
| | 01:03 | components based on scaling.
| | 01:05 | So I'm using the same name as a built-in
method here for my own custom method,
| | 01:10 | because it's intuitive for me to do
that. If you want to use a different name
| | 01:13 | here, you can feel free to do that.
But since I'm doing this exact same thing
| | 01:18 | that the built-in method does for
components, I think, it's appropriate to use
| | 01:22 | the same name here.
| | 01:24 | So right below the constructor method,
just declare a public method called
| | 01:29 | draw. So public function draw, receive
two parameters, both numbers, we'll call
| | 01:35 | them w and h. No return data so :void.
The first thing we'll do is set scaleX
| | 01:43 | and scaleY to 1. We'll do that on one
line just like this, ScaleX = ScaleY = 1.
| | 01:51 | So we reset any scaling. But we still
have the scaling values preserved in
| | 01:58 | those w and h parameters.
| | 02:00 | Now we'll loop through all of the
buttons, in a Buttons array and scale them.
| | 02:05 | So for, and some parenthesis and some
curly braces, so basic for loop, looping
| | 02:11 | through the allButtons array for our i:
uint = 0; i < allButtons.length; i++.
| | 02:22 | First thing we'll do is create a
variable to hold the button. So var btn,
| | 02:27 | datatype it to a MovieClip. We'll set
it equal to allButtons index i. So remember,
| | 02:34 | allButtons has all of those movie
clips inside of it. So we have that btn
| | 02:39 | variable, so you can easily access it.
| | 02:43 | In here, we're going to set the width
of the middle of each button. Remember,
| | 02:48 | the buttons are broken up in the left
and the right and the middle. So the left
| | 02:53 | side of the buttons are the left
corners, the right side has the right corner
| | 02:57 | and the middle is the scalable
portion of the button. So that's the portion
| | 03:00 | that we want to scale. The amount that
we want to scale it is we want it to be
| | 03:04 | as wide as the value
passed into the draw method.
| | 03:07 | So the width of the middle part of the
button should be w minus the size of the
| | 03:14 | left and right caps. So, let's write
that formula here. So, it's btn.main_mc.
| | 03:22 | Remember that's the middle movie clip
inside of each button, .width = w, so
| | 03:26 | we're going to start there and we're
going to subtract the end cap width.
| | 03:34 | So, what we're going to do is just take
btn.right_mc.width and multiply that by
| | 03:41 | 2, since the left and the right end
caps are of the same size. So that gives us
| | 03:46 | the right scaling for the middle part
of the button. And now let's just control
| | 03:51 | the placement for the other parts of the button.
| | 03:53 | So btn.main_mc.x = btn.left_mc,
that's the left cap of the button, .x +
| | 04:05 | btn.left_mc.width. So this will align
the left edge of the main_mc movie clip
| | 04:17 | with the right edge of the left movie
clip. So basically, you'll have the left
| | 04:23 | cap on the left and then immediately
after that on the right is the main_mc
| | 04:29 | movie clip or the middle of the button.
| | 04:31 | Finally, we'll place the right end
cap of the button. So btn.right_mc.x =
| | 04:35 | btn.main_mc.x + btn.main_mc.width. So
we're aligning the left edge of right_mc
| | 04:52 | with the right edge of that main_mc or
that middle part of the button. So we're
| | 04:59 | doing this for each button state. That's
why we have in the for loop, and that's it.
| | 05:04 | So save the file, and at this point you
should be able to just test the movie.
| | 05:10 | To do that, we'll go back to FLA, look
at the scaling of the button here, so we
| | 05:14 | want to have the same width but we don't want
to have that awkward scaling that we have now.
| | 05:18 | So test the movie, and there we have it.
Nice! So the button is just as wide as
| | 05:23 | we want it to be and it scales
properly. So only the middle of the button
| | 05:27 | scales and the end caps stay the
same size as they are originally.
| | Collapse this transcript |
| Auto-sizing the button's label| 00:00 | Now we'll finish our button user
interface element by controlling the size of
| | 00:06 | the text field based on the amount of
text inside of it. The first thing we'll
| | 00:11 | do is go down to the very bottom and
find set label method. At the bottom of
| | 00:16 | the set label method run the draw
method, width and height. So whenever we
| | 00:20 | change the label, then we're going to run
that draw method again and re-render the button.
| | 00:28 | The reason why we're doing that is
because we're going to set the text field to
| | 00:32 | autoSize. So it will grow as it
receives more text. We'll set it to autoSize in
| | 00:38 | the constructor method. So find the
constructor and right below where we set
| | 00:41 | mouseEnabled = false, go to the
next line and type label_txt.autoSize =
| | 00:47 | TextFieldAutoSize.CENTER.
| | 01:00 | So this will grow from the center as
it receives more text. Now you could
| | 01:05 | anchor it to the left to the right by
changing the TextFieldAutoSize, if you
| | 01:09 | want to. So for now we'll leave
that TextFieldAutoSize.CENTER.
| | 01:13 | Now we'll adjust the draw method. So
scroll down to the draw method, and then
| | 01:17 | right below our variable inside of the
loop, so right below that btn variable,
| | 01:23 | create an If statement. What we're
going to do is check the size of the label.
| | 01:29 | So if label is auto-sized to where it
would be bigger than the width of the
| | 01:33 | middle of the button, then we're going
to change the size of the middle of the
| | 01:38 | button. If not, we'll just take that
size that's set on the Timeline by scaling
| | 01:42 | the button, like we did before.
| | 01:44 | So I'm going to wrap this next
line, that btn.main_mc.width = w -
| | 01:49 | btn.right_mc.width * 2, I'm going to
wrap that line in some curly braces below
| | 01:55 | the else statement. So I'll just tab it in
and then put a Closed Curly Brace below it.
| | 02:01 | So that's going to be kind of the
fallback. If we don't need to adjust the text
| | 02:04 | field based on the size of the label,
then we'll just adjust it based on the
| | 02:08 | width and the height. So we're only
going to do this if the label is so big or
| | 02:13 | it has so much text that it's bigger
than what the middle of the button would
| | 02:17 | be. So to figure that out, inside of
the if statement we'll start with W. So if
| | 02:22 | W < label_txt.width + btn.right_mc.width * 2.
| | 02:35 | So basically, this is going to run if
the label text field is bigger than what
| | 02:40 | the middle of the button will be,
and that's how we find it out.
| | 02:43 | So if so, what we're going to do is
set the width of the middle of the button
| | 02:47 | equal to the width of the label. So
btn.main_mc.width = label_txt.width. So
| | 02:58 | we're basically getting the width
from the size of the label instead of the
| | 03:04 | size of w minus the end cap size, which
would do if w is greater than the width
| | 03:11 | of the label plus end caps.
| | 03:13 | Now all we have to do is set the x
position of the label. We'll do that on line
| | 03:18 | 42, but above the current line 42 in
my code, so right after we set the x
| | 03:23 | position for main_mc. So right here,
we type label_txt.x =. We're going to
| | 03:32 | center it with the button.
| | 03:33 | Now remember the formula for centering
is just taking the width of the object
| | 03:38 | you want to center to, so btn.width,
you divide that by 2. That aligns the left
| | 03:43 | edge of the object with the center of
the object you are aligning to. Then from
| | 03:48 | there we just subtract half the width
of the object that you're centering.
| | 03:52 | So, - label_txt.width / 2, and that
will center the label. That's it. So save
| | 04:02 | the file. Let's go over to the FLA and
then I'm going to scale the button down
| | 04:09 | a little bit, so right about there.
Then I'm going to write a whole bunch of
| | 04:12 | text inside of the label to see if it
scales properly. So "Here's a bunch of
| | 04:20 | text". So test the movie and the
button scales appropriately, nice!
| | 04:25 | But let's say we wanted the button to
be a little bit bigger than that. So if I
| | 04:29 | scale it bigger on the Timeline, like
yay big, then the button scales according
| | 04:36 | to what I did on the Timeline and not
according to the text. So we have a good
| | 04:41 | amount of control over the auto-sizing
of the button and changing the scale of
| | 04:45 | the button however we want to on the Timeline.
| | 04:48 | And with that, our button is complete.
| | Collapse this transcript |
|
|
7. Creating a List MenuExploring the FLA file| 00:00 | In this chapter we are
going to build a list that is scrollable
| | 00:03 | and has various items that you can
select as you see here on my screen.
| | 00:08 | To start out I want to walk you through
my FLA file to show you how it's setup.
| | 00:12 | This is especially useful for those
of you who do not have access to their
| | 00:16 | Exercise Files for this title. So on
the stage here I have a bunch of different
| | 00:20 | list items. And now if you check the
Properties Inspector, when you have one
| | 00:25 | selected, you could see that they're
instances of a symbol called Listitem.
| | 00:28 | Note that they don't have any instance names.
| | 00:31 | So I'm going to go to the Library
and we'll take a look at that Listitem
| | 00:35 | symbol. Note that it's green
indicating that it's been exported for
| | 00:39 | ActionScript. If you right-Click
or Ctrl-Click that symbol and choose
| | 00:43 | Properties, you could see that it's
connected to the com.lynda.ui.ListItem
| | 00:49 | class. We'll walk through
that class in a later movie.
| | 00:53 | For those of you who don't have the
Exercise Files, just make a mental note to
| | 00:57 | make sure to connect this movie clip to
the ListItem class once you create it.
| | 01:03 | Inside of the Listitem movie clip we
have several different layers. There is
| | 01:08 | the label layer that obviously has the
label. And the label is simply a dynamic
| | 01:14 | text field. I call that label_txt. It
has some standard font settings. As usual
| | 01:21 | with a dynamic field I embedded the
font, single line, Behavior, Format, Left
| | 01:27 | Aligned, and that's pretty much it.
| | 01:30 | On the next layer I have the over
layer. This is the over state for the
| | 01:35 | Listitem. It's called over_mc. It's an
instance of a movie clip called Rect.
| | 01:41 | And if I double-Click that, you will
see it's just a shape. I'll zoom in really
| | 01:44 | quick and you will see that I have a
really simple shape with a white fill on
| | 01:51 | the top, and then a gray in the middle
or darker gray on the bottom. These are
| | 01:54 | all these vector shapes and back to
the Listitem movie clip. And I have the
| | 02:00 | Brightness, Color Effect applied at 0.
So when you rollover, there is basically
| | 02:05 | no color effect. I'll hide
that layer and show the up layer.
| | 02:12 | Up layer has some brightness applied, 64
%. It's an instance of Rect as well and
| | 02:17 | its name is up_mc. And if I hide the
up layer then you will see down_mc.
| | 02:23 | Brightness at -9; this is basically so
that the movie clip shade is when you
| | 02:28 | rollover. So I just have the same movie
clip and its brightness changes whether
| | 02:32 | you are not rolling over it or your
mouse is over or your mouse is down. Again,
| | 02:37 | all that interactivity is applied in the
ListItem class, which we'll look at in a later movie.
| | 02:43 | So that's how the FLA file is setup.
It's pretty straightforward and I also
| | 02:47 | have a movie clip called List. And if
you double-Click that symbol, you can
| | 02:51 | enter its timeline and in there, it's
pretty simple and we'll go over in more
| | 02:56 | detail in the later movie. But I
have an actions layer with no code. A
| | 03:01 | placeholder layer, which is just a
vector shape just so we can see a
| | 03:05 | placeholder graphic for the list,
and then a layer called scrollbar that
| | 03:08 | contains a scrollbar
instance called scrollbar_mc.
| | 03:11 | Let's connect it to the Scrollbar class.
Now the Scrollbar class is something
| | 03:15 | that we created in a previous chapter,
so I recommend watching that chapter if
| | 03:21 | you don't have a Scrollbar class
already created. And the scrollbar symbols
| | 03:25 | folder in the Library simply has all
the symbols that are related to that
| | 03:28 | scrollbar movie clip.
| | 03:31 | So that's our FLA file. So with that
FLA setup properly, you are ready to start
| | 03:36 | building the List classes.
| | Collapse this transcript |
| Viewing the ListItem class| 00:00 | In this movie we're going to walk through
the ListItem class that I've already created.
| | 00:05 | Now for those of you who do not have
access to the Exercise Files, they'll need
| | 00:09 | to create this class from scratch, but
don't worry it's not as daunting as it
| | 00:14 | may seem. You can actually just copy
the Button class that we created in a
| | 00:19 | previous chapter and modify the
code to fit the ListItem class, because
| | 00:25 | basically this class is the same thing as the
Button class with the few additional tweaks.
| | 00:30 | So I would start from there, if I
didn't have the Exercise Files. Let's take a
| | 00:34 | look at this. So it's part of the
com.lynda.ui package. So obviously this file
| | 00:39 | needs to reside in that folder. It's
called ListItem, same as the file name and
| | 00:45 | everything. So I'm importing all
the display events and text classes.
| | 00:51 | And ListItem class extends the
Sprite class. So here I have one private
| | 00:56 | property and four public properties.
First private property is _label. That
| | 01:02 | represents the label on the list
item. I have a public property called
| | 01:07 | allButtons. That's an array of all
the different button states for this
| | 01:12 | ListItem and three public properties
to hold the different movie clips that
| | 01:17 | represent the button states.
Let's look at the constructor.
| | 01:22 | So I have set buttonMode = true,
mouseEnabled =false. So the label text doesn't
| | 01:28 | capture any mouse interactivity.
Setting the values of up, over and down
| | 01:32 | properties, placing all the button
states inside of the allButtons array,
| | 01:38 | running a method called hideAllExcept(up
_mc). We'll walk through that in just a
| | 01:42 | minute, running the draw method to
control scaling and adding an event listener
| | 01:48 | to run once this is
activated initializing this class.
| | 01:52 | So we'll go to the init method since
it's next down the line. So the init
| | 01:57 | method just adds event listeners to
this whole ListItems. So remember they're
| | 02:02 | not on each of the individual button
states. They are on the entire ListItems.
| | 02:07 | So MOUSE_UP, MOUSE_DOWN, ROLL_OVER,
ROLL_OUT. They are all running a method
| | 02:11 | called handleMouse, which
again we'll look out in minute.
| | 02:15 | So I have a disable method that
removes all the event listeners from this
| | 02:19 | object, the draw method controls to
scaling. It simply sets scaleX and scaleY
| | 02:24 | to 1, loops through all of the
children, and sets each of the child objects
| | 02:31 | with x and y positions. handleMouse
uses a switch case statement to check the
| | 02:38 | type of event. So is it MouseEvent, ROLL
_OVER, ROLL_OUT, etcetera, and based on
| | 02:44 | the event that occurs a
different movie clip is shown.
| | 02:48 | So hideAllExcept, Over_mc, if it's
ROLL OVER, up_mc, if it's ROLL_OUT and
| | 02:54 | etcetera. So this may look very
familiar, if you already created the Button
| | 02:59 | class. So hideAllExcept does exactly
what you think it would do. It loops
| | 03:05 | through all of the buttons and hides
everything unless the button passed in as
| | 03:11 | the except parameter is equal to
allButtons in xi. And again hiding is done
| | 03:17 | using the alpha property
and not the visible property.
| | 03:21 | By setting the alpha property you
don't take away any mouse interactivity
| | 03:26 | setting the visible property of an
object defaults disables its mouse
| | 03:30 | interactivity, which we don't want to
do in this case. So that way we use alpha
| | 03:33 | to ensure that; that never happens.
| | 03:36 | Finally, we have this set and get
methods for the label property. Remember that
| | 03:41 | the _label property is the private
version and the regular label property is
| | 03:47 | the public version that we
controlling using the set and get methods.
| | 03:50 | So the set methods simply stores the
value passed in that private property and
| | 03:56 | then sets the text in the label text
field and the get method simply returns a
| | 04:00 | value of the private property _label.
| | 04:02 | So that's pretty much it for the
ListItem class and now again if you don't have
| | 04:06 | the Exercise Files, make sure to
connect it to your ListItem movie clip and
| | 04:10 | then I'm going to test the movie here
to show you what this looks like. So I
| | 04:13 | have the different labels and there is
all my list items. I can roll through
| | 04:17 | them, and just Click on them and you can
see the various states as I Click on them.
| | 04:25 | So that's a look at how the ListItem
class is set up and once you have your set
| | 04:30 | up properly, you are ready to move on.
| | Collapse this transcript |
| Creating the List class| 00:00 | Now that we have our ListItem class
setup, we'll look at creating the List
| | 00:05 | class. The first thing I'm going to
do is delete all my list items off the
| | 00:08 | stage. We are going to use the List
class to create list items dynamically.
| | 00:14 | So what I'm going to do is open up the
Library and drop an instance of my List
| | 00:18 | movie clip on to the stage, you don't
need to give an instance name, what you do
| | 00:23 | need to export it for ActionScript, if
you already have the List class setup.
| | 00:27 | So we'll do that in just a minute.
| | 00:29 | Let's go to the List.as file to take a
look at our List class. So if you don't
| | 00:35 | have the Exercise Files, the main thing
that you should want to make sure to do
| | 00:38 | is take this file, save it into the
com.lynda.ui package. Then just define the
| | 00:44 | basic scale to the class called List
that extends the movie clip class.
| | 00:50 | It's significant that I'm extending the
MovieClip class rather than the Sprite class.
| | 00:54 | One benefit that you get when you
extend the MovieClip class is that you can
| | 00:59 | add ActionScript to a frame inside of a
movie clip, but not a Sprite. So we are
| | 01:06 | going to add frame scripts into our
List to create the various list items. So I
| | 01:13 | definitely want to extend MovieClip
here and not Sprite. So make sure to import
| | 01:18 | the display and events
classes, and you are ready to go.
| | 01:22 | Above the constructor, I'm going to
define my properties. So I'll start with a
| | 01:26 | few public properties, Public var
ItemClass, datatype it to a class. Now this
| | 01:35 | is going to represent the Class that we
are using for our list items. That way
| | 01:40 | you can use whatever class you want
for your list items and everything could
| | 01:44 | still work properly.
| | 01:46 | So let's say you wanted to create
your customized class for your list items
| | 01:50 | that's different from what we created
with this list. You could do that using
| | 01:54 | this time class property. So in the
next line, I'll create another public
| | 01:59 | property called items. This is going
to be in an Array and just initialize it
| | 02:05 | to an empty array by setting it = open square bracket,
closed square bracket. We'll create another public property
| | 02:11 | called currentValue, so it will
represent the current label value the selected
| | 02:17 | item in the list. So datatype that to a String.
| | 02:21 | I will create another public property
called the scrollbar. This will represent
| | 02:25 | the scrollbar that controls this
List. So datatype that to a Scrollbar,
| | 02:30 | lowercase b. Capital B is the one
that's built-in the Flash, and then we'll
| | 02:35 | create some private properties.
| | 02:36 | So let's go to the next line, and
create a private property called _rowHeight,
| | 02:43 | datatype it to a positive integer, so
uints = 4, that will be the default. This
| | 02:48 | represents how many rows in the list
will be visible. So if you adjust this
| | 02:53 | property, you can have more or
less rows visible in your List.
| | 02:59 | On the next line create another
private property called listItemContainer and
| | 03:06 | datatype it to Sprite, and this is
going to be a Sprite that contains all of
| | 03:11 | the list items so that we can mask them
in order to control the scrolling. And
| | 03:16 | speaking of mask, we'll create one
more private property liMask. This will
| | 03:22 | represents a mask that we'll use to
mask the list items. That way we can scroll
| | 03:27 | them, datatype this to Sprite and there we go.
| | 03:32 | So in the constructor, I'm going to
write some of our initialization code. The
| | 03:36 | first thing I'll do is create a new
Sprite using our liMask property. So liMask
| | 03:42 | = new Sprite, don't forget the
parenthesis and then we'll just add that to the
| | 03:47 | stage using the addChild(liMask), and
then we'll create a new Sprite for the
| | 03:52 | listItemContainer, so listItemContainer = new
Sprite, and we'll add that to the stage as well.
| | 03:59 | So addChild(listItemContainer), and
then we are going to loop through all the
| | 04:06 | children. Remember that when we looked
at our List movie clip that we had that
| | 04:11 | shape on the stage. What we want to do
is use ActionScript to remove it. That's
| | 04:14 | just placeholder so that looks a
little bit more pretty on the stage, and we
| | 04:18 | can see what it's going to look like when
we scale it, and we move it, and everything.
| | 04:22 | So we are going to loop through all
the children, so (var i:uint = 0; I <
| | 04:26 | numChildren; i++) and in the loop, we
are going to check to see if the child
| | 04:38 | that i is a shape. So if(getchildAt(i) is Shape).
\Then we are going to remove
| | 04:50 | it. So removeChild (getChildAt(i)). So
if the child is a Shape, it will remove
| | 05:05 | it. That way this will get rid of any extra
shapes that happened to be inside of the list.
| | 05:10 | With that, our list is initialized. So
we should be able to save the file. Go
| | 05:15 | back to the FLA, in the Library, right-
Click or Ctrl-Click the List movie clip,
| | 05:21 | go to Properties, Export for
ActionScript, set the base class to
| | 05:26 | com.lynda.ui.List and then you should
be able to test the movie and not get any
| | 05:35 | errors, and also that rectangle as the
placeholder should disappears. So you
| | 05:41 | should just see a scrollbar. If you do,
then everything is working properly. So
| | 05:46 | now the basic outline of our List
class is set up and running properly.
| | Collapse this transcript |
| Defining the addItem Method| 00:00 | Now that we have defined the
constructor method for our List class, we are
| | 00:04 | going to add a method called AddItem. This
will allow us to add list items to our list.
| | 00:11 | So scroll down below the constructor,
and right below the constructor we are
| | 00:15 | going to declare a public method
called AddItem. And we'll see one property
| | 00:22 | called l, short for label. That will
be a string. So no return data, so we
| | 00:27 | call void, curly braces and in the
method, I'm going to create a variable
| | 00:33 | called item, data type it to a
ListItem, and we'll set it equal to a new
| | 00:41 | instance of ItemClass. Now we have to
define the ItemClass in our FLA file.
| | 00:47 | So we'll do that a little bit later on
in this movie. So then we are going to
| | 00:51 | set the Y position. So item.y = items.
length, remember items is that array of
| | 00:58 | all of the list items. So right now
it's 0 until we add any items times
| | 01:04 | item.height, and then we are going to
put a label on it. So item.label = l, and
| | 01:13 | then listItemContainer.addChild and
passing the item. So put that item inside
| | 01:20 | of the listItemContainer and finally
we'll put the item inside of the items
| | 01:25 | array. So items.push(item). So
basically the Y position is going to update
| | 01:31 | based on the length of the item.
| | 01:32 | So for the first item that length is
going to be 0 and that's going to be
| | 01:37 | multiplied by item.height. So the Y
position of the first ListItem is going to
| | 01:40 | be 0 and then once length is = 1, the Y
position is equal to the height, and so
| | 01:46 | basically they are going
to stack below each other.
| | 01:48 | So that's how that works. Let's save
the file and to test it, we'll go over to
| | 01:54 | our FLA file, Double-Click the List on
the stage to enter its timeline. So you
| | 01:59 | should be at the timeline of the List
movie clip, and go ahead and open up the
| | 02:04 | Actions panel on frame one and the
Actions layer, and in Actions panel I'm
| | 02:10 | going to type ItemClass. Remember
that's property that is now attached to the
| | 02:17 | List, because this List is connected to
our List class. Set it equal to ListItem.
| | 02:24 | That's the class that we exported in
our Library. So you definitely need to
| | 02:28 | make sure that's exported for
ActionScript and it spelled just like this. And
| | 02:33 | then on the next line, I'm going to
type AddItem. Remember that's our custom
| | 02:38 | method that we built in our List class
and I'm just going to write Item 1. Now
| | 02:45 | we should be able to test the movie and
then see Item 1 list item there. I can
| | 02:50 | Click it just like any other list item.
| | 02:54 | So that looks that it's working okay,
and if you want to add a couple more, you
| | 02:58 | could just copy and paste this. So
Item 1, Item 2, Item 3, Item 4, test the
| | 03:06 | movie, and there they are. Nice! So
our list is now coming together. With our
| | 03:13 | AddItem method now we can add as
many items as we want to the list.
| | Collapse this transcript |
| Controlling list menu scaling| 00:00 | Now that we can add
different items to our list, we are going to
| | 00:04 | look at controlling the appearance of the list
including scaling using a method called draw.
| | 00:10 | So we'll start in our AddItem method.
So right below items.push(item) we are
| | 00:18 | going to run a method called draw
passing in width and height. So every time we
| | 00:23 | add a list item, we are going to re-
render the list to make sure that it works
| | 00:28 | properly. So below that I'm going to
check to see whether or not we should show
| | 00:33 | the scrollbar. So if, and in the
parenthesis I'm going to check to see if
| | 00:39 | items.length > _rowHeight.
| | 00:45 | So if the number of ListItems is
greater than rowHeight, and remember that
| | 00:49 | rowHeight is equal to 4. So only 4 list
items are going to show at a time then
| | 00:54 | we are going to show the scrollbar
or else we are going to not show the
| | 00:58 | scrollbar. So scrollbar.visible = true
and then else scrollbar.visible = false.
| | 01:13 | And if you just wanted to write the
shorthand, you could take this conditional
| | 01:17 | statement in the parenthesis here you
are just going to copy the statement
| | 01:19 | including the parenthesis and paste
that over true. So if it's true, visible
| | 01:24 | equals true. If it's false, then it'll be false.
| | 01:27 | So actually I'm just going to delete
the if and else statement and we'll keep
| | 01:33 | this really condensed. Again, if this
is confusing for you to look at, you can
| | 01:38 | always use the if/else statement. I just
prefer the condensed shorthand notation here.
| | 01:43 | So let's define the draw method. I'm
going to define that right about the
| | 01:46 | AddItem and right below the list
constructor. So public function draw and
| | 01:52 | I'll have w as a Number and then h as a
Number as well, :void and I'll return here.
| | 02:01 | And for the draw method we'll pretty
had the standard method that we have done
| | 02:04 | in previous chapters. So scaleX =
scaleY= 1, scrollbar = scrollbar_mc.
| | 02:16 | scrollbar_mc by the way is the
MovieClip name for the scrollbar in the list
| | 02:21 | MovieClip name for the scrollbar in
the List MovieClip in the FLA file.
| | 02:22 | We will set the Y position of the
scrollbar equal to 0. scrollbar.y = 0.
| | 02:28 | scrollbar.x = w. That's the width of
the list. So if somebody stretches it out,
| | 02:36 | that's what w is going to be. Then we
are going to subtract the width of the
| | 02:40 | scrollbar. That's where the scrollbar
should be. So w - width of the scrollbar
| | 02:45 | and that will place the scrollbar
exactly where it should be. At the right edge
| | 02:49 | of the list items. So scrollbar.
height = items index 0 .height * _rowHeight.
| | 03:02 | So if rowHeight is equal to 4 and items
index 0 .height equals 20, the scrollbar will
| | 03:09 | be 80 high. So that will match the
height of the visible rows. Moving on we'll
| | 03:15 | run the scrollbar draw method. So
scrollbar.draw passing in w and scrollbar.height.
| | 03:22 | So remember the scrollbar has its own
draw method to render appropriately. So
| | 03:26 | we could stretch it out however we
want. Then we are going to run that draw
| | 03:29 | method, everything fixes, then
we'll add the scrollbar to the state. So
| | 03:33 | addChildscrollbar. This is just to make sure
that the scrollbar is in front of the list items.
| | 03:39 | And then we are going to draw the mask.
So liMask.graphics. That's the property
| | 03:46 | that controls graphics drawn
dynamically using ActionScript. And the first thing
| | 03:51 | you need to do whenever you are
drawing a graphic is run the beginFill
| | 03:54 | method that's part of the graphics
property. So beginFill and in the
| | 03:58 | parenthesis we just need to pass in the
color of the fill which is going to be
| | 04:02 | the ActionScript X, 0x000000. And then
comma and then we'll pass in the alpha,
| | 04:11 | which is going to be 1.
| | 04:12 | So we want to have black rectangle
here. The reason why I wanted to have an
| | 04:16 | alpha of one, so that I can see it if
the mask isn't rendering properly. Down
| | 04:21 | the next line we'll draw the rectangle.
So liMask.graphics.drawRect and in the
| | 04:29 | parenthesis I'm going to pass in the X
and Y coordinates for the rectangle so
| | 04:34 | (0,0) and then the width and height.
So w for the width, comma, and for the
| | 04:41 | heights it's going to be items index 0
.height * _rowHeight. So as same thing as what
| | 04:50 | we did for the scrollbar.
| | 04:51 | And as the best practice after you draw
shape you always run endFill method. So
| | 04:58 | liMask.graphics.endFill, no
parameters. So whenever you drawing the shape
| | 05:07 | you've got to run the beginFill method
to define the fill for the shape, you
| | 05:10 | run that appropriate draw method
and then you run the endFill method.
| | 05:14 | Then we are going to have a loop to
run the draw method for each of the list
| | 05:20 | items. So create the basic skeleton
of a loop. So it's going to be for var
| | 05:29 | i:uint = 0 i < itmes.length; i++.
| | 05:34 | So in the loop all we'll do is run
the draw method for each item. So type
| | 05:39 | items index i .draw (w - scrollbar.width, h).
That will run the draw method for each
| | 05:54 | list item in the items array.
| | 05:56 | Finally, below the loop set the
mask for listItemContainer equal to
| | 06:00 | liMask. So listItemContainer.mask =
liMask. And that's it. So save the file and
| | 06:13 | at this point you should be able to
test the movie and you should see no
| | 06:17 | scrollbar and you should
just see items 1 through 4.
| | 06:22 | Now that's not that exciting, because
we only had four items anyway. But if you
| | 06:27 | add more items. So I'm going to double-Click
the list in the FLA, go to my
| | 06:31 | ActionScript in there, and I'm just
going to add Items 5 and 6. So copy and
| | 06:37 | paste item 4 twice and then item 5
and 6. So just change that code a little
| | 06:44 | bit, test the movie. And now I see the
scrollbar, I see items 1 through 4 only. Nice!
| | 06:52 | So we now have our mask setup properly
and if you go to the main time line and
| | 06:59 | you use the Free Transform tool to
Click-and-drag to scale the list, then you
| | 07:05 | will see that; that's affected
properly when you test the movie.
| | 07:08 | So now I have successfully controlled
the scaling of our list. So it scales
| | 07:14 | properly when you scale it
horizontally and we've set the appearance of the
| | 07:19 | mask to render properly.
| | Collapse this transcript |
| Selecting list items| 00:00 | In this movie we'll take
a look at selecting different items in
| | 00:03 | the list in firing off an event once
an item is selected. So scroll down in
| | 00:09 | your code and find the AddItem method.
| | 00:12 | In the AddItem method, right below
listItemContainer.addChild, add a new line
| | 00:17 | of code. And in this line we are going
to add an event listener to the item. So
| | 00:22 | item.addEventListener and event is
going to be MouseEvent.CLICK and we'll run
| | 00:32 | the method called handleClick.
| | 00:36 | The handleClick method will be a
private method and we'll define it right below
| | 00:40 | AddItem. So private function
handleClick the event with the datatype of
| | 00:47 | MouseEvent:void for no return data and
inside of the handleClick method create
| | 00:52 | a variable called item. And so var item
data type it to a listItem. And then we
| | 00:59 | are going to create a for loop. It's
going to loop through all the items and
| | 01:04 | it's going to make each item
initialize adding all of the event listeners and
| | 01:10 | then after the loop we are going to
disable the list item that was Clicked.
| | 01:15 | So in the loop (var i: uint = 0; i <
items.length, i++) and then inside of
| | 01:26 | the loop we'll set item = items index i
and then we'll run the item init method.
| | 01:33 | So item.init and remember all the
init method does is just add all the
| | 01:38 | MouseListeners so that the ListItem
will react to rollover and roll out and
| | 01:43 | mouse down and everything.
| | 01:45 | And on the next line, we'll run
the items hideAllExcept method. So
| | 01:49 | item.hideAllExcept and in the
parenthesis for that method pass in item.up.
| | 01:57 | That's the property that holds the
up state of that ListItem. So we are
| | 02:01 | basically resetting all of them and
below the loop we are going to disable the
| | 02:06 | item that was Clicked on.
| | 02:07 | So below that type item =
datatype a ListItem. So ListItem
| | 02:19 | (event.currentTarget). Remember that
currentTarget retains a reference to the
| | 02:25 | item that added the event listener. So
it's going to be one of the list items.
| | 02:31 | And the reason why we were doing this
typecasting thing here is because the
| | 02:34 | data type returned by event.currentTarget is not
ListItem. It's an interactive object data type.
| | 02:42 | So Flash doesn't necessarily recognize
properties and methods that are unique
| | 02:46 | to ListItem. So what we were doing
here just telling Flash to treat it as a
| | 02:50 | ListItem. On the next line we are
going to run items.disable method. This is
| | 02:54 | going to remove all the event listeners.
That's again defined in our ListItem
| | 02:59 | class. Then we'll run item.
hideAllExcept passing in item.down. That will be the
| | 03:07 | selected state for the ListItem.
| | 03:08 | We will set currentValue = item.label
and then we'll dispatch an event and the
| | 03:17 | event will be a new instance of the
event class and inside the new event
| | 03:23 | constructor we'll pass in Event.CHANGE.
| | 03:27 | And that's it for List class for now.
So save the file and then test the movie.
| | 03:34 | So at this point you should be able to
Click on the various list items. They
| | 03:37 | should stay selected when you Click them.
Nice! The last thing that we want to
| | 03:42 | do is check to see whether we can
capture the CHANGE event data when this item
| | 03:48 | changes and that currentValue.
| | 03:52 | So go to the FLA and double-Click the
list on the stage to enter its timeline
| | 03:58 | inside of the timeline of the List
movie clip select the first keyframe of the
| | 04:02 | actions layer and open up the Actions
panel. And in here I'm going to add an
| | 04:07 | event listener and the event is going
to be event.CHANGE and then we'll run a
| | 04:12 | method called listChanged.
| | 04:13 | So let's define that function real
quick. So function listChanged event with
| | 04:20 | the data type of Event:void, no return
data. And then what we are going to do
| | 04:25 | is just trace(currentValue).
Remember we don't have to type
| | 04:31 | list.addEventListener or list.
currentValue, because those properties are part
| | 04:36 | of the movie clip that we are inside
of right now. So we can just run the
| | 04:40 | AddItem method. We can just set
the Item class property, etcetera.
| | 04:44 | So test the movie and you should be
able to Click on these and see the label
| | 04:50 | for that list item when you Click on
it. So I Click on that, I get Item 1,
| | 04:54 | Click on Item 4, I get Item 4, Item 3
and Item 2. Nice! So now our ListItems
| | 05:00 | are working properly and I'm going to
comment out this trace statement so that
| | 05:05 | we don't see any messages in the
output window unless we want to later on.
| | 05:09 | So our list now supports selecting
individual items. And changing events so we
| | 05:16 | can capture whenever the
list currentValue changes.
| | Collapse this transcript |
| Adding scrolling to the list| 00:00 | In this movie we'll add
the functionality to scroll the list. So,
| | 00:04 | let's scroll down to the draw method
and then right below where we run the
| | 00:07 | scrollbar's draw method I'm going to
add an event listener to the scrollbar. So
| | 00:11 | scrollbar.addEventListener and the
event is going to be event.CHANGE. That's
| | 00:16 | the event that's fire off when the
scrollbar's values changes. And we'll run a
| | 00:21 | method called updateListScroll. We'll
define that right below the handleClick method.
| | 00:29 | This is going to be a private method.
So a private function updateListScroll,
| | 00:39 | event with the datatype of Event:void,
no return data, some curly braces and
| | 00:46 | inside here we are going to set the Y
position of the listItemContainer. So
| | 00:49 | listItemContainer.y = scrollbar.value.
That value is going to be 0 and 1.
| | 00:59 | That's the percentage that the
scrollbar is scrolled down * times and then
| | 01:04 | in parenthesis we'll multiply this by
the Y position of the listItemContainer
| | 01:10 | that is at the maximum value.
| | 01:12 | So in other words we are going to
start with height of the list item mask. So
| | 01:17 | liMask.height and we are going to
subtract the height of the listItemContainer.
| | 01:24 | So minus listItemContainer.height.
| | 01:28 | So if you picture that in your head,
height of the mask is the same as the
| | 01:32 | height of the scrollbar. And from
there when you subtract the height of a
| | 01:35 | listItemContainer, that aligns the
bottom of the listItemContainer with the
| | 01:40 | bottom of the scrollbar.
| | 01:41 | We set the Y position there for the
listItemContainer and then on the next
| | 01:46 | line. We are going to reset the mask
and this is one of the gotchas of using
| | 01:50 | masks with ActionScript. You actually
have to reset the mask every time a mask
| | 01:55 | element moves. So just make sure to do
that and you will not have any problems.
| | 01:59 | I am going to do that from here so
listItemContainer.mask = liMask, and that's
| | 02:07 | it. So save file and then test the
movie and you should be able to scroll down
| | 02:16 | and see all of the list items. Nice! So now
our list is scrolling just like it should.
| | Collapse this transcript |
| Connecting scroll buttons| 00:00 | The last thing that we have to do to
complete the list is adding functionality
| | 00:04 | to our Scroll buttons. In order to do
that we're going to need to modify our
| | 00:09 | Scrollbar class and add some
functionality. If you don't have the Scrollbar
| | 00:14 | class I recommend watching the chapter
where we created the Scrollbar class so
| | 00:19 | that you can see how to
build this class from scratch.
| | 00:22 | Here I'm going to add a private
property above the other private properties.
| | 00:27 | This one is going to be called _
scrollAmt, capital A, short for scroll amount.
| | 00:34 | Data type that to a Number. This is
going to represent what percentage the
| | 00:40 | value of the scrollbar will change
when you Click the Up or Down button. So
| | 00:45 | we'll allow you to set that somewhere else.
| | 00:49 | Now we'll create public versions of
that private property. The get and set
| | 00:54 | methods that we're going to use for
scrollAmt are pretty much identical to
| | 00:58 | those used for textField. So we'll just
copy and paste the set and get methods
| | 01:02 | for get textField, and just change
the name to scrollAmt. Make sure to
| | 01:08 | capitalize the A. So do that in both
the pasted set and get method, and for the
| | 01:14 | get method I'll make sure to return
_scrollAmt and then in the set method I'm
| | 01:22 | going to replace a line of code that
sets _textField to set _scrollAmt = amt.
| | 01:28 | And of course, I'm going to have to
change that tf parameter and its data type
| | 01:37 | to amt, short for amount, and the
data type to Number with capital N.
| | 01:42 | So now we set the Scroll Amount, we
set that private property and the event
| | 01:47 | listeners to the Up and Down buttons.
And the last thing we need to do for our
| | 01:51 | get and set methods is just change
the return textField data to returning a
| | 01:57 | Number in the get method.
| | 01:58 | So now scroll up in your code, find the
ClickScrollButton method, and I'm going
| | 02:04 | to wrap the second and the third
lines in an if statement. So right below
| | 02:09 | percent, there's _textField.scrollV and
then +=. So I'm typing if statement and
| | 02:15 | check to see if there's a value for
_textField. Wrap those two lines with the
| | 02:21 | curly braces and select them both
and indent them using the Tab key.
| | 02:25 | So if the textField is set, that's how
we're going to control the scrolling,
| | 02:31 | else if and we're going to check to
see if _scrollAmt is defined. And within
| | 02:40 | the else if statements curly braces
we're going to do basically the same thing
| | 02:44 | we did for the textField, but we're going
to do it specifically for the scroll amount.
| | 02:49 | So here we'll set percent =, some
parenthesis and then we'll type (drag_mc.y -
| | 02:56 | min) / max, so I'll get the percentage
that the scrollbar is down based on the
| | 03:06 | draggable elements position. And then
we're going to add on to it based on that
| | 03:11 | scrollAmt property. So percent +=
and then we're going to use a shorthand
| | 03:16 | conditional statement to add on.
| | 03:18 | So we want to see, if we Click the
Up button we want to go in a negative
| | 03:22 | direction and if we Click the Down
button we want to go in a positive
| | 03:25 | direction. So the first thing we'll do
is check to see if (event.currentTarget
| | 03:31 | == up_btn) add a question mark after
the parenthesis. It will be negative
| | 03:37 | _scrollAmt, else, so colon,
then the value will be _scrollAmt.
| | 03:48 | So we're going to change the percent in
the amount of that scrollAmt property.
| | 03:53 | And then just to be safe, we want to
keep the percentage in bounds. So we're
| | 03:57 | going to have a conditional statement
to check to see, if the percentage is
| | 04:01 | less than zero. So if(percent < 0)
then percent = 0 and we'll do an else if
| | 04:10 | statement to check to see if it's greater
than 1. So if(percent > 1), percent = 1.
| | 04:21 | So that keeps the percentage in
bounds and everything else is good for the
| | 04:26 | Scrollbar class. So what you want to
do is Save this file and then go over to
| | 04:31 | the List Class. In the List class
all we're going to do is set the Scroll
| | 04:36 | Amount. So find the draw method and
right below the scrollbar.addEventListener
| | 04:42 | line of code, inside of the draw method,
go ahead and set the Scroll Amount for
| | 04:45 | the scrollbar. So scrollbar.scrollAmt
= and then what I want to do for the
| | 04:53 | Scroll Amount is I want to go one list
item at a time. So why don't you just
| | 04:57 | scroll in the Amount of a list item.
| | 05:00 | Now how on earth do you get that
number? All you do is you take one and you
| | 05:05 | divide it. So I'm going to take 1 and
we are going to divide it by a number in
| | 05:09 | parenthesis. So type some parenthesis
and I'm going to divide it by the number
| | 05:12 | of total items, so items.length - _rowHeight.
| | 05:18 | So the scrollAmt is going to be 1
divided by the number of rows that are
| | 05:27 | hidden. So we start with total list
items that we have, and we subtract the
| | 05:32 | visible rows then we get the number of
rows that are hidden. So by dividing one
| | 05:37 | by that number, the Scroll Amount
will make the list items scroll. When you
| | 05:42 | Click the Scroll buttons
reveal one item at a time.
| | 05:45 | So save the file, File, Save and
then test the movie and Click the Scroll
| | 05:52 | buttons, to confirm that it works. So
we see one new list item at a time, so
| | 05:57 | here we reveal five and six as we
Click down and then two and then one as we
| | 06:02 | Click the Up button. Nice, so
now our list is complete, good job.
| | Collapse this transcript |
|
|
8. Building a Dropdown MenuExploring the FLA file| 00:01 | In this chapter, we're going to
build the dropdown menu. Dropdown menu is
| | 00:05 | basically a list that's connected to a
button. To start out, I want to show you
| | 00:09 | how I set up my FLA file. So on the
stage here I have my Dropdown movie clip
| | 00:16 | and if you Double-Click it, you'll see
that inside of there you have a list box
| | 00:21 | with an instance name of li and this is
the list that we've build in a previous
| | 00:26 | chapter. So of course, it's connected
via Library to the List and ListItem
| | 00:32 | classes and then we have a button
that's connected to our BasicButton class
| | 00:38 | that we have created in another chapter.
| | 00:40 | Apart from that, the only thing here is
the arrow movie clip and if I zoom in,
| | 00:46 | you can see it a little bit better.
So I'm going to use the Magnifier tool,
| | 00:50 | keyboard shortcut M and zoom in a
little bit. And see this little arrow out
| | 00:54 | here, it has an instance name of arrow
_mc and if I Double-Click you can see
| | 00:58 | it's just a simple shape. So I have
this clear rectangle on the background and
| | 01:03 | then I have some gray semitransparent
shapes here. So it's pretty straightforward.
| | 01:09 | In the ActionScript I only have
one little line of code that says
| | 01:14 | arrow_mc.mouseEnabled = false.
Basically that just means that this arrow won't
| | 01:20 | capture any mouse interactivity, so
when you roll over it, it won't steal any
| | 01:26 | thunder from the button that's behind
it. So we essentially disabling all of
| | 01:30 | its mouse interactivity. And that's
really all there is to it. At this point I
| | 01:35 | don't have the dropdown menu connected to any
class via ActionScript, so we'll do that later.
| | 01:41 | So once you have your FLA file set up
like mine, you are ready to start writing
| | 01:45 | the code for your dropdown menu.
| | Collapse this transcript |
| Creating the Dropdown class| 00:00 | We'll start creating our dropdown menu
by defining our Dropdown class. So here
| | 00:06 | I'm in a file called Dropdown.as. So if
you don't have the Exercise Files, make
| | 00:11 | sure to create that file, capitalizing
D at the beginning of Dropdown and make
| | 00:17 | sure to save this file in
the com.lynda.ui package.
| | 00:22 | So the first thing we'll do here is
declare the package, package com.lynda.ui,
| | 00:27 | some curly braces. Import the
classes we're going to be using. So,
| | 00:32 | flash.display.*. We'll import flash.
events.* and flash.text.*. We are also
| | 00:44 | going to import the classes not built
into Flash. That's a third party class
| | 00:50 | called TweenLite. So import gs.*.
| | 00:55 | Now for those of you who don't have
access to the Exercise Files, you will need
| | 00:59 | to download TweenLite in order to
use this exercise, because we're using
| | 01:04 | TweenLite for the
animation of our dropdown menu.
| | 01:07 | You can download TweenLite at tweenlite.com.
And when you download TweenLite
| | 01:16 | you're going to see a folder called gs.
I want you to copy the gs folder into
| | 01:20 | the same directory as your FLA file.
For more details about TweenLite, you can
| | 01:25 | see the other titles where I've shown
how to use it in detail, like the Object
| | 01:30 | Oriented Programming title and the
Creating Games for the Wii title.
| | 01:34 | So below that I'm going to declare
that my class, so public class Dropdown
| | 01:41 | extends MovieClip and again I'm
extending the MovieClip class because I'm going
| | 01:46 | to be using Frame Scripts. So since
I'm going to be putting code on the
| | 01:50 | timeline for my dropdown menu, I need
to extend MovieClip class and not the
| | 01:55 | Sprite class, because the Sprite
class does not support that feature.
| | 01:58 | And now the Constructor method, public
function Dropdown(), curly braces, and
| | 02:05 | for now we won't put anything in that.
Now let's declare a property. So a
| | 02:08 | public property called list, datatype
that to List, capital L, public property
| | 02:15 | called button, all lowercase,
datatype that to of BasicButton.
| | 02:20 | So you'll definitely need the
BasicButton class in your com.lynda.ui package
| | 02:26 | for this project as well as the List
class of course and the ListItem class for
| | 02:31 | that matter. For more information about
those classes you can see the previous
| | 02:35 | chapter, where we created
the List and List items.
| | 02:38 | Other public property called
buttonSpace, capital S, datatype it to a Number
| | 02:43 | and set it equal to 3. This
represents some spacing that we'll use for the
| | 02:48 | button. We'll talk about more at this
later. And some private properties. So
| | 02:52 | private var _currentValue, capital V,
datatype that to a String. Private
| | 03:01 | property isDown, capital D, datatype
that to Boolean. And finally a private
| | 03:08 | property called listMask, capital M,
datatype that to a Sprite. This is going
| | 03:14 | to be the mask object
that masks the entire list.
| | 03:20 | That's it for creating our class and
our properties. So let's save this file
| | 03:24 | and connect it to our dropdown
menu in FLA. So go to Library in FLA,
| | 03:30 | Right-Click or Ctrl-Click the Dropdown
movie clip. Choose Properties, check the
| | 03:36 | Export for ActionScript box and
for base class we'll connect it to
| | 03:40 | com.lynda.ui.Dropdown.
| | 03:45 | Always remember that you need to use
the fully qualified class name, which
| | 03:48 | includes the package here. So we have
that Click OK, and the definition for the
| | 03:53 | class cannot be found. That's okay.
Test the movie and we don't get any errors,
| | 04:02 | so everything is working properly. Nice,
so now our Dropdown class is created
| | 04:08 | and successfully connected to the
movie clip on the stage in our FLA file.
| | Collapse this transcript |
| Initializing the Dropdown class| 00:00 | Now we'll look at initializing our
dropdown menu. The first thing I'm going to
| | 00:04 | do is adjust the text alignment for
our button. When we initially created our
| | 00:10 | basic button in a previous chapter, we
made it so that the button aligns to center.
| | 00:17 | Here what we are going to do is change
the basic button class to support any
| | 00:21 | type of alignment. The first thing I'm
going to do is make sure that my text
| | 00:26 | field on my button is aligned to left.
So I'm inside of my Button movie clip
| | 00:30 | that's inside of the dropdown and I'm
going to select that label field and to
| | 00:35 | the Properties Inspector I'm just going
to confirm that my paragraph alignment
| | 00:39 | is left. Then go to the BasicButton class.
| | 00:43 | In the BasicButton class go down to
the draw method. In the draw method find
| | 00:50 | the part where the label text field's
X position is set and here half of the
| | 00:56 | width of the button minus half the
width of the field.
| | 00:59 | What we are going to do is delete
that set value and change it to be
| | 01:04 | btn.main_mc.x. So it's going to align
with the left edge of that main movie
| | 01:11 | clip. And then what we are going to do
is make the label text field the full
| | 01:17 | width of the button minus the
end caps. So right below that type
| | 01:20 | label_txt.width = btn.main_mc.width.
| | 01:28 | And that's it. So we'll save the file
and then move over to Dropdown.as. In the
| | 01:35 | Dropdown file, go to the constructor
and add an event listener to listen for
| | 01:41 | the event.ACTIVATE event. So
addEventListener and the event is going to be
| | 01:47 | event.ACTIVATE, and that occurs when
all of the elements inside of this movie
| | 01:52 | clip are drawn and ready to access using
ActionScript or run a method called init.
| | 01:58 | Now we'll define the init method as
public. So public function init and for the
| | 02:07 | parameter it's going to receive an
event with the data type of event and in
| | 02:10 | case you want to run this anywhere else,
put this initialize that to be null.
| | 02:14 | So that you can run this as a regular
method without an event needing to take
| | 02:18 | place, :void, so no return data.
| | 02:22 | And inside of the init method loop
through all through all the children and set
| | 02:27 | the list item and button properties. So
create a for loop, for(var i:uint = 0;
| | 02:34 | i < numChildren; i++). As the first
order of business in the loop, create the
| | 02:47 | skeleton of an if statement and
check to see if(getChildAt(i) is list).
| | 02:57 | So if it's a list then what we'll do
is just set the value for that list
| | 03:01 | property. So list = List(getChildAt(i)).
| | 03:11 | Remember getChildAt returns a
display object and this right here, List,
| | 03:18 | basically tells Flash to treat that
display object as a list so that the Flash
| | 03:22 | doesn't throw any errors. So right
below that if statement, create another if
| | 03:28 | statement. And we want to see
if(getChildAt(i)) is a BasicButton.
| | 03:33 | So if(getChildAt(i) is BasicButton).
Then we are going to set the value of
| | 03:41 | button. So button = and of course we
have type cast again, because getChildAt
| | 03:46 | returns a display object. So button =
BasicButton(getChildAt(i)). Then we'll
| | 03:57 | set the auto size property for the button.
| | 03:59 | So button.label_txt. That's instance
name of the label inside of the button,
| | 04:04 | button.label_txt.autoSize =
TextFieldAutoSize.NONE. So no auto-sizing for the
| | 04:18 | textField. This is always going to be
the width of the button. Now we'll set
| | 04:21 | the label for the button.
| | 04:23 | So button.label = "Choose..." to
indicate that the person should choose an
| | 04:33 | option from the dropdown menu and then
arrow_mc. Remember that's the name of
| | 04:39 | the arrow for the dropdown menu, so
we are just going to position it to the
| | 04:42 | right edge of the button.
| | 04:43 | So arrow_mc.x = button.width - arrow_mc.
width and then below our loop add just
| | 04:56 | a little bit more code to this method.
And all we are going to do is set up the
| | 04:59 | mask. So list.y = button.height - list.
height, so we are aligning the bottom
| | 05:09 | edge of the list with the
bottom edge of the button.
| | 05:11 | Then we are going to subtract
buttonSpace. Now this buttonSpace property will
| | 05:17 | allow us to control any spacing that
we may want in between the list and the
| | 05:25 | button. The reason why I added this is
because when I created this I had a few
| | 05:30 | spacing issues with the button and the
list and so by adding this property I
| | 05:36 | could control that as much as I wanted.
| | 05:38 | So here you may or may not need to set
a value for buttonSpace. You may just
| | 05:45 | have buttonSpace to be zero. But by
having it here we can control space between
| | 05:49 | the list and a button. Next we'll set
listMask = new Sprite and add it to the
| | 05:57 | stage. So addChild(listMask).
| | 06:01 | Next, we'll draw a rectangle. So
listMask.graphics.beginFill, black, so
| | 06:11 | (0x000000,1). It's a black rectangle
so we could see it, in case it doesn't
| | 06:17 | work. Then listMask.graphics.drawRect
and in the parenthesis we would pass in
| | 06:26 | the x and y position which is going
to be 0 for the x and the y position is
| | 06:31 | going to be button.height - buttonSpace. So
it's going to align with a bottom of the button.
| | 06:39 | Again, buttonSpace is just buffer. Then
the width is going to be list.width and
| | 06:45 | the height of the rectangle is
going to be list.scrollbar.height.
| | 06:52 | Finally, we'll end that fill. So
listMask.graphics.endFill and then set the
| | 06:59 | mask. So list.mask = listMask.
| | 07:04 | All right, so that's kind of a lot but
we'll save the file and test it out just
| | 07:10 | to make sure everything is working
properly. So you should see the text aligned
| | 07:15 | to the left on the button, which it is.
Great. The arrows on the right. Nothing
| | 07:20 | happens when I Click the button, which is
okay. And the list is hidden by the mask.
| | 07:25 | So now we have successfully
initialized our dropdown menu.
| | Collapse this transcript |
| Finishing the Dropdown class| 00:00 | Now we'll finish our dropdown menu by
adding the animation of the list coming
| | 00:05 | down when you Click the button and by
firing off a CHANGE event when you select
| | 00:10 | a different item in the list.
| | 00:11 | So the first thing we'll do is scroll
down into the init method and for the
| | 00:18 | list, right inside of that if statement
where we check to see if getChildAt(i)
| | 00:22 | is a list and we set the value of the
list. We go right below there and add an
| | 00:26 | event listener to the list.
| | 00:27 | So list.addEventListener and event is
going to Event.CHANGE so that whenever a
| | 00:32 | different item in the list is
selected, we'll run a method called
| | 00:36 | toggleDropdown. This is going to,
basically, signal that the dropdown menu
| | 00:43 | should go up. So after the list comes
down, you Click an item in the list and
| | 00:47 | should go back up. So we're going to
run toggleDropdown and the other time we
| | 00:50 | want to run toggleDropdown is
when we Click the Dropdown button.
| | 00:54 | So, add an event listener to the
button in that if statement. We check to see
| | 01:00 | if getChildAt(i) is a BasicButton. So
at the very bottom of that if statement,
| | 01:04 | go in to add an event listener to the
button. So button.addEventListener and
| | 01:09 | the event is going to be MouseEvent.
Click, make sure to capitalize Click, and
| | 01:14 | again we'll run toggleDropdown.
| | 01:21 | So, right below the init method, we'll
define the toggleDropdown method. This
| | 01:26 | will be a private method. So, private
function toggleDropdown, receive an event
| | 01:34 | with a datatype of Event. And in case
we want to run it another time without
| | 01:41 | needing an Event, we'll set it equal to null.
| | 01:44 | So return datatype to void, some curly
braces, and now notice that the datatype
| | 01:49 | here for the event is Event, and I'm
using it for a MouseEvent and Event
| | 01:56 | datatype as well. Now the reason why
that works is because the MouseEvent class
| | 02:00 | extends the Event class. So, because
MouseEvent is subclass of Event, I can use
| | 02:06 | the generic Event datatype here.
| | 02:10 | So all Event classes that are not
Event like TimerEvent, MouseEvent etc,
| | 02:15 | are all subclasses of the Event class.
So, pretty much in every Event handle
| | 02:20 | that you can create, you can basically
have the Event datatype set to Event and
| | 02:25 | will still work properly.
| | 02:26 | So in our toggleDropdown, the first
thing we're going to do is bring the
| | 02:29 | dropdown menu to the front, because
you definitely want that list coming down
| | 02:34 | to be in front of every other object.
So, just to be sure, we're going to run
| | 02:39 | parent.addChild, passing in this.
So I'll bring that list in front of
| | 02:45 | everything by bringing this whole
dropdown menu in front of everything.
| | 02:49 | Next, we'll have an if statement.
We're going to check to see if the current
| | 02:53 | value has changed. If so, we're
going to fire off the CHANGE Event. So,
| | 02:59 | list.currentValue. So if there is a
current value for list and if the current
| | 03:05 | value of list, so list.currentValue is
not equal to the value of _currentValue.
| | 03:13 | So if there is a value for list and
that value is a new value, then we're going
| | 03:18 | to do as in the curly braces here.
| | 03:20 | So first we'll set the button label. So
button.label = list.currentValue. Then
| | 03:27 | _currentValue = list.currentValue.
Then we'll dispatch that CHANGE event. So,
| | 03:35 | dispatchEvent, create a new Event
object, and inside of the new event
| | 03:41 | constructor pass in Event.CHANGE.
| | 03:45 | Below the if statement, we're going to
make isDown. That's that property that
| | 03:50 | will identify whether or not the list
is down. We're going to make it equal to
| | 03:54 | its opposite. So isDown = !isDown. So
it's going to equal whatever it is not.
| | 04:04 | So if it's false, it will be equal to true
and if it's true, it will be equal to false.
| | 04:09 | Then what we'll do is check to see
if it is down or not. So if and in the
| | 04:14 | parenthesis, check to see if isDown
is true. If so, we're going to use
| | 04:19 | TweenLite to tween the list and here is
the syntax for that, TweenLite.to, and
| | 04:27 | in the parenthesis the first parameter
is the object to tween. So that's list.
| | 04:31 | Next is the time to tween, which
we'll put in, .25. That's in seconds. Then
| | 04:36 | next is an object, so some curly
braces, for shorthand notation.
| | 04:41 | This has a bunch of different
properties that we can pass in. The first one is
| | 04:45 | any tween-able property that we want.
So I want y to end up at button.height -
| | 04:54 | buttonSpace. So y:button.height -
buttonSpace. The next property I'm going to
| | 05:02 | put in is what to do or what
function to run when the tween updates.
| | 05:08 | So, for that you just set the onUpdate
property. So, onUpdate : resetMask. So
| | 05:15 | as the tween is updated, we're going
to run a method called resetMask, which
| | 05:18 | we'll define later. And again,
remember that whenever you're working with an
| | 05:21 | animated mask or you move a mask around,
you need to reset the mask. So that's
| | 05:28 | why we're doing that here.
| | 05:29 | I'm just going to copy and paste this
if statement for the else statement and
| | 05:34 | change the if to an else, so no
parenthesis after that. Then change the value
| | 05:41 | of the y property to button.height -
list.scrollbar.height. So here, if isDown,
| | 05:48 | then the TweenLite is going to tween
the list all the way down to where it
| | 05:53 | should be. So it's going to reveal the
list. And if not, this is going to hide
| | 05:57 | the list, it's going to make it go up.
So the button height minus the height of
| | 06:01 | the scrollbar of the list will make the
list slide back up into its original position.
| | 06:06 | So, now let's define resetMask. So
we'll do that right below the method we just
| | 06:13 | defined. So private function resetMask,
no parameters, :void, and all we're
| | 06:20 | going to do in here is just reset
the mask. So list.mask = listMask.
| | 06:29 | Then one last thing we've got to do
is create the public version of our
| | 06:33 | currentValue property. So, all you do
to create a public version of that is
| | 06:40 | create the Get method. We're not going
to create a Set method because we only
| | 06:43 | want it set by selecting an item
in the list. So, public function get
| | 06:48 | currentValue returns a String, some
curly braces, and we're just going to
| | 06:55 | return _currentValue.
| | 06:58 | So that's it for this class, we're
just going to need to add a little bit of
| | 07:02 | code inside of the FLA file, and
we're ready to test. So save the file, go
| | 07:10 | inside of your dropdown menu. In the
FLA, select the first keyframe in the
| | 07:15 | actions layer and open up the Actions
panel and we'll put in addEventListener
| | 07:21 | and the Event will be Event.CHANGE.
Then I'll run a method called checkChange.
| | 07:28 | Define that function here, function
checkChange, receives an event with a
| | 07:33 | datatype of Event. And in here,
we'll simply trace currentValue.
| | 07:40 | So we'll test the movie, and notice
that the Choose is in the right place,
| | 07:45 | arrow is in the right place. I Click
the dropdown menu. The list slides down.
| | 07:49 | And then I can Click the arrows to
navigate to the list items. If I select one
| | 07:54 | of the list items, the label on the
button updates as well as the Output window.
| | 07:58 | You will also notice that I have
this little bit of hanging down of the
| | 08:04 | scrollbar below the button. Now
that problem is coming because of the
| | 08:08 | buttonSpace. Like I mentioned in an
earlier movie, that buttonSpace may or may
| | 08:13 | not be necessary. It just gives you
the option to add padding for the button.
| | 08:18 | So let's go back to Dropdown.as and
change that buttonSpace Number to 0. So
| | 08:24 | change that, save the file and then
test the movie. Click to bring the dropdown
| | 08:32 | down and then up again and the list is
showing and hiding properly. So again
| | 08:37 | that buttonSpace property is there
for you to use or to not use. You can
| | 08:42 | control the space between
the list and the button.
| | 08:45 | With that our dropdown menu is complete.
So to recap, we're created a dropdown
| | 08:51 | menu, which is basically a button that
controls showing and hiding of a list.
| | 08:57 | To show and hide the list, we used a
mask and TweenLite for the animation.
| | Collapse this transcript |
|
|
9. Using UI ElementsViewing a simple form application| 00:00 | In this chapter we're going to look
at some examples of using the user
| | 00:03 | interface elements that we built
throughout this title. The first thing I want
| | 00:07 | to show you is a form that I created
using a good amount of these elements. On
| | 00:12 | the stage here I have a form. It's
all in a movie clip called Form and if I
| | 00:17 | Double-Click that movie clip you'll see
that it has encapsulated code and artwork.
| | 00:22 | So I have Name and Email, Static text
fields and then Input text fields called
| | 00:28 | name_txt and email_txt to accept that
information. I have a Static text field
| | 00:34 | called Contact Options and then I
have some Checkboxes, cb1_mc and cb2_mc.
| | 00:42 | These label values are set with codes.
So we'll look at them in just a minute.
| | 00:46 | And we have a RadioGroup. If I double
-Click that element we can enter its
| | 00:49 | timeline to see what's in there. So
there is a dynamic text field called
| | 00:53 | title_txt and there is a bunch of Radio
buttons r1_mc, r2_mc, r3_mc and r4_mc.
| | 01:01 | And if you look at the code here,
pretty straightforward. I'm just setting
| | 01:08 | labels for all the RadioButtons. Back
to the form, because we have a text field
| | 01:12 | says Message. It's a Static text field,
TextArea element called message_txt and
| | 01:18 | finally a button called submit_txt. This is
the same button that we created in this title.
| | 01:24 | Let's go to the first keyframe of the
Actions layer and open up the Actions
| | 01:28 | panel and the first thing you'll see
is the sendForm function. Let's scroll
| | 01:32 | down to the bottom though and look at
some initial values that are set. So we
| | 01:36 | are setting labels for the
checkboxes and for the submit button.
| | 01:40 | So if you test movie you can see what
those look like. So you have the checkbox
| | 01:43 | labels, the radio labels and the Submit
button. Pretty straightforward and then
| | 01:49 | we have addEventListener line of code,
addEventListener to the submit button,
| | 01:55 | running a function called the sendForm.
| | 01:56 | So now just see the sendForm function.
Now this may look pretty intimidating
| | 02:01 | but I promise it's not as crazy as it
looks. So the first thing here we have a
| | 02:06 | variable called request. It's holding
an urlRequest and to just do a simple
| | 02:10 | example I have this fake email address
here and I'm using the mailto send the
| | 02:15 | email. So this will just open up the
person's default email program when they
| | 02:19 | Click the send button.
| | 02:20 | Of course you could have this to be
some sort of url where you can send all the
| | 02:25 | form data to and you could process the
form and send an email without having to
| | 02:31 | open the person's email program. If
you want to know more information about
| | 02:34 | that you're going to have to use a
different programming language something like PHP.
| | 02:39 | So if you're going to use PHP I
recommend looking up the PHP mail function
| | 02:45 | there you can find information about
how to send an email with PHP. Other than
| | 02:50 | that, the concept is to me pretty much
the same here, sending data to another url.
| | 02:55 | So on the next line we have a
variable called vars to new instance of the
| | 02:59 | urlVariables class and these are
form variables. So you can add different
| | 03:03 | values at the end of url and by using
urlVariable class the data automatically gets url encoded.
| | 03:09 | So you don't have to do that manually.
So that's pretty convenient. So here we
| | 03:13 | have the body property of vars being set.
Now the body property is significant.
| | 03:19 | It's part of the mailto protocol. When
we use the body property, what happens
| | 03:24 | is the text that you put in there goes
into the body of the email. So here is
| | 03:29 | the body of email basically.
Everything is connected to vars.body.
| | 03:32 | It says "Here is a form you received
from", and then it appends name_txt.text,
| | 03:38 | < sign, person's email,, sign, and
then a colon, some new lines. So that's
| | 03:46 | what \n, it's a new line operator,
then adding on a whole bunch of little
| | 03:51 | hyphens and some new lines. This is
basically a separator. This is just all
| | 03:56 | arbitrary stuff that I did
just for this particular email.
| | 04:00 | So the thing that you really need to
do is just to define a body. Then we have
| | 04:04 | appended on the message from the
textField that's the TextArea and then
| | 04:09 | another dividing line and then the
checkbox label and checkboxes isSelected. So
| | 04:15 | we'll say Contact me by phone :
true or Contact me by email : false or
| | 04:21 | whatever. And then for the subject to the
email, see that subject property on vars.
| | 04:27 | When you add the subject to
urlVariables, it's a part of the mailto protocol
| | 04:32 | and that sets whatever you put in there
as the subject to the email. So that's
| | 04:35 | going to be whatever of the RadioGroup
label is. And then here we have req.data
| | 04:42 | = vars. So we're connecting the
urlRequest and the urlVariables there and
| | 04:48 | navigate to url _self.
| | 04:50 | So this won't send the email but it
will open up the person's default email
| | 04:54 | program and the body of the email will
be whatever we put in the body which is
| | 04:59 | the code I have highlighted here.
Subject to the email will be what we have
| | 05:03 | here highlighted, the vars subject
property, and the email address it's going
| | 05:09 | to as whatever we have after
mailto when we define the urlRequest.
| | 05:13 | So there is a simple example of a
form that you could create using the user
| | 05:17 | interface elements that
we created in this title.
| | Collapse this transcript |
| Skinning UI elements| 00:00 | Now that you have created the
interactivity for these user interface elements,
| | 00:05 | remember that you could always
swap out the artwork to make them look
| | 00:09 | different. So you can not only change
fonts and font sizes but you can actually
| | 00:13 | change the look of all of
the elements very easily.
| | 00:17 | In this movie we'll take a look at how
to customize the checkbox element that
| | 00:21 | we created. So the first thing I'm
going to do is zoom in on one of the
| | 00:25 | checkboxes. And I'm going to Double-
Click that checkbox to enter its timeline.
| | 00:31 | So remember we have to the selected
checkbox and the unselected checkbox.
| | 00:35 | What I'm going to do is hide the
selected checkbox and then Double-Click the
| | 00:39 | unselected box to enter its timeline.
The first thing I'm going to do inside of
| | 00:43 | here is I'm going to set
this layer to be a guide.
| | 00:46 | So I'm going to Right-Click that layer
and choose Guide. That way we won't see
| | 00:50 | it when we test the movie, but we can
use it as a guide when we are developing
| | 00:55 | our new box. So create a new layer and
in that new layer draw some artwork. So
| | 01:01 | I'm just going to draw a new box. So I
have a light gray background like so.
| | 01:10 | Maybe that Stroke is a little big, so I
select the Stroke and bring it down to 1.
| | 01:13 | Looks a little bit better, and then
I'm going to jump back to the Checkbox
| | 01:21 | movie clip. Hide the
unselected box, show the selected box.
| | 01:26 | I will Double-Click the selected box
to enter its timeline, again, I'll turn
| | 01:30 | layer 1 into a Guide, create a new
layer on the new layer. I'll draw another
| | 01:37 | box and now I'll use the Pencil tool
with this slightly larger Stroke. Let's go
| | 01:46 | for around 3 or 4 and then I'll draw
an x inside of the box. Be kind of rough
| | 01:53 | there and then I'll test the
movie and we have the new checkboxes.
| | 02:01 | Note that the label for the checkboxes
has disappeared because that's a default
| | 02:05 | behavior for the label if you don't
define a label. So I have easily customized
| | 02:13 | our checkboxes and you can do that with
all of the user interface elements that
| | 02:18 | we created just swap out the movie
clip symbols and you have a completely new
| | 02:23 | skin while preserving the same interactivity.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, my friend, we have reached the
end of this title. Just to recap on what
| | 00:05 | you learned we created a scrollbar,
we connected that to our own custom text
| | 00:10 | box that had powerful scaling
capabilities, we looked at creating user
| | 00:15 | interface checkboxes, radio
buttons, all from scratch.
| | 00:20 | Then we looked at an example 4
application that you can create using those
| | 00:25 | exact same user interface elements. We
also looked at how you can skin those
| | 00:30 | elements to customize their look and
feel. So I hope you had a fun time in this
| | 00:34 | title and learned a lot because I
sure did. I'll see you next time.
| | Collapse this transcript |
|
|
