Creating Your Own Smart Clip

One possibility would be to create a Smart Clip that mimics a Microsoft PowerPoint presentation. How could you build a movie clip that would reveal a new bulleted point every time you press a key on the keyboard? The easiest way to approach this would be to embed a bullet point and a corresponding text field in a movie clip. You then can use the attachMovie method to add additional movie clips to the Stage.

Building a Base Clip

You need to get this concept working before you can convert it to a Smart Clip. The next exercise walks you through the complete process. Why make you complete the whole process? You'll never understand the distinction between a movie clip and a Smart Clip if you don't build a Smart Clip from scratch. This is going to take a while, so go get some coffee now.

Exercise 22.1 Creating the Base Movie for the Smart Clip

The first step is to create a movie clip with dynamic text fields for the bullet and the text.

1. Open a new file and create a new movie clip (Control+ or Command+F8) named bulletFields. This movie clip will contain two dynamic text fields: one for the bullet and one for the text.

2. Start with the text field for the bullet. Select the Text tool and open the Character panel. Change the following settings:

   Font: Arial or Helvetica

   Size: 24

   Bold: Selected

   Italic: Unselected

   Color: Pick one you like

   URL: Leave blank

3. Draw a text box on the Stage. This will be your bullet point, so it needs to hold only one character of information. Make it a little wider than you might think you need. This leaves room for the bolding.

4. Switch to the Text Options panel and make the following changes:

   Text Type: Dynamic Text

   Text Line: Single Line

   Variable: bulletType

   HTML: Not selected

   Border/Bg: Not selected

   Selectable: Not selected

5. Position the text box so that the upper-left corner of the text box is centered on the movie clip's Registration point.

6. Draw a second text box to the right of the first text box. This one should be large enough to hold a long line of text.

7. In the Text Options panel, make the following changes for the second text box:

   Variable: bulletText

   HTML: Selected

8. Switch to the Character panel and turn bolding off.

9. Align the text boxes with the bulletText to the right of the bulletType. (See Figure 22.1.)

   Figure 22.1. Align the text box for the bullet point so that its upper-left corner is aligned with the Registration point. The text box for the bullet items is positioned to the right of the first text box.

   

10. To use the attachMovie method, you need to set up the linkage properties for the bulletFields movie clip. Open the Library and select the bulletFields movie clip. Click the Options triangle and select Linkage from the pop-up list.

11. In the Symbol Linkage Properties pane, click the Export This Symbol Option button, type bulletFields in the Identifier field, and then click OK. (See Figure 22.2.)

    Figure 22.2. Before you can use the attachMovie method, you have to set up the linkage properties for the movie clip.

    

    Having the Linkage Identifier and the movie clip use the same name helps prevent confusion down the road; you don't have to remember what identifier you assigned to the movie clip because it's the same as the movie clip name .

    Next you'll embed the bulletFields movie inside a placeholder movie clip on the main timeline. The placeholder movie clip will contain the bulletFields and all the ActionScript that controls the movie. Why not have the code on the main timeline rather than on a movie clip? You do so because you need to use the onClipEvent method, and that has to be attached to a movie clip. You also know you are going to package this as a Smart Clip, which also means you can't use the main timeline.

12. Return to the main timeline, create a new movie clip symbol (Control+ or Command+F8), and name it Controller.

13. Inside the new Controller movie clip, rename layer 1 bulletFields and drag a copy of the bulletFields movie clip from the Library onto the Stage.

14. Center the upper-left corner of the bulletFields movie clip with the Registration point of the Stage.

    Note

    Why do we always align the upper-left corner of the movie clip content with the movie clip's Registration point? It makes positioning the elements on the Stage a lot easier. Remember that the Flash movie's (0,0) position is the upper-left corner. If your movie clips are oriented in the same way, it's a snap to figure out how to place them on the Stage.

15. Return to the main timeline and drag a copy of the Controller movie clip from the Library onto the Stage.

16. Save your movie as SmartBullet.fla. Go ahead and test your movie now. You shouldn't see anything. The text fields in the bulletFields movie clip are empty.

Next you'll set up an array to hold the information you want to display for your bullet points. First you'll create the new Array object, and then you'll populate it.

Exercise 22.2 Setting Up and Populating the Array

You'll use an array inside an onClipEvent(load) to hold the information for each line you want to have appear in your movie. You use the load clip event because you want the information to load the first time this movie clip appears on the Stage, and only then.

1. Open SmartBullet.fla, if it isn't still open, or open SmartBullet.fla from the Chapter_22/Assets folder on the CD.

2. Select the Controller movie clip on the Stage and launch the Actions panel.

