IntroductionWelcome| 00:00 | >> Hi, I'm Shane Rebenschield and welcome
to Flash Professional 8, Beyond the Basics.
| | 00:04 | In this video training title, you're going to be learning
intermediate to advanced level flash action scripting
| | 00:10 | and the context of building a fully functional flash 8 website.
| | 00:14 | I'm not going to keep you around here
any longer, let's just get straight to it.
| | Collapse this transcript |
|
|
1. What You Should KnowExercise files| 00:01 | >>For those of you that have premium subscriptions to the Lynda.com
movie library, or who have purchased a CD ROM for this particular title,
| | 00:09 | there are exercise files associated with this title
that you're gonna want to copy onto your computer.
| | 00:14 | On the CD ROM or, again, if you're a premium subscriber, make sure that
you get access to those exercise files and copy them to your desktop.
| | 00:23 | Now if you're on Windows, you might also need to
right click, or Control, Click on that LA Eyeworks
| | 00:28 | folder that contains those exercise files, and
choose from that contextual menu "Properties."
| | 00:34 | Under "Attributes" make sure that "Read
Only" is unchecked, and then click "Apply."
| | 00:40 | You want to make sure that you apply these changes to
the folder, subfolder, and files, and click "OK."
| | 00:46 | That way as you open, work with, and save those files inside that
folder, you won't encounter any errors, and then just click "OK."
| | 00:54 | If you do not have access to those exercise files and would like
to get them, you can either purchase the CD ROM for this title,
| | 01:01 | or at MovieLibrary.Lynda.com, which you may be accessing
this video title through. You want to make sure that you sign
| | 01:08 | up for the premium subscription so that
you can get access to those exercise files.
| | 01:13 | Now if you don't have access to those exercise files and don't want
to sign up for the premium subscription or purchase the CD ROM,
| | 01:20 | as we encounter exercises that require those exercise files,
I'll do my best to explain for those of you who don't have access
| | 01:27 | to the exercise files, what we're about to do
and how you can work with those particular files.
| | 01:33 | Unfortunately because of the complexity of some of the topics that we're
gonna be discussing in this title, again because it is an intermediate
| | 01:40 | to advanced level title, there are some occasions where some of the
provided files might be a little difficult for you to reconstruct.
| | 01:47 | But again, as we come across that content I'll make sure that for those
of you who don't have access to the exercise files are aware of that.
| | Collapse this transcript |
| Things you should know| 00:01 | >>Before you make the pretty heavy commitment of
working though all the exercises in this title,
| | 00:06 | it's important that you understand first
what it is that you're getting into.
| | 00:09 | First, go to "MovieLibrary.Lynda.com," once you're
there click on the "Browse All Titles" link.
| | 00:20 | From there scroll down to the "Macromedia" offerings, and then
under "Flash," click on "Flash Professional 8 Essential Training."
| | 00:31 | Look through this list and make sure that you
understand everything that's covered in this title.
| | 00:37 | As you can see it covers topics such as the Interface, Drawing and
Color, Animating Essentials, Dealing with Shape tweens and Motion tweens.
| | 00:46 | Working with the Library, Timeline Effects, Masking, Working
with text inside of Flash, Bitmap graphics, Filters, Buttons.
| | 00:56 | Working with Movie Clips, How to use simple action scripts such as
getURL, Stop, and Play, Creating pop up menus, and the Scrolling Text.
| | 01:05 | Loading JPEG's, GIF's and PNG's, Building a Preloader, Working with
Components, as well as Sound and Video, and even Publishing your document.
| | 01:15 | Make sure you understand first all of the topics
that are covered in the essential training title,
| | 01:21 | because that is going to be expected as
the base amount of knowledge that you have.
| | 01:26 | If you don't know all of those items, or if you feel like you're
a little bit sketchy on some of them, it might pay to go back
| | 01:32 | and look at the Flash 8 Essential Training title to brush up,
| | 01:35 | either on the topics that you're a little fuzzy
with, or to learn ones that you don't know.
| | 01:40 | That way as you go into the intermediate Flash 8 title, you have
a really good, strong understanding of those basic elements.
| | 01:47 | So that as you work forward everything should make a lot more sense to you.
| | Collapse this transcript |
| New features| 00:01 | >>If you're migrating from Flash MX 2004, or an earlier version, into Flash
8, it's probably also important that you learn a lot of the new features
| | 00:09 | that are available for your use now here inside of Flash 8.
| | 00:13 | Instead of rattling off all those individual features, I'd recommend
looking at www.macromedia.com/software/flash/flashpro/productinfo/features.
| | 00:26 | At this URL it has a little video introduction that lists a
lot of the new features that are available inside of Flash 8.
| | 00:39 | And then if you scroll down there's also a
breakdown of each item that is new inside of Flash 8.
| | 00:45 | There's new filters, blend modes, a new way of rendering type
inside of Flash, which is really nice, called Flash Type.
| | 00:52 | Features like Bitmap caching, custom easing control when you're
dealing with Motion and Shape tweens, improved Text tool,
| | 00:59 | Stroke properties. One of the big things is video inside of Flash.
[00:01:03.736
A brand new Kodak has been introduced called the "On2 VP6 Video Kodak."
| | 01:08 | It also has support for alpha channel, so you can have
video with alpha channels inside of your flash content.
| | 01:15 | And there's also embedded cue points that you can introduce into
your video so you can actually add cue points to your video content
| | 01:23 | and then have different functions trigger when those
cue points are reached for extra interactivity.
| | 01:29 | It also has a new method of working with action script, which
is actually a repurpose of an old method called Script Assist,
| | 01:36 | which used to be called Normal Mode inside of Flash MX and prior.
| | 01:40 | There's also a new method of working with the
Library, an object drawing model, and so forth.
| | 01:46 | So there's actually a lot of new content, and then again,
rather than going over each of these items individually,
| | 01:52 | I would encourage you to go to this URL and read all
the various features that are new inside of Flash 8.
| | 01:57 | If you'd rather, you can also watch a title that I recorded that briefly
covers a lot of the new features that are available inside of Flash 8
| | 02:05 | by going to the "MovieLibrary.Lynda.com" and then again if you go to
browse "All Titles," if you're a member of the Movie Library you can scroll
| | 02:16 | down to the Flash section and go to Flash Professional 8, New Features.
| | 02:20 | Where again, it briefly covers a lot of the new features
that are available for your use inside of Flash 8.
| | 02:26 | So if you're upgrading from a previous version of Flash, and now
working with Flash 8, you should probably take a little bit of time
| | 02:32 | to familiarize yourself with a lot of these new features.
| | Collapse this transcript |
| Updating Flash| 00:01 | >>One other item to check before you start going through the exercises
in this video title, is to make sure that you have the latest version
| | 00:08 | of the Flash plug-in, as well as the latest,
if any updates, to Flash itself.
| | 00:14 | In your web browser, navigate to www.macromedia.com/software/flashplayer.
| | 00:24 | From here you can get the latest version of Flash Player 8.
| | 00:27 | Now when you install Flash 8, it automatically asks you, and should
have installed Flash 8 for you, but if there have been any updates
| | 00:35 | since the time you installed Flash 8, to the time you're going through this
title, you can download those latest updates to the Flash plug-in by going
| | 00:43 | to this URL and clicking on the "Download Now" button to get the
latest version of the Flash Player, and I'd recommend that you go do
| | 00:50 | that before you get started with the rest of the exercises in this title.
| | 00:54 | Additionally, if there are any updates to Flash itself, you should
see that listed on the front page of MacroMedia.com on their website,
| | 01:02 | or inside of Flash if you have the Start page open. In the bottom right
| | 01:07 | of the Start page it usually notifies you
if there are any updates to Flash itself.
| | 01:12 | At the time of recording this title there
are no updates available for Flash 8.
| | 01:17 | But again, if there are any by the time you view this title,
| | 01:20 | it should tell you here inside the Flash 8 Start
page, or on the front page of MacroMedia.com.
| | 01:27 | So again, before you get started make sure you have
the update to the latest version of the Flash Player
| | 01:32 | for your web browsers, as well as for Flash 8 itself.
| | Collapse this transcript |
| Sample site tour| 00:01 | >>Before you get started let's take a quick tour of the site that
you're going to be building throughout this training tutorial.
| | 00:08 | Open up your preferred web browser and navigate
to the URL: www.lynda.com/intflash8/laeyeworks.
| | 00:19 | When you go to that URL you'll see the website load.
| | 00:24 | In the middle of the page is a splash screen that
is animated and it loops over and over again.
| | 00:30 | Up at the top is a Navigation bar, allowing the viewer to
navigate to "About Us," "Frames," "Locations," and "Contact Us."
| | 00:47 | Go ahead and click the "About Us" option.
| | 00:50 | When you do that you'll see some text that loads on the stage.
| | 00:53 | Additionally, if the viewer has access to a submenu
for this section that allows them to view information
| | 00:59 | about the history of LA Eyeworks, or the staff of LA Eyeworks.
| | 01:03 | Now the text that you see here up here on the stage,
is actually loaded in dynamically using action script,
| | 01:10 | and the text that appears there is external to the Flash file itself.
| | 01:15 | All of this text actually resides in a separate text file,
and by using action script that text is dynamically loaded in
| | 01:22 | and placed inside of a text field here on the stage.
| | 01:26 | Additionally, the text is formatted using HTML tags and then styled,
such as these hyperlinks here that have a roll over state to them,
| | 01:35 | as well as the bolded text, is all done using cascading style sheets.
| | 01:40 | The cascading style sheets itself is also external to flash.
| | 01:45 | It's a separate .css file that is loaded in, dynamically
using action script, and applied to this text here.
| | 01:53 | The viewer can also click on some buttons to
scroll both down and up through that text.
| | 01:59 | By selecting the "Our Staff" option, you
can see that there's the same dynamic text,
| | 02:04 | but inline embedded inside of that text are some animated swift files.
| | 02:10 | Next, go ahead and click on the "Frames"
option from the Menu bar at the top.
| | 02:18 | What you will essentially see is a slide show of frames
that the viewer can look at available at the LA Eyeworks store.
| | 02:25 | By clicking on the "Next" or "Back" buttons, the viewer can navigate
both forward and backward through the slides in the slide show.
| | 02:32 | You'll also notice as you flip through the various
slides, that the information to the left hand side
| | 02:38 | of each image also updates as you navigate through the images.
| | 02:43 | Additionally, beneath the image, it also updates to show you
which frame style you're looking at, and how many there are total.
| | 02:51 | Pretty much everything that you see here on this section is dynamic.
| | 02:55 | The images, which are actually separate JPEG files,
are loaded in dynamically using Action Script.
| | 03:01 | The descriptive information that you see to the left hand
side of the image is also dynamically loaded, and styled,
| | 03:07 | and formatted using Action Script, HTML, and Cascading Style Sheets.
| | 03:12 | Underneath the image where it specifies which image you're looking
at, and how many there are total, is also Action Script driven.
| | 03:21 | Next click on the "Contact Us" option from the top Navigation bar.
| | 03:25 | When you do that you'll see a Feedback form appear here on the stage.
| | 03:29 | If you click inside the "Name" file and type your name, you'll notice
that the text that appears inside of these form fields is styled.
| | 03:40 | Not only is it using a specific font, but it's
also using a specific font size and color as well.
| | 03:47 | You'll also notice that the text that appears
inside of there looks nice and smooth.
| | 03:51 | That's because it's anti-aliased, it has
a nice smoothed edge around the outside.
| | 03:56 | When the viewer has completely filled out that form, they can then
click on the Submit button to send those results to the web server,
| | 04:03 | where a CGI then processes those results, and then
emails them to the email address that you can specify.
| | 04:10 | So that, in essence, is essentially the website that you're
going to be constructing throughout this training tutorial.
| | 04:16 | There's quite a lot of stuff to cover, so even though on
the surface it may look pretty easy and simple to set up,
| | 04:22 | you're going to be learning intermediate to advanced level Action
Script in order to program all the elements that you've seen here.
| | 04:29 | There's a lot of stuff to cover, but it's a lot of fun.
| | 04:32 | So go ahead and get that cup of coffee, or do jumping jacks, or
whatever you need to do, and continue on to the next chapter.
| | Collapse this transcript |
|
|
2. Where Do I Start?The site construction process| 00:01 | >>As you go forward and begin to develop
websites for yourself or for a client,
| | 00:06 | it's important that you have at least a basic
understanding of the site construction process.
| | 00:11 | Now keep in mind, as I go through these points, that the site
construction process is really a sort of a subjective thing.
| | 00:17 | It's not something that is the same for everybody that develops websites.
| | 00:21 | It's going to change depending upon your style of developing websites
and building them, as well as the people that you'll be working with.
| | 00:28 | So just keep that in mind as we go through the following points,
| | 00:31 | and that this is mainly just to give you a good
starting place as you go to develop your own content.
| | 00:37 | The first step in the site construction process,
and the process of taking a site from the idea phase
| | 00:43 | to the final phase is - "what is the content that you have to work with?"
| | 00:48 | In the case of the LA Eyeworks website, I know that I had some
information about the company, the history of the company for example,
| | 00:55 | the staff that worked there. I also wanted to display
some information about the glasses frames that they sold.
| | 01:01 | I also knew that I had a video to work with, as well as some audio.
| | 01:06 | So I knew from the get go the basis of the content that I had to work with.
| | 01:10 | Once you have a decent understanding of what you have to work
with, the next step is to figure out who is the target audience.
| | 01:18 | The target audience is who is going to be viewing your content.
| | 01:21 | And that's really one of the most important parts
of the early phases of developing a website.
| | 01:26 | You need to figure out who is going to be looking
at the stuff that you're going to be designing.
| | 01:31 | It's really important, because depending upon who is going
to be visiting your website and the stuff that you design,
| | 01:36 | it's going to have a large effect on whether
or not you're using Flash altogether.
| | 01:41 | What kind of colors you use, what kind of type you use, and so forth.
| | 01:44 | For example, if you're designing a website that is mostly going to
be visited by elderly people, you don't want to have real small type
| | 01:51 | on your website, because it's going to be more difficult
to read. You'd want us use larger type in that case.
| | 01:56 | And that's just one example of how the target audience really has
a heavy bearing on how your website is both designed and developed,
| | 02:03 | as well as what type of technology is appropriate to use.
| | 02:06 | In the case of the LA Eyeworks website, our target audience is people
| | 02:10 | who would most likely buy LA Eyeworks
frames, and buy those particular glasses.
| | 02:16 | More than likely those are people who live in the LA area.
| | 02:19 | So we know that they probably have a high-speed internet
connection, and they probably have a newer computer,
| | 02:25 | because those are the types of people that visit the LA Eyeworks store.
| | 02:29 | So that is going to be our target audience.
| | 02:31 | Now because we know they have a high-speed internet
connection, and because they probably have a newer computer,
| | 02:36 | we know for sure that we can use Flash, because that
is appropriate for that particular target audience.
| | 02:41 | Not only that, but we know we can also get away with having more in
the site, such as rich media, like MP3 files and video, because again,
| | 02:50 | they're on a high speed internet connection, so having a lot of
media in the site is appropriate because the viewer can download
| | 02:57 | that appropriately on their high speed internet connection.
| | 02:59 | So again, once we know who the target audience is, we can better craft
and develop this site specifically for that particular target audience.
| | 03:09 | Once you have an idea of what the content is, and you know
who you're going to be developing and showing that content to,
| | 03:15 | the next stop is to start with the layout and design.
| | 03:19 | In particular, starting with a flowchart is a good place to begin
working with developing the layout and the design of the site.
| | 03:27 | Now as it name implies, a flowchart is a
chart that depicts the flow of the website.
| | 03:32 | How is the viewer going to navigate through your website?
| | 03:35 | Now flowcharts come in a variety of different forms.
| | 03:38 | One of those is as you see here, which is basically just
a chart that shows all the main elements of your website.
| | 03:45 | For example, up at the top you can see
that the main file is "master.swf."
| | 03:50 | The "master.swf," as you'll see in the next chapter, is sort of
the main Flash SWF file that all the other content loads into.
| | 03:57 | That's where, as you can see again here in the flowchart, where
the splash page, the main menu, and the MP3 player are presented.
| | 04:05 | That's the first section that the viewer is going to see.
| | 04:08 | Oftentimes that is called tier 1, the first section
that your visitors to your website will be presented with.
| | 04:15 | From the main menu, the viewer can then navigate
to the "About Us," "Frames," "Locations,"
| | 04:21 | and "Contact Us" sections, and that is depicted here in this flowchart.
| | 04:26 | Now the lines and arrows depicted in this flowchart also
show how the viewer can navigate from section to section.
| | 04:32 | So you can see that the main menu is being presented in "master.swf"
and from the main menu the viewer can navigate to that second tier section.
| | 04:40 | Which is "About Us," "Frames," "Locations," and "Contact Us."
| | 04:44 | So the layout of the flowchart, as well as the lines and
arrows, depict not only the structure of the site, but as well,
| | 04:51 | how the viewer is going to flow, or navigate
through the various sections of your site.
| | 04:57 | So the flowchart is a really important part
of the layout and design process of the site,
| | 05:02 | because it gives you a really good understanding before
you even start figuring out the design of it all.
| | 05:07 | How the viewer is going to be navigating around your content.
| | 05:11 | The next step is to storyboard.
| | 05:14 | Now this is a term that is actually taken from movies, but
it also fits well here when you're developing a website.
| | 05:20 | Now the storyboard is where you get a little bit more
specific as to each individual section of the website.
| | 05:27 | Now for example, you can see here that this is a
storyboard of the very first main page of the website.
| | 05:34 | Now as you can see here, this is just a simple sketch of the main page.
| | 05:38 | A storyboard can be something simple like this, or it can be more refined
and cleaned up in another graphics editing program of your choice.
| | 05:46 | Either way, the main purpose of a storyboard is to get more
specific with how each page is being presented in your site.
| | 05:52 | Again, you don't have to draw every single graphic, but the main
purpose of a storyboard is to begin to show where the various elements
| | 06:00 | in each page of your website are going to be presented at.
| | 06:03 | The purpose of all these steps before you actually get in there
and start designing every little nook and cranny of the website,
| | 06:10 | is to get a lot of the elements figured out before you start
spending the time with all the details that make up the website.
| | 06:17 | The site construction process is sort of like an oil painting. You
start from the very general and work your way to the very specific.
| | 06:24 | That way as you're developing your own
work, and even showing that to the client,
| | 06:29 | a lot of the broad concepts can be ironed out as you work more specific.
| | 06:35 | So in the end you're left with a well-designed website.
| | 06:38 | The storyboard is another element in that process.
| | 06:42 | Now from here, an optional step that you can
go to is something called a static mock-up.
| | 06:46 | And that would be more like a more refined storyboard, where
instead of just a simple sketch, maybe you've gone in there
| | 06:53 | and put in some of the basic layout elements of the website.
| | 06:57 | You can put in squares where graphics
might be and where text might be presented,
| | 07:01 | but the point is to get a little bit more specific past the
storyboard phase, so you're getting yet an even clearer idea
| | 07:08 | with how each page is going to be laid out
and ordered. Again, that's an option step.
| | 07:13 | From there you can get even more specific and
start working on the actual design of each section.
| | 07:19 | So that is where you'd start going in, laying out your
colors, laying out where all the graphics are going to be,
| | 07:24 | where the text is going to be presented, video, music, and so forth.
| | 07:28 | Now once you've done all those various steps, by this
point you should have a really good understanding
| | 07:33 | with how the whole website looks, and
how each page is going to be presented.
| | 07:38 | Then once you've done that, you can most likely jump right in and
start working on the development and implementation of the website.
| | 07:44 | So it's at this point that you'd most likely make the transition from
working in any old graphic editing program, PhotoShop, Illustrator,
| | 07:51 | Freehand, Fireworks, and so forth, whichever you're
comfortable with, and making the leap into Flash.
| | 07:57 | You can then start working on laying out the navigation.
| | 08:00 | Now the reason why I put that toward the top of the development and
implementation phase, the navigation is how the viewer is going to go
| | 08:07 | to each section of your website, so it's a really
important key part of the website as a whole.
| | 08:13 | Once you figure out the navigation, and how that's going to be presented
and ordered, it's going to give you as a designer and developer,
| | 08:20 | a much better idea of how much space you have
left to work with to present that information.
| | 08:25 | So figuring out the navigation is a key part as you
start developing and designing the actual website itself.
| | 08:33 | Once you've decided on the navigation, then you can
start designing and implementing the main content,
| | 08:39 | as well as the content that comes underneath that, sometimes
called the tertiary content, or tier 2, tier 3 content.
| | 08:45 | So you get the navigation figured out, then you can start working
on, in Flash, designing and laying out, and actually implementing
| | 08:53 | and programming all of the interactivity, laying
out all the content, and so forth for your website.
| | 08:58 | Once you get that all laid out, then you can actually start linking
all the various pieces together by making the navigation interactive.
| | 09:06 | So you can take your navigational elements
that you laid out in the first part of phase 3,
| | 09:11 | and actually link those so that they load
in or go to your tertiary content.
| | 09:16 | So the whole thing starts to get interactive.
| | 09:19 | This is one of the last phases of the development and implementation
phase, because this is where you start to see all the pieces come together.
| | 09:27 | Up until this point you've probably worked on each individual section
of the website, but the last phase is to link them all together,
| | 09:34 | and this is where it all comes together into one cohesive website.
| | 09:38 | The last step, but certainly not least,
is to deploy and upload your website.
| | 09:43 | So you would take everything that you've been developing on your
computer and up load it to your website so you can test it there.
| | 09:49 | Now this may seem like a minor sort of phase, but it actually
is really important, because up until this point, again,
| | 09:56 | you've been testing your work off of your local computer.
| | 09:59 | Now when you take that same content and upload it to your website, and
you view that content as it is being downloaded off of a web server,
| | 10:07 | it can change into something complexly different. Because again,
| | 10:11 | as you're viewing your content locally, it's
loading off of your hard drive instantly.
| | 10:15 | So anytime you're loading text into your Flash project, or
movies, or video, or audio, it's all loading in instantly.
| | 10:22 | Depending upon the way that you've developed your site, Flash
can be pretty sensitive as to when things are loading in,
| | 10:28 | if they're loading in before something else, and so forth.
| | 10:31 | So when you actually upload your website to a web server and you're
viewing it over the internet, things are loading in a different times
| | 10:39 | and that can have a major affect as to
how the website functions as a whole.
| | 10:43 | So once you've gotten your website finished, it's a
really important process to upload it to your website
| | 10:49 | and make sure that you test it there as it is being downloaded.
| | 10:53 | Not only that, but it's also important to try to test it
on a variety of different computers, operating systems,
| | 10:59 | internet speeds, and so forth, from different locations if possible.
| | 11:03 | That way you have a much better idea as to what the end user
that is actually going to be visiting your website will see.
| | 11:10 | Then you can make fine-tuning adjustments based on what you've seen,
and how that website is being downloaded off of the web server.
| | 11:17 | So even though it may seem like a minor point,
the deployment and the uploading of your website,
| | 11:22 | it is actually a very important element
in the whole site construction process.
| | 11:26 | Now again, keep in mind that the points I've mentioned
here are just suggestions as a place to start.
| | 11:32 | Most likely over time you will end up fine-tuning
these steps to better suit you or your team's methods.
| | Collapse this transcript |
| Installing the site font| 00:01 | >>Throughout the exercises in this video title, you'll also be working
with one particular font, and that one's called Bitstream Vera.
| | 00:09 | There are a few different variants involved in that font as
well, Bitstream Vera Sans Bold, Bold Italic, and so forth.
| | 00:16 | So it's important before you go much further, to make sure
that you have that particular font installed on your computer.
| | 00:23 | Now if you're a premium subscriber to the Movie Library,
or if you've purchased the CD ROM for this title,
| | 00:28 | in the exercise files that accompany that, if you open up the
"LA Eye Works" folder, then go into the "Resources" folder,
| | 00:37 | and into the "Font" folder, you'll see another folder that contains the
font face that we're going to use throughout the exercises in this title.
| | 00:44 | You can open that up, and then take those
fonts and install them on your computer.
| | 00:50 | On Mac OS10, you can take the whole folder and drag it
into your "Users" folder, into your "Library" folder,
| | 00:57 | and within a folder in there is another folder called "Fonts."
| | 01:01 | You can take this whole folder with the fonts
inside of it, and drag it into that "Fonts" folder.
| | 01:06 | It will then install those fonts in your computer.
| | 01:09 | You'll also need to make sure before you install the
fonts in your computer that you have Flash closed.
| | 01:15 | Because after you install the fonts you should be able to relaunch
Flash, and those fonts should then be available for your use.
| | 01:22 | Sometimes you also may need to restart your
computer for those fonts to be available for you.
| | 01:27 | On Windows, open up your "C" drive, open up the "Windows"
directory, and in there is another directory called "Fonts."
| | 01:39 | Inside of the "Font" directory that has been included with the
exercise files, open up that "TTF Bitstream Vera 1.10" folder.
| | 01:48 | Select the fonts within that folder, and then drag
them into the fonts folder in your Windows system.
| | 01:59 | That will then install those fonts for Windows,
and you can then use them inside of Flash.
| | 02:03 | Again, make sure that Flash is not launched when you install those
fonts, because after you install the fonts you'll launch Flash,
| | 02:11 | and then those fonts should be available for your use.
| | 02:14 | Again, sometimes you may need to restart your system
in order to be able to use those particular fonts.
| | 02:20 | Now if you do not have access to the exercise files, open up
your preferred web browser and go to "www.gnome.org/fonts."
| | 02:33 | Here is where that particular font is available for free to download.
| | 02:37 | There's a link, at the time of recording this title
that says, "The fonts are now available here."
| | 02:43 | If you click on that you can then download one of those
archives of fonts and then install them like I just showed you.
| | 02:49 | So before you go any further make sure that you have those
Bitstream Vera font, as well as all the variants of it.
| | 02:55 | Bold, bold italic, and so forth, installed on your computer.
| | 02:59 | That was as you continue forward with the exercises, we can
all use the same font face so that we're all on the same page.
| | Collapse this transcript |
| Integrating Fireworks content| 00:01 | >>One question that I get a lot from students that are working in Flash is:
| | 00:05 | Which program should I use as I'm designing my
graphics that will best integrate with Flash?
| | 00:11 | And that's a good question.
| | 00:12 | And as you're beginning to work, and develop, and design your images,
which program should you use so that you can minimize the amount of work
| | 00:19 | that you have to redo as you bring your images into your Flash projects?
| | 00:24 | In the next few exercises we're gonna look and see how
various graphics integrate with Flash that have been created
| | 00:31 | in other graphics editing programs such as,
Fireworks, Freehand, Photoshop, and Image Ready.
| | 00:36 | If you have access to the exercise files feel free
to follow along with the steps as I'm doing them.
| | 00:42 | If you don't have access to the exercise files, you can still
walk away with lots of information, just kick back and watch.
| | 00:49 | Inside of the LA Eye Works directory that you copied onto your
desktop earlier, there's another folder called "File Types."
| | 00:56 | Inside of there, there are other folders
from other graphics editing programs.
| | 01:00 | Again such as Fireworks, Freehand, Illustrator, Photoshop, and Image Ready.
| | 01:06 | Inside of those folders are images that have been
created with those respective graphics editing programs.
| | 01:12 | Let's take a look how those graphics hold up
once they've been imported into a Flash project.
| | 01:18 | In this first exercise, let's look to see how Fireworks fares.
| | 01:22 | Go ahead and open Flash 8, and then go
ahead and create a new blank Flash document.
| | 01:31 | Let's change the stage size of this Flash document
to be the same as the graphic that we're importing.
| | 01:37 | So choose "Control J," or "Command J," or click on the "Size" button in
the "Properties Inspector" to open up the document properties dialog box
| | 01:46 | where you can then get access to the movie dimensions.
| | 01:49 | Simply change the width to 600 and click "OK."
| | 01:54 | Next, choose "File," "Import," "Import to Stage," or simply click the
keyboard shortcut "Control R" on Windows, or "Command R" on the Macintosh.
| | 02:06 | Then on your desktop open the "LA Eye Works" folder,
open the "File Types" folder, and then open "Fireworks."
| | 02:14 | Inside of there, there are two files that have
been created with Fireworks 8. "Main Menu,"
| | 02:20 | which is a PNG File, and another "Main Menu," which is a SWF file.
| | 02:24 | Go ahead and open up the "Main Menu" PNG file by double-clicking on it.
| | 02:28 | When you do that, Flash is going to open up this dialog box called
| | 02:31 | "Fireworks PNG Import Settings," and it's
gonna ask you a few different questions.
| | 02:36 | The first is for file structure, "Do you want to import all of
the images as a movie clip and retain the layers within that,"
| | 02:43 | or "Do you want to import the content
into a new layer in the current scene?"
| | 02:47 | Go ahead and select that second option, as we don't want to have
Flash automatically create a movie clip to store all the content in.
| | 02:53 | We just want to have it bring the content right here onto the stage as is.
| | 02:57 | Under objects, you can choose to rasterize to maintain
appearance, or try and keep all the paths editable.
| | 03:05 | Since we're trying to see how Fireworks can take its graphics that it
creates, and bring them into Flash while still trying to keep the editable,
| | 03:13 | select that second option, "Keep all paths editable."
| | 03:17 | Under "Text" we get the same options, "Rasterize the
text to maintain appearance," or "Keep it editable."
| | 03:23 | Again, select "Keep it all editable."
| | 03:25 | Lastly we can choose to import as a single flattened bitmap.
| | 03:29 | That basically would take all the layers that we have
from our Fireworks graphic and squish it into one,
| | 03:34 | and then just bring that in as a raster graphic here inside of Flash.
| | 03:38 | In this case we don't want that option to be checked, because again
we want to see how the content from Fireworks integrates with Flash,
| | 03:46 | while still allowing us to edit it after it's been imported.
| | 03:50 | Once you've set those settings, click "OK."
| | 03:53 | This is the graphics that we've imported from Fireworks, and this is the
main menu for the site that you're going to build throughout this title.
| | 04:00 | Let's take a look and see how Flash has
treated and translated this Fireworks PNG file.
| | 04:05 | If I select the text for "About Us" in the main
menu, and look in my "Properties Inspector,"
| | 04:11 | I can see that I can get access to all of text properties.
| | 04:14 | If I double-click on that, I can see that it's an editable text block.
| | 04:19 | So what's happened is, Flash has actually treated all the text
fields here just like as if I created them in Flash itself.
| | 04:27 | If I click on the graphic underneath it, this green bar, I
can see that's actually converted that into a drawing object.
| | 04:35 | If I double-click on that I can get access to the actual object itself,
and it still is a Vector object, just as if I'd created it in Flash.
| | 04:44 | So I can go back and make any changes to it after the fact if I'd like.
| | 04:48 | So as you can see, Flash actually treats really well, the graphics
that have been created in Fireworks and saved as it's native PNG file.
| | 04:57 | Now you may get slightly different results depending upon the
complexity of the graphics that you're creating in Fireworks.
| | 05:04 | But again, as you can see, Flash treats
the Fireworks PNG files really well.
| | 05:08 | All my Vector graphics have retained their
editability, as well as the text.
| | 05:13 | I can go back, and I can edit the graphics, and I can
edit the text, even after I've imported them into Flash.
| | 05:19 | Next let's go ahead and take a look to see how Flash treats
importing a SWF file that has been exported from Fireworks.
| | 05:26 | To do that I'm gonna close this FLA,
| | 05:29 | and not save any changes.
| | 05:31 | And then I'm gonna create a new FLA, I'm gonna use the
keyboard shortcut this time. On Windows it's "Control, Alt,
| | 05:37 | N," on the Macintosh it's "Command, Option, N," and then again
I'm gonna press "Control J," or "Command J" on the Macintosh,
| | 05:45 | to access document properties, and then I'm just
gonna change the width to 600 and click "OK."
| | 05:51 | Now when I go to import, I'm gonna use the keyboard shortcut
this time, "Control R" in Windows, or "Command R" on the Mac.
| | 05:58 | I'm in that same directory again, but this
time I'm gonna import the "Main Menu" SWF file.
| | 06:03 | Again this file was just saved from Fireworks, the only
thing it was saved as was just a simple Flash SWF file.
| | 06:09 | I'm gonna double-click on that file to import it.
| | 06:13 | Now when I scroll up to the top of my stage, I can see there's
my main menu options. Let's see how Flash has translated that.
| | 06:20 | I'm gonna click on the first text option, "About Us," I'm gonna look
at my Properties Inspector, I don't see my text options anymore.
| | 06:27 | I can see, however, that it's been inserted into a group.
| | 06:31 | So if I double click on that text block, which is a group, and
now that I go inside that group I can click on that text block,
| | 06:38 | and now I get access to the text options in the Properties Inspector.
| | 06:43 | So when Fireworks exports a SWF file, and you then import that into Flash,
| | 06:49 | what Flash has done when it translated that, is
it's taken all the text blocks and grouped them.
| | 06:54 | So each text block is now in its own group.
| | 06:57 | I can still go back and edit the text, I just first need to double-click
on it to get access to the group, and then I can edit my text within there.
| | 07:06 | Let's go back to scene one and see how it did with Vector Graphics.
| | 07:10 | If I click on the Vector Graphic underneath it on the stage, I can see
in the Properties Inspector it's a group, and if I double-click on that,
| | 07:18 | and then select a graphic, I can see that it's
still a Vector Graphic here inside of Flash.
| | 07:23 | This is much the same way that Flash treated a Fireworks native PNG file.
| | 07:27 | So as you can see, exporting a SWF file from Fireworks, and
then importing that into Flash also yields really great results.
| | 07:35 | The only thing that has happened when exporting a SWF file and
then importing that into Flash, is that its added the extra step,
| | 07:41 | its taken the text blocks and putting them into groups.
| | 07:44 | Obviously if I wanted to continue working with those here
inside of Flash, all I'd have to do is select those text blocks,
| | 07:51 | and then I could ungroup those by choosing "Modify," "Ungroup."
| | 07:55 | Now that those are ungrouped I have access directly to the
individual text options here inside the Properties Inspector
| | 08:02 | without having to go into a group.
| | 08:04 | So again, working with Fireworks and integrating that
content with Flash, as you've seen, does really well.
| | 08:11 | The Fireworks native PNG file translates perfectly inside
of Flash, as does exporting a SWF file from Fireworks too.
| | 08:18 | Again, your mileage may vary depending on the complexity
of the graphics that you create inside of Fireworks.
| | 08:24 | I can't guarantee that some of the things, and especially
the more complex things that you build inside of Fireworks,
| | 08:30 | will translate over exactly into Flash, as you've seen here.
| | 08:34 | But again, the results are very promising
when integrating Fireworks and Flash content.
| | Collapse this transcript |
| Integrating Freehand content| 00:01 | >>Next let's take a look and see how Freehand
integrates with Flash content.
| | 00:06 | Again in Flash, go ahead and create a new Flash
document, change the dimensions to 600 pixels wide,
| | 00:12 | and then choose "File Import," again on your desktop in the LA Eyeworks
| | 00:18 | folder. In the "File Types" folder is a folder
called "Freehand," go ahead and open up that folder.
| | 00:25 | Within there is a file called "Main Menu," and it's
a SWF file that's been exported from Freehand.
| | 00:31 | Go ahead and double-click on that file to import it into Flash.
| | 00:35 | Then if you scroll to the top of your stage, you can see that there's
the main menu, created in Freehand and then brought into Flash here.
| | 00:42 | If I click on one of the Main Menu options, such as "About
Us," I can see that it has been inserted into a group.
| | 00:49 | If I double-click on that to open up the group, and then select that
text field in the stage, and look in the "Properties Inspector" I can see
| | 00:57 | that it actually is using the font that I choose - Bistream Vera Sans.
| | 01:01 | However it didn't carry over the type of Bitstream
Vera Sans that I wanted, which was Bold Oblique.
| | 01:07 | However, at least the text is still editable once brought into Flash.
| | 01:11 | I'm gonna go back to scene one and see
how it translated to Vector Graphics.
| | 01:16 | I'm gonna select that green bar in the background, and
in the Properties Inspector I can that it's a group.
| | 01:22 | If I double-click on that group to open it and then click on
that green bar again, I can see that it is still a Vector object.
| | 01:28 | And if I chose I could always go back in here and
make any changes to that Vector graphic that I wanted.
| | 01:34 | So a swift file exported from Freehand does translate over the text
and the Vector objects so that I can still edit them inside of Flash.
| | 01:43 | The only slight problem with exporting a SWF
from Freehand, and then importing that into Flash,
| | 01:48 | is that the text didn't translate over
quite exactly as it was originally created.
| | 01:53 | All I had to do was go back there and specify that
the text was using Bitstream Vera Sans Bold Oblique.
| | 02:00 | And it didn't translate over the Bold Oblique, but it's still using
the same font that I chose when I created it in Freehand originally.
| | Collapse this transcript |
| Integrating Illustrator content| 00:01 | >>Now that you've seen how other Macromedia applications fare when
importing those graphics into Flash, and they've done rather well,
| | 00:09 | let's see how Adobe created graphics fare
when being imported into Flash as well.
| | 00:15 | Let's start with Illustrator.
| | 00:17 | So go ahead and create in Flash a new document, change the
stage size to 600 pixels wide, and then choose "Import."
| | 00:26 | Navigate again to your desktop, into your "LA Eyeworks" folder, into
the "File Types" folder, and then in there into the "Illustrator" folder.
| | 00:35 | There are a series of files in there that
have all been created with Adobe Illustrator.
| | 00:39 | There's a plain Adobe Illustrator document, an EPS, a PDF, and a SWF file.
| | 00:45 | Let's see how those different file types
fare when being imported into Flash.
| | 00:50 | First let's start with the actual Adobe Illustrator document itself.
| | 00:54 | Again, the icons that you see here in my Import window, may
differ from the icons you see in your window depending upon
| | 01:00 | if you have those particular programs installed on your computer or not.
| | 01:04 | Regardless, select and then double-click on the "Main Menu
AI" file, again this is inside of the "Illustrator" folder.
| | 01:13 | In the "Import Options" dialog box, it gives us a few options.
| | 01:18 | The first set is to "Convert Pages To" and then
we can choose either "Scenes" or "Key Frames."
| | 01:23 | If we had other pages in our Illustrator document, we could have
those when imported into Flash, be placed in "Scenes" or "Key Frames."
| | 01:31 | Now I'm only using one page in this Illustrator
document, but for now go ahead and choose "Key Frames."
| | 01:37 | The next options is to "Convert Layers
To," "Layers inside of the Flash file,"
| | 01:42 | "Layers in the Illustrator file into Key
Frames in Flash," or just to "Flatten it."
| | 01:47 | Go ahead and leave the "layers" in the Illustrator document set
to be converted into "layers" here inside of the Flash document.
| | 01:55 | If I had multiple pages I could also choose all
of the pages, or just to import at range of pages
| | 02:02 | from the Illustrator document into my Flash document.
| | 02:06 | For now just go ahead and leave it set to "All."
| | 02:07 | Again, there's only one page in this Illustrator
document that we're importing anyway.
| | 02:13 | Under "Options" there's still a few more things to choose from.
| | 02:16 | I can have it include or not, invisible layers.
| | 02:19 | I can have it maintain text blocks, or if I
just wanted to make it look just like it did
| | 02:25 | in Illustrator, I could choose to have it "rasterize everything."
| | 02:29 | And then once I selected that option, I could choose
a resolution for it to "rasterize those graphics at."
| | 02:35 | In this case, again, I want to test to see how documents created inside
of Illustrator, when brought into Flash, retained their editability.
| | 02:43 | So can I edit the text, can I edit the graphics, and so
forth, after I've imported them into my Flash document.
| | 02:49 | So I'm gonna make sure that "rasterize everything" is not checked.
| | 02:52 | I don't want to include any invisible layers,
so I'm gonna go ahead and uncheck that option.
| | 02:56 | But I do want to maintain text blocks,
so make sure that that option is checked.
| | 03:01 | Once you've specified all that go ahead and click "OK."
| | 03:05 | Now I can see that it's having trouble
converting the font that I picked inside
| | 03:08 | of the Illustrator document, to the Flash
document here, as it's importing it.
| | 03:14 | So I'm gonna choose, "Choose Substitute."
| | 03:17 | I can see that what it's having problems with is the Bitstream Vera
Sans Bold Oblique font. Flash isn't understanding what to do with that.
| | 03:25 | If I click on that option, I could then
choose which font to substitute it with.
| | 03:30 | I'm just gonna choose from this list "substitute it with,"
instead of the default system font, "Bitstream Vera Sans".
| | 03:38 | So I'm gonna scroll in my font list until I find
Bitstream Vera Sans and then I'm click "OK."
| | 03:44 | Now if I scroll up, I can see that what it's actually
done is it's still gotten a little confused with the text
| | 03:50 | in my main menu, here once it's been imported into Flash.
| | 03:54 | So as you can see, it didn't quite like the base Illustrator, the
Adobe Illustrator document, after it's been imported into Flash.
| | 04:02 | It didn't translate it over quite exactly like I had hoped.
| | 04:05 | Let's take a look at one of the other formats
that have been exported from Illustrator.
| | 04:09 | I'm gonna go ahead and close this FLA file, not save
any changes, and repeat that same process over again.
| | 04:15 | Create a new FLA, change its dimensions to 600
pixels wide, and then choose "File Import."
| | 04:22 | And this time again, in the same Illustrator directory, I'm
gonna import the EPS file that's been exported from Illustrator.
| | 04:29 | Let's see how that fares.
| | 04:32 | I get the same import options dialog box. My options
should be still set to what they were previously.
| | 04:38 | The important thing is to make sure that it included visible
layers, as well as "rasterize everything" are unchecked,
| | 04:44 | and that "maintain text blocks" is checked,
and then go ahead and click "OK."
| | 04:50 | Again, I get the same missing font warning dialog box that appears.
| | 04:53 | I'm gonna do the same thing as before and
choose the button "Choose Substitute."
| | 04:58 | This time I can see that it's automatically set it to be mapped to
Bitstream Vera Sans, I'm gonna leave it set to that and click "OK."
| | 05:06 | Then if I scroll up, I can see that it's done a little bit better with
translating the text over, I don't see a bunch of gibberish up there.
| | 05:12 | But let's see if that text is still editable.
| | 05:15 | I'm gonna click on the "About Us" option, and I can see
that what it's done is that is all one giant text block.
| | 05:21 | It's put them all together into one text field, instead
of separating them into their own separate fields.
| | 05:27 | It's still editable, if I double-click on it,
you can see that I can get in there and edit.
| | 05:32 | And again, it's actually translated it over to the correct font face,
Bitstream Vera Sans, but I can also see here inside my font pull down menu,
| | 05:40 | that's having a little difficulty mapping it to the correct font.
| | 05:43 | So if I were working in Illustrator and had exported an EPS
file from Illustrator, and then brought it here inside of Flash,
| | 05:51 | I would want to make sure to select my text, and from the font pull
down menu, make sure to choose the correct Bitstream Vera Sans.
| | 05:58 | That way I'm mapping it to the correct font
that I have installed on this particular system.
| | 06:03 | Beyond that I can also see that it's done some stuff with the color.
| | 06:06 | This now looks like an 80's florescent green
color that it sort of translated everything to.
| | 06:11 | So not only has it taken my text, which was in separate
text blocks, and put them all inside of one text field,
| | 06:18 | but it's also messed with the colors that I've also assigned to the well.
| | 06:22 | Let's see what it's done to the Vector Graphics, if I select that
green bar in the background I can see that it's inside of a group,
| | 06:30 | but if I double-click on it, do I still get access
to the actual Vector outlines of this graphic?
| | 06:35 | And as I can see by selecting it, I do.
| | 06:37 | So Vector Graphics, exported from Adobe Illustrator
as an EPS file, translate over correctly.
| | 06:43 | Now again, it's actually changed the color and the text is been converted
into one giant text block, but again at least it's still editable.
| | 06:52 | So it's not optimal by any means, but a lot of the content that was inside
| | 06:56 | of the Illustrator document, after being
imported into Flash, is still editable.
| | 07:01 | So if I had some extra time I could still go back and
work with this document, I could change the colors,
| | 07:07 | and take the text and put them in their own text fields.
| | 07:10 | So all is not lost with an EPS file exported from Illustrator.
| | 07:15 | Let's take a look at some of the other formats, again, go ahead
and close this FLA, don't save any changes, and open up a new FLA.
| | 07:23 | Change the dimensions to 600 pixels wide,
and then choose "File Import" again.
| | 07:29 | This time let's import a PDF file that
has been exported from Adobe Illustrator.
| | 07:33 | Select that PDF file, and double-click on it to import it.
| | 07:37 | Again you get the same options.
| | 07:39 | I'm gonna leave all the options set to what
they were previously, and then click "OK."
| | 07:43 | The same missing font warning dialog box
appears, so I'm gonna choose "Choose Substitute."
| | 07:49 | Make sure that the Bitstream Vera Sans Bold Oblique font is being mapped
| | 07:53 | to the Bitstream Vera Sans font installed
on my computer, and then click "OK."
| | 07:59 | Then if I scroll up in my stage I can see that
unfortunately I'm getting the same results that I did
| | 08:04 | when I tried to import the base Adobe Illustrator document.
| | 08:07 | Not only that, but I can see again my colors have been shifted, this
time I can see the greens are more desaturated than what they were
| | 08:14 | when they were originally created inside of the Adobe Illustrator document.
| | 08:17 | So unfortunately it looks like in this case, the
Adobe Illustrator document, exported as a PDF file,
| | 08:23 | and then imported into Flash, didn't yield very good results.
| | 08:26 | I'm gonna go ahead and close this FLA, not save any changes, and let's take
a look at the last file format that has been exported from Illustrator.
| | 08:36 | Again go ahead and create a new FLA, change the dimensions, and then import
in that same Illustrator folder, a SWF file exported from Illustrator.
| | 08:46 | Go ahead and double-click on the "Main
Menu_SWF" file to import that into Flash.
| | 08:52 | This time because it's a SWF file, I'm not given any options,
or any problems that talk about matching up the font used.
| | 08:58 | If I scroll to the top of my stage, I can see that there's all my text.
| | 09:03 | If I click on the "About Us" text, I can see that it's
by itself, it hasn't been stuck in a big text field
| | 09:09 | like it was with the EPS that's been exported from Illustrator.
| | 09:13 | If I double-click on that group, and then click on that text again, I can
see that in the "Properties Inspector" I do have access to the text itself.
| | 09:23 | But again, it's still mapping it to a system font that isn't quite
correct, so I'd want to make sure that I click on that font pull
| | 09:29 | down menu, and set it to the correct Bitstream Vera Sans.
| | 09:33 | It also didn't translate over quite exactly
how I had it set, which was bold and oblique.
| | 09:39 | So I'd want to make sure if I was trying to work with a SWF
file exported from Illustrator here inside my Flash document,
| | 09:46 | that I also set the bold oblique, like I had it
set inside of the Illustrator document originally.
| | 09:52 | But the good news is that the text is still
editable, and it's in it's own text block.
| | 09:57 | Again, it hasn't been merged with all the other text inside my file.
| | 10:01 | Let's take a look and see how it translated to Vector Shapes.
| | 10:04 | So go back to scene one and click on the green bar in the background.
| | 10:08 | I can see that it's been inserted, not into a group this time, but
inside of a graphics symbol that it's automatically called "Symbol One."
| | 10:15 | I'm gonna double-click on that symbol to open it up, and then I can see
what it's done here, is it's actually created a few different layers.
| | 10:22 | One layer is a mask, and that it's masking another layer.
| | 10:26 | Go ahead and lock the top most mask layer for now, and hide it so
that you can see what's behind it, the layer that it's masking.
| | 10:34 | The layer that it's masking is our green bar, but it is in its own group.
| | 10:40 | If I double-click on that again, and then click on that shape on the stage,
| | 10:43 | I can see that there is the base Vector Object,
and yes, I can still go back and edit it.
| | 10:48 | So its done some funny things with creating a mask layer, and the
Vector shape that we want to get access to is in another masked layer,
| | 10:57 | but that Vector shape is still there, and I can still take
it, cut it out of there, and paste it wherever I needed it,
| | 11:02 | should I want it then integrate that content into my Flash site.
| | 11:06 | So we're gonna go ahead and go back to scene one now.
| | 11:08 | So SWF files, exported from Illustrator, do a fairly decent job at
retaining the editability of both the text and the Vector shapes.
| | 11:17 | Again, it does a few strange things with Vector
shapes, and the text doesn't translate over perfectly,
| | 11:23 | but it is still workable with a little
extra work, I could always go back in here
| | 11:27 | and make it so that I could use it precisely
as I intended here inside of Flash.
| | 11:32 | As you've seen in this video, Adobe Illustrator documents, both
the EPS and the SWF file, translate over decently well into Flash.
| | 11:41 | The Adobe Illustrator document itself,
as well as the PDF fared not as well.
| | Collapse this transcript |
| Integrating Photoshop content| 00:01 | >>Next, let's take a look at how Adobe
Photoshop documents integrate with Flash.
| | 00:05 | Go ahead and create a new FLA,
| | 00:08 | change the stage size to 600 pixels wide, and then choose "File Import."
| | 00:14 | On your desktop navigate to the "LA Eyeworks" directory, into
the "File Types" directory, into the "Photoshop" directory,
| | 00:23 | and in there you'll see a Photoshop document called "Main Menu_PSD."
| | 00:28 | This is actually a Photoshop document saved out from Photoshop.
| | 00:33 | Go ahead and double-click on that file to have it be imported into Flash.
| | 00:37 | Now if you see an error dialog box appear telling
you there was an error importing the file,
| | 00:42 | chances are you don't have QuickTime installed in your computer.
| | 00:45 | When Flash goes to import a file format that it doesn't understand,
it relies on QuickTime to translate that file as it goes to import it.
| | 00:54 | So if you don't have QuickTime installed, and you would like to be able
to import Photoshop documents and other files that Flash doesn't support,
| | 01:02 | into Flash itself, make sure that you download it and install
QuickTime, so that you can then import and utilize those files.
| | 01:11 | Let's take a look and see what's happened to the
Photoshop document that's been imported into Flash.
| | 01:16 | If I scroll around on my stage, I can see that it all looks pretty good.
| | 01:20 | But by looking at the outline that's around this graphic I can tell
that what's happened is that when Flash has imported this document,
| | 01:27 | it's actually taken the layered bitmap
document that was created inside of Photoshop,
| | 01:31 | and flattened it into a flat bitmap graphic
and stuck it on the stage here inside of Flash.
| | 01:37 | Inside of my library I can see that there is my bitmap graphic,
and it's just a single bitmap graphic, because it's been flattened.
| | 01:44 | So while it looks great, there's absolutely
nothing I can do with it here inside of Flash.
| | 01:48 | I can't edit the text. I can't edit the graphics, or anything like that.
| | 01:52 | It looks good, but it's untouchable, and unworkable here inside of Flash.
| | 01:56 | So if you want to be able to take your documents from Photoshop and bring
them into Flash where you can edit it, I'm afraid you're out of luck.
| | 02:04 | However, in the next exercise you're gonna see how you can take a bitmap
document, like this Photoshop document, from Image Ready and export it
| | 02:13 | as a SWF file, and we'll see what the results are there.
| | 02:16 | However, if you're set on importing and integrating Photoshop documents,
and Photoshop content into your Flash work, which can be really important,
| | 02:24 | those are two major graphics programs -
Adobe Photoshop and Macromedia Flash.
| | 02:29 | There are a whole slew of techniques and tricks to
be able to integrate those two pieces of content.
| | 02:34 | If you open up your default web browser, and then navigate to
"MovieLibrary.Lynda.com" and then click on the "Browse All Titles" link,
| | 02:46 | and then scroll down to the "Adobe Photoshop" section, you'll see a
title there called "Photoshop and Flash Integration," by Michael Ninness.
| | 02:56 | If you select that title, this is a whole movie library title
that covers integrating Photoshop documents and Flash together.
| | 03:04 | And there's all sorts of tips, and techniques, and
tricks to integrating those two different formats.
| | 03:09 | So if you're really keen and interested on
integrating Photoshop and Flash together,
| | 03:14 | make sure you check out this title before
throwing up your hands and giving up completely.
| | 03:18 | In the next exercise, we're gonna look, however, at taking a file
that has been opened in Image Ready and exported as a SWF file,
| | 03:25 | again from Image Ready, and then see how
that works when imported into Flash.
| | Collapse this transcript |
| Integrating a SWF exported from ImageReady| 00:01 | >> Lastly, let's take a look at how an image opened up in Adobe Image Ready
and then exported as SWF file fares when being imported here into Flash.
| | 00:11 | Go ahead and create a new blank FLA, change the stage size
to six hundred pixels wide, and then choose file import.
| | 00:20 | Again on your desktop in the LA Eyeworks folder, in
the file types folder, is another folder called Image Ready.
| | 00:29 | Inside of that folder is a SWF file called "Main Menu IR".
| | 00:33 | Again this is just an image created inside of Photoshop, and
then opened in Image Ready, and exported as a SWF file.
| | 00:42 | Go ahead and double-click on that file to import it into Flash.
| | 00:45 | When you do, if you scroll around your stage
you'll notice that it looks pretty good.
| | 00:50 | If you click on the text up at the top, such as
"About us" and look in the Properties Inspector,
| | 00:55 | you'll notice that it's a graphic symbol called "symbol five".
| | 00:58 | And you can see inside your library that a
whole bunch of symbols have been created for you.
| | 01:04 | Go ahead and double-click on that symbol on the stage to
open it up, and then click on the text block to select it.
| | 01:10 | In the Properties Inspector, I can see that it's using
the correct font that I chose - Bitstream Vera Sans.
| | 01:16 | It's even selected full bold for me.
| | 01:18 | Now in Windows, if I wanted to then utilize this in my
Flash project, I would also want to make sure that I set it
| | 01:24 | to be full italic as well, just like it is in the original layout.
| | 01:28 | On the Macintosh, you could just choose from your font
pull down menu, Bitstream Vera Sans Bold Oblique.
| | 01:34 | But on Windows because it organizes fonts differently,
| | 01:37 | you want to make sure that you select Bitstream Vera
Sans, and then check the full bold and italic buttons.
| | 01:43 | But I can see that the text is still editable.
| | 01:46 | I can double-click on it, I can make any changes to it if I'd like.
| | 01:50 | So the text from a SWF file that was
exported from Image Ready is editable.
| | 01:56 | Let's see how its treated the vector graphics. Go ahead and go back to
scene one and then click once in the green bar that's in the background.
| | 02:04 | I can see that it, like the text, has been
automatically inserted into a symbol called symbol two.
| | 02:10 | I'm going to double-click on that graphic symbol to open it,
and then I'm going to click once on that green bar on the stage.
| | 02:16 | I can see that its done a little strange things
here with the negative space of that green bar.
| | 02:22 | In other words, where that green is not, it looks like its changed it
into a transparent area of the graphic instead of just leaving it alone.
| | 02:30 | So the vector graphic is still vector, I can go in there and edit
it if I chose, but there are a few gremlins with how its translated
| | 02:38 | that vector graphic over when imported it into Flash.
| | 02:42 | So all in all, the translation going from Image Ready, exporting
it as a SWF file, and then importing that into Flash is not bad.
| | 02:51 | The text is still editable, so are the vector graphics.
| | 02:55 | But the text translates over about ninety percent varied.
| | 02:58 | You might need to make a few minor adjustments
to the text and the vector graphics as well.
| | 03:03 | Has translate them over almost all the way, but again, there's a few
small things that's it's done with the vector graphics as you can see.
| | 03:10 | So going from Photoshop and opening that document
in Image Ready and exporting it as a SWF file,
| | 03:16 | is actually a fairly decent way to go if
you are working with Photoshop documents.
| | 03:20 | Again, the results that you end up with might be a little different than
what has been shown here depending upon the types of graphics and the types
| | 03:27 | of things that you used inside of your Photoshop
document when you originally created it.
| | 03:31 |
| | Collapse this transcript |
|
|
3. Getting StartedWhat are classes, objects, methods and properties?| 00:01 | >> Beginning in this chapter, you're gonna start
writing some pretty complex action scripts.
| | 00:06 | You're gonna start writing what's called the movie clip loader object,
which allows you to load SWF and JPG files into your Flash projects.
| | 00:16 | So before you get too in-depth with some of this heavy duty action script,
| | 00:20 | it's important that you understand the basic concepts
and terminology behind some of these actions.
| | 00:26 | So before we get going, I'd like to talk a little bit about the
basics behind what are classes, objects, methods, and properties.
| | 00:35 | Classes are really the blueprint that defines a grouping of objects.
| | 00:40 | For example, if we're referring to a dog,
a dog falls under the class of animals.
| | 00:47 | Animals is a class that really defines a
grouping of objects, in this case of a dog.
| | 00:52 | In Macromedia Flash, movie clips and buttons are also classes.
| | 00:57 | Both movie clips and buttons have methods and
properties that define how those objects behave.
| | 01:04 | A dog being under the class of animals, also has
methods and properties that define how that dog behaves.
| | 01:12 | So a class is really kind of a grouping of objects.
| | 01:16 | An object is essentially an instance of a class.
| | 01:21 | So if you have the class of movie clips, and
you take a movie clip and place it on the stage,
| | 01:28 | that movie clip on the stage is an instance of the movie clip class.
| | 01:33 | So that instance of that movie clip is actually considered to be an object.
| | 01:38 | Again, if you take an object like a dog, a dog has
properties and methods that define it as a dog.
| | 01:45 | Objects learn how to behave, they get their properties
and their methods that they inherit from the class.
| | 01:52 | So a class defines the general blueprint,
the rules for how an object should behave.
| | 01:59 | Methods are the behaviors of an object.
| | 02:02 | For instance, if you take the behavior of a dog, a dog barks and
pants and slobbers, and pees all over your furniture for instance.
| | 02:11 | That is the behavior of a dog, that is the dog's method.
| | 02:15 | If you apply that to Flash, the neat thing about methods is
that you can actually add your own methods to your objects.
| | 02:23 | Going back to the movie clip object again, a movie clip has
built in methods such as "Play", "Stop", "Next frame", and so forth.
| | 02:32 | So objects, like movie clips and buttons,
have behaviors that define them as objects.
| | 02:38 | Again, those behaviors are called methods.
| | 02:41 | Lastly, properties are attributes that define an object.
| | 02:46 | For instance, a dog has legs, eyes, a tail, a mouth, and bad breath.
| | 02:53 | Those are the properties, the attributes
that define in this case the object of a dog.
| | 03:00 | Going back to the movie clip analogy again, movie clips have
properties such as its visibility, its alpha, its rotation,
| | 03:08 | etcetera. So classes are really the blueprint that defines how objects behave.
| | 03:15 | An object is an instance of a class.
| | 03:18 | So if I have the movie clip class, and I take a movie clip and I place
an instance of it on my stage, that movie clip becomes an object.
| | 03:27 | The way that movie clip behaves is the movie clip's methods.
| | 03:32 | It has built-in methods such as "Play", "Stop", "Next frame",
etcetera, and you can even add your own methods to them.
| | 03:39 | And lastly, properties are attributes that define those objects.
| | 03:44 | So for a movie clip, its visibility, its rotation,
its alpha and so forth define the movie clip object.
| | 03:51 | So those are the basic concepts behind some of the action scripts
| | 03:55 | that you're gonna be using throughout the
remainder of the movies in these tutorials.
| | 03:59 | So now when I refer to the movie clip loader class, or for instance
the myMCL object, you know exactly what it is that I'm referring to.
| | 04:08 | And again, if this doesn't make sense initially to you, don't worry too
much about it because you're gonna be dealing a lot with classes, objects,
| | 04:16 | methods, and properties throughout the
remainder of these movies in these tutorials.
| | Collapse this transcript |
| What are variables?| 00:01 | >> By this point you should have a good understanding of what symbols are.
| | 00:05 | Symbols are of course containers to hold
visual information, be that a bitmap graphic,
| | 00:11 | a graphic that you've drawn inside of Flash, some text, and so forth.
| | 00:15 | Now there's another way to create a container that
holds data instead of visual images like symbols do.
| | 00:23 | That other type of container is called a "variable".
| | 00:26 | As you're working with action script, as you'll see throughout the rest
of this title, there are many occasions in which you'd want to be able
| | 00:32 | to store some data, be that a string of text, some numbers, and so forth
for later use and other actions that you're building inside of Flash.
| | 00:41 | A variable, like a symbol, allows you to store information.
| | 00:45 | It just allows you to store data instead
of visual information like a symbol does.
| | 00:50 | To give you a quick tour of how a variable is created, and how you can
utilize that in Flash, go ahead and create a new empty Flash document.
| | 00:59 | Then select the very first key frame, and open up your "actions" panel.
| | 01:04 | An easy way to do that on Windows is to press "F9", on Macintosh
you can press "Option" "F9" to open up this actions panel.
| | 01:12 | Then click inside the actions panel inside the
script pane, and first type "var", space, "myVar".
| | 01:21 | Now "var" defines that as a local variable.
| | 01:24 | After that you type a space, and then the name that you want to give your
variable, the name of the container that's going to hold your information.
| | 01:32 | Again, this name, much like when you create a symbol and you
store that symbol in the library, can be whatever name you want.
| | 01:39 | Except you want to make sure that you don't put spaces in the name, and no
other characters such as exclamation points, an ampersand, and so forth.
| | 01:48 | It's best if you keep it all one word.
| | 01:50 | In this case because I essentially have two words in this
name, myVar, I capitalize the first letter of the second word
| | 01:59 | so that you can clearly see where that second word starts.
| | 02:02 | Now Flash, since Flash MX 2004 and
Action Script 2.0 is case sensitive.
| | 02:08 | So you want to make sure that if you're using upper and lower case,
the next time that you refer to that particular action or variable
| | 02:16 | or function wherever you created this name at,
that you also get the capitalization correct.
| | 02:21 | And again, I'll repeat that as we go through
these exercises in this training title.
| | 02:26 | Now at the end I can insert a semicolon to end
that action, as you've probably seen before.
| | 02:32 | Now what this action does here is it just creates the variable.
| | 02:35 | So I have essentially an empty container called "myVar".
| | 02:40 | I can put something inside that container by simply clicking after
the name and before the semicolon, and then just type A equals sign,
| | 02:49 | and then whatever you want to place inside of that variable container.
| | 02:53 | For example, if I wanted to insert some numbers inside of
that variable container, I could just say 1, 2, 3.
| | 02:59 | Now I'm inserting those numbers inside of that
container, so it's storing that information for me.
| | 03:06 | I can also have that variable container hold a string of text.
| | 03:10 | When you're working with strings of text, you also want
to make sure that you place those within quotation marks.
| | 03:16 | So I'm gonna type quote, and then maybe I want to
store the name Shane inside of that variable container.
| | 03:22 | So I type "Shane", end quote, like so.
| | 03:26 | You might also see variables defined with
spaces before and after the equals sign.
| | 03:32 | Either way it works just fine.
| | 03:33 | Now I can use another action called the "trace function" that
will allow me to see what I've stored inside of that variable.
| | 03:41 | What the trace function does is it essentially executes an
action, but instead of it actually utilizing that action,
| | 03:48 | it just displays the output in another window called the "output panel."
| | 03:53 | To do that I'm gonna click after the semicolon, press return or enter
to create a line break, and then simply type "trace", open parenthesis.
| | 04:02 | And then the name of the variable that I want to find out what
the value of it is, in other words, what's inside of the variable.
| | 04:09 | So I type "myVar", again making sure that I have the capitalization correct.
| | 04:14 | And then I'll type in end parenthesis, and a semicolon to end that action.
| | 04:19 | In Flash, whenever you first create the variable, any other
time that you use the name of that variable, in this case myVar,
| | 04:27 | throughout any other actions that you're working with, instead
of Flash just putting myVar there when it executes those actions,
| | 04:34 | what it actually does whenever it sees that
variable name is it takes whatever's inside
| | 04:40 | of that variable container and it inserts it there in its place.
| | 04:44 | So whenever you use that variable again, you can somewhat think of you
just inserting instead of the variable name whatever is inside of it.
| | 04:53 | If I test my movie now, in my output window you can see that it spit out
the name Shane, and that is what I put inside of that variable container.
| | 05:03 | So that is the basics of both creating and
utilizing a variable here inside of Flash.
| | 05:09 | Again, if it seems a little confusing to you at first,
don't worry because you're gonna be utilizing a lot
| | 05:14 | of variables throughout the remainder of the exercises in this title.
| | 05:17 | In the next exercise, you're gonna learn how to strict type
a variable, which allows you to clearly define the type
| | 05:24 | of data that is going to be stored inside of a variable.
| | 05:27 | And you'll learn the hows and whys of that in the next exercise.
| | Collapse this transcript |
| What is Strict typing?| 00:01 | >> Another good habit to get into when creating variables and authoring
action script inside of Flash is the use of something called strict typing.
| | 00:11 | This is also sometimes called strong typing.
| | 00:13 | And what it is, is that essentially allows you to clearly define
the type of data that is going to be stored inside of a variable,
| | 00:22 | or the sort of data type that's being assigned to an object.
| | 00:25 | For example, in the last excise you saw how we quickly created a
variable called "myVar" and inserted into that variable a string of text.
| | 00:35 | In this case the string of text "Shane."
| | 00:38 | Now when Flash goes to execute this action script, it doesn't know what
type of information is being stored inside of the variable called "myVar."
| | 00:47 | And it tries to figure it out by looking to see what is
inside of that variable called the value of the variable.
| | 00:54 | In Flash, there may be many occasions when you create a variable
specific to hold a number or specifically to hold a string of text.
| | 01:02 | And as you're working with those actions you want to ensure that
only that specific type of data is to be stored in that variable.
| | 01:10 | You can do that with this strict typing.
| | 01:13 | So let's take a quick look at how you can assign
strict typing, in this case to a variable.
| | 01:18 | To do that, simply click after your variable
name. So I'm going to click after "myVar."
| | 01:23 | And then type a colon, and then when you do
that you can see this code hinting pop-up.
| | 01:29 | And it's showing me all the different types of data
types that I can assign to this particular variable name.
| | 01:35 | Since this variable is holding a string of
text and I want to make sure that only strings
| | 01:40 | of text can be inserted into this variable, I'm going start typing string.
| | 01:45 | S-T, and as I type it you can see that it's actually highlighting
string from the list of data types that I can choose from.
| | 01:52 | If it's highlighting the one I want I can either continue
to type out string, or I can simply press "return" or "enter"
| | 01:59 | and Flash will automatically fill in the rest of that for me.
| | 02:02 | Now what that does is it strict types this
variable so that it can only hold a string of data.
| | 02:10 | If I tried to insert a number in here instead of
that string of text, for example the number one,
| | 02:17 | and if I then test my movie, Flash is going to give me an error.
| | 02:21 | It's says, "Hey I found a number where
you said a string is supposed to be."
| | 02:26 | So strict typing allows me to make sure that only specific
types of data can be assigned to, in this case a variable.
| | 02:34 | Obviously I'm going to go ahead and change
this back to a string of text "Shane."
| | 02:39 | Now when I test my movie everything's fine, I don't get any kind of
errors because I am actually storing a string of text inside of a variable
| | 02:47 | that I've used strict typing to tell Flash
that only strings of text can be stored there.
| | 02:52 | You can also assigned strict typing to parameters.
| | 02:55 | As you'll see later, and I'll just go over it
here really quickly, if I'm creating a function,
| | 03:00 | and I'm going to call that function say, "My function."
| | 03:05 | If I assign a parameter to that function, I'll call
this my parameter, I can actually use strict typing
| | 03:13 | to tell Flash what kind of data type that parameter's going to be.
| | 03:17 | For example, if I was passing some number information
to this particular function as a parameter,
| | 03:23 | I could then use strict typing to assign
the number data type to that parameter.
| | 03:30 | Like so. So strict typing can be assigned to variables as you've just seen.
| | 03:34 | It can also be assigned to parameters of functions as
another example of how you can use strict typing as well.
| | 03:41 | Now strict typing is somewhat optional.
| | 03:44 | If you do not use strict typing, your
action script will still work correctly.
| | 03:48 | All strict typing allows you to do is to ensure that you know exactly
what kind of data types for example, are being assigned to your variables
| | 03:56 | and to function parameters also as you've seen here.
| | 03:59 | So even though it is optional, I would recommend
as you're going to see throughout the remainder
| | 04:04 | of the videos in this title, that we do use strict typing.
| | 04:07 | 1
| | Collapse this transcript |
| What is a function?| 00:01 | >> Throughout this title you're also gonna be
making liberal use of something called a function.
| | 00:07 | Now as you've seen with both variables and symbols that hold
stuff, variables hold data, symbols hold graphics essentially,
| | 00:15 | functions is also another type of container,
except functions in essence hold actions.
| | 00:22 | A function allows you to store actions that
you can trigger at any point that you'd like.
| | 00:28 | One of the nice things about functions is that you can take a
whole block of action script, place them inside of a function,
| | 00:35 | and then you call that function, which then performs
all the actions within it at any point that you'd like.
| | 00:42 | It also enables you to take a block of action
script and reuse it as many times as you'd like.
| | 00:48 | For example, this is useful if you have a series of
buttons, like a main menu for your website for example,
| | 00:54 | and you want to have similar things be performed
each time the viewer clicks on a button.
| | 00:59 | Maybe a sound is played, an animation is performed, and so forth.
| | 01:03 | Now traditionally you might have added the
same action script to each of the buttons.
| | 01:08 | So whenever you want to make a change to what is performed when the
viewer clicks on one of those buttons, you would have to make that change
| | 01:15 | for as many buttons that you have, because you
again have the same actions assigned to each button.
| | 01:21 | What a function used in that case would allow you to do would be to write
your action script once, and then when the viewer clicks on that button,
| | 01:28 | or interacts with that button, you could have it just trigger that
one function, and then all the actions within it would be executed.
| | 01:35 | In essence however, a function is just
a container to hold other action script.
| | 01:39 | Let's take a look at that using the same examples that
we've been working with in the previous videos real quick.
| | 01:45 | As you've seen in some of the previous exercises in
this chapter, here we have a variable called "myVar."
| | 01:51 | It's been strict to the data type of string, and
within that we've inserted the string of text "Shane."
| | 01:57 | And then we run a trace function to have Flash output in the output
window whatever the value of that "myVar" variable is, which is just "Shane".
| | 02:08 | Now when I preview my movie, those actions are executed immediately.
| | 02:14 | Let's however take those two actions and place them inside of a function.
| | 02:18 | I'm gonna go ahead and close these windows, then I'm gonna click before
the very first action, press "return" or "enter" to create a line break.
| | 02:26 | And then on the first line I'm gonna type "function", and again
there are a few ways of creating a function, this is one of them.
| | 02:34 | Space, and then the name I want to give this function.
| | 02:37 | I'm just gonna keep it simple and call it
"myFunction", all one word with a capital "F" in function.
| | 02:43 | And then I'm gonna type an open parenthesis, and end
parenthesis, a space, and then an open curly brace.
| | 02:51 | The curly brace on your keyboard is if you hold down the
shift key, it's the key right to the right of the "P" key.
| | 02:59 | There's also a bracket on that same key as well.
| | 03:02 | Now that open curly brace marks the beginning of the function.
| | 03:07 | You also need to mark where the end of the function is, so
click after the trace action, right after that semicolon,
| | 03:15 | press "return" or "enter" to create one more line
break, and then type a close curly brace.
| | 03:20 | It's the key to the right of the open curly brace, and you have to
hold down your shift key when you press it to get that curly brace.
| | 03:27 | Now actions within functions need to be indented one.
| | 03:32 | If you allow Flash to automatically format your action
script, it will do exactly what I just mentioned.
| | 03:38 | You can do that by clicking on this "auto
format" button at the top of the actions panel.
| | 03:43 | And you can see that Flash will automatically indent
by one tab space the actions within your function.
| | 03:50 | I personally prefer to do that myself rather
than let the auto format function do it for me.
| | 03:55 | So now these two actions are enclosed within
a container function called "myFunction."
| | 04:01 | If I were to test my movie now, notice that nothing happens.
| | 04:05 | Before we had the output window open up, and it said
in it "Shane", because it was executing these actions.
| | 04:11 | Well functions are not automatically executed until you call their name.
| | 04:17 | Let's take a look at that.
| | 04:19 | Click at the very last line break if you use the auto format feature,
or click after the last close curly brace of that "myFunction" function,
| | 04:28 | and press "return" or "enter" so you have
an additional line break underneath it.
| | 04:32 | Then to have that function be executed, simply type its name, "myFunction".
| | 04:39 | Make sure you also type an open parenthesis and end
parenthesis and a semicolon after it to end that function call.
| | 04:46 | Now just by saying its name means that this function
will be executed when the movie first loads.
| | 04:52 | So now if I test my movie, notice how now in the output window again I
see "Shane", cause those actions within that function is being executed now.
| | 05:02 | That's just one simple use and example of working
with and creating a function inside of Flash.
| | 05:07 | Again, if that doesn't make absolute sense to you,
don't worry about it because we're gonna be using lots
| | 05:11 | of functions throughout the remainder of the exercises in this title.
| | 05:15 | One other thing that I want to point out
about functions is that you can also assign,
| | 05:20 | as I briefly mentioned in a previous exercise, parameters to functions.
| | 05:24 | Now parameters are essentially variables contained within a function.
| | 05:30 | It allows me to be able to pass information to the function to
be utilized within the actions in that function any way I choose.
| | 05:38 | For example, I'm gonna go ahead and quickly create a button on the stage.
| | 05:43 | So I'm gonna hide my actions panel for a moment, create a new layer,
I'm gonna drag it underneath layer one, and then I'm just gonna go ahead
| | 05:50 | and quickly select my Rectangle tool, I'm gonna pick a
different fill color, and I'm just gonna draw a box on my stage.
| | 05:57 | This is gonna be my sample button.
| | 05:59 | Then with my Selection tool selected, I'm
gonna click and drag around that entire object.
| | 06:05 | And then I'm gonna press "F8" to convert that into a symbol.
| | 06:08 | I'm just gonna go ahead and give it a type of button symbol.
I don't need to give it a name right now, and then click "OK".
| | 06:15 | So that is now a button symbol.
| | 06:17 | Now if I want my Function that I created in the first key frame of layer
one called "myFunction" to be executed when the viewer clicks on this button.
| | 06:26 | I'm gonna make sure that I have that button selected,
and then I'm gonna open up the actions panel.
| | 06:31 | In the script pane of the actions panel I'm gonna type on open
parenthesis, release, then type a close parenthesis, space,
| | 06:43 | open curly brace, a couple of line breaks, and a close curly brace.
| | 06:48 | Then click in that empty line break in between the open and close curly
braces, and then type the name of the function that you want to be executed
| | 06:57 | when the viewer clicks on this particular button on the stage.
| | 07:00 | Again, the name of that function is called "myFunction".
| | 07:03 | If you want to make sure that you get the spelling and
capitalization correct, you can simply select the key frame
| | 07:08 | that has your action script assigned to it, select the name of that
function, in this case we're already called it before so I'm gonna select
| | 07:16 | that action, control click or right click on that and choose "copy".
| | 07:20 | And then I'm gonna go back and select that button on the stage
back in my actions panel in the empty line break after on release,
| | 07:29 | I'm gonna click there, right click or control click and choose "paste".
| | 07:33 | So when the viewer clicks on this button it's gonna execute "myFunction".
| | 07:38 | Now so that this function is only executed when the viewer clicks on it, I
also want to make sure that back here in the first key frame of layer one
| | 07:46 | that I remove the "myFunction" call where it's
automatically executed when the movie first loads.
| | 07:52 | So I'm gonna go ahead and delete that last action.
| | 07:56 | So now if I test my movie, notice that nothing immediately appears,
| | 08:01 | but if I click on this button it's gonna pop open the output
window with the variable value of "Shane" inserted into it.
| | 08:08 | So you can see that this function here on the
first key frame of layer one that we created inside
| | 08:13 | of the "myFunction" function is being executed
when the viewer clicks on that button.
| | 08:19 | Now again, if I utilized a parameter in this case, I could
have that button send some information to this function
| | 08:27 | that could then be utilized in the actions within it.
| | 08:30 | Now to create a parameter you simply click between the
open and close parentheses after the name of the function,
| | 08:37 | so here again in the first key frame of layer one where it
says function "myFunction", open parenthesis, end parenthesis.
| | 08:43 | Click in between those two parentheses,
and then type in the name of the parameter.
| | 08:48 | And again, this is just like creating a variable.
| | 08:51 | You can give it whatever name you'd like, just make sure
that you stay away from spaces and special characters.
| | 08:56 | So I'm simply gonna call this "MyParameter."
| | 09:00 | And because in this example I'm gonna be having
this parameter hold a string of text for me,
| | 09:06 | I'm gonna assign it to the strict type of
string by typing a colon string, like so.
| | 09:14 | And then what I want to do is take the name of my parameter,
| | 09:17 | and then wherever I want to utilize this parameter I
would insert it here in the actions within this function.
| | 09:24 | So what's gonna happen is when the viewer
clicks on the button on the stage,
| | 09:27 | I'm gonna have it send a bit of text, a string of text to this function.
| | 09:32 | And then I want that string of text to be
utilized within the actions in this function.
| | 09:39 | So what I'm gonna do is I'm gonna replace the string of text
Shane in the "myVar" variable with my parameter called "myParameter".
| | 09:46 | So I'm gonna select all of "Shane", including the open
and close quotation marks, and then type "myParameter".
| | 09:55 | Again, you can sort of think as a parameter as simply as a placeholder.
| | 09:59 | It's just almost like a variable.
| | 10:02 | And then you're going to define the value of that variable,
in this case on the button that the viewer's clicking on.
| | 10:08 | So when I click on the button you're gonna send the value of this
"myParameter" value, you're gonna send that value to this function,
| | 10:17 | and instead of "myParameter" it's gonna have
in there whatever value you sent to it,
| | 10:22 | and that is then gonna be placed wherever you've used
that same parameter name throughout your actions.
| | 10:28 | Back inside of the button that's on the
stage, I'm gonna select that button,
| | 10:34 | go back and open up the actions panel again, and
here you can see it says unrelease "myFunction."
| | 10:40 | Well I want to pass a parameter to that "myFunction" function.
| | 10:44 | So click in between the open and close parentheses after
"myFunction", and here is where you would define what value
| | 10:52 | of that parameter you want to send to that function.
| | 10:55 | And then within those parentheses type quote, and then
whatever value you want to send to that function parameter.
| | 11:01 | In this case I'm gonna have it send the string of text "Shane,
just like we originally defined inside of the "myVar" variable.
| | 11:09 | So now when I test my movie, and I click on that button, I'm gonna
see in the output window the same results that I did previously.
| | 11:17 | And you may be thinking well that's a lot of work for the same
results, but let me show you where this comes in to be an advantage.
| | 11:23 | When I close the output window, and then close my preview window, and then
on the stage I'm gonna select my button, and I'm gonna make a copy of it
| | 11:31 | by holding down my "control" and "shift" keys, or on Mac
the "option" and "shift" keys, and I'm gonna drag that down.
| | 11:38 | Then with the copy of the buttons selected, I'm gonna go back and open my
actions panel again, and this time in the "myFunction" call I'm gonna change
| | 11:47 | that string of text to be something else, like lynda.com for example.
| | 11:52 | Then when I test my movie, and I click on the topmost
button, in the output window I get the same results, "Shane".
| | 12:00 | But when I click on the bottommost button, you can
see that in the output window it returns Lynda.com.
| | 12:07 | Now they're both executing the same function,
but the difference between the two is
| | 12:12 | that each button is passing a different parameter to that function.
| | 12:17 | In other words, by using parameters, you can have a single function perform
and do different things, depending upon the parameters that you pass to it.
| | 12:26 | Now if you can get your mind around that concept, it's a really
powerful feature of working with action script inside of Flash,
| | 12:33 | and it's one that you'll see being used throughout
the other exercises in this video title as well.
| | 12:39 | So that is the basics of how you can both create and use a function,
as well as both create and use parameters within a function.
| | 12:47 | And again, we're going to be using functions a
lot throughout the exercises in this title.
| | Collapse this transcript |
| Creating the master .swf and building the MovieClipLoader| 00:01 | >> One of the main focuses of this title is learning how to take
an entire website, break it up into individual modules or pieces,
| | 00:10 | and then load those in, as it's required,
into one main master container file.
| | 00:17 | That one main master Flash file is going to act as the
container for all the other pieces of the website to load into.
| | 00:25 | It's also going to be the container to hold a lot of the action
script that is continually re-used throughout these other modules.
| | 00:32 | That way you minimize the amount of action
script that you have to continually rewrite.
| | 00:38 | This makes it easier on you as you go and need to update that
action script at a later time, because instead of having to go
| | 00:45 | and update all this action script and the various pieces of your website,
| | 00:50 | you only have to go to one defined location
and update your action script once there.
| | 00:55 | And then, because all these other modules use that same one master
script, for example, you only have to update it that one time
| | 01:04 | and then all those modules will then use
that one updated block of action script.
| | 01:09 | So what you're about to do is to create the master.fla file.
| | 01:14 | Now, this master.fla file, as I mentioned, is going to act as
the container that the other modules of the website load into.
| | 01:22 | In addition to that, it's going to act as
the container to hold reusable action script
| | 01:27 | that you will use throughout most of these modules in the website.
| | 01:31 | Inside of Flash, the first step is to create a new blank Flash document.
| | 01:37 | Then, let's change the stage size so that it
fits the size of the website that we've designed.
| | 01:43 | Open up the document properties.
| | 01:46 | Again, there are various ways to do that.
| | 01:47 | One easy way is to use the keyboard shortcut, which
is "control" "J" on Windows or "command" "J" on the Macintosh,
| | 01:54 | and set the dimensions to 600 pixels wide by 400 pixels high.
| | 01:59 | Then, change the background color of the stage by clicking on the
background color swatch and then at the top of the swatch's palette,
| | 02:06 | let's change the hexadecimal value, which is the pound sign
followed by a series of letters and numbers, to "B4CCE5".
| | 02:13 | That's sort of a desaturated blue color.
| | 02:18 | Once you type in that hexadecimal value, simply press "return" or
"enter" and that will be chosen as the background color of the stage.
| | 02:29 | Lastly, change the frame rate from 12, which
is the default, to 21 frames per second.
| | 02:35 | Now, because we're also going to want these same settings for the other
modules that we create that make up this website, instead of having to go
| | 02:43 | and reenter in all these same values, the dimensions, the color,
| | 02:46 | the frame rate and so forth each time you create a new
FLA, go ahead and click this button called "Make Default".
| | 02:54 | When you click that button nothing special happens, but what has just
happened behind the scenes is that Flash has taken all of these values
| | 03:02 | that you specified here in the document properties dialog box and it
will now use those as the default every time you create a new FLA file.
| | 03:10 | That saves you a little bit of work down the line.
| | 03:12 | And then go ahead and click "OK" to have those document
properties applied to the FLA you're currently in.
| | 03:18 | Next, let's go ahead and save this FLA into
the correct location, so choose "File", "Save".
| | 03:25 | On your desktop earlier, you should have copied the exercise folder
called "LA Eyeworks", again, if you have access to the exercise files.
| | 03:35 | If you don't have access to the exercise files, on your
desktop, make sure you create a folder called "LA Eyeworks".
| | 03:42 | Within that folder, create another folder called "Site".
| | 03:45 | For those of you that do have access to the exercise files
and have copied the "LA Eyeworks" directory onto your desktop,
| | 03:52 | you should already see a folder in there called "Site".
| | 03:55 | Go ahead and double-click on that folder to open it up.
| | 03:58 | As you can see, for those of you that do have access to the exercise files,
there are already quite a few provided FLA files as well directories.
| | 04:06 | However, for right now, just again make sure you're inside that
site directory and let's give this FLA a file name of "Master".
| | 04:15 | On Windows it will automatically enter the .fla for you.
| | 04:19 | If you're on the Macintosh, you'll probably
want to make sure that you type "master.fla".
| | 04:24 | Then save this FLA into that Site folder.
| | 04:27 | Now, whenever we publish this master file to create the
SWF, it's going to be published in that same directory.
| | 04:33 | That site directory is going to contain all the files and
media that is going to comprise the "LA Eyeworks" website
| | 04:40 | that you're building throughout this title, so make sure you
keep a close eye and keep close tabs on that site directory
| | 04:46 | as that represents the entire site that you're building.
| | 04:49 | Next, go ahead and import the bitmap graphic that is going
to be in the background of all of the entire website.
| | 04:57 | So again, still in master.fla, choose ?File?, ?Import?, ?Import the Stage?,
| | 05:04 | or just simply use the keyboard shortcut ?control?
?R? on Windows or ?command? ?R? on the Macintosh.
| | 05:09 | And then on your desktop, for those of you that have access
to the exercise files, open up "LA Eyeworks", ?Resources?, ?Bitmaps?,
| | 05:19 | and then in the ?Import? window, choose the file called ?BG?.
| | 05:23 | This is a JPEG graphic.
| | 05:25 | Once you've selected that file, go ahead and double-click on
it to have Flash import it and place it onto the background.
| | 05:31 | Now, with that JPEG graphic selected on the stage, in the Properties
Inspector, make sure it's set to be at X0Y0, which means that the top left
| | 05:41 | of this bitmap graphic, there's a line at the top left of the stage.
| | 05:46 | You'll also notice in the Properties Inspector
that the width and the height
| | 05:49 | of this JPEG graphic are the exact same size
that you created for this FLA, 600 by 400.
| | 05:55 | So that way, this bitmap graphic is the exact same size
as the stage and it's aligned correctly with the stage.
| | 06:02 | Now, because this master.fla file is going to act as the container for
all the other modules to load into, this background JPG graphic is going
| | 06:10 | to be present throughout all the modules in the website, so as each module
loads in, you'll still be able to see this JPEG image in the background.
| | 06:19 | Now for those of you that don't have access to the exercise
files, you can leave out this bitmap graphic if you'd like
| | 06:25 | or you can create one at that looks similar yourself.
| | 06:28 | And all it is is just a little dark around the edges.
| | 06:32 | That's it, just to give it a little extra look and feel.
| | 06:35 | Rename layer 1 to be titled ?BG? and then go ahead and lock that layer.
| | 06:41 | That's the only thing that's going to be inside that layer.
| | 06:44 | Then, create a new layer and rename that layer to be titled ?A? for actions.
| | 06:50 | You can lock that layer as well.
| | 06:52 | Locking a layer doesn't prevent you from adding
action script to key frames in that layer.
| | 06:57 | It only prevents you from modifying what's on the stage in that layer.
| | 07:01 | Since this layer, the ?A? layer, the actions layer,
is only there to hold actions in key frames
| | 07:07 | that we assign to it, we can go ahead and keep it locked.
| | 07:11 | Select the first key frame in the A layer and open up your
actions panel by pressing ?F9? on Windows or ?option? ?F9? on Macintosh.
| | 07:20 | What we want to do now is to create an object called the Movie Clip Loader.
| | 07:25 | The Movie Clip Loader class itself will allow us to
dynamically load in SWFs, JPEGs, PNGs and GIF files.
| | 07:34 | The ability to load in PNGs and GIFs is new to Flash 8.
| | 07:37 | The Movie Clip Loader class itself was introduced in Flash
MX 2004, but it can only load in SWF files and JPEGs.
| | 07:45 | But now in Flash 8, you can also load in GIF files as well as PNG files.
| | 07:50 | And the neat thing about being able to dynamically load
PNG files is that you can have PNG files with transparency.
| | 07:56 | So now you can load in dynamically images and have the
transparent parts of those PNG files still be present for your use.
| | 08:03 | So it allows you to do a lot more dynamically,
visually, with your Flash documents.
| | 08:08 | When creating an object from something like the Movie
Clip Loader class, you want to assign it to a name.
| | 08:14 | That way, as you create the object, it has a
unique name that you can refer to it as later.
| | 08:20 | So if you wanted to tell it to do something,
you simply refer to it by the name you give it.
| | 08:25 | So the first step is to type ?var?, space, ?myMCL?.
| | 08:30 | And again, make sure that you're in the very first key frame in the A
layer since that A layer is going to hold all of our actions for us.
| | 08:38 | So essentially, this creates a variable called ?MyMCL?.
| | 08:42 | Let's strict type it so that that variable
only holds Movie Clip Loader objects.
| | 08:47 | So after ?myMCL?, making sure you have the spelling and
capitalization correct, type colon, Movie Clip Loader.
| | 08:57 | Then type space, equals, space, new, space, Movie Clip Loader, making
sure to capitalize the ?M? in Movie, the ?C? in Clip and the ?L? in Loader.
| | 09:10 | And then after that, type in an open parenthesis,
an end parenthesis, and then a semi-colon.
| | 09:16 | What that action does is it creates a new Movie Clip Loader object
from the Movie Clip Loader class and it assigns it to a name, ?myMCL?,
| | 09:26 | which is actually just a variable, and it strict types
that name ?myMCL? to the Movie Clip Loader data type.
| | 09:33 | So essentially all this does, just like if you have a movie clip and you
drag an instance of it onto your stage, that's exactly the same thing
| | 09:42 | that you've done here, just using action
script in the Movie Clip Loader class itself.
| | 09:48 | Now again, this Movie Clip Loader class is going to handle the loading
of SWF, JPEGs, PNGs and GIFs that comprise the LA Eyeworks website.
| | 09:57 | Now, when the Movie Clip Loader begins to download one of
those assets, it stops downloading one of those assets,
| | 10:04 | it's in the process of downloading one of those assets, whenever
it does any of that stuff, it's going to be sending out messages
| | 10:11 | so that we can then listen to those messages to
find out what the Movie Clip Loader class is doing,
| | 10:17 | what this particular object that we gave the name of ?myMCL? to.
| | 10:21 | What that means is that we can, by listening to that information
that this particular Movie Clip Loader class is broadcasting,
| | 10:29 | we can find out how much of the file that it is
downloading has been downloaded up to that point.
| | 10:35 | That will allow us to create a preloader.
| | 10:37 | We can also, by listening to when it's finished, tell the
preloader when to show itself and when to hide itself and so forth.
| | 10:45 | So, as this Movie Clip Loader object called ?myMCL? that you just
created is working and doing things, it's sending out messages.
| | 10:53 | We need to create another object that listens to what this Movie Clip
Loader object is broadcasting, the messages that it's sending out.
| | 11:01 | So after the action that you just wrote, type another line break and then
type ?var?, space, ?myListener?, colon, object, space, equals, space, new,
| | 11:19 | space, object, open parenthesis, end parenthesis,
semi-colon to end that action.
| | 11:25 | So what this action does, which is very similar to the first action
that you just wrote, is that it creates a variable called ?myListener?.
| | 11:33 | It assigns that to the object data type
and, within that, it inserts a new object.
| | 11:40 | Now in layman's terms, what that does is it just
creates, essentially, an empty container, sort of like,
| | 11:45 | if you had a movie clip that you dragged onto
your stage and there was nothing inside of it.
| | 11:50 | What we're going to do, though, is tell our Movie Clip Loader object that
this listener object that we just created is going to be assigned to listen
| | 11:59 | to this My MCL Movie Clip Loader object, so it's
sort of like creating the ear and then saying, hey,
| | 12:05 | ear, you're supposed to listen to this thing right here.
| | 12:08 | So after your new object action that you just wrote, press return
or enter a couple of times to create a few empty line breaks.
| | 12:16 | Then type ?myMCL?, again making sure you have the
spelling and capitalization correction, dot add ?listener?,
| | 12:28 | open parenthesis, and then the name of the listener.
| | 12:30 | Well the listener you created, the listener object,
is called ?myListener:, close parenthesis, semi-colon.
| | 12:38 | So that action just says hey, this object called ?myListener? is going
to listen to what this Movie Clip Loader object called ?myMCL? is doing.
| | 12:47 | Now, before you go much further, let's save the changes that
you've made to this FLA, and the next step you're going to get
| | 12:53 | into is loading the splash graphic that is going to be
displayed when the viewer first comes to your website.
| | 13:00 | Let's take a look, however, at where that splash graphic is located at.
| | 13:05 | For a moment, go ahead and hide or minimize Flash 8, and then for those of
you that have access to the exercise files, open up the LA Eyeworks directory
| | 13:14 | on your desktop, then open up the site directory within there.
| | 13:18 | This is where you saved your master.fla file.
| | 13:21 | You can see it right here.
| | 13:23 | In there, amongst the provided FLA and directory and
SWF files, you'll see a SWF file called splash.swf.
| | 13:31 | There's also the splash FLA file that accompanies it.
| | 13:34 | But for right now, we're just interested in the splash.swf file.
| | 13:38 | If you double click that splash.swf file to view it in the Flash
Player 8, you'll see that it's an animated SWF file that's going
| | 13:46 | to act as our splash graphic for the LA iWorks website.
| | 13:50 | What we want to do next is use the Movie Clip
Loader object that you just created in master.fla
| | 13:56 | to load the splash.swf file into that master container.
| | 14:02 | For those of you that don't have access to the exercise files, feel free
to go ahead and create a new FLA and create your splash graphic inside
| | 14:10 | of that new FLA and export it as a SWF called splash.swf.
| | 14:17 | Once you've taken a look at the splash.swf file, go ahead and
close at that Flash Player 8 window and go back to Flash 8 itself.
| | 14:24 | So now we know that the master FLA file that you're currently working
in, the one that you just created at the beginning of this exercise,
| | 14:32 | exists in the same directory that the splash.swf
file is, the one that we're about to load.
| | 14:37 | The reason why you want to make sure that you know where that
file is located at relative to your master file is because you're
| | 14:44 | about to instruct the Movie Clip Loader object to load that SWF file in.
| | 14:49 | Well, you have to know where that SWF file exists so
you can tell Flash where it is to be able to load in.
| | 14:54 | Making sure that you're still in the very
first key frame of your A layer in master.fla,
| | 15:00 | inside of your actions panel, click after the last action you wrote.
| | 15:05 | Then press Return or Enter a few times to create a couple line breaks.
| | 15:09 | Let's write the action to load the splash.swf file in using our
new Movie Clip Loader object, so type first it's name, ?myMCL?.
| | 15:19 | We're going to tell that Movie Clip Loader object to do
something, so we talk to the name that we assigned to it.
| | 15:25 | Then type .loadclip and notice, again, as you start to type it, it opens
up that little box and highlights what it thinks you're about to type.
| | 15:34 | If it is highlighting Load Clip, you can just press return
or enter and Flash will automatically complete it for you.
| | 15:40 | After Load Clip, make sure that you've typed an open parenthesis and then,
in quotation marks because the file that you want to load is a string
| | 15:49 | of text, type "splash.swf" Now, if splash.swf existed in another directly,
| | 15:59 | you would want to make sure that you'd specified
the name of the directory here in the file name.
| | 16:04 | For example, if I had a separate directory called SWFs, I would
want to make sure that I specified that here within the quotes.
| | 16:10 | So before splash.swf I would type SWFs, forward slash.
| | 16:15 | That forward slash says that that's the
directory name to the left of that forward slash
| | 16:19 | and then after that forward slash is the actual name of the file.
| | 16:23 | However, again, as I mentioned, because splash.swf exists in the same
directory as master, I don't need to specify any sort of directory name.
| | 16:32 | After the quotation mark, after splash.swf, click there
and then type comma, space, and then the number 5.
| | 16:42 | When you're loading an asset such as a SWF, JPEG, PNG or
GIF file, using the Movie Clip Loader class into Flash,
| | 16:49 | it needs to know where it is going to load that content into.
| | 16:52 | Now you can choose to load it into a level, which is like an invisible
layer above your master.fla file, the FLA file that you're currently in,
| | 17:01 | and you can do that by just typing in a number here.
| | 17:04 | So this is essentially loading it into a layer
that is five layers above the stage of master.swf.
| | 17:11 | And again, you can type in 1, you can type in 20, it doesn't matter.
| | 17:16 | The master.fla stage is considered to be level 0.
| | 17:22 | Now, if you wanted to instead load this content into a movie clip that you
created, when you dragged an instance of that movie clip onto the stage,
| | 17:30 | you'd want to make sure that you first give it an instance name by
selecting it and giving it an instance name in the Property Inspector,
| | 17:37 | and then you can specify the instance name
of that movie clip here in quotation marks.
| | 17:42 | However, because we're just loading splash.swf above the stage of
master.fla, you can just simply type the invisible layer number, 5,
| | 17:54 | which is called the level, that we want to load that content into.
| | 17:57 | And then type in ?N?, parenthesis, and a semi-colon to end that action.
| | 18:03 | Let's test this to see if it works.
| | 18:05 | Again, go ahead and save your changes, and then choose ?Control Test Movie?
| | 18:09 | or just use your keyboard shortcut ?control? ?enter?
on Windows or ?command? ?return? from the Macintosh.
| | 18:16 | You should see that splash.swf file appear on the
stage here inside your master.swf preview window.
| | 18:23 | If that happens, you know everything has worked correctly.
| | 18:26 | What you've actually just done is taken one FLA file, one SWF, which is
your master FLA and when you preview, therefore, your master.swf file,
| | 18:34 | and loaded, using the Movie Clip Loader class,
another SWF file into it onto the stage.
| | 18:41 | That's really important and it's the first step of loading
many parts of the website into your master.swf file.
| | Collapse this transcript |
| What is a shared library?| 00:01 | >> You've seen how you can use symbols,
graphic symbols, movie clips, and so forth,
| | 00:05 | to reduce the file size of your Flash 8 movie when reusing
identical elements, but what if you've broken your Flash movie
| | 00:14 | up into multiple pieces just as you are going to
do as you work and develop the LA Eyeworks website.
| | 00:20 | Where you take the various pieces of the website,
break them up into their own Swiss and then load them
| | 00:26 | in using the Movie Clip Loader class as
you've just seen in the last exercise.
| | 00:31 | And what if you have a symbol that you
want to reuse in all of those SWF files?
| | 00:35 | Well traditionally you would just duplicate the symbol in
each SWF file, or in the case of if you're using text
| | 00:43 | and fonts you would just embed the font
face in each SWF where you're using it.
| | 00:48 | The bad thing is that that adds to the overall file size of the project.
| | 00:52 | Because you're causing the user to download the same symbol or the same
font outlines multiple times for each SWF file where it's being used.
| | 01:00 | But I mean, what can you do about it?
| | 01:01 | You can't have one symbol or one font being
used across multiple SWF files, can you?
| | 01:07 | You actually can.
| | 01:08 | That is something called a shared library and that's what you're going
to be using throughout the remainder of the exercises in this title.
| | 01:14 | As you'll see, creating a shared library and what
comprises a shared library is actually very simple.
| | 01:21 | A shared library is essentially an FLA file
just like any FLA file that you've ever created.
| | 01:27 | But in that shared library FLA file there's nothing on the stage.
| | 01:31 | Instead you create a bunch of content and
make them into symbols inside of the library.
| | 01:36 | Then you can assign linkage identification
information to the elements in the shared library.
| | 01:42 | Once you've done that, you can then take those shared elements
and bring them into the separate elements of your website.
| | 01:49 | When the viewer accesses your website, the part of
it that's using one of the shared library elements,
| | 01:55 | it will then trigger to download that shared element.
| | 01:59 | So essentially you can use those shared elements
in as many files as you want inside of your project
| | 02:04 | without ever adding to the overall download size of your movie.
| | 02:09 | A shared library element is not actually
embedded into the file that you drag it.
| | 02:14 | So for example, when you create a shared element in your shared library
and then drag that into another FLA, say you have a ten kilobyte image
| | 02:23 | that you have as a shared element and you drag into another FLA.
| | 02:28 | That ten kilobytes will not be added to
the overall file size of that SWF file.
| | 02:33 | It stays in the shared library.
| | 02:35 | So you can take a shared element and reuse it as many times as you'd like,
essentially it's like a symbol that you can reuse in separate SWF files.
| | 02:44 | The shared element and the host FLA file is basically
just an alias to the original item in the shared library.
| | 02:51 | So as you can imagine, and as you're probably seeing, it's a really
powerful ability being able to have a shared library with elements
| | 02:58 | that you're going to be reusing across multiple SWF files.
| | 03:01 | That's what you're going to be constructing and using in the next exercise.
| | 03:05 | 1
| | Collapse this transcript |
| Creating the shared library| 00:01 | >> Now that you have a basic idea as to what a shared library is,
let's go ahead and create a shared library that we will reuse elements
| | 00:09 | from throughout all the other modules
in the LA Eyeworks site.
| | 00:13 | For a moment go ahead and minimize or hide Flash 8, and then navigate
to the site directory, which is in the LA Eyeworks directory on your desktop.
| | 00:21 | For those of you that have access to the exercise files for this title,
| | 00:26 | you'll notice that inside of that site
directory is an FLA called ?sharedlib?.
| | 00:31 | For those of you that don't have access to the exercise files,
in Flash 8 just go ahead and create a blank FLA file,
| | 00:38 | and save it inside of this site directory,
and call it ?sharedlib?, just like you see here.
| | 00:44 | Then for those of you that do have access to the exercise files,
go ahead and double-click on that FLA to open it in Flash 8.
| | 00:52 | As you can see, inside of this ?sharedlib?
FLA file, there is nothing on the stage.
| | 00:57 | The only thing that's inside currently of this FLA is a
single library element that's a button called ?btn.arrow?.
| | 01:06 | It's just a button symbol, and inside of
that is a circle with an arrow pointing down.
| | 01:12 | Now right now this is an FLA just like any
other, it just has one element in the library.
| | 01:17 | But there's nothing distinguishable about this
FLA file that would define it as a shared library.
| | 01:24 | However, what we want to do is enable, to begin with,
this button symbol to be shared in other SWF files.
| | 01:32 | To do that, in the library panel of the shared
lib fla, select the button arrow button symbol,
| | 01:39 | and then right click or control click on that and choose ?linkage?.
| | 01:44 | When you do that, this linkage property's dialog box opens up,
and it gives you a few different check boxes under linkage.
| | 01:51 | Go ahead and check ?export for action script?,
which will automatically check for you export
| | 01:57 | in first frame, and then also ?check export for runtime sharing?.
| | 02:02 | That last one obviously sounds very much like being able to share that
element across multiple SWF files, which is in fact what it does.
| | 02:10 | Above that it says ?identifier?.
| | 02:13 | Now this is the ID name that's going to be
associated with this particular sharable item.
| | 02:18 | Let's go ahead and give this an identifier name of
?arrowBtn?, with a capital B in button, again all one word.
| | 02:26 | In this case I've abbreviated the word button, so it's just Btn.
| | 02:30 | Now this is the name, the unique name, that is
now associated with that particular button symbol.
| | 02:36 | When you're giving an identifier name to a shared library
element, just make sure that you follow the same naming rules
| | 02:43 | as if you were creating a variable, no spaces in
the name, no special characters, and so forth.
| | 02:48 | The Action Script 2.0 class field is irrelevant for what
we're doing at this point, but if you look down toward the bottom
| | 02:53 | where it says URL, it should automatically say ?sharedlib.swf?.
| | 02:58 | This is the URL for where this shared library element is gonna
be located at, the SWF file for this FLA when we publish it.
| | 03:07 | Just make sure in your URL field that it still says ?sharedlib.swf?.
| | 03:12 | After you've given it a name and made sure that those
three check boxes are checked, go ahead and click ?OK.
| | 03:18 | Now that button symbol can now be shared across other SWF files,
and it will then just be downloaded from this one shared library.
| | 03:26 | Now that you've created a button that can be shared, make
sure that you save the changes that you've made to this FLA,
| | 03:32 | and that you publish a SWF file from this FLA by choosing ?file publish?.
| | 03:39 | Now if you hide or minimize Flash for a
moment, and look inside your site directory,
| | 03:44 | you'll notice that in there now is a new SWF file called ?sharedlib.swf.
| | 03:49 | That's the shared library that contains
that shared button that you just created.
| | 03:55 | I can now use, as you will see later, that shared button
element in any of my other modules for my LA Eyeworks site.
| | 04:02 | Again, I can use it in one FLA, or I can use it in ten, but the only
overhead in the download of that element is the first time it's been used.
| | 04:11 | So the first time I use that shared arrow button,
it will be downloaded to the viewer's computer.
| | 04:17 | But if I use it once more, or a hundred times
more, it will not ever be downloaded again.
| | 04:23 | So again, it's much like the idea of a
symbol that you're using in your movie,
| | 04:27 | but this is across multiple SWF files, and
you can use it as many times as you'd like.
| | 04:32 | In the next exercise you're going to learn how to create a shared font that
you can use throughout all of the other sections in your LA Eyeworks website.
| | 04:41 | The advantage of this is it allows you to use the same typeface throughout
all these movies without adding to the file size each time you use it.
| | 04:50 | Without a shared library, if you were
using the same font in separate SWF files,
| | 04:56 | each time you use it Flash would embed the
outlines for that font in each of those movies.
| | 05:01 | So each time you use that specific type and embedded the
outlines, it adds to the overall file size of that SWF.
| | 05:09 | What you're gonna learn how to do in the next exercise on the other hand,
| | 05:12 | is to create a shared font that you can then use throughout all those other
SWF files that will not add to the file size of that particular SWF file.
| | 05:21 | You're gonna learn how to do that in the next exercise.
| | Collapse this transcript |
| Creating the shared fonts| 00:01 | >> So far in your shared library you have a button symbol
called Btn.arrow that you've made to be able to be sharable
| | 00:08 | in your other SWF files and your L.A. Eyeworks site.
| | 00:11 | But there's also fonts that you're going to be using throughout those other
SWF files that should also be made sharable in a shared library as well.
| | 00:19 | Make sure you're in Flash and that you have your ?sharedlib.fla? file
still open, also make sure that you can see your library panel.
| | 00:27 | At the top right of the library panel's an ?options? button.
| | 00:31 | Clicking on that allows you to choose various options.
| | 00:34 | The one you're looking for is one that says ?new font?.
| | 00:37 | Go ahead and select that option.
| | 00:40 | This will open up the ?font symbol properties? dialogue box.
| | 00:44 | Go ahead and choose, if you're on Windows, the font Bitstream Vera Sans.
| | 00:50 | Make sure that bold and italic are both unchecked.
| | 00:53 | If you're on Macintosh, for this step, you can also
make sure that the font chosen is Bitstream Vera Sans.
| | 01:00 | Then let's give it a name.
| | 01:02 | In the name field, go ahead and type ?Vera?.
| | 01:05 | Also make sure that ?Bitmap text? is unchecked, and at this
point the size in the size field here, is irrelevant.
| | 01:12 | So again, just make sure that the font is Bitstream Vera Sans and
that they ?style options? are both unchecked as well as is ?Bitmap text?.
| | 01:21 | Then click ?OK?.
| | 01:22 | In your library panel now, you'll now notice that there's
another element that says Vera and it has a little ?A? next to it.
| | 01:29 | That's now a font symbol.
| | 01:31 | But just like with the button symbol, you need to make it sharable.
| | 01:35 | To do that, right click, or control click on Vera, and then choose ?linkage?.
| | 01:41 | Simply check ?export? from action script, which will then automatically
check ?export in first frame? and then check ?export for runtime sharing?.
| | 01:50 | As you can see, the identifier has automatically been entered as
the same name that we gave that font symbol when we created it.
| | 01:56 | So the identifier is ?Vera?, which is exactly what we want.
| | 01:59 | So go ahead and leave it set to ?Vera? for now.
| | 02:02 | Then just verify that the URL is still
set to ?sharedlib.swf? and then click ?OK?.
| | 02:08 | So now that font symbol is sharable.
| | 02:11 | I can take that font symbol and use it in any of my
other FLA files and I won't be adding to the file size
| | 02:18 | of those SWF files when I use text that uses that shared font.
| | 02:23 | It's an amazing feature.
| | 02:24 | Now we're also going to be using Bitstream Vera Sans Bold,
Bitstream Vera Sans Oblique, and Bitstream Vera Sans Bold Oblique.
| | 02:34 | So we need to create three more of those shared fonts.
| | 02:37 | Again, inside the ?sharedlib? library panel,
click at the top right and choose again ?new font?.
| | 02:44 | This time, on Windows, make sure that the font is still set to Bitstream
Vera Sans and under ?style? make sure that only bold is selected.
| | 02:54 | Then for the name, give it a name of ?Vera Bold?, like so.
| | 02:58 | Now if you're on a Macintosh, from the font pull
down menu, you would choose Bitstream Vera Sans Bold.
| | 03:05 | And again, on a Macintosh, you would make
sure that the bold checkbox is not checked.
| | 03:11 | The way that Windows organizes its fonts as well as the variants
of each font differs from how the Macintosh organizes it.
| | 03:19 | So in this case, Windows and Macintosh users
have to follow slightly different steps.
| | 03:24 | So again, on the Macintosh you would choose, from the font
pull down menu, Bitstream Vera Sans Bold, whereas on Windows,
| | 03:31 | you would choose Bitstream Vera Sans and
then you would check the bold style checkbox.
| | 03:38 | On both platforms you would give it a name of ?Vera Bold?.
| | 03:42 | Then click ?OK?.
| | 03:43 | Just like you did with ?Vera?, you need to make it sharable.
| | 03:46 | To do that, right click or control click on the Vera Bold font symbol
in the library and choose ?linkage?, then check ?export for action script?,
| | 03:56 | ?export for runtime sharing?, and then just click ?OK?.
| | 04:01 | Let's do that again.
| | 04:03 | New font, I'm gonna choose, on Windows,
Bitstream Vera Sans, making sure that the bold
| | 04:10 | and italic style checkboxes are checked and
I'm gonna give it a name of ?Vera Bold Oblique?.
| | 04:18 | On the Macintosh, make sure that you select from the font pull down menu
Bitstream Vera Sans Bold Oblique, and then, again, on the Macintosh,
| | 04:26 | make sure that the two style checkboxes
for bold and italic are not selected.
| | 04:31 | The name on both platforms will be the same, ?Vera Bold Oblique?.
| | 04:36 | Then click ?OK?, right click or control click that
new font symbol in the library, choose ?linkage?,
| | 04:43 | check "export for action script", "export for runtime sharing", and click ?OK?.
| | 04:49 | Lastly, we just want a Vera Oblique, so add another new font symbol.
| | 04:54 | On Windows, make sure that the font from the
font pull down menu is Bitstream Vera Sans
| | 05:01 | and this time uncheck the bold checkbox so
that only the italic checkbox is selected.
| | 05:06 | On the Macintosh, you would choose Bitstream Vera Sans Oblique as the font.
| | 05:11 | Then on both platforms, in the name field,
give it a name of Vera Oblique and click ?OK?.
| | 05:21 | Lastly, right click or control click on that font face, choose
?linkage?, ?check export for action script?, ?export for runtime sharing?,
| | 05:31 | all the other options are automatically set for you, and just click ?OK?.
| | 05:36 | So now you have a sharedlib, shared library, that not only has
four fonts in it that are sharable, but a button symbol as well.
| | 05:45 | Now because you've made changes to this FLA, the last time you
published the SWF file, it just had the shared button in it.
| | 05:53 | You've made changes since then though, so you wanna make sure that any time
you make changes to your shared library, and any time you add more elements
| | 05:59 | to that shared library, you need to save the changes to
that FLA and then publish a new SWF file by choosing ?file publish?
| | 06:08 | so that it contains all of the new elements that you just added.
| | 06:12 | Now that you have your shared library completely fleshed out, in the
next exercise you're going to learn how to pre-cache that shared library
| | 06:20 | so that all the elements within that shared library are available
for you use in any other SWF file exactly when you need it.
| | Collapse this transcript |
| Precaching the shared library| 00:01 | >> The only slight difficultly with how shared library elements
work is that when you take a shared library element and you use it
| | 00:09 | in another SWF file in your movie, the first time that shared
library element is used it doesn't just have that one library element
| | 00:17 | in the shared library be downloaded, it actually forces all the
elements in your shared library to be downloaded all at the same time.
| | 00:24 | So even though in one of your other SWF files you may have only used
one of these elements and you would expect that only that one element
| | 00:32 | from the shared library would be downloaded that
one time, unfortunately that's not the case.
| | 00:37 | It actually downloads them all together, all at the same time.
| | 00:40 | Now that's not so bad, but it can be a bad thing if used improperly.
| | 00:44 | For example, if you didn't use one of your shared library elements until a
later point of your movie, when the viewer got to that point in your movie
| | 00:52 | that required that shared library element they'd
have to sit there and wait while they waited
| | 00:57 | for the entire shared library to be downloaded at that moment.
| | 01:01 | Obviously, that can cause some problems because depending upon the
size of your shared library, it could take anywhere from one second
| | 01:07 | to many minutes while the viewer waits for
that entire shared library to be downloaded.
| | 01:12 | What we're going to do is we're going to cause our shared
library to be pre-cached at the beginning of our movie.
| | 01:19 | That way all of our shared library elements will be available right at the
beginning and we can control exactly when that shared library is pre-cached
| | 01:28 | and ready to go, instead of it just happening whenever we happen
to use one of our shared library elements in one of our movies.
| | 01:36 | Before you continue inside of Flash 8, go
ahead and close your shared lib.fla file.
| | 01:42 | Now what we're going to do is we're going
to create a new FLA called "trigger".
| | 01:47 | And within the trigger.fla file, we're going
to place one of our shared library elements.
| | 01:53 | Then from within our master file, we're going to have that
trigger.swf file be downloaded right at the beginning.
| | 02:00 | When that happens, that's going to cause -- because it's using one of the
shared library elements -- the entire shared library to be downloaded.
| | 02:08 | Then from that point on, we can use any of
our shared library elements whenever we want
| | 02:14 | and they'll be used instantaneously because
they've already been pre-cached.
| | 02:18 | So the first step is to create this trigger file.
| | 02:21 | Inside of Flash 8, go ahead and create a new FLA.
| | 02:24 | An easy way to do that is to hold down "control" "alt"
on Windows, or "command" "option" on the Macintosh,
| | 02:31 | and then press "N". Because the last time we created
a new FLA, we clicked that "make default" button
| | 02:38 | in the "Properties" dialogue box it now has the same stage size,
| | 02:43 | the same stage color as well as the same frames per
second as that first movie we created for master.fla.
| | 02:50 | If yours doesn't because you didn't click on that button, don't
worry in this case because the trigger file is only being used
| | 02:56 | to trigger the downloading of the shared library assets.
| | 02:59 | It's not that big of a deal.
| | 03:01 | Then let's go ahead and save this untitled FLA file
into the site directory with the rest of our site files.
| | 03:08 | So in this new blank FLA file choose "file", "save",
navigate to your desktop, to your "LA Eyeworks" directory,
| | 03:18 | to your site directory and give this a file name of "trigger".
| | 03:23 | On the Macintosh you probably want to type dot
FLA at the end of trigger then just click "save".
| | 03:30 | Then let's just open up the library for the shared lib.fla file.
| | 03:35 | To do that, simply choose "file", "import", "open external library".
| | 03:43 | Again, inside the site directory, inside the LA Eyeworks directory
which is on your desktop, you should see sharedlib.fla.
| | 03:53 | Double-click on that sharedlib.fla file to open up just its library.
| | 03:57 | It should open up in its own panel as you see here.
| | 04:00 | And there you'll notice there are all your shared library elements
that you created, including the button symbol and your four fonts.
| | 04:08 | In this case, because we're just wanting our shared library to be
triggered to be downloaded, let's just utilize this one button symbol.
| | 04:17 | So take the button arrow button symbol from the sharedlib
library and drag it onto the stage of your trigger.fla file.
| | 04:27 | When you do that, you'll see that that shared button symbol
has also been inserted here into the trigger library.
| | 04:33 | Once you've done that, you don't need your sharedlib
library panel open anymore, so go ahead and close that.
| | 04:39 | Now just to verify that that button symbol is
actually shared inside your trigger library panel,
| | 04:45 | right-click or control click on that new button symbol and choose "linkage".
| | 04:50 | When you do, in the linkage properties dialogue box you should now
see that the check box for import for run time sharing is checked.
| | 04:58 | The URL where it's getting that symbol from is sharedlib.swf.
| | 05:02 | So as you can see here, it is actually importing
that library element to be used at run time.
| | 05:08 | I'm going to go ahead and click "cancel" to exit out of that window.
| | 05:13 | Now I'm also placing this button arrow off to
the side of the stage in the gray work space.
| | 05:18 | That way when the trigger SWF file first
loads into our master.swf as you'll see
| | 05:23 | in just a little bit, it won't actually even appear on the stage.
| | 05:27 | Next, go ahead and rename layer one to be titled "sharedlibasset".
| | 05:34 | Then, create a new layer and rename that new layer to
be titled "A" so we can enter in some action script here.
| | 05:42 | Lock the "A" layer, select the first key frame in that layer, and
then open up the "options panel" and click in the script pane.
| | 05:50 | Now what we want to happen is when trigger.swf
gets loaded into our master.swf file,
| | 05:57 | we want our trigger.swf file to trigger the playback of the master file.
| | 06:02 | In other words, the trigger.swf file is going to
trigger the downloading of the shared library.
| | 06:07 | And once that has happened, once that shared library has
been pre-cached we want it to tell the master.swf file
| | 06:14 | that it's okay to go ahead and play the rest of the content.
| | 06:17 | So when this trigger.swf file triggers the downloading and therefore
pre-caching of the shared library, it actually won't execute any
| | 06:25 | of the actions inside of our trigger.fla file until
that shared library has been completely downloaded.
| | 06:32 | Once that shared library has been completely downloaded,
then we can tell the master Flash file that it's okay
| | 06:39 | to go ahead and start playing the rest of the content.
| | 06:41 | So here inside of the first key frame of
our "A" layer for actions in trigger.fla,
| | 06:49 | let's tell that master file that it's "OK"
to go and play the rest of the content.
| | 06:54 | So here in the actions panel, type "_level zero.play".
| | 07:02 | Open parenthesis, end parenthesis, semi-colon.
| | 07:05 | Now remember the master.swf file is that SWF
file that all the other content loads into.
| | 07:12 | When you have a structure such as that, the master.swf
file is what is called level zero, it's at the very bottom.
| | 07:18 | Everything else loads into it.
| | 07:20 | So whenever from one of my other SWF files, whenever I
say level zero, that refers to the master.swf file.
| | 07:28 | So what I'm doing is I'm telling that master.swf file to play.
| | 07:32 | Again, the way this is going to work is trigger.swf
file, because it's using one of the shared library elements
| | 07:38 | on the stage, is going to be loaded into the master.swf.
| | 07:42 | And when the trigger.swf file gets loaded in, and
Flash sees that it's using a shared library element,
| | 07:48 | that will cause it to trigger the downloading and therefore
pre-caching of all of those shared library elements.
| | 07:55 | After it's downloaded all those shared library elements, it's
going to perform the action script inside of our trigger.fla file.
| | 08:03 | It's going to say, "Oh, tell the master.swf file to start playing now."
| | 08:07 | So once those shared library elements have been downloaded,
| | 08:10 | trigger.swf tells master.swf go ahead
and start playing the rest of the content now.
| | 08:16 | And that's all you need, and that's all that's
going on here inside of your trigger.fla file.
| | 08:21 | So make sure that you save your changes.
| | 08:23 | Now when you publish your trigger.fla file, you don't
want Flash to publish in HTML file along with the SWF.
| | 08:30 | You don't needed HTML file you just need
from your trigger file to publish the SWF.
| | 08:36 | So still in "trigger.fla", choose "file", "publish settings".
inside the "publish settings" dialogue box under "formats",
| | 08:46 | uncheck HTML so that when you say "file
publish", it only publishes the SWF file.
| | 08:53 | Then in this "publish settings" window, go ahead and click "publish",
which will publish that SWF file, click "OK" to close that window,
| | 09:02 | then save once more your trigger.fla file, and go ahead
and close that FLA file, you won't be needing that again.
| | 09:10 | If I hide or minimize Flash for a moment and go into my site directory,
| | 09:14 | in the LA Eyeworks directory on my desktop I can
now see that there is my trigger.swf file.
| | 09:20 | Again, in the same directory as the rest of my site.
| | 09:23 | Next, go back to Flash 8 and make sure that you're in master.fla.
| | 09:29 | In the first key frame of the "A" layer on line number six
currently, we have an action that loads in splash.swf.
| | 09:38 | But really, I want that action to instead load in the trigger.swf
file to trigger the pre-loading and the pre-caching of that shared library.
| | 09:48 | So instead of "myMCLloadclipssplash.swf,5"
I want it to actually be "trigger.swf".
| | 09:57 | First however, go ahead and select that action,
right-click or control click on it and choose "copy".
| | 10:04 | Then simply change "splash.swf" to "trigger.swf".
| | 10:09 | Now remember when our movie clip loader gets executed and it
loads "trigger.swf", "trigger.swf" will start to load in,
| | 10:17 | Flash will see that it's using a shared library element so
it'll start downloading and pre-caching that shared library.
| | 10:23 | When that's finished, that trigger.swf file will execute the
action in there which tells our master.swf file to start playing.
| | 10:31 | So what we're going to do is a little
further down the timeline in our master file,
| | 10:35 | we're going to add another action that starts
the viewing of the rest of the content.
| | 10:40 | So in master, select frame ten in your "A" layer, and add
a key frame there by pressing "F6" on your keyboard.
| | 10:48 | Now when the shared library has been pre-cached and the trigger.swf
file tells our master.fla, our master.swf file here to start playing,
| | 10:57 | the play head's going to start playing and it's going to reach ten.
| | 11:00 | Unless I do something, when the play head reaches
frame ten, which is the end of the timeline here,
| | 11:05 | it's going to just jump right back to the
beginning and start that process over again.
| | 11:10 | However, I want it when the play head
gets to frame ten, for it to stop there.
| | 11:14 | So with key fra,e ten selected in my "A" layer,
in master.fla, in the actions panel,
| | 11:20 | the first thing I'm going to do is I'm going to add a stop action like so.
| | 11:24 | So when the play head reaches that key frame it stops.
| | 11:27 | Then, at this point is when I want the
master file to load in the splash page.
| | 11:32 | The action to load the splash page if you remember, is one
that I just copied from key frame one just a moment ago.
| | 11:39 | So after my stop action I'm going to press "return" or "enter"
to create a line break, and then paste by choosing "control" "V"
| | 11:46 | or "command" "V" that action to load in splash.swf.
| | 11:50 | Now if you remember, the trigger.swf file on key frame one
that is being instructed to download is being instructed to download
| | 11:57 | and be displayed in level five, just like splash.swf is here.
| | 12:02 | So that means both the trigger.swf and splash.swf
are being told to load into the same level.
| | 12:08 | And in this case, that's okay.
| | 12:10 | Because once trigger.swf gets loaded in that
means that the shared library has also been pre-cached.
| | 12:17 | So that means that trigger.swf is no longer needed.
| | 12:20 | We only need it to trigger the downloading
and pre-caching of the shared library.
| | 12:24 | From that point on, we don't need it anymore.
| | 12:27 | So when splash.swf gets instructed to be downloaded here on
frame ten, we can have it load into that same level, level five.
| | 12:34 | And it'll just kick trigger.swf out and load splash.swf
in, in it's place and that's perfectly fine.
| | 12:41 | Then, because when the play head advances to frame ten,
we won't be able to see the background layer anymore.
| | 12:48 | It disappears after the very first frame.
| | 12:50 | So that we can continue to see that all the way to the end of the
timeline, make sure that you select frame ten in the BG layer,
| | 12:58 | and add frames up to that point by pressing "F5" on your keyboard.
| | 13:02 | That way as the play head advances you can still see that
background layer all the way out to the very last frame.
| | 13:07 | Then go ahead and select key frame one in your master.fla
file and one thing that's missing from this grouping
| | 13:13 | of actions that you have here is another stop action.
| | 13:17 | Because we now have multiple frames in the master.fla file, when this file
starts being downloaded to the viewer's computer and it starts playing,
| | 13:25 | it's going to automatically start playing through that play head.
| | 13:28 | We want the play head to stay here on frame one until trigger.swf
is downloaded and the shared library is downloaded and pre-cached.
| | 13:38 | Once that happens again, the action in trigger.swf is executed
which then tells the master.swf play head to start playing.
| | 13:46 | Only at that point is when we want the play head to start playing.
| | 13:49 | Until then it should be paused here on the very first frame.
| | 13:54 | What that means is that we just need to add a stop
action here on the first key frame of our master file.
| | 13:59 | So again in key frame one in the actions layer, click before the
very first action, press return or enter once to create a line break,
| | 14:08 | and then select that new empty line break at the top of the actions panel.
| | 14:12 | Then just add a stop action there.
| | 14:15 | So now that play head will stay paused on the first frame until
it gets told by trigger.swf that it's okay to start playing.
| | 14:23 | Lastly, let's go ahead and just make sure
that everything works as it's suppose to.
| | 14:27 | At this point, what should happen is that when the viewer first comes to
your website, master.swf is the first SWF file they encounter.
| | 14:35 | The first thing that master.swf does here on the
first key frame is it starts downloading trigger.swf.
| | 14:41 | All trigger.swf has in it is one of the shared
library elements on the stage and then an action
| | 14:47 | that says, "Tell master.swf to start playing."
| | 14:50 | That action of course, won't be executed until the
entire shared library and all the elements within it
| | 14:56 | that we're going to be sharing have been downloaded.
| | 14:59 | So trigger.swf starts downloading, it in turn starts downloading
to shared library elements, once all that has been downloaded
| | 15:07 | and pre-cached, it then tells master.swf to start playing.
| | 15:11 | Master.swf starts playing.
| | 15:13 | It reaches the last key frame here which stops it right there.
| | 15:16 | And then it loads the splash.swf file.
| | 15:20 | So that's how everything's currently set-up.
| | 15:22 | Go ahead and save the changes you've made
to master.fla and test your movie.
| | 15:27 | In the test movie, visually nothing has changed.
| | 15:32 | But let's see what's going on behind the scenes.
| | 15:35 | Inside of your preview window, choose view bandwidth profiler.
| | 15:39 | This will separate the window into three pieces.
| | 15:42 | In the bottom part is the actual visual portion of your SWF file.
| | 15:46 | On the right is a graph break down of the
file sizes of all the frames in your movie.
| | 15:50 | And on the left-hand side is a more data break down on what's going
on. How big each frame is, what's being download and so forth.
| | 15:57 | It's this top left portion of the window that we want
to give more room to, so we can see more information
| | 16:03 | about what is being downloaded and how the progress is occurring.
| | 16:06 | So make that part of your window as big as possible.
| | 16:10 | So I'm going to make my window as big as I can get it, and
then drag that vertical bar over to the right as much as I can
| | 16:18 | so I have as much space as I can for that top left portion.
| | 16:23 | Then I want to choose a modem speed to preview
the streaming download of this SWF file.
| | 16:29 | To do that again choose "view", "download
settings", and then you can specify a modem speed
| | 16:35 | to test how the SWF file will be viewed as it
is being streamed off of one of these speeds.
| | 16:41 | For now I'm going to choose a 56K modem to test this on.
| | 16:45 | Then I'm going to choose "view", "simulate download".
| | 16:50 | And what Flash will do is it will simulate how
it will be downloaded on a 56K modem.
| | 16:55 | Go ahead and choose simulate download and you can see
right now that it's downloading the sharedlib.swf file.
| | 17:01 | It says that the total file size is eighty-three
kilobytes and that it's about fifty percent finished.
| | 17:07 | Notice on the stage that it's just blank and empty.
| | 17:09 | You'll finish that in just a second.
| | 17:11 | Once that's all finished, it advances to frame ten and
then it downloads the splash.swf file and displays it.
| | 17:18 | So by looking here at the bandwidth profiler we can see that the
entire shared library is actually getting downloaded and pre-cached,
| | 17:26 | and that means that all the elements inside my shared library
can now be used in any of my other SWF files instantly.
| | 17:32 | That's exactly the results that you want to see.
| | 17:35 | In the next movie, we're going to clean this up a little bit.
| | 17:37 | Because right now when the viewer comes to your website and
they see your master.swf file, they sit there as you saw,
| | 17:44 | staring at a blank screen while the shared library
SWF file is being downloaded and pre-cached.
| | 17:49 | It would be better to give them a little visual feedback that tells them
that something is being downloaded, somethings happening, don't leave.
| | 17:56 | The site's not broken, everything is okay, and hang out
and wait while we pre-load and pre-cache this content.
| | 18:02 | You're going to finish this up in the next movie.
| | 18:04 | 1
| | Collapse this transcript |
| Creating a loading message| 00:01 | Now that you've verified that your shared library is being downloaded
and pre-cached appropriately, let's add a little text message
| | 00:09 | to the very first frame of your master.swf file that tells
the viewer that it is loading content because, again, right now,
| | 00:16 | all they see is a blank screen while the
shared library is being downloaded and cached.
| | 00:21 | Obviously that's not a very good thing to let the viewer just sit there
and stare at a blank screen and the slower their internet connection is,
| | 00:28 | the longer they'll be sitting there staring at that blank screen.
| | 00:31 | Back inside of Flash, if you still have your
preview window open, go ahead and close it.
| | 00:36 | So let's first go back to the master FLA file
and add a new layer to hold that loading message.
| | 00:42 | Go ahead and create a new layer and rename
this new layer to be titled loading message.
| | 00:48 | Now, it's good practice to always keep your actions layer, the layer
that's holding your actions, at the very top of the rest of your layers.
| | 00:57 | The reason why is because, as you've probably seen up to this
point, you can easily have many many layers inside of your document.
| | 01:05 | Instead of having to search through all the layers that you may have
in your FLA to try to find the layer that has your actions in it,
| | 01:12 | it's always best if you keep that layer all the
way at the very top above all the other layers.
| | 01:17 | That way you'll always know where to go to look
for your actions and the layer that holds them.
| | 01:23 | In the loading message layer, make sure you have
that selected and then select your Text tool.
| | 01:30 | In the Properties Inspector, let's change the font that's being used.
| | 01:34 | Now, the message that we're going to have
appear on the screen is just going
| | 01:37 | to say "loading assets", and we want that message to appear instantaneously.
| | 01:42 | In other words, we don't want to embed any font outlines for the font
that we choose because that would then take time for Flash to download.
| | 01:50 | Since we want it to appear instantly, let's just have
Flash use a font that's on the viewer's computer.
| | 01:57 | The ability for us to do that is something called a "device font".
| | 02:01 | So, in your "Properties Inspector", after you've
selected your Text tool from the font pull down menu,
| | 02:07 | scroll through until you find the font called "_sans".
| | 02:11 | The fonts with the underscores before them are called device fonts and that
means that they're just going to use whatever the default sans serif,
| | 02:19 | serif, or monospace typewriter font is on the viewer's computer.
| | 02:23 | So it's not actually adding any file size to the
overall SWF file by using one of these device fonts.
| | 02:30 | I'm going to choose underscore sans.
| | 02:33 | You notice when you do that, the font rendering
method is automatically set to use device fonts.
| | 02:40 | Then, I'm going to choose a color of black.
| | 02:42 | I'm going to make sure that faux bold and faux italic or not selected.
| | 02:47 | I'm going to make sure that my "text type" is set to "static text" and
then, again, making sure that my loading message layer is selected,
| | 02:55 | I'm going to click my stage, and I'm going to type "loading assets",
and then I'm going to press "escape" to get out of text editing mode.
| | 03:05 | Now, I can see that that text is a little small.
| | 03:07 | So with that text block still selected back in my properties
inspector, I'm going to change the font size from 9 to 11.
| | 03:14 | I'm going to also make sure that I have my text set to be align center.
| | 03:20 | That way, should I make any changes to it later,
it will stay automatically aligned in the center.
| | 03:25 | However, what I also want to do is make sure that this text block
itself is aligned, therefore, in the center of the stage as a whole.
| | 03:32 | To do that, simply select your Selection tool, make sure that
text block is still selected, and open up your Align panel.
| | 03:40 | You can do that easily by choosing "control"
"K" on Windows or "command" "K" on the Macintosh.
| | 03:46 | Then in the align panel, make sure that two stage button is depressed, and
then click on the "align horizontal center" button and "align vertical center".
| | 03:57 | Once you've done that, you can close the align panel again by
pressing the same keyboard shortcut "control" "K" or "command" K". So now
| | 04:05 | that "loading assets" message, it's aligned right in the center of the stage.
| | 04:09 | So that's the message the viewer is going to see as the
shared library assets are being downloaded and pre-cached.
| | 04:16 | However, once that has happened, and the playhead starts playing forward,
we want that message to disappear because the assets have been downloaded.
| | 04:25 | What that means is in your loading message layer select frame two
and add a blank keyframe there by pressing F7 on your keyboard.
| | 04:34 | So then the "loading assets" message only appears in the
very first frame as those assets are being downloaded
| | 04:41 | and as soon as they have finished being downloaded, and
the play has started playing, the message disappears.
| | 04:47 | Since you won't be needing that layer, or what's on the layer
again, make sure that you lock the loading message layer,
| | 04:53 | save the changes you've made to master.fla, and let's test our movie
one last time to make sure everything is working like we want it to.
| | 05:01 | So choose "control test movie".
| | 05:04 | Again, I'm going to maximize the amount of space my
preview window has so I can look at my bandwidth profiler.
| | 05:09 | I'm going to maximize the amount of space the top left of
my bandwidth profiler has so I can view more information
| | 05:17 | about what's being downloaded and what's going on inside of my SWF file.
| | 05:21 | I still have my 56K modem speed selected, so all I
need to do is choose view simulate download again,
| | 05:29 | and I can see my sharedlib.swf file is being downloaded but
now on the stage I see my message that says "loading assets".
| | 05:35 | So now the viewer knows that something is going on in the background.
| | 05:39 | Something is not broken.
| | 05:41 | That's why they're not seeing anything,
in fact, assets are being downloaded.
| | 05:44 | When that finishes, the message disappears.
| | 05:47 | It continues on to frame ten where the
splash.swf file is being downloaded.
| | 05:51 | Once it's downloaded, it appears on the stage.
| | 05:54 | Everything is hunky dorey and well with the universe.
| | 05:57 | So there, you now have the completed pre-cached downloaded shared library
and all of the elements inside of that shared library are now available
| | 06:06 | for immediate use in whatever SWF file you'd like to use them in.
| | 06:10 | In the next chapter we're going to start using some of those shared
library elements, particularly the font face in some scrolling text
| | 06:18 | that you're going to create on the stage of the "About Us" module.
| | 06:21 | However, congratulations on making it this far.
| | Collapse this transcript |
|
|
4. Using the LoadVars ClassPreviewing what you're building| 00:01 | >> In this chapter, you're going to learn how to utilize another
action script class called LoadVars to be able
| | 00:08 | to load text dynamically into another section of the LA Eyeworks website.
| | 00:13 | So you can get a better idea of what it is exactly
that you're building before you get started.
| | 00:18 | Open up your default web browser and navigate to
www.lynda.com/intflash8/laeyeworks
| | 00:33 | At that URL you'll see the sample LA Eyeworks sites.
| | 00:37 | From the top navigation bar, click on the link "About Us".
| | 00:42 | By default when the "About Us" section loads, the "Our
History" subsection loads and shows a bit of loaded text
| | 00:50 | that gives some information about the history of LA Eyeworks.
| | 00:53 | It's this particular section in the "About Us" module
that you'll be constructing throughout this chapter.
| | 00:59 | Most of it is constructed using the LoadVars class.
| | 01:03 | To take this text which exists in an external text file and use action
script to dynamically load it in to this text field that exists here
| | 01:12 | on the stage and then allow it to be scrollable with a little bit more
action script that is triggered when the viewer clicks on those buttons.
| | 01:20 | That's what you're going to be building.
| | Collapse this transcript |
| Importing the shared fonts| 00:01 | The first step for those of you that have access
to the exercise files is to open up a pre-built
| | 00:07 | "About Us" FLA module to begin working and constructing this section.
| | 00:12 | In the LA Eyeworks directory on your desktop, inside of the site directory,
you'll notice that there's a pre-built FLA called "aboutus.fla".
| | 00:22 | Go ahead and open that FLA open up inside of Flash 8.
| | 00:28 | Inside of that FLA you'll notice there's a few
things that have already been built there for you.
| | 00:33 | In the bottommost layer is a guide layer called "Available Space".
| | 00:37 | Inside of that layer on the stage has been imported a bitmap graphic.
| | 00:42 | It's a JPEG graphic called "availablespace.jpeg".
| | 00:46 | For those of you that don't have access to the exercise files, don't worry
about this background graphic, essentially that background graphic is there
| | 00:54 | so that, as we begin to develop our site inside of Flash, we can see,
based on the designs that we've done in our graphics editing program,
| | 01:03 | we can see how much space we have to work with as we
begin to construct this content here inside of Flash.
| | 01:08 | So it just gives us a better idea of the
amount of space we have to work with.
| | 01:12 | Above that, is another layer called "About Us" text and on the stage
is just a static text field with the text "About Us" inside of it.
| | 01:23 | Additionally, on the stage is a dynamic text field
as you can see down here in the Properties Inspector
| | 01:29 | when I have it selected that is set to be multi-lined.
| | 01:32 | So, if you don't have access to the exercise files, go ahead and create
that "About Us" static text as well as the dynamic text field beneath it
| | 01:40 | and to the right that gives us enough space
to display that initial text on the stage.
| | 01:47 | Additionally, in the library there are also two
movie clips: MC Our History and MC Our Staff.
| | 01:53 | The only thing inside of those movie clips is a bit of text inside of
dynamic text fields. One says "Our staff" and the other one says "Our history".
| | 02:03 | So, if you don't have access to the exercise
files, you'll need to create those yourself.
| | 02:07 | Now, the first step in this process is to import the shared fonts
| | 02:12 | so that we can utilize those shared fonts
where we're using text inside of this module.
| | 02:17 | Again, that way, as we're working with text
inside of this separate swift file About Us,
| | 02:23 | we won't actually be adding to the file size of this swift whatsoever.
| | 02:27 | That is the reason why we're using a shared library to begin with.
| | 02:31 | So, when you have Aboutus.fla open, make sure that's the only FLA
you currently have open, choose "file", "import", "open external library",
| | 02:42 | the navigate to your site directory and the LA Eyeworks
directory on your desktop and locate your sharedlib.fla file.
| | 02:50 | Double-click on the FLA file to open up
just the library for the sharedlib file.
| | 02:56 | Then, select all four of those shared fonts inside of the sharedlib
library panel and simply drag them into the About Us library.
| | 03:06 | As soon as you do that it makes a dynamic link
to those shared library elements so that, again,
| | 03:11 | these are essentially just referring to the originals.
| | 03:14 | They are like an alias that points to the original font symbols inside
of the sharedlib library but now that they've been imported into the
| | 03:22 | About Us library panel, we can then utilize those shared
fonts wherever we're using text inside of our About Us movie.
| | 03:31 | Once you've done that, you can go ahead
and close the "sharedlib" library panel.
| | 03:35 | Then on your stage in the Aboutus.fla file, click on the text "About Us".
| | 03:41 | In the Properties Inspector, again, as you can see it's a static
text field but from the font pulldown menu let's choose one
| | 03:48 | of the shared fonts that we just brought in to the "About Us" file.
| | 03:51 | Then from the font pulldown menu, scroll down in your font list
until you see the font Vera Bold with an asterisk next to it.
| | 04:00 | These four fonts here with the asterisks that follow those names, are the
four shared fonts that you just brought over from the sharedlib library.
| | 04:08 | In this case we want About Us to use the font
Bitstream Vera Sans Bold which we gave the name
| | 04:16 | when we created it inside of the sharedlib library of Vera Bold.
| | 04:20 | Go ahead and select that.
| | 04:22 | Now on Windows you'll also need to make the extra step of making sure
that the faux bold button is depressed in the Properties Inspector.
| | 04:30 | Then, click on the "dynamic text field" on the stage and, again,
in the Properties Inspector from the font pulldown menu scroll
| | 04:39 | until you locate Vera with the asterisks after
the name and then go ahead and select that.
| | 04:46 | So now the "About Us" text, as well as the text that
we'll eventually load into this dynamic text field,
| | 04:53 | are both using shared fonts that way they're not adding to
the file size of this About Us swift file when we export it.
| | 05:00 | Now that you've brought in your shared fonts and assigned them
to where you're using text inside of the aboutus.fla file,
| | 05:07 | in the next few exercises you're going to learn to both utilize
comments in your action script as well as write the LoadVars,
| | 05:14 | object that's going to handle the loading dynamically of that external
text and placing it inside of this dynamic text field here on your stage.
| | 05:23 | Before you continue on to the next movie, however, make sure
that you save the changes you've made to this aboutus.fla file.
| | Collapse this transcript |
| Adding comments| 00:01 | >> Before we continue much further and get more in-depth
with working with action script inside of Flash,
| | 00:07 | it's important that you have a good understanding
of something called commenting.
| | 00:11 | And commenting, as its name sounds, allows you to add
comments to your actions as you're working with them.
| | 00:18 | Now, adding commenting in your actions panel
actually serves a few different purposes.
| | 00:23 | One very important purpose is the ability for you
to comment your action script as you write it.
| | 00:30 | Now, while it may make great sense to you to what your actions are doing
as you're writing them, you also have to keep in mind that you may have
| | 00:37 | to come back to your Flash files and look and work with this
action script again six, eight, twelve months down the line.
| | 00:45 | So what may make great sense to you now may not
make great sense to you in a year from this point.
| | 00:51 | So commenting will allow you, as you come back to your action script at
a later point or, if a co-worker or somebody else is going to be looking
| | 00:59 | at your action script, to allow yourself to be able
to clearly define and state what is doing what.
| | 01:06 | So again, it makes more sense to you as you come back to
it later or if somebody else is going to be looking at it.
| | 01:12 | Another great use of commenting is to temporarily disable a
particular action by what's called commenting out an action.
| | 01:20 | You can prevent that action from being
compiled when you create your SWF file.
| | 01:25 | So essentially it temporarily disables the action so that, for example,
for troubleshooting purposes, you can temporarily turn that action off.
| | 01:34 | Let's take a look real quick at adding
a simple comment to your actions panel.
| | 01:39 | Here is just a sample function I wrote.
| | 01:42 | I'm going to click at the very beginning of that first
action, press "return" or "enter" to create a line break,
| | 01:48 | and in that new empty line break I created,
I'm going to type two forward slashes.
| | 01:53 | Notice as soon as I type that second forward
slash, they immediately become grayed out.
| | 01:58 | Flash grays out those two forward slashes
because that marks the beginning of a comment.
| | 02:04 | Then I can just type whatever comment I have.
| | 02:05 | I'm going to type space and say, "This is my sample function."
| | 02:12 | Notice, again, how that's all gray.
| | 02:15 | As you're working with action script, especially as your actions
become more complex, it will be very beneficial and useful to you
| | 02:22 | if you add simple comments like this one to your actions that
are descriptive as to what those particular actions are doing.
| | 02:29 | Again, so if you come back to this action script later or if
you're passing it on to someone else to look at or work with,
| | 02:36 | they don't have to sit there staring at this action
script and trying to figure out what it is doing.
| | 02:41 | If you leave them a nice, well-defined comment, they should have a
perfect understanding of what's going on inside of your action scripts.
| | 02:48 | So that is just a simple comment.
| | 02:51 | Now what if I wanted to temporarily disable this
action that says "var sample object equals new object?"
| | 02:57 | What if I wanted to take that action and prevent it from being
executed and compiled in the SWF file that I generate from this FLA.
| | 03:06 | I can temporarily take that action and, without deleting it -- which,
if I needed it later, I'd have to go back in there and rewrite it.
| | 03:13 | If I just wanted to temporarily disable it, I can
click before that action and type two forward slashes.
| | 03:21 | This is the same as adding a comment.
| | 03:22 | However, notice that as soon as I do that, not only do those two forward
slashes become grayed out, but also does everything else on that line.
| | 03:31 | That means that this action has been commented out and will
not be executed or compiled in the SWF when I publish the FLA.
| | 03:39 | So I have temporarily disabled this.
| | 03:41 | Again, rather than deleting it, because I may
need to go back and work with it again later,
| | 03:45 | I can just comment it out so that it's
not executed and compiled in the SWF.
| | 03:51 | However, what if I wanted to prevent this
entire function from being executed?
| | 03:55 | What if I wanted to comment out this entire function?
| | 03:58 | How would I go about doing that?
| | 03:59 | Do I have to put forward slashes at the beginning of every line?
| | 04:03 | That would be a hassle if I had a fifty-line function, for example.
| | 04:06 | There is actually a little easier way to do it.
| | 04:10 | I'm going to go ahead and delete those two forward slashes that I've
already written and then I'm going to click at the beginning of my function
| | 04:16 | and press "Return" or "Enter" to create another line break.
| | 04:19 | Then I'm going to click in that empty line break that I
just created and type a forward slash and an asterisk.
| | 04:26 | An asterisk is "Shift 8" on your keyboard.
| | 04:29 | Notice how now, everything after that has been grayed out.
| | 04:33 | That forward slash asterisk marks the beginning of my comment out.
| | 04:39 | Now, I need to tell it where to stop commenting out because I
may have actions underneath it that I still want to be enabled,
| | 04:44 | so I'm going to click after the last curly brace that ends that function.
| | 04:48 | Press "Return" or "Enter" and then just duplicate that comment, but in reverse.
| | 04:53 | So I'm going to type asterisk, forward slash.
| | 04:56 | And now if I were to have another action after that
point, like so, you can see how it's not grayed out.
| | 05:07 | That action is still functional and will still work correctly.
| | 05:10 | Everything in between the forward slash asterisk and
the asterisk forward slash is going to be commented out
| | 05:17 | and will not be performed when this FLA is compiled.
| | 05:21 | So that is a quick example of using commenting to both leave
yourself comments to make it easier for yourself or somebody else
| | 05:27 | to understand what's going on in your action script at
a later time, as well as using commenting to comment out
| | 05:34 | or temporarily disable the usage of action
script inside your actions panel.
| | 05:39 | Again, both those instances are very useful
and you're going to be seeing those quite a bit
| | 05:44 | as we work forward with the exercises in this training tutorial.
| | Collapse this transcript |
| Writing the LoadVars object pt. 1| 00:00 | >> In this exercise you're gonna write the LoadVars object
that is gonna deal with loading text that is external to Flash,
| | 00:09 | and bringing it in and utilizing it in your various modules.
| | 00:13 | In this case we're gonna write the LoadVars object that loads the external
text, and places it inside of the text field here on the "About Us" stage.
| | 00:22 | Now you might start to think that because we're gonna be loading text into
this FLA itself that we would then write our action script in this FLA.
| | 00:31 | In actuality however, because we're going to be utilizing
the LoadVars object throughout many of the modules,
| | 00:38 | because each of those modules is also going to load in dynamic text that is
external to Flash itself, instead of writing it in each of those modules,
| | 00:48 | we're gonna write it in the master.fla file so that we can
reuse that LoadVars object throughout all of the other modules.
| | 00:56 | Again, this goes back to just writing your action script one time,
and then being able to reuse that action script whenever you need it,
| | 01:04 | instead of writing the same action script over and over again, which
would just increase the amount of time it would take for you to maintain
| | 01:11 | that action, as well as fix any bugs that might occur.
| | 01:14 | So with your "About Us" FLA still open, hide or minimize
Flash for a moment, and then navigate to your site directory
| | 01:21 | in the LA Eyeworks directory on your desktop.
| | 01:24 | You should find in there the master.fla file that you created earlier.
| | 01:28 | Go ahead and open that up inside of Flash.
| | 01:31 | Then select key frame one in the "A" layer, and open up your actions panel.
| | 01:37 | It's here earlier where we wrote the movie clip
loader object, as well as the action that instructs
| | 01:42 | that movie clip loader object to load
the first external SWF, trigger.swf.
| | 01:46 | Now that you've learned more about commenting,
let's add a few comments to the actions panel
| | 01:52 | to help us later better identify what's going on inside this script.
| | 01:57 | Click after the stop action, press return
or enter once to create a new line break,
| | 02:03 | type two forward slashes, a space, and then a series of hyphens, like so.
| | 02:10 | Then type another space and two backslashes.
| | 02:13 | Again, a comment in its base form is just two forward slashes.
| | 02:18 | The only reason why I'm putting all of these
hyphens and the backslashes is just to make it
| | 02:22 | so that I can more clearly identify it
visually as I'm scanning through my actions.
| | 02:27 | So again, all you really need are the two forward
slashes, everything after that is entirely up to you.
| | 02:32 | I'm gonna click in between the two forward
slashes and the two back slashes at the end,
| | 02:39 | and then I'm gonna type a less than symbol, MCL, and a greater than symbol.
| | 02:45 | Again, this is so that as I scan through my action script I can clearly
see where the beginning of my movie clip loader, the MCL script is.
| | 02:54 | Then I should also define where the end of the movie clip loader script is.
| | 02:58 | So I'm gonna select that comment line, copy
it, click after the add listener action,
| | 03:06 | press return or enter once to create a new line
break, and then paste that same comment line.
| | 03:12 | This time in the comment line before MCL I'm gonna click and type
a forward slash to signify the end of the movie clip loader class.
| | 03:21 | Next let's add a comment before the load clip action so that we know,
| | 03:25 | again just visually scanning through our
actions, what this particular action itself does.
| | 03:31 | Click at the beginning of your myMCL.load clip action, press return
or enter once to crate a new line break, click in the empty line break
| | 03:40 | above that action that you just created, type two forward slashes,
a space, and then the comment trigger the MCL to load these assets.
| | 03:53 | So now again by adding that comment in there we can clearly see that oh
yes, that action there uses the movie clip loader class to load that asset.
| | 04:01 | Next let's add one more comment line that marks the
beginning of the LoadVars object that you're about to write.
| | 04:08 | Click after the last action in your actions panel,
which is the load clip action, and press return
| | 04:13 | or enter a few time to create a couple of line breaks.
| | 04:18 | And then remember I still have the MCL comment line in my clipboard.
| | 04:23 | So what I'm gonna do is I'm gonna paste that in
this bottommost empty line break that I've created.
| | 04:29 | Then I'm gonna change where it says MCL to instead read
"LoadVars", to mark the beginning of my LoadVars object.
| | 04:39 | Then click after that comment line, and press return or
enter again to create another empty line break beneath that.
| | 04:45 | This next action that you're about to write you're gonna see is very
similar to the movie clip loader action that you created earlier.
| | 04:52 | Let's start off by creating a variable name that
we're then going to assign our LoadVars object to.
| | 04:58 | So type var space mylv for my LoadVars, colon, LoadVars, space equals
space, new space LoadVars, open parenthesis, close parenthesis, semicolon.
| | 05:17 | And again, if you look at that action, you'll see many
similarities between how it's structured and how the action
| | 05:23 | that defines the movie clip loader object is also structured.
| | 05:27 | You start off by declaring a variable called
mylv, strict typing it to the LoadVars data type,
| | 05:33 | and then placing inside that mylv variable a new LoadVars object.
| | 05:39 | Now that you've added some commenting to your action script
here in master.fla, as well as created a new LoadVars object,
| | 05:46 | you're gonna pick this back up again in the next exercise where you're
going to expand more and add more functionality to that LoadVars object
| | 05:54 | to get it so that you can start loading information, text, from external
text files, and bringing that and placing it inside of your Flash projects.
| | 06:03 | Before you continue on to the next exercise, make sure that
you save the changes you've made to your master.fla file.
| | Collapse this transcript |
| Writing the LoadVars object pt. 2| 00:00 | >> Now that you've written your first LoadVars object, you might
think that the next step, somewhat like the Movie Clip Loader object
| | 00:08 | that you wrote earlier, would be to tell that LoadVars object what content
to load in, just, again, like you did with the Movie Clip Loader object.
| | 00:16 | Unfortunately, that's not really the case with the LoadVars object
when you're dealing with loading external text, external variables,
| | 00:23 | from a separate text file and then bringing that into your Flash project.
| | 00:26 | The reason why is because when you're dealing with transmitting information
over the internet, information being progressively downloaded off
| | 00:34 | of a web server for example, you need to
find out when all of that information,
| | 00:39 | all of those variables that is being downloaded using
this LoadVars object has been completely downloaded,
| | 00:45 | because only when it's been completely downloaded can you
actually do something with it, can you then take that text
| | 00:52 | and put it in the appropriate text field, for example.
| | 00:55 | So to do that, to be able to tell when it's been
completely downloaded and not just partially downloaded,
| | 01:00 | you're going to use something called an event handler.
| | 01:03 | Now, some objects, like the Movie Clip Loader object
as you'll see later and like our LoadVars object,
| | 01:09 | have the ability to find out how things are progressing.
| | 01:13 | So have your variables just started to be downloaded, have they
finished, how much have they been downloaded, and so forth.
| | 01:20 | You can find out that information by using event
handlers that are assigned to these particular objects.
| | 01:26 | So the first thing we're going to do is we're going to write an event
handler that is triggered when the text has been completely downloaded,
| | 01:34 | when our variables that we're going to load in have been completely loaded,
because again, at that point, we can then take that text, those variables,
| | 01:42 | and place it inside of a text field of our choosing.
| | 01:46 | So, again, still in master.fla with the
first key frame in your A layer selected,
| | 01:52 | in your actions panel, click at the end of the bottom-most action there.
| | 01:58 | Then, press Return or Enter a few times to create a couple line breaks.
| | 02:02 | Then, type the name of your LoadVars object, which
is myLV, dot, and then the name of the event handler.
| | 02:10 | I'm going to type onLoad.
| | 02:14 | Now, event handlers need to be assigned to functions, so after
onLoad, type space, equals, space, function, space, open parenthesis,
| | 02:24 | and then the parameter success, close
parenthesis, space, an open curly brace,
| | 02:32 | a couple of lines breaks and a closed curly brace to end that function.
| | 02:37 | So not only do we have an event handler, but when our LoadVars
object successfully downloads all of the variables from the text file
| | 02:45 | that we're targeting, it's going to broadcast the message out to the onLoad
event handler, and it's going to send a parameter that's going to be true
| | 02:53 | or false to the onLoad function that says whether or not it was successful.
| | 02:59 | If it's successful, and that's where this parameter
here comes in, it will send true to the onLoad function.
| | 03:06 | If not, it will send false.
| | 03:08 | Now, because this parameter here in the onLoad
function is going to be a true or false result,
| | 03:15 | we should strict type this success parameter to the data type of boolean.
| | 03:21 | Boolean is true or false.
| | 03:23 | So after success, click there, type a
colon and then start to type boolean.
| | 03:30 | Again, as you start to type it, you should
see a window pop open and highlight "boolean".
| | 03:35 | If you do, go ahead and just press Return or Enter
and Flash will automatically complete that for you.
| | 03:41 | Now at this point, you may be saying to yourself, how does he know
what the different event handlers are for the LoadVars object?
| | 03:49 | Like, how would I know that there is an onLoad event
handler and how would I get more information about that?
| | 03:55 | You can press F1 on your keyboard to open up the Help panel.
| | 03:59 | If you open up the action script 2.0 language reference book,
action script classes, and then scroll down to LoadVars,
| | 04:08 | there is lots of information about working with LoadVars in that book.
| | 04:12 | For example, if you scroll down, you can see the different event
handlers, such as On Data, On HTTP status, onLoad, and so forth.
| | 04:21 | So there is lots of information about working with the event handlers
as well as the LoadVars class itself inside of the Help panel.
| | 04:29 | So again, that's how I get the information about, when I'm
working with loading information, using the LoadVars object,
| | 04:35 | exactly what I can do with that LoadVars object
and what features are available for my use.
| | 04:41 | You can also see here again is says the onLoad
equals function, success, boolean, open parenthesis,
| | 04:47 | close parenthesis, which is essentially what you just created.
| | 04:50 | Back in the master.fla file, there is still
a few more steps that we need to take.
| | 04:55 | When we instruct the LoadVars object that we've
called myLV to load the variables from a text file,
| | 05:02 | once those variables have been completely loaded, the
LoadVars object is going to broadcast out a message
| | 05:08 | to the onLoad event handler saying whether or not it was successful.
| | 05:12 | Now, we need to be able to find out if that loading was successful or not.
| | 05:17 | To be able to do that, we need to set up a conditional.
| | 05:20 | A conditional is an if statement; if this happens, do this.
| | 05:25 | Otherwise, do this other thing.
| | 05:28 | So make sure that you're inside of the onLoad function.
| | 05:31 | You should have an empty line break in between the open
curly brace and the closed curly brace of that function.
| | 05:37 | Click on the empty line break.
| | 05:39 | Then type if, space, open parenthesis, success, closed parenthesis, space,
open curly brace, a couple of line breaks, and a closed curly brace.
| | 05:53 | Now, in the if conditional where it says "if success," that means if
it is true, in other words, if the data has been completely downloaded,
| | 06:02 | if the LoadVars object sends a message to the
onLoad event handler that it was successful,
| | 06:09 | that success is true in loading the variables
from a text file, what should happen?
| | 06:14 | Well, if the LoadVars object, myLV, was successful in getting the text from
this external text file that you'll see in a little bit and loading that in
| | 06:24 | and everything worked out okay, then what should happen?
| | 06:27 | Well, if that's true, then by gum, we want to take the text
that is inside of that text file and finally have Flash insert
| | 06:35 | that text into a text field so that we can actually see it.
| | 06:38 | That would be nice.
| | 06:40 | So click in the empty line break between the
if, open curly brace and the closed curly brace.
| | 06:47 | Then, you would want to specify where the text
field is that the text should be loaded into.
| | 06:54 | Now remember, in this case, because right now we're working on the "About
Us" module, if I switch over to that and look at the stage, in this case,
| | 07:02 | I want the text to be loaded into this
text field here in the "About Us" stage.
| | 07:07 | Now, keep in mind, we're writing this LoadVars object not
in the "About Us" module, but we're writing it in master.fla.
| | 07:15 | Again, the reason why we're writing it there is so
that we can use this same LoadVars class for all
| | 07:22 | of the modules that we'd like to throughout the entire site.
| | 07:26 | In other words, the action that you're about to write
that tells the LoadVars object to take the loaded text
| | 07:32 | and put it in the text field, it has to work throughout all of the modules.
| | 07:37 | It can't be specific just to this one "About Us" module, for example.
| | 07:43 | What that means is that when I tell Flash to take the text and put
it into a text field, I have to tell that action which text field.
| | 07:52 | What is the name of the text field to take that text and put it into.
| | 07:56 | All that that means for you as a developer is that when you're using, in
any of the modules, the LoadVars object to load text and then put that text
| | 08:06 | into a text field, is that the text fields that you're going to have
that text be inserted into should all have the same instance name.
| | 08:15 | That way, as you reuse the LoadVars object
that you've written into the master file,
| | 08:21 | it can stay the same no matter what module
you're using that LoadVars object for.
| | 08:27 | So back in master, in the first key frame in layer A, in
your actions panel, in the if statement in between the open
| | 08:35 | and closed curly braces, type in underscore level 5.
| | 08:40 | If you remember, level 5 is where we're
currently loading in the splash screen.
| | 08:45 | Now, as the viewer is navigating around, as you'll see in
a later chapter, as they're navigating around your website,
| | 08:52 | you're going to have all the contents load into that
center area where the splash screen currently is.
| | 08:59 | That is called level 5.
| | 09:01 | So, in this case, for this particular website, level 5
is going to be, really, the loading area for the website.
| | 09:08 | As the viewer selects a section of the LA Eyeworks website to
navigate to, it's going to load that content into level 5.
| | 09:16 | So again, as you'll see later with the "About Us" module, when
the viewer clicks on the "About Us" button in the navigation bar,
| | 09:24 | it's going to load that module into level 5, as well as
any other module, such as Frames, "Contact Us" and so forth.
| | 09:32 | So whenever you specify in your action script underscore level 5,
you're referring to the content that the viewer is currently looking at.
| | 09:41 | Now, in level 5, what do we want to do?
| | 09:43 | And again, remember this action is telling the currently loaded
module to take the loaded text and insert it into the text field.
| | 09:51 | What is the name of that text field?
| | 09:54 | Well, as of yet, you haven't given it a name,
which is what you'll do in just a minute.
| | 09:58 | The name that you're going to assign the text field to take the loaded
variable text and place it inside of is going to be called Loaded Info.
| | 10:07 | So after underscore level 5, type .LoadedInfo.
| | 10:12 | And again, when you're assigning an instance
name to a text field, as you're about to do,
| | 10:19 | you follow the same naming conventions as if you were creating a variable.
| | 10:23 | Make sure that it's all one word, make sure you have your
capitalization correct whenever you reuse that name again and make sure
| | 10:29 | that you don't have any spaces or special characters in the name.
| | 10:33 | So in this case, because I essentially have two words, Loaded Info,
| | 10:36 | I made them all one word by capitalizing
the first letter of the second word, Info.
| | 10:42 | That way, as I'm looking at it, I can see where the separation in words is.
| | 10:45 | Now, what do I want to do with that text field?
| | 10:48 | Well, I want to insert some text into that text field.
| | 10:52 | Not only that, but as you'll see later, you're going to
inserting HTML formatted text so that you can define things
| | 10:59 | as bold, define hyperlinks, and so forth within that text.
| | 11:03 | Because the text is going to be HTML formatted, we want that text
that is going to be inserted into that text field to be HTML text.
| | 11:13 | So after LoadedInfo, type .htmlText with a capital T in text.
| | 11:20 | Now, htmlText is simply a property that tells Flash that the text that
is being inserted into the text field is going to be HTML formatted,
| | 11:30 | so that any tags that reside in the text variables that you're
loading in that have HTML tags in it aren't just displayed by Flash.
| | 11:40 | Instead, they'll actually be parsed.
| | 11:43 | So when Flash sees an anchor tag, for example, instead
of just displaying that anchor tag in the actual body
| | 11:49 | of the text, it will parse it as an actual anchor tag.
| | 11:53 | So that's what this .htmlText property does.
| | 11:56 | So so far, you've told Flash where that text field
resides at and what it's name is and you're going
| | 12:03 | to insert some HTML formatted text into that text field.
| | 12:07 | Now, you need to tell Flash what text you're going to insert in there.
| | 12:11 | In the next exercise, you're going to tell Flash which
text file it's going to be loading the variables from.
| | 12:17 | Now, when you do that and Flash actually loads the variables
from the text file, it's going to place those variables
| | 12:26 | and its values in the LoadVars object that you've called myLV.
| | 12:32 | So when you want to get access to that loaded variables and values,
you're going to want to specify and tell Flash that they're in myLV.
| | 12:41 | So after .htmlText, click after that line and type space, equals,
space, myLV, which is your LoadVars object where the text will reside
| | 12:53 | in once it's been loaded, and then you need
to tell Flash what is the variable name
| | 12:59 | that has the value text that you want to be inserted into this text field.
| | 13:04 | You haven't yet created this, but the variable name that you're going to
assign to your text in the external text file is going to be called Info.
| | 13:14 | So after myLV, type .info.
| | 13:18 | Then type a semi-colon to end that action.
| | 13:21 | So in plain English, the actions that you've written
so far says create a new LoadVars object called myLV.
| | 13:29 | Once it's been detected that the text has been completely loaded into
Flash, the variable value pairs have been completely loaded into Flash,
| | 13:38 | take that text, take the value of the Info variable and place it within the
text field called Loaded Info and make sure that it's HTML formatted text.
| | 13:50 | Now that you've told Flash what to do, if
the text has been loaded successfully --
| | 13:55 | remember, this says if the text was loaded successfully, then do this.
| | 13:59 | Now that you've specified that, in the next exercise, you're
going to specify what should happen if that doesn't happen.
| | 14:07 | For example, if there was some problem locating the text file to
load or some problem in the loading process, what should happen then?
| | 14:15 | That's what you're going to specify in
your action script in the next exercise.
| | 14:20 | Before you continue, as always, make sure that
you save the changes to your master.fla file.
| | Collapse this transcript |
| Writing the LoadVars object pt. 3| 00:01 | >> Since you specified what should happen if your text has been
successfully loaded, you should also specify what should happen
| | 00:10 | if the text, for some reason, is not successfully loaded.
| | 00:13 | Again, make sure you're in master.fla, you have the first key
frame in the A layer selected and you have your actions panel open.
| | 00:22 | Then within your onload function, you
should see your conditional "if statement".
| | 00:28 | The if statement says if success, open bracket,
and then an action, and then a closed bracket.
| | 00:35 | Click after that closed bracket and type space, else, space, open bracket,
to mark the beginning of that else statement, a couple of line breaks,
| | 00:46 | and a closed curly brace to mark the end of that else statement.
| | 00:50 | The way an if conditional is structured is you say if this is true then
do this, otherwise, do this other thing, and that's what the "else" is.
| | 01:00 | The else means otherwise.
| | 01:03 | After the else you have an open curly brace
and then after that a closed curly brace,
| | 01:07 | to mark the beginning and the ending of what else should happen.
| | 01:11 | Now if the text does not load in for some reason, what should we do?
| | 01:16 | There's of course many different things that you could have happen,
but in this case we're gonna have a string of text be inserted
| | 01:22 | into this same loaded info text field, but of course, because
the text has not been loaded in, we can't tell that text,
| | 01:30 | as you have done within the if statement,
to go ahead and appear in that text field.
| | 01:34 | We're going to have an error message, instead, appear inside that text
field, so in between the open curly brace and the end curly brace,
| | 01:42 | after else, click in the empty line break, and target that same
text field that you did before, underscore level five.loaded info.
| | 01:54 | This time we're not going to put html formatted text in there, we're
just going to put plain text inside of that text field, so type .text.
| | 02:04 | then type space equals space, and we're just going to have a
string of text be put inside of that text field, so type quote,
| | 02:12 | there has been an error loading the requested information,
please contact the webmaster and report your error,
| | 02:33 | end quotation mark and a semicolon to end that action.
| | 02:37 | So what this currently says is, if the text has been
successfully loaded in, take the value of the info variable text,
| | 02:46 | which again you will specify that info variable later
inside of the text file that you're going to be loading,
| | 02:52 | take that text and insert it into the loaded
info text field as html formatted text,
| | 02:59 | otherwise just insert this bit of text inside that same text field.
| | 03:04 | And that bit of text, that you just wrote, is
essentially an error message that says I'm sorry,
| | 03:09 | but we couldn't load the text, contact the webmaster for help.
| | 03:13 | So there is your LoadVars object.
| | 03:16 | Now remember, you wrote this inside of the master.fla file.
| | 03:20 | So this LoadVars object that you wrote is going to be used and
reused throughout most of the modules in the LA Eyeworks site.
| | 03:28 | In the about us module, it's going to be used
to display the our history and our staff text.
| | 03:34 | In the frames module, it's going to be used to display
the information about each pair of eyeglasses frames.
| | 03:41 | So as you can see, it's going to be used quite a few different
times in the various modules that make up the LA Eyeworks website.
| | 03:48 | So you've spent time writing this LoadVars object
and the onload event handler to make it all work,
| | 03:55 | but the advantage is that you can reuse it throughout these other modules.
| | 04:00 | Because it is going to be reused, you've written it in such a way that
you can reuse it without being too specific about the exact SWF file
| | 04:09 | and the exact text field that all of this
content is going to be loaded into.
| | 04:13 | Now sure, you have specified that it is going to
be loaded into a text field called loaded info.
| | 04:18 | What that means is when you're working in the other
modules, such as about us, frames, and so forth,
| | 04:25 | that when you're going to be using this LoadVars object
to load text from a separate text file and place it inside
| | 04:32 | of a text field, that you name that text field loaded info.
| | 04:37 | That way your script will go oh, okay, I'm supposed
to load the text into that specific text field.
| | 04:43 | Next and last, let's go ahead and mark where the end
of this LoadVars object is using our commenting.
| | 04:51 | Again, still in the actions panel, select the
beginning LoadVars comment and copy that.
| | 04:57 | Then click at the bottom of the last closed
curly brace in the onload function,
| | 05:03 | press return or enter to create a new line
break and paste that comment in there.
| | 05:09 | Then simply click before the word LoadVars in that comment and
type a forward slash to mark the end of that LoadVars object.
| | 05:16 | Then simply make sure that you save the changes to your
master.fla file and because you've made changes to it,
| | 05:24 | you should publish a new SWF file from your master.fla.
| | 05:29 | So still in master, choose file, publish.
| | 05:33 | That way the master SWF file has the most up to
date action script that you've just written in it.
| | 05:39 | In the next exercise, you're gonna learn how to then use this LoadVars
object and target it from the about us module to load your external text
| | 05:49 | from a separate text file into the about us module
and have it be displayed just as you'd like.
| | Collapse this transcript |
| Loading the Our History text| 00:00 | >> Now that you've written the LoadVars object into
your master file, let's go and take a look at the text
| | 00:07 | that we're going to be loading in to the "About Us" module.
| | 00:11 | For a moment, hide or minimize Flash and then navigate
into your site directory, into the LA Eyeworks directory.
| | 00:19 | In there, you'll notice that there's another directory called Vars.
| | 00:23 | For those of you that don't have access into the exercise files, make
sure that you create a folder within your site folder called Vars.
| | 00:30 | Then open up that folder.
| | 00:32 | In there, you'll notice that there are a few
text files that have been provided for you.
| | 00:37 | One of them is called Our History.
| | 00:40 | Go ahead and open up that text file.
| | 00:42 | You can open it up on Windows in a simple text editor such
as Notepad, or on Mac OS10 you can open it up in Text Edit.
| | 00:49 | Any simple text editor will do, such as BB Edit, for
example, or even Word if you're working in plain text format.
| | 00:57 | In this text file is just a block of text.
| | 01:00 | If you don't have access to the exercise files, just
create a blank text file and fill it with some text
| | 01:06 | and save it as ourHistory, with a capital H in History, all one word, .txt.
| | 01:13 | Now, this is just a bunch of text.
| | 01:15 | Your LoadVars object doesn't just load a
bunch of text. It loads a variable value pair.
| | 01:23 | That means that you need to assign a variable to this text.
| | 01:27 | Inside of the ourHistory text file, click at the very
beginning before the words "Los Angeles" and type info, equals.
| | 01:37 | Remember, when you wrote your LoadVars object and you told Flash which text
field it was going to load it into, you said that the text you were going
| | 01:45 | to load into the text field was in the myLV
LoadVars object and it was called Info.
| | 01:53 | That's where Info here comes in.
| | 01:55 | That's the name of the variable.
| | 01:57 | Then you put an equals sign and then a bunch of text.
| | 01:59 | Make sure there is no space both before and after the equals sign.
| | 02:03 | That equals sign says to the left is the variable,
to the right is the value of that variable.
| | 02:11 | Now, we won't be dealing with this in this title, but if you wanted to,
| | 02:14 | you could have multiple variable-value pairs
in a single text file that you load into Flash.
| | 02:20 | You could do that by typing an ampersand, as you can see here at the
very end, the name of your next variable -- I'll call this Info 2 --
| | 02:29 | equals, and then a bunch of text as the value of that new variable.
| | 02:34 | And then if I wanted another variable-value pair, I could just
type in another ampersand, my next variable, and so forth.
| | 02:41 | So the ampersand inside of your text marks the separation between
the end of a variable-value pair and the beginning of another.
| | 02:50 | Now, at this point, some of you might actually be
wondering, what if you want to put an ampersand
| | 02:55 | and have it actually be displayed in the body of your text?
| | 02:58 | For example, maybe you had the name of a business that was like
Samson & Sons or something like that and you wanted the ampersand
| | 03:05 | to actually be displayed instead of having Flash think that
it's just a separation between a variable and value pair.
| | 03:13 | In that case, you need to use something called URL encoded text.
| | 03:17 | You can get more information about the various ways of displaying
special characters like that by going to Macromedia's website,
| | 03:31 | choosing their Flash support -- in this case, I'm going to the support
home -- and I'm choosing to search for Macromedia Flash support.
| | 03:41 | Search for the string URL encode, like so.
| | 03:48 | One of the responses is URL encoding:
Reading special characters from a text file.
| | 03:59 | At that URL it has a chart that lists any
special characters that you might need to use.
| | 04:04 | As you can see, there is ampersand, and it
says that the code you use is percent 26.
| | 04:11 | So if you wanted to have an ampersand actually be displayed
in the body of your text, instead of typing ampersand,
| | 04:19 | you would type percent 26 to have the ampersand
character be displayed in the body of the text.
| | 04:25 | There is also a whole bunch of other special
characters here that you might want
| | 04:28 | to be displayed inside of the text instead of being translated by Flash.
| | 04:33 | So, you can simply go to this web page and look up the character here.
| | 04:39 | Back inside of the text file for ourHistory, I'm going to delete
all the ampersand information that I was just showing you.
| | 04:45 | In this case, however, all you need to make sure that's happening inside
the ourHistory text file is that at the very beginning, it says info,
| | 04:53 | make sure you have the spelling and capitalization
correction, no spaces, it just say info equals,
| | 05:00 | and then it starts with the text, Los
Angeles, and then goes down from there.
| | 05:04 | After you've made that change to this text
file, save it and then go back to Flash.
| | 05:11 | Then, switch to your aboutUs.fla and the next
step would be to make sure that the text field
| | 05:17 | that you're loading the text into has been given the appropriate name.
| | 05:21 | So again, in aboutUs.fla, click once in that dynamic text
field on the stage and look in your Properties Inspector.
| | 05:29 | In your Properties Inspector, on the left-hand
side, underneath this text type pull-down menu,
| | 05:34 | which should say Dynamic Text, you'll see a field that says instance name.
| | 05:38 | This is a unique name that you can assign to this text field, and
if you remember, in the action script you wrote in master.fla,
| | 05:46 | you've already defined the name of the text
field that your text is going to be loading into.
| | 05:51 | You called it loaded info.
| | 05:54 | So again, making sure that dynamic text field is selected on the About Us
stage, in the Properties Inspector, click in that instance name text field
| | 06:03 | and type in there loadedInfo, making sure you
have the spelling and capitalization correct.
| | 06:09 | It should all be lower case and all one word,
except for the I in Info should be upper case.
| | 06:16 | Then I'm going to press Return or Enter.
| | 06:19 | Now that you've assigned an instance name to that text field, the last
step to load the text into that text field is here in the aboutUs.fla file,
| | 06:28 | writing the action that tells the myLV LoadVars object that you wrote
in the master.fla file to actually load a particular text file in.
| | 06:39 | In Zbout Us, click the topmost layer and create a new layer.
| | 06:45 | This layer is going to hold the actions
for this particular module, "About Us".
| | 06:49 | So rename that layer to be titled A. Then, because
it is just going to be holding action script,
| | 06:55 | lock that layer so that we don't accidentally put anything on the stage
in that layer, select the first key frame and open up the actions panel.
| | 07:04 | Now, because you've already done most of the legwork in the
LoadVars object and you've written all that inside of master.fla,
| | 07:12 | to get the text to load in only requires one line of code, and again,
the nice thing about that is that, in any of your other modules,
| | 07:20 | whenever you want to use your myLV LoadVars object to load text into
the text field called Loaded Info only requires one line of code.
| | 07:30 | What you write here inside of the aboutUs.fla or any other module
where you want to use the myLV LoadVars object to load text,
| | 07:40 | is you simply first tell Flash where the
myLV LoadVars object is located at.
| | 07:47 | Remember, it's located here in the master.fla file.
| | 07:51 | If you also remember because the master.fla file, the actual SWF file that
comes from the FLA, sits at the very bottom, everything else loads into it,
| | 08:01 | whenever you want to talk to the master.swf file or any
action script in it, you refer to it as underscore level 0.
| | 08:10 | So here in About Us, in the first key frame of the A layer,
in the actions panel, type underscore level 0 and then .myLV,
| | 08:20 | making sure you have the spelling and capitalization, again, correct.
| | 08:25 | And then type .load.
| | 08:27 | So we're telling the myLV LoadVars object, which is
in the master.swf file, level 0, to load something.
| | 08:36 | After .load, type an open parenthesis and then the name and location
of the text file that you want to load the variable value pairs from.
| | 08:45 | If you remember, the name of the text file we want to load is
ourHistory.txt, but it is located in a separate directory called Vars,
| | 08:55 | so after the open parenthesis, type quote vars, which is the name of the
directory that is holding all of these separate text files, forward slash,
| | 09:05 | ourHistory, all one word with the capital H in History .txt, and then type
an end quote, an end parenthesis, and a semi-colon to end that action.
| | 09:19 | That is the only action that you need here inside of aboutUs.fla to load
the variable value pairs from ourHistory.txt and then have that value
| | 09:30 | of that variable be inserted into the text field
that you have on the stage here in About Us.
| | 09:36 | Now that you've added that action here to About Us, save the changes that
you've made to this file and publish a new file SWF file from this FLA.
| | 09:45 | Again, when you're loading SWF files, one into another as you're
doing throughout this entire title, you're loading the aboutUs.swf
| | 09:52 | into master.swf, any time you make a change to
one of those module SWF files such as About Us,
| | 09:58 | you need to make sure you save your changes and publish a new SWF file.
| | 10:02 | I can't tell you how many support e-mails I've gotten from
people who make changes to their content and when they go
| | 10:08 | to view what they've changed inside of their
site, they're not seeing any of those changes.
| | 10:13 | And the reason why is because when they make that change,
they're forgetting to publish an updated SWF file,
| | 10:19 | so when they view their master.swf file and it loads in the
separate modules, they're actually looking at old content.
| | 10:27 | So again, make sure that you save your changes to About Us and
publish a new SWF file from this FLA by choosing file, publish.
| | 10:37 | Now currently, master is still set to load and show a splash page.
| | 10:42 | Eventually, in a later chapter, you're going to be constructing a main
menu so the viewer can click on which section they want to view and load.
| | 10:50 | However, until you construct that main menu, all we're
doing is we're changing the action inside of master.fla
| | 10:57 | to tell it which SWF file, which module, we want to view.
| | 11:01 | So go ahead and switch back to master.fla.
| | 11:04 | If you accidentally close it, you can open it back up again.
| | 11:07 | It's in your site directory.
| | 11:08 | And inside of your master.fla file, select key frame 10 in your A layer.
| | 11:15 | Select the action in your actions panel that
loads in splash.swf and copy that action.
| | 11:26 | Then, click at the end of that selected action, press Return or
Enter once to create a new line break and paste that copied action.
| | 11:35 | Simply change that copied action, instead of saying to
load splash.swf, have it load about underscore us .swf.
| | 11:43 | Have it load into the same level, which is level 5.
| | 11:48 | Now, since we don't want both of those SWF files simultaneously loading
into the same level, comment out the action that loads splash.swf.
| | 11:57 | So click before the myMCL.loadclipsplash.swf action and
type two forward slashes at the beginning of that action.
| | 12:07 | So now, the only SWF that's being loaded into level 5 is aboutUs.swf.
| | 12:12 | Save the changes you've made to master.fla and preview
your movie by choosing Control Enter or Command Return.
| | 12:21 | When the "About Us" module is automatically loaded, you
should see your dynamic text appear there on the stage.
| | 12:30 | Now, while initially, you may go, "Oh big deal," keep in mind that this
text exists in a separate text file and you used the LoadVars object
| | 12:40 | to load that text dynamically from that separate
text file and bring it into your Flash project.
| | 12:46 | As you've heard me mention before, the fantastic thing
about that is that whenever you or the client wants
| | 12:53 | to update any of this text, you don't have to open Flash.
| | 12:57 | You don't have to open the FLA.
| | 12:58 | You don't even have to own a copy of Flash.
| | 13:00 | The client or you can simply go into the text file, make the change that
you want to make, and then the next time somebody views your content,
| | 13:09 | it will automatically show and display that updated content.
| | 13:13 | So it makes, and again, as you'll see reiterated throughout this
title, it makes updating and maintaining your content so much easier.
| | 13:21 | That is the fantastic thing about this.
| | 13:23 | So even though it may initially look, on the surface,
like a simple thing, it actually is very beneficial
| | 13:28 | in the long run for both maintenance and ease of use.
| | 13:31 | Now that you've gotten your text to dynamically load
in using your LoadVars object, in the next exercise,
| | 13:38 | we're going to make sure that if there's a problem loading in the
text, that the error handling that we wrote works correctly as well.
| | Collapse this transcript |
| Verifying the error handling| 00:01 | Now that you've verified when the text loads incorrectly, that everything
works just fine, let's also check the error handling that you wrote earlier
| | 00:09 | to make sure that the error message appears
if there is a problem loading the text file.
| | 00:14 | Go ahead and close your preview window if you still have it open and
again, if you remember, on the first key frame of your master.fla file,
| | 00:23 | in your onLoad function, you specified what should
happen if the text is loaded in and parsed correctly.
| | 00:30 | However, in the else statement within your if conditional, you also
wrote what should happen if there is a problem loading the external text.
| | 00:38 | Let's check and make sure that this works.
| | 00:41 | An easy way to do that is to simply navigate into your Vars directory
inside the site directory, inside the LA Eyeworks directory on your desktop
| | 00:51 | and change the name, temporarily, of the ourHistory text file.
| | 00:56 | So I'm just going to change its name real
quick to be something like ourHistory2.txt.
| | 01:03 | Go back to my Flash project and again preview master.swf.
| | 01:11 | You can see that not only does the output window in Flash, which, when
the viewer comes to your website, since they're not viewing it inside
| | 01:17 | of Flash itself, they're viewing it in the web
browser, they won't see this output window.
| | 01:22 | What they will see, however, is this error message
that you should now see in the "About Us" content.
| | 01:27 | It says, "There has been an error loading the requested information.
| | 01:31 | Please contact the web master and report your error," which is that
message that you typed inside of your action script in the master.fla file.
| | 01:40 | And to give myself a little more room from now
on, I'm going to close the bandwidth profiler.
| | 01:44 | So we can see that the error message is,
in fact working just as we intended.
| | 01:49 | Now that I've verified that, I'm going to go back and make sure that you
change your ourHistory text back to ourHistory.txt instead of ourHistory2.
| | 01:59 | Just to make sure that everything still works okay, I'm
going to go back to master and test my document once more.
| | 02:08 | Now that you've gotten this dynamic text to load in, wouldn't
it be nice if the viewer could actually scroll through it
| | 02:15 | so that they can view all the text you have in here.
| | 02:17 | If you remember, the text field, the dynamic text field, on the "About Us"
stage is at a fixed size, which is how much you're currently seeing.
| | 02:26 | However, there is a lot more text that can
actually fit inside of that text field.
| | 02:31 | It extends beyond the borders of that text field, so what we're going
to do in the next few exercises is give the viewer the ability to scroll
| | 02:39 | through that text by creating some buttons that the viewer
can click on to enable them to scroll through that content.
| | 02:46 | You're going to complete that in the next few exercises.
| | Collapse this transcript |
| Making the text scroll pt. 1| 00:01 | >> Fortunately, making your dynamic text scroll in a dynamic text
field, as simple scrolling method, is actually pretty easy to do.
| | 00:09 | To start off with, make sure that you're in the About Us
FLA file and that you have that up and inside of Flash.
| | 00:15 | Then the next thing that we need is something that
the viewer can click on to scroll through the text.
| | 00:21 | That means we essentially need a button for the viewer to click on.
| | 00:24 | Now there's actually already a button inside of the
shared library that we can use for this purpose.
| | 00:30 | So choose file, import, open external library,
navigate to your desktop to your LA Eyeworks folder
| | 00:40 | and into your site folder where you have your sharedlib.fla file at.
| | 00:45 | Then go ahead and double-click on that to open up just the library.
| | 00:49 | Earlier you selected the fonts inside of the shared library and
linked them to the About Us library in the AboutUs.fla file,
| | 00:57 | but there's also the button arrow button symbol that's a shared element
that you can also use for this purpose inside of the shared library.
| | 01:05 | Select that button.arrow button symbol and
simply drag it onto the About Us library panel.
| | 01:13 | That will then make a dynamic link to that button so
that I can use that button as many times as I'd like
| | 01:18 | and it will never actually add to the file size of the aboutUs.swf file.
| | 01:23 | Because, again, it resides in our pre-cached
and preloaded shared lib library.
| | 01:29 | Then go ahead and close the shared lib library panel and
then we wanna create a new layer to hold this button.
| | 01:36 | So select the layer beneath the actions layer, create a new
layer, and rename that new layer to be titled "scrolled buttons".
| | 01:48 | Then in the About Us library panel select the button
arrow button symbol and drag that out onto the stage.
| | 01:56 | I'm gonna position mine so that it's down toward the bottom
and aligned with the bottom portion of that text field.
| | 02:04 | Then for my up arrow button, I'm gonna hold down my control and shift
keys, on the Macintosh that would be option and shift, and I'm gonna click
| | 02:13 | and drag that bottom facing arrow button toward the top.
| | 02:17 | Then I'm gonna let go of my mouse and
then let go of the keys on the keyboard.
| | 02:21 | I've just made a copy of that downward facing arrow button,
but with that copy selected, I can then choose modify,
| | 02:29 | transform, flip vertical to have my up facing button.
| | 02:33 | Then I just need to realign it so that the top of the button is
aligned with the top of the text field, so while holding my shift key,
| | 02:40 | I'm just gonna click and drag that down a little bit.
| | 02:43 | So there I have my scroll up and scroll down buttons that the viewer will
click on and interact with to scroll through the text in that text field.
| | 02:51 | Now what you're about to do may be something utterly ground-
breaking for you and completely different from what you're used to.
| | 02:58 | You may be thinking okay, you have some buttons on the stage
and the viewers gonna click on those buttons to make the text
| | 03:03 | in this text field scroll, so that must mean you
select the button, you open your actions panel
| | 03:09 | and you start writing the action script
on that button to make it interactive.
| | 03:14 | That's not what you're gonna do in this case, as well as through the
majority of the rest of the construction of the LA Eyeworks website
| | 03:21 | as you're adding functionality to buttons and movie clip symbols.
| | 03:25 | You're not going to add action script to those symbols.
| | 03:28 | You're not gonna add it to the button symbols,
you're not gonna add it to the movie clip symbols.
| | 03:32 | Instead, you're gonna add the action script to your timeline.
| | 03:36 | You heard me correct.
| | 03:37 | What that means is you're gonna be adding
action script to your timeline that is going
| | 03:42 | to control the functionality of your buttons and movie clip symbols.
| | 03:47 | Now the reason why you would wanna do such a thing is
mostly for ease of use and enabling you to be able to look
| | 03:54 | at all your action script all together so you can more
easily see how everything is interacting with one another.
| | 04:00 | If you add your action script directly to your symbols, as you may be used
to doing, as you work with all the action script, both in your timeline
| | 04:09 | and on your symbols, it can be somewhat confusing because you have
to switch over and select one of those symbols, like a button symbol,
| | 04:15 | open up your actions panel, look at the actions that you've assigned
to that particular symbol and then click back in your key frames,
| | 04:22 | look at the action script you've assigned there, and so you're
constantly switching back and forth between actions that you've assigned
| | 04:28 | to symbols and actions that you have in your timeline.
| | 04:32 | So by keeping all of your action script in your
timeline and by not assigning action script
| | 04:38 | to individual symbols, you don't have to keep switching back and forth.
| | 04:42 | You can look at all of your action script all together and you
can see how it's all interacting with one another much easier.
| | 04:49 | The first step in that process is to assign
individual instance names to the symbols
| | 04:56 | that you're going to be assigning action script to from the timeline.
| | 04:59 | What that means is that you simply need to click once on
the scroll down button on the stage in your About Us module,
| | 05:07 | then in the properties inspector, click in the instance name field.
| | 05:12 | We need to give that particular symbol its own unique name so
that we can target it with our action script from the timeline.
| | 05:20 | Again, when you're assigning instance name to symbols, you need to
keep the same naming conventions as if you were creating variables.
| | 05:27 | No spaces in the name, no special characters and so forth.
| | 05:31 | So let's give this downward facing arrow and instance
name of scrollDown, all one word with a capital D in Down.
| | 05:40 | Then select the arrow that's pointing up and give it an instance
name of, yep, you guessed it, scrollUp with a capital U in Up.
| | 05:49 | Then select the first key frame in the
A layer and open up your actions panel.
| | 05:55 | So that we can better define in the actions panel where the
functionality for our scroll buttons are, let's add some comments in here.
| | 06:03 | Again, make sure you're in the first key frame of the A layer in
aboutUs.fla file and that you have your actions panel open.
| | 06:10 | In there you should see the one action you've written so far.
| | 06:13 | Click at the end of that action and press return or enter
a couple of times to create a few empty line breaks.
| | 06:20 | Then type two forward slashes, a space, a series
of hyphens, a space, and then two back slashes.
| | 06:29 | Then click in the middle of all that, type a less than sign
and then write scroll buttons and a greater than symbol.
| | 06:39 | Select that comment that you just wrote, copy it, click at the end of that
comment, press return or enter a few times and paste that copied comment.
| | 06:51 | Then in that pasted comment, simply click before the word scroll and
type a forward slash to mark the end of the scroll buttons functionality.
| | 06:59 | Then click in the empty line break in between those two
comments and here is where you're gonna write the action script
| | 07:05 | that defines the functionality of both the
scrolling down and the scrolling up of the text.
| | 07:10 | Let's first start by getting the text to scroll up.
| | 07:13 | Now when you say scroll up, the text is actually moving up, but the
viewers clicking on the down button because they're clicking on the button
| | 07:20 | that marks their intention, they wanna see what's down.
| | 07:23 | Let's target that button that we've assigned
the instance name scroll down to.
| | 07:29 | Now we can do that a few different ways.
| | 07:30 | We could actually write the name that we assigned that button symbol here
inside of the actions panel or to prevent any kind of mis-capitalizations,
| | 07:39 | or misspellings, we could simply click on this button at
the top of the actions panel called insert a target path.
| | 07:46 | Again, make sure that you're blinking insertion
icon is here, in between the two comment lines.
| | 07:52 | Then click on that "insert a target path" icon.
| | 07:55 | In this insert target path dialogue box, it'll show you all the
text fields and symbols that you've assigned instance names to.
| | 08:03 | Select the one that says "scroll down".
| | 08:06 | When you do that it'll automatically insert this .scrollDown
in the field at the top, and then just click OK.
| | 08:13 | You might also need to make sure that the radio
checkbox "relative" is selected instead of "absolute".
| | 08:20 | Then click OK.
| | 08:22 | Now this is a key word that refers to this
timeline that we're writing this action in.
| | 08:28 | Because we're writing this action in the root of the About Us timeline,
this refers to the main About Us timeline, so it says from here,
| | 08:37 | there is a symbol called scroll down and that's
what you're targeting and that's correct.
| | 08:41 | Later, you'll see how the key word this actually
changes and when it's okay and not okay to use it.
| | 08:49 | In this case, just leave the keyword this
there, so it says this.scrollDown.
| | 08:54 | So now that we've targeted that button symbol, we wanna tell
| | 08:57 | that button symbol what the viewer's going to
do to it to trigger some kind of functionality.
| | 09:03 | We want it, when the viewer clicks on that
scroll down button for something to happen,
| | 09:07 | so after scroll down type .onRelease with a capital R in Release.
| | 09:14 | Then that mouse event needs to be assigned to a function, so type space,
equals, space, function, open parenthesis, close parenthesis, space,
| | 09:26 | open curly brace to mark the beginning of that function,
two line breaks and a close curly brace to mark the end.
| | 09:33 | That is how you can assign mouse events to symbols from a key frame.
| | 09:39 | You simply tell Flash where that symbol is located at, the mouse
event that you want to be triggered, in this case on release,
| | 09:46 | when the viewer clicks on it and then you assign that to a function.
| | 09:51 | Then within the open and close curly braces of that function you can
tell flash what should happen when the viewer performs that mouse event
| | 09:59 | on that symbol that you're targeting, on this case when you click on it.
| | 10:02 | Now the viewer clicks on that text field,
we want the text to move up one line.
| | 10:08 | Fortunately there's a property for a text field called the scroll property.
| | 10:12 | But first, let's tell Flash which text field we're targeting.
| | 10:16 | If you remember, the instance name that we assigned
to the text field that we wanna control the scrolling
| | 10:20 | of is called loaded info, so type loadedInfo, with a capital I in Info.
| | 10:28 | Now what we wanna do is modify the scroll
property of that text field, so type .scroll.
| | 10:34 | The way you wanna modify it is you wanna
add one onto whatever it currently is.
| | 10:40 | What this will do, is it will cause the text within that
text field to move up one line, so after .scroll, type space,
| | 10:49 | plus equals, space, one and then a semicolon to end that action.
| | 10:55 | What this plus one does is it tells flash to set the scroll property of the
loaded info text field to be whatever it is, but add one onto that number.
| | 11:06 | That's the same, by the way, as if you wrote that the scroll property's
equal to whatever the loaded info.scroll property is, but add one.
| | 11:17 | So instead of having to write all that, you can simply just say plus
equals one, it does the same thing, so you're setting the scroll property
| | 11:28 | of the loaded info text field to be whatever
it is but you're adding one onto that number.
| | 11:33 | Let's test to see if this actually works as we intend it to.
| | 11:37 | So before you continue, save the changes to your aboutUs.fla file
and publish a new SWF from this FLA by choosing file, publish.
| | 11:47 | Then switch over to master.fla and test your movie there.
| | 11:53 | I can see there, my scroll down and scroll up buttons on the stage and
when I click on the scroll down button, sure enough, the text scrolls down.
| | 12:01 | When it gets to the end, since there's
no more text to scroll to, it just stops.
| | 12:05 | Now we haven't yet assigned any action script functionality
to the up button, so when I click on it, nothing yet happens.
| | 12:11 | But that's what you're gonna complete in the next exercise.
| | Collapse this transcript |
| Making the text scroll pt. 2| 00:01 | >> So now that you've gotten the scroll down text functionality
to work correctly, let's slightly modify that script
| | 00:07 | to allow the up button to scroll up through the text.
| | 00:11 | If you still have your preview window, go ahead and
close it, and make sure that you're back in aboutUs.fla.
| | 00:18 | Inside the first key frame on your A layer, inside of
your actions panel within the scroll buttons comments,
| | 00:25 | is the scrolldown.onrelease function you wrote that enables
that scroll down button to actually scroll through the text.
| | 00:32 | Let's copy that entire function and paste it just below it and slightly
modify it to get it to work correctly for the scroll up button.
| | 00:41 | So select that function.
| | 00:42 | There should be three lines, this.scrolldown.onrelease
all the way to the last closed curly brace.
| | 00:48 | Select all three of those lines and copy them.
| | 00:51 | Then, click after that closed curly brace, press Return or Enter
once to create a new line break, and then paste that copied script.
| | 01:01 | There's only a few things we need to change here.
| | 01:03 | In the copied script, you're not targeting scroll
down anymore; you're targeting the scroll up button,
| | 01:09 | so change scroll down to scroll up with a capital U in Up.
| | 01:14 | Then, we don't want to have the text scroll up one line, we want to have it
scroll down one line, so change that plus equals one to a minus equals one.
| | 01:26 | That's it.
| | 01:27 | Save the changes you've made to aboutUs and publish a new SWF file.
| | 01:34 | Then once more, return to master.fla and test your movie.
| | 01:39 | If you click on the scroll down button, it should
scroll down through the text and if you click
| | 01:43 | on the scroll up button, it will scroll up through the text.
| | 01:46 | So there you have really easy-to-add functionality that will
allow the viewer to scroll through your dynamically-loaded text.
| | 01:54 | Now, in the next few movies, which I'm marking as optional --
I'm not going to cover it in the main body of these exercises --
| | 02:01 | is a separate set of optional movies that, if you like, you can walk
through that shows you how to make more advanced scrolling text.
| | 02:08 | The way this text is currently set up is that you have to
continually click over and over on the down and up arrow buttons
| | 02:16 | to scroll both down and up through your dynamically-loaded text.
| | 02:20 | Sometimes, people want functionality that allows the viewer to just hold
down the mouse button and, while they have the mouse button depressed
| | 02:28 | on these down and up arrows, it continually
scrolls down and up through the text.
| | 02:33 | In the optional set of movies after this, I demonstrate
how to script such a feature if you'd like it, but again,
| | 02:40 | I'm not including that in the main body of
the exercises as it's an optional feature.
| | 02:45 | Regardless, you should give yourself a big clap on the back
for not only getting your text to scroll, but before that,
| | 02:51 | writing the LoadVars object that dynamically loads text from a separate
text file and places it inside of the text field on your stage.
| | 03:00 | It's not only an accomplishment to do that, but it's also an accomplishment
because the way you wrote it and the way you got it to work enables you
| | 03:08 | to use that same LoadVars object throughout
any other module in the entire site
| | 03:13 | and have that content still be loaded
correctly with that one LoadVars object.
| | 03:18 | That's a big accomplishment unto itself and you
should be proud of the work you've done so far.
| | Collapse this transcript |
| Building an advanced text scroller pt. 1 (optional)| 00:01 | >> Up until this point, you've learned how to dynamically load
text into a text field and then how to allow the viewer to scroll
| | 00:08 | through that text one line at a time by clicking on a few buttons.
| | 00:13 | The problem with how this is currently set up is that many
viewers would actually prefer to have the text scroll as long
| | 00:20 | as their mouse button is depressed on either the down arrow or the
up arrow buttons so that they don't have to continually click over
| | 00:28 | and over to have the text scroll one line at a time.
| | 00:32 | Now, to be able to have that text to just continually scroll as long
as the viewer's mouse button is depressed on one of our scroll buttons,
| | 00:40 | the way to do that is to write a bit of action script that is looped.
| | 00:44 | So our actions are going to be similar to what you've written so far,
which just tells the text to scroll down one line or up one line,
| | 00:51 | but the major difference is that those actions
are going to be placed inside of a loop
| | 00:57 | so that the action is continually repeated
over and over again for as long as you specify.
| | 01:02 | Essentially, what you're going to tell Flash to do is, as long as
the viewer's mouse button is depressed on the down arrow button,
| | 01:09 | to have the text scroll down one line and
perform that action over and over again.
| | 01:15 | But as soon as they let their mouse button go, stop that process.
| | 01:20 | The same applies, but in reverse, for the up arrow button.
| | 01:23 | So the first step you need to take is to actually write the looping
action that loops through the scrolling process over and over again.
| | 01:32 | To do that, make sure that you're in aboutUs.fla.
| | 01:35 | If you have it closed, you can open it back up again.
| | 01:38 | Otherwise, you should still have it open from previous exercises.
| | 01:42 | And then make sure that you select the first key frame
in the actions layer and open up your actions panel.
| | 01:48 | Here are the actions that you should have so far: You have your first
line of code which loads the text into the text field and then the actions
| | 01:56 | that specify when the viewer clicks on the scroll down
button or the scroll up button to scroll the text inside
| | 02:03 | of the loaded info text field, either down one line or up one line.
| | 02:07 | Again, the first thing we need is a way
to loop through a series of actions.
| | 02:12 | In Flash, there are a few different ways to go about doing that.
| | 02:15 | One of the methods is something called "on enter frame".
| | 02:19 | An on enter frame is an event handler that basically
repeats whatever actions you place inside of it
| | 02:25 | over and over again until that event handler is deleted.
| | 02:30 | The other way to loop through a series of
actions is a function called "set interval".
| | 02:36 | Now, both of those methods have advantages and disadvantages.
| | 02:40 | The advantage of the on enter frame clip
event is that it's very easy to set up.
| | 02:45 | It doesn't require a lot of action script to write,
so it's fairly easy to use and get started with.
| | 02:51 | The disadvantage of it is that you don't have a lot of control
over how fast it repeats the actions within it over and over again.
| | 02:59 | It's essentially locked to the same frame rate of your movie.
| | 03:03 | Our movies are currently set up to be 21 frames per second, so if I
use an on enter frame event handler to create my looping action script,
| | 03:12 | it's going to perform those actions 21 times per
second until I delete it, as I mentioned previously.
| | 03:19 | On the other hand, if I use a set interval function, I have more control as
to how often the actions within this set interval function are performed.
| | 03:29 | The set interval function gives me a lot of
control as to how fast the actions are looped.
| | 03:36 | The disadvantage of a set interval function is that
it requires a little bit more thought and foresight
| | 03:42 | and action script to actually set up and get working properly.
| | 03:46 | In this case, because it is a little easier to set up and use,
| | 03:49 | we're going to use the on enter frame event
handler to create our looping action script.
| | 03:54 | So again, in the first key frame in your actions layer, in the
aboutUs.fla, click after your closed bracket after the scroll up dot
| | 04:04 | on release function, press Return or Enter once to create
a new line break, and let's start by creating the function
| | 04:12 | that is going to hold our on enter frame event handler.
| | 04:16 | So again, we're just going to start by creating a new function, so type
function, space, scroll text, and then open parenthesis, end parenthesis,
| | 04:27 | space, open bracket, a couple of line breaks, and a closed bracket
to create the beginning of our function and the end of the function.
| | 04:36 | Then, click in the empty line break in between the open and closed brackets
and then now, let's go ahead and create the on enter frame function.
| | 04:45 | Now, when you're creating an on enter frame
function, you have to assign it to a timeline,
| | 04:50 | be that a movie clip symbol instance, or to a timeline itself.
| | 04:55 | In this case, we're going to assign it to the aboutUs.swf file timeline.
| | 04:59 | To do that, simply type underscore root.
| | 05:02 | Underscore root refers to the SWF files timeline itself.
| | 05:07 | Then, type dot on enter frame.
| | 05:12 | Then, we're going to assign this to a function by typing space, equals,
space, function, open parenthesis, closed parenthesis, space, open bracket,
| | 05:24 | and again, a couple of lines breaks and a closed bracket.
| | 05:27 | Now you might be wondering why we have one
function placed inside of another function.
| | 05:32 | Essentially, we have nested functions.
| | 05:34 | The first function we have is called scroll text
and then we have another function within that
| | 05:39 | that has been assigned to the on enter frame event handler.
| | 05:43 | The reason why we're doing that is because if we didn't put
the on enter frame event handler inside of another function,
| | 05:50 | as soon as the About Us movie is played, it would automatically
start looping through the actions that we placed within this
| | 05:56 | on enter frame event handler that we've assigned to a function.
| | 06:00 | In other words, whatever actions we place inside of this function would be
automatically looped over and over again as soon as the movie first loads.
| | 06:09 | Well, we don't want that to happen.
| | 06:11 | We want the on enter frame event handler, and the actions we placed within
its functions, to only be looped over and over again when we tell it to.
| | 06:20 | In other words, when the viewer clicks on the down
arrow to scroll through the text, or the up arrow,
| | 06:26 | only at those points do we want this looping to occur.
| | 06:30 | That's why we're placing it inside of another function.
| | 06:33 | This function, and the loop inside of it,
won't be triggered until we tell it to.
| | 06:38 | Now, there are a few different ways to go about
writing the action script to scroll through the text.
| | 06:46 | What we're going to do is when the viewer presses their mouse button
either on the down arrow or the up arrow button to start scrolling
| | 06:53 | through the text, we're going to first set a variable,
and that variable is going to store a simple string
| | 06:59 | that says that the viewer is either clicking on down or up.
| | 07:03 | That way, we can write one function to do the scrolling and it's simply
going to check whether or not the viewer is clicking on the down arrow
| | 07:10 | or the up arrow button and then it can scroll
through that text in the right direction.
| | 07:15 | So the first thing we want to do in our loop is check to see whether or
not the viewer is either clicking on the down arrow or the up arrow button.
| | 07:24 | So click inside of the on enter frame function on that empty line break
you created there earlier, and then type if, space, open parenthesis,
| | 07:35 | and then the name of the variable which you haven't yet created
but will in just a little bit, that is going to store whether
| | 07:41 | or not the viewer is clicking on the down arrow or the up arrow button.
| | 07:45 | We're going to call that variable scroll direction, so type scroll,
direction, again, this is all one word with a capital D in Direction,
| | 07:55 | space, equals, equals, space, quote, up, end quote,
end parenthesis, and then a space, an open bracket,
| | 08:08 | two line breaks and a closed bracket to end that if conditional statement.
| | 08:13 | So again, all this if statement says, so far, is: If the value
| | 08:18 | of the scroll direction variable is exactly equal
to up, then what are we going to have it do?
| | 08:25 | Well, that means if the scroll direction
variable is holding the text string up,
| | 08:31 | that means the viewer is clicking on the
up arrow, so we want the text to go up.
| | 08:35 | Well, you've already written the action that does that earlier.
| | 08:38 | Up above, you can see you have this dot
scroll up dot unrelease equals function.
| | 08:43 | And within that, it says loaded info dot scroll, minus equals one.
| | 08:48 | That line right there is the line that scrolls the text up.
| | 08:52 | So simply take that line, select it, and then click
and drag it to move it within the if statement.
| | 09:00 | Again, you're dragging it between the if open bracket and the end bracket.
| | 09:06 | So if the value of that scroll direction
function is up, scroll the text up.
| | 09:11 | Now obviously, we need to also tell it what to do if the viewer is
clicking on the down arrow, so to do that, click after the closed bracket,
| | 09:20 | after your first if statement -- it says if scroll direction is up,
loaded info dot scroll minus equals one, and then a closed bracket --
| | 09:27 | click after that closed bracket, and then type space, else, space, if,
which essentially means otherwise, if this is true, do this, else if,
| | 09:41 | means otherwise, and then you're going to specify what else to do.
| | 09:45 | After else if, type space, open parenthesis, scroll, direction, space,
equals, equals, space, quote, down, end quote, closed parenthesis, space,
| | 10:03 | open bracket, a couple of line breaks and a closed bracket.
| | 10:08 | So, in plain English, what you've written so far says, if the
viewer is clicking on the up arrow, scroll the text up one line.
| | 10:16 | Otherwise, if they're clicking on the down arrow, scroll the text down.
| | 10:23 | And again, you've already written the
action that scrolls the text down one line.
| | 10:27 | It's within the this dot scroll down dot on release
function and it says loaded info dot scroll plus equals one.
| | 10:35 | Select that loaded info dot scroll plus equals one line and then, just
like you did with the loaded info dot scroll minus equals one line,
| | 10:45 | you're going to click and drag it here in between
the open and closed brackets after else if.
| | 10:53 | So there is your completed looping script.
| | 10:56 | When that script is performed, it's going to check to see whether the
viewer is clicking on the down or up arrow button and then scroll the text
| | 11:04 | down or up repeatedly over and over again until this function is
deleted, which I'll show you how to do, again, in a little bit.
| | 11:13 | But you've just completed the engine that is going to scroll the
text repeatedly down and up as long as the viewer is clicking
| | 11:20 | and holding their mouse button down on the scrolling arrows.
| | 11:24 | In the next movie, I'm going to show you how to use this engine and
hook it into those arrows so that, as the viewer is clicking on the down
| | 11:31 | and up arrows, it actually scrolls through the text, and, more importantly,
| | 11:36 | once they let go of the mouse button, to
actually stop that scrolling from occurring.
| | Collapse this transcript |
| Building an advanced text scroller pt. 2 (optional)| 00:00 | Now that you've written the scrolling engine which is the scroll text
function here that looks to see whether the viewer is clicking on the
| | 00:08 | up arrow or the down arrow and then scrolls the
text appropriately in the correct direction,
| | 00:13 | now that you've written that, you need to hook it in to the buttons.
| | 00:17 | So that as the viewer is clicking on the down or up arrows to
scroll through that text, it executes this function and tells it
| | 00:24 | which button, down or up, the viewer is clicking on.
| | 00:28 | Again, we're still inside the About Us FLA file.
| | 00:31 | You should still have the first key frame in your actions layer
selected and you should have your actions panel still open.
| | 00:38 | Toward the top of your actions panel, you should
see the actions that you've written previously,
| | 00:44 | this dot scroll down dot unrelease equals function
as well as this dot scroll up dot unrelease function.
| | 00:52 | They're currently empty though there's nothing inside of those functions
because in the last movie, you moved the actions within those functions
| | 00:59 | into the on enterframe loop so that the text would be scrolled
either down or up if the appropriate statements result to be true.
| | 01:08 | However, you now want different things to happen when the viewer
clicks on either the scroll down or the scroll up buttons.
| | 01:15 | The first thing you want to happen when the viewer clicks on
the scroll down button is to place a string, a bit of text,
| | 01:23 | inside of a variable called scroll direction which you
defined down here inside of your on enterframe function.
| | 01:30 | Again, all this is is just a variable, a
container, that is going to store a bit of text.
| | 01:36 | The bit of text that it's going to store is whether
or not the text should be scrolling up or down.
| | 01:43 | So after your scroll down dot unrelease function click in the
empty line break between the open bracket and the closed bracket
| | 01:51 | and then type scroll direction space equals
space quote down end quote semi-colon.
| | 02:03 | So when the viewer clicks on that scroll
down button the first thing that happens is
| | 02:08 | that Flash is going to put this text down inside of that variable.
| | 02:13 | Once you've done that, then you can execute the scroll text function which
will then tell the on enterframe loop to start occurring to start playing.
| | 02:23 | So after scroll direction equals down semi-colon click after that
line press return or enter to create a line break and then execute
| | 02:31 | that scroll text function simply by typing its name.
| | 02:34 | Scroll text.
| | 02:37 | Then type in open parenthesis end parenthesis semi-colon at the end.
| | 02:43 | Now, as you can imagine you want to do the same
thing for the scroll up dot unrelease function.
| | 02:48 | So when the viewer clicks on the up arrow, it's going to perform
these same actions but obviously instead of scroll direction being
| | 02:55 | down because they're clicking on the up arrow scroll direction will be up.
| | 03:00 | So select those two actions that you just assigned
to the scroll down dot unrelease function right click
| | 03:06 | or control click anywhere on that selection and choose copy.
| | 03:10 | Then, click on the empty line break after scroll up dot unrelease function
the empty line break being between the open bracket and the closed bracket
| | 03:20 | and then right click or control click there and choose paste.
| | 03:24 | If one of the lines is indented a little bit
as you can see here just click before that line
| | 03:29 | and then press back space or delete so that they're all lined up correctly.
| | 03:33 | Then change scroll direction equals down to scroll direction equals up.
| | 03:39 | Making sure to keep your quotation marks
there, everything else can stay the same.
| | 03:45 | Now I can test what I have so far, even though it isn't
quite finished, by saving my file Control S or Command S
| | 03:52 | on the Macintosh and then publishing a new SWF file.
| | 03:56 | So I can choose file publish to publish a new SWF file from this FLA
then go back to master, remember, you need to always test your other movies
| | 04:08 | from master because they're all loaded into the
master dot SWF file and then test your movie there.
| | 04:14 | When the text loads in, if I click on my down arrow button
even if I hold my mouse button down and then let go,
| | 04:22 | it'll continually scroll through the text until it gets
to the end, but if I let my mouse button go halfway
| | 04:28 | through its scrolling process, it'll still keep going.
| | 04:31 | It doesn't stop when I let go of the mouse button and that's because we
haven't yet told our on enterframe event handler, that looping action,
| | 04:41 | when it is supposed to stop that loop but now we can see that at least
the scrolling part is working, so we know that part is working correctly.
| | 04:49 | Now we just need to tell it when to stop.
| | 04:52 | If you verify that your scrolling is working correctly, go ahead
and close your preview window and go back to the About Us FLA file.
| | 05:00 | Again, you should still be in the first key frame
in your actions layer with your actions panel open.
| | 05:06 | Now we want the scroll down and the scroll up to actually
scroll through that text not when they click on the scroll down
| | 05:14 | and scroll up buttons but when they press their mouse button down.
| | 05:18 | When they release their mouse button, is
when we want the scrolling text to stop.
| | 05:23 | So the actions that you have written in the top of your
actions panel, scroll down and scroll up dot unrelease,
| | 05:30 | we want to change those two unreleases to be unpress instead.
| | 05:35 | So for this dot scroll down dot unrelease
change the unrelease to be unpress.
| | 05:42 | Do the same thing for this dot scroll up.
| | 05:47 | So, now, when the viewer presses the mouse button
down that press will initiate the scrolling text.
| | 05:53 | Now we need to define what should happen when they release their
mouse button on both the scroll down and the scroll up buttons.
| | 06:01 | Click after the closed curly brace after this dot scroll
up dot unpress function, in this case mine's on line 11,
| | 06:10 | click after that close curly brace and then
press return or enter to create a new line break.
| | 06:17 | Then, type this dot scroll up dot unrelease space equals space function
open parenthesis close parenthesis space open curly brace a couple
| | 06:32 | of line breaks and a closed curly brace then click on that empty
line break between the open and close curly braces and then to stop
| | 06:41 | that looping action from looping, which is causing the text to
scroll, as I mentioned previously you need to delete it and remember,
| | 06:49 | when you created that on enterframe event handler,
I mentioned that you had to assign it to a timeline.
| | 06:55 | In this case we assigned it to the underscore root
timeline, the root timeline of the aboutUs.swf file.
| | 07:02 | So when you go to delete it Flash needs
to know, also, where it is located at.
| | 07:07 | So you need to make sure that you specify the timeline
that you assigned the on enterframe event handler to.
| | 07:14 | So type delete space underscore root dot on enterframe
making sure you have the capitalization correct
| | 07:24 | and then type a semi-colon at the end to end that action.
| | 07:29 | So that action just simply says delete the on enterframe
event handler that has been assigned to underscore root.
| | 07:37 | You want to do that same thing again but for the scroll down button.
| | 07:42 | So click after the close curly brace that ends the unrelease function
for scroll up press return or enter once to create a new line break
| | 07:52 | and then type this dot scroll down dot unrelease space equals space
function close parenthesis open parenthesis space open curly brace a couple
| | 08:06 | of line breaks and then close curly brace.
| | 08:09 | Then just like you did with the scroll up
dot unrelease click in that empty line break
| | 08:16 | and type delete space underscore root dot on enterframe semi-colon.
| | 08:24 | So that action simply says when the viewer releases their
mouse button from the scroll down button delete that loop
| | 08:33 | so that it no longer loops through the
actions thereby making the text scroll.
| | 08:37 | Let's see if that does the trick.
| | 08:39 | Go ahead and save the progress that you've done so far to this FLA.
| | 08:43 | Make sure that you publish a new SWF file by choosing file publish
and then go back to master dot FLA and test your movie there.
| | 08:55 | So now, if I press my mouse button down on the
down arrow, it should scroll through the text
| | 09:01 | until I let the mouse button go at which point it should stop, and it does.
| | 09:07 | I'm going to do the same thing for the up arrow, and I can see that
as long as I have my mouse button depressed on either the down arrow
| | 09:14 | or the up arrow, the text continually scrolls but as soon
as I let my mouse button go, the text stops scrolling.
| | 09:22 | So all that is essentially happening, if I
go back and look at the action script again.
| | 09:27 | Is that as the viewer presses their mouse button down on either the
scroll down or the scroll up buttons, it simply sets a variable that says
| | 09:37 | which direction the text should scroll, down or up,
and then it executes a function called scroll text.
| | 09:44 | Inside that scroll text function I've created
a method to loop through a series of actions.
| | 09:50 | In this case we used the on enterframe event handler that
we assigned to the root timeline of the aboutUs.swf file
| | 09:58 | and that on enterframe event handler loops through
the actions that we place inside of its function over
| | 10:04 | and over again until I delete that on enterframe event handler.
| | 10:09 | In this case the actions that it is looping through simply
checks to see whether or not that variable says down or up
| | 10:17 | and then scrolls the text either down one line or up one line
based on whether or not the viewer is pressing their mouse button
| | 10:24 | down on either the scroll down or the scroll up buttons.
| | 10:28 | As soon as the viewer lets their mouse button go, it simply
deletes that on enterframe event handler which stops that loop
| | 10:37 | from occurring thereby stopping the text from scrolling.
| | 10:40 | So that is how you create some scrolling text inside of your projects
that allows the viewer to continually scroll through the text for as long
| | 10:49 | as the viewer has their mouse button depressed on the
scrolling buttons and then stops as soon as they let go.
| | Collapse this transcript |
| Using the TextArea component| 00:01 | >> As an aside, if writing all this action script -- writing
all the LoadVars object, writing all the other action script
| | 00:08 | to get your scrolling text to load in, and again, allowing the
viewer to scroll through it -- if all that is just too much for you,
| | 00:15 | and you would rather just have a block of text that the viewer
can scroll through without all the hassle involved with it,
| | 00:22 | there's a component that you can also
use that will enable you to do just that.
| | 00:27 | Now, in the way I'm going to show it to you here, and again
there are ways around it to make it so that it is dynamic,
| | 00:32 | but in the method I'm going to show you here, the text that will be
displayed inside of the scrolling text field will not be dynamic.
| | 00:39 | But it allows you to create some scrolling text with
hardly any thought or any work on your part at all.
| | 00:45 | Just for this sample, I'm going to go ahead and create a new
FLA file and then I'm going to open up my components panel.
| | 00:53 | To do that, I'm going to choose Window, Components.
| | 00:59 | Now, the Components panel will differ depending upon if
you have Flash Professional 8 or Flash Basic 8 installed.
| | 01:06 | I have Flash Professional 8, so I can see additional
components in here, such as data, FLV playback, and so forth.
| | 01:14 | Regardless, on both Professional and Basic versions
of Flash 8, you should see a component inside
| | 01:20 | of the user interface section, a component called Text Area.
| | 01:26 | Go ahead and drag that Text Area component out onto your stage, and again,
this is just a new, blank FLA so I can demonstrate this component to you.
| | 01:34 | Then I'm going to go ahead and close my components panel and what I'm going
to do is I'm going to increase the size of this component a little bit
| | 01:42 | so that when I put text inside of it, you can actually see that text.
| | 01:45 | To do that, I'm going to select that component, and
then select my free Transform tool from the toolbox.
| | 01:51 | Once I do that, I can then drag on one of these corner
sliders to make that text area component a little larger.
| | 01:58 | The next thing I want to do is open up the parameters for this component.
| | 02:03 | An easy way to do that is to choose Window, Component Inspector.
| | 02:08 | This allows me to take a look at the various parameters
for the specific component that I have selected.
| | 02:13 | Now you'll see in here all the various sort of parameters that you
can specify for the component that you currently have selected.
| | 02:20 | In this case, the one we're interested in is the parameter called Text.
| | 02:25 | Now let's get some text first to put inside of that component.
| | 02:29 | To do that, I'm going to hide or minimize Flash for a moment, go
into the LA Eyeworks folder, into the site folder, into the Vars folder,
| | 02:38 | and then double-click and open the ourHistory.txt file.
| | 02:43 | This is the same text file that you were working with
earlier when you created your own scrolling text.
| | 02:48 | Then inside that text file, I'm going to
select everything except the first info equals.
| | 02:53 | I'm going to copy that text, and then I'm going to go back to Flash
and then double-click on this value field in this row called text.
| | 03:03 | Once I get in there, I'm going to paste that text that I have copied.
| | 03:07 | And then simply press Return or Enter.
| | 03:11 | Now, when I test my movie, you can see that I
have an easily created block of scrolling text.
| | 03:17 | It has a button I can click on to scroll down and up through
the text just like yours did that you created by hand,
| | 03:23 | and it also has a scroll bar that I can drag on to scroll through the text.
| | 03:28 | So if you just want the ability to allow the viewer to scroll through a
block of text without actually having to write all the action script to get
| | 03:36 | that to work properly, the text area component may be what you're needing.
| | Collapse this transcript |
|
|
5. Using HTML and CSSPreviewing what you're building| 00:01 | Before you get started with this chapter, let's first take a quick look at
exactly what it is that you're going to be constructing in this chapter.
| | 00:08 | Open up your preferred web browser and navigate to www.lynda.com
forward slash intflash8, intflash8, all one word forward slash LA Eyeworks.
| | 00:22 | Then, when that section loads, click on the
About Us option from the main menu at the top.
| | 00:28 | When the About Us, Our History text loads in, which is what you got to load
in in the previous chapter, take a look at how the text is formatted.
| | 00:37 | Notice, unlike what you completed in the previous chapter, there's a
paragraph break in this block of text, the word "Los Angeles" is bolded
| | 00:46 | and there's a hyperlink that changes when you move your mouse
over it much like some hyperlinks do on regular HTML web pages.
| | 00:54 | It's this formatting: The paragraph break, the
bolded text, the hyperlink with the A hover,
| | 00:59 | it's all that that you're going to be completing in this chapter.
| | 01:02 | You're going to learn how to use a combination of HTML and
cascading style sheets to give yourself that kind of styling
| | 01:09 | and that sort of functionality in your dynamically loaded text.
| | 01:13 | The challenge, as I'm sure you're aware of, is probably up until
this point whenever you wanted to make some text bold, for example,
| | 01:21 | you simply double-clicked on the text block, selected the
text inside of Flash, and then either choose a bold font
| | 01:28 | or clicked on the faux bold button in the
properties inspector to make that text bold.
| | 01:33 | The problem here, or the work around that you have to try and find, is:
Because the text is loaded dynamically and the text actually exists outside
| | 01:42 | of Flash you can't exactly select it inside
of Flash and tell it to be bold.
| | 01:47 | So how do you stylize your text?
| | 01:49 | How do you make some text bold?
| | 01:51 | How do you put paragraph breaks?
| | 01:52 | How do you create hyperlinks and so forth.
| | 01:55 | Again, you're going to do that by using a combination of HTML in
CSS, and that's what you're going to accomplish in this chapter.
| | Collapse this transcript |
| Formatting text using HTML| 00:01 | If you remember in the previous chapter, when you told the text to
be placed inside of this Text Field, which is called loaded Info,
| | 00:10 | you told Flash in your LoadVars object that the text that was going
to be displayed inside this Text Field would be HTML formatted,
| | 00:19 | that means that within your text that is going to be loaded into this
Text Field you can use HTML tags and those tags instead of being displayed
| | 00:28 | in the text will actually be parsed and used in the text.
| | 00:32 | So, for example, if you wanted to create a line break
you could use the BR tag to create that line break
| | 00:38 | and that line break would actually be incorporated into the text itself.
| | 00:42 | The question I'm sure you're probably wondering is, "Well
what HTML tags does Flash support, which can I use?"
| | 00:49 | If you open up your help panel by press F1 on your keyboard and then
navigate to the book called Learning Action Script 2.0 in Flash.
| | 00:59 | And then choose working with text and strings and then choose using HTML
formatted text and then lastly choose about supported HTML tags it's going
| | 01:13 | to show you various lists of HTML tags that Flash supports.
| | 01:18 | It supports anchor, bold, break, font, image, italic, list
items, paragraphs, spans, text format and the underline tag.
| | 01:27 | You can get more information about how to use each of those
tags by selecting them from the links here or within the
| | 01:33 | about supported HTML tags book selecting any one of
those tags that you want to get more information on.
| | 01:39 | So, while you may initially get really excited
thinking about how Flash supports HTML,
| | 01:45 | temper that with knowing that it doesn't support a whole lot of HTML tags.
| | 01:49 | It supports a core list of HTML items that you can use,
| | 01:53 | but you should still be able to do quite a bit
with the various HTML tags that Flash does support.
| | 01:59 | First let's go ahead and start adding some
paragraph breaks to your Our History dynamic text.
| | 02:05 | For now go ahead and close your help panel, hide or minimize Flash
for a moment and then on your desktop go into the LA Eyeworks directory
| | 02:16 | into the site directory into the Vars directory
and open up your Ourhistory.txt file.
| | 02:24 | In this file let's go ahead and use HTML
tags to create some paragraph breaks.
| | 02:29 | Now for those of you that do have experience with HTML you may think,
| | 02:33 | when you want to include some paragraph
breaks, that you use the P or paragraph tag.
| | 02:38 | In this case Flash does not translate that P or paragraph tag
into an actual paragraph break as it does in straight HTML.
| | 02:46 | To get a paragraph break you actually have to use two line breaks,
two BR tags back-to-back to create that visual paragraph break.
| | 02:56 | So let's create a paragraph break after the text "LA Eyeworks
store in 1979", click after that and then type less
| | 03:08 | than BR greater than and then do that one more time, like so.
| | 03:14 | Let's insert another break about midway down through the
text you'll see "LA Eyeworks works flow of intent reculture".
| | 03:21 | Click after that period and then again type in two more break tags.
| | 03:26 | Again, let's add another paragraph break a little further down from that
you'll see "architect and artist deeply rooted in the city's culture".
| | 03:36 | After "city's culture" click and type in another couple of break tags.
| | 03:42 | Lastly again a little further down from that, you'll see another block of
text that says "deeply rooted in the city's culture" and that's followed
| | 03:50 | by "Gai Gheradi" click after city's culture
period and again add lastly two more line breaks.
| | 03:59 | Accept. Save the changes that you've made to
the OurHistory.txt file navigate back
| | 04:07 | to Flash select the master.fla file and then test your movie.
| | 04:15 | When you do that, and your text loads notice how the HTML
tags are actually being displayed instead of being parsed.
| | 04:23 | In other words, we don't want to see break
break we actually want to see a line break.
| | 04:29 | Now some of you might be wondering, wait a second didn't we
actually already tell the text that was going to be inserted in here
| | 04:35 | to be HTML formatted text and yes we did but there's actually one more
step in there in that we need to tell the Text Field called loaded Info
| | 04:45 | that this text is being loaded into to parse those tags.
| | 04:49 | So there's actually one more step in there to do that, close
your preview window and return to your AboutUs.fla file.
| | 04:59 | Select that dynamic Text Field called loaded Info
on the stage and in your properties inspector next
| | 05:06 | to the line type pulldown menu you'll see three buttons
selectable, render text as HTML, and show border around text.
| | 05:15 | Select that middle button which is render text as HTML.
| | 05:20 | The same option which you're setting here manually
by the way can also be set using action script.
| | 05:25 | In this case we're just going to go ahead and set it manually.
| | 05:28 | Once you have made that change, again, save the changes to this file and
then publish a new SWF file from this FLA by choosing file publish.
| | 05:39 | Once more return to master.fla and test your movie.
| | 05:43 | When you do that notice how the break tags are no longer being displayed.
| | 05:48 | Instead they're now actually being parsed or utilized.
| | 05:51 | So if I scroll down, I'll see those line
breaks that I created inside the text.
| | 06:01 | So far, so good.
| | 06:02 | You've added a few line breaks or paragraph
breaks to your dynamically loaded text.
| | 06:07 | Next let's go ahead and add a hyperlink to this dynamic text.
| | 06:11 | Go ahead and close your preview window, hide or minimize Flash
for a moment, and then go back to your OurHistory.txt file.
| | 06:20 | Toward the top of that text file you'll see the name Neal Denari.
| | 06:24 | Let's make that name a hyperlink.
| | 06:27 | Click before the word Neal and type a less than A space href, href,
| | 06:36 | equals quote the pound sign which is shift
3 end quote and the greater than symbol.
| | 06:46 | Then click after the word Denari, type a less than
symbol a forward slash A and a greater than symbol.
| | 06:55 | So the beginning -- so the less than symbol and the letter A marks the
beginning of the anchor tag and then after the word Denari the less
| | 07:05 | than forward slash A greater than that tag marks the end of the anchor.
| | 07:11 | So the words Neal Denari is now a hyperlink the pound sign means
that it doesn't really go anywhere it's just a mock hyperlink,
| | 07:18 | but it will still allow us to test the hyperlink here inside of Flash.
| | 07:23 | Save the changes you've made to the Our History text file.
| | 07:27 | This time you don't actually need to go back into Flash if
you would like inside the LA Eyeworks folder in your desktop
| | 07:34 | in the site folder you already have a up to date version
of the master.swf file you can simply double-click
| | 07:41 | on master.swf to open it up in the stand alone Flash player 8.
| | 07:47 | When you do that you'll notice that Neal Denari which you
added a hyperlink to does not look like a hyperlink but,
| | 07:53 | if you move your mouse over it, notice how you get the
hand icon representing that it is, in fact, a hyperlink.
| | 08:00 | In Flash unlike with standard HTML viewing in a web browser
hyperlinks don't automatically get a color assigned to them.
| | 08:09 | Later you will learn how to use cascading style sheets to
assign a color as well as that A hover where it changes
| | 08:16 | when you roll your mouse over it for a hyperlinks in your HTML content.
| | 08:22 | For now, however, it still is a hyperlink, and we
can still have stuff happen when the viewer clicked
| | 08:27 | on it but again right now its color is not changing.
| | 08:30 | Lastly you might also notice how the text looks sort of bunched together.
| | 08:34 | The ledding or the space in between each line is quite
close together makes it a little more difficult to read.
| | 08:41 | Let's use an HTML tag specific to Flash called the text format HTML tag
that will allow us to modify the amount of ledding in between each line.
| | 08:52 | To do that first close your preview window and return to your OurHistory.txt
file after Info equals but before the word Los in Los Angeles,
| | 09:03 | click after that equals sign type a less than symbol and then write
text format space ledding equals quote 7 end quote greater than symbol.
| | 09:19 | What the text format does is, among other things,
allows us to specify the ledding or the amount of space
| | 09:25 | in between lines you have written this text format
tag right at the beginning of all the rest of the text
| | 09:31 | that is going to be displayed in the Our History section.
| | 09:35 | Let's specify where the text format tag should end.
| | 09:38 | It's actually going to end all the way at the very end of all of this text.
| | 09:42 | So click after the last period at the very bottom of the text
file and then type less than forward slash text format greater
| | 09:52 | than save the changes you've made to the
OurHistory.txt file then go back
| | 09:59 | to your site folder again and once again double-click on master.swf.
| | 10:04 | When you do that notice how now your text looks much more spaced
apart, so you can read it much easier now by changing the ledding
| | 10:12 | and by making each line a little further apart from one
another it makes it much easier for you to read through it
| | 10:18 | where as before it was bunched closer
together and a little more difficult to read.
| | 10:22 | So, so far, you've made, actually, quite a bit of progress.
| | 10:25 | You've learned how to use a few HTML tags to add paragraph breaks in the
text, how to create a hyperlink, and then how to use the text format tag
| | 10:34 | to be able to add more ledding to the
block of text that you have loaded in here.
| | 10:38 | In the next exercise you're going to learn how to use cascading
style sheets to actually style this dynamically loaded text.
| | Collapse this transcript |
| Styling text using CSS pt. 1| 00:00 | >> Now that you've learned how to use html tags in Flash to be able to
format your dynamically loaded text, in the next few exercises you're going
| | 00:10 | to learn how to use cascading style sheets
to style that dynamically loaded text.
| | 00:15 | Now, much like you were probably wondering
when you learned about html inside of Flash,
| | 00:20 | you're also most likely wondering what
cascading style sheets tags that Flash supports.
| | 00:25 | To answer that, go ahead and open up Flash, open up your help
panel by pressing F1, and choose the book on the left hand side,
| | 00:33 | Learning Action Script 2.0 in Flash, Working With Text
and Strings, Formatting Text With Cascading Style Sheets,
| | 00:43 | and then from within there, Supported CSS Properties.
| | 00:47 | On the right hand side, it'll show you a list of the
various CSS properties that Flash does support for your use.
| | 00:54 | You can use text align, font size, text decoration, margins, font weight,
kerning, font style, letter spacing, text indent, font family and color.
| | 01:07 | So as you can see, there's quite a lot of CSS
properties that you have available for your use
| | 01:12 | as you're beginning to style your dynamically loaded text.
| | 01:16 | As this isn't a title about cascading style sheets and to help you get
a leg up on getting started with it, for those of you who have access
| | 01:24 | to the exercise files, I've already created
a starter style CSS file to get you going.
| | 01:31 | If you hide or minimize Flash and then navigate to your site
folder, which is in the LA Eyeworks folder on your desktop,
| | 01:39 | you'll notice there's another folder in there called Styles.
| | 01:42 | For those of you that don't have access to the exercise files, in
your site folder make sure you create another folder called Styles.
| | 01:50 | Within that folder there's another file called styles.css.
| | 01:55 | CSS, of course, for cascading style sheets.
| | 01:59 | You can create that file in just a simple text editor
or you can create a new CSS file inside of Dreamweaver.
| | 02:06 | Now if you have Dreamweaver 8 installed on your computer,
which you probably will by the end of this title,
| | 02:12 | you can open up that styles.css file directly in Dreamweaver
and edit and create the cascading style sheets there.
| | 02:19 | If you do that, this is what you're going to see.
| | 02:23 | The styles.css file has a few different styles already pre-defined for you.
| | 02:29 | Now as you can see in this styles.css file, using cascading
style sheets, the paragraph tag, wherever that's being used inside
| | 02:38 | of your text file is going to be reformatted so that the font
being displayed is Bitstream Vera Sans at the size 11 pixels.
| | 02:47 | Additionally, an anchor tag, a link for the anchor tag, is going to be
formatted with a color as well as having a text decoration of an underline.
| | 02:55 | Also for the anchor, on hover, which means when you roll over an anchor,
| | 02:59 | the color is going to be changed and the
text decoration is going to be set to none.
| | 03:04 | As well, there are a few CSS classes that have been
defined, highlight, alight right and color blue,
| | 03:11 | which you will be able to utilize in later exercises.
| | 03:14 | Now, depending upon which platform you're using, Windows or
Macintosh, to author your Flash documents and your styles.css content,
| | 03:24 | there is a few slight changes, depending
upon, again, which platform you're using.
| | 03:29 | Notice here, in styles.css, it's changing
the font family to be Bitstream Vera Sans.
| | 03:36 | As you may remember me mentioning earlier, I talked about how Windows
and Macintosh had slight differences with how they organize fonts as well
| | 03:45 | as font variants, such as bold and italic and so forth.
| | 03:49 | Now which font family you define here, because again, we wanna use
our shared font that's been defined and set up in the shared library.
| | 03:58 | So if you wanna do that, what should you enter
here when you wanna use one of those shared fonts?
| | 04:03 | Should you use the linkage identification name that
you assigned when you created that linked shared font?
| | 04:09 | Or should you use the name of the actual font itself?
| | 04:13 | Right here, currently it says Bitstream Vera Sans.
| | 04:16 | You wanna make sure that the name of that font family matches up
with the name of the font when you created the shared font in Flash.
| | 04:25 | If you open Flash back up and then open the sharedlib.fla file, I can do
that by choosing open recent and then seeing if sharedlib is in that menu,
| | 04:36 | which it is, I'm gonna go ahead and open up sharedlib
and there's my Vera font inside of the sharedlib library.
| | 04:43 | If I right click, or control click on that and then
choose properties, I can see that the font inside
| | 04:49 | of the font pull down menu is set to be Bitstream Vera Sans.
| | 04:53 | You wanna make sure that the font listed here in the font pull down menu
is the same name as the font you're defining here in your styles.css file.
| | 05:03 | So if you're on the Macintosh, for example, and if you wanna use
the font Bitstream Vera Sans Bold, on Windows you can't do that,
| | 05:11 | you have to use Bitstream Vera Sans and then you would have to use
the highlight class to define that as using the font weight of bold.
| | 05:22 | On the Macintosh, however, because you do get access directly to
Bitstream Vera Sans bold, you can enter that name directly in here.
| | 05:30 | Now at the top of the styles.css file, on both Macintosh and
Windows, we wanna use the same font, Bitstream Vera Sans.
| | 05:39 | However, in later exercises, we will be using the class highlight.
| | 05:44 | Now currently, it says that the font weight is bold.
| | 05:48 | On Windows, since this is going to be applied within where
this CSS for the P tag is being defined as Bitstream Vera Sans,
| | 05:57 | that font weight of bold will work fine
as we're authoring it under Windows.
| | 06:02 | On the Macintosh, however, you would wanna change
that so instead of it being font weight bold,
| | 06:08 | you would instead need to replace this
with font family Bitstream Vera Sans Bold.
| | 06:14 | Again, that goes back to the differences between how
Macintosh's and Windows' computers organize their fonts as well
| | 06:21 | as the various parts of the fonts, bold, oblique and so forth.
| | 06:25 | So if you're on Windows leave the styles.css file
just like it is as you can see in this video.
| | 06:33 | If you're on the Macintosh, in styles.css that has been
provided for you if you have access to the exercise files,
| | 06:41 | under highlight change font weight bold to instead be, and I'm
gonna go ahead and select it here, font family, I'm gonna copy that,
| | 06:52 | under highlight I'm gonna select where it says font weight
and I'm gonna replace that with what I've copied, except,
| | 06:59 | again this is only for Macintosh users, instead of
Bitstream Vera Sans, it's gonna be Bitstream Vera Sans Bold.
| | 07:06 | Again, that change should only be made to Macintosh users.
| | 07:10 | Now you may also be wondering, does that mean that Macintosh viewers that
are visiting my site will see something different than Windows viewers?
| | 07:19 | And no, it doesn't.
| | 07:20 | It's only when you're authoring your Flash content does it actually differ.
| | 07:25 | Because remember, when you go and you create your sharedlib
file and when you're creating all those other modules
| | 07:31 | that use those shared fonts, it's referring
on your platform to these names.
| | 07:36 | So you need to make sure in the styles.css file that you're also
referring to those same names that are being used in the shared fonts.
| | 07:45 | Now that doesn't mean anything for the end viewer.
| | 07:48 | They will see exactly the same thing regardless of their platforms.
| | 07:51 | It's only when you're authoring it that you need to make sure to take
into account the differences between how the platforms handle their fonts.
| | 07:59 | I'm gonna undo these changes since I'm
demonstrating all of this on a Windows computer,
| | 08:04 | but on a Macintosh computer, this is how
your styles.css file should be set up.
| | 08:09 | On a Windows computer, on the other hand, it should look like this.
| | 08:12 | Now that you've seen the various CSS properties that Flash
supports as well as how the provided styles.css is constructed,
| | 08:20 | in the next exercise we're going to be applying some
of these CSS styles to the our history text enabling us
| | 08:28 | to style some of the elements within it to our liking.
| | Collapse this transcript |
| Styling text using CSS pt. 2| 00:00 | >> What we're going to do next is use
cascading style sheets to tell the text
| | 00:07 | in the R history.txt file to be formatted
using this paragraph information.
| | 00:12 | In other words, that it uses the font family Bitstream
Vera Sans at eleven pixels high to be displayed.
| | 00:20 | Hide or minimize Dreamweaver if you opened your styles dot CSS file in
there, or whichever application you used to view your styles dot CSS file.
| | 00:28 | Then return to your R history dot TXT file.
| | 00:33 | Now what I want to do is tell all the text inside of
here to be formatted using that CSS paragraph format.
| | 00:41 | So after text format ledding equals quote seven end
quote greater than before the word "Los" in Los Angeles,
| | 00:50 | I'm going to click and type in a less than P greater than.
| | 00:56 | That marks the beginning of the paragraph tag declaration for that CSS.
| | 01:01 | Then at the very end after together dot and before the end text
format tag, I'm going to click right after that period and type less
| | 01:10 | than forward slash P greater than to mark the end of that paragraph tag.
| | 01:16 | So that essentially means that everything between the
opening paragraph tag and the ending paragraph tag is going
| | 01:22 | to be formatted using what I defined inside of the styles.css file.
| | 01:27 | Again, returning to Dreamweaver in this case.
| | 01:30 | You can see that it's going to be formatted
using Bitstream Vera Sans at eleven pixels.
| | 01:36 | Next what I want to do is, I want to define
that the first words "Los Angeles" is bold.
| | 01:42 | To do that, I'm going to use this hilight class.
| | 01:45 | And again on Windows I'm simply using
CSS to change the font weight to be bold.
| | 01:51 | On Macintosh it's changing the font family to be Bitstream Vera Sans bold.
| | 01:56 | Back inside of R history.txt after the less than P
greater than, after that greater than and before the word los,
| | 02:05 | click and type less than span class equals quote
hilight, H-I-L-I-G-H-T, end quote greater than.
| | 02:21 | So we're using the span declaration to set the class to be
hilight, which is what we defined in the styles.css file
| | 02:28 | to mark the beginning of where we're making some text bold.
| | 02:32 | After the colon after Los Angeles, click there and mark the end of that
span declaration by typing less than forward slash span greater than.
| | 02:44 | So only the words "Los Angeles" and that colon will be
marked as being defined using that span class of hilight.
| | 02:52 | The anchor tag which you created earlier that is being applied to the text,
Neil Denari is already being modified in the styles.css file
| | 03:01 | so that the hyperlink is going to be changed color,
and it's going to have an underline underneath it.
| | 03:07 | As well it has an A hover declaration so that when the viewer moves
the mouse over it, the color changes and the underline disappears.
| | 03:15 | So you've already defined a hyperlink inside of the R history.txt
file, and the styles.css file already has information in it
| | 03:25 | to modify how that hyperlink is going to appear
and be used when the viewer interacts with it.
| | 03:31 | Going back to R history.txt, save the changes
that you've made to this file and return to Flash.
| | 03:40 | I'm going to close this font symbol properties dialogue box as well
as this sharedlib.fla file that I was using to show you earlier.
| | 03:49 | In the next exercise, you're going to learn how to write a little bit
of action script to dynamically load that external styles.css file
| | 03:58 | and use that to apply those style sheets to
the dynamic text field in the about us module.
| | 04:05 | Not only that, but you'll also be scripting it in a way that those styles
will be always applied to the text field in any module called loaded info.
| | 04:15 | That way you can use that one style sheet to affect
how text in any of the other modules is being styled.
| | 04:22 | 1
| | Collapse this transcript |
| Styling text using CSS pt. 3| 00:00 | Now that you've seen how the styles.css file is set-up,
as well as how those styles are now applied to the text inside
| | 00:09 | of your OurHistory.txt file, you're going to write the actions
script now to dynamically load that styles.css file and apply it
| | 00:19 | to the loaded info text field here on the About Us stage.
| | 00:23 | Now one important thing to know as you're doing what you are about to do,
which is to dynamically load a style sheet and apply it to a text field,
| | 00:31 | where dynamic text is being loaded in
to, is that the styles have to be loaded
| | 00:37 | and applied to the text field before the text can
then be loaded and placed inside of that same field.
| | 00:44 | So the field first has to know what style sheets are being
applied to it before the text can be then loaded into it.
| | 00:51 | So we just need to make sure, as we're writing our action
script in this exercise, that we keep that load order in mind.
| | 00:58 | First the CSS styles has to be loaded and applied
and then the text can be loaded in after that point.
| | 01:03 | To start, make sure that you're in Flash 8 and
that you have the AboutUs.fla file open.
| | 01:10 | Then, select the first key frame in layer A and open up the actions panel.
| | 01:16 | Again, your actions script that you'll see here in the actions panel
might differ slightly from what you see here in this video depending upon
| | 01:24 | if you followed the additional extra optional steps available
when creating the advanced scrolling text functionality.
| | 01:31 | Additionally, the actions script you're about to write, that loads in the
cascading StyleSheets file and applies it to the text field on the stage,
| | 01:39 | the way it is written and set-up is very similar to the LoadVars
scripting that you wrote in a previous chapter because of
| | 01:47 | that similarity they're really almost identical to each other in
terms of how it's written and how it all works, because of that,
| | 01:54 | we're going to sort of speed through the action script in this exercise.
| | 01:59 | Now first, let's go ahead and write a couple comment lines
to sort of cordon off an area of our actions panel reserved
| | 02:05 | for our cascading style sheets based actions scripts.
| | 02:09 | To start off, with go ahead and select the comment line
for scroll buttons just to give us a little starting point.
| | 02:16 | Right click or control click on that comment line and choose "copy".
| | 02:20 | Then, click before the topmost action press return or enter a few times
| | 02:26 | to create a couple line breaks select the topmost empty line
break in the actions panel and paste that copied comment.
| | 02:35 | Then, change the word scroll buttons to read "loadcss".
| | 02:42 | Then, select that comment line copy it and then click
after that comment line press return or enter a few times
| | 02:51 | to create some line breaks and then paste that copied comment again.
| | 02:55 | This time in the copy comment click before the word "load" and
type a forward slash to mark the end of that load CSS section.
| | 03:04 | Much like the LoadVars scripting that you did previously, the
first step is to create the new text field dot Stylesheet object.
| | 03:12 | Much like the LoadVars object that handles the loading of external
variables and their values into Flash, there's also a separate object
| | 03:21 | for dealing with the loading and applying of external style sheets.
| | 03:25 | It's called the text field dot style sheet object.
| | 03:28 | So this first action you're going to write
is going to create one of those new objects.
| | 03:33 | In the empty line break between your two comment lines, click there and
type bar space CSS Styles with a capital S in styles colon Text Field
| | 03:47 | with a capital T in Text and a capital F in Field dot
StyleSheet all one word with a capital S in Style and a capital S
| | 03:57 | in Sheet space equals space new Text Field dot
StyleSheet open parenthesis end parenthesis semi-colon.
| | 04:10 | So what this does is it creates a new name, CSS styles,
and assigns it to the Text Field dot StyleSheet data type
| | 04:19 | and within that variable name CSS Styles it creates
and assigns a new text field dot StyleSheet object.
| | 04:27 | This is the equivalent of essentially a new LoadVars object except this
object handles the loading and applying of external stylesheet files.
| | 04:36 | Next let's use that CSS styles Text Field dot
StyleSheet object to load our external StyleSheet file.
| | 04:44 | So after the action you just wrote, press return or enter to
create a new line break and then type CSS styles, which is the name
| | 04:52 | of that Text Field dot StyleSheet object you just created, dot load.
| | 04:57 | Then type open parenthesis quote and then the name and
location of where that StyleSheet file is located at.
| | 05:07 | If you remember, it's located in a directory called Styles.
| | 05:11 | So type Styles forward clash and the name of that style sheet.
| | 05:17 | If you again remember that, it's called styles.css.
| | 05:22 | Then type a close quote, a close parenthesis,
and a semi-colon to end that action.
| | 05:29 | Now very much like the LoadVars object, when you go to use that load
Vars object to load the variable value pairs from an external text file
| | 05:38 | into Flash, that object is then going to start loading in.
| | 05:42 | We can use an event handler to find out if
that loading process was successful or not.
| | 05:49 | So after the action you just wrote, press return or enter to
create a new line break, then type CSSStyles.unload.
| | 05:59 | Again, you should remember something identical from the LoadVars
unload event handler as well where we did the same thing there
| | 06:06 | and then type space equals space function space open parenthesis success
colon and let's strict type this to the Boolean data type and type BOOL
| | 06:20 | and it will auto complete it for you and then type a close parenthesis
space an open curly brace a couple of line breaks and a closed curly brace.
| | 06:30 | Then click in the empty line break between the beginning and ending
of that unload function and again just like the LoadVars object,
| | 06:38 | type "if" space, open parenthesis "success" closed parenthesis, space, open
curly brace a couple, of line breaks, and then a closed curly brace.
| | 06:51 | So, if the CSS file was loaded successfully, what do we want to happen?
| | 06:57 | Well the first thing we want to happen is we want to write an
action that tells Flash to then take those styles and apply it
| | 07:03 | to the loaded Info text field that's on the About Us stage.
| | 07:08 | So click in the empty line break between the open and closed curly
braces for the if conditional statement and then write loaded Info
| | 07:17 | with a capital I in Info, making sure, you, of course, have the
capitalization and spelling correct dot StyleSheet which is the property
| | 07:27 | of a Text Field we're applying a StyleSheet to that Text
Field then we just need to tell Flash what is the name
| | 07:34 | of the StyleSheet we're applying to that text field.
| | 07:36 | The name of the StyleSheet is the name that you gave
the Text Field dot StyleSheet object, CSS styles.
| | 07:44 | So after loaded Info dot StyleSheet type space
equals space CSS styles semi-colon to end action.
| | 07:52 | Again, make sure that you have the spelling and capitalization correct.
| | 07:55 | I may sound like a broken record each time I say that but, more often
than not, many of the support questions I get for any of my titles
| | 08:02 | or books almost always come back to misspelling
or getting a capitalization incorrect.
| | 08:07 | Now, if the CSS styles have been downloaded successfully not only do
we want those CSS styles to be applied to the loaded info Text Field
| | 08:16 | on the stage but at that point, and only after it's been downloaded and
applied, can we then tell our LoadVars object to then load the text
| | 08:26 | from the external text file and insert it into that Text Field as well.
| | 08:30 | Further down in your actions panel, you already have an action
that you've written previously, that tells that LoadVars object
| | 08:37 | in the main master.swf file to load the
variables from the OurHistory.txt file in.
| | 08:45 | So in your if statement, right after the action you just wrote loaded
Info dot StyleSheet equals CSS Styles, click at the end of that action
| | 08:54 | and press return or enter once to create
a new line break and then just drag it
| | 09:00 | into that new empty line break you created
within the if conditional statement itself.
| | 09:05 | So now what happens is you've told the CSS Styles Text Field
dot StyleSheet object to load the styles from Styles.css.
| | 09:14 | If that is successful, you've told it to then take those styles
and apply them to the loaded Info Text Field on the stage.
| | 09:24 | After it's done that, you've then told the myLV LoadVars object
which is back in master.swf to then load OurHistory.txt.
| | 09:36 | So only after the StyleSheets have been downloaded and applied to the
Text Field and only then do you tell the myLV LoadVars object back
| | 09:44 | on master.swf that it's okay to start downloading the Our
History.txt file and the variable value pairs within it.
| | 09:53 | Now, again, just like the LoadVars object, you've written so far
what should happen if the downloading of the StyleSheet is successful,
| | 10:02 | on the other hand, you should also write what should happen if it is,
for whatever reason, not successful in downloading that StyleSheet,
| | 10:09 | for example, if it can't find it, or if the file is just misspelled.
| | 10:13 | After the if statement click after the closed curly
brace that ends that if conditional statement click there
| | 10:21 | and type space, "else", space, open curly brace, a couple of line breaks, and
a closed curly brace, then click in the empty line break between the open
| | 10:32 | and closed curly braces that make up this else statement and type
loadedInfo.txt, space, equals, space, quote, and then we're going
| | 10:43 | to have a string of text be inserted into the Text Field on
the stage should there be a problem downloading the StyleSheet.
| | 10:50 | Let's basically type the same error message
that we used in the LoadVars object.
| | 10:55 | "There has been an error loading the requested
information, please contact the webmaster
| | 11:10 | and report your error", end quote, semi-colon to end that action.
| | 11:17 | So there you have the completed action script to download
the Styles.css file and all the styles within it,
| | 11:26 | apply those styles to the loaded Info Text Field on the stage, once that
has happened to then load the variable value pairs from OurHistory.txt
| | 11:36 | and that script that does that, again, is in the master.swf file
and once that information has been loaded it'll then take that text
| | 11:45 | and insert it into the Text Field for you on the stage.
| | 11:48 | Should there be a problem loading the styles.css
file an error message will appear in that same Text Field
| | 11:55 | that says there has been an error loading the requested
information please contact the webmaster and report your error.
| | 12:02 | So that is the script that makes up the
functionality of dynamically downloading
| | 12:06 | and applying the cascading StyleSheets file called styles.css.
| | 12:10 | There's quite a lot going on in there but, if you look at it, you'll notice
that it is very similar in structure and the way it's written between it
| | 12:18 | and the LoadVars object that you wrote earlier in master.fla.
| | 12:23 | Save the changes you've made to About Us and publish a new and updated
SWF, again, because you've obviously made quite a few changes
| | 12:31 | to this FLA file, you want to make sure that you publish
an updated SWF from it by choosing file publish.
| | 12:38 | Then, switch back to master.fla and test your movie.
| | 12:43 | When you do, you'll notice a few things have changed.
| | 12:47 | One, if you notice closely, the font that's being used for
this text is the font that you're using throughout the rest
| | 12:54 | of this site Bitstream Vera Sans, not only that but
because of our StyleSheet file the words "Los Angeles" is bold
| | 13:02 | and our hyperlink Neil Denari is now red
and there's an underline underneath it.
| | 13:08 | That's because of the "A" link information in that styles.css file.
| | 13:13 | Within that same file there's also, of course, the "A" hover information that
should change the color of that hyperlink as well as remove the underline
| | 13:22 | when the viewer moves their mouse over that hyperlink,
and I can see that if I move my mouse over that link.
| | 13:28 | So in this chapter you learned both how
to format your text using HTML tags,
| | 13:33 | you used two break tags to insert paragraph breaks
throughout the text, you also used the text format tag
| | 13:41 | to increase the ledding between each line of the text.
| | 13:44 | Additionally, you used the anchor tag to
add an anchor to the text Neil Denari.
| | 13:50 | After that you learned how to dynamically download and apply an
external styles.css file and have that format text that is loaded
| | 13:58 | into your dynamic text field. You learned how to use those
styles in the StyleSheet to make text bold, to change the font,
| | 14:06 | as well as to style hyperlinks both the regular
link as well as the "A" hover information.
| | 14:11 | So, you learned quite a lot of styling information and formatting
information in this chapter alone and as you can see you can do quite a lot
| | 14:19 | by using HTML and CSS to style dynamically loaded text.
| | 14:24 | It's actually really exciting being able to do all that stuff to text
that's dynamic, not only that, but because your text is external as well
| | 14:33 | as the styles.css file, that means that you and or the client
can go and not only update the text that is being dynamically loaded
| | 14:41 | and placed inside of this module, but you can also modify the
StyleSheet information, so should you or the client come back
| | 14:48 | and later decide you want to change the color of the hyperlink
or change which words are bolded and so forth you can easily do
| | 14:55 | that by modifying the StyleSheet and or even the text file itself.
| | 15:00 | So being able to use that external information such as the external text
and the external StyleSheet, gives you a lot of control over being able
| | 15:08 | to maintain and update this content at any later time.
| | 15:12 | Again, as I mentioned, it also gives the
client the ability to do that as well.
| | 15:17 | Now the last thing that we should double check before calling this
finished, is to make sure that the error handling works appropriately
| | 15:24 | if there's a problem downloading and applying
the cascading StyleSheets file.
| | 15:29 | As you saw with the LoadVars object there's an easy way to test this and
that's simply by changing the name temporarily of the styles.css file.
| | 15:38 | If you have your preview window open, go ahead and close
that for a moment and then hide or minimize Flash 8.
| | 15:44 | Then go on to your desktop into the site
folder and in there into the Styles folder.
| | 15:52 | That's where your styles.css file is located at for now temporarily
change the name to be something else like styles2.css for example
| | 16:03 | and then go back up one directory until
you locate the master.swf file.
| | 16:08 | Open that SWF file in Flash 8.
| | 16:13 | As you can see, it says "there's been an error loading the requested
information, please contact the webmaster and report your error."
| | 16:20 | That's the error message that we told Flash to display
if there was a problem loading the styles.css file.
| | 16:27 | So I can see based on that message that our error handling for
the Text Field dot StyleSheet object is working perfectly fine.
| | 16:35 | Now before I leave I want to make sure that I go back and change
the name of my StyleSheet back to what it was previously of course.
| | 16:42 | So back in the styles directory I'm going to change the name of that
file back to just styles.css and, just to make sure it works,
| | 16:52 | I'm going to reopen master.swf, and I can see that my
text now loads appropriately, and it's styled the way I chose.
| | 16:59 | So there you have it text that is not
only imported from an external text file
| | 17:04 | but is also formatted dynamically using HTML
tags and styled using external CSS StyleSheet.
| | Collapse this transcript |
|
|
6. Using the TextFormat ClassPreviewing what you're building| 00:01 | >> Before we get started with this chapter, let's first take a
quick tour of exactly what it is that you're going to be building.
| | 00:08 | Open up your preferred web browser and navigate to www.lynda.com
forward slash int slash eight forward slash LAEyeworks.
| | 00:20 | Once that website loads, click on the About
Us option from the navigation bar at the top.
| | 00:27 | In the last chapter, you learned how to construct the art
history section that dynamically loads in this text as well
| | 00:33 | as format it using html tags, and styles it using cascading stylesheets.
| | 00:39 | In this chapter, you're going to learn how to build this little sub-
menu over here on the left hand side that allows the viewer to navigate
| | 00:46 | between the different sections of the About Us section.
| | 00:50 | The default section it loads, as you built
in the last chapter, is our history.
| | 00:55 | But, by clicking on the our staff option, the viewer can
switch to this other sub-section in the About Us section.
| | 01:02 | So, in this chapter, you're going to be learning how to build this
sub-menu using a new action script class called the Text Format class,
| | 01:10 | which will allow you to use action script to dynamically
modify how this text is being displayed and styled.
| | 01:17 | So, let's get started.
| | Collapse this transcript |
| Adding the submenu| 00:01 | Make sure that you have AboutUs.fla open inside
of Flash and the first step that we want to do is
| | 00:08 | to create a new layer that's going to hold our submenu.
| | 00:11 | So select the layer that's underneath your "A" layer and create a new layer,
rename this new layer to be titled submenu, then if you look in the library
| | 00:23 | of your AboutUs.fla file you'll see a
couple of pre-made movie clips for your use.
| | 00:29 | One's called MC Our History, and the other is called MC Our Staff.
| | 00:35 | If you don't have access to the exercise files,
you can create these movie clips yourself.
| | 00:40 | All that's inside of those movie clips is a
dynamic text field, as you'll see in just a minute,
| | 00:46 | with the text "Our History" and the other movie clip has the text "Our Staff".
| | 00:50 | That's all that's inside of those movie clip symbols, then select
the MC Our History movie clip symbol and drag it out onto the stage
| | 00:59 | and position it to the left of the loaded Info
dynamic Text Field that's on the stage, like so.
| | 01:05 | You might also want to drag it around so the auto alignment
feature aligns it to the top of that dynamic Text Field.
| | 01:12 | Then let's open up that movie clip symbol.
| | 01:15 | Select the dynamic Text Field inside of it and
make sure that the font is set correctly as well
| | 01:20 | as the styling for that particular dynamic Text Field.
| | 01:24 | So once you drag that movie clip onto the stage double-click on it to open
it up and then make sure the dynamic Text Field inside of that is selected.
| | 01:33 | First, click on the font pulldown menu in the Properties Inspector
and choose the shared font that you copied over earlier Vera Oblique.
| | 01:44 | Again, you want to make sure you choose the shared font which
is defined as having the little asterisks after the name.
| | 01:52 | Then just make sure that the font rendering method is set to anti-alias for
readability which is the new anti-aliasing method here inside of Flash 8.
| | 02:00 | And then if you're on Windows make sure
that you check the faux italic option,
| | 02:05 | on Macintosh you don't need to do that but, again, on Windows you do.
| | 02:09 | Now because we're going to be using action script to modify how the text
inside this dynamic Text Field looks, we need to give it an instance name.
| | 02:19 | So, again, make sure that you have the dynamic Text Field inside of the MC
Our History movie clip symbol selected and then in the properties inspector
| | 02:28 | in the instance name field give it an instance name of
ourHistory, all one word with a capital H in history.
| | 02:36 | As you'll see later and, again, you will be using action script to
modify this dynamic text you'll be changing it using action script
| | 02:44 | from Vera Oblique to Vera Bold Oblique as well
as changing it's font size from 11 to 12 pixels.
| | 02:52 | Once you've assigned that dynamic text field and instance name go
back to scene one by clicking its tab up here above the timeline.
| | 03:00 | We also need to give the movie clip symbol instance
itself on the stage its own instance name as well.
| | 03:06 | So make that you are that you have that movie clip symbol
selected on the stage and in the properties inspector click
| | 03:12 | in the instance name field then just type ourHistoryMC with
a capital H in history and MC at the end capitalized as well.
| | 03:23 | So now the movie clip symbol as well as that dynamic
Text Field inside of it both have unique instance names.
| | 03:30 | So whenever I want to be able to talk to both the
movie clip as well as that dynamic text field inside
| | 03:35 | of it since they both have names I can easily do so.
| | 03:39 | Now we want to do those same steps for the MC ourStaff
movie clip symbol that is inside of the library as well.
| | 03:47 | So make sure, again, with the submenu layer still
selected in scene one of aboutUs.fla take
| | 03:53 | that MC ourStaff movie clip symbol and
drag that out onto the stage as well.
| | 03:59 | Again, I'm going to position that to the left-hand
side of that dynamic Text Field on the stage.
| | 04:05 | Then I'm going to double-click on that movie clip symbol to open it
up with that dynamic Text Field selected I'm going to change the font
| | 04:12 | to Vera Oblique, the shared font, then, because I'm on Windows,
I'm going to make sure that I select the faux italic button,
| | 04:23 | and I'm going to give it an instance name of Our Staff.
| | 04:27 | Then I'm going to go back to scene one, make sure
that that movie clip instance itself is selected
| | 04:34 | and give it an instance name of ourStaffMC, like so.
| | 04:39 | Now, I just want to make sure that my two movie clips symbols with
the text inside of them is aligned where I want them to be aligned.
| | 04:48 | So I'm going to move the ourHistory over just a little
bit, like so, like that, a little closer together
| | 05:06 | and there is the beginnings of the submenu for the About Us section.
| | 05:11 | What you're going to do in the next exercise is begin to write the action
script that will allow the Text Fields inside of these movie clip symbols
| | 05:19 | to be dynamically changed using action script, that way as the viewer is
interacting with these movie clip symbols, moving their mouse over them
| | 05:26 | and moving their mouse off, you can use action script to tell
the text inside those dynamic text fields to change as well.
| | 05:33 | We're going to do that in the next exercise
but before you continue on, of course,
| | 05:38 | since you've made some pretty good changes to
this FLA make sure that you save your FLA first.
| | Collapse this transcript |
| Writing the TextFormat objects| 00:00 | >> Now that you have your submenu options placed in your stage,
which again all those are is essentially movie clip symbols.
| | 00:09 | And inside of each of the movie clip symbols is
a dynamic text field with some text inside of it.
| | 00:15 | The only important parts of that is that both the dynamic text field
as well as the movie clip that it sits in, both have instance names.
| | 00:24 | That way using action script we can not only talk to the movie clip
symbol itself but to the dynamic text field inside of it as well.
| | 00:32 | So now that you have those, the next step is to create a
few text format objects that define how the text inside
| | 00:40 | of those movie clip symbols is going to look when the
viewer moves their mouse over and then off those options.
| | 00:46 | Select the first key frame in the "A" layer in the
aboutUs.fla file and open up your actions panel.
| | 00:54 | We're going to add the action script to modify how that text looks
in the submenu options at the bottom of the rest of the action script
| | 01:02 | that you've already added to the aboutUs.fla file.
| | 01:05 | So in the actions panel, scroll all the way down to the very bottom,
click after that last comment, and create a couple line breaks.
| | 01:15 | Then let's just add a comment so that later when we come back
to this action script, we can clearly see what's going on here.
| | 01:21 | To do that just type a couple of forward slashes, space, and then write
create text format objects that define the states of the submenu options.
| | 01:38 | Now you've been hearing me say that we're
going to use a text format object.
| | 01:43 | Now what the text format class itself allows you to do is to be able
to modify how text in either a static or dynamic text field looks.
| | 01:52 | You can modify the font, the font styling, such as italic
or bold, you can modify the font size and so forth.
| | 02:00 | So the text format object as its name implies,
allows you modify the formatting of the text.
| | 02:07 | We're going to use that class, rather an object of that class, to
be able to modify the text that appears in our sub menu options.
| | 02:16 | So the first thing that we're going to do is
we're going to create a new text format object
| | 02:20 | that will change how the submenu option looks when it's been disabled.
| | 02:26 | In other words, when the viewer's currently looking
at one of the subsections within the About Us section,
| | 02:32 | the current subsection you're looking at, that option will be disabled.
| | 02:36 | To put it another way, when the viewer is actually looking
at the R history subsection of the about us section,
| | 02:44 | in our submenu that R history option will be disabled.
| | 02:49 | The viewer can't click on it because they're
already viewing that subsection.
| | 02:53 | So what we're doing to do is we're going to create a text format object
that will change how that submenu option looks when it's been disabled,
| | 03:02 | when the viewer is currently looking at that subsection.
| | 03:06 | After the comment that you've just written inside of your
actions panel, press return or enter to create a new line break.
| | 03:12 | Then write var space btn disable.
| | 03:18 | All one word with a capital D in disable.
| | 03:22 | Then, strict type this to the text format
data type by typing colon text format.
| | 03:30 | Then, just as you've seen many times before so far in this title,
| | 03:34 | type space equals space new space text format open
parenthesis closed parenthesis semi-colon to end that action.
| | 03:45 | So what this does is it creates a new text format
object, and it assigns that to the name button disable.
| | 03:52 | We will then use this text format object later to tell the
submenu option text to change to look one certain way or another.
| | 04:01 | What we'll actually be doing is within the parenthesis after
new text format, within those set of parenthesis right there,
| | 04:09 | we'll be writing how we want the text to be
formatted for this button disable text format object.
| | 04:16 | We can again define the font, the size, the
styling, whether it's bold or italic, and so forth.
| | 04:22 | There's lots of different things that we can do.
| | 04:24 | If you'd like to get more information about how the text format
object itself works you can open up your help panel by pressing F1,
| | 04:33 | navigating to on the books on the left side, the action
script 2 language reference, action script classes.
| | 04:42 | Scroll down until you locate Text Format, and then if you look
| | 04:47 | on the right-hand side it'll give you a little
description about how the text format class works.
| | 04:53 | You can see all the different various things that you can modify such as
a line, bold, bullet, font, indent, italic, kerning, ledding and so forth.
| | 05:02 | Additionally if you keep scrolling down, you can see there
are a few different ways of writing the text format object.
| | 05:09 | Notice how it says text format and then an open parenthesis
at the beginning and a closed parenthesis at the end,
| | 05:15 | but in between there are all the different sorts
of options and properties that you can modify.
| | 05:21 | First comes font, then size, then color,
bold, italic, underline and so forth.
| | 05:29 | Now that's important because what we're going to do is, again
in between the open and close parenthesis we're going to write
| | 05:36 | and define how we want the text in our submenu options to
appear when that particular option is, in this case, disabled.
| | 05:44 | So we want to specify the font, what font we want
to use when that option is disabled, what size,
| | 05:50 | what color, if it's bold, if it's italic and so forth.
| | 05:54 | It also tells you what type of data type is
going to be entered for those particular options.
| | 06:00 | The font is going to be a string, the size is going to be a number as
well as the color. Bold and italic as well as underline on the other hand,
| | 06:08 | will be boolean, that means true or false.
| | 06:11 | So when we're writing our text format object
in between the open and closed parenthesis,
| | 06:17 | we just want to make sure that we have the order
right, that we're specifying how the text should look.
| | 06:21 | I'm going to go ahead and close my help panel for now and then I'm going
to click in the actions panel in between the open and closed parenthesis
| | 06:30 | after new text format, which is what you just wrote.
| | 06:33 | The first step is to write which font I want
the text to use, when that button is disabled.
| | 06:39 | So in other words, if the viewer is looking at a current section,
we're going to have that current section submenu option be disabled.
| | 06:46 | So how should it look?
| | 06:48 | The font that the submenu options are using
by default is Bitstream Vera Sans oblique.
| | 06:54 | When that option becomes disabled I want
it to use Bitstream Vera Sans bold oblique.
| | 07:01 | Now on Macintosh you can define that actual font itself.
| | 07:05 | You can just write, and this is what you should do if you're
on the Macintosh, type quote bitstream vera sans bold oblique.
| | 07:17 | If you remember again that's the name of the font that you chose
when you created that shared font in the sharedlib library.
| | 07:23 | And then type in end quote.
| | 07:25 | So Macintosh users in the opened and closed parenthesis, after
new text format, write quote Bitstream Vera Sans bold oblique.
| | 07:35 | Windows users have to do that a little bit differently.
| | 07:38 | Instead for Windows users, just type quote
Bitstream Vera Sans end quote, like so.
| | 07:47 | Then after the quote, type comma space twelve
comma space null comma space true comma space true.
| | 08:02 | Now again, you may be going what is the
comma twelve comma null, what does that mean?
| | 08:07 | Again, that's why I pointed out in the help panel to begin with, under
the text format option, down towards the bottom in the help panel,
| | 08:18 | it specified the order that you get to
choose how the text is going to be formatted.
| | 08:22 | First the font, then the size, then the color.
| | 08:27 | Now in that option, we chose null.
| | 08:30 | That's what we wrote when we were defining the text format object.
| | 08:33 | That's means that we're not modifying or
having modified the color of the text.
| | 08:37 | We just wrote null which means leave it the color that it already is.
| | 08:41 | And then we wrote on Windows, true comma true.
| | 08:45 | That means bold should be true, that yes
that text should be bolded as well as italic.
| | 08:51 | True comma true means use bold, use italic.
| | 08:54 | Now Macintosh users don't have to do that step because
they get to choose precisely the font they want to use.
| | 09:00 | Bitstream Vera Sans bold oblique.
| | 09:03 | But on Windows again, we just need to tell Flash itself that we
want to use bolding and we want to use italic styling as well.
| | 09:10 | I'm going to again, close my help panel.
| | 09:14 | So what that text format object does, when we activate it, when we say take
the dynamic text field and apply the button disable text format object
| | 09:23 | to it, it's going to make that text Bitstream
Vera Sans bold oblique on the Macintosh.
| | 09:29 | And on Windows it's going to use Bitstream Vera Sans and it's going to use
the styling of bold and oblique because we specified that as true and true.
| | 09:39 | So on Windows, this is how your button
disabled text format option should look.
| | 09:44 | It should say var button disable, colon, text format equals new text format
open parenthesis quote bitstream vera sans end quote comma twelve comma
| | 09:57 | null comma true comma true end parenthesis semi-colon to end the action.
| | 10:03 | Now the space after the comma is optional.
| | 10:06 | I add it in there because it's a little
easier to read as you read through the action.
| | 10:10 | Macintosh users on the other hand, your button
disabled text format option should look like this.
| | 10:26 | So it should say new text format open parenthesis quote
bitstream vera sans bold oblique end quote comma twelve.
| | 10:35 | That's it.
| | 10:36 | Because you can specify the exact font
face, including the styling bold oblique.
| | 10:41 | In the font name itself and the only other
option that you're modifying is the size.
| | 10:46 | It's going be twelve point because I'm recording
this title under Windows, I want to go back
| | 10:51 | and leave it set to the changes that it was at for Windows.
| | 10:55 | So you've just specified a new text format object called button disable,
that when you apply it to a dynamic text field will set the font
| | 11:05 | to be Bitstream Vera Sans twelve point bolded and italic.
| | 11:10 | Next you want to create another text format object that
changes how the text should look when it is not disabled.
| | 11:17 | Again, you're only going to apply this text format object that you've
just created to one of the submenu options when it becomes disabled,
| | 11:26 | when the viewer is currently looking at the section.
| | 11:29 | Now when they're not looking at that section, and the
viewer can then click on that option if they'd like,
| | 11:34 | we're going to create another text format
object to style the text a different way.
| | 11:39 | So at the end of the action that you just wrote, create another empty line
break and this time type var space btn Enable, with a capital E in enable,
| | 11:54 | colon text format space equals space new text format
open parenthesis closed parenthesis semi-colon.
| | 12:05 | Again as always, make sure that you have
your spelling in capitalization correct.
| | 12:09 | When you're writing text format, the T in text
and the F in format should be capitalized.
| | 12:16 | Then you need to specify within the parenthesis how you want the text
to look with this text format object called button enable is activated.
| | 12:25 | So click in between the open and close parenthesis after new text format,
| | 12:29 | and on Windows write quote Bitstream Vera Sans end quote comma
space eleven comma space null comma space false comma space true.
| | 12:48 | Now what this means again on Windows, is that when the button
enable text format object is selected, it's going to change the text
| | 12:56 | to be Bitstream Vera Sans eleven point, we're not modifying the color,
we don't want it to be bolded, that's what false stands for in this case.
| | 13:06 | But we still want it to be oblique.
| | 13:08 | So we'd leave that set for true.
| | 13:10 | On Windows that is what you'd write.
| | 13:12 | On the Macintosh however-- let me delete all that-- you would write
quote Bitstream Vera Sans oblique end quote comma space eleven.
| | 13:26 | So on Macintosh you're simply saying that you want the text to
be displayed as Bitstream Vera Sans oblique at eleven point.
| | 13:34 | Now again because I'm on Windows, I'm going to undo those changes
so that I'm back to the way it should be formatted under Windows.
| | 13:41 | Now the awesome way about how the text format object works is as you can
see, it's very easy to specify a text format object and then just write
| | 13:50 | in how you want the text to appear when that
particular text format object is applied to your text.
| | 13:56 | So here we just have two text format objects, one that is going
to be selected when the text is disabled when the viewer's
| | 14:02 | on that current section, and one when the text is
enabled when the viewer is not on that current section.
| | 14:09 | What you're going to beginning doing in
the next exercise is to start defining
| | 14:13 | when those text format objects should be applied
to the text field submenu options on the stage.
| | 14:20 | Before you continue on, make sure that you save your changes.
| | 14:22 | 1
| | Collapse this transcript |
| Autosizing the submenu options| 00:00 | >> Now that you've written the text format
objects button disable and button enable,
| | 00:06 | the next step is that you should probably disable the submenu
option that is the same as the section that loads by default.
| | 00:14 | If you remember, in the About Us section,
when the viewer gets to that section,
| | 00:19 | when that SWF file first loads, the Our History section loads by default.
| | 00:24 | So when the viewer is navigating through your
website and they click on the About Us option
| | 00:29 | and that section loads, Our History is the section that first is visible.
| | 00:34 | So we want that option to be disabled.
| | 00:37 | We don't want the viewer to be able to click on it
because they're already looking at that content.
| | 00:41 | What we're gonna do is we're gonna utilize the button disable
text format object to have that submenu option be disabled
| | 00:49 | when the viewer first comes to the aboutUs.swf file.
| | 00:52 | In the actions panel, again with the first key frame in your "A"
layer in aboutUs.fla selected, in your actions panel click the end
| | 01:02 | of the last action you wrote, then press return or
enter a few times to create a couple empty line breaks.
| | 01:08 | Then just write a quick comment that reads,
forward slash, forward slash, space,
| | 01:14 | disable the submenu option that corresponds
to the currently loaded section.
| | 01:27 | And then type an empty line break after that.
| | 01:31 | Next, we need to target the dynamic text field
that we wanna modify the text format styling of.
| | 01:38 | So click on the "insert a target path" button at the top of
the actions panel, open the Our History MC movie clip symbol
| | 01:47 | that you see in that window and choose the text Our History.
| | 01:51 | At the top of the insert target path dialogue box, you should see it, enter
the path this.ourhistorymc, which is the name of the movie clip symbol
| | 02:00 | on the stage, .ourhistory, which is the
name of the dynamic text field within that.
| | 02:06 | Make sure it's set to relative and then just simply click OK.
| | 02:10 | Flash will enter the path to that dynamic text field in the actions panel.
| | 02:15 | Then to apply the button disable text format object to that text field
that you've specified write .setTextFormat, all one word with a capital T
| | 02:29 | in Text and a capital F in format, open parenthesis, and then the name
of the text format object that you want to apply to that text field.
| | 02:38 | In this case, button disable.
| | 02:42 | Close parenthesis, semicolon.
| | 02:45 | That's it.
| | 02:46 | It's actually really easy to work with
and apply to your dynamic text fields.
| | 02:51 | So now that you've written that, let's actually
test this and see how it's working so far.
| | 02:55 | Save the changes you've made to aboutus.fla and
publish a new SWF file by choosing file, publish.
| | 03:04 | Now you don't even need to switch over to master.fla here inside of
flash, you haven't made any changes to that content, so if you'd like,
| | 03:13 | if it's easier, you can hide or minimize Flash, open the LA
Eyeworks directory on your desktop and open the site directory
| | 03:21 | in there then simply locate master.swf and double
click on that to open it in Flash Player 8.
| | 03:29 | As soon as the About Us section loads, you'll notice
that Our History now looks different than Our Staff.
| | 03:36 | It's one point size bigger and it's not only just
oblique, or italicized, it's also bolded as well.
| | 03:42 | So your text format object has been correctly
applied to your Our History text field on the stage.
| | 03:49 | Perfect. Except now, the only thing that obviously is
really wrong with it is that your text is getting cut off.
| | 03:55 | If you remember, your text field that this text resided in was at a fixed
size and while it was fine while the text was formatted as Our Staff is,
| | 04:04 | now bolded and at 11 point, it fit and displayed that text just fine.
| | 04:10 | But now you're changing the size of the text and making it bolded so it
no longer fits in the size that you defined for that dynamic text field.
| | 04:18 | What we're going to do next is write an action that will
automatically resize that text field if the text inside
| | 04:25 | of it changes size or changes to bold or italic or so forth.
| | 04:30 | Once you've verified, however, that the Our
History text is one point size bigger and bolded,
| | 04:37 | go ahead and close your player window and return to Flash 8.
| | 04:41 | Let's write the actions that tell those text fields to be auto
sized before where you've written the text format objects.
| | 04:49 | So again, back in aboutUs.fla, with the first key
frame and layer A selected, in your actions panel,
| | 04:56 | click before the comment that reads create text format
objects that define the states of the sub menu option.
| | 05:02 | Click before that comment line and then press return or enter a few times
to create a couple empty line breaks and move all that content down.
| | 05:11 | Then select backup in those empty line breaks that you created
and write a new comment that reads two forward slashes, space,
| | 05:21 | set the alignment of the submenu options to auto size right.
| | 05:31 | Now even though you may think auto size
right, that means expand to the right,
| | 05:35 | don't we want them to expand to the left so
that they're all aligned the same on the left?
| | 05:40 | That's what auto size right, as you're about to see, does.
| | 05:43 | It keeps the right hand side of the text field in the exact same
space and it auto sizes or expands that text field out to the left.
| | 05:52 | Once you've written that comment, go ahead and press return
or enter to create another line break underneath that.
| | 05:57 | Then let's start by telling that our history
text field on the stage to auto size itself.
| | 06:04 | So click on the insert a target path button at the top of the actions
panel and once again open up the ourHistorymc movie clip symbol
| | 06:12 | and then select Our History in there and then click OK.
| | 06:18 | Then after that, type .autoSize, all one word with a capital S in Size,
space equals space, quote, because when you specify the auto size alignment
| | 06:32 | of a text field, it's a string, so you
type quote, right, end quote, semicolon.
| | 06:39 | That's it.
| | 06:40 | Now we should also specify, while we're here,
the auto size alignment of the other text field.
| | 06:46 | So press return or enter on your keyboard, click on the
insert a target path button at the top of the actions panel,
| | 06:54 | this time open up the ourstaffmc movie clip symbol and
select the text our staff inside of there and click okay.
| | 07:03 | Then I can either type out .autoSize equals right or I can select that
part of the action that we just wrote previously and while holding
| | 07:11 | down my control key on Windows, or option on the
Macintosh, I can drag that down after our staff to copy it.
| | 07:19 | So now you've specified that the text fields, our history and our staff,
in the respective movie clips in the stage will be auto sized to the right.
| | 07:28 | That means that the right hand side of the text field will stay
in the same place and will automatically expand out to the left.
| | 07:36 | When you're working with auto size, the other options that you
have available to you instead of right is also center and left,
| | 07:43 | so you can have your text fields, when you're using them
for your own uses, automatically expand both to the left
| | 07:49 | and right if you have the auto size set to
center, or if you have auto size set to the left,
| | 07:54 | it will automatically expand the fields out to the right hand side.
| | 07:59 | So now let's just make sure that it's working
and displaying our text fields correctly.
| | 08:04 | So save the changes you've made to about us, publish a new SWF file from
this FLA by choosing file, publish, hide or minimize Flash, and then again,
| | 08:15 | back in your site directory, double click on master.swf and you should now
see your our history text be displayed correctly without getting cut off.
| | 08:25 | That's because you specified that the auto size property of
that dynamic text field should be on the right hand side,
| | 08:31 | so the right hand side of the text field stays
in the same place and it expands out to the left.
| | 08:36 | Now remember, your Our History text, when you created
it inside of Flash, looked just like our staff does.
| | 08:42 | It's just italic at 11 point.
| | 08:45 | But you used the text format object in action script to set
the Our History text one point size bigger and bolded as well,
| | 08:54 | so that Our History styling is because of the text
format object that you wrote with action script.
| | 09:00 | Now that you've defined how that Our History text should look, in the
next few exercises, you're going to define how the text should behave
| | 09:08 | as the viewer moves their mouse over and off of them.
| | 09:12 | But before you continue on to the next exercise, go ahead and close your
Flash Player 8 window and return back to Flash inside of aboutUs.fla.
| | Collapse this transcript |
| Creating the RollOver and RollOut states of the submenu| 00:00 | >> In this exercise, you're gonna write a few actions
that define what should happen to the submenu options
| | 00:07 | when the viewer moves their mouse both off
and then on to those submenus themselves.
| | 00:13 | Now a lot of this is just purely review.
| | 00:15 | You've already used action script inside of a key frame to modify what
should happen when the viewer interacts with a button on the stage
| | 00:24 | as you did when you dealt with the scrolling
text inside of this aboutUs.fla file itself.
| | 00:30 | You're gonna do the same thing here, but
you're just going to modify what should happen
| | 00:34 | when the viewer interacts with those submenu options themselves.
| | 00:38 | So first, make sure that you're in aboutUs.fla, that you have the first
key frame and layer A selected, and in the actions panel scroll all the way
| | 00:47 | down to the bottom, then click at the end of the very last action,
press enter or return to create a couple empty line breaks,
| | 00:57 | and because you're going to write a decent block of actions, let's first
sort of cordon off these actions with a few comment lines, so that, again,
| | 01:06 | as we're scrolling down and looking at all our
comments, we can clearly see where the action script
| | 01:11 | that controls the interactivity for these submenu options is located at.
| | 01:15 | You can either start typing in this comment from scratch or you can
just scroll up until you locate one of the other long comment lines,
| | 01:22 | like scroll buttons here, select that and copy it, and then just paste it.
| | 01:27 | I'm gonna choose the latter option, I'm
gonna select this comment line, copy it,
| | 01:33 | scroll down to the bottom empty line break that I created and paste it.
| | 01:38 | Then I'm just gonna change the comment name here
in the middle to instead read Our History option.
| | 01:46 | Then I'm gonna select that comment line, copy it, click at the
end of that comment line, press return or enter a few times
| | 01:56 | to create some empty line breaks and then paste that comment line.
| | 02:00 | Then to mark the end of that comment, I'm gonna click
before the word "our" and put a forward slash there.
| | 02:06 | Now again, as you saw with the scrolling text buttons when
you wanna modify the interactive behavior of a movie clip
| | 02:14 | or a button symbol, you have to attach it to a function.
| | 02:18 | So first, let's target the movie clip symbol
that the viewer is going to be interacting with.
| | 02:23 | Let's start, as the comment implies here, with
the Our History option in the submenu buttons.
| | 02:29 | Click in the empty line break in between those two comment lines and
click on the insert a target path button at the top of the actions panel.
| | 02:38 | Then from that dialogue box, select ourhistorymc and click OK.
| | 02:44 | It will then insert the instance name of that movie clip
symbol that we wanna modify the interactive properties of.
| | 02:51 | Then after ourHistorymc, type .onRollOver, space, equals,
space, function, open parenthesis, closed parenthesis, space,
| | 03:05 | open curly brace, a couple of line breaks and a closed curly brace.
| | 03:12 | So we're gonna modify the on rollover properties
of that history mc movie clip symbol on the stage.
| | 03:19 | Now what should happen when the viewer rolls
their mouse over the Our History movie clip?
| | 03:24 | For now, ignore the fact that we already wrote an action that
tells that particular movie clip symbol, and the text inside of it,
| | 03:32 | to look like it's disabled, how we want disabled to
look, which is at a size of 12 pixels and bolded.
| | 03:38 | Ignore that fact for now, because we're going to be defining,
in this case, how we want, if all things were being equal,
| | 03:45 | how we want those options to appear as the viewer interacts with them.
| | 03:50 | Click in between the open and closed curly braces for that on rollover
function and what we want to happen, when the viewer rolls their mouse
| | 03:58 | over one of our submenu options is we want that
submenu option to appear like it's disabled.
| | 04:04 | It's gonna get one point size bigger and bolded.
| | 04:07 | So essentially want we wanna do is exactly the same thing we did
previously to make that submenu option, Our History, look disabled.
| | 04:15 | We're gonna set the text format of the dynamic text
field inside that movie clip symbol to be disabled.
| | 04:21 | So inside of this on rollover function, click in the empty line
break and write this.ourHistory.settextformat, open parenthesis,
| | 04:35 | ETN disable, close parenthesis, semicolon to end that action.
| | 04:42 | Now you may be saying to yourself, wait a minute, what is this.ourHistory?
| | 04:46 | Don't you need to say ourHistorymc.ourHistory.settextformat?
| | 04:51 | Well that's where the this keyword comes in handy.
| | 04:55 | In this case we're writing some action script within a function and
that function is attached to the movie clip symbol called ourHistorymc.
| | 05:06 | When you're writing action script within a function that's been
assigned to a timeline or a movie clip symbol, like ourHistorymc,
| | 05:13 | inside of that function where you use the key
word this means essentially that you're starting
| | 05:19 | from where this function is being applied to, ourHistorymc.
| | 05:23 | So when I use the key word "this", that means from the ourHistorymc
movie clip, within there is Our History and then what we're doing
| | 05:32 | to that is we're modifying the set text format property.
| | 05:36 | So inside of a function that's been attached
to a timeline or movie clip symbol,
| | 05:41 | the "this" keyword references from that timeline or movie clip symbol down.
| | 05:47 | So this means ourHistorymc, essentially, and
then Our History set text format button disable.
| | 05:55 | So when the viewer rolls their mouse over the Our History movie clip symbol
on the stage it's going to change the text format of the text field inside
| | 06:04 | of that movie clip symbol to be button disabled, in other
words, it's going to appear bolded and one point size bigger.
| | 06:10 | Now we need to define what should happen when the
viewer moves their mouse off of that movie clip symbol.
| | 06:16 | We're gonna write that below this function that you've just created.
| | 06:20 | So after the closed curly brace that marks the end of the
on rollover function, click after that closed curly brace
| | 06:26 | and press return or enter to create a new line break.
| | 06:30 | Then select that whole function, the three lines, this.ourHistorymc,
that whole function all the way to the closed curly brace that ends
| | 06:38 | that function, select those three lines, right click or control
click on that and choose copy, then click on the empty line break
| | 06:45 | that you've just created underneath that function and paste that.
| | 06:50 | In this case, there's a few things we want to change.
| | 06:53 | We want to change that it's not on rollover, but instead, in roll out.
| | 06:58 | Now when the viewer rolls their mouse out, or off, of that movie clip
symbol, we don't wanna set the text format of the dynamic text field
| | 07:07 | in side that movie clip to be button disable, we wanna change
it back to be what it is by default, which is button enable,
| | 07:14 | so inside of the on roll out function, change
this.ourHistory.settextformatbuttondisable
| | 07:23 | to be button enable, like so, without the S of course, button enable.
| | 07:29 | Sow when it's base functionality, that's how the
Our History submenu functionality is going to work.
| | 07:36 | All things being equal, when the viewer rolls the mouse over
the Our History submenu option it's gonna change the text
| | 07:43 | to appear one point size bigger and bolded,
that's what this line here does.
| | 07:48 | When they move their mouse off of that option
it's gonna set it back to the way it was,
| | 07:52 | which is not bolded at 11 pixels, that's what this line here does.
| | 07:59 | We want the our staff option to behave the same way, so let's go ahead
and take the action script that we've already written, this functionality,
| | 08:07 | and copy it and just repurpose it for the our staff option.
| | 08:12 | Click after the last comment line that ends the Our History option, create
a couple of empty line breaks by pressing return or enter a few times,
| | 08:20 | and then select all the Our History option
action script, including the comment lines.
| | 08:26 | So I'm gonna select all that content, again including the comment
lines, and then I'm gonna hold down my control key on Windows,
| | 08:33 | or option on the Macintosh, and drag that whole selected block of
action script down to the bottom most empty line break that I created.
| | 08:42 | Then I just wanna change anywhere I see the word "history" with "staff",
so even in the comment line I'm gonna change it to be our staff option
| | 08:52 | and in the closed comment line, our staff option, and then in the first
action in here, I'm gonna change where it says ourHistorymc to ourStaffmc,
| | 09:02 | making sure to keep the capitalization and spelling correct, and
from within there I'm gonna change this.ourHistory to this.ourStaff.
| | 09:12 | And then again, beneath that, ourHistorymc should be ourStaffmc and
then this.ourHistory should be this.ourStaff, and there you have it.
| | 09:23 | That's the base functionality for how
the submenu options are going to work.
| | 09:28 | Let's save these changes and test to see what
we've done here has effect our submenu options.
| | 09:34 | So in about us, save the changes you've made to
this file and publish a new SWF file from this FLA.
| | 09:41 | Then hide or minimize Flash, go into your
site directory and open up master.swf.
| | 09:50 | When you roll your mouse over Our Staff, you see
that it becomes bolded and one pixel size bigger.
| | 09:56 | It goes from 11 to 12.
| | 09:57 | When you move your mouse off of it, it goes back to the way it was again.
| | 10:01 | Now Our History, if you roll your mouse over that, and then off
of it, you'll notice that it changes back to the way it was.
| | 10:08 | Now because Our History is the section that's
currently loaded, we don't want the viewer to be able
| | 10:13 | to interact with that option because they're on that section.
| | 10:17 | They shouldn't be able to interact with
the Our History submenu option at all.
| | 10:21 | It should be disabled.
| | 10:22 | They shouldn't even be able to interact with it.
| | 10:24 | That's what we're gonna do in the next exercise.
| | 10:27 | But as you can see here, you've already accomplished quite a lot.
| | 10:30 | You've created rollover options for your
submenu options entirely with action script.
| | 10:36 | All that you're doing is you're using the text format object to modify
how the text should appear when the viewer rolls their mouse over
| | 10:43 | and then off of the movie clip that contains those fields.
| | 10:47 | But again, you don't want the viewer to be
able to interact with the submenu option
| | 10:51 | that corresponds with the section they're currently looking at.
| | 10:54 | Since this is the Our History section, the viewer should not be
able to interact with this option at all, as they can currently.
| | 11:01 | In the next exercise you're going to fix
that with a little bit more action script.
| | 11:05 | Once you're finished checking to make sure everything works,
close your Flash Player 8 window and go back to Flash 8 itself.
| | Collapse this transcript |
| Disabling interactivity for usability| 00:00 | >> In the last exercise I mentioned that we were gonna prevent the viewer
from being able to interact with the submenu option that correspond
| | 00:09 | with the section that they are currently looking at.
| | 00:11 | In other words, if they were looking at the Our History
content, the Our History submenu option should be disabled.
| | 00:18 | They can't interact with it.
| | 00:20 | Well, how do you go about doing that?
| | 00:22 | Luckily, there's a movie clip and button symbol property called
enabled that you can set to be true or false depending upon if you want
| | 00:32 | that symbol, the button or the movie clip symbol,
to be able for the viewer to interact with it.
| | 00:38 | It's actually quite easy to do and that's
what you're gonna set in this exercise.
| | 00:42 | Now because the Our History section is the one that loads when the viewer
first comes to the About Us module, you want that option to not only look
| | 00:52 | like it's disabled, where it's bold and it's 12 pixels instead of 11, but
you also want that option itself to have it's interactivity turned off.
| | 01:00 | The viewer shouldn't be able to interact
with that option, which they currently can.
| | 01:05 | So again, make sure that you're in the
aboutus.fla file, that you have the first key frame
| | 01:11 | and layer A selected, and that you have your actions panel open.
| | 01:15 | Then scroll in the actions panel until you locate the comment
| | 01:19 | that says disable the submenu option that
corresponds to the currently loaded section.
| | 01:24 | And here's where we already have one action
that changes the way the text looks
| | 01:29 | in the ourHistorymc movie clip symbol so that it looks like its disabled.
| | 01:34 | Let's add one more action onto that that also
disables the interactivity of that option as well.
| | 01:41 | Below that, you've already written what should
happen when the viewer rolls their mouse over
| | 01:45 | and rolls their mouse off of that particular movie clip symbol.
| | 01:49 | The action that you're about to write essentially disables all of that
functionality, and that's, in this case, exactly what we wanna do.
| | 01:57 | So click after the action
this.ourHistorymc.ourHistory.settextformatbuttondisable, semicolon,
| | 02:06 | click at the very end of that action and press
return or enter to create another line break.
| | 02:12 | Then click on the insert a target path button at the top of the actions
panel and select the ourHistorymc movie clip symbol and click OK.
| | 02:22 | Now again, movie clips and button symbols have a
property called enabled, so after ourHistorymc,
| | 02:29 | type .enabled, then you can set that to be true or false.
| | 02:34 | True being that the button or movie clip symbol is enabled, the viewer
can interact with it, or false means the viewer cannot interact with it.
| | 02:43 | When they move their mouse over that movie clip or button
symbol they won't see the hand icon appear, nothing will happen.
| | 02:48 | They cannot interact with it, so after enabled type
space, equals, space, false, semicolon to end that action.
| | 02:58 | Now if you save the changes you've applied to the about us FLA
file and publish a new SWF file, and then hide or minimize Flash
| | 03:08 | for a moment and in your site directory open up master.swf.
| | 03:13 | before, when you moved your mouse over the Our
History option and then moved your mouse off of it,
| | 03:18 | it would go back to looking the way Our Staff does, it would
interact just like this, but now that we've added that action,
| | 03:25 | when you move your mouse over and off
of it, you can see that nothing happens.
| | 03:29 | You've effectively disabled any kind of functionality or
interactivity applied to that movie clip or button symbol.
| | 03:36 | So now the viewer cannot interact with it.
| | 03:38 | It's just like some plain text.
| | 03:40 | I can't do anything to it at all, and that's exactly what you want.
| | 03:44 | So the viewer can interact with an option that they're not currently
viewing the section for, but when they're looking at a particular section,
| | 03:51 | you want that button to not only look like its disabled,
in this case bold and 12 pixels, instead of 11,
| | 03:57 | but also physically disable its interactivity as well.
| | 04:00 | In the next exercise, you're not only going to specify what should
happen when the viewer clicks on one of these options, which you haven't
| | 04:07 | yet set the on release functionality for any of these buttons, but
you're also gonna specify when these buttons should become re-enabled.
| | 04:16 | Right now, again, this Our History option is disabled and
we haven't yet said when it can become re-enabled again.
| | 04:24 | You're gonna do that when the viewer clicks on one of the other
submenu options and you're gonna create all that in the next exercise.
| | 04:31 | Before you continue on, however, make sure that you close your Flash
Player 8 window and return back to your aboutUs.fla file inside of Flash.
| | Collapse this transcript |
| Enabling interactivity for usability| 00:01 | >> If you remember, back in the sample site, when the viewer
clicks on the Our Staff option, a few different things happen.
| | 00:08 | One, it actually loads the Our Staff content when they click on it.
| | 00:13 | The second thing that happens is that that particular movie
clip symbol becomes disabled, much like the Our History does
| | 00:19 | by default, so the viewer can actually interact with it.
| | 00:23 | The third thing that happens is that the
Our History option becomes re-enabled
| | 00:28 | so the viewer can then interact with and
navigate to that section if they chose.
| | 00:32 | A few of those things you're gonna accomplish in this exercise.
| | 00:36 | I'm gonna go ahead and close my browser window
and return back to my aboutUs.fla inside of Flash.
| | 00:42 | The first step is to add an on release mouse
event to the ourStaffmc movie clip symbol.
| | 00:48 | So again, in aboutUs.fla, make sure that you have the first key
frame and layer "A" selected and that you have your actions panel open.
| | 00:57 | In there, you're gonna wanna scroll all the way down to the bottom of the
actions, then let's add an "on release" mouse event to that by between the
| | 01:05 | on staff option comments, both the beginning and ending comment
lines, click at the last closed curly brace that ends the
| | 01:13 | on rollout function for the ourStaffmc movie clip symbol.
| | 01:17 | Then press return or enter to create a new line break and I'm gonna go
ahead and select this.ourStaffmc and while holding down my control key
| | 01:27 | on Windows, or option on the Macintosh, I'm gonna
drag that down to that empty line break I created.
| | 01:34 | Then after ourStaffmc.
| | 01:36 | I'm gonna type onRelease, then of course we wanna attach that to a
function so type space, equals, space, function, open parenthesis,
| | 01:47 | closed parenthesis, space, open curly brace, two
empty line breaks and then closed curly brace.
| | 01:54 | Now the first thing that we want to happen when someone
clicks on a submenu option is that it looks like its disabled.
| | 02:01 | That means, essentially, setting its text format property
to be the text format that we created called button disable.
| | 02:09 | So in between the open and closed brackets for the on release function,
click in the empty line break you created and type this.ourStaff,
| | 02:21 | which is the name of the text field inside of the ourStaffmc movie
clips symbol, .setTextFormat, making sure to get the spelling
| | 02:31 | and capitalization correct, open parenthesis, ETN
disable, closed parenthesis, semicolon to end that action.
| | 02:41 | What that means is that when someone clicks on the Our Staff option
in the submenus it actually makes that text look like it's disabled.
| | 02:49 | It sets it to be bold and it sets it to be
one pixel size bigger than the way it was.
| | 02:56 | Now in addition to that, we wanna make that option to be
disabled as well, functionally, so the viewer cannot interact
| | 03:02 | with it any way, as you've already seen with the Our History option.
| | 03:06 | Again, as you've already seen, it's actually quite easy to do that.
| | 03:10 | So after the action that you've just written press return, or enter,
to create a new line break, and then type this.enabled, remember this,
| | 03:19 | the keyword, when added to a function that's attached
to a timeline, this refers to that timeline or symbol,
| | 03:27 | so in this case when I say this, I'm essentially referring to ourStaffmc.
| | 03:33 | So I'm telling ourStaffmc to set its enabled property
to be space, equals, space, false, semicolon,
| | 03:41 | so that that movie symbol cannot be interacted with by the viewer.
| | 03:45 | Let's go ahead and test what we've done so
far to make sure that it works correctly.
| | 03:49 | Save the changes that you've made to this FLA and then publish a new SWF
file, then hide or minimize Flash and navigate to your site directory
| | 04:00 | and double-click on master.swf to open it in Flash Player 8.
| | 04:05 | When you do that, because of the actions that
you've already written, Our History is disabled.
| | 04:09 | Not only does it look disabled, but functionally
it is as well, the viewer cannot interact with it.
| | 04:14 | The action script that you've just written does the same
thing to the Our Staff option when the viewer clicks on it.
| | 04:20 | So let's test that out.
| | 04:21 | Go ahead and click on the Our Staff option.
| | 04:23 | And when you do that, sure enough, it stays disabled
and the viewer cannot interact with it in any way.
| | 04:29 | However, now of course, the obvious problem is that none of your submenu
options are enabled so the viewer can actually interact with them.
| | 04:37 | Of course, you're gonna correct that later on in this exercise.
| | 04:40 | But at least, the first part of this functionality,
where the Our Staff option becomes disabled,
| | 04:45 | both visually and functionally, is working
correctly just as we've intended.
| | 04:50 | Once you verify that that happens, go ahead and close
the Flash Player 8 window and return to Flash 8 itself.
| | 04:56 | Now in this case, because I only have two submenu options, what I can do
here for my on staff, on release function is when the viewer clicks on it,
| | 05:06 | I can just essentially say disable yourself, and then what we're gonna do
is we're gonna write two more actions that tells the Our History option
| | 05:13 | to re-enable itself, to make sure that it looks like
it's enabled and to set it's enabled property back
| | 05:19 | to true so the viewer can actually interact with it.
| | 05:22 | However, if I was building more submenu options, instead of just two,
for example maybe I have five, I wouldn't go to each one release function
| | 05:31 | for each of the options and in there add actions to tell
each other option to make itself be re-enabled again.
| | 05:39 | Instead, what I would do is I would create a function, maybe I
would call it re-enable options, and inside of that function,
| | 05:46 | I would add all the actions, as you're about
to see, to re-enable all the other options.
| | 05:52 | Then from each of my on release options, I would
add an action that just executed that function,
| | 05:59 | and then after that I would then disable
the option that the viewer just clicked on.
| | 06:05 | That way, I wouldn't have to write the same action script over and
over in each of my on release functions for each of my options.
| | 06:14 | I could just write all of those actions once in a function and then simply
execute that function when the viewer clicks on that particular option.
| | 06:22 | Again, in this case however, because we just have two options in the
About Us section that the viewer can click on, Our History or Our Staff,
| | 06:31 | it would be a little extra, unnecessary work
to write a function that did that same thing.
| | 06:36 | Instead, from the ourStaffmc on release function, I'm just gonna write
a couple more lines of code that tells the other option, Our History,
| | 06:46 | to become re-enabled, so the viewer can then navigate
to that other section later if they so chose.
| | 06:52 | So again, just make sure that you're in the about us FLA, the
first key frame and layer "A" is selected and in your actions panel,
| | 06:59 | scroll down until you locate the this.ourStaffmc.onRelease function.
| | 07:05 | This is what you've created earlier in this exercise.
| | 07:08 | Click after the action this.enabled equals false and
press return or enter to create a new line break.
| | 07:16 | Now what we wanna do is tell the Our History option to become re-enabled.
| | 07:20 | Not only re-enabled visually, but re-enabled functionally as
well, so the viewer can then go to that other section later.
| | 07:27 | So to do that, click on the "insert a target path" button at the top of
the actions panel and select the ourHistorymc option and then click OK.
| | 07:37 | Now remember, the this keyword means that from within a function that is
attached to a timeline or symbol, such as the ourStaffmc movie clip symbol,
| | 07:47 | that the this key word starts from that point and goes down.
| | 07:52 | So if I leave the this keyword in place that means that I'm starting from
the ourStaffmc movie clip symbol and I'm telling Flash to look inside
| | 08:01 | of there for another movie clip symbol called ourHistorymc.
| | 08:05 | Well the problem is, that's not how our movie is structured.
| | 08:08 | OurHistorymc is not inside of ourStaffmc,
it's in the main timeline here in about us.
| | 08:15 | So when I'm using the this keyword inside of a
function that's attached to a timeline or symbol,
| | 08:20 | as it is here, I need to be careful how I use that this keyword.
| | 08:24 | In this case, I wanna remove it, so remove
this., it should just say ourHistorymc.
| | 08:31 | After that, type .enabled, space, equals, space, true, semicolon
| | 08:38 | to make the ourHistorymc movie clip symbol
re-enabled so the viewer can then interact with it.
| | 08:44 | Remember, this is all added to the ourStaffmc movie clip symbol, so when
the viewer clicks on Our Staff, we want Our History to become re-enabled.
| | 08:52 | Now that action re-enables it functionally, but not visually.
| | 08:56 | To do that, we need to change the text format that's being
applied to the text field inside of that movie clip symbol.
| | 09:03 | So after the action that you just wrote, press return or enter to create
a new line break, and then again, click on the insert a target path button
| | 09:10 | at the top of the actions panel, open
up the ourHistorymc movie clip symbol,
| | 09:16 | and select the text field Our History inside of there and click OK.
| | 09:21 | Again, we wanna make sure that we remove the this keyword at the beginning
of that, and then after ourHistorymc.ourHistory, click after that,
| | 09:30 | and type .setTextFormat, open parenthesis, btn Enable,
close parenthesis, semicolon to end that action,
| | 09:42 | so what those two actions that you've just written do is when the
viewer clicks on the Our Staff option it tells the Our History option
| | 09:49 | to become re-enabled functionally and make it appear like it's re-enabled.
| | 09:55 | It sets the text format back to the button enabled text format object.
| | 10:00 | Let's test this first to make sure that it works, so save the changes,
and then choose file publish to publish a new, updated SWF file.
| | 10:09 | Then hide or minimize Flash and in your
site directory double-click master.swf.
| | 10:16 | Now when I click Our Staff, those two actions that you've
just written should make Our History become re-enabled.
| | 10:22 | Go ahead and click Our Staff.
| | 10:23 | And when you do, sure enough, Our History goes back to the
way it was and the viewer can now interact with it just fine.
| | 10:30 | So I know that that part of the functionality is working correctly.
| | 10:33 | Perfect. Now, of course, the opposite is now the problem.
| | 10:37 | When the viewer clicks on Our History, Our Staff does not become
re-enabled again, just like it does when the opposite is the case,
| | 10:44 | so we're gonna go ahead and make that correction next.
| | 10:47 | Close your Flash Player 8 window and then return back to Flash again.
| | 10:52 | In your actions panel, scroll up until you locate
the Our History actions for the Our History option.
| | 10:59 | Now to save ourselves a little bit of time, I'm actually going to scroll
down again and select all the actions that I've attached as the
| | 11:06 | on release function to the ourStaffmc movie clip symbol.
| | 11:10 | To do that, I'm gonna select all of those lines of
code, it should start with this.ourStaffmc.onRelease
| | 11:17 | and all the way down to the last closed curly brace.
| | 11:20 | Then I'm gonna control click, or right click, on that selected
code and choose copy, then I'm gonna scroll up a little bit
| | 11:28 | until I locate the this.ourHistory.onrollout function and I'm
gonna click after the closed curly brace that ends that function,
| | 11:37 | then I'm gonna press return or enter once to put an empty line
break underneath that and choose to paste that copied code.
| | 11:44 | What I wanna change here, obviously, is any code that refers to
ourStaffmc, I wanna switch it over to Our History, so on this top line,
| | 11:52 | I wanna change ourStaffmc to ourHistorymc
and then underneath that I can see
| | 11:58 | that it says Our Staff set text format button
disable, I wanna change Our Staff to Our History.
| | 12:07 | This.enbabled, because it's simply referring to the
same timeline that the function is being attached to,
| | 12:13 | which is ourHistorymc, that whole action can remain the same.
| | 12:17 | Underneath that, however, our two actions that set
the enabled properties of the Our History option back
| | 12:24 | to true, so it's gonna re-enable the Our History section.
| | 12:28 | But because these actions are being attached to the Our
History movie clip, we don't wanna set itself to be re-enabled,
| | 12:33 | we wanna set the our staff option to be
re-enabled, so in the bottom two actions,
| | 12:39 | within the Our History mc on release function,
change the word "History" to "Staff".
| | 12:45 | And in the last action there, ourStaffmc.ourStaff,
that way, when the viewer clicks on one option,
| | 13:00 | it disables itself and then tells the other option to be re-enabled.
| | 13:04 | The same holds true for the other options.
| | 13:06 | So each option disables itself and then sets the other to be re-enabled.
| | 13:10 | And that's exactly what you've just accomplished here.
| | 13:13 | Let's go ahead and test that to make sure
that it works correctly before continuing.
| | 13:16 | So save the changed you've made to this FLA and publish an updated SWF.
| | 13:21 | Then hide or minimize Flash and in your
site directory, double-click on master.swf.
| | 13:28 | Currently, because we've written the action to tell
it to do so, the Our History option is disabled,
| | 13:33 | because that is the section that the viewer
sees by default, but then click on our staff.
| | 13:39 | When you do that, instantly the our history option becomes
re-enabled so the viewer can then navigate to that section
| | 13:45 | if they choose, and the Our Staff option becomes disabled.
| | 13:49 | Now the actions that you've just wrote do the opposite when the
viewer clicks on the Our History option, so let's test that out.
| | 13:56 | When I click on Our History, Our Staff surely enough becomes
re-enabled and the Our History option becomes disabled again.
| | 14:03 | So that part of the functionality works perfectly.
| | 14:06 | Obviously, the last step to make this About section complete is to actually
add the action script to both the Our Staff and Our History options so that
| | 14:15 | when the viewer clicks on those options it actually does what it's
supposed to do and loads in the content for those particular sections.
| | 14:22 | You're gonna accomplish that in the next few movies.
| | Collapse this transcript |
| Loading the text| 00:01 | >> Currently, when the viewer clicks on the
submenu options Our History and Our Staff,
| | 00:06 | besides the options themselves becoming disabled
or re-enabled, nothing else actually happens.
| | 00:13 | The content itself doesn't actually load in, which sort of defeats
the purpose of having the submenu options in the first place,
| | 00:19 | but that's what you're gonna accomplish in this movie.
| | 00:22 | So when the viewer clicks on the Our Staff option, you want
it to load in the Our Staff text just like Our History loads
| | 00:29 | in when the viewer first comes to the About Us section.
| | 00:32 | For those of you that have access to the exercise files,
I've already created the text content for Our Staff for you.
| | 00:39 | To view that, hide or minimize Flash, go to your site directory in
the LA Eyeworks directory that you copied onto your desktop earlier,
| | 00:48 | in there go into the Vars folder, and in the Vars folder
where your Our History text is that you were working
| | 00:54 | with earlier, is another text file called ourStaff.txt.
| | 00:59 | For those of you that don't have access to the exercise files, in
notepad or text edit or another simple text edit that you have access to,
| | 01:07 | create a new, blank text file called ourStaff.txt, for those
of you, again, that don't have access to the exercise files.
| | 01:16 | For those of you that do, open up that ourStaff.txt file, in
there you'll see a block of text, this is just greeking text,
| | 01:24 | text that is just gibberish, that doesn't make
any sense, to act as a place holder for us.
| | 01:28 | But what you'll notice is the variable information as well as the
html and CSS information has already been entered in here for you,
| | 01:37 | just like you did previously for the ourHistory.txt file.
| | 01:41 | Again, for those of you that don't have access to the exercise
files, if you'd like, you can just take the text that's inside
| | 01:47 | of the ourHistory.txt file, select it, and paste it
into your ourStaff.txt document and start from there.
| | 01:56 | Now what we wanna do is when the viewer clicks on the Our
Staff option, we wanna have it load in this Our Staff text,
| | 02:02 | so go ahead and go back into Flash and make sure,
of course, that you're in the aboutUs.fla file,
| | 02:08 | in the first key frame of layer A and
that you have your actions panel open.
| | 02:14 | As you say in a previous movie, to get the text for the Our
History section to load in, required essentially one action
| | 02:22 | that told the myLV LoadVars object in master.swf
to load the content from that particular text file.
| | 02:31 | Inside of About Us, if you scroll up a bit, you'll locate that action.
| | 02:37 | You can see that it's here inside of the cssStyles.onload function
and it says underscore levelzero.myLV.load inside the Vars,
| | 02:48 | load the text file ourHistory.txt, select that action and copy
it, then scroll down to the Our Staff options and underneath the
| | 03:00 | on release action is where you're gonna add this action that
loads the variables from the ourStaff.txt file into here.
| | 03:09 | Click after the ourStaffmc.onRelease function, click after that
open curly brace, press return or enter to create a new line break
| | 03:17 | and then paste the action that you have in your computer's clipboard.
| | 03:22 | Now everything can stay the same, but of course, what you wanna
change is the text file that we're loading the variables from.
| | 03:28 | This action is being added to the Our Staff
option, so we wanna load the variables
| | 03:32 | from the ourStaff.txt file, so change ourHistory.txt to ourStaff.txt.
| | 03:40 | Conversely, when the viewer clicks on Our History,
you want it to, again, load the Our History content.
| | 03:47 | Because if the viewer comes to your About Us section and they read through
the history of the LA Eyeworks stores then they wanna get information
| | 03:55 | about the staff, so they click on the Our Staff
option, which then loads the Our Staff content,
| | 04:01 | but then if they click back on the Our History option
you obviously wanna reload the Our History content.
| | 04:08 | Now unlike what you had to do when the aboutUs.SWF file reloads,
you don't have to reapply and re-download the CSS information.
| | 04:17 | The CSS information has already been downloaded and applied
to that text field when the aboutUs.swf file first loads.
| | 04:24 | So you don't need to do it again.
| | 04:26 | When someone click on the Our History option, you don't have to go
through all that again, you can just tell it to load the variables
| | 04:32 | from the ourHistory.txt file, so inside of your actions panel,
scroll up until you see the ourHistory.onRelease function,
| | 04:42 | click at the end of the open curly brace that marks the
beginning of that function, create a new line break,
| | 04:49 | and then paste that action that you still have in your computer's memory.
| | 04:53 | In this case, it still says use the myLV LoadVars object on the
master SWF file to load the variables inside of ourHistory.txt.
| | 05:04 | Before we continue, let's make sure that this all works correctly.
| | 05:07 | So save the changes you've made to this FLA
and publish an updated SWF file, file, publish.
| | 05:13 | Then hide or minimize Flash, and I'm gonna go
ahead and close the ourStaff.txt file for now,
| | 05:20 | and then back in your site directory, locate and double click master.swf.
| | 05:26 | When you do that, and then click on the Our Staff submenu option,
the Our Staff text should now load in correctly, and which it does.
| | 05:35 | When I click back on Our History, the Our History content loads in.
| | 05:39 | So there you now have an actual, working and functional submenu system.
| | 05:44 | When the viewer clicks on one of these options,
the correct information loads in perfectly.
| | 05:49 | Now we're gonna spice up this Our Staff subsection by embedding inline
some animated SWF files that the text will actually wrap around.
| | 05:59 | That was a feature that was added to Flash MX 2004 and we're gonna
carry it forward to Flash 8, just because it's such a cool feature.
| | 06:06 | Being able to take your dynamically loaded text and
have it wrap around some embedded, inline images,
| | 06:12 | and you can do it either do it with JPG, SWF, PNGs or GIF.
| | 06:16 | In this case, because it looks more interesting, we're gonna
use animated SWF files that the text will actually wrap around.
| | 06:22 | When you're finished however, making sure that the
functionality works correctly, as you've just seen,
| | 06:27 | close the Flash Player 8 window, and then
go back to your ourStaff.txt file.
| | 06:33 | If you've closed this by accident, you can go
back into your site directory and then open
| | 06:39 | up the Vars directory and open up your ourStaff.txt file within there.
| | 06:44 | In the next exercise, we're gonna make a few
modifications to the text inside of this text file
| | 06:50 | to integrate those inline SWF files within the text.
| | Collapse this transcript |
| Creating the Our Staff subsection| 00:01 | >> Now before you start editing the ourStaff.txt file to embed inline
within this text some SWF files, you should obviously probably know
| | 00:10 | where those SWF files that you're going to embed in here reside at.
| | 00:15 | If you go into your site directory again that you copied over
earlier, you'll notice there's another folder called SWFs.
| | 00:22 | S-W-F-S. If you don't have access to the exercise files, go
ahead and create that directory now inside of your site directory.
| | 00:30 | Inside of that SWFs directory, you'll notice
that there are a few pre-provided SWFs for you.
| | 00:35 | The one's we're interested in, in this
case, are staff01.swf and staff02.swf.
| | 00:40 | If you double click on either one of those SWF
files, you'll see that it's just a simple image
| | 00:46 | that actually just animates across three images over time.
| | 00:50 | It's these SWF files that we're going to embed
inline in the ourStaff.txt file so that the text
| | 00:57 | that we have in there wraps around these animated SWFs.
| | 01:00 | Again, you could of course do the same thing with JPG's, PNG's, or GIF's.
| | 01:04 | Once I've previewed that, I'm gonna go
ahead and close my Flash Player 8 window.
| | 01:08 | Now one thing you need to know is how big those
images are, in this case, how big this SWF is.
| | 01:15 | I happen to know because I created those files,
that they're 75 pixels wide by 75 pixels high.
| | 01:21 | If you wanna see how those SWF files were constructed, by the
way, for those of you that have access to the exercise files,
| | 01:28 | if you go back into the site directory and you scroll down a little
bit, you'll notice that there are two FLA's called staff01 and staff02.
| | 01:36 | These are the FLA files that were used to generate those SWF files.
| | 01:41 | Then go back to ourStaff.txt.
| | 01:45 | Now one thing that's a little bit different with what you're about to
do, in regards to how working with html pages works, is for example,
| | 01:52 | if this was an html page, and I wanted to embed images
inside of it, I would have to first tell my html page
| | 02:01 | where those images resided based on where my html page was.
| | 02:06 | For example, if my html page was in one directory
and my images were in a separate directory,
| | 02:13 | I would need to tell my html page where my images reside at.
| | 02:17 | Hey, they reside in this directory and the image name is called this.
| | 02:22 | You have to do the same thing here when you're embedding
an image or SWF file inline inside of this text,
| | 02:28 | but you don't write the path to that content
relative to where this text file is,
| | 02:33 | you write it relative to where the SWF file is that this text loads into.
| | 02:39 | In other words, if I go back into my site directory, in my Vars
folder is where this text file resides at, one directory up from that,
| | 02:48 | where the site directory is, is where the SWF's directory is that
contains the SWF files we're gonna place inside of that text file.
| | 02:56 | Now again, I don't write from the text file within the Vars folder that
the SWF's is one directory up in the SWF's folder and then the name
| | 03:05 | of the SWF is such and such that we're going to load.
| | 03:08 | I write it relative from where the SWF file that the
text in the Vars folder loads into, which is About Us.
| | 03:16 | So whenever I'm writing in a text file to
embed inline a JPG, a GIF, PNG, or SWF file,
| | 03:23 | I need to write it relative from where the
SWF file is that the text is loaded into.
| | 03:29 | So I don't have to say go up one directory and then go into SWF's,
| | 03:32 | I just say go into the SWF's folder and the
image is inside there that I wanna place.
| | 03:38 | So back in the ourStaff.txt file, I need to write in the
code that embeds that SWF file inline within the text.
| | 03:45 | I'm gonna have the first SWF be embedded right before
the words lorem ipsum delor.
| | 03:51 | Not only that, but I'm gonna have it be embedded in here before
the paragraph tag, so after text format ledding equals seven,
| | 03:58 | after that greater than symbol, but before
the paragraph tag, I'm gonna click right there
| | 04:03 | and I'm gonna write the html code to embed
inline the SWF file within this text.
| | 04:09 | To do that type less than, IMG, space, SRC, and this part will be very
familiar for those of you who are used to creating html content, equals,
| | 04:20 | quote, SWFs, which is the name of the directory that my content resides
in, forward slash, S-T-A-F-F, staff, dash, 01, dot, SWF, end quote, space,
| | 04:37 | and I need to specify what the width and pixels is of that
SWF file, so I type width, equals, quote, 75, end quote.
| | 04:49 | I also need to specify the height, so I'm gonna
type space, height, equals, quote, 75, end quote.
| | 04:57 | And then I also need to specify how the text is going to wrap around this
image, well I want the image to be on the left hand side and the text
| | 05:05 | to wrap around the left and bottom, so I'm gonna set the alignment
of this SWF file to be left so the test wraps around it to the right.
| | 05:13 | So I'm gonna type now space, align, equals, quote, left, end quote.
| | 05:22 | I also want a little bit of space to be around the outside, both left
and right, the horizontal space, as well as how much space is on the top
| | 05:30 | and bottom of this SWF file so that the text, as it runs around
the image, doesn't run around right to the edge of the image.
| | 05:37 | I want a little bit of visual space in there, so to do
that, I'm gonna type space, H, space, the actual word space,
| | 05:45 | H Space is horizontal space, equals, quote, 10, end quote.
| | 05:50 | So I want 10 pixels of space on both sides of my
SWF file so the text doesn't run right to the edge.
| | 05:58 | I wanna add some vertical space in there too, so I'm gonna type space,
V space, equals, quote, in this case I'm just gonna add five pixels,
| | 06:07 | so I'm gonna type 5, end quote and then
I'm gonna type a greater than symbol.
| | 06:11 | Now if I save the changes that I've made to ourStaff.txt, and then go
back into my site directory real quick and double click on master.swf,
| | 06:21 | when I click on the ourStaff submenu option to load the
ourStaff.txt file in, I can see when I do that that now
| | 06:29 | that SWF file appears inline embedded within that text.
| | 06:33 | Even as I scroll through that text, you can see that
that image still stays aligned within that text.
| | 06:39 | It's a great feature that was introduced with Flash MX
2004 and again we're using it here inside of Flash 8.
| | 06:45 | I wanna embed one more SWF inline within this
text right before this greeking text here.
| | 06:52 | So I'm gonna go ahead and close the Flash
Player 8 window and return to ourStaff.txt.
| | 06:57 | Rather than write all that information again, like we just did, I'm
gonna select everything from that less than symbol before image source
| | 07:06 | and all the way to the greater than symbol
that comes after V space equals five.
| | 07:11 | Once I've selected that I'm gonna copy it and then I'm gonna locate
my span class highlight tag that is further down in the body of text.
| | 07:20 | Then I'm gonna click right before that span class tag and right
after the two break tags and paste that code that I just copied.
| | 07:29 | The only thing I need to do is change where
it says SWFs staff01 to staff02 instead.
| | 07:37 | Then I'm just gonna save my changes again to ourStaff.txt, go
back into my site directory and once more open up master.swf.
| | 07:47 | when I click on the Our Staff submenu option, I can see that now, both
those SWFs load in, and the text inside of the Our Staff content loads
| | 07:55 | and wraps around those SWF files, again, a really cool
feature that we're utilizing here inside of Flash 8.
| | 08:02 | Now that you've done that, you've completed the entire About Us module.
| | 08:06 | You've created two subsections, Our History and
Our Staff, that both dynamically load external text
| | 08:12 | that is styled using cascading style sheets and formatted using html tags.
| | 08:18 | Not only that, but the Our Staff section has embedded
inline SWF files that animate as the text wraps around it.
| | 08:26 | So there's lots of new stuff going on inside the About Us section.
| | 08:30 | You also learned how to use the text format class to be able to
dynamically adjust how the text inside of our submenu options appears,
| | 08:39 | even as the viewer interacts with those options as well.
| | 08:42 | As you'll see in a later chapter, you'll be revisiting the text format
class to be able to create the main menu at the very top of the site.
| | 08:50 | But there you have the completed and finished About Us module.
| | 08:54 | Congratulations on doing that.
| | 08:55 | In the next chapter, you're going to learn how
to create a slide show for the frames section.
| | Collapse this transcript |
|
|
7. Building a SlideshowPreviewing what you're building| 00:00 | >> In this chapter, you're going to learn how to create a dynamic
slide show, a dynamic slide show that not only uses the LoadVars class,
| | 00:10 | which you've seen before, but also utilizes the
MovieClipLoader class that exists in master.swf.
| | 00:16 | Before we get too far into it, however, let's take a look at exactly
what it is that you're going to be building before we get exerted.
| | 00:23 | Open up your preferred web browser and navigate to www.lynda.com,
forward slash, intFlash8, forward slash, LAEyeworks.
| | 00:37 | When the site loads up, click on the frames
option from the navigation bar at the top.
| | 00:43 | The image that you see appear there, a picture of a set of eyeglasses
frames, does not exist inside of the SWF file or the FLA file.
| | 00:52 | It is loaded in dynamically as an external
JPEG file using action script, specifically,
| | 00:58 | using the MovieClipLoader class that you
earlier wrote in the master.fla file.
| | 01:04 | To the left-hand side of that JPEG file is a bit of descriptive
information about this particular set of eyeglasses frames.
| | 01:12 | That information is loaded in dynamically from a separate text file using
the LoadVars class, again, that you built in the master.fla file earlier.
| | 01:23 | It's also formatted and styled using HTML and cascading style sheets.
| | 01:29 | Underneath the glasses frames image, it
also states that it's frame style 1 of 10.
| | 01:35 | You're going to also create that with action script.
| | 01:38 | You will notice that as you click on the Next button
to advance to the next pair of eyeglasses frames,
| | 01:44 | that that bit of text updates and it now
says that it's frame style 2 of 10.
| | 01:49 | Additionally, the descriptive information about that image also
updates as you click on the next button, as does the image itself.
| | 01:57 | So as you advance through the slide show, the image
counter updates, as well as the descriptive information.
| | 02:04 | Now, when you get to the end of the slide show, and you click on
the Next button again, it goes back to the frame style 1 of 10.
| | 02:15 | It goes back to the first image.
| | 02:17 | So this slide show is intelligent in that it knows how
many images there are total in the slide show itself,
| | 02:24 | because when it gets to the end, it goes back to the beginning.
| | 02:27 | Not only can you advance forward through the slide show, but you can
also click on the Back button to go backwards in the slide show as well.
| | 02:33 | So there's quite a few things that are going on here.
| | 02:36 | Fortunately, a lot of the major pieces, such as the loading of the
images and loading of the text, has already been built for you.
| | 02:43 | You've already constructed the MovieClipLoader class to load the images.
| | 02:47 | You've already constructed the LoadVars class to load the text as well.
| | 02:51 | So a lot of the functionality that you're going to be utilizing in
constructing the frames slide show is one that you'd already be familiar
| | 02:58 | with because you've already written a lot of the functionality before.
| | 03:01 | You're just going to be applying most of it in a
different manner than you may have learned before.
| | 03:05 | When you finish checking out the frames section,
go ahead and close your browser window and navigate
| | 03:11 | to the site directory in the LA Eyeworks directory on your desktop.
| | 03:15 | It's here where we're going to pick up in the next movie
when we start constructing and building the slide show.
| | Collapse this transcript |
| Setting up| 00:01 | >> For those of you that have access to the exercise files, again
navigate to your site directory in the LA Eyeworks on your desktop.
| | 00:10 | When you do that, you'll notice that there's
an FLA provided for you called frames.fla.
| | 00:16 | Go ahead and open up that frames.fla file in Flash 8.
| | 00:20 | For those of you that don't have access to the exercise
files in Flash 8, go ahead and create a new blank FLA.
| | 00:27 | Make sure that it has the same dimensions as
the other FLA, six hundred by four hundred.
| | 00:31 | And then here is where you can begin creating some
of the elements as you're about to see that I go over.
| | 00:38 | Inside the frames.fla file you'll see a
few elements that are already provided for you.
| | 00:43 | Up on the top left, there's a static text
field that just says "frames" inside of it.
| | 00:49 | On the left hand side of the stage, there's
also a multi-line dynamic text field.
| | 00:54 | At the bottom of the stage there's a single line dynamic text field.
| | 00:58 | And then above that there's a movie clip symbol.
| | 01:01 | It's called MC empty.
| | 01:02 | The only thing that's inside of that movie clip symbol is just a
black square that's just a stroke, there's no fill on the inside.
| | 01:11 | Now there's only that black stroke so that you can
visually see it here when it's placed on the stage.
| | 01:17 | We're not going to be utilizing that black
stoke at all in the construction of the site.
| | 01:21 | That's just so that you can see where specifically the
dynamic slide show images are going to be loading into.
| | 01:28 | They're going to be loading into this movie clip and
thereby replacing that black stroke that's inside of it.
| | 01:34 | But because we're going to be working with some text in the construction
of this frame slideshow, let's first bring in our shared fonts as well
| | 01:41 | as that shared button arrow symbol that we can
use as the next and back buttons to allow the user
| | 01:46 | to navigate both forward and backward through the slideshow.
| | 01:49 | So the first step would be to import some
of those items from our shared library.
| | 01:54 | To do that, go ahead and open up file, import, open external library.
| | 02:01 | Then navigate to your site directory and
double-click on sharedlib.fla.
| | 02:06 | Then go ahead and select all of the symbols inside of that shared
library and drag those into the library for your frames.fla file.
| | 02:16 | Now we're using all of those shared linked library items and again, we
can continue using those as often as we'd like inside of the SWF file,
| | 02:25 | including the fonts without adding to the
file size of the end frames.swf file.
| | 02:31 | Once you've dragged those shared library elements into your
frames library, go ahead and close the shared lib library panel.
| | 02:38 | Let's go ahead and tell our text fields both static
and dynamic, to use some of those linked fonts.
| | 02:45 | Click on the frames static text fields up on the
top left, and in your properties inspector click
| | 02:52 | on the font pull down menu and choose the shared font Vera bold.
| | 02:56 | Again, the shared font is the one with the asterisk after its name.
| | 03:01 | On Windows, you'll also need to make sure
that you click the full bold button.
| | 03:05 | Then click on the multi-line dynamic text field
that's on the left-hand side of the stage.
| | 03:11 | This time in the Properties Inspector from the
font pull down menu, choose the shared font Vera.
| | 03:18 | Then just make sure that the font rendering method is set to anti-alias
for readability, that the render text as HTML button is depressed,
| | 03:27 | because this text that is going to be loaded inside
of this text field will be utilizing HTML tags.
| | 03:33 | And we want those to be parsed not displayed.
| | 03:35 | And then we also want to make sure that
we give this text field an instance name.
| | 03:40 | Now remember we're going to be using the LoadVars
object that we created earlier inside of master.fla
| | 03:46 | to load text that describes each frame in the slideshow.
| | 03:51 | Because of that again, as I mentioned previously, we need to make sure
| | 03:54 | that we use the appropriate text field instance
name that the LoadVars object utilizes.
| | 04:00 | If I switch over to master.fla real quick, select the
first key frame in the "A" layer, and open the actions panel,
| | 04:08 | if you remember the LoadVars action is looking for a
text field called loaded info to load the text into.
| | 04:16 | So in frames, I want to make sure that that dynamic
text field also has the instance name of loaded info.
| | 04:24 | So again, with that multi-lined dynamic text
field selected and the properties inspector,
| | 04:29 | click in the instance name field and give
it an instance name of loaded info.
| | 04:35 | That way we can utilize that LoadVars object to load
that descriptive text into that specific text field.
| | 04:41 | Next, go ahead and click on the single line dynamic
text field down toward the bottom of the stage
| | 04:47 | and from the font pull down menu, choose the shared font Vera bold.
| | 04:53 | We also need to give it an instance name as well, because we're going
to be dynamically inserting some text inside of that text field,
| | 05:01 | because we're going to be targeting that text field with action script,
therefore we need to make sure it has its own unique instance name.
| | 05:08 | Click in the instance name field and give it an
instance name of "frameNum" for frame number.
| | 05:15 | Make sure that you capitalize the N in numb.
| | 05:18 | Lastly, because we're going to be telling the JPEG files that make
up the slideshow to load into a specific location and not a level
| | 05:27 | as you've seen the movie clip loader be used
previously, ye we need to give the location,
| | 05:32 | where those frames JPEG files are loading into, a unique instance name.
| | 05:37 | That movie clip symbol that we're going to
have those frames images load into by the way,
| | 05:41 | is where this black stroke in the middle of the stage is located within.
| | 05:45 | So click on one of those black strokes to select a movie clip symbol,
and then in the properties inspector click in the instance name field.
| | 05:54 | In that instance name field, type in the name Frames
MC for frames movie clip and press return or enter.
| | 06:03 | So now when we're using that movie clip
loader class to load those images dynamically
| | 06:08 | into our frames.swf file here, we
can say load those images into frames MC.
| | 06:14 | And those images that are the same size as this
box, is going to load into this movie clip symbol.
| | 06:21 | So the first thing that you did is you
linked all of your shared library elements.
| | 06:25 | Your shared fonts, as well as your shared button symbol, button dot arrow.
| | 06:29 | Then you selected the various text inside of this file and specified that
those text items used the shared fonts inside of your shared library.
| | 06:38 | You also made sure that each of the dynamic text fields, as well
as the movie clip symbol had their own unique instance names,
| | 06:45 | so that they could be specifically targeted with action script.
| | 06:49 | In the next exercise, you're going write the action script
to load the very first image in the frames slideshow.
| | 06:56 | Before you continue, make sure that you save the
changes that you've made to your frames.fla file.
| | 07:02 | And to make sure that I try to keep my work space as clutter free as
possible, I'm going to select the aboutUs.fla which I still have open,
| | 07:10 | but don't need to use right now, and I'm going to
close that and then go back to my frames.fla file.
| | 07:15 | 1
| | Collapse this transcript |
| Loading the first slide| 00:01 | >> Because this slide show is going to be smart, meaning that
it is going to keep track of which slide it is looking at,
| | 00:09 | how many slides there are total, so that when it gets to the
end or last slide of the slide show and the viewer clicks
| | 00:16 | on the next button it can go back to the beginning, and the same would
happen, but in reverse, if the viewer was clicking on the back button,
| | 00:23 | because of that we're gonna need to keep track of
which slide number the viewer's currently looking at,
| | 00:29 | and we're gonna keep track of that using action script.
| | 00:32 | Again, make sure that you're in frames.fla and
then in the topmost layer, which is called layer A.
| | 00:39 | Select the first key frame in that layer and open up your actions panel.
| | 00:44 | You'll notice that there's already quite a bit of
action script written in there to start you off with.
| | 00:48 | For those of you that don't have access to exercise files, you may
wanna pause the movie now and in the first key frame, in layer A,
| | 00:57 | in your frames.fla file, you may wanna write some of this
action script in that actions panel that you see here.
| | 01:04 | I'll scroll down a little bit as well so you
can see the remainder of the action script here.
| | 01:11 | Then in the very topmost empty line break,
which is line one, we're gonna create a variable
| | 01:17 | that keeps track of which slide the viewer is currently looking at.
| | 01:21 | To do that, type var, space, curFrameNum, for current frame
number, make sure the F in Frame and the N in num is capital.
| | 01:34 | Now because this is gonna hold a number let's strict type
it so that it can only hold data of the number type.
| | 01:41 | To do that, type a colon after curFrameNum, and then type
number, then type space, equals, space, zero, semicolon.
| | 01:51 | As you'll see with many things as you continue to work with Flash such
as working with rays and so forth, when Flash starts counting things,
| | 01:59 | it doesn't start normally counting with one, it starts counting with zero.
| | 02:04 | Zero, after all, is a number.
| | 02:06 | And to perpetuate same type of counting inside of flash, we're
gonna start counting for our slideshow also at number zero.
| | 02:14 | Again, starting to think of number zero as the
first place to start counting with will help you
| | 02:20 | as you continue forward using action script
inside of Flash because many other things in Flash
| | 02:25 | in the action script also start counting with the number zero.
| | 02:29 | Next we're gonna write an action that utilizes the movie clip loader
class in master.swf to load in the first frame of our slide show.
| | 02:38 | So after the action that you've just written press return or enter a
few times on your keyboard to create a couple of empty line breaks.
| | 02:45 | Then remember, the movie clip loader class, called myMCL, which is
located on master.swf is thought of as being in underscore level zero.
| | 02:54 | Master.swf resides at the bottom of all the other
SWF's because it loads all of that other content
| | 03:01 | into it, so it can be considered as being at level zero.
| | 03:05 | So type underscore, level, zero and then the name of the movie
clip loader class, that we gave it earlier, was dot my MCL,
| | 03:16 | make sure again that you put the dot between
underscore level zero and my MCL.
| | 03:20 | Also make sure that you have the capitalization correct as well.
| | 03:23 | Now we wanna tell the myMCL movie clip loader object to do something.
| | 03:28 | We want it to load in an image.
| | 03:30 | So type dot load clip, then type an open parenthesis.
| | 03:36 | Now here is where it gets, not tricky, but
gets more interesting as you're working
| | 03:41 | with action script that you may not quite have seen at this level yet.
| | 03:45 | We don't wanna tell Flash to load in a specific image number,
we don't wanna say load in image one dot JPG for example,
| | 03:53 | the reason why is because later, we may
decide that the first image in the slide show
| | 03:58 | that we wanna load shouldn't be image zero, maybe it should be image five.
| | 04:02 | Because of that, we're gonna write the action that tells
the myMCL movie clip loader object which image to load in.
| | 04:10 | We're gonna write it in such a way that
it doesn't specify an exact image number.
| | 04:15 | To do that, what we're gonna essentially do is
concatenate a few strings of text together with the value
| | 04:22 | that is currently being tracked by the
variable that we created call curFramNum.
| | 04:27 | So after the open parenthesis, after load clip, type
quote, frames, forward slash, frames, end quote.
| | 04:37 | Now before we continue, you should see where these slide
show images reside at so you know where to load them from.
| | 04:44 | Hide or minimize Flash for a moment and navigate into your site
directory which is in the LA Eyeworks directory on your desktop,
| | 04:51 | and there you'll notice another folder called Frames.
| | 04:55 | For those of you that don't have access to the exercise files,
you should probably create this folder in your site folder.
| | 05:03 | Open up that frames folder and you'll see a series of JPG image frames
that starts with frame zero, which is not coincidentally the same number
| | 05:13 | that we've placed inside of our curFrameNum variable that you just created,
| | 05:17 | and it goes all the way to frames nine, meaning
that there are 10 slide show images total.
| | 05:23 | Zero is the first one, and then frames one is image number two and
so on and so forth, so there are 10 frames images all together.
| | 05:31 | Additionally there are also text files associated with each frame.
| | 05:36 | Notice that they have the same file name, the only thing that differs
is the extension at the end of the name, frames0.jpg, frames0.txt.
| | 05:47 | It's not by accident that they have the same files
names and that just the extension at the end differs.
| | 05:52 | That's going to help us when we go and start writing our action script
because we can keep a lot of our action script the same that says go
| | 06:01 | and load this particular file, frame zero, frames one, frames two and so
forth, and when we wanna load in the descriptive information about each one
| | 06:09 | of those slides, all we have to do in the action script is just say either
load in the JPG or load in the TXT file or both, as you're about to see.
| | 06:18 | So this is the content that we're going to be loading in in the slide show.
| | 06:22 | The frames images as well as the descriptive information is all
located inside of the frames directory, the frames directory is inside
| | 06:31 | of the site directory, where the rest of our site files are located at.
| | 06:35 | So back inside of Flash, inside of the frames.fla file,
in the first key frame, in layer A, in the actions panel,
| | 06:45 | what you've written so far in this load clip action says go into
the frames directory and in there there's an image called frames,
| | 06:56 | and we haven't yet specified which frames number
to load in, that's where the curFrameNum variable,
| | 07:04 | with the number zero inside of it is going to come into play.
| | 07:09 | After the quote that comes after frames, click there and type
space, plus, space, curFrameNum, the name of our variable.
| | 07:21 | Now again, when Flash goes to read through this action, it's not
going to put curFrameNum there, it's going to instead replace
| | 07:28 | that variable with what the value of that variable is.
| | 07:32 | Well the value of that variable is what's inside the variable.
| | 07:35 | What's inside the variable in this case, to start with, is number zero.
| | 07:40 | So when Flash goes to read this action, it's gonna say load
the clip frames, which means it's in a directory called frames,
| | 07:47 | and then the image that it's loading is called frames0.
| | 07:50 | Because that's what it's gonna replace this variable with.
| | 07:54 | Now it's not just called frames0, if you remember it also has the
dot JPG extension at the end of the name, so after curFrameNum,
| | 08:04 | click there and type space, plus, space, quote, dot JPG, end quote.
| | 08:12 | Now what these plus signs do that you see here, is they concatenate.
| | 08:17 | Concatenate means to essentially add on to.
| | 08:19 | So what we're doing here is we have a few strings of text, frames
forward slash frames, and then it's going to add on to that,
| | 08:27 | it's gonna concatenate what the value of this variable is, zero.
| | 08:32 | And then it's going to concatenate onto
that another string of text, dot JPG.
| | 08:38 | So when this is all read through, assuming curFrameNum starts at zero,
when Flash reads this action through, it's gonna say frames/frames0.jpg.
| | 08:49 | The plus signs just concatenate that all
together into one long bit of text.
| | 08:54 | Now that you've specified what we're loading in, in
this case for starters, we're loading in frames0.jpg,
| | 09:00 | we need to tell Flash where we're going to load that image into.
| | 09:04 | Again, we have a few choices.
| | 09:06 | We can load it into a level, which is like an invisible layer above our
timeline, or we can load it in to a specific movie clip symbol instance.
| | 09:15 | If you remember, we have a movie clip symbol instance specifically
reserved for that purpose on the stage of our frames.fla file.
| | 09:23 | We called it, if you remember, framesMC.
| | 09:27 | So after the dot JPG end quote, type comma, space, and
then we need to type in the name of that movie clip symbol.
| | 09:36 | Now you can either do that or you can click on the insert
a target path button at the top of your actions panel.
| | 09:43 | When you do that, inside this insert target path dialogue box,
| | 09:46 | you'll see that movie clip symbol framesMC, go
ahead and select that and then just click OK.
| | 09:53 | So we're loading in the first frames slide show image,
frames0.jpg, into the movie clip symbol called framesMC.
| | 10:02 | End this action by typing a close parenthesis
and then a semicolon to end that action.
| | 10:07 | You've written enough so far that you can test the work that you've done.
| | 10:10 | Go ahead and save the changes that you've made to frames.fla and
then publish a SWF file from this FLA by choosing file, publish.
| | 10:20 | Now remember, because our modules, like frames, is
utilizing actions script that we've written into master.fla,
| | 10:28 | including our myMCL movie clip loader object,
we can't preview this frames file by itself,
| | 10:34 | we have to preview it as it's loaded into the master.swf file.
| | 10:39 | That means that we have to go back and make a slight
modification to which SWF file the master is loading in to.
| | 10:45 | Because right now, the master.swf file is set to load in the About
Us module, not the frames module, so go back to your master.fla file,
| | 10:55 | if you've accidentally closed it you can go back and open it up by going
into the site directory and double clicking the master.fla file there.
| | 11:03 | Then once you've opened that file, select key frame 10 in the A layer,
| | 11:08 | select the action that says myMCL.loadclipaboutus.swf,
select that whole action and copy it.
| | 11:18 | Then click at the end of that action, press return or enter to
create a new line break and paste that action in the new line break.
| | 11:27 | In the pasted copied action, change the SWF name that
it's loading from aboutUs.swf to frames.swf and then,
| | 11:36 | so we're not trying to load two different SWF's into the same level,
| | 11:40 | comment out the aboutUs.swf action so
that it is only loading in frames.swf.
| | 11:47 | Then save the changes you've made to master.fla and test your movie,
| | 11:52 | which will also of course publish a new SWF file
by choosing control enter or command return.
| | 12:00 | When it loads, you'll see the frames module appears, and more importantly,
the first image in that slide show actually load and be displayed
| | 12:09 | in the same location where we had our framesMC
movie clip instance on the frames stage.
| | 12:14 | So the two actions that you've written so
far to get started are working perfectly.
| | 12:19 | In the next exercise, you're going to use action script to
determine how many frames there are total in the slide show.
| | 12:25 | Once you've gotten that bit of information, then you
can start writing the action script to allow the viewer
| | 12:30 | to navigate both forward and backward through the slide show.
| | 12:34 | Before you continue on to the next movie, however, make sure that
you've closed your preview window and return back to frames.fla.
| | Collapse this transcript |
| Loading the total slides variable| 00:01 | >> In order for the slide show to know when it reaches the end or the last
slide in the slide show, so that when the viewer clicks on the next button
| | 00:09 | in the slide show it goes back to the beginning, and the
same being true for going backwards in the slide show,
| | 00:15 | it needs to know how many slides there are total in the slide show itself.
| | 00:20 | Now we could easily create a variable here right inside the FLA file
using action script that defined how many slides there were total.
| | 00:28 | The problem with that is that later if we decided to add more slides onto
the slide show, or allow the client to add more slides to the slide show,
| | 00:36 | they would have to open up the FLA inside of Flash, and you'd
have to muck around with the action script to change that number.
| | 00:43 | Rather than do that, let's try to make it easier for ourselves
and the client to update later by just storing that number,
| | 00:50 | how many slides there are in the slide show
total, in the separate text file outside of Flash,
| | 00:55 | and then use a LoadVars object to load that number in.
| | 01:00 | That way we can more easily utilize it, as well
as more easily update it later if we chose.
| | 01:06 | I've already created this text file for you
that has the total number of slides in it.
| | 01:11 | For those of you that have access to the exercise files, if you
hide or minimize Flash, and then navigate into your site directory,
| | 01:19 | in there open up the Vars folder, and in the Vars folder you'll
notice that there's a text file called slide underscore info.txt.
| | 01:29 | For those of you that don't have access to the exercise files,
go ahead and create a text file with this same name now.
| | 01:36 | Inside of that text file, if you open it up you
can see that it's just one variable value pair.
| | 01:42 | It says total frames equals ten, that means that
there are ten slides total in the slide show itself.
| | 01:49 | If I or the client ever decided to update the slide show, and add or remove
slides from the slide show, all I'd have to do is open up this text file,
| | 01:58 | make the change to this number, save the file, and the next time the
SWF file was viewed, it would then incorporate that up to date number.
| | 02:07 | So it makes it much more easier to maintain and
update the slide show by keeping this number
| | 02:12 | in a separate text file, and loading it
into Flash using a LoadVars object.
| | 02:17 | Now that you've seen what's inside of this text
file, the important thing to remember is the name
| | 02:21 | of the variable, totalFrames with a capital F in frame.
| | 02:26 | We're going to need to target that variable name when we
create our LoadVars object, which you're going to do next.
| | 02:32 | After you've seen this text file, go ahead and
close it, and go back into your Flash project.
| | 02:39 | Now we're not going to use the LoadVars object called myLV
that you've written into the master.fla file previously.
| | 02:48 | That myLV LoadVars object is for loading text, and then displaying
the value of the variable in a text field called loaded info.
| | 02:58 | In this case we're not going to be displaying
this number in a text field called loaded info.
| | 03:04 | We're gonna utilize it in our action script, and we're gonna display
it in our frameNum field down at the bottom of the slide image,
| | 03:12 | but we're not gonna be utilizing it in the same
way that the myLV LoadVars object was constructed.
| | 03:19 | Because of that, we're gonna create a separate LoadVars object here
inside of frames.fla, just for loading in the total slides number.
| | 03:28 | To start off with, again inside of frames.fla
with the first key frame in the A layer selected,
| | 03:35 | in the actions panel click before the very topmost action.
| | 03:40 | Then press return or enter a few times to
move all those actions down a couple lines.
| | 03:45 | And then select that topmost empty line break.
| | 03:48 | Next, let's create a LoadVars object, so type var, space, slide info,
LV for slide info LoadVars, strict type it to the LoadVars data type
| | 04:03 | by typing colon LoadVars, space equals space, new, space,
LoadVars, open parenthesis, end parenthesis; semicolon.
| | 04:15 | Now we just need to tell that LoadVars object to load that
variable value pair from that text file you just looked at.
| | 04:22 | So press return or enter to create a new line break, and type slide info
LV.load, open parenthesis, quote, remember it's in a folder called Vars
| | 04:36 | so we can just specify that here in the URL, type
Vars, forward slash, slide underscore info.txt,
| | 04:46 | end quote, end parenthesis, semicolon to end that action.
| | 04:50 | Those two actions that you've just created effectively load in
that text file as well as the variable value pairs within it.
| | 04:58 | So now that you've written the action script
to get the total slides number to load in so
| | 05:03 | that now the slide show knows how many slides there are total,
in the next exercise you're gonna start scripting the next slide
| | 05:10 | and previous slide buttons so the viewer can actually
navigate both forward and backward through the slide show.
| | 05:16 | Before you continue on, make sure that
you save the changes to this FLA file.
| | Collapse this transcript |
| Adding the next slide functionality pt. 1| 00:00 | >> Now that you've written the action script to load in the total frames
variable so that your slide show now knows how many slides there are total,
| | 00:10 | you can start writing the action script and applying
it to the next slide and previous slide buttons.
| | 00:15 | Go ahead and minimize your actions panel if you have it open
| | 00:18 | and then select the layer underneath the top most layer
called "A". Then create a new layer and rename that new layer
| | 00:26 | to be titled "buttons". While we're here go ahead and lock the A
layer so we don't actually put anything on the stage in that layer
| | 00:34 | and then in the library for your frames.fla file
you'll see the shared button called btn.Arrow
| | 00:41 | that we copied over earlier from the shared lib shared library.
| | 00:45 | Go ahead and take the button and drag it out onto
your stage now currently that arrow is pointing down,
| | 00:52 | we want our arrow to go to the next slide
in the slide show to point to the right.
| | 00:57 | So with that button selected on the stage choose modify,
transform rotate 90 degrees CCW, Counter Clockwise.
| | 01:07 | Then drag that button and position it so that it's on the right hand side
| | 01:11 | of that dynamic text field underneath
where the slides themselves actually load.
| | 01:16 | Next, while holding down your control and shift key on
Windows or option and shift on the Macintosh drag that button
| | 01:23 | over to the left hand side of the dynamic text field and let go.
| | 01:27 | Then let's flip that button so that it's pointing
to the left by choosing modify, transform,
| | 01:34 | flip horizontal and then again you may need to
realign it by dragging it a little bit like so.
| | 01:40 | So there we have the next slide and previous slide buttons.
| | 01:45 | Now as you've seen before when adding action script to a key frame
in your time line that targets a movie clip or button symbol that's
| | 01:53 | on the stage you need to give those movie clip
or button symbol instances a unique instance name
| | 01:59 | so that we can tell them what to do with action script.
| | 02:02 | Click on the next slide button on the stage and in the properties inspector
click in the instance name field then type next SlideBtn all one word
| | 02:15 | with a capital S in slide and capital B in BTN for Button.
| | 02:20 | Then select the previous slide button on the stage, click in
the instance name field in the properties inspector then type
| | 02:27 | in prev slide Btn with a capital S in slide and capital B in Btn.
| | 02:34 | Now that each of those buttons symbols have their
own unique instance name we can now target them
| | 02:39 | with action script which is what you're going to do next.
| | 02:43 | Go ahead and select the first key frame in layer A and open up your
actions panel, now because we're going to add some actions script
| | 02:51 | that modifies the mouse events of some button symbols on the stage
that requires a wee bit of action script so it would probably be good
| | 02:58 | to add some comment lines in there that defined areas of your actions
panel as being where the action script for those buttons reside at.
| | 03:07 | To make my life a little easier, I'm going to select one of the other
comment lines, copy it and then click after the action that loads
| | 03:17 | in the first frame, it starts under score level zero dot myMCL
dot load clip, I'm going to click on the end of that action,
| | 03:25 | press return or enter a few times to line breaks,
paste that copied comment line on that location.
| | 03:34 | Then I'm simply going to select what's between the less than and greater
than symbols in that comment line then change it to read "next slide button".
| | 03:46 | Then I'm going to select and copy that
comment line, click on the end of that line,
| | 03:52 | press return or enter a few times and then paste that comment line.
| | 03:57 | Then in that pasted line I'm just going to click before the word "next" and
type a forward slash to mark the end of the next slide button actions.
| | 04:04 | Next I'm going to add an on release mouse event to that next
slide button on the stage so click in the empty line break
| | 04:11 | in between the two comment lines that you just created and then click
on the insert and target path button at the top of the actions panel.
| | 04:20 | Inside of that dialogue box that appears, scroll down until you locate
the button called next slide button if you don't see the next slide button
| | 04:29 | or the prev slide button button symbols that's probably because you
accidentally skipped over the steps where you attached instance names
| | 04:36 | to these button symbols, if that's the case you may want
to rewind the video a little bit so that you make sure
| | 04:42 | that you add instance names to those button symbols on the stage.
| | 04:46 | Once you see those then just select it, make sure that you're targeting
it set to relative and then click OK Flash with an insert the name
| | 04:55 | of that button symbol on the stage preceded by
the key word this, This dot next slide button.
| | 05:02 | Now we want to add an on release mouse event so that we can
define what should happen when the viewer clicks on that button.
| | 05:09 | So after next slide button type dot on release and again as you've
seen before when adding mouse events to buttons or movie clips symbols
| | 05:18 | in this manner you have to attach them to functions so type space equal
space function open parentheses, closed parentheses space open curly brace,
| | 05:30 | a couple of line breaks and a close curly brace to end that function. Now
is when you have to stop and think exactly what you want this next button
| | 05:40 | to do when the viewer clicks on it. When they click on it you may think
"Oh well just go to the next slide, load the next slide in the slide show"
| | 05:47 | but we actually have to do a little bit of checking before
we can tell the slide show just to load the next slide.
| | 05:53 | The first thing we need to figure out when the viewer clicks on the
next slide button is if there is a next slide to go and look at.
| | 06:01 | When they get to the end of the slide show remember
we want the slide show not to just stop there
| | 06:07 | but to go back and display the first slide in the show.
| | 06:11 | So when the viewer clicks on the next button the first question we
need to ask is, are they looking at the last slide in the slide show
| | 06:19 | or not because if they're not looking at the last slide in the
slide show then go ahead and load the next slide in sequence,
| | 06:27 | however if they are looking at the last slide in the slide show
then go back and load the very first slide in the slide show.
| | 06:35 | So when the viewer clicks on the next slide
button we need to ask a few questions first.
| | 06:41 | You can do that in Flash by using, as you've seen before, what's
called a conditional statement, that means writing an if action.
| | 06:50 | "If this is happening then do this otherwise if its
not doing that then do this other thing instead."
| | 06:56 | That's essentially how you would phrase an if statement in plain English.
| | 07:01 | So click between the open and closed brackets that starts the on release
function and let's start by writing just the skeleton of this if statement.
| | 07:10 | To do that just write if then open parentheses,
end parentheses, space, open curly brace,
| | 07:18 | two line breaks and a closed curly brace then we
need to write the condition of this if statement.
| | 07:24 | What is the question we're going to ask?
| | 07:27 | We write that here inside of the open and closed
parentheses, so click in there after the word "if".
| | 07:33 | Now we can find out if the viewer is looking at the last slide in the
slide show by comparing what the current frame number is per frame Num
| | 07:44 | which again is keeping track of the slide the viewer is
currently looking at as you'll see here in just a little bit.
| | 07:50 | We compare that number against how many frames there are total, which
we're tracking cause we loaded that number using LoadVars action script,
| | 07:59 | so we're going to compare which slide the viewer is currently looking
at with how many slides there are total. If that is equal then we know
| | 08:08 | that they're looking at the last slide in the slide show. So in
between the open and closed parentheses after if per frameNum,
| | 08:18 | if current frame number of the current frame the current slide the viewer
is currently looking at and then type space, less than, space, slide info,
| | 08:28 | LV, dot, total frames, now what that action does slide
info, LV, dot, total frames, that gives us when we ask Flash
| | 08:38 | that which number is inside of the slideInfo.txt file.
| | 08:44 | That number defines how many frames there are total.
| | 08:46 | Now there's a slight discrepancy with how we're tracking
our numbers here, if you remember we're keeping track
| | 08:52 | of which slide the viewer is currently looking at starting
with the number zero because again zero counts as a number.
| | 08:58 | And again the reason why you're starting with the number zero is to
retain consistency with action script inside of Flash as you'll see
| | 09:05 | as you advance forward with your Flash action script knowledge there
are many other cases where Flash starts counting with the number zero.
| | 09:13 | So we're doing that so that as you advance forward
in Flash you get into that mindset of thinking start
| | 09:18 | with the number zero. However the total frames variable which we're keeping
track of inside of our external text file so that we can easily update it
| | 09:27 | as well as the client later does not take into account that it starts with
the number zero. If it did, the total frames variable would not be ten
| | 09:35 | because we have ten images total, instead it would say nine.
| | 09:39 | However the reason why we're choosing ten is to make it a
little easier for you and the client to understand later.
| | 09:47 | For example if you have ten frames in your slide show you
don't want to tell the client, "Oh by the way don't type in ten
| | 09:54 | because there are ten frames, type in one less then how many there
are total", that would just be confusing to describe to a client.
| | 10:00 | So what we're going to have to do is take our total frames variable
here and we want to compare total frames number against the number
| | 10:09 | that keeping track of our current frame we simply
need to subtract one from this total frames variable.
| | 10:16 | Again that'll just make it easier for yourself and or the client to
update that total frames variable later and all you'll have to do here
| | 10:25 | when you're comparing it against per frame num variable is just
subtract one from that so it's much easier for you to do it here
| | 10:33 | as your programming the action script then it would be to describe
a client to tell them to enter in one less in the total frames
| | 10:40 | in the total frames variable, so what that means is that after
total frames where you are now simply type space, minus, space,
| | 10:48 | one so our total frames variable is ten and we're going
to subtract one from that so its gonna say nine here.
| | 10:56 | Again the reason why is because with the way per frameNum is
tracking the variable, the number nine is the last number of the slide
| | 11:04 | in the slide show again because we started counting from the number zero.
| | 11:08 | Now when Flash goes to load in this total frames variable sometimes
that can load that in as a string instead of an actual number
| | 11:18 | in which case it would get confused when it tried
to subtract the number one from a string of nine.
| | 11:25 | All that, that means is that you need to tell Flash specifically
that this total frames variable is a number and not an actual string,
| | 11:33 | to do that simply click before slide info LV and type number open
parentheses click after total frames and type a closed parentheses.
| | 11:46 | Now all that does is it forces Flash to take whatever
is inside of the parentheses in this case again
| | 11:52 | when Flash performs this action script its going to
figure out what the total frames variable is inside
| | 11:59 | of the slide info LV LoadVars object
and its going to put that value there.
| | 12:04 | We're simply forcing Flash to make sure that it's a number by encasing
that in parentheses and then by putting the keyword number before it so now
| | 12:13 | when flash goes to figure out this action its
going to take this value which is going to be ten
| | 12:18 | as a number and subtract it from one so we'll end up with nine.
| | 12:22 | So our if statement currently says if the number that is inside per frames
num variable is less than nine, if that comes out to be true that means
| | 12:34 | that the viewer is not looking at the last slide in the slide show
if that's the case then we can just tell our slide show to go look
| | 12:41 | at the next slide in sequence, we're going to
do that as well as complete the functionality
| | 12:47 | for the next slide button, button symbol in the next exercise.
| | 12:51 | Before you continue on however make sure
that you save the changes to your FLA file.
| | Collapse this transcript |
| Adding the next slide functionality pt. 2| 00:01 | >>So currently, when the viewer clicks on the next slide button
to advance to the next slide in the slide show, we ask a question.
| | 00:08 | We say is the slide they're currently looking
at less than how many slides there are total?
| | 00:15 | If that's the case, then the viewer can simply go to the next slide in
sequence, click in between the open and close brackets for the if statement
| | 00:25 | that you just wrote and type in curFrameNum, plus, plus, semicolon.
| | 00:33 | What that does is it simply adds one number on to
whatever number is inside the curFrameNum variable.
| | 00:41 | Now the reason why you're doing that, you're just adding one number
onto that, is because later, after you've asked these questions,
| | 00:48 | and then told that curFrameNum variable what number should be inside of it,
| | 00:53 | you're then going to write an action that
says "okay, go and load that slide number."
| | 00:58 | Now that you've specified what should happen if the
viewer is not looking at the last slide in the slide show,
| | 01:04 | you should also specify what should happen if they
are looking at the last slide in the slide show.
| | 01:09 | In other words, if this question is not true, if it is true,
they're not looking at the last slide in the slide show.
| | 01:17 | If this question is true, that means they are not looking at
the last slide in the slide show, however if it is not true,
| | 01:25 | that means they are looking at the last slide in the slide show.
| | 01:29 | We're going to do that, as you've seen before,
by writing an "else" that comes after our "if".
| | 01:35 | So if basically says if this is true, do this,
otherwise, which is the else, do this other thing.
| | 01:43 | So after the closed curly brace that ends the if statement, click there,
and type space, else, space, open curly brace, a couple of line breaks
| | 01:54 | and a closed curly brace to end that else statement, then click in the
empty line break between the open and close curly braces, after else,
| | 02:03 | and type curFrameNum, space, equals, space,
zero, semicolon to end the action.
| | 02:13 | So what this currently says is if the viewer is
currently looking at a slide that is not the last slide
| | 02:21 | in the slide show then set the curFrameNum variable, which is just a
number that's keeping track of which frame the viewer's currently looking
| | 02:29 | at in the slide show, set that to be one number greater than what it is.
| | 02:33 | Otherwise, which means if they are looking
at the last slide in the slide show,
| | 02:38 | set that number to be zero, reset it back to the beginning essentially.
| | 02:42 | Now once you've written the action script that asks these questions
and then sets that curFrameNum variable value to be the correct number,
| | 02:53 | you then want to tell it okay, now that you've said which frame is
supposed to be the current frame, load in that particular frame.
| | 03:01 | That essentially is the action that you
wrote earlier, which does exactly that.
| | 03:06 | It simply loads in a JPG file that corresponds
to whatever that curFrameNum variable value is.
| | 03:14 | Now you don't wanna just write this here inside of the
next slide button dot on release function because, again,
| | 03:20 | you're not only gonna be utilizing this same action in the next
slide button scripting, but also in the previous slide button.
| | 03:28 | So rather than take this action and duplicate it for as many
times as you need it, there's a much better way to do it
| | 03:35 | and that's by simply enclosing this within a
function and then just targeting or executing
| | 03:40 | that function whenever you need that action to be executed.
| | 03:44 | That way, should you ever need to make any changes to this action,
you wouldn't have to make changes to it every time you used it.
| | 03:50 | You would just go and make changes to it
that one time, there inside the function.
| | 03:54 | To place that within a function is really easy to do.
| | 03:57 | Simply click at the beginning at that action, press return or enter once
to create a line break above it, then select that empty line break above it
| | 04:06 | and type function, space, loadFrame, with a capital F in frame.
| | 04:12 | Again, a function, like a variable, can be whatever name you
want, as long as you follow the correct naming conventions
| | 04:17 | and you don't add spaces in the name or special characters or so forth.
| | 04:21 | Again, make sure that you have the spelling and capitalization correct
and then after loadFrame type open parenthesis, end parenthesis, space,
| | 04:31 | open curly brace to mark the beginning of that function, and then click
at the end of the action underneath that, the underscore level zero,
| | 04:38 | dot myMCL, dot load clip, click at the end
of that action, press return or enter once,
| | 04:44 | and then create a closed curly brace to mark the end of that function.
| | 04:48 | Now technically, the actions within a
function should be indented one tab space.
| | 04:53 | To do that click at the beginning of your underscore lever
zero dot myMCL action and press tab to indent it one space.
| | 05:01 | So now, whenever I wanna tell Flash to load in a slide from the slide
show that utilizes whatever number is inside of that curFrameNum variable,
| | 05:11 | I simply tell it to execute this load frame function.
| | 05:15 | That's what we're gonna do for the next slide button.
| | 05:18 | Now that the next slide button action script has been written that
asks a few questions and then sets that number to be appropriate
| | 05:25 | to which slide should be loaded next, we can then
execute this load frame function to have it actually load
| | 05:32 | in the slide from the slide show, that might be nice.
| | 05:35 | To make it easier so we don't accidentally misspell or mis-capitalize
the name of the function, select the name of the function, loadFrame,
| | 05:43 | including the open and closed parenthesis, copy that and then
scroll down to the next slide button on release function,
| | 05:52 | click after the closed curly brace that comes after the else statement,
press return or enter once to create a line break there and then paste
| | 06:02 | that load frame function call and then
simply add a semicolon to end that action.
| | 06:09 | Now make sure that this load frame call comes before the
closed curly brace that ends the on release function,
| | 06:16 | but after the closed curly brace that ends the else statement.
| | 06:20 | So what happens in order, is that when the viewer clicks on the next
slide button, it first asks to find out if they're looking at a slide
| | 06:28 | that is not the last slide in the slide show,
if they're not looking at the last slide
| | 06:33 | in the slide show it adds one onto the curFrameNum variable value.
| | 06:38 | If they are looking at the last slide in the
slide show, then it sets that number to be zero.
| | 06:44 | Once it's done either one of those things, then it executes that load frame
function, which then loads in the appropriate slide into the slideshow.
| | 06:53 | So the next slide button functionality is complete.
| | 06:56 | It now is an intelligent button in that it looks to
find out if the viewer's looking at the last slide
| | 07:02 | in the slide show or not and then takes appropriate action.
| | 07:05 | However, because we encased the action that actually loads
in the first slide in the slide show within a function,
| | 07:13 | that means it won't be executed by default until we call that function.
| | 07:18 | So that means, essentially in plain English,
when the viewer comes to your frames module,
| | 07:23 | they will not see the first slide in the
slide show appear by itself automatically.
| | 07:28 | They'll have to click on the next slide button, currently,
to actually see the first frame in the frames slide show.
| | 07:35 | Well because when the viewer comes to the frames
module, we want them to see the first slide
| | 07:39 | in the slide show we need to execute this load frame function.
| | 07:44 | To do that, again, simply select that loadFrame function name,
including the open and close parenthesis and then copy it,
| | 07:52 | just to make sure we still have it in our computer's clipboard.
| | 07:55 | Then click after the closed curly brace that ends the loadFrame function,
| | 08:01 | press return or enter once to create a line
break underneath that, and then paste it.
| | 08:07 | Then simply add a semicolon to end that.
| | 08:09 | That means, because we're calling that function,
that the action within it that loads the first slide
| | 08:15 | in the slide show will be executed when the frames module first appears.
| | 08:20 | Again, if we didn't include that, the viewer would come to
the frames module and nothing would appear there, no slide,
| | 08:25 | until they clicked on the next slide button,
which then executes that function.
| | 08:30 | You can now test to see how this works so far by saving your FLA,
publishing a new SWF file from this FLA, navigating to your master.fla file
| | 08:41 | and testing your movie there, or going into your master.swf
file in your site directory and double clicking on that.
| | 08:49 | Since I have master.fla, I'm just going to
select that and choose control, test movie.
| | 08:54 | When you do that, you can see that the first slide in the slide show
automatically appears and then when I click on the next button it's going
| | 09:00 | to load the next slide in the slide show, which
again is using our myMCL movie clip loader class
| | 09:07 | that is inside of the master.fla file to load that JPG image in.
| | 09:13 | I can keep clicking on that to keep loading
the next slide in the slide show.
| | 09:18 | Now this frame right here is actually frame number 10 in the slide show.
| | 09:23 | When I click on that button again, it goes
back to the very first frame in the slide show,
| | 09:28 | so that I know that my smart next slide button actually is being smart.
| | 09:33 | It's figuring out which slide is the last slide in the slide show and
then telling, when the viewer clicks on the next button in the slide show,
| | 09:41 | so now I can tell that my smart next slide
button is actually working as intended.
| | 09:47 | When the viewer clicks on that next slide button, it's figuring out
if they're looking at the last slide or not and if they are looking
| | 09:53 | at the last slide, it tells the slide show to go back to the beginning.
| | 09:57 | Otherwise, it just tells it to load the next slide in sequence.
| | 10:01 | So the next slide show button is working perfectly.
| | 10:04 | In the next exercise, we're gonna take that same script and
modify it slightly and apply it to the previous slide show button
| | 10:11 | so the viewer can navigate both forward
and backward through the slide show.
| | 10:16 | Additionally, we're also going to, later on in this chapter, add some
text to this frame num text field here, between the previous slide button
| | 10:24 | and the next slide button, so the viewer can actually
see which slide number they're currently looking at,
| | 10:29 | as well as use our myLV LoadVars object that's in master.fla to
load some descriptive text here on the left hand side of the slide.
| | 10:38 | That way, the viewer, as a potential buyer for these frames, can actually
get some more descriptive information about these actual frames themselves.
| | 10:48 | Before continuing, make sure that you close your
preview window and return to your frames.fla file.
| | Collapse this transcript |
| Adding the previous slide functionality| 00:00 | >> Now that you've written the action script
to get the next slide button to work correctly,
| | 00:06 | you've already done a lot of the leg work to
get the previous slide button to work correctly.
| | 00:11 | As a matter of fact, you're gonna take the action script that you've
written to make that next slide button work, copy it, paste it,
| | 00:18 | and make some changes to it for the previous slide button.
| | 00:22 | In your frames.fla file, in the first key frame of layer "A",
with the actions panel open, locate the actions that start
| | 00:31 | with the comment next slide comment and
end with the comment end next slide button.
| | 00:36 | Select that block of action script, including
the comment lines and copy it.
| | 00:42 | Then click after the comment that ends the next slide button comment,
press return or enter a few times to create some empty line breaks,
| | 00:51 | and then paste all that action script that you've copied.
| | 00:54 | In the pasted action script, let's start by changing the comment lines.
| | 00:58 | Change that next slide button, and again, make sure that you're
modifying the pasted action script and not the original action script,
| | 01:06 | change that next slide to read previous slide button.
| | 01:10 | And then of course, do the same thing
for the closing comment line, like so.
| | 01:16 | Then we wanna make sure that we're targeting
the right button with the on release function.
| | 01:20 | It shouldn't be next slide button, it should be prev slide button.
| | 01:24 | Another way to do that is to simply select this dot next slide button,
click on the insert a target path button at the top of the actions panel,
| | 01:33 | scroll down until you locate prev slide button and click it
and then click OK in the insert target path dialogue box.
| | 01:41 | Flash will then replace that with the correct name for that button symbol.
| | 01:45 | Now within that on release function, the questions that
we're currently asking with our if conditional statement is
| | 01:52 | if the viewer is looking at the last slide in the slide show or not.
| | 01:56 | However, because now with the previous slide button, the
viewer's going to be navigating backward through the slide show,
| | 02:02 | we don't wanna find out if they're looking at the last slide or not, we
wanna find out if they're looking at the first slide in the slide show,
| | 02:08 | because if they are looking at the first slide in the
slide show, when they click on the previous button,
| | 02:13 | then we want it to load the last slide in the
slide show so it goes back to the end again.
| | 02:19 | Otherwise, it can just load whatever the
previous slide in the slide show is.
| | 02:23 | So when the viewer clicks on the previous slide
button, the first question that we can ask is,
| | 02:29 | is the viewer looking at the first slide in the slide show?
| | 02:33 | In other words, is curFrameNum, the number
that's inside that variable, is it zero?
| | 02:39 | Because if it is, that means the viewer's
looking at the first slide in the slide show.
| | 02:44 | So in the if statement, in between the parenthesis, leave curFrameNum
there, but select everything from the less than symbol all the way
| | 02:53 | to the number one, then delete that and type
in equals, equals, two equal signs, space zero.
| | 03:02 | That double equal sign is called an equality operator.
| | 03:06 | And what an equality operator does is it
checks to see if what's on the left hand side
| | 03:11 | of it is exactly equal to what's on the right hand side of it.
| | 03:16 | So in other words, we're checking to see
if the value of the curFrameNum variable,
| | 03:21 | whatever numbers inside of there, is exactly equal to zero, in this case.
| | 03:26 | The single equal sign that you've seen earlier is called an
assignment operator and it just takes what is on the right hand side
| | 03:35 | of that equal sign and assigns it to what's on the left hand side.
| | 03:39 | In other words, a single equal sign, in this action right
here simply takes the number zero and puts it inside,
| | 03:45 | or assigns it to what's on the left hand side, the curFrameNum variable.
| | 03:50 | So the double equal sign checks to see
if on the left and the right is equal,
| | 03:55 | whereas the single equal sign puts one into
the other, or assigns one to the other.
| | 04:00 | Now if this if statement turns out to be true, in other words,
if the viewer, when they click on the previous slide button,
| | 04:07 | is actually looking at the very first slide in the slide show, you want
the slide show to then go to the very last slide in the slide show.
| | 04:16 | So after the if statement, select the action that
reads curFrameNum plus, plus and delete that.
| | 04:24 | Instead type curFrameNum, space, equals, space, we're gonna
put something or assign something to that variable curFrameNum,
| | 04:35 | and we wanna put in that variable the number
that is the last slide in the slide show.
| | 04:41 | If you remember, we retrieve that information in the next slide button
on release function, it says slide info LV dot total frames minus one.
| | 04:52 | To make your life a little easier, you could even select number, open
parenthesis, slide info, LV, dot, total frames, end parenthesis, minus one.
| | 05:03 | Copy that, scroll down to the previous slide button actions,
click after the equal sign, after curFrameNum and paste it there.
| | 05:15 | What this action does, is it says take the number that represents the
last slide in the slide show and put it inside of the curFrameNum variable
| | 05:24 | so when the viewer clicks on the previous slide button, if they
are looking at the first slide in the slide show put the number
| | 05:32 | that represents the last slide in the slide show in that curFrameNum
variable, that way, if the viewer clicks on the previous button
| | 05:41 | and they're on the first frame of the slide show, it will
actually go back to the last frame in the slide show.
| | 05:46 | So the slide show will continually move,
even as the viewer's going backwards.
| | 05:51 | Now if the viewer clicks on the previous slide button and they
are not looking at the very first frame in the slide show,
| | 05:58 | we simply wanna tell it to go to whatever
the previous slide is, go back one.
| | 06:03 | To do that, we simply tell our curFrameNum variable to subtract
one from whatever number's inside of it, so in the else statement,
| | 06:12 | where it says else curFrameNum equals zero, and again, this
is inside of the previous slide button on release function,
| | 06:20 | after curFrameNum equals zero, select equals zero and just type
minus, minus, so it says curFrameNum minus minus semicolon.
| | 06:30 | That means subtract one from whatever number is inside of that variable.
| | 06:35 | And with those changes you now have a complete
back button for you slide show as well.
| | 06:41 | We can test this to make sure that it works correctly by saving
this FLA, publishing an updated SWF, opening up the master.fla,
| | 06:51 | or simply double click master.swf in your site directory
and then if you're in master.swf, you can test your movie.
| | 06:59 | If I click on the forward button, as we saw earlier,
we can navigate forward through the slide show,
| | 07:04 | if I click on the previous button I can
navigate backward through the slide show.
| | 07:08 | And again, as I continue to click, it'll keep repeating that slide show.
| | 07:13 | When I'm at the very first slide in the slide show, such
as this one, this is frame number zero in the slide show,
| | 07:20 | when the viewer clicks on the previous button it says, "oh
you are looking at the very first slide in the slide show,
| | 07:25 | so load the very last slide in the slide show," and it continues to do that.
| | 07:31 | The next slide button, of course, does the opposite when it gets
to the last slide in the slide show, which this is, it says,
| | 07:37 | "Oh you're looking at the last slide in the slide show, then
go back to the very beginning and load that image instead."
| | 07:43 | So you definitely deserve a big congratulations.
| | 07:45 | You now have a complete, working and intelligent slide
show that will loop as the viewer navigates through it.
| | 07:53 | The last few things that you need to do in the remaining exercises
is to add a little counter down here in between the previous slide
| | 08:00 | and next slide buttons so the viewer can actually see which slide
they're looking at out of how many slides there are total, as well as,
| | 08:07 | on the left hand side of the slide show image,
add a little bit of descriptive information
| | 08:12 | about the particular frames that the viewer is currently looking at.
| | 08:15 | And you're gonna do that in the next few exercises.
| | 08:19 | Before you continue though, make sure that you close
your preview window and that you go back to frames.fla.
| | Collapse this transcript |
| Adding the slideshow descriptive text| 00:00 | >> In this exercise, you're going to load the descriptive slide show
information that appears on the left hand side of each slide as it loads.
| | 00:09 | To get a better idea of what I'm talking about, again, you can always
go back to the sample site, by opening up your preferred web browser
| | 00:17 | and then going to www.lynda.com, forward
slash, intFLash8, forward slash, LAEyeworks.
| | 00:25 | Then, when you're there, clicking on the frames
option from the navigation bar at the top.
| | 00:30 | That will load in the first slide in the slide show, which you've already
done, as well as scripted the previous slide and next slide functionality,
| | 00:38 | and this descriptive information on the left is
what you're gonna be completing in this exercise.
| | 00:43 | As the viewer clicks on the next and previous slide
buttons to load the next and previous slides respectively,
| | 00:49 | you'll notice that this information actually
updates as the slide image itself does.
| | 00:54 | So as I click on the next slide button, you can see
that the image itself updates in the text as well.
| | 01:00 | Now the way that this text loads in, as well as gets styled
using cascading style sheet tags, is all review to you.
| | 01:08 | You've already done that in the About Us module.
| | 01:12 | So for the most part, this section is review.
| | 01:14 | So much so that I've actually provided much of the action script
to get this to work for you, already in the exercise files.
| | 01:21 | I'm gonna go ahead and close my browser window
and return to Flash in my frames.fla file.
| | 01:28 | For those of you that have access to the exercise files, inside
of the first key frame, in your "A" layer, in the actions panel,
| | 01:36 | if you scroll down, you'll see some comment
lines that read pre-built code for chapter seven.
| | 01:41 | After that comment line, there's a series of actions,
there's some textfield.stylesheet actions,
| | 01:47 | some auto alignment for text fields and a few other things.
| | 01:52 | It's that commented out action script that
you're gonna utilize for this exercise.
| | 01:56 | And again, the reason why it's provided for you, so that you don't
have to write it all again yourself, is because you've already done it.
| | 02:03 | You already know how it works.
| | 02:05 | You've done this exact same thing in the About Us
module when you loaded in the text and styled it
| | 02:11 | in the Our History and Our Staff sections of that About Us module.
| | 02:16 | So this is all review.
| | 02:18 | For those of you that don't have access
to the exercise files, you may wanna look,
| | 02:22 | and pause this movie at this point, and write
down the action script that you see here.
| | 02:27 | Again, for those of you that do have access to these exercise files, what
you're going to want to do next is to make this code so that it's active.
| | 02:35 | Currently, as you can see, because of the forward slash asterisks
at the beginning, and the asterisks forward slash at the end,
| | 02:43 | all of this action script is commented out, meaning that it is not
compiled into the finished script and therefore does not execute at all.
| | 02:50 | So that these actions will actually execute, let's take out those comment
lines, so that it will actually be compiled into the finished SWF file.
| | 02:59 | To do that, select the comment line pre-built code for chapter
seven as well as the forward slash asterisks and delete those.
| | 03:09 | Then scroll down to the bottom and delete the asterisks
forward slash as well as that last comment line, like so.
| | 03:18 | Notice how now, that action script is not grayed
out, it's color coded and it is not functional
| | 03:23 | and it will actually work when you publish your SWF file.
| | 03:26 | What this action script does that you've just uncommented is that it
sets the auto size feature of two of the text fields on the stage,
| | 03:34 | the frameNum text field, which is the text field underneath the slide show
that will eventually show the viewer which slide they're currently looking
| | 03:41 | at and how many slides there are total, and it also sets the
auto size feature to write up the loaded info text field,
| | 03:50 | which is where the descriptive text will
be loaded for each slide in the slide show.
| | 03:54 | Underneath that, again as you've seen before, is a textfield.style
sheet object created called CSS Styles that loads in the styles.css file.
| | 04:05 | The same one we utilized earlier and then there's an on load even handler
for that that says if that CSS style has been loaded successfully,
| | 04:14 | to then apply that style sheet to the loaded info text field and
execute the function that we created called load frame, which again,
| | 04:24 | you created that earlier, up here at the top, and what
that does is it loads in the first frame of the slide show.
| | 04:31 | That action has already been written in here that is
executed when the styles.css file is successfully loaded.
| | 04:38 | If there's a problem in some manner in loading that styles.css file,
| | 04:43 | there's an else action that inserts some error
text into that loaded info text field itself.
| | 04:50 | So that is the functionality that you just
enabled and added to your frames.fla file.
| | 04:56 | There's a few changes that we need to make to this though.
| | 04:58 | Namely there is not action yet that tells Flash to load in the appropriate
variable file that has the descriptive information in it for each slide.
| | 05:08 | Now remember, when the viewer clicks on the
next slide button or the previous slide button,
| | 05:12 | it executes the load frame function that you've written up here at the top.
| | 05:16 | That load frame function that says go and
get this current slide number and load it in.
| | 05:22 | In this same function is where we wanna write the
action that not only loads the correct image in,
| | 05:28 | but also loads the correct descriptive text
in and places it in the correct location.
| | 05:34 | So in the load frame function, toward the top of your actions panel,
click after the action, the only action that resides within that function,
| | 05:42 | the underscore, level zero, dot myMCL, dot load clip action, click at
the end of that and press return or enter to create a new line break.
| | 05:51 | It's in here where you're going to write the action that tells
Flash to go get the descriptive text for that particular slide
| | 05:59 | and display it in the loaded info text field in the stage.
| | 06:03 | You're gonna do that by utilizing the myLV LoadVars object you've
already written quite a few chapters ago in the master.fla file.
| | 06:12 | If you remember, that myLV LoadVars object has already been scripted so
that it takes the loaded variables that you're going to tell it to load in
| | 06:22 | and it automatically puts them inside of
the loaded info text field on your stage.
| | 06:28 | So because that LoadVars object is in the master.fla file,
if you remember, just like the myMCL movie clip loader object,
| | 06:36 | you have to tell it that it resides in that master.swf file.
| | 06:40 | So you have to specify that it's on level zero.
| | 06:42 | So type in underscore level zero dot myLV dot load, open parenthesis,
now if you remember, earlier we looked into the frames directory.
| | 06:57 | And I'll show you again just to refresh your memory, if
I hide or minimize Flash and go into my site directory,
| | 07:04 | in there's another directory called frames, in
there, there are all my JPG frames for my slideshow.
| | 07:11 | They're all called frames zero, frames
one, frames two, frames three and so forth.
| | 07:15 | In that same directory there are text files that are named the same
except for the extension at the end, frames zero, frames one, frames two,
| | 07:23 | frames three dot txt and so forth, so it's from these
text files that we're gonna load the variables from.
| | 07:31 | Back inside of Flash, I need to specify that here inside of my load action.
| | 07:37 | After the open parenthesis, after load, type quote, frames, they're in
the same directory, forward slash frames, end quote, space plus space,
| | 07:50 | curFrameNum, and as you can see up to this point, it's all the same as the
action that loads the JPG image itself, because what we're loading in is
| | 08:00 | in the same folder, it starts with the same
name, frames, and it also has a number after it
| | 08:06 | and in this case we wanna make sure the numbers are exactly the same,
so if it's loading in frames0.jpg, it's also loading in frames0.txt,
| | 08:15 | so we're having it loading in that same number, but after curFrameNum type
space plus space quote, and in the action that loads in the frames image,
| | 08:27 | we're having it load in the file that ends with dot JPG, in this
case, we want our myLV LoadVars object to load in the variables file.
| | 08:37 | That variables file ends with dot TXT.
| | 08:40 | So after quote, type dot TXT, end quote.
| | 08:44 | Now because our LoadVars object handles what should
happen with the variables from the text file we're loading,
| | 08:50 | we don't have to specify where that should load in as we did with
the movie clip loader object, so in this case you're done here.
| | 08:57 | You can simply close that parenthesis by typing shift
zero and then ending that action by typing a semicolon.
| | 09:04 | So every time the viewer clicks on the next slide button or the
previous slide button, this load frames function is executed.
| | 09:11 | The first thing that happens is that it utilizes the myMCL movie clip
loader object in the master.fla file to load a frame from the slide show.
| | 09:21 | When this load frame function is first executed, it loads
the file called frames0.jpg and it places it on the stage.
| | 09:30 | Right after it does that, it then utilizes the myLV LoadVars object,
which is also in master.swf, to load in the variables from frames0.txt.
| | 09:42 | And again, each time the viewer clicks on the next slide or
the previous slide button, that curFrameNum variable is updated
| | 09:50 | with which slide number the viewer's supposed to be looking at..
| | 09:53 | Because we're utilizing that same variable in both
the action that loads the image as well as the action
| | 10:00 | that loads the variables, they'll both stay in sync.
| | 10:03 | Now in the actions panel, if you scroll down toward the bottom to
where you uncommented the action script that was provided in this FLA,
| | 10:10 | you'll notice that in the CSS styles object, when our styles.css
file is loaded correctly, one of the things that happens
| | 10:20 | if that's done is that it executes the load frame function.
| | 10:24 | So once the CSS information has been loaded then it loads the first
slide show image as well as the first descriptive slide show image,
| | 10:33 | in which case this load frames function that we have here
is repetitive with another one that we created earlier.
| | 10:39 | Scrolling up in your actions panel, if you
remember, you have this load frame function out here
| | 10:45 | in the open that's executed when this frames module first loads.
| | 10:50 | Now because we want that load frame function to be executed now, when
the styles information has been download and applied to the style sheet,
| | 10:59 | we don't need this load frame function
that's out in the open here any longer.
| | 11:04 | Because again, we only want this function to be executed after the
styles information has been downloaded and applied to the text field.
| | 11:12 | So go ahead and, at the end of the frame function,
delete that load frame function call, so that again,
| | 11:21 | it is only executed when the CSS styles
object says that it's okay to execute it.
| | 11:26 | And that's all the changes that you need to make to make sure
that that descriptive information about each slide is loaded.
| | 11:33 | Let's test this by saving this FLA file and
publishing an updated SWF by choosing file, publish.
| | 11:40 | Then I'm just gonna hide or minimize Flash, go into my site
directory on my desktop and double click on master.swf.
| | 11:50 | When my first slide show image loads in, I can see that my
descriptive information to the left of it also loads in.
| | 11:58 | When I click on the next slide button, I can see that that
information updates accordingly, both forward and backward.
| | 12:09 | So there you have some descriptive information that
has been added to each slide in your slide show.
| | 12:15 | Again the reason why that code to make that functionality
was provided for you was because it's just simply all review.
| | 12:22 | You've already done it before in the about us module.
| | 12:25 | It simply is a new text field dot style sheet object, you then
instruct that text field dot style sheet object to load in the styles
| | 12:34 | from that same styles.css file and once that has been loaded, you use
the on load event handler from that CSS style object to then both apply
| | 12:44 | that style sheet to the loaded info text field
and then execute the function load frame,
| | 12:50 | which then goes and loads the particular slide show file as
well as the descriptive text for that same slide show file.
| | 12:58 | Lastly, you just say if there was a problem loading
the styles.css file, display this error message.
| | 13:04 | So that's the only functionality that was provided for you for
this FLA because you already learned how to do it previously.
| | 13:11 | In the next exercise, you're gonna finish off the frames
module by writing a little bit more action script that displays
| | 13:18 | which slide number the viewer's currently looking at out of how
many slides there are total on that dynamic text field on the stage
| | 13:26 | in between the previous slide and the next slide show buttons.
| | Collapse this transcript |
| Adding the current slide counter| 00:00 | >> In the final exercise in this chapter, you're
going to learn how to have the current slide number
| | 00:07 | out of how many slides total appear here
between the previous and next slide buttons.
| | 00:13 | Again, in the sample site, you can see that in between
those two buttons it says frame style one of ten.
| | 00:19 | And then when the viewer clicks on the next button,
for example, it updates to say frame style two of ten.
| | 00:26 | Now some of the text stays the same, it's static, it says frame style,
that always is there, as well as the "of" in between the two numbers.
| | 00:35 | But the number that represents the slide
that the viewer's currently looking at,
| | 00:39 | as well as the number that represents
how many slides there are total, changes.
| | 00:43 | Because again, this number updates depending on the
number that is inside of that separate text file.
| | 00:50 | So if you or the client later goes and
makes adjustments to that total number,
| | 00:55 | that number here that appears here in the
text field, as well, will also update.
| | 00:59 | So that number, as well as the number that represents which slide the
viewer's looking at currently, are the two variables inside of this text.
| | 01:08 | So as you're writing the action to get
this text to be displayed inside of there,
| | 01:13 | you're going to be utilizing both static
strings of text as well as variable information.
| | 01:19 | Additionally the action that places this text within this
text field is going to be executed from various places.
| | 01:26 | Because of that, you're going to create a function that contains
the action that places this text within the field, again,
| | 01:33 | so that you can utilize that same action from multiple places.
| | 01:37 | Once you've gotten a better idea as to
what we're constructing in this chapter,
| | 01:40 | go ahead and close your browser window, if
you have it open, and return to Flash 8.
| | 01:46 | Inside of frames.fla, select the first key
frame in layer "A" and open up your actions panel.
| | 01:53 | You're going to write this function that tells that text field
on the stage what to display underneath your load frame function.
| | 02:01 | So in your actions panel, locate the function load frame, click
after the closed curly brace that ends that function and press return
| | 02:10 | or enter a few times to create some empty line breaks.
| | 02:13 | Then create a new function called slide counter by typing function,
space, slide counter, open parenthesis, closed parenthesis,
| | 02:25 | space open curly brace a couple of line breaks and a close curly brace.
| | 02:30 | Then click in the empty line break in between the open and close
curly braces and let's insert some text into that text field.
| | 02:37 | If you remember, the name of that text field is called frameNum.
| | 02:42 | You assigned it at the beginning of this chapter, to that text field.
| | 02:46 | So type frameNum, with a capital N in num, dot txt.
| | 02:52 | That means we're gonna put some text inside of that text field.
| | 02:56 | Then type space equals space, and now what
text are we gonna wanna insert in there?
| | 03:02 | If you remember, the text that we're inserting into that text
field is a combination of just static text, such as frame style,
| | 03:10 | as well as dynamic text, such as the variable
information that's keeping track
| | 03:14 | of how many slides there are total and which
slide the viewer's currently looking at.
| | 03:19 | So the first step is to type quote frame style space quote, so the first
text that's going to be inserted into that text field says frame style
| | 03:29 | and then a space, and then type space plus space and then
we want to have it to display the current frame number,
| | 03:38 | that same variable that we're keeping track of to allow us to define which
frame number the viewer's currently looking at, so type curFrameNum.
| | 03:49 | However, remember, we're keeping track of that
current frame number starting with the number zero.
| | 03:54 | It would be a little confusing to the viewer if we showed the viewer
that they were currently looking at frame zero of 10, for example.
| | 04:03 | That would kind of be a little confusing to them.
| | 04:05 | So to make it a little bit more understandable
for them, we're going to add one onto that number.
| | 04:12 | So even though they're looking at the first slide
of the slide show, which we're tracking as zero,
| | 04:17 | to make it so that they can more easily understand it, we're gonna
add one onto that so that it says you're looking at frame style one
| | 04:25 | of ten, so after curFrameNum type space plus space one.
| | 04:31 | Now so that Flash performs all of these catenations and additions in the
correct order, let's enclose curFrameNum plus one within parentheses.
| | 04:41 | When you encase expressions such as this within a set of parentheses,
| | 04:45 | that tells Flash to perform that first before
continuing on to the rest of the expression.
| | 04:51 | So click before curFrameNum and type an open parenthesis,
and then click after the one and type a closed parenthesis.
| | 04:59 | So when this action is first executed,
so far it's going to say frame style one.
| | 05:05 | Now remember there's some more text that we need
to insert after that, namely frame style one of 10.
| | 05:12 | So after the current frame number that's
being displayed, we wanna state the string of.
| | 05:18 | So after the closed parenthesis type space
plus space quote space of space end quote.
| | 05:28 | Again, we're typing spaces in there because we
want spaces in between the word "of" and the text
| | 05:34 | as well as in between "of" and the total slide number itself.
| | 05:38 | So after that quote, after of, type space plus space and
then we wanna insert here how many frames there are total.
| | 05:46 | As you've seen before, this is simply
entered as slide info LV dot total frames.
| | 05:57 | And then again, to end this action, simply type a semicolon.
| | 06:01 | So when this function is executed, it's going to insert some text
into the frame number text field and it's gonna say frame style,
| | 06:09 | and again when this is initially executed for that
first time it's going to say frame style one of ten.
| | 06:16 | Now if you just have this slide counter function get initially executed,
| | 06:21 | you run the risk of having this function be executed before this total
frame variable gets loaded from the slide info LV load vars object.
| | 06:32 | Remember earlier you wrote the slide info LV LoadVars object
and instructed it to load the variables from slideinfo.txt.
| | 06:42 | If you then, right after that, execute the slide counter function, which is
then supposed to display the variable that is loading from that text file,
| | 06:51 | you run the risk of telling it to display
before the variable has been fully downloaded.
| | 06:57 | In which case, if you tried that it would simply say frame
style one of undefined because it hasn't loaded it yet.
| | 07:05 | So what you need to do is slightly modify your slide
info LV LoadVars object to add an on load event handler
| | 07:13 | so that this slide counter function is only executed after it's
confirmed that the variables from that text file have been downloaded.
| | 07:22 | So that's what you're gonna add in now.
| | 07:24 | Scroll to the very top of your actions panel, click after that very top
most action which is the slide info LV LoadVars object creation action,
| | 07:34 | and then press enter or return to create a new line break underneath that.
| | 07:38 | As you've seen before, you're gonna write an on load event handler for
that specific LoadVars object by typing slide info LV dot on load.
| | 07:50 | Then type space equals space function space open parenthesis
success and then strict type that success to the Boolean data type
| | 08:03 | by typing colon Boolean close parenthesis space open
curly brace two line breaks and a closed curly brace.
| | 08:13 | Then click on an empty line break between the open and closed curly
braces of the onload function and type if space open parenthesis,
| | 08:22 | and again the space in between the if and the open parenthesis is optional,
| | 08:27 | after that open parenthesis type success closed parenthesis
open curly brace two line breaks and a close curly brace.
| | 08:37 | So when they slideinfo.txt file is instructed to download and the
variable and value pair from that text file is read in, if that download
| | 08:48 | and parsing of that variable data is successful,
what do you want to happen?
| | 08:53 | Well, if it's successful in downloading it, then you want
it to display this slide counter function so that it shows
| | 08:59 | which frame style the viewer is currently looking at as well as utilizing
that number inside of that variable, how many slides there are total.
| | 09:09 | So back in the if success, in between the open and close curly braces
for that if conditional statement, click in the empty line break
| | 09:17 | and then execute that function by typing slide counter,
which again is the name that you assigned that function,
| | 09:25 | open parenthesis close parenthesis semi-colon to end that action.
| | 09:30 | However, just as you've specified what should happen
if it successfully downloads that variable value pair,
| | 09:36 | you should also specify what should happen
if it's unsuccessful for whatever reason.
| | 09:41 | After the close curly brace that ends the if statement, click there, then
type else space open curly brace two line breaks and a close curly brace.
| | 09:53 | Then click in the empty line break, after the else curly brace
and type frameNum, which is the instance name for that text field
| | 10:04 | where that frame number information is being displayed at, dot
text, meaning we're gonna insert some text in that text field.
| | 10:11 | Space equals space quote and then simply type error, it's not a
big text field so you can't enter in a big error message there,
| | 10:19 | so we're just gonna type in error, end quote semicolon.
| | 10:23 | And there you have it.
| | 10:24 | So with the way things are currently constructed,
your slide info LV LoadVars object is created,
| | 10:32 | it's been instructed to download the variable
value pairs from slideinfo.txt,
| | 10:38 | if that's successful it's going to execute a function called slide counter.
| | 10:43 | The slide counter function says insert some text into that FrameNum
text field that says frame style, and again, when this first loads,
| | 10:52 | it's going to say frame style one of and then it's
gonna utilize the value of the total frames variable
| | 10:59 | in that text file that it's loaded to display, in this case, ten.
| | 11:03 | So it's gonna say frame style one of ten.
| | 11:06 | However, if there was a problem loading the
variable value pair from that text file,
| | 11:11 | it's simply gonna take the text error and
stick it inside of that frame num text field.
| | 11:18 | Now if you saved the changes you've made to frames.fla, publish
an updated SWF file, hide or minimize Flash for a moment,
| | 11:27 | and then double click on master.swf in your site
directory, you'll notice that when it first loads,
| | 11:34 | it displays frame style one of ten, which is awesome.
| | 11:38 | That's exactly what we want.
| | 11:39 | However, when you click on the next or previous
button, notice that even though the slide itself,
| | 11:45 | as well as the descriptive information updates, the text itself does not.
| | 11:50 | Even if I continue clicking on it, it never updates frame style.
| | 11:54 | It simply just always says frame style one of ten.
| | 11:57 | I can see why that is by closing my preview window, going back to flash
and if I scroll down in my actions panel to locate my next slide button
| | 12:07 | and previous slide button actions, I can see that each time
the viewer clicks on the next slide button, for example,
| | 12:13 | it executes the load frame function but it does not execute
the slide counter function which updates that text field.
| | 12:21 | So in my next slide button actions, click after where it says load
frame to execute that load frame function, press return or enter once
| | 12:31 | and then simply type slide counter open
parenthesis close parenthesis semicolon.
| | 12:38 | So what will happen is each time the viewer clicks on the
next slide button it's gonna execute the load frame function
| | 12:45 | and then execute the slide counter function.
| | 12:48 | This will not only load the slide in the slide show and display the
descriptive text for that slide, but also update that frame num text field
| | 12:56 | to display which frame the viewer's currently looking at.
| | 13:00 | Once you've typed out slide counter open parenthesis end
parenthesis semicolon, select that action and copy it then scroll
| | 13:09 | down to your previous slide button actions, click after the load frame
function call there, press return or enter to create another line break
| | 13:18 | and then paste that slide counter function call right after that.
| | 13:23 | So each time the viewer clicks on the next slide button or the previous
slide button it's going to execute both the load frame function
| | 13:30 | to show the correct frame and the descriptive text as well as the slide
counter function to update that bit of text in the frame numb text field
| | 13:38 | to show the viewer which frame they're currently looking at.
| | 13:41 | Now when we last tested our SWF file, I also notice that the
frame num text field wasn't displaying the text as I wanted it to.
| | 13:48 | So I'm gonna hide or minimize my actions panel for a moment,
click on that frame num dynamic text field on the sage,
| | 13:56 | and I can see that even though I specified to use the Vera Bold font,
because I'm on Windows, I neglected to click on the full bold option.
| | 14:04 | If you're on a Macintosh you don't need to
select that, but on Windows I need to make sure
| | 14:08 | that I select the full bold button if I'm applying my Vera Bold font.
| | 14:14 | Now that I've made all those changes, I'm gonna go ahead and save
my FLA, publish an updated SWF and then hide or minimize Flash
| | 14:24 | and then open up the master.swf file in my site directory.
| | 14:28 | When I do that, and I click on the next button, my text
now updates to say frame style two of ten, for example.
| | 14:36 | So again, as I continue to click on the
next slide show button, not only do my image
| | 14:41 | and the descriptive text update, but my frame num text does as well.
| | 14:46 | So it is now giving me correct updated information
about which slide the viewer is currently looking at,
| | 14:52 | and it does that when I both go forward and backward in the slide show.
| | 14:58 | So there you have it.
| | 14:59 | There you have the completed frames module that utilizes
quite a bit of action script to not only load the slides
| | 15:06 | in the slide show dynamically using the myMCL movie clip loader object
that's in the master.fla file, but it also loads, again, dynamically,
| | 15:15 | as well as styles, dynamically, some descriptive text about each
slide as well as which slide the viewer's currently looking at.
| | 15:22 | Now only that, but the slide show itself is intelligent in that as it gets
to the last frame in the slide show, it knows that it's on the last frame
| | 15:31 | so when the viewer clicks on it, it then goes back to the very beginning.
| | 15:35 | The same holds true, but in reverse, for
going backwards in the slide show as well.
| | 15:41 | So you've done quite a bit in the slide show.
| | 15:43 | You should be proud, obviously, of what you've done.
| | 15:45 | You've accomplished quite a bit here inside of the frame module.
| | 15:48 | Now, as you've seen thus far, you've done quite a lot of loading of
external information, both external images as well as external text.
| | 15:57 | In the next chapter, you're going to learn how to create a preloader
that shows the downloading or preloading progress of your images
| | 16:04 | or anything else that you use your myMCL
movie clip loader class to download.
| | 16:09 | So if a viewer comes to your website and they have a slow to moderate
internet connection, as they're waiting for your imagery to download,
| | 16:17 | or your SWF content, or whatever else you're using that movie clip
loader class to download, it will display a preloading progress bar
| | 16:24 | so they can see how that downloading progress is occurring.
| | 16:27 | You're gonna complete that in the next chapter.
| | 16:30 | For now, however go ahead and close your
preview window and return back to Flash.
| | Collapse this transcript |
|
|
8. Building a PreloaderPreviewing what you're building| 00:00 | >> In this chapter, you're going to learn how to build
and add a simple preloader to your LA Eyeworks site.
| | 00:08 | Now to give you a better idea of exactly what it is that you're going
to be constructing in this chapter, for those of you who have access
| | 00:15 | to the exercise files, open up the LA Eyeworks directory on your desktop
and in there you'll notice there's another directory called Competed Site.
| | 00:24 | If you open up the completed site directory, scroll until
you locate the master.fla file, and open that in Flash 8.
| | 00:33 | Then with that completed master.fla file open, choose control, text movie.
| | 00:39 | Make sure that you have your bandwidth profiler turned on by
choosing view, bandwidth profiler and give yourself some room
| | 00:46 | to view what's going on here at the top left of the bandwidth profiler.
| | 00:50 | I'm gonna do that by dragging the bottom portion of my preview
window around a little bit so that I can still see the navigation bar
| | 00:57 | at the top, but yet move it down as far as I can, like so.
| | 01:03 | Then choose view, download settings, 56k.
| | 01:08 | We're going to preview how this site is going to download on a 56k modem.
| | 01:14 | Once you've selected that, then choose simulate download to, again,
simulate how this website would be downloaded over a 56k modem.
| | 01:23 | As you can see, it's downloading the sharedlib.swf
file as we constructed earlier on in this title.
| | 01:29 | When it finishes downloading the shared lib file, it'll download
the splash, and again you can see that preloader appear there.
| | 01:35 | But then click on the frames option from the navigation bar at the top and
you can see the preloader that we're going to build in this chapter appear
| | 01:44 | as the viewer navigates through the slides in the
slide show which you just built in the last chapter.
| | 01:50 | Click on the next slide button and you'll see that preloader appear again.
| | 01:54 | We're going to build this preloader and hook it in to the myMCL
movie clip loader object that exists in your master.fla file.
| | 02:02 | So that each time the myMCL movie clip loader object is used
to load in any kind of content, be it SWF, JPG, PNG, or GIF,
| | 02:11 | it shows a preloader to show the downloading progress of that content.
| | 02:16 | In this case, because our slide show utilizes the myMCL movie
clip loader object, every time the viewer then uses that object,
| | 02:24 | in this case to load the slides in the slideshow,
it's going to show and then utilize that preloader.
| | 02:30 | So each time the viewer navigates through the slideshow that preloader
is going to appear and show the downloading progress of that image.
| | 02:38 | That's what you're going to build in this chapter.
| | 02:40 | Before you continue on to the next exercise, however,
make sure that you close your preview window,
| | 02:45 | and it may benefit you to also close the bandwidth profiler as
well, and then if you opened up the completed master.fla file,
| | 02:53 | go ahead and close that so you're just left with the
master.fla file for the site that you're currently constructing.
| | 03:00 | You're gonna start here in the master.fla file
that you've been working in, in the next exercise.
| | Collapse this transcript |
| Getting started| 00:01 | >> For those of you that do have access to the exercise
files, one thing I would like to show you before we continue
| | 00:07 | on much further is the completed preloader that I've provided for you.
| | 00:11 | Hide or minimize Flash for a moment and navigate in to your
site directory in the LA Eyeworks directory on your desktop.
| | 00:19 | In there, you'll notice there's an FLA file called preloader.fla.
| | 00:23 | Go ahead and open that FLA in Flash 8.
| | 00:28 | In there, you'll see a graphic of a pair of glasses. With
that graphic select, if you look in your Properties Inspector,
| | 00:35 | you'll notice that it's actually a movie clip called mcGlassesAnim.
| | 00:40 | Additionally, it has also been given an instance name of preloader.
| | 00:44 | If you double click on that movie clip symbol to open it up,
| | 00:47 | you'll notice that there's actually some shape
tweens going on inside of this movie clip symbol.
| | 00:52 | If you scroll your play head forward, you'll see the
animation that appears as the content is being downloaded.
| | 01:00 | If you'll scroll to your right in your timeline, you'll notice
that the animation ends in frame 100, and that's not an accident.
| | 01:08 | As our content is being downloaded, we're going to be using our
movie clip loader class to monitor the downloading progress.
| | 01:16 | More specifically, we're gonna be monitoring
that download progress in terms of percentage.
| | 01:21 | Zero being it hasn't been downloaded at all, 100
percent meaning that it's been completely downloaded.
| | 01:27 | We're then going to be telling our preloader
animation to move to the appropriate frame number
| | 01:32 | that matches the percent of the content that's been downloaded.
| | 01:36 | In other words, if our content is half way downloaded, we're
gonna be telling our preloader animation here to move to frame 50.
| | 01:43 | 50 being 50 percent.
| | 01:45 | When it's all the way downloaded, our
play head will move here to frame 100.
| | 01:50 | So essentially, we're just going to be using action script to find out
what percentage of the content has been downloaded up to that point
| | 01:58 | and then simply telling our play head inside the
preloader, therefore, which frame it should move to.
| | 02:04 | So as the content's being downloaded, this play head will be moving
forward, thereby showing this download, or progress bar animation.
| | 02:12 | For those of you that don't have access to the exercise files, inside
of Flash 8, create a new, blank FLA and save it as preloader.fla.
| | 02:21 | Save it into your site directory where the rest of your site
content is saved at up until this point, then on the stage,
| | 02:27 | create a movie clip symbol, give that movie clip symbol an instance name
of "preloader", and then inside that movie clip symbol, create an animation,
| | 02:37 | whichever kind of animations you'd like, that takes 100 frames.
| | 02:42 | At the beginning, in an actions layer, on the very
first key frame, add an action that is just simply stop,
| | 02:50 | so that this animation doesn't automatically start playing.
| | 02:53 | You only want the play head to start moving when the content is downloading
and you tell that play head with action script to actually move.
| | 03:01 | But if you don't add that stop action
there, it'll start playing automatically.
| | 03:05 | So that's all you need, essentially, is just a 100 frame long animation,
it can be whatever you want it to be, inside of a movie clip symbol,
| | 03:12 | and on the stage that movie clip symbol has an instance name of preloader.
| | 03:16 | Now what we need to do, for those of you that do have access to
the exercise files, or for those of you that don't have access
| | 03:22 | to the exercise files, and have built your preloader.fla file
yourself, is we need to publish a SWF file from this FLA.
| | 03:30 | So choose file, publish to publish a SWF.
| | 03:35 | Then go ahead and close this FLA file, in this case I'm not gonna
save any changes since I have not made any changes to this FLA,
| | 03:42 | and then make sure that you're back in master.fla that's in your
site directory in the LA Eyeworks directory on your desktop.
| | 03:50 | There, select the very first key frame in
the "A" layer and open up your actions panel.
| | 03:57 | Earlier, this is where you wrote your myMCL movie clip loader object,
| | 04:01 | and it's in here where you're gonna write the additional
action script that's gonna make that preloader actually work.
| | 04:07 | You're gonna start doing that in the next exercise.
| | Collapse this transcript |
| Working with onLoadProgress| 00:01 | >> As you've seen before some action script objects such as the LoadVars
object or the movie clip loader object have event handlers that allow you
| | 00:11 | to listen to what that object is broadcasting and
then have other things occur based on those listeners.
| | 00:17 | For example earlier you created the LoadVars
object and you utilized the on load event handler
| | 00:24 | to do certain things when that content has been completely downloaded.
| | 00:29 | What we're going to need to use another event handler for the movie
clip loader class that's going to allow us to build the preloader.
| | 00:37 | When you're working and building a preloader and you want to show
the downloading progress of content you need to construct a way
| | 00:43 | that enables you to loop through a series of actions. The reason why is
| | 00:47 | because essentially what your downloading progress preloader is doing
is continually asking how much of the content has been downloaded.
| | 00:55 | It's almost like the annoying kid in the back
seat on a long trip "Are we there yet Dad?
| | 00:59 | Are we there yet?"
| | 01:00 | Your preloader is doing exactly the same thing, over and over again you
want it to continually ask, how much of the content has been downloaded?
| | 01:07 | And each time it asks it gets back new and updated information, it can
then use that information to then show and update the progress bar so that
| | 01:17 | as the content is being downloaded the progress bar is also updated to
show an updated version of the downloading progress of your content.
| | 01:26 | Now in years past when you would want to construct a preloader inside
of Flash you would have to come up with a way to loop through a series
| | 01:33 | of actions, one of the old school methods of doing that would
be to create a couple of key frames inside your time line.
| | 01:39 | On one key frame you would have your action script that would ask how
much of the content has been downloaded then the play head would move
| | 01:46 | to the next key frame where you would have an action that said go
back to the last key frame and replay that again so your time line
| | 01:54 | and your play head more specifically would be constantly moving
back and forth between two frames and every time it would hit
| | 02:00 | that first key frame it would say how
much of the content has been downloaded.
| | 02:05 | Now as Flash or action script more specifically got more advanced
there came to be better methods of looping through a series of actions.
| | 02:14 | There are a few other ways of looping through those actions, one is called
the one inter-frame clip event which loops through a series of actions
| | 02:22 | at the same rate that you'd have the frame rate of your movie set at,
the frame rate of our movie it set at twenty one frames per second,
| | 02:29 | an on inter-frame clip event will perform a
series of actions twenty-one times per second.
| | 02:36 | The advantage of an on inter-frame clip event is
that it's fairly easy for you to set up and utilize.
| | 02:43 | The disadvantage of it is that it doesn't give you any
control over how often it loops through a series of actions.
| | 02:50 | Another way of creating a way to loop through a series
of actions is something called a set interval function.
| | 02:56 | Set interval allows you to also again loop through a series of actions, the
disadvantage of it is that it takes a little bit extra work for you to set
| | 03:05 | up and create. It's also a little bit extra work for you
to manage, you have to make sure you clear it correctly
| | 03:11 | and there's a few other issues involved with working with it. The
advantage of working with the set interval function on the other hand is
| | 03:17 | that it gives you precise control over how
often a series of actions are looped through.
| | 03:23 | You can tell it to loop through actions every millisecond,
| | 03:26 | you can tell it to loop through actions every ten
minutes, you have precise control over how it works.
| | 03:32 | Now before the movie clip loader class came along and Flash MX
2004 and action script 2.0 you would be forced to use either the
| | 03:40 | on inter-frame event handler or set interval to be able to loop
through those series of actions to enable you to create your preloader.
| | 03:48 | However now that the movie clip loader class exists there's an event
handler in the movie clip loader class called on load progress.
| | 03:57 | On load progress is an event handler that gets triggered every
time your movie clip loader downloads a little bit of data,
| | 04:05 | so as the movie clip loader object in this case your movie clip loader
object is called myMCL every time that object is downloading content
| | 04:15 | from something it's continually re-triggering the on load progress event
handler. What that means is essentially it's a perfect place for you
| | 04:23 | to write your preloader actions script because the event handler
function and all the actions that you put within it are going
| | 04:30 | to constantly be repeated every time your
movie clip loader class is downloading data.
| | 04:34 | So in the first part of this exercise that is exactly what you're
going to do, you are going to create on load progress event handler.
| | 04:41 | Before we continue with that though make sure that you're still in master.fla
that you have the first key frame in your layer A selected
| | 04:48 | and that you have your actions panel open. At the top of the actions
panel is where you have you actions movie clip loader script, we're going
| | 04:56 | to add this within the MCL and end MCL comment lines, in there
click after the action my MCL dot add listener and press enter
| | 05:06 | or return a few times to create a couple of line breaks.
| | 05:10 | Now when you're dealing with event handlers for the movie
clip loader class you don't assign those event handlers
| | 05:16 | to the movie clip loader class object itself, in other words
unlike what you've seen with the LoadVars class when you're dealing
| | 05:23 | with adding event handler such as the on load event handler
which is assigned to your LoadVars object myLV you do not do
| | 05:31 | that with the movie clip loader class, instead they get
assigned to the listener object that you've assigned
| | 05:37 | to the movie clip loader class, in this case that's called my listener.
| | 05:42 | So in the new empty break you've created type My Listener dot
On Load Progress, again this is attached to a function just
| | 05:54 | like the event handlers are for the LoadVars object for example so type
space equals space, function, open parentheses, end parentheses, space,
| | 06:06 | open curly brace, a couple of line breaks, and close curly brace.
| | 06:10 | Now again the fantastic thing about on load progress event handler is that
any actions you place within this function will get automatically executed
| | 06:19 | over and over again as the movie clip object loader is being used to
download data every time just a little bit of data is downloading it's going
| | 06:27 | to execute this on load progress event handler again, so
in essence it loops through those actions over and over.
| | 06:34 | Now as the movie clip loader object myMCL is used to go and get
and download content it's going to be broadcasting information
| | 06:43 | to the listener object, now the listener object which we've assigned our
on load progress event handler to is going to be receiving that content.
| | 06:52 | In terms of the on load progress event handler it's going
to be receiving three bits of information that we're going
| | 06:58 | to want to pick up on when we're creating our preloader.
| | 07:02 | The first thing which isn't really important for
how we're constructing this particular preloader is
| | 07:06 | which content its downloading, what is it getting?
| | 07:10 | Is it getting SWF file?
| | 07:11 | What's the name of that SWF file?
| | 07:13 | And so forth, the target movie clip in other words.
| | 07:16 | The second bit of information that it's going to be receiving that has passed
through the movie clip loader object is how many bytes has been loaded?
| | 07:24 | That's a parameter that we're going to be entering
to the on load progress function called loaded bytes.
| | 07:30 | Another one, which again is a necessary piece of information that's being
received from the movie clip loader class is how many bytes there are total
| | 07:38 | for the content that it's loading. The loaded bytes and the total bytes
are two necessary pieces of information to create your preloader.
| | 07:47 | You need to know how much of the content has been downloaded and how much
content is there total to be able to build anything like a preloader.
| | 07:55 | Luckily all that content and data is being passed from myMCL
Movie clip loader object to our listener then broadcast it to our
| | 08:03 | on load progress event handler, what this means is again because
its being passed as perimeters we need to specify here in the
| | 08:11 | on load progress function in between the open and closed parentheses.
| | 08:15 | So after My Listener dot on load progress function open parentheses,
click between the open and closed parentheses and lets enter
| | 08:24 | in those function perimeters, type Target, under score, MC, which as I
mentioned we didn't need but we still have to specify here regardless
| | 08:34 | and then strict type that to the movie
clip data type because again its going
| | 08:38 | to be receiving the instance name of a movie
clip that content is being loaded into.
| | 08:43 | Type colon, movie clip, then type comma, space,
loaded, bytes, all one word with a capital B in bytes
| | 08:54 | and that perimeter is going to be a number so type colon number.
| | 09:00 | Then type comma, space, total, bytes,
all one word with a capital B in bytes
| | 09:06 | and that is also a number so strict type
it to the number data type as well.
| | 09:10 | Now that we've specified those perimeters in the on load progress event
handlers for our movie clip loader object we can utilize those perimeters
| | 09:19 | which again are essentially just like variables in our
action script within the on load progress function.
| | 09:24 | So within the on load progress function here, whenever we
want to find out how many bytes have been downloaded so far,
| | 09:32 | we can simply just type in loaded bytes,
the same holds true for total bytes.
| | 09:37 | O after the open curly brace, after the on load progress
function, but before the close curly brace to end that function,
| | 09:44 | click in the empty line break that you created and let's write an action
that utilizes both the loaded bytes number and the total bytes number
| | 09:52 | to find out what percentage of the content
has been downloaded up to this point.
| | 09:57 | We're gonna also store that number inside
a variable so that we can use it later.
| | 10:02 | Type var, space, preloadPercent, all one word with a
capital P in Percent, this is gonna be a number obviously,
| | 10:12 | so let's strict type it to the number data type, space,
equals, space and then to find out the percentage,
| | 10:19 | what we do is we divide how many bytes have been downloaded
up to that point by how many bytes there are total
| | 10:26 | and then we take that number and multiply it by 100.
| | 10:30 | That's gonna give us the percentage of the
content that's been downloaded up to that point.
| | 10:34 | So type loaded bytes, forward slash for divide, total bytes,
space, asterisks, space, 100, semicolon to end the action.
| | 10:50 | So Flash is gonna take the loaded bytes up to that point, divide them
by how many bytes there are total, and then multiply that by 100.
| | 10:58 | Now we're gonna be utilizing this number here to be able to
tell our preloader exactly which frame it's supposed to go to.
| | 11:05 | Remember, our preloader goes from frame one to frame 100, and we
wanna be able to tell that preloader which frame it should go to.
| | 11:13 | Well, when Flash is executing this calculation here and finding
out the loaded bytes divided by total bytes multiplied by 100,
| | 11:21 | it can come up with an uneven number, for example 10.3542.
| | 11:27 | Remember, we're utilizing that number to tell our
preloader animation which frame it should move to.
| | 11:32 | We have no frame called 10.3542, so what we wanna do is we
wanna tell Flash to round out that number to an even number.
| | 11:41 | Before loaded bytes, click there and type Math with a capital M,
dot round, then type an open parenthesis, click after total bytes,
| | 11:53 | but before the asterisks, and then type a closed parenthesis.
| | 11:57 | What Math.round does, is it takes whatever's inside of the open and close
parenthesis, and once it has that number it rounds out into an even number,
| | 12:06 | so I it came up with 10.3542, it would round it to be 10.
| | 12:11 | Then it's going to take that even number and multiply it by 100.
| | 12:15 | So now, thanks to Math.round, we're gonna end up with an
even number here inside of our pre-load percent variable.
| | 12:23 | Now that we know the percentage of the content
that's been downloaded up to that point,
| | 12:27 | we can then tell our preloader to move to the appropriate frame.
| | 12:31 | However, you might be saying to yourself, well where is the preloader?
| | 12:35 | When we looked at the FLA, but where is it?
| | 12:38 | How do I tell it what to do?
| | 12:39 | Can I say preloader.swf go to such and such frame?
| | 12:42 | Well we haven't yet loaded the preloader.swf file.
| | 12:46 | In just a little bit, we're going to take the
preloader.swf file and load it into a level.
| | 12:52 | We're going to actually load it into level 50.
| | 12:55 | Why level 50?
| | 12:56 | We're going to have it load above everything else.
| | 12:58 | That way, all the rest of our content that makes up
our LA Eyeworks website is going to load beneath it,
| | 13:05 | that way our preloader will always be visible whenever
we need it, because it's above everything else.
| | 13:11 | So even though you haven't yet written the action to load the preloader.swf
into level 50, you're going to refer to it as being in level 50 right now.
| | 13:19 | And then in just a minute we'll go and add that
action script to load preloader into level 50.
| | 13:25 | Click at the end of the action that you just
wrote, after the asterisks, 100, semicolon.
| | 13:30 | Press return, or enter, to create a new line
break and then type underscore, level, 50.
| | 13:36 | That's going to target our preloader.
| | 13:38 | If you remember, the preloader movie clip inside of there that contains
the animation that makes up our preloader is in a movie clip symbol
| | 13:46 | with the instance name of preloader, so type dot, preloader.
| | 13:51 | Then we want the play head of that movie clip to go to
and stop on a certain frame, so we say dot gotoAndStop,
| | 14:00 | all one word with a capital A in "And" and a capital S in "Stop".
| | 14:05 | Well then, where do we want the play head in the
preloader movie clip symbol to go to and stop at?
| | 14:11 | Well, whatever this preload percent number is.
| | 14:14 | If it's downloaded 25 percent of the content,
then move the preloader play head to frame 25.
| | 14:20 | So after gotoAndStop, type open parenthesis, preloadPercent,
making sure you have the spelling and capitalization correct,
| | 14:29 | and then type a close parenthesis and a semicolon to end that action.
| | 14:34 | Now again, keep in mind that all the actions within the onload progress
function, which you have two actions so far, are going to be repeated
| | 14:41 | and performed over and over again as the movie
clip loader object is downloading content.
| | 14:47 | So each time you use the movie clip loader object to
download content, such as in the frames module slide show,
| | 14:53 | it is going to be constantly re-executing the actions in
here until the content has been completely downloaded,
| | 14:59 | in which case it won't perform the actions in here any more.
| | 15:03 | In the next exercise, we're going to load our preloader into level 50 and
we're also going to write a few more actions that tells that preloader
| | 15:11 | when it's okay to be shown as it's downloading content, and
when it should hide itself after the content's been downloaded.
| | 15:18 | You don't want the preloader to just stay there
on the stage, visible, you want it to hide itself.
| | 15:23 | You're gonna do that as well as load the
preloader in, in the next exercise.
| | 15:27 | Of course, before you continue, to make sure that your house and computer
doesn't get struck by a lightening bolt and you lose all your information,
| | 15:34 | make sure that you save the changes to your FLA file.
| | Collapse this transcript |
| Showing and hiding the preloader| 00:00 | >> Now that you've written the action script that actually tells the
preloader animation which frame to go to and it gets that number based
| | 00:08 | on the percentage of the content that's been downloaded up
to that point, thanks to the on load progress event handler,
| | 00:16 | you should write the action script to also
load the preloader into the correct level.
| | 00:21 | We're going to do that here in master.fla in the very first key frame,
which is where you've been writing your movie clip loader content.
| | 00:29 | Inside of the first key frame in layer "A", scroll down in your actions
panel until you see the comment 'trigger the MCL to load these assets.'
| | 00:39 | Underneath that you should already have an
action that loads trigger.swf in to level five.
| | 00:44 | At the very beginning here of master.fla, we also
wanna load in our preloader.swf file as well,
| | 00:51 | so that we can utilize that preloader and
display it throughout the rest of our movies.
| | 00:56 | So click after the myMCL dot load clip trigger dot SWF
action, press return or enter once to create a new line break,
| | 01:04 | and then type myMCL dot load clip open parenthesis
quote preloader dot SWF end quote comma space 50,
| | 01:17 | as in the number of the level that we wanna load it in to.
| | 01:20 | Then type a closed parenthesis and a semicolon to end that action.
| | 01:25 | So now preloader.swf is loading into level 50.
| | 01:28 | If you'd like, you can test what you've done so far by saving the
changes that you've done to master.fla and choosing control, test movie.
| | 01:38 | When you do that it might also be beneficial to turn
on the bandwidth profiler and again, under view,
| | 01:45 | make sure that your download settings are still set to 56k and then giving
your preview window a little bit more room, especially the top left portion
| | 01:54 | of the bandwidth profiler and then choosing view, simulate download.
| | 02:01 | You see the sharedlib.swf file download first.
| | 02:04 | The reason why, by the way, you don't see the preloader
actually functioning as the sharedlib.swf file is downloading,
| | 02:11 | is because it's not using the movie clip loader class
that we created to download the shared lib file.
| | 02:16 | When the frame module appears, if you click on the next slide
button, you should see the preloader actually animate across,
| | 02:23 | and in this case, I'm not seeing that same effect happen.
| | 02:26 | So I'm gonna close the preview window, go back to master.fla, in the
first key frame of layer A and take a look again at my action script.
| | 02:35 | And looking really quickly at my action
script, I can see what I left out is
| | 02:38 | in the action var preload percent number math dot round loaded bytes
divided by total bytes multiplied by 100 is that when Flash is going
| | 02:48 | to perform this math here, it's actually treating these as separate values.
| | 02:52 | So what I want to do to ensure that Flash treats all this content as one
number, that it's then inserting into the preloader percent variable,
| | 03:00 | is enclose all of this also in another set of parentheses.
| | 03:05 | So after math dot round and before that other parenthesis click
there and type another open parenthesis and then after 100,
| | 03:15 | but before the semicolon, click there and type a close parenthesis.
| | 03:18 | What was happening before was that Flash was taking a
calculation that wasn't quite finished and putting it inside
| | 03:25 | of the preloader percent variable, then when I was
trying to tell my preloader to then move to that number,
| | 03:31 | because the number hadn't been fully calculated
yet, it couldn't do anything.
| | 03:35 | By enclosing this entire calculation in it's own set of parentheses,
what this essentially tells Flash is to take the loaded bytes divided
| | 03:44 | by the total bytes, do that calculation first, then once it has
that number multiply that by 100 and once it's all done that,
| | 03:52 | round that out and then make sure that
that's in the preload percent variable.
| | 03:57 | Now if you save the changes to your FLA file and then test
your movie, when you then choose view, simulate download
| | 04:07 | and wait for your sharedlib.swf file to preload, when the frames slide
show image loads, you can see it actually perform that preloader animation.
| | 04:18 | So if I click on the next slide in the slide show,
you'll see that preload animation perform again.
| | 04:23 | Now of course the problem is, is that the preloader stay visible on top
of the rest of my content, again, because it's loaded into level 50,
| | 04:31 | even after its finished showing the preloading
progress of that downloading content.
| | 04:37 | To remedy that, what' I'm going to do is utilize another event
handler to turn off the visibility of that preloader once the content
| | 04:45 | that has been downloaded using that movie clip
loader object has been completely downloaded.
| | 04:51 | To do that, close your preview window and then return
back to the first key frame in the A layer, in master.fla.
| | 04:59 | Locate the closed curly brace that ends the onload progress
function and click after that closed curly brace, then press return
| | 05:07 | or enter a few times to create a couple of empty line breaks.
| | 05:10 | Then type my listener dot onload complete.
| | 05:17 | Onload complete is another event handler that
is associated with the movie clip loader class.
| | 05:22 | This event handler is executed when the content that has been downloaded
| | 05:27 | with the movie clip loader class has been completely
downloaded, as its name implies, onload complete.
| | 05:33 | Again, just like onload progress, I need to assign it to a function.
| | 05:36 | So type space equals space function, and then I also need to specify the
parameters that are being passed to the onload complete event handler
| | 05:46 | by typing open parenthesis target underscore MC colon, and since the
target underscore MC parameter is being passed the name of a movie clip,
| | 05:58 | I'm going to assign it to the movie clip
data type by typing movie clip, like so,
| | 06:03 | and then type close parenthesis space open curly
brace two line breaks and then a close curly brace.
| | 06:11 | Then in between the open and close curly braces for the onload
complete function, I'm going to specify what I want to happen
| | 06:18 | when the movie clip loader content has been completely downloaded.
| | 06:22 | Well, once the content has been completely
downloaded, what do I want the preloader to do?
| | 06:28 | Well, I want it to hide itself.
| | 06:29 | I want it to go away so that the viewer doesn't see it there,
sitting on top of the rest of the content on the stage.
| | 06:35 | To do that simply type underscore level 50 dot underscore visible,
which is the property of a symbol or in this case of a level,
| | 06:47 | space equals space false semicolon to end that action.
| | 06:51 | By setting the visible property of content
to false, that makes it invisible.
| | 06:56 | So the actions that you've just written essentially tell our
preloader to hide itself when the content that is being downloaded
| | 07:03 | with the move clip loader object has been completely downloaded.
| | 07:06 | Well now that you've told it to hide itself, you also
need to tell the preloader when it should show itself.
| | 07:13 | Currently, the way it's set up, is that it would be visible the first time
it's shown, but then after the content has been completely downloaded,
| | 07:19 | it would hide itself and it would never show itself again.
| | 07:23 | Just like you told the preloader when to hide
itself, you also need to tell it when to show itself.
| | 07:27 | So after the open curly brace that beings the onload
progress function click after that open curly brace
| | 07:35 | and press return or enter to create a new line break.
| | 07:38 | It's within the onload progress function that you're going to
write the action that tells that preloader to show itself so that
| | 07:45 | as content is being downloaded it tells
that preloader to make itself visible.
| | 07:50 | So now type underscore level 50 dot underscore
visible space equals space true semicolon.
| | 08:01 | So now if you save the changes you've made to this FLA file, and then test
your movie, and then again, I'm gonna give my preview window a little bit
| | 08:09 | of extra room so I can see what's going on in the top left portion of the
bandwidth profiler, like so, make sure under view, download, settings,
| | 08:19 | that I still have my 56k modem selected, and then choose simulate
download and wait for my sharedlib.swf to be completely downloaded.
| | 08:27 | Notice how I don't see my preloader graphic appear at all.
| | 08:31 | Then once sharedlib.swf has been completely downloaded, it's gonna
show the downloading progress of that first slide in the slide show,
| | 08:38 | and then once it's finished downloading that first slide in the slide show,
and the movie clip loader is no longer in use, it hides that preloader.
| | 08:46 | Then when I click on the next button to load the next slide in
the slide show, it activates the movie clip loader object again,
| | 08:52 | which says hey preloader, show yourself and start
showing the downloading progress of the content, like so.
| | 08:59 | And then once that content's been completely
downloaded, then it hides the preloader again.
| | 09:05 | So there you have a fully functional and working preloader.
| | 09:09 | In the next few exercises, which are completely optional, I'm gonna be
showing how to add a little bit of extra information to your preloader
| | 09:16 | so instead of just seeing a progress bar, there's gonna be some
information that appears both above and beneath the preloader
| | 09:23 | to give the viewer a little bit of additional feedback as to how much
content is being downloaded and how much longer they have to wait.
| | 09:30 | Before you continue on, however, feel free to close your preview window.
| | Collapse this transcript |
| Adding more information to the preloader (optional)| 00:01 | >> Now that you have learned how to
create a preloader and add it to your project,
| | 00:04 | let's take a look now at how to add a little bit extra information to your
preloader so that as the viewer is navigating through your site and seeing
| | 00:12 | your preloader, they are getting a little bit more detailed
information as to how the content that they are downloading is proceeding.
| | 00:20 | To do that, we first need to go back and open
the preloader.fla file, so minimize Flash,
| | 00:26 | go back into your site folder and double click on the preloader.fla file.
| | 00:31 | Now we are going to have this extra bit of information
be displayed in two text fields so we are going to need
| | 00:38 | to create two text fields, one on top
of the preloader graphic and one below.
| | 00:43 | The text field at the top is going to display what percentage
of the downloading content has been downloaded up to that point
| | 00:50 | and the text field underneath it is going to display
basically the same thing, but in terms of kilobytes.
| | 00:56 | It is going to say so many kilobytes have been downloaded out of so
many kilobytes total, so again, the first step is to create a couple
| | 01:04 | of text fields to display that information, so inside
your preloader.fla file, first select your Text tool
| | 01:12 | and then in your properties inspector you need to
specify how you want that text to be displayed.
| | 01:18 | Make sure that the text type is set to dynamic text and then you need
to choose a font face, in this case because we want the preloader to be
| | 01:26 | as small as possible in terms of file size let's just use a
device font so that we are not embedding anymore font information
| | 01:34 | into the preloader SWF file, so from the font pull down menu click
and choose underscore Sans then go ahead and choose a text color
| | 01:43 | of something just straightforward like black, on this
case, I want to make sure that I don't have any full bold
| | 01:48 | or full italic selected, so I am going to make sure that's unchecked.
| | 01:51 | I am going to also make sure that the line type is set to single
line and not multi-line, this is just going to be one line of text.
| | 02:01 | Then above my preloader graphic, I am going to click to create
a dynamic text field, once I have created that text field,
| | 02:07 | I am going to de-select it by either hitting the Escape key
on my keyboard or selecting another tool in my Tool box.
| | 02:14 | Now that that dynamic text field is still selected, down in my Properties
Inspector, I can see that it has set itself automatically to input text.
| | 02:23 | I want to make sure after I have created that text field that it
is set to the settings that I want, in this case, dynamic text.
| | 02:31 | I also don't need that dynamic text field to be selectable
and I don't need it to be rendered as HTML either.
| | 02:37 | I am also going to change the font size to be something a little
smaller, say 9 point, and I am going to just make sure that the rest
| | 02:45 | of the settings are where I want them to be and they are in this case.
| | 02:49 | The other thing I need to do is give it an instance name.
| | 02:52 | If I am going to tell that particular text field to be populated with
text, it needs a name so that I can target it with my action script,
| | 03:00 | so again with that text field still selected, in the Properties Inspector
I am going to click in the instance name field and give it an instance name
| | 03:08 | of 'Preloadinfo1' and then I am just going to
press Tab or Enter to have it accept that name.
| | 03:17 | Now I want to create another text field just like it, but down below
my preloader graphic so again with my Text tool still selected,
| | 03:24 | I am going to click down here toward the bottom, then I am
going to press Escape to get out of that text editing mode.
| | 03:31 | And then go down to my Properties Inspector and verify my options, they
should still be set to what I set up last time for the previous text field,
| | 03:39 | the only thing I need to modify in this
case is to give it a new instance name.
| | 03:44 | So again, with that new text field still selected, click down
here in the instance name field in the Properties Inspector
| | 03:51 | and give it an instance name of 'Preloadinfo2', so now I have two text
fields that are going to display information about the preload in progress.
| | 04:03 | I want to make sure that they are aligned properly so that
they look good, so to do that select your Selection tool,
| | 04:10 | select both of those dynamic text fields, and open up your align panel.
| | 04:15 | The keyboard shortcut to do that on Windows
is Control "K" or Command "K" on the Macintosh.
| | 04:22 | In the align panel, I want to make sure that those two
text fields are aligned horizontally with each other,
| | 04:28 | so first making sure that the two stage
button is not depressed I am going to click
| | 04:33 | on the align horizontal center button to align those both with each other.
| | 04:38 | Then I want to make sure also that those two text fields
are aligned horizontally in the center of the stage,
| | 04:44 | so this time I am going to select the two stage button and then again click
| | 04:49 | on the align horizontal center button to
align those both in the center of the stage.
| | 04:54 | Vertically, they look like they are positioned pretty well so I am going to
leave them where they are currently and I am going to close my align panel
| | 05:01 | by again pressing Control "K" or Command "K" on the Macintosh.
| | 05:05 | Now I am not exactly sure how wide the text that is going
to be displayed in those text fields is going to be.
| | 05:12 | I am not exactly sure because if the information that is
going to be inserted into those text fields dynamically,
| | 05:18 | how much horizontal space those text fields
are going to need to display that information.
| | 05:24 | So what I am going to do, as you have seen
before, is that a little bit of action script
| | 05:28 | that dynamically sizes those text fields horizontally
to fit the amount of space that is needed.
| | 05:35 | To do that, go ahead and create a new layer inside of your preloader.fla
rename that new layer to be titled, as you have seen before again,
| | 05:44 | A for Actions and then select the first key frame in
that actions layer and open up your actions panel.
| | 05:52 | Then click inside of the script pane within the actions
panel and click in the insert a target path button.
| | 06:00 | You should see the two text fields that you
have just created Preloadinfo1 and Preloadinfo2.
| | 06:05 | Go ahead and select Preloadinfo1 and it should automatically assign
the path this dot preloadinfo1 for you up here in this field.
| | 06:14 | If you see that, just go ahead and click Ok and it will automatically
insert the path to that text field and the name inside of your script pane.
| | 06:22 | Now what we wanted to do is have that text field auto sized
to automatically expand to fit whatever is inside of it,
| | 06:30 | but have the content be aligned in the center of that text
field so that both the left hand side of the text field
| | 06:36 | and the right hand side dynamically resize out or in as needed.
| | 06:41 | To do that, just type dot auto size space equals space
quote center, end quote semicolon to end that action.
| | 06:52 | You want to do the exact same thing, but for the second text field
Preloadinfo2, an easy way of course to do that would just be to select
| | 07:00 | that first action right click or control click on it and choose copy, click
at the end of that action, press return or enter to create a new line break
| | 07:10 | and then right click or control click
on that new line break and choose paste.
| | 07:15 | Then all you need to do is change that Preloadinfo1 to Preloadinfo2,
so there you have two text fields inside of the preloader
| | 07:22 | that are automatically set up to receive some dynamic information.
| | 07:26 | As you are going to see in just a minute, the text that is
going to be inserted in there is going to show more information
| | 07:32 | about the downloading progress of whatever is downloading at that point.
| | 07:35 | First, you need to make sure that you save the changes that you have made
to the preloader.fla and then publish a new SWF file, so choose file,
| | 07:44 | publish, then you can go ahead and close the preloader.fla, you won't be
needing it again in this movie and then go back to the master.fla file.
| | 07:54 | Inside the master.fla file is where the action script is written
that controls that preloader, so inside of master.fla make sure
| | 08:03 | that you have the first key frame in the actions layer
selected and that you have your actions panel open.
| | 08:10 | Toward the top of your actions panel, you should
see the mylistener dot on load progress function.
| | 08:16 | It is here that it is actually showing as the content is being downloaded
the preloader work is showing that animation that preloader animation occur
| | 08:26 | and it is within this on load progress function
that you are going to write the code that is going
| | 08:31 | to show inside those text fields a bit more
information about the downloading progress.
| | 08:37 | Once you have found your on load progress
function, in there you will see a line of code
| | 08:42 | that says underscored level 50 dot preloader
dot go to and stop preloader percent.
| | 08:48 | Click at the end of that action and then press
return or enter once to create a new line.
| | 08:53 | Now the first thing I am going to do is to insert a little bit of text into
that topmost text field that shows what percent has been downloaded so far.
| | 09:04 | Again, you are already tracking that number, that percent.
| | 09:07 | As you can see, there is a variable that you
created earlier that says var preloader percent
| | 09:12 | and then it does a little bit of calculations to arrive at that percent.
| | 09:16 | So all you are going to be doing is reusing that variable
and taking the text that is being stored in that variable
| | 09:23 | and inserting it into a text field with a little string.
| | 09:26 | So to do that type underscore level 50, which again is where the
preloader is being loaded into which is also where our text fields are,
| | 09:36 | dot preloadinfo1, which is the instance name of that topmost text
field inside of that preloader, then type dot text to insert some text
| | 09:47 | in there space equals space preload percent, preload percent is of
course that variable that is storing what percent of the content
| | 09:59 | that has been downloaded up to that point and then
after that you want to add a little bit of string,
| | 10:05 | so instead of the viewer just seeing a number inside that
text field they will see a number as well as percent loaded
| | 10:13 | so they have a better idea of what that number is supposed to represent.
| | 10:16 | So after preload percent, type space plus space quote space percent space
loaded and then type in end quote and a semicolon to end that action.
| | 10:32 | So what is being inserted into that topmost text field is a little bit
of text and that text that is being inserted in there is the percent
| | 10:40 | of the movie that has been downloaded up to that point and then
after that is a little bit of text that says percent loaded.
| | 10:47 | Now in the bottom most text field you are going to display the raw numbers,
you are going to show how many kilobytes have been downloaded up to
| | 10:54 | that point and how many kilobytes there are total, so if the viewer
wants even more detailed information about what has been downloaded
| | 11:02 | and how much there is total, they can view
it just by looking at that text field.
| | 11:07 | So after that action you just created, press return or enter to create a
new line break and then again type underscore level 50 dot preloadinfo2,
| | 11:18 | which is that bottom most text field in the preloader,
dot text space equals space and then now you want
| | 11:27 | to display how many kilobytes have been downloaded up to that point,
well you are already tracking how many bytes have been downloaded,
| | 11:36 | as you can see, if you look up in the on load progress
function there is a parameter in there that is being passed
| | 11:42 | from the movie clip loader called loaded bytes that loaded bytes
parameter is tracking how many bytes have been loaded up to that point.
| | 11:51 | So type "loaded bytes" when Flash goes to run this code, it is
going to insert how many bytes have been loaded up to that point.
| | 11:59 | Now we want to display how many kilobytes
have been downloaded up to that point.
| | 12:04 | To do that, you need to divide that number by thousand
so after loaded bytes type a forward slash one thousand
| | 12:13 | to divide how many bytes have been loaded up to that point by thousand
which gives you how many kilobytes have been loaded up to that point.
| | 12:20 | Now some of you may be saying, "Wait a second, there is 1024
bytes in a kilobyte so why are we dividing it by a thousand?"
| | 12:28 | When Flash deals with data transmission, content being downloaded
over the internet as we are dealing with here in our preloader,
| | 12:35 | it actually treats one kilobyte as a thousand bytes.
| | 12:40 | When you are dealing with files that are being stored on
someone's hard drive, then it treats one kilobyte as 1024 bytes,
| | 12:49 | but again in this case because it is being transmitted,
Flash treats that as 1000 bytes per kilobyte.
| | 12:56 | Now when Flash does this math, it takes how many
bytes have been loaded up to that point and divides it
| | 13:01 | by 1000, it is not always going to yield a whole number.
| | 13:04 | It may come up with a number like 12.3337, now obviously the viewer
does not need such detailed information so let's round that number out.
| | 13:14 | To do that, it is actually quite easy, click
before loaded bytes and type math dot round
| | 13:22 | and then an open parenthesis click after
the 1000 and type in closed parenthesis.
| | 13:28 | What that does is it tells Flash to round math dot round the
value that is inside of the parenthesis so Flash is going
| | 13:36 | to perform this calculation loaded bytes divided by 1000 and then
it is going to round that number out to a whole number for us.
| | 13:43 | Now again, that text that number is going to be displayed
inside of the preloadinfo2 text field inside of our preloader.
| | 13:51 | If we just left it as it is now, the viewer would only see a
number, but they would have no idea what that number represents,
| | 13:57 | so after that type space plus space quote space K loaded, as in kilobytes
loaded, and then type space forward slash space end quote space plus space,
| | 14:17 | and now we want to display how many kilobytes there are total, so
the first thing it displays is how many kilobytes have been loaded
| | 14:23 | and then after that it is going to display how many kilobytes
there are total so the viewer has a little better idea
| | 14:29 | as to how much has been downloaded and how much there is total,
to get that value you do it very similarly to what you just did
| | 14:37 | with loaded bytes except now you are going to be working with the
value total bytes, so after the plus sign that you just created,
| | 14:43 | type total bytes forward slash a thousand, again you want
to round that number off as well so before total bytes,
| | 14:54 | type math dot round open parenthesis and then click after the
total bytes forward slash a thousand and then close parenthesis.
| | 15:03 | Then you want to display a little string of text after that that
says K total so type space plus space quote space taking that space
| | 15:14 | after that number K total end quote semicolon to end that action.
| | 15:21 | So there you have the two lines of code needed to insert some text into
the two text fields that you added inside of the preloader.fla file.
| | 15:30 | Inside of the topmost text field, which you gave an instance
name of preloadinfo1 too it is going to display what percentage
| | 15:37 | of the content has been downloaded up to that
point as well as the string of text percent loaded
| | 15:43 | so that the viewer knows what that number is supposed to represent.
| | 15:46 | In the text field below it, which you gave the instance name of
preloadinfo2 too it is going to display how many kilobytes have been loaded
| | 15:54 | up to that point and then the text K loaded forward slash and
then how many kilobytes there are total, after that is displayed,
| | 16:02 | a bit of text that says K total so the
viewer knows exactly what is going on.
| | 16:07 | Now, go ahead and save the changes you have
made to master.fla and test your movie.
| | 16:15 | You should see the first slot and the slide
show appear but to actually view our preloader
| | 16:20 | and see it actually downloading the content working we need to first
choose a modem speed at which to test it at, as you have seen before,
| | 16:28 | so from the preview window choose view download settings and choose a modem
speed to test, I am going to leave it set to 56K then I am going to turn
| | 16:38 | on the bandwidth profiler by choosing view bandwidth profiler so I can get
a little bit more information as to the downloading progress of my content.
| | 16:47 | I need to see more of what is going on in the downloading so I am going
to give as much room as possible to my preview window by dragging the ends
| | 16:56 | of it down a little bit so that I can see more of what is going
on here, like so, and then I want to simulate the download
| | 17:04 | so I can see my preloader actually work, to do that choose view,
simulate download, you can see that shared lib file is being downloaded
| | 17:16 | and you can see the downloading progress here
and you can see the preloader work just fine.
| | 17:22 | Now you saw it happen pretty quickly it showed the preloader
animation occur, but then above and below that it showed some text
| | 17:29 | that gave you more precise information
as to how that downloading was occurring.
| | 17:34 | If I click to go to the next slide, you will see the preloader appear
again and again look to the top and the bottom of that preloader animation
| | 17:41 | to see the bit of extra text that you have added in this movie.
| | 17:45 | You can see it shows the percentage loaded at the top and
at the bottom it showing how many kilobytes have been loaded
| | 17:51 | up to that point and how many kilobytes there are total.
| | 17:56 | So that is how you can create a preloader that gives more
detailed information to the viewer so that they have a better idea
| | 18:03 | of how many kilobytes are being downloaded to
the movie, what percentage that is equated to,
| | 18:09 | and how many kilobytes have been loaded up to that point total.
| | 18:13 | That way, the viewer has a much better idea as to
how long they have to wait and what is exactly going
| | 18:19 | on inside of the content that they are waiting to download.
| | 18:22 | As you can see, it did not require a whole lot more information, all
we essentially had to do was to add a couple of text fields to have
| | 18:29 | that text be displayed in and then a few lines of actions inside of the
master.fla file inside of the on load progress event handler so that
| | 18:38 | as the content is being downloaded, and the on load progress event
handler is being executed, as that content is being downloaded,
| | 18:46 | it continually updates the text inside of the text field for us.
| | Collapse this transcript |
|
|
9. Building a FormPreviewing what you're building| 00:00 | >> In this chapter, you're going to construct a simple feedback form
that will allow the viewer to fill out a form and then send you feedback.
| | 00:09 | To get a better idea of exactly what it is that
you're going to be building in this chapter,
| | 00:13 | open up the sample website at www dot Lynda dot com
forward slash intflash8 forward slash laeyeworks.
| | 00:23 | When that website loads, click on the
Contact Us option from the top Menu bar.
| | 00:29 | This is going to load the Contact Us form where the viewer
can enter in their name, email address and comments.
| | 00:35 | One of the neat things about constructing forms
inside of Flash is that unlike most forms in html,
| | 00:40 | you can't specify specific type faces, sizes, styling and so forth.
| | 00:46 | Here inside of Flash 8, however, if I click inside the name
filed and I type in my name, notice how it's in a specific font,
| | 00:54 | we're using Bitstream Vera Sans Bold, it's at a
specific size that I created and a specific color.
| | 01:01 | So Flash gives you a lot of control over
the styling and presentation of the form.
| | 01:06 | If I fill information in each of the fields and then click
on the submit button at the bottom of the form field,
| | 01:22 | it's gonna open up this extra window, which of course I don't need at this
point, but it says "Thank you for taking the time to give us your comments,
| | 01:28 | "Shane Rubenshide, we look forward to
seeing you in one of our stores soon."
| | 01:32 | The thank you message that this form gives me actually is customized
so that it enters in the name that I entered in in the name field.
| | 01:40 | So it feels like it's a little bit more friendly, in
terms of being customized, for your specific visitor.
| | 01:46 | Now if I go back to the contact us form, by simply
selecting another selection and then going back there again,
| | 01:53 | say for example the viewer is entering this information into their
form, but maybe they forget to enter information into each field,
| | 02:09 | when they click on the submit button, it's gonna say "Oops,
it appears that you didn't fill out the form completely.
| | 02:14 | Please go back and make sure you enter
the correct information in all fields."
| | 02:18 | And it gives them the ability to click on the back
button to go back and fill out the form again.
| | 02:24 | So the Contact Us form that you're going to construct in this
chapter not only allows the viewer to leave feedback for you,
| | 02:30 | but it also is somewhat intelligent in that it is
going to do a little bit of detection to make sure
| | 02:35 | that the viewer is filling out each of the fields in the form.
| | 02:38 | Additionally, this form is constructed using some components,
| | 02:42 | so inside of Flash 8 you're gonna utilize a few
different components to construct this form.
| | 02:47 | Now we could construct this form using just sample input text field,
but in this case, we're gonna get a little bit extra added functionality
| | 02:55 | by using components instead of just input text fields.
| | 02:59 | One of those pieces of added functionality would be if the viewer
is entering in the comments here, let me just speed this along,
| | 03:07 | select all those comments, copy it and then just go in here
and continue to paste all those comments in to speed it up,
| | 03:15 | when a viewer fills enough information in one of the fields, such
as the comment field here, automatically scroll bars will appear
| | 03:22 | on the right hand side to allow the viewer
to easily scroll through all of that content.
| | 03:26 | If I was just using input text fields, for example, I would not get
that added scroll bar functionality which the component provides me.
| | 03:34 | So in this chapter you're gonna be learning how to build a simple
feedback form that also has some detection scripts built into it
| | 03:40 | to make sure that the viewer enters information in each field.
| | 03:43 | You'll also write some action script to stylize this form, allowing you
to specify the font, font size, font color and font styling for the text
| | 03:52 | that appears in the form as the viewer types in the fields, as well
as utilizing a few components to create the various form elements.
| | 04:00 | Before you continue, make sure that you close your browser window and then
open up the LA Eyeworks directory on your desktop and the site directory.
| | 04:08 | It's in this folder where you're gonna continue in the next exercise.
| | Collapse this transcript |
| Setting up pt. 1| 00:01 | >> For those of you that have access to the exercise
files, I have created a starter fla to get you going.
| | 00:07 | Inside the site directory, you will notice
that there is an fla called contact.fla.
| | 00:13 | For those of you that do not have access
to the exercise files, go ahead and create
| | 00:17 | and save into the site directory here
a new blank fla called contact.fla.
| | 00:23 | Again, for those of you that do have access to the exercise
files, open up that contact.fla file inside of Flash 8.
| | 00:31 | Inside of here, you will notice there
are already a few pre-provided elements.
| | 00:35 | On the stage, there is a movie clip symbol that is called MC Contact Form.
| | 00:40 | Inside of there is just a simple light blue square and on the left hand
side there are a few text elements these are just static text fields
| | 00:49 | that say name, E-mail address, and comments.
| | 00:52 | These are simply just textual labels for where our form elements
will go, so that the viewers, as they are entering their information
| | 00:59 | in the form fields knows what they are
supposed to be typing in those fields.
| | 01:03 | Additionally, at the top of the stage, there
is a static text block that says, 'Contact Us'.
| | 01:10 | Additionally, there are also some labels defined inside the time
line, there is a key frame on frame 10 with the frame label 'Error'
| | 01:18 | and there is a key frame on frame 20 with the frame label 'Correct'.
| | 01:21 | There is some provided action script on both key frames 1,
10, and 20, which you will get to see a little bit later.
| | 01:28 | Also, and lastly, on frame 10, in a separate layer called
'Messages' there is a bit of text in the stage that says, 'Oops,
| | 01:36 | it appeared that you did not fill the form out completely.
| | 01:38 | Please go back and make sure you entered
the correct information in all the fields'.
| | 01:42 | That is the error message as you can see by the label that has been also
attached to the same point in the time line that the viewer will see
| | 01:49 | if they did not enter in information in each of the form fields.
| | 01:53 | On frame 20 that is marked as 'Correct', there is a dynamic text field
that is currently empty which you will then populate with content later.
| | 02:01 | For now, just go ahead and keep your play head back on frame 1.
| | 02:05 | Now as you have seen quite a few times before, the first thing
we need since we are obviously going to be using some text inside
| | 02:11 | of the construction of this feedback form is to bring in our
linked shared fonts that we created in the shared lib library.
| | 02:18 | To do that, choose File Import, open external library, navigate
to your site directory and double click on the FLA shared lib.
| | 02:31 | This is going to open up the shared library panel.
| | 02:33 | However, the construction of this feedback form only
requires two fonts, Vera Bold and Vera Bold oblique.
| | 02:40 | So in this shared library panel select those
two fonts, Vera Bold and Vera Bold oblique,
| | 02:46 | and drag them into the contact.fla library
panel just by clicking and dragging over.
| | 02:52 | Once you have done that, go ahead and close the shared lib library panel.
| | 02:56 | Next, let us use some of those shared fonts and apply
those to the texts that we have so far in our sample file.
| | 03:02 | Select the 'Contact Us' text by clicking on the text block once that is
at the top of the stage and in the properties inspector from the font pull
| | 03:11 | down menu choose the shared font Vera Bold, again the
shared fonts have the asterixes at the end of the name.
| | 03:19 | If you are on Windows, also make sure
that you click on the full bold button
| | 03:23 | in the Properties Inspector to apply the
bold styling to that block of text.
| | 03:27 | Next, let's also assign some of the shared fonts
to the text named E-mail address and comments.
| | 03:33 | That text is inside of this movie clip so on the stage,
double click on that movie clip symbol instance to open it up,
| | 03:41 | then make sure that you have all three of the static text
fields selected, then again in the properties inspector,
| | 03:47 | from the font pull down menu, choose the shared font Vera Bold oblique.
| | 03:53 | If you are on Windows, make sure that you
click the full bold and full italic buttons.
| | 03:58 | Now that you have assigned your shared fonts to some of
the text blocks in your provided contact.fla file,
| | 04:05 | let's start actually creating the various form fields
that the viewer can start entering their information into.
| | 04:10 | As I mentioned previously, you are going to use a few components, a
text input and text area component for the construction of this form.
| | 04:20 | Open up your component's panel by choosing Window Components.
| | 04:26 | Again, the components panel will differ depending upon
if you are using Flash Basic 8 or Flash Professional 8.
| | 04:32 | In both versions of Flash, however, you have
access to this user interface component section.
| | 04:38 | From there, scroll down until you locate the component text input.
| | 04:42 | Before you drag the text input component out onto the stage,
however, let's create a new layer specifically for those components.
| | 04:50 | Still inside the movie clip called MC contact form create
a new layer, rename that new layer to be titled form fields
| | 05:00 | and then with that new layer selected drag the text input component
from the component panel out onto the stage and position it
| | 05:10 | so that it is to the right of the text that says name.
| | 05:13 | You might need to use your arrow keys on your
keyboard to align it just where you want it.
| | 05:18 | Then you can use your Free Transform tool to make that component
field a little wider; I am going to move my components panel off
| | 05:25 | to the right a little bit and then I'm going to drag on that horizontal
slider to the right to expand the width of that component field,
| | 05:33 | and I'm going to drag it so that its about like so, then first make sure
that you have your Selection tool selected and on windows while holding
| | 05:41 | down your Ctrl and Shift key or Option and Shift on the Mackintosh,
click and drag that text input component down so that it is next
| | 05:50 | to the text E-mail address, once it is next to that text, let
go of your mouse button and then let go of your keyboard buttons
| | 05:58 | to copy that text input component down to the next area.
| | 06:03 | Lastly, we need a big field for where the viewer can enter their comments.
| | 06:08 | Inside of the components panel again, right above text input is
another component called text area, drag that text area component
| | 06:17 | from the components panel out onto the stage and then
position it so that the top left of the component is aligned
| | 06:24 | on the left hand side along with the other two components already there.
| | 06:27 | Then with your Free Transform tool selected
go ahead and drag on the bottom right corner
| | 06:33 | of that text area component down toward the right to increase its size.
| | 06:41 | Like so. Then with your Selection tool selected, you may need to
make some minor adjustments depending upon your operating system
| | 06:48 | in exactly how you drag those components out onto your stage and
where you place them you might need to make some minor adjustments
| | 06:54 | to either the fields or the text on the left hand side so
that they are all aligned appropriately with one another.
| | 07:01 | I am going to move my components field up just a little bit and
my E-mail address text as well as comments down just a little bit.
| | 07:12 | Next up, now they are a little better aligned with one another.
| | 07:15 | Now because I'm going to be targeting each one of these
fields separate from one another with an action script,
| | 07:20 | I want to make sure just like when I'm using any other symbol
that I give each of them their own unique instance name.
| | 07:27 | Click on the text input component that comes after the name text and
then in the Properties Inspector, click in the instance name field
| | 07:35 | and give it a name of 'UserName' all one word with a capital N in name.
| | 07:41 | Now again, just like with variables, these instance names that you
are assigning to these form fields can be anything that you like,
| | 07:48 | just make sure that you do not put any spaces in the
name or any special characters in the name either.
| | 07:53 | Then click on the next form field down,
this one next to the text E-mail address
| | 07:58 | and then in the Properties Inspector give
it an instance name of 'UserEmail'.
| | 08:05 | Lastly, click on the comments field and give it an instance name
of 'UserComments', again all one word with a capital C in comments.
| | 08:15 | Also, now that you have finished copying the components
that you are going to be using in the construction
| | 08:19 | of this feedback form you can also go
ahead and close that components panel.
| | 08:24 | Lastly, after the viewer finishes entering their information in this form,
they are going to need to click on something to actually send these results
| | 08:32 | or submit the form to a CGI script on the web surfer
to be processed and then done with whatever you choose.
| | 08:38 | In most cases, it simply E-mails those form
results to you or posts them to a database,
| | 08:43 | so we need a button down here beneath
the form that the viewer can click on.
| | 08:47 | Let's place that button in a separate layer so again still inside
your MC contact form movie clip symbol instance, create a new layer
| | 08:57 | and rename that layer to be titled 'Submit', then inside of your library
is an already created movie clip symbol for you called MC.Submit,
| | 09:09 | go ahead and take that and drag it out onto your stage, position
it down to the bottom right of your form elements like so,
| | 09:18 | that yellow box that you see, by the way, is what is inside
the BG layer and that is again just simply a light blue box.
| | 09:26 | Its outline has been enabled so that it does not blend in with the
background so that you can actually see where the edges of that image is.
| | 09:34 | I am going to position my MC Submit movie clip symbol just down beneath
the bottom right of it like so, then you can again use your keyboard
| | 09:42 | to nudge it around until you get it in exactly the place you want it.
| | 09:46 | Later you will be targeting that submit button movie clip instance
with some action script, so before you leave here you want to make sure
| | 09:53 | that you give that movie clip symbol instance an instance name.
| | 09:57 | With that movie clip symbol selected on the stage, in
your properties inspector click in the instance name field
| | 10:04 | and give it an instance name of 'SubmitBtn' with a capital B in button.
| | 10:10 | So while we are certainly not done with the construction of this form yet,
| | 10:14 | that is the basic structure of how this
feedback form is going to be set up.
| | 10:18 | You have two fields where the viewers can
enter in their name and E-mail address
| | 10:22 | and a third larger text area field where
the viewers can leave their comments.
| | 10:26 | When they are finished filling out this form, the viewer can
then click on the Submit button to then submit those results.
| | 10:33 | Now we turn back to scene 1 by clicking its button above the time line
and then click once on the MC contact form movie clip symbol instance
| | 10:43 | that holds all of that information you were just working with.
| | 10:46 | Again, because we are going to be using action script to talk to not only
the form fields inside of the feedback form, but the submit button as well,
| | 10:55 | we also want to make sure that we give this movie
clip symbol instance its own unique instance name.
| | 11:00 | With that symbol instance selected, inside of the properties inspector,
click in the instance name field and give it an instance name
| | 11:08 | of 'ContactForm' all one word with a capital F in form.
| | 11:14 | Now when we want to refer to content inside of that we simply say,
'ContactForm dot' and then whichever element we have named inside
| | 11:23 | of that movie clip symbol instance that we want to talk to.
| | 11:26 | So now if I take what I have done so far, save the changes I have made to
this fla, and just test my movie by choosing Ctrl Enter or command return,
| | 11:36 | for now I am going to close my band with a profile,
I have to give my viewing space a little more room,
| | 11:41 | I can see that I have the beginnings of my feedback form.
| | 11:45 | If I click in the name field, I can now type my name.
| | 11:48 | Notice how the text I type inside of the form fields
is aliased text meaning that it is not smoothed out,
| | 12:05 | it does not have any smooth edges which is called anti-aliased.
| | 12:08 | It is set to be a pixel size that I did
not define and it is just plain black text.
| | 12:14 | In later exercises in this chapter, you are going to be learning how
to write action script to define the styling and displaying of the text
| | 12:21 | that appears inside of the form fields themselves, but again
as you can see, you have the great beginnings of a form.
| | 12:28 | We are off to a great start, but there is still some more action script
installing that we need to perform before we can call it finished.
| | 12:34 | Before you can continue on to the next exercise though,
go ahead and close your preview window and make sure again
| | 12:40 | that you have saved your changes to contact.fla.
| | Collapse this transcript |
| Setting up pt. 2| 00:01 | >>Now that you have gotten the
basics of the form set up, in this exercise,
| | 00:05 | you are going to write the action script
that does the simple form validation.
| | 00:09 | That is a fancy a word, basically that means to make
sure that when the viewer is entering information in each
| | 00:15 | of the fields that they enter information in all of the fields.
| | 00:19 | If they only enter information in only one or two of the three fields,
and they click on the submit button, we are going to write a little bit
| | 00:26 | of action script that says, well since they did not finish
filling up the form, send them to the error message.
| | 00:32 | The error message informs them that they did not fill out the
form completely and allows them to go back and fill it out again.
| | 00:39 | However, our form validation is also going to say, "Hey, they did fill
out all the fields correctly," if they did, and in if that is the case,
| | 00:47 | when they click on the submit button, send them to the correct message,
which will then display a message for them telling them that they filled
| | 00:54 | out the form correctly and that the results have been sent.
| | 00:57 | Before we get in and start writing that action script, however, let's
make sure that our error and correct messages are set up correctly.
| | 01:06 | Move your play head to frame ten in your contact.fla file and
then click on the error message once on the stage to select it.
| | 01:14 | As you can see, if you look in the properties inspector,
it is just using the device font underscore Sans.
| | 01:19 | Let's change that so that it is using the shared font Vera Bold.
| | 01:23 | So with that text field selected on the stage, in the Properties Inspector,
click on the font pull down menu and choose the shared font Vera Bold.
| | 01:33 | If you are on Windows, you also need to make sure that you click
on the full bold button in the properties inspector as well.
| | 01:39 | We want the word "Al"' at the very end of that text block to be italicized.
| | 01:45 | To do that, double click on the text field to edit it, double click
on the word "All" to select it, and then in the Properties Inspector,
| | 01:53 | click on the full italic button to italicize just that one word, and
then select your selection tool to exit out of type editing mode.
| | 02:03 | Next, let's also specify that the correct
message also uses the shared font Vera Bold.
| | 02:09 | To do that, move your play head to frame 20, click once on
the multi-lined dynamic text field on the stage to select it,
| | 02:17 | and then in the properties inspector, click on the font
pull down menu and choose the shared font Vera Bold.
| | 02:25 | On Windows, make sure that you click the full
bold button also in the Properties Inspector.
| | 02:31 | As you might also notice, again in the Properties Inspector, that dynamic
text field has already been given an instance name of "Correct Message"
| | 02:40 | that way when we want to place text inside of
that dynamic text field, which we will do later,
| | 02:45 | we can simply refer to it by its name "Correct Message" Msg.
| | 02:49 | As a matter-of-fact, if you select key frame
20 in layer A and open up your actions panel,
| | 02:56 | you will notice that some action script
has already been written in there for you.
| | 03:00 | Let's take a second to review it and for those of you that do not have
access to the exercise files now would be a good time to select frame 20
| | 03:08 | in your A layer, add a key frame there, and then copy
down the action script that you see printed here.
| | 03:14 | Essentially, what is going on in frame 20 is that there is a Stop action,
so when the play head moves to that frame, the play head stops there,
| | 03:21 | and then, if you remember again, that text
field on the stage is called Correct Message.
| | 03:26 | Its auto size property has been set to center so that that text
field will automatically resize out from the left and the right
| | 03:33 | and then some text has been told to be displayed inside of there
that says, "Thank you for taking the time to give us your comments"
| | 03:40 | and then after that you can see that it is
appending a variable name called "Visitor Name".
| | 03:46 | We are going to create that variable "Visitor Name" later
and then after that it has entered in some more text.
| | 03:53 | One of the things in here that may look different than what you have
seen before is this back slash n. That is called an escape sequence
| | 04:01 | and what that does when you add a back slash n inside
of a string, flash does not actually print that.
| | 04:08 | In other words, you won't see when we go to view this text
as it is displayed in the dynamic text field on the stage,
| | 04:15 | you won't see forward slash n you will just simply
see a line break that is what escape sequences do.
| | 04:21 | If you were to search the flash help documentation for an escape sequence,
you would find a list of the various escape sequences that you can use,
| | 04:29 | in this case, again the back slash n inserts a line break there, so
it would say, "Thank you for taking the time to give us your comments"
| | 04:37 | and then if I typed my name Shane Riebenschied in
the name field, it would say, Shane Riebenschied.
| | 04:43 | And there would be a line break and on the next line it would
say, "We look forward to seeing you in one of our stores soon".
| | 04:51 | So that pre-provided action script here on key frame
20 in layer A, simply auto sizes that text field
| | 04:58 | and then places a "Thank you" message inside of that text field itself.
| | 05:02 | Now that you have defined the fonts that the error and correct messages
are going to be using let's go ahead and go back to the first key frame
| | 05:10 | in layer A, and as you can see, inside the actions panel, there is already,
| | 05:14 | as with some other chapters, some prebuilt
code for this particular chapter.
| | 05:19 | Again, for those of you that don't have access to the exercise
files, you may want to pause the movie at certain times
| | 05:25 | and copy down the action script that you see written here.
| | 05:28 | As you can see, there is some action script that defines what should happen
when the viewer interacts with the submit button that has some pre-created
| | 05:36 | on rollover, on rollout, and on release action script, in this case the
on release for that submit button is empty, which you will fill in later
| | 05:45 | and then there are some simple comment
lines to comment out that action script.
| | 05:50 | In the next exercise, you are going to start working with some of
this pre-provided action script as well as writing some of your own.
| | 05:57 | Before you continue on to the next exercise, of course
make sure that you save the changes to contact.fla.
| | Collapse this transcript |
| Performing simple form validation| 00:01 | >> When setting up this simple form validation, let's
first start by un-commenting the commented out action script
| | 00:08 | in the first key frame of layer A in your contact.fla file.
| | 00:13 | To do that, toward the top of your actions panel,
select the comment line prebook code for chapter 8
| | 00:20 | as well as the forward slash asterisk that comes after it.
| | 00:24 | Once you have selected those, go ahead and delete them.
| | 00:28 | Deleting them will un-comment out the action script underneath it and will
color code them meaning that this action script is now active, however,
| | 00:36 | just to keep things cleaned up in the actions panel here, scroll down to
the bottom, select the two comment lines, asterisk forward slash as well
| | 00:45 | as the comment line underneath that, and delete those two lines.
| | 00:51 | Again, the action script that you have just
commented out does a few different things.
| | 00:55 | These are all things that you have seen before,
which is why they were pre-provided for you.
| | 00:59 | The first line simply changes the auto size
property of the button labeled text field
| | 01:05 | in the Submit button movie clip symbol in the contact form to be center.
| | 01:11 | For your reference, if I hide or minimize my actions panel for a
moment, open up the contact form movie clip symbol on the stage,
| | 01:19 | and then double click on that Submit button on the stage as well inside
of there, on the stage is a dynamic text field called Button Label.
| | 01:29 | The actions back on scene 1 on key frame 1 simply sets
this dynamic text field to be auto sized from the center,
| | 01:36 | so as I use action script to insert text inside that text field, it
will expand out to the left and to the right automatically for me.
| | 01:44 | Back on scene 1, again in the first key frame
in layer A that is what that one action does.
| | 01:51 | The second action inserts some text into
that dynamic text field called Submit.
| | 01:57 | Now some of you might be wondering why don't you just
create a button with the text written in there submit.
| | 02:03 | Why are you trying to be all fancy and do it with action script?
| | 02:06 | The reason why is because in this case we are trying to
optimize our Flash movie by building this one button once,
| | 02:13 | which in this case is actually just a movie clip symbol
that we are behaving as a button called MC submit,
| | 02:19 | and we are using that as not only our Submit button
but as our Back button here on the error page as well,
| | 02:25 | that is the same movie clip instance called MC submit.
| | 02:29 | Then it just has a dynamic text field inside of it
that we use action script to put text inside of,
| | 02:36 | so that way instead of having two separate symbols, one for our Submit
button and one for our Back button. We can use one symbol as many times
| | 02:44 | as we would like and then just use action script to modify not only
the functionality of, where it should go when the viewer clicks on it
| | 02:52 | for example, but as well what text should be displayed inside
of that dynamic text field so it can be our Submit button,
| | 02:58 | it can be our Back button, it can be a Clear Form
button for example, it can serve multiple purposes,
| | 03:04 | and by doing that, we lower the overall file size of our Flash movie.
| | 03:08 | So back in key frame 1 in layer A in the actions panel that is what
those two actions do, one makes sure that that text field is auto sized
| | 03:18 | from the center and the other one puts the
string of text Submit inside of that text field.
| | 03:24 | If you scroll down a little bit in the actions panel, you will
notice that for the on roll over state of that Submit button,
| | 03:31 | it simply tells that movie clip symbol to go to frame 2.
| | 03:34 | When they roll their mouse off of it, it simply tells that
movie clip symbol to go back to frame 1, so in actuality,
| | 03:40 | all that action script does so far is inside of that
movie clip symbol when the viewer moves their mouse
| | 03:46 | over that movie clip symbol, it tells the play head here to go to frame 2.
| | 03:51 | In frame 2, it is just the graphic behind that text changes to
a different color and then when they move their mouse off of it,
| | 03:58 | the action script tells this play head to go back to frame 1, so
essentially you have created a button effect where it interacts
| | 04:05 | with the user moving their mouse over it and then back off it
again, but you have done that with an action script instead.
| | 04:12 | Again, back in scene 1, in the first key frame of layer A, in
the actions panel that is what these set of actions here do,
| | 04:20 | it just moves the play head inside that button
movie clip symbol to frame 2 or to frame 1.
| | 04:26 | Scrolling down a little further, however, you have an empty on
release function for that button and it is here where we are going
| | 04:33 | to write the action script that does that little form validation.
| | 04:36 | It is going to check when the viewer clicks on the Submit
button whether or not they filled out the form correctly.
| | 04:42 | If the viewer has filled out each of the fields in
the form, when the viewer clicks on the Submit button,
| | 04:48 | it is going to send our play head to the correct message.
| | 04:51 | However, if our form validation script finds that the viewer
has not entered information in all of the form fields,
| | 04:58 | it is going to send the play head here to the error message.
| | 05:01 | Now since we want to find out what is going on with the form elements
when the viewer clicks on the Submit button, we are going to utilize to do
| | 05:10 | that an 'If' conditional statement, 'If this is
happening, do this, otherwise do something else.'
| | 05:18 | So click in the empty line break provided for
you in the on release function and then type
| | 05:24 | if space open parenthesis close parenthesis space open curly
brace a couple of line breaks and a closed curly brace.
| | 05:34 | So that is the skeleton of our 'If' statement.
| | 05:37 | Then click in the open and close parentheses
after 'If' and it is here where we are going
| | 05:41 | to write the conditional 'What should be true for something to occur'.
| | 05:45 | Now let's just start by seeing if the viewer
has typed information inside of the name field.
| | 05:51 | If you remember, you gave that component that is where the
viewer will type in their name an instance name of 'User Name'.
| | 05:59 | So we if we want to find out if the viewer has entered information in that,
| | 06:03 | we simply tell Flash first where that
component named 'User Name' resides at,
| | 06:09 | if you remember that text area component resides
inside of the movie clip on the contact.fla stage.
| | 06:17 | The name of the movie clip that holds all of that form you gave an instance
name of 'ContactForm2' again all one word with a capital F in form.
| | 06:28 | Then the name of that form element that you want to see if the
viewer entered text into you gave an instance name of 'UserName'
| | 06:36 | so after ContactForm type dot UserName,
all one word with a capital N in name.
| | 06:44 | Then if you want to find out if the user has
entered text into that or not type.text.
| | 06:50 | What our 'If' statement is going to be doing is seeing
if the viewer has entered information in there or not.
| | 06:56 | So what we want to find out if the text inside the UserName field is empty
that means that the viewer has not entered information inside of that field
| | 07:05 | so after dot text type space equals equals space quote quote.
| | 07:13 | Now quote quote means no text basically there is nothing there,
so we are finding out if the text inside of that UserName field
| | 07:21 | in the contact form movie clip symbol on the stage is exactly equal to
nothing, meaning the viewer has not entered information in that field.
| | 07:31 | Now again, there are more than just one fields
for the viewer to enter information into.
| | 07:36 | There is also UserName and UserComments.
| | 07:40 | So how can we have our 'If' statement check multiple things?
| | 07:44 | Do we have to write three "If' conditional
statements to check each one of those elements?
| | 07:49 | And in actuality, luckily, thankfully, you don't have to.
| | 07:52 | We want our 'If' statement to essentially ask
if this is true or this is true or this is true.
| | 08:01 | The things that we are checking to see if they are true or not
is if the viewer has not entered any information in the fields.
| | 08:08 | If the viewer has not entered information in every field,
then we are going to send them to the error message.
| | 08:14 | So after your equals equals space quote quote,
type another space and then two pipe symbols.
| | 08:22 | Pipe is the backslash key, but you hold down your Shift key along with it.
| | 08:27 | On your keyboard, if you are on Windows,
it should be below your backspace key.
| | 08:31 | On Macintosh, it should be below your Delete key.
| | 08:35 | So hold down your Shift key and press that
backslash key twice to give the pipe symbol.
| | 08:40 | Now in Flash, those two pipes have the fancy name called a
logical or operator and essentially if you are just thinking
| | 08:47 | about this, as stating it in plain English, that just means or.
| | 08:51 | If there is no text inside the UserName field or
if, and we are going to continue writing it alone.
| | 08:59 | After that, we want to find out if no text
has been entered in the UserEmail field either
| | 09:04 | so type ContactForm dot UserEmail dot text
space equals equals space quote quote.
| | 09:14 | So right now it says, if there is no text in the UserName
field or if there is no text in the UserEmail field,
| | 09:21 | and then we need another or if there is no text in the UserComment field.
| | 09:26 | So after quote quote again type space pipe pipe space ContactForm
dot UserComments dot text space equals equals space quote quote.
| | 09:43 | So what that if conditional statement says is if there
is no text in the UserName field or if there is no text
| | 09:51 | in the UserEmail field or if there is no text in the UserComments field.
| | 09:57 | If any of those things happened, if there
is no text in any of those three fields,
| | 10:02 | then that means that the viewer has not fully
entered information in all of our form elements.
| | 10:09 | In that case, we need to send them to our error message, so after
the open curly brace that marks the beginning of our 'If' statement
| | 10:17 | and before the closed curly brace that marks the end, click in that
empty line break to send them to the error message, we simply type go to
| | 10:25 | and stop open parenthesis quote, because we are sending them to a frame
that has a label on it, error end quote end parenthesis semicolon.
| | 10:39 | So if the viewer has not entered information in each of the
three field elements send the viewer to the error message.
| | 10:47 | However, if this 'If' conditional statement turns out to be not true,
meaning that they have entered information in each of the form elements,
| | 10:56 | then we can go ahead and send them to the correct message.
| | 11:00 | So after the closed curly brace that marks the end of the 'If' statement,
click there, make sure that you don't click after the closed curly brace
| | 11:08 | that marks the end of the on release function
but instead the end of the 'If' statement.
| | 11:12 | Click after that and type space else space open
curly brace two line breaks and a closed curly brace.
| | 11:21 | So if they have not entered information in every field, show them the error
message; otherwise, show them the correct message, so in between the open
| | 11:31 | and closed brackets for the 'Else' statement,
click in that empty line break and type go to
| | 11:38 | and stop open parenthesis quote correct
end quote end parenthesis semicolon.
| | 11:46 | So there you have in just a few lines simple form validation.
| | 11:51 | It just simply checks to make sure that the viewer
has entered information in every field and obviously
| | 11:56 | if you are equating the more complex form
instead of Flash and you did not have
| | 12:00 | to have every form element field B required you
just would not include them here in this list.
| | 12:07 | However, because our form requires that all three of these form element
fields be filled out, we are checking to see if text does not exist
| | 12:15 | in every of those fields and if there is not text in all
of the fields then that means they get the error message.
| | 12:22 | Otherwise, they get the correct message.
| | 12:25 | Let's go ahead and test what we have done so far, save the changes that you
have made to contact.fla and because we are not yet utilizing any sort
| | 12:34 | of action script that resides in master.fla we can preview contact
dot SWF by itself, so just choose Control Enter or Command Return.
| | 12:44 | Then inside the name field, and I must admit the form is looking
a lot better, click inside that name field and type in your name,
| | 12:50 | you can type in something in the E-mail address field if you would
like, but don't enter anything in the comments field and click submit.
| | 13:03 | When you do that, you will notice you get the error message,
'Oops, it appears that you did not fill out the form completely.
| | 13:08 | Please go back and make sure you enter
the correct information in all fields.'
| | 13:12 | When you click on the Back button, it takes you back to the form again.
| | 13:15 | Now, if I don't fill out anything in the form and
click Submit, of course, I still get the error message.
| | 13:21 | So we know that the error handling is working correctly.
| | 13:24 | I am going to click on the back button again and this time in the name
field I am going to type my name, I am going to type my E-mail address
| | 13:32 | in the E-mail address field, and I am also
going to type something in the comment field.
| | 13:39 | When I click on the Submit button this time, I get the Thank you message
because I have entered information in all three of the form fields.
| | 13:48 | It says, 'Thank you for taking the time to give us your comments undefined.
| | 13:52 | We look forward to seeing you in one of our stores soon.'
| | 13:55 | Now it says 'undefined' because we have not yet written the action script
that tells Flash to take what the viewer has entered in the name field
| | 14:02 | and place it here inside of this message, but we will do that later.
| | 14:07 | However, as you can see the form validation is working perfectly.
| | 14:11 | When the viewer has not entered information in each of
the three form fields, it sends them to the error message.
| | 14:17 | However, if they have entered information in each of the fields when
the viewer clicks the Submit button, they see the Thank you message.
| | 14:24 | So the form validation is, in fact, working correctly.
| | 14:28 | In the next exercise, I am going to show you how to write a
load vars object that instead of loading variable value pairs
| | 14:35 | from a separate text file, as you have been using the load vars object
up until this point, instead of doing that I am going to show you how
| | 14:42 | to use load vars to take what the viewer will have entered in
each of the fields in this form, gather them all up together,
| | 14:50 | and send them to a CGI where they can be processed by that CGI.
| | 14:54 | Now I cannot actually show you how you can integrate this with an
actual live CGI on a web server because of how many variations there are
| | 15:01 | between how web servers work, how the various CGIs work, and so forth,
but I will show you again how to take the results from this form
| | 15:09 | when the viewer has entered in all their information and
used the load vars class to gather them all up into a bundle
| | 15:16 | and then send them to a mock CGI that could then process them.
| | 15:20 | You are going to learn how to do all that in the next exercise.
| | Collapse this transcript |
| Using LoadVars to send the form results| 00:01 | >> The first step in the process
of creating a LoadVars object that's going
| | 00:06 | to handle all the information that the viewer entered in your form.
| | 00:09 | Collecting it all together and then sending it to a
CGI is to create the LoadVars object that's going
| | 00:15 | to act as the container to hold all that information.
| | 00:19 | Making sure that you are still in frame one,
in layer A, in the contact.fla file.
| | 00:25 | Scroll to the top of your actions panel and click in one of the provided
empty line breaks, between the stop action and the comment line.
| | 00:34 | In this case for me that's line number 3.
| | 00:36 | And again let's create a new LoadVars object that
is going to create a container for the form results.
| | 00:43 | Type var space gather form and let's strict
type this to the LoadVars datatype.
| | 00:51 | So type colon LoadVars space equals space new space Load
Vars, open parenthesis, close parenthesis, semi colon.
| | 01:04 | So we now have a new LoadVars object that we give the
name gather form 2 that's going to act as a container.
| | 01:12 | Now just like when we use LoadVars to load verbals from a separate
text file into it and then when we want to refer to the verbals inside
| | 01:21 | of the LoadVars object we would as in this case,
just say gather form dot my verbal name, for example.
| | 01:29 | Just like we do that we can also take content
and put it inside of this LoadVars object.
| | 01:36 | So if I wanted to I could place something inside of this load
vars object by simply writing gather form dot my content.
| | 01:44 | And then I can place content within that.
| | 01:47 | That is the exact kind of thing you are going to do here.
| | 01:50 | You are going to write the action script
to do just that inside of a function.
| | 01:54 | The reason why you are writing it inside of a
function is so that you can trigger the actions
| | 01:59 | that place the content within this LoadVars object at a certain time.
| | 02:03 | That time would be of course when the viewer fills the feed back form in and
after they have entered all their information in correctly when they click
| | 02:11 | on that submit button and the form processing script says that
everything is okay, its going to then execute the function
| | 02:19 | which places the content within the LoadVars object.
| | 02:22 | So after the LoadVars object action you just wrote,
press return or enter a few times on your keyboard.
| | 02:29 | Then write function space sendForm.
| | 02:33 | A one word with capital F in form.
| | 02:36 | And then open parenthesis, close parenthesis, space open
curly brace, two line breaks and a close curly brace.
| | 02:44 | Inside of the sendForm function is where we are going to
take the text that the viewer enters in the form fields.
| | 02:51 | Assign them to variables and then insert those
variables into the gather form LoadVars object.
| | 02:59 | Then once all that's been finished, we will then send that LoadVars
object, all the variables inside of it to the CGI to be processed.
| | 03:07 | Now again as I mentioned in the previous exercise, different
CGIs on different web servers perform different ways.
| | 03:15 | But in many cases with CGIs, especially form
processing result CGIs they need to know
| | 03:22 | which email address they are supposed to email the form results to.
| | 03:27 | Now you should look in the help documentation of your particular
CGI or probably a better idea would be to call the support
| | 03:35 | for your internet service provider that manages that CGI script and tell
them, describe to them, what it is that you are trying to accomplish.
| | 03:43 | Regardless, along with the CGI should come some help
documentation that you should try to read through.
| | 03:49 | In there it should tell you that when you are creating
a form, what variable you should use to specify
| | 03:55 | which email address the form results should be sent to.
| | 03:59 | Now again that differs, depending upon your web server,
your ISP and the CGI script itself that you are using.
| | 04:06 | In this case I am going to simulate that by
using a variable called email underscore 2.
| | 04:12 | And again this information should be provided to you by the CGI, or
your ISP or better yet, the help documentation that comes with the CGI.
| | 04:22 | So the first action I am going to write is going to
insert a variable into the gather form LoadVars object.
| | 04:30 | So I am going to type gatherform dot email underscore 2.
| | 04:37 | And again this is one of those things you cannot make up on your own as
the CGI script, depending upon various factors, is expecting to receive.
| | 04:47 | The CGI script will be looking to receive certain
variable names that it will associate with certain things.
| | 04:53 | In this case my mock CGI is expecting to receive a variable called email2.
| | 04:58 | Its expecting that to be associated with the email
address that I want these form results to be sent to.
| | 05:05 | So what I am going to place inside of that variable is of course
the email address that I want my form results to be emailed to.
| | 05:12 | So I am going to type space equals space quote,
and then as a place holder for now I am going
| | 05:18 | to write in, your at email dot com, end quote and a semi colon.
| | 05:26 | Now of course if you were doing this yourself or for a
client you would actually write down the email address
| | 05:31 | within the quotes that you want the form results to be sent to.
| | 05:35 | And again depending up on the CGI you use you might
need to change the name of this variable from email2
| | 05:42 | to whatever variable the CGI itself is expecting to receive.
| | 05:46 | Next I am also going to create another variable
inside the gatherform LoadVars object that is going
| | 05:52 | to hold whatever the viewer enters in, in the username field.
| | 05:56 | So after the action adjust route, I am going to click
there, press return or enter to create a new line
| | 06:02 | and then again type gather form dot visitor
underscore name space equal space and then again what
| | 06:12 | that does is it creates a variable called visitor name which again you
would want to check with your CGI to see what variable it is expecting
| | 06:20 | for the form field for which the viewer is entering in their
name, but in our sample script here we are just going to say
| | 06:26 | that the CGI is expecting a variable called visitor name we are
taking that variable, inserting into the gather form LoadVars object
| | 06:35 | and inside of that variable we want to place whatever
the viewer has entered in our form in the name field.
| | 06:44 | Again the location for that name field is contact form dot username.
| | 06:52 | That is the instance name that we gave that field and that is
the instance name of the movie click that is holding that field.
| | 06:59 | Now we don't want to put that field in there.
| | 07:01 | We want to put the text that the viewer has typed in that field.
| | 07:05 | So after username type dot t-e-x-t, text and
then type a semicolon to end that action.
| | 07:12 | So what that action does, which you just wrote is that it creates a new
variable called Visitor underscore name in a gather form LoadVars object
| | 07:21 | and inside of that variable it places the text that the viewer has entered
in the username field in the form and that field in the form is inside
| | 07:31 | of a movie clip symbol instance with the name contact form.
| | 07:35 | You are going to want to repeat this process, of course with
a few minor changes for the other two fields in the form.
| | 07:42 | So click after the action you just wrote press return or enter again
| | 07:47 | and type gather form dot visitor underscore email space
equal space contact form dot user email dot text semicolon.
| | 08:03 | So again this creates a variable called visitor email in the gather
form LoadVars object and inside of that variable it's placing the text
| | 08:12 | that the viewer has entered in the form field that you called user email
and that field is inside the contact form movie clip symbol instance.
| | 08:21 | The last one is visitor comments.
| | 08:23 | So after the action you just wrote press
return or enter to add another line break
| | 08:29 | and type gather form dot visitor underscore comments space
equal space contact form dot user comments dot text semicolon.
| | 08:43 | So what that send form function does is that
it creates a new variable called email form
| | 08:49 | in the gather form LoadVars object and
in there it enters a string of text.
| | 08:54 | The string of text is the email address we want
these form results after the CGI processes them,
| | 09:01 | this is the email address we want those form results to be sent to.
| | 09:05 | And then the next three actions simply create new variables
inside of that same gather forms LoadVars object and in each one
| | 09:13 | of those variables it places the text that the viewer has
entered in the three form elements inside of our feedback form.
| | 09:21 | Now lastly all we have left to write is the action that
tells our gather form LoadVars object to actually send all
| | 09:29 | of these results to the appropriate CGI to be processed.
| | 09:33 | So after the last action you just wrote, user comments
dot text after that semi colon and press return
| | 09:41 | or enter a few times to create a couple line breaks.
| | 09:45 | Then type gather form dot send.
| | 09:50 | Send just like gather form dot load for example as you've seen using load
| | 09:56 | for your other LoadVars object, sends
these results to a particular location.
| | 10:02 | So just like LoadVars can be used to load
data it can also be used to send data.
| | 10:08 | And that's what this send command here does.
| | 10:10 | After that type in open parenthesis and notice how in the code
hinting pop-up window it tells us we need to specify a URL.
| | 10:18 | The URL is not where we are loading information
from, obviously because this is send.
| | 10:23 | This is the URL of the CGI script relative to where this SWF
file itself is that we are going to be sending this data to.
| | 10:32 | Now here is another occasion when you would need to refer to
the help documentation of the CGI to the help documentation
| | 10:39 | of your internet service provider itself or you can simply
call up technical support for your internet service provider
| | 10:45 | and ask them what is the URL to the CGI script to process forms.
| | 10:50 | In this case for our sample we are going to type in quote, forward
slash, CGI dash sys, as in CGI system, forward slash and then the name
| | 11:03 | of the CGI script that is going to process these form results.
| | 11:06 | In this case I am going to enter in a common one called form
mail dot pl for pearl script and then type in end quote.
| | 11:14 | Again you would need to check with your internet service provide or
the help documentation to get the exact name and location of where
| | 11:21 | that script is and what its name is that
will be processing these form results.
| | 11:26 | A common location for CGI scripts to be
stored at is a place called the CGI bin.
| | 11:32 | So just simply ask your internet service provider, what
it is that you are supposed to be entering in here.
| | 11:37 | Now depending up on the CGI script that
is being used to process the form results,
| | 11:43 | the script may send results from the server back to the browser again.
| | 11:47 | And usually that's just some kind of confirmation
like a thank you message and so forth.
| | 11:52 | Now as you can see in the code hinting, it
is next asking up what the window will be.
| | 11:57 | The window is, when the CGI script sends back that thank you message
or sends back those results, where should it display those results.
| | 12:05 | The most common thing in this case to enter in and
what the default is with how Flash treats it is
| | 12:10 | to type comma space, quote, underscore blank, end quote.
| | 12:17 | Which means that those results will be sent back to a blank window.
| | 12:20 | Now if you had another frame in your html page
that you wanted those results to get sent back to,
| | 12:25 | you could specify the name of that frame in between the quotes.
| | 12:28 | In this case lets just leave it set to the default, underscore blank.
| | 12:32 | The next thing again you can see in the code hinting pop up is the method.
| | 12:37 | Now the method is either post or get.
| | 12:39 | And again you should refer to the help documentation for
the CGI or your ISP to find out which you should get.
| | 12:47 | Now the get method is an older one, so more
than like the method you should specify is post.
| | 12:53 | So after underscore, blank, end quote, type comma,
space, quote and then in all caps POST, end quote.
| | 13:03 | Then, type a close parenthesis and a semicolon to end this action.
| | 13:08 | Again there is lots of different sorts of variables in the action script
here that you will need to check with the help documentation for the CGI
| | 13:16 | or your ISP themsees to make sure that
you get the variable names correct.
| | 13:20 | Not only the variable names but the location of
where the CGI is that will process those results.
| | 13:26 | What the method is that the result should be sent to the CGI in
post or get, as well as whether or not you want to load the results
| | 13:33 | from the CGI script in a blank window in a separate frame, and so forth.
| | 13:38 | Now since this script is actually getting quite large, let's go and add
some comment lines here to better define it inside of our actions panel.
| | 13:46 | To make my life a little easier, I'm going to select one of the other
long comment lines that I already see here in the actions panel.
| | 13:53 | Copy it. And I am going to click before my action var gather form.
| | 13:59 | I'm going to click at the beginning of that action.
| | 14:02 | Press return or enter once to create a line break and then select
that empty line break above that action and paste my comment line.
| | 14:10 | Then I am going to select the comment in between the less than and greater
than symbols and I'm going to change it to read, sendForm LoadVars.
| | 14:19 | Then I am going to select that comment line, copy it, scroll down
to the last closed curly brace that ends the send form function,
| | 14:31 | click after that closed curly brace, press return or enter to
create an empty line break and then paste that comment there.
| | 14:39 | Then I'm simply going to click before the word send in that pasted
comment and type a forward slash to mark the end of that comment.
| | 14:46 | The last thing that I should specify so that I can actually utilize this
sendForm function is where this sendForm function will be executed from.
| | 14:57 | Now remember what the sendForm function does, is it takes everything
that the viewer has entered in our feedback form and sends it
| | 15:04 | to the appropriate CGI script on the server to actually be processed.
| | 15:08 | So I only want this send form function to be executed after it is
confirmed that the viewer information in each of the form fields.
| | 15:19 | Now so that I get my spelling and capitalization correct, while I am
here I am going to select the sendForm function name including the open
| | 15:27 | and close parenthesis after it and I am going to copy that.
| | 15:31 | Then the place that I want have this send form function to be executed
from is from within my If statement which I wrote earlier that confirms
| | 15:40 | that the viewer has correctly entered information in all of the fields.
| | 15:44 | Inside of the actions panel if you scroll down to the on release
function you'll see there where it says else go to and stop correct.
| | 15:53 | That part of our If statement is where it has been verified that the
viewer has correctly entered information in each three of the form fields.
| | 16:02 | So after Else, open curly brace, click there, press return or enter to
create an empty line break and then paste the function name that you have
| | 16:11 | in your computer's clipboard and then simply add a
semi colon after that function call to end that action.
| | 16:18 | So what happens is that when the viewer enters
information in each of the fields and they click
| | 16:23 | on the submit button, it performs the form validation script.
| | 16:26 | It basically checks to make sure that the viewer has
entered something in each three of the text fields.
| | 16:32 | If they have not it displays the error message for them.
| | 16:36 | If they have meaning, they have entered information in each three of the
form fields, its not only going to display the correct message for them
| | 16:44 | but its going to execute the send form function which will then
take everything they entered in each there of those fields,
| | 16:52 | put them inside of variables in the gather form LoadVars
object and take all that object, everything inside of it,
| | 17:01 | and send it to a CGI script to then be processed
and emailed to the email address that you specified.
| | 17:08 | Again there are all sorts of variables that you have to deal with
when working with CGI scripts, the various ones that are out there,
| | 17:15 | including the various types of web servers
that are available for use as well.
| | 17:19 | So make sure you verify a lot of variable names as well as the location
and name of the CGI script as well as the variable name that applies
| | 17:27 | to which email address that form result should be sent to and whether
| | 17:31 | or not it should be even be using the post
or get method to send those form results.
| | 17:36 | So there is quite a lot for you to check in to but this is the basics of
how to take your form results and send them to a CGI scrip to be processed.
| | 17:45 | Now that you have hooked the form up so they
can actually interface with the CGI script,
| | 17:50 | the last step is to actually style the form so it looks better.
| | 17:54 | Currently the text that is being displayed inside of the three form
field is Alias text, means that it has jagged edges around the outside
| | 18:02 | and doesn't look so hot and secondly its not styled the way we want it to.
| | 18:06 | It's not using font we want, nor is it
using the font size or color that we want.
| | 18:11 | In the next exercise you are going to learn how to stylize
the form elements so they look how you want them to look.
| | 18:18 | Before we continue on to the last movie however,
make sure that you save the changes to this FLA file.
| | Collapse this transcript |
| Defining tab order (optional)| 00:01 | >> Up until this point you have a simple form
that even does a little bit of simple form validation.
| | 00:06 | If I test the form as it is right now, And I
click inside the name field and I enter my name.
| | 00:14 | When I press the tab key on the keyboard.
| | 00:17 | Notice how it automatically goes to and selects the next field in sequence.
| | 00:22 | In this case it is email address.
| | 00:24 | You can tell which field is selected because not
only do you have the blinking insertion icon there
| | 00:29 | but also there is a green halo around the outside.
| | 00:32 | If I press tab key again it will go to the next field in sequence.
| | 00:37 | Now I didn't tell Flash which field it should go to in sequence as the
viewer presses the tab key on their keyboard to advance to the next field.
| | 00:46 | Flash did that for me automatically.
| | 00:48 | And it does do that in the order that I created the fields.
| | 00:51 | Because I created the name field first and then the email address field
and then comments field, as the viewer presses the tab key on the keyboard
| | 01:00 | that is the same order that it will advance through
the fields as the viewers pressing the tab key.
| | 01:06 | Now Flash also gives you the ability to change the order at
which the fields are selected as the viewer presses the tab key.
| | 01:13 | It's an action call tab index.
| | 01:16 | I'm going to show you how to use the tab index action
to change the order at which fields are selected
| | 01:22 | as the viewer presses the tab key on their keyboard.
| | 01:25 | Now why you would want to do something like that on a form that
is so small as is this Contact Us form is probably not so evident.
| | 01:34 | But after I show you how to use the tab index action, I'm going to show
you another, better use of how to go about applying that particular action.
| | 01:43 | Go ahead and close your preview window if you have
it open and you should still be contact.fla.
| | 01:49 | First make sure that the first key frame in your A
layer is selected and then open your actions panel.
| | 01:56 | Scroll to the top of the actions panel and click on line three
in this case or whichever line comes after your stop action.
| | 02:06 | The first thing you should do is specify which
field is the first item in the tab index.
| | 02:11 | In other words which is the first field
the user is going to be interacting with.
| | 02:15 | To do that select the Insert a Target path
button at the top of the actions panel.
| | 02:20 | Expand the contact form the movie clip symbol.
| | 02:23 | And then scroll down until you locate username.
| | 02:27 | That is where the viewer is typing in their
name and that is the first field in the form.
| | 02:32 | Select that and click ok.
| | 02:34 | Flash will automatically insert the name to that field
and the path to it in your actions panel for you.
| | 02:40 | Then type dot tab Index with a capital I in Index.
| | 02:46 | Then type space equals space one semicolon.
| | 02:51 | That's it.
| | 02:51 | You have just defined the Username text field
as the field that is the first item in sequence.
| | 02:58 | Then as you can imagine just press return or
enter and define the next item in the sequence.
| | 03:05 | Now as I showed you by default, the email field, where the
viewer can specify their email address is automatically the field
| | 03:12 | that is selected next when the viewer presses their
tab key when they are entering their username.
| | 03:18 | That is something that Flash did for us automatically.
| | 03:21 | Let's however specify that instead of the
username field being selected next.
| | 03:27 | Let's choose that the comment field is actually
the one that should be selected next instead.
| | 03:32 | Click on the Insert a Target Path icon again.
| | 03:35 | Expand the contact form movie clip symbol.
| | 03:38 | And locate user comments, select that and then click ok.
| | 03:44 | Now type dot tab Index making sure to have the
capital I in Index space equals space 2 semicolon.
| | 03:54 | So we're overwriting what Flash did for us by default and
instead of having the user email field selected next in sequence,
| | 04:03 | we are instead changing that just so you can see how the tab index action
works and we are overriding that the in specifying that the comments field
| | 04:11 | which is the bottom most field is actually the one that's selected next.
| | 04:15 | Lastly let's specify that the user email field is set to Tab Index 3.
| | 04:20 | So again press return or enter to create a line
break, click on the Insert a Target Path icon.
| | 04:27 | Expand the contact form movie clip symbol
and choose user email and click ok.
| | 04:32 | They type dot Tab Index space equals space 3 semicolon.
| | 04:38 | Go ahead and test your movie now to see
what changes those actions have brought.
| | 04:43 | So I am going to click in the Name field which is
set to Tab Index 1, then I'm going to type my name.
| | 04:49 | Now I am going to press my tab key.
| | 04:51 | Now before, before we added any Tab Index actions as you saw Flash
automatically selected for us the next field in sequence, email address.
| | 05:00 | But the Tab Index actions that you have just
written overwrite that default behavior.
| | 05:05 | So that now you are specifying that the comments field,
the last big field down here actually comes next.
| | 05:12 | So when you press the tab key, notice how now that
is the next field that is selected in sequence.
| | 05:18 | If I enter in a comment here and then press my
tab key again, now email address is selected.
| | 05:23 | Because again that's how you specified the Tab Index sequence should occur.
| | 05:27 | First is name, then comments and then email address last.
| | 05:32 | So tab index gives you really great control over how to specify as the
viewer is pressing their tab key to advance to the next field in sequence.
| | 05:42 | How that process occurs.
| | 05:44 | Now again I mentioned that it is not really evident why you would want
to use something like that in a form that is so small like this one
| | 05:51 | and moreover when it was already working properly to begin with.
| | 05:55 | We changed it so that its not really working
the way optimally you would want it to work.
| | 06:00 | Just so you could see how the action itself worked.
| | 06:02 | I am going to show you however an instant in which
the Tab index action would be greatly helpful.
| | 06:09 | When I close this preview window and feel free to follow
along if you'd like, and I am going create a new fla.
| | 06:15 | I'm going to go ahead, minimize this and give
myself a little more room to work with here.
| | 06:21 | And then I'm going to open up my components
panel again by choosing window, Components.
| | 06:31 | In the Components panel I am going to make sure that
I have the users interface components maximized.
| | 06:35 | And I am going to locate the text input component and then
I'm going to drag out a few instances of that component.
| | 06:43 | So I'm going to drag this one out here
and I'm going to drag out about 10 total.
| | 06:47 | Just kind of randomly position them here in this stage.
| | 06:51 | That's 5, 6, 7, 8 9, 10.
| | 06:57 | Then I am going to go ahead and position them.
| | 06:59 | Now I don't necessarily want them to be positioned in
the same order that I dragged them out on to the stage.
| | 07:06 | So I'm going to go ahead and position them side by side here.
| | 07:13 | About like so.
| | 07:15 | So they are in two columns.
| | 07:19 | And you don't have to be precise, because you can use your align panel
later, to make sure that they are all aligned properly with each other.
| | 07:34 | Like so. Now what we have here represents a more complex form.
| | 07:40 | If you are creating a form inside of Flash
to take more information from the viewer.
| | 07:44 | For example may be they are purchasing something from your store that you
have built inside your Flash and they have to fill out their first name,
| | 07:51 | their last name, their credit card numbers, their
mailing address, their shipping address and so forth.
| | 07:56 | You are going have lots of different fields in the
form for the viewer to provide that information to you.
| | 08:02 | So it is not uncommon for you to have
multiple fields that make up your form.
| | 08:07 | In this case we have 10 fields for our form and when I drag the text
input component out on to the stage I didn't make sure to position them
| | 08:16 | in the same order that I wanted the tab index to occur.
| | 08:19 | In other words I didn't check make sure to they were
positioned in the order that I wanted the viewer
| | 08:25 | to be able select those fields as they press the tab key on their keyboard.
| | 08:31 | If I test my movie as it is so far and click inside one of those fields,
if I press the tab key on my keyboard, notice how it jumps down here
| | 08:40 | to this field in the second row in the second column.
| | 08:44 | If I press my tab key again you can see that it jumps
to a completely different field so on and so forth.
| | 08:50 | In this case, because this is a more complex form I would want to go in
there and specify the precise order that I want the fields to be selected
| | 09:00 | in as the viewer presses the tab key on their keyboard.
| | 09:02 | And this is a great use of the Tab Index Action.
| | 09:07 | Optimally, what I would like to happen, is that when the
user clicks on the first field and enters their information,
| | 09:13 | when they press the tab key on the keyboard it
goes down to the next item in that same column.
| | 09:20 | So let's take look at using the Tab Index Action to better define the
tab order of how the viewer is going to tabbing through these fields.
| | 09:29 | The first thing that you need is to be able to give each
of these fields an instance name to be able to tell Flash
| | 09:35 | which field is first and second and third and so forth.
| | 09:38 | Each field has to have a name.
| | 09:40 | So go ahead and close your preview window and let's
start by assigning names to these various fields.
| | 09:46 | Go ahead and click on the very top left field.
| | 09:49 | And then in the Property Inspector click in the instance name
field and call this simply My Field with a capital F in Field 1.
| | 09:59 | Then I am going to click on the next field down
and type My Field 2 and I am going to keep doing
| | 10:07 | that until I get all the way to the bottom
right which should be My Field 10.
| | 10:11 | Now to make it a little more streamlined with naming these fields,
I am going to select the Instance Name of the properties inspector
| | 10:18 | and copy it using my keyboard Control C
on Windows or Command C on the Macintosh.
| | 10:24 | Then I am going to click on the next field down, click in
the Instance name field name in the properties inspector
| | 10:30 | and simply choose command V or Control V to paste that in.
| | 10:34 | And then change that 2 to a 3.
| | 10:37 | I'm going to continue doing that all the way down to My Field 10.
| | 10:41 | So there is My Field 4, My Field 5, 9 and then lastly 10.
| | 10:54 | So now each of those fields has its own unique name and I have labeled
them in the same order that I want the tab index to be defined in.
| | 11:02 | My Field 1, My Field 2, and so forth.
| | 11:04 | So now we need to write the Tab Index Actions that specifies
that those fields should go in the order that we've set.
| | 11:11 | To do that I am going to create a new layer and I am
going to rename this new layer to be title A for action.
| | 11:16 | And again we're always keeping our actions
that are in the time line in their own layer.
| | 11:20 | I am going to select the first key frame and
in the A layer and open up the Actions panel.
| | 11:26 | I am going to also close my components
panel as I don't need that anymore either.
| | 11:31 | And then I am going to click inside the scripts pane in the
actions panel, and then I am going to insert a target path
| | 11:38 | by clicking the Insert a Target Path button, and
I am going to choose the first field, My Field 1.
| | 11:43 | And then click ok.
| | 11:46 | As you've seen before after that I am going to type Tab Index, making
sure I get the capital I in index, space equals space 1 semicolon.
| | 11:56 | Now what I need to do is repeat that for the remaining
nine fields for all ten fields inside of my forms.
| | 12:04 | So I am going to select that action, copy it, click at
the end, press return or enter to create a new line break,
| | 12:12 | paste and change My Field 1 to be My Field
2 and change it to be order number 2.
| | 12:18 | I am going to repeat that process for the remaining fields.
| | 12:26 | So now you've targeted each field in your
form and you've specified the tab index.
| | 12:35 | Now when you test your movie and you click on the first field in the form,
when you press your tab key, it should advance down to the next field
| | 12:43 | in sequence and it should go all the way
down that column and then when it gets
| | 12:47 | to the end it should jump up to the next
column and work its way down again.
| | 12:51 | So let's test and see it works ok.
| | 12:53 | I press tab and it goes down, down, down, down now it
should go back up and it does until it goes to the end.
| | 12:59 | When it gets to the end, I press tab and
it goes back to the beginning again.
| | 13:03 | So there is a really great example of how a tab index can really
benefit both you, your viewer and the usability of more complex forms.
| | Collapse this transcript |
| Styling the form| 00:01 | >>When wanting to style components as you are
about to do, there are quite a few ways to go about doing it.
| | 00:07 | So keep in mind as you follow through the steps that I'm about
to work through, that this is simply one to go about doing it.
| | 00:14 | Components can also be skinned, which means you
can change the graphics that the components use
| | 00:19 | as they are displayed and as the viewer interacts with them.
| | 00:22 | Now skinning is quite an involved topic that is
best if saved for a completely separate title.
| | 00:28 | However what I am going to show you in the next few exercises is
using something called the underscore global dot style declaration,
| | 00:36 | which basically is a fancy name that means that is going to allow
you to change a few simple elements about how the content inside
| | 00:44 | of these text fields, inside of these components also are going to appear.
| | 00:50 | Inside of the first key frame in contact dot fla, in the
actions panel, locate the comment end sendForm load vars.
| | 01:00 | Which you were working with in the last exercise.
| | 01:03 | Click at the end of that comment line and press return or
enter a few times to create some empty line breaks beneath it.
| | 01:10 | Let's first write an underscore global dot style declaration
to set how the text that appears inside of the form elements
| | 01:19 | in those components that make up the form to be a specific font.
| | 01:23 | To do that simply type underscore global dot Style dot set style
again all one word, the capital S in style, open parenthesis,
| | 01:36 | and then the name of the style that we
want so set is called the font family.
| | 01:42 | So type quote fontFamily all one word with a capital F in Family, end
quote, comma, space and the fontFamily or the font that we want to choose
| | 01:55 | to be displayed as the font that's used as when the viewer types
inside of those form elements is quote Bitstream Vera Sans,
| | 02:06 | which of course we have been using through out this title.
| | 02:08 | Now if you are on the Macintosh, type Bitstream Vera Sans bold, like so.
| | 02:15 | If you are in Windows, just leave it Vera Sans and then type in end quote.
| | 02:22 | Then type a close parenthesis and a semicolon to end that action.
| | 02:26 | So if you are on a Macintosh it would read Bitstreams
Vers Sans Bold end quote, end parenthesis, semi colon.
| | 02:33 | On Windows you would type just as you see here, Bitstream
Vera Sans, end quote, close parenthesis, semi colon.
| | 02:41 | Now only if you are on Windows, do this following step: Go ahead and create
an extra line break and type underscore global dot style dot set Style
| | 02:53 | as you did before, open parenthesis, fontWeight, a one
word with capital W in weight, end quote, comma space,
| | 03:04 | quote bold, end quote, close parenthesis, semi colon.
| | 03:11 | Now again that goes back to how Windows and Macintosh
operating systems treat both dealing with fonts as well
| | 03:18 | as font variations, such as bold, italics and so forth.
| | 03:22 | Windows users have to specify that the font
weight itself for the fontFamily chosen is bold.
| | 03:29 | Macintosh users can refer directly to the font Bitstream Vera
Sans bold, so therefore don't have to complete this extra step.
| | 03:36 | Now if you see the changes that those two actions have made to
your file, go ahead and save the changes you've made to this FLA
| | 03:44 | and test your movie by choosing control enter or command return.
| | 03:50 | Now when I click inside the name field and type in something,
notice how it is now in a bold font using Bitstream Vera Sans.
| | 04:00 | Now it still looks a little bit off and there are a few
things that I still want to do to look a little bit better.
| | 04:06 | But now as you can see those actions are taking effect.
| | 04:10 | The font is now the correct font that you chose, Bitstream
Vera Sans, and on windows it is using the bold font weight,
| | 04:17 | whereas in the Macintosh it's using Bitstream Vera Sans Bold itself.
| | 04:22 | Go ahead and close your preview window
and then go back into your actions panel.
| | 04:26 | Now even though you wrote an action that specifies the
name of one of your shared fonts, Bitstream Vera Sans,
| | 04:33 | Flash is actually not embedding the outlines for the font.
| | 04:37 | Nor is it using the outlines to display that font.
| | 04:41 | Even though again it is a shared font.
| | 04:43 | You need to add one more action to have Flash utilize the actual
outlines for your shared fonts, so that the text that is displayed
| | 04:51 | in those text files is actually anti-aliased and looks good.
| | 04:55 | So click after the last action you just wrote.
| | 04:59 | Press return or enter to create a new line break and then type, underscore
global dot Style dot set style open parenthesis, quote embedFonts,
| | 05:14 | again one word with capital F in fonts, end quote, comma
space true, end parenthesis, semi colon to end the action.
| | 05:25 | That means that is going to embed the font outlines,
even though it is referring to the actual shared fonts
| | 05:31 | so again don't worry you are not adding to the file size yet.
| | 05:34 | It's going to refer to those font outlines for the shared fonts
for the text that the viewer is entering inside the text fields.
| | 05:41 | So now after just making that one change, if you save your FLA file again
and test your movie, when you click inside of one of the form fields
| | 05:50 | and start typing, you can clearly see a difference now.
| | 05:53 | Notice how the text is all nice and smooth, because it is anti-aliased.
| | 05:58 | You are actually using the font outlines for the font to be displayed in.
| | 06:02 | So therefore it is now in nice anti-aliased font.
| | 06:06 | Next let's use that underscore global dot style declaration to
also set not only the font size but also the color as well.
| | 06:14 | Close your preview window and return back to contact
dot fla and click after that action that you just wrote.
| | 06:22 | Then press return or enter to create a new line break and again type
underscore global dot style dot set style open parenthesis, quote fontSize,
| | 06:34 | a one word with capital S in size, end quote, comma space, 12
as in 12 pixels, end parenthesis, semi colon to end the action.
| | 06:46 | Last let's specify the color that the text
is going to be displayed in as well.
| | 06:51 | So create a new line break and type underscore global dot style dot
set style open parenthesis, quote color, end quote, comma space.
| | 07:04 | And then when you are specifying the color here in the
actions script you want to specify the hexadecimal value.
| | 07:10 | The hexadecimal value is a six digit value and you can easily get that if
you would like by clicking on one of the color swatches in your tool box,
| | 07:18 | such as the fill color and hovering over the color you want.
| | 07:21 | Say may be you the color to be a dark blue purplish color like this.
| | 07:26 | As you can see up here in this little box, the
hexadecimal value for that particular color is 3300ff.
| | 07:35 | That six digit value is the hexadecimal value.
| | 07:38 | And when you are writing that in an action
script you simply precede it by 0X.
| | 07:43 | So you would write 0X3300ff.
| | 07:48 | Back inside of my actions panel and this
time I am going to use a different color.
| | 07:53 | So I am going to type 0X and the hexadecimal
value of the color I want which is 3f7fbe.
| | 08:01 | Then I am going to type a close parenthesis
and a semi colon to end that action.
| | 08:10 | Then let's see what effect those changes have.
| | 08:13 | So save your FLA and test your movie.
| | 08:16 | When I click inside of that name field and now I type
my name, notice that it is in the exact font color
| | 08:22 | that I picked, the font size, the font itself and so forth.
| | 08:27 | So I can continue to add all these elements here inside
of these form fields and it's exactly how I specified it.
| | 08:34 | It looks great.
| | 08:34 | Now when I click on the submit button down at the bottom, it is going to
submit those form elements and it tells me 'Thank you for taking the time
| | 08:45 | to leave your comments, Shane Rebenschield' and again
I have the black so it's opening up by browser window,
| | 08:49 | 'We look forward to seeing you in one of our stores soon.'
| | 08:52 | So the form elements have then been sent to the cgi to be
processed and then emailed to the email address I specified.
| | 08:58 | Lastly as you probably saw, when you previewed your movie, if I preview
it again, notice how the submit button itself is not nicely anti-aliased.
| | 09:07 | Let's go ahead and fix that now as a last sort of housekeeping measure.
| | 09:10 | I am going to close my preview window
and hide my actions panel for a moment.
| | 09:16 | And then on the stage I am going to double click on
the contact form movie clip symbol to open it up.
| | 09:21 | And then I am going to double click on the submit
button movie clip symbol there to open it up.
| | 09:27 | On the stage is that dynamic text field.
| | 09:30 | Go ahead and click on that once to select it and then in the properties
inspector from the font pull down menu choose the font Vera Bold.
| | 09:40 | On Windows, make sure that you click the full bold button, and then I
am going to want to set this down actually to one point size smaller.
| | 09:48 | I think 11 pixels may be a little bit better.
| | 09:50 | And then I am going to save the changes I have
made to this FLA once more and then test my movie.
| | 09:57 | When I do, you can see that it says the submit button which I can
see is aligned a little high, that's fine, I am going to go in
| | 10:02 | and select that text field and move it down a couple of pixels.
| | 10:07 | Test my movie again.
| | 10:09 | There is my submit button now, and it's in the exact
font that I want as well as being nicely anti-aliased.
| | 10:15 | So there you have your complete contact form.
| | 10:18 | It not only does some simple form validation, by checking to make
sure the viewer is entered their name in each of their text fields,
| | 10:25 | but it also allows you to specify exactly which font,
color, size and so forth that is being displayed in each
| | 10:33 | of these fields as the viewer is entering information into them.
| | 10:36 | And once the viewer has entered information in to each of these
fields, depending upon if they have entered information in each field,
| | 10:44 | they will display the appropriate Thank you or error message.
| | 10:48 | And then if they have entered information in each field when they
click on the submit button, it's going to take all that information,
| | 10:55 | package it all up into a load vars object and send it to a cgi script
to be processed and then emailed to whichever email address you specify.
| | 11:04 | So you've covered quite a bit of information in this chapter.
| | 11:07 | And I hope you can see based on that how
flexible working with forms is inside of Flash.
| | 11:12 | It gives you a lot of control of not only how
they work but how they are presented as well.
| | 11:17 | So there you have the finished feedback form.
| | 11:19 | Go ahead and close the preview window
when you are finished marveling at it,
| | 11:23 | save the changes again to contact dot
fla, and go ahead and close that FLA file.
| | 11:29 | You won't be needing access to it right now.
| | 11:31 | Now that you have completed the last module in the
LAR worksite, you have built it the About Us module,
| | 11:38 | built the Frames module, you've built the Feedback form module.
| | 11:42 | In the next chapter you are going to learn
how to build the main navigation menu,
| | 11:46 | that allows the viewer to switch back
and forth between all of these sections.
| | 11:51 | In the next chapter is really where you start to see
all of these content come together into a cohesive site.
| | Collapse this transcript |
|
|
10. Building the Main MenuPreviewing what you're building| 00:01 | >> In this chapter you're going to learn how to build the main navigation
bar that the viewer is going to use to navigate through the entire site.
| | 00:09 | And again, as I mentioned in a previous chapter, this is sort of where you
start to see everything come together, because the navigation bar is used
| | 00:17 | to allow the viewer to load in all the other sections that
you've been working on throughout the rest of this title.
| | 00:22 | This is where you start to see all the elements be
pulled in to comprise your complete finished site.
| | 00:29 | To give you a better idea of what you're gonna be working on before
you get started, open up your preferred web browser and navigate
| | 00:35 | to www dot Lynda dot com forward slash
int flash eight forward slash laiworks.
| | 00:46 | When you navigate to that URL, you'll
see the navigation bar appear in the top.
| | 00:50 | It animates in with a simple mask wipe.
| | 00:53 | So a mask animates across our navigation bar,
just to give it a little extra visual effect.
| | 00:59 | Then when you hover your mouse over one of the
navigation options, notice how the color changes.
| | 01:04 | You're going to be doing that using action script.
| | 01:08 | Then when you select one of those options, that option, much like
the submenu options in your about us module, then becomes disabled,
| | 01:16 | and the viewer can't click on it or do anything to it.
| | 01:19 | Additionally, it stays locked in that same rollover color, that green.
| | 01:23 | Then when you select another one of the options from your
navigation bar, the option that was disabled is now re-enabled,
| | 01:30 | and again the option that they clicked on is now disabled.
| | 01:33 | So there's quite a few things going on inside the navigation bar.
| | 01:37 | Not only do the options change when you roll your mouse over and
off, but they also become disabled when you click on an option,
| | 01:43 | as well as the other options becoming re-enabled
when the viewer selects one of those options.
| | 01:48 | Additionally of course, when you click on one of the navigation
bar options, it actually loads the content for that section,
| | 01:54 | which is what it was meant to do in the first place.
| | 01:57 | So there's quite a few things going inside the navigation bar,
and that's what you're gonna construct inside of this chapter.
| | 02:03 | Before you continue on to the next exercise however, when you're finished
viewing this navigation bar, go ahead and close your browser window
| | 02:10 | and return to your site directory in the
laiworks directory on your desktop.
| | 02:15 | It's here where you're going to start the next exercise.
| | Collapse this transcript |
| Setting up| 00:01 | >>Speaker: For those of you that have access to the exercise files to
both save you some time as well as save you from repeating action script
| | 00:09 | that you already know, I have created a starter
file for you to build the navigation bar.
| | 00:15 | Inside of your side directory you will notice
there is as FLA called main underscore dot fla.
| | 00:21 | Go ahead and open that FLA up inside of Flash 8.
| | 00:25 | If you scroll towards the top of a stage and you
take your play head and scrub it back and forth,
| | 00:30 | you will see that white animation that I was referring to earlier.
| | 00:34 | Again, if you look in your layers, you can see
that it is a simple shape tween,
| | 00:39 | and that shape tween is masking your navigation
bar including the options inside of it.
| | 00:45 | So as that wipe, that mask moves across and animates,
it thereby reveals the options of the navigation bar.
| | 00:53 | Now as you have seen thus far at the beginning of working on
each new module you are going to want to first make a link
| | 00:59 | to the shared font that you are going to be using in this exercise.
| | 01:03 | To do that choose File, Import, Open External Library, navigate to
your site directory, and double click the file Shared lib dot fla.
| | 01:14 | When that shared lib library panel opens select the shared font Vera Bold
Oblique, there is just one font that we have been using in the construction
| | 01:23 | of this main menu and take that Vera Bold Oblique shared font
and drag it into the library of your main menu dot fla file.
| | 01:31 | Then close that shared lib library panel.
| | 01:34 | Next let's assign that shared font to our main menu options.
| | 01:39 | The layer that contains main menu options, is in a
locked layer that is being masked called Menu options.
| | 01:47 | Go ahead and unlock that layer first and make sure that your
play head is all the way at the very end of the time line.
| | 01:54 | Then on the stage click once on the About Us options.
| | 01:58 | If you look in the Properties Inspector you will notice that
there is an instance of a movie clip symbol called MC About us.
| | 02:04 | Additionally you will notice that it also has
an instance name of MM underscore about us.
| | 02:11 | All of these main menu options already have instance names applied to them.
| | 02:15 | Again to both save you time as well as to prevent
you from repeating things that you already know.
| | 02:20 | It's good to keep that in mind though, so that as you begin to
write the action script that changes how those options interact
| | 02:27 | and how they look you know which instance
names those particular actions have.
| | 02:32 | Next double clip on that movie clip symbol instance to open it
up and then click once on the dynamic text field inside there.
| | 02:41 | You will also notice that that dynamic text
field already has an instance name of text label.
| | 02:47 | As you will also see in just a minute every other dynamic text field inside
of the other options also have the exact same instance name, text label.
| | 02:56 | As you will see later when you are writing the action script that's going
to help to streamline the process of writing a function to change the color
| | 03:03 | in interactivity of each of those options
because they all have the same name.
| | 03:07 | But for now what we want to do is change which font that option is using.
| | 03:12 | With that dynamic text field still selected, from the Font
pull down menu select your shared font Vera Bold Oblique.
| | 03:21 | If you are on Windows, make sure that you click
the full bold and full italic buttons as well.
| | 03:27 | Now you just need to repeat that same process
for the remaining three main menu options.
| | 03:32 | So go back to scene 1, double click on the frames movie clip
symbol there on the stage, select a dynamic text field on the stage
| | 03:41 | and from the font pull down menu again
choose the shared font Vera Bold Oblique.
| | 03:47 | On Windows again make sure that you have the
full bold and full italic buttons depressed.
| | 03:52 | Then I am going to go back to scene 1, do the same
thing for the locations option making sure again
| | 03:58 | on Windows to select the full bold and full italics buttons.
| | 04:02 | And then lastly for the Contact Us option.
| | 04:07 | When you are finished linking the shared fonts for the
main menu options return back to scene 1 and make sure
| | 04:18 | that you save the changes that you have applied to this fla file.
| | 04:22 | In the next exercise you are going to start writing the action script that
allows those options to be modified when the viewer interacts with them.
| | 04:29 | So as the viewer rolls the mouse over and then off those main menu options,
| | 04:34 | you are going to write some action script
to modify how those options appear.
| | Collapse this transcript |
| Scripting onRollOver, onRollOut, and onRelease| 00:01 | >> Now that you have linked a F font to your main
menu options, the next step it to write some action script.
| | 00:08 | What you are first going to start writing is a few
variables that are going to hold color information,
| | 00:14 | that you will apply to your main menu
options as the viewer interacts with them.
| | 00:19 | So go ahead and select the last key frame
in layer A and open up your actions panel.
| | 00:25 | As you can see when you open the actions panel for
those of you who that have access to the exercise files,
| | 00:31 | I have already included some action script here for you.
| | 00:34 | Again that was for a few different reasons, to
both save you some time as well as prevent you
| | 00:39 | from writing action script that you are already familiar with.
| | 00:43 | As a quick review you can see there is a simple
stop action so that when the play head gets
| | 00:48 | to the last frame it stops there instead of
going back to the beginning and playing again.
| | 00:53 | There is also a function called reactivate buttons, and its sole purpose
in life, as you'll see a little bit later is to re-enable our menu options.
| | 01:02 | It just targets each of our objects, About Us, Contact Us,
Frames, locations and so forth and sets the enable property
| | 01:10 | of those movie clip symbol instances back to true again.
| | 01:13 | So when we want our main menu options to be
reactivated we can simply execute this function.
| | 01:20 | It's doing a few other things down here inside this
function as well, which we'll go back and look at later.
| | 01:26 | If you scroll down some more inside your actions panel you will notice
there are some rollover and rollout actions for your options About Us,
| | 01:36 | Frames, Locations and so forth already all defined for you.
| | 01:41 | Now the About Us option which you will be working with in this
chapter the rollover and rollout actions is as yet undefined.
| | 01:49 | There's nothing going on inside those functions.
| | 01:51 | You are going to learn how to write the action scripts within
the on rollover and on rollout functions of the About Us option,
| | 01:58 | but the other options have already been completed for you.
| | 02:01 | Again because once you know how to do it
one time the others are exactly the same.
| | 02:06 | So the first step here is to create some variables
that is going to hold hexadecimals color values for you
| | 02:13 | so you can then apply those color values to
your main menu options at various points.
| | 02:18 | Scroll to the top of your actions panel and then click after the action
in line number 2 which is mm underscore logo dot enable equals false.
| | 02:28 | Click at the end of that action and press return or
enter a few times to create a couple empty line breaks.
| | 02:34 | It's here where we're going to create a few comment lines to better
separate in our actions panel the functionality that we are about to write.
| | 02:42 | To save myself a little bit of time, I'm going to select the comment
line that is down beneath it in the actions panel and copy that.
| | 02:50 | Then I'm going to click on line 4, one of the empty
lines I just created and paste the comment line.
| | 02:56 | Then I am simply going to change the text comment in there to read 'define
option colors' then I am going to select that comment line, copy it,
| | 03:13 | click at the end of that comment line, press return or enter
a couple times and then paste that copied comment line.
| | 03:21 | In the pasted copied comment I am going to click before the
word define and then type a forward slash to end that comment.
| | 03:27 | Next let's quickly create a few variables
to hold our hexadecimal color information.
| | 03:32 | So click in the empty line break between the two comment lines that you've
just written and type var space overColor, all one word with a capital C
| | 03:42 | in color, this is going to hold a number, so let's strict type into
the number datatype by typing colon number, space equals space,
| | 03:52 | and then the number which is going to be the hexadecimal value
of the color that we are adding to this overColor variable.
| | 03:59 | Type 0X7DPC6P and then add a semicolon to end that action.
| | 04:10 | Then press return or enter again and type
var outColor colon number space equal space,
| | 04:21 | 0X and then 000000 which is black, and then semicolon to end that action.
| | 04:30 | So what you've just done, is that you have just store two
hexadecimal color values in two variables, one called ovreColor,
| | 04:36 | which we will utilize then the viewer rolls the mouse
over one of our options and outColor which we will utilize
| | 04:43 | when the viewer rolls their mouse out or off of an option.
| | 04:46 | As you can see the outColor is the default color
that the options currently are, which is black.
| | 04:52 | The overColor is a different color completely.
| | 04:55 | Now that you've defined the over and the out colors and stored those
numbers inside of a few variables, you are going to create a function
| | 05:01 | with parameters that you are going to utilize as the viewer
rolls the mouse over and then off of our main menu options.
| | 05:09 | So after that outColor action that you just wrote, press
return or enter two times to create a few empty line breaks.
| | 05:17 | Then create your function by typing function space change Option Color.
| | 05:26 | With a capital O in option and a capital C in color.
| | 05:30 | Make sure of course that you spell everything correctly.
| | 05:34 | Then type in an open parenthesis and then we are
going to pass a few parameters to this function.
| | 05:39 | One parameter is which movie clip symbol we are
going to apply the contents of this function to.
| | 05:45 | So we are going to have a parameter that is going to receive
the name of the main menu option we are applying this to.
| | 05:51 | So type myOption, a one word with a capital O in option
and that is going to be the instance name of a movie clip.
| | 06:00 | So strict type this to the data type of
movie clip, by typing color movie clip.
| | 06:07 | The other parameter we are going to be passing to this function is
the color that we want that movie clip instance to be changed to.
| | 06:15 | So type comma space, myColor all one word with a capital C in color.
| | 06:21 | This is going to be a number so strict type it
to the number data type by typing colon, number.
| | 06:27 | Then type a close parenthesis, a space and open curly
brace a couple of line breaks close curly brace.
| | 06:35 | Then click in the line break in between the open and closed
curly braces of that function and type, my Option dot text label,
| | 06:45 | which if you remember is the instance name of the text
field inside of each one of the main menu options.
| | 06:51 | Dot text color which is a property of a text field, space
equals space, my color, semicolon to end the action.
| | 07:02 | So as you can see here we are utilizing the My Option parameter,
which again is one that we are going to be passing to our function
| | 07:09 | that my option parameter, is going to be the
instance name of a movie clip that we are targeting.
| | 07:15 | Then the dot text label, text label is the instance name
of each dynamic text field inside of the main menu options.
| | 07:23 | Then what we are doing is resetting the text
color property of that dynamic text field
| | 07:28 | to be whatever the my color parameter is
that we are also passing to this function.
| | 07:33 | So when we want to utilize this function to change the color of an option,
when the viewer for example, rolls the mouse over one of our options,
| | 07:41 | we simply execute this change option color function and then in parenthesis
we pass to it the instance name of the movie clip symbol that we are going
| | 07:50 | to be targeting as well as which color we want that
option to be changed to, overColor or outColor.
| | 07:56 | And all that does is it sets the hexadecimal value of
the text field called text label inside of that option.
| | 08:04 | Let's take a look at how to do that now.
| | 08:06 | Scroll down in your actions panel a little bit until you
locate the mm underscore About Us dot on roll over function.
| | 08:16 | This comes after a comment line that says About Us option.
| | 08:20 | Then click in the empty line break in between the open and
close parenthesis after the about un on roll over function
| | 08:28 | and type the function name, change Option Color, again making sure that
you spell things correctly as well as have your capitalization correct.
| | 08:39 | Then type and open parenthesis, and then type 'this'.
| | 08:44 | Remember that this keyword is situational.
| | 08:47 | When you use the keyword 'this' inside of a function that is being attached
to a timeline or a movie clip symbol instance such as mm underscore
| | 08:56 | About Us, the 'this' keyword simply references
that movie clip symbol or timeline.
| | 09:02 | So when I use the keyword 'this' as a parameter then I am passing to
my change option color option, it's not passing the word 'this' to it,
| | 09:12 | it's passing the name of the name of the timeline
or symbol that I am currently inside of.
| | 09:17 | Mm underscore about us.
| | 09:19 | So again when I execute my change option color function and I pass the
'this' parameter to it, it is actually passing mm underscore about us.
| | 09:30 | Again because I am inside of a function that is
attached to that particular movie clip symbol.
| | 09:36 | Then type comma space overColor, which is the variable name
that is holding the hexadecimal value that we want our options
| | 09:46 | to be displayed as when the viewer rolls their mouse over it.
| | 09:50 | Then type a close parenthesis and a semi colon to end that action.
| | 09:55 | Now when the viewer rolls their mouse off of our action we want it to do
something very similar, except we don't want it to display the overColor,
| | 10:03 | we want the main menu options to be displayed as the outColor.
| | 10:07 | So select that action that you just wrote inside the About Us on roll
over function, copy it, then click in the mm underscore about us on roll
| | 10:19 | out function, click in the empty line break within that
function and paste the action that you just copied.
| | 10:25 | The only thing that you need to change here is that
instead of overColor you want it to be outColor.
| | 10:31 | This is why we created the action that actually
changes the color of our main menu option.
| | 10:37 | That's why we put it inside of a function.
| | 10:39 | That way as you can see, when we want to modify the color
of our options when the viewer interacts with those options,
| | 10:46 | all we have to do is write this one line that simply targets the function,
tells that function which movie clip symbol instance we are targeting,
| | 10:55 | and then we simply tell it after that what is the variable name that is
holding the hexadecimal color value that we want to change that option to.
| | 11:04 | It makes it much easier for us to go and add this
functionality to our main menu if we do it this way.
| | 11:10 | You can test what you have done so far by saving your changes
that you've made to your main menu FLA and testing your movie.
| | 11:19 | When the main menu wipes and reveals itself when you move your mouse
over About Us and off it again you can see that it is changing colors.
| | 11:27 | So you know that that's working perfectly.
| | 11:29 | Now the action script that you've just written to get this About Us option
to work the way it does, because it's the same for the other options
| | 11:37 | in the main menu, I have already, for those
of you that have access to the exercise files,
| | 11:42 | applied those same actions to the other options to save you some time.
| | 11:46 | So as you roll over those actions and interact with
them, you'll notice they will all perform the same way.
| | 11:51 | And again the same action that you've just added to the About Us option,
is the same actions that you will have added to the other options as well.
| | 12:00 | Once you've finished previewing what you have just written, go
ahead and close that window and return to the last key frame
| | 12:06 | of your layer A in main menu dot fla with your actions panel open.
| | 12:12 | In the actions panel if you scroll down a little bit from where you
were last writing your actions, and till you locate the mm underscore
| | 12:19 | about us dot onrelease function, again you will already notice
that there is a little bit action script written there for you.
| | 12:26 | The first thing that you'll notice is a function called reactivate buttons.
| | 12:30 | As I mentioned previously, if you scroll up in your
actions panel, you'll see that reactivate buttons function.
| | 12:37 | All that that function does is it currently sets the enable property
of all of the main menu options movie clip symbols to be enabled.
| | 12:44 | All that that does that it currently sets the enable
property of all the movie clip symbols option to be true.
| | 12:51 | That means that when the viewer clicks on one of the button
options it's going to execute this reactivate buttons function
| | 12:58 | and then all of the main menu options will be re-enabled.
| | 13:01 | At this point you may be saying to yourself: re-enabled?
| | 13:04 | When were the disabled?
| | 13:06 | And again if you scroll down to your about us dot onrelease function you'll
notice that one of the actions in there is 'this dot enabled equals false'.
| | 13:16 | Meaning disable the option that the viewer just clicked on.
| | 13:20 | This action is added to the About Us on release function so
that means that when the viewer clicks on the About Us option,
| | 13:26 | it simply sets the enable property of itself to be False.
| | 13:31 | So when the viewer clicks on a main menu option the first thing it does,
is it executes this fun |
|
|
