Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're interested in getting all of your code out of the Timeline and into organized class files, then document classes will allow you to do that. With document classes, you can create external ActionScript classes that completely power your FLA files. So you can take all or most of your code out of the Timeline and put it into ActionScript classes with only a few steps. The first thing you're going to need to do to create a document class that powers your FLA file is to make that class extend the MovieClip class.
That basically says you're going to take the movie clip concept and add to it, with whatever's in this file. That may sound a little bit strange and new, but you're already familiar with that idea because every time you create your own custom movie clip, you're essentially extending the MovieClip class. You're taking the idea of a movie clip, and you're putting your own art and your own animations inside of it. This is the same thing, but it's with code. So, right after DocumentExample, type a space and then type the word extends.
Then type another space and type MovieClip, capital M, capital C. When you type that line of code, Flash will automatically add the import statement for you. Import statements will make sure that you can use the code that you're referencing in your files. So you absolutely need to have this line of code here. If Flash doesn't insert it for you, or you forget to insert it, then you'll get an error. So just keep that in mind. Also, make sure not to add a semicolon after this line of code.
See this class declaration is followed by curly braces, here and here. If you put a semicolon, then you'll make an error because these curly braces are a part of this public class statement. The next thing to do is to write some code in the constructor area. The constructor area is the initialization code. That's going to be the function that automatically runs when your FLA is initialized.
So in there, let's just put a simple trace statement to make sure that this is working properly. So type 'trace,' some parentheses and a semicolon and in quotes, type "it's working!" with an exclamation point. Before you go over to the FLA file, save this file. When you're working in an FLA, you can change the ActionScript and test the movie, and those ActionScript changes will be reflected in the published movie.
With a class file, however, the file gets loaded into Flash when you publish the movie. So, it loads the last saved version of that file. So if you ever make a change, you need to save it for that change to be reflected in the SWF file. So save the file, then go back to the FLA file, and in the Class section in the Properties panel - and by the way you won't see this unless you have nothing selected, so make sure you deselect everything - click in the Class section and type the name of the DocumentExample class.
If you type it differently than the name of the file, it won't work - and by differently, I mean different casing, like a lowercase e instead of an uppercase E, and any other spaces or special characters, aren't going to work. So type it exactly as the name of the file is. So DocumentExample, capital D, capital E, and then press Enter or Return to commit the change. Then test the movie, and you should see the code pop up. It says it's working in the Output window.
Now, you'll notice that I can still click the buttons and navigate around. Let's say you wanted to put that code inside of a document class. Let's look at how it may be a little bit different than the code is on the main Timeline. Go to the first keyframe of the actions layer and open up the Actions panel. In here, select all of the code and then press Command+X or Ctrl+X to cut the code. Close the Actions panel and move over to DocumentExample.as.
Highlight the trace statement and paste the copied code over. This is going to look a little bit weird, so click the Auto format button to rearrange the code a little bit. Now we're just going to cut and paste some of these lines of code to put them in the right places. Import statement needs to be with the other import statement, and the function should be outside of the function that it's within right now. So let's select that function real quick, Command+X or Ctrl+X to cut, and then you're going to want to paste it right below the constructor method, which is public function.
Keep in mind that a method is just a function, but it becomes a method when it's inside of a class file. So, scroll down and find that closed curly brace for the constructor, go a few lines below it, and paste that function. Again, I'm going to click Auto format. Now I'll scroll up, select that import statement, the one that imports the MouseEvent, and then press Command+X or Ctrl+X to cut the code, scroll up, place the code after the import MovieClip statement, Command+V or Ctrl+V. So, in the constructor, all I have are the addEventListener lines of code.
I have the function organized in a different spot outside the constructor method, and then I have that import statement. So let's save the file and then test the movie. Remember that you can test the movie directly from an ActionScript class file as long as the targeted file is correct. So see the Target is Document_Class.fla. So, as long as that's set, I can test it from here. So the same keyboard shortcut: Command+Return or Ctrl+Enter.
Looks like everything's working and all the code is working properly. Now I've taken it off of the main Timeline and placed it inside an ActionScript class, so it's clean and organized. Note that I haven't taken off the stop actions, because these need to happen after a certain point in time. So for me, it's ideal that they stay right here. By using a document class, you can keep all your code object-oriented or in classes, and the document class can be set up through the Properties panel.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102180 Viewers
61 Video lessons · 88883 Viewers
71 Video lessons · 72696 Viewers
56 Video lessons · 104330 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.