Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a button component

From: Flash Catalyst CS5 Essential Training

Video: Creating a button component

One of the most common components that you'll create using Flash Catalyst is the Button component. Buttons have some pretty basic settings and let's see how we work with them. I'm going to create a new project. I'm going to specify though a little bit of a darker color for a background and I'm going to click OK. Next, I'll go over to the File menu and I'll choose Import. I want to bring in an Illustrator file and I'll choose my file here called button which is in Chapter 3 of my Exercise Files. I'll click OK. I'll also click OK on this Import Options dialog box and bring my artwork in right here inside of Flash Catalyst.

Creating a button component

One of the most common components that you'll create using Flash Catalyst is the Button component. Buttons have some pretty basic settings and let's see how we work with them. I'm going to create a new project. I'm going to specify though a little bit of a darker color for a background and I'm going to click OK. Next, I'll go over to the File menu and I'll choose Import. I want to bring in an Illustrator file and I'll choose my file here called button which is in Chapter 3 of my Exercise Files. I'll click OK. I'll also click OK on this Import Options dialog box and bring my artwork in right here inside of Flash Catalyst.

Now by taking a quick look at my layers structure here, I have inside of Layer 1 something called Growing, it's a group, and in that I have several different elements. I'm going to use these elements to build my button. To make it easier to see on the screen here, I'm actually going to zoom in. I'm going to press Ctrl+ Plus sign (+) on my keyboard so we get a better view of the button here. I'd like to design a button that looks different when I run my mouse over it. In its default state it looks like this: a monochromatic piece of art. However, if I turn that layer off and I reveal a Color layer, I see a color version of my artwork.

I also want people to identify which part of the project they're going to when they mouse over this. So I have some text that indicates this is the GROWING section of my project. So for now I'm going to turn these two layers off. I'll put monochromatic back on and I'll get to work creating this button. The first thing I need to do is to select my artwork. I can either click on the artboard and drag to select the artwork this way or with it deselected I can also click on that entire group here inside of the Layers panel. Whenever you have some artwork selected the HUD or the Head-Up Display will appear offering you some options.

It's context-sensitive, so depending on what art you have selected, you may see different options. For now you can see that I have the Growing (Group) selected. The HUD is offering the option to Convert that Artwork to a component. Now I want to turn this into a Button component, so I'm going to click on this pop-up menu here and choose to convert this to a Button. In doing so, look at my Layers panel, I no longer have all those options. All I have now is a single element called Button. In the HUD I have the ability to Edit the Button Appearance. Now depending on what that Button is doing at any time throughout the application, it can have four different appearances.

We refer to these four different appearances as four different states. I have the Up state, which is the way that the Button appears when the mouse cursor is not on top of it. There is the Over state, which appears when my mouse is hovering over that Button. The Down state, which refers to when you actually click and hold your mouse button down on top of the Button. Then there's the Disabled state. This is a state that's usually controlled programmatically, which indicates that the Button is not usable right now. For example, if you had some kind of a form that you wanted someone to fill out and you require them to fill out all the fields, maybe the Submit button is grayed out until they go ahead and actually fill out all the items on the form.

That grayed out button would represent a Disabled state. So at this point we've created our button and we want to modify the appearance throughout the different states. There are two ways to do this. I can either click on any of these buttons to jump to a specific state, or I can double-click on the button on the artboard itself. In doing so, everything else on my artboard gets grayed out with these diagonal lines and my button is in full view. If you're familiar with Adobe Illustrator, you might notice this is very similar to working in Isolation mode. In fact, Flash Professional also has similar functionality.

You can always tell where you are in your project by looking in the upper left-hand corner of the document window. Since I haven't saved my project, I have something called Untitled Project and I'm currently in the GrowingButton that appears inside of that project. We call these breadcrumbs, because they identify exactly where you are in your project. To exit this editing mode you can either click on this little arrow here to back out of the project, or you can double-click on any other area on your screen, but for now I really want to focus on changing some of the states of my button, so I will go ahead and double- click on the button to enter the Edit mode for this button.

At this point there are two things to take notice of. First of all, in the Pages and States panel I now see a separate state for each of the states of my button; the Up, Over, Down, and Disabled states. I can click on these to move between these different states. The other thing to notice is that my Layers panel has changed somewhat. It's showing me all the elements inside of the GrowingButton. If I click on the triangle here, I now reveal all the elements that I saw before I created the button. In this mode it's really easy to change how your button appears through different states of functionality.

For example, we already know right now what the button looks like in its Up state. However, we want to change how it looks in its Over state. So I'll go ahead and now click to switch to the Over state and now anything that I change in my artwork will become visible when my button is in this Over state. So I'll come to my Layers panel, I'll turn off the Monochromatic layer, but I'll turn on the Color layer. I'll also turn on the text here that says GROWING. Now to exit the editing I'm just going to double-click on a blank area in my artboard. I can't preview the button, at least not its functionality here inside of Flash Catalyst.

To do so, I'll need to run this project in a web browser. So I'll go to the File menu and I'll choose Run project. This will now open that button inside of my web browser and I can interact with it and see how it works. Notice now when I run my cursor over it, it changes to the Color version and the word GROWING appears. However, I may want to make a few modifications. For example, I note that when I click on it, it goes back to the black version and the word GROWING disappears. Also, in the Over state while the word GROWING does appear, it may be a little bit hard to read that against the dark gray background.