3. Creating and populating the array is fairly straightforward. You'll spice things up a bit by adding some HTML formatting. Select the instance of the Controller movie clip on the Stage and add the following code to the Actions list:

    onClipEvent(load) {     textItems = new Array();      textItems[0] = "<b>This is line 1.</b>";      textItems[1] = "<i>This is line 2.</i>";      textItems[2] = "<u>This is line 3.</u>";      textItems[3] = "This is line 4.";  } 

   You've got your items in an array. You know you're going to be displaying them one at a time. That means you're going to need a way to keep track of where you are in the array. You'll also need to know how long the array is. (Yes, I know you know it has four elements, but that might change.) You need to set up a variablecurrentItemto track your array and then use the array.length property to check your array to see how long it is.

4. Add the code that's between the asterisks :

    onClipEvent(load) {     textItems = new Array();      textItems[0] = "<b>This is line 1.</b>";      textItems[1] = "<i>This is line 2.</i>";      textItems[2] = "<u>This is line 3.</u>";      textItems[3] = "This is line 4.";  //********************************************      currentItem = 0;      totalItems = textItems.length;  //********************************************  } 

5. There's just a bit more housekeeping to do inside this onClipEvent. You need to decide what character you are going to use for a bullet point, and you need to set a variable that will control how much space to put between the movie clips as they are attached to the Stage. After the last line of code you just entered, but before the curly brace , add the following code:

    bulletType="*";  itemSpace=30; 

6. Save your movie.

   Your code at this stage should look like Listing 22.1. Make sure you've closed all your curly braces and have semicolons at the end of the statements.

Listing 22.1 What Your Code Should Look Like After Exercise 22.1

 onClipEvent(load) {     textItems = new Array();      textItems[0] = "<b>This is line 1.</b>";      textItems[1] = "<i>This is line 2.</i>";      textItems[2] = "<u>This is line 3.</u>";      textItems[3] = "This is line 4.";      currentItem= 0;      totalItems = textItems.length;      bulletType = "*";      itemSpace = 30;  } 

You've finished setting up what will happen when the movie clip loads. Now you need to set up the events that will occur when you press a key on the keyboard.

Attaching the New Movie Clips to the Stage

What needs to happen in this section of the code? You need to set up a new onClipEvent to react to keyDown events. Every time a key gets pressed, you need to do several things:

1. Check whether the currentItem is less than the totalItems.

2. If not, you'll stop performing your Actions. If currentItem is less than totalItems, you'll attach a movie clip to the main timeline. Remember that whenever you start attaching movie clips, you need to assign them unique names and unique levels to occupy. You can use the value of currentItem to help you do this.

3. You need to be able to position each movie clip relative to the others. In this case, the X position will always be 0, but each subsequent movie clip's Y position will change by the value you set in itemSpace.

4. Finally, you'll need to increment the value of currentItem.

You can begin by setting up the onClipEvent and attaching the movie to the main timeline.

Exercise 22.3 Setting Up the onClipEvent( keypress )

You need to set up the onClipEvent(keypress) to get your movie clip to respond to input from the keyboard.

1. Open SmartBullet.fla, if it isn't still open, or open SmartBullet1.fla from the Chapter_22/Assets folder on the CD.

2. Make sure you have the Controller movie clip on the main timeline selected and the Actions panel open. After the last curly brace, you'll set up the shell for the onClipEvent. Enter the following code:

    onClipEvent(keyDown){ } 

3. On the blank line between the curly braces, you'll set up your if statement. Set up a loop to check if the currentItem is less than the totalItems. Then have that loop increment currentItem. Enter the code between the asterisks:

    onClipEvent(keyDown){ //****************************************************  //check to see if there are any more items to display      if (currentItem < totalItems){     ++currentItem;      }  //****************************************************  } 

4. Now you just need to add in the actions that will occur after you enter the loop. You need to attach the movie clip, assign it a unique name and level, and then set the X and Y position for the movie clip. Enter the code between the asterisks:

    onClipEvent(keyDown){ //check to see if there are any more items to display      if (currentItem < totalItems){ //************************************************************  // Attach the new movie clip          _parent.attachMovie("bulletFields", "item"+currentItem,          currentItem);  //Set the x position of the attached movie clip          _parent["item"+currentItem]._x = 0;  //Place the new item below the previous item          _parent["item"+currentItem]._y = currentItem * itemSpace;  //Grab the bullet type          _parent["item"+currentItem].bulletType = bulletType;  //Grab the bullet text          _parent["item"+currentItem].bulletText =           [textItems[currentItem];  //************************************************************          ++currentItem;      }  } 

   Notice that you are using array syntax to create dynamic variable names. Do you remember Chapter 14, "Introduction to Object-Oriented Programming?"

5. Now you can test your movie. Press any key on the keyboard to activate the onClipEvent(keydown), which will attach the next bulleted item.

Tip

Backspace,Tab, and Enter do not count as key presses!

If the movie clip works properly, you're ready to convert your plain old movie clip into a "smart" movie clip.

Tip

If the HTML tags are showing up in your bulleted list, you need to select the bulletText field inside the bulletFields movie clip and verify that you selected HTML on the Text Options panel.

Converting the Base Movie to a Smart Clip

The first thing you'll do is package the movie clip you just created inside another movie clip. Then you'll convert the new movie clip into a Smart Clip by defining its Clip Parameters.

Exercise 22.4 Converting Your Movie Clip to a Smart Clip

You'll begin by embedding your movie clip inside a new movie clip.

1. Open SmartBullet.fla, if it isn't still open, or open SmartBullet2.fla from the Chapter_22/Assets folder on the CD.

2. Select the Controller movie clip on the Stage and embed it in a new movie clip by choosing Insert > Convert to Symbol. Give the new symbol the name smartBullets , and click OK.

3. Double-click the smartBullets Smart Clip to open it in Symbol-Editing mode. Reposition the controller movie clip so its upper-left corner aligns with the Smart Clip's Registration point.

4. Open your Library and right- or Control-click the smartBullets movie clip, and then select Define Clip Parameters.

5. Click the plus [+] to add a parameter.

6. Double-click varName and change the parameter's name to textItems.

7. In the Type field, double-click Default to open the drop-down menu, and then change the type to Array().

8. Double-click the Value field for the array to open the Values panel.

9. To add a new value, click the plus (+) button and then double-click the defaultValue to change it. Add the following code:

    <b>This is line 1.</b>  <i>This is line 2.</i>  <u>This is line 3.</u>  This is line 4. 

10. Click OK. This should look familiar. These are the same values you pushed to your Array in the Controller movie clip.

11. Add another variable (+), and name it bulletType. Change the Type to List(), and then double-click its Value to enter several types of bullets, such as -, +, *, and >. Click OK.

12. Add one last variable, and name it itemSpace. Change the Value to 30, leave the Type set to default, and select OK to return to the Stage.

    Now you'll need to modify the code on the Controller movie clip so that instead of referring to its own internal variables, it refers to the variables that the user sets for each instance of the Smart Clip through the Clip Parameters panel.

13. Double-click the smartBullets movie clip to open it in Symbol-Editing mode. Select the Controller movie clip on the Stage and launch the Actions panel.

14. Inside the onClipEvent(load), delete the code that creates and populates the textItems[] array.

15. Change the value for totalItems so that it equals _parent.textItems.length.

16. Delete the code that sets the bulletType and itemSpace variables. Your code in onClipEvent(load) now will look like this:

     onClipEvent(load){     currentItem = 0;      totalItems = _parent.textItems.length;  } 

17. In the onClipEvent(keyDown), add _parent. in front of the itemSpace, bulletType, and textItems[] variables, so that the variables from the smartBullets Smart Clip instance are sent to the attached instances of the bulletFields movie clip. The code inside your onClipEvent(keyDown) now will look like this:

     onClipEvent(keyDown){     if (currentItem < totalItems){         _parent.attachMovie("bulletFields", "item"+currentItem,          currentItem);          _parent["item"+currentItem]._x = 0;          _parent["item"+currentItem]._y = currentItem *          _parent.itemSpace;          _parent["item"+currentItem].bulletType = _parent.bulletType;          _parent["item"+currentItem].bulletText =          _parent.textItems[currentItem];          ++currentItem;      }  } 

18. Test your movie, using any key to cause the smartBullets Smart Clip to dynamically attach instances of the bulletFields movie clip. Notice that the X and Y positions of the bulleted items now are dependent on where the Smart Clip is placed on the Stage. If you want to change the values being used, just edit the Clip Parameters.

19. You have one last bit of housekeeping to do. You need to create an assets folder in the Library and move the movie clips and graphics that support the Smart Clip into the folder. Why? It keeps your file organized, and if you ever plan to package your Smart Clip for distribution on the Flash Exchange, Macromedia will insist that you do so.

20. Open the Library and create a new folder called smartBullet_assets. Drag the controller and bulletFields movie clips into the new folder.

21. Save your file.

There you have ityour very own Smart Clip. Granted, this is a simple example, but now that you know the basics, you can modify it to do whatever you want. In fact, you already know that you can use text files as data sources for your Smart Clips. You could do that for this one as well. Refer back to Chapter 20, "Using Flash 5's Stock Smark Clips," if you need a refresher course. In the meantime, take a look at the Macromedia Flash Exchange and explore how you can submit your own Smart Clips to the Exchange.