Join Todd Perkins for an in-depth discussion in this video Defining the ProgressBar class, part of Flash CS4 Professional: Building UI Elements.
- View Offline
Now we'll begin defining the ProgBar class that will hold down the code for our progress bar. If you don't have the Exercise Files, make sure that you set up your folder structure properly. So in the same folder as your FLA file, you should have the image that you're going to load. Mine is called flower.jpg here. In that folder, you should have a folder called com and in the com folder there should be a folder called lynda. In that folder, have a folder called ui and in that folder, create the file ProgBar.as. Make sure to capitalize the P and the B. Also make sure that com, lynda and ui are all lowercase.
Let's go over to Flash and inside of the ProgBar class file, we'll define the ProgBar class. The first thing we'll do is declare the package. So I'll type package com.lynda.ui, some curly braces, and inside of the curly braces, I'm going to import some code. So import flash.display.*, all those display classes, and then we'll import flash. events.*. Finally, we'll import the text field classes, so flash.text.*.
Then we'll declare the class. So public class ProgBar and make sure to spell it the same as your class file which is ProgBar.as. Then we're going to extend the MovieClip class. You need to extend the MovieClip class because our progress bar movie clip has 100 frames. So you can't use Sprite in this case. So in here, I'm going to define the constructor method. So public function ProgBar, capital B and some parenthesis and curly braces and I'll declare one private property right above the constructor. So private var _loader, datatype it to a Loader, and we're just going to write a little bit of code inside of the constructor.
So the first thing we're going to do is hide the progress bar. So set its visible property to false. The reason why I'm doing this is because when the ProgBar initializes, I don't want it to show. I only want it to show when it's loading a file. So I want to connect it to a loader and only show the progress bar when that loader is loading content. So before and after, it should not show. That's why we're initializing it to have its visible property set to false.
On the next line, run the stop method. So type stop and some parenthesis. Now what we're doing here is making sure that the Timeline doesn't play. Now, of course, we could have this inside of the Timeline of our movie clip, but there is no point in putting just a little bit of code in there and then some other code inside of this class. You might as well have all the code inside of the class, if we're going to define a class anyway. So we have that there. Let's do File, Save. I'll go to the FLA file and connect the progress bar to the class. So I'll go to the Library, Right-Click or Ctrl-Click the Prog movie clip and then Click Properties, check Export for ActionScript, make sure you're in Advanced mode so you can see that. Then for the base class we're going to put that ProgBar class.
In order to do that, we need to put the fully qualified class name which includes the package. So com.lynda.ui.ProgBar, and that's it. You should Click OK, and then you should get the definition for the class could not be found. That's good. Then no other problems. Looking good. Now at this point I should be able to test the movie and see the file load, which it does. If I push that keyboard shortcut to test the movie again, that's Command+Return on the Mac or Ctrl+Enter on the PC. It should take a few seconds for the image to show. Perfect! So what we're looking for is no errors and not seeing the progress bar. So we're good. So now we've successfully defined our ProgBar class.
- Applying OOP to real-world projects
- Creating customizable elements for a unique look
- Learning efficient workflow practices with ActionScript 3.0
- Developing new programming skill sets with OOP
- Reusing custom codes across several applications