So let's see how we can make changes to our button to address these problems. I'll go back to Flash Catalyst, and once again I'm going to double-click on that button so I can edit the various states of that button. First, I'll click on the Down state and I'll actually show the Color version. This means that when I click on it, it won't change back to the Monochromatic version; it'll remain in Color. Next, I'll go back to the Over state and in the Layers panel I'll click over here where it says Tab to select that rectangle. I'll then click on the handle over here and stretch it out so that the white area actually extends all the way behind the word GROWING.

Now let me point out one new thing that the HUD now displays. It tells me that this object, which is that Tab that I just extended, actually has different properties in the other states of my button. It's asking me if I want to make that exact same change now in all the other states. In reality I don't want to make that change in the other states. I only want this white background to appear behind the word GROWING in the Over state. However, it's important to know about the setting, because this way if I do make a design change, I don't have to physically make that design change in other states as well.

I could tell Flash Catalyst, make this the same in all other states. Now that I've made these changes, let's double-click to exit the Editing mode and go back to the File menu and choose Run Project to see how this button works. Notice now that when I run my mouse over it, the white bar behind the word GROWING makes it easier to read. Likewise, when I click on it, I can see that color does not change back to black-and-white. It only does so when I move my mouse off the button. So creating buttons inside of Flash Catalyst is not hard at all. All you need to do is take some artwork, convert it to a Button component and then specify how that button should look in the various different states.

Show transcript

This video is part of

Image for Flash Catalyst CS5 Essential Training
Flash Catalyst CS5 Essential Training

66 video lessons · 19562 viewers

Mordy Golding
Author

 
Expand all | Collapse all
  1. 9m 24s
    1. Welcome
      1m 29s
    2. Key concepts
      4m 33s
    3. When should I use Flash Catalyst?
      2m 51s
    4. Using the exercise files
      31s
  2. 33m 12s
    1. Creating a new project
      5m 14s
    2. Defining components
      6m 26s
    3. Adding pages
      5m 41s
    4. Adding interaction
      6m 20s
    5. Adding transitions
      7m 12s
    6. Publishing options
      2m 19s
  3. 21m 37s
    1. Planning your project
      8m 11s
    2. Starting your project in Illustrator
      4m 9s
    3. Starting your project in Photoshop
      4m 22s
    4. Starting your project in Fireworks
      3m 10s
    5. Starting your project in Flash Catalyst
      1m 45s
  4. 30m 55s
    1. Understanding components
      5m 14s
    2. Creating a button component
      7m 10s
    3. Creating a checkbox component
      3m 55s
    4. Creating a radio button component
      5m 10s
    5. Creating a toggle button component
      2m 4s
    6. Creating a text input component
      1m 35s
    7. Creating horizontal and vertical slider components
      2m 46s
    8. Creating horizontal and vertical scrollbar components
      3m 1s
  5. 31m 55s
    1. Using the drawing and selection tools
      5m 52s
    2. Setting object properties
      4m 48s
    3. Importing artwork
      2m 27s
    4. Editing artwork in Illustrator
      6m 29s
    5. Editing artwork in Photoshop
      4m 27s
    6. Working with text
      3m 39s
    7. Optimizing artwork
      4m 13s
  6. 28m 56s
    1. Understanding pages and layers
      9m 50s
    2. Editing pages and states
      7m 24s
    3. Using grids, guides, and rulers
      1m 40s
    4. Aligning and arranging objects
      2m 27s
    5. Moving elements between pages and states
      4m 33s
    6. Using the Library panel
      3m 2s
  7. 54m 43s
    1. Understanding interaction types
      8m 24s
    2. Creating conditional interactions
      3m 6s
    3. Understanding the timeline
      7m 40s
    4. Creating smooth transitions
      7m 44s
    5. Defining Move transitions
      3m 33s
    6. Defining Resize transitions
      3m 53s
    7. Defining Rotate transitions
      2m 53s
    8. Defining Rotate 3D transitions
      3m 35s
    9. Adjusting basic timing
      5m 57s
    10. Creating an action sequence
      7m 58s
  8. 18m 11s
    1. Creating Flash video files
      3m 32s
    2. Placing video into a project
      3m 51s
    3. Controlling video playback
      3m 51s
    4. Adding sound effects
      3m 17s
    5. Integrating Flash content
      3m 40s
  9. 25m 53s
    1. Using a Data List to define repeating elements
      4m 11s
    2. Creating a basic Data List pt. 1: Building the components
      5m 31s
    3. Creating a basic Data List pt. 2: Adding the data
      3m 8s
    4. Planning a complex Data List
      1m 57s
    5. Creating a complex Data List pt. 1: Building the components
      6m 33s
    6. Creating a complex Data List pt. 2: Adding the data
      4m 33s
  10. 12m 14s
    1. Publishing an SWF file to view locally or offline
      2m 30s
    2. Publishing an SWF files to upload to the web
      2m 35s
    3. Integrating an SWF file into a web page with Dreamweaver
      2m 25s
    4. Integrating an SWF file into a web page with an HTML text editor
      2m 48s
    5. Publishing an Adobe AIR file
      1m 56s
  11. 7m 52s
    1. Creating custom components
      4m 27s
    2. Working with Library Packages
      1m 47s
    3. Using the Code view in Flash Catalyst
      1m 38s
  12. 22s
    1. Goodbye
      22s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Catalyst CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.