• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 22. Working on Large Projects and i... > Task: Make a Smart Clip That Serves ...

Task: Make a Smart Clip That Serves as a Template

In this task, you'll create a template for each author in your team. Each author can uniquely populate his template while keeping the layout consistent with the other authors' work. Here are the steps:

In a new file, create two blocks of text. Through the Properties panel, make the font of one block fairly large (around 36 points). The other block can be smaller (around 24 points or so).

Make sure each text block's Text type drop-down (in the Properties panel) is set Dynamic Text. Make sure Selectable button is not selected. Click the Character… button and then select “All Characters” (so the text will appear anti-aliased). Your panel should now look like the one shown in Figure 22.5.

Figure 22.5. Both text blocks are made dynamic and nonselectable, and the entire font is embedded (via the Character… button).

Associate the variable name “title” with the large text block and “subtitle” with the small text block.

Now set the position of the text blocks so the “title” text is near the top left of the stage and the “subtitle” text is below it. Adjust the margins on both blocks of text so that they're very large (wider than the stage itself). Don't use the Scale tool to adjust the margin; instead, double-click inside one block and drag the margin control box at the bottom right (see Figure 22.6).

Figure 22.6. Changing the margin of a text block is different from changing the scale. Drag the margin control box while the text block is being edited.

The justification and other styles like font is up to you. The idea is that this layout will be used in several places in your site, so spend the time necessary to make it look the way you want. (The really cool part is if you need to make a change later, that change will be reflected everywhere this Component is used.)

To convert this into a Component, you must first convert it to a Movie Clip. Select both blocks of text and then select Insert, Convert to Symbol. Call it “Template” and make sure you select Movie Clip behavior and the top-left registration box.

The layout may be exactly how you want it, but you should make the registration easy for the authors. Select the Template instance you just created and use the Info panel to set the default center to position 0,0. Notice that because you chose the top-left registration when you make the clip (in the last step) the visual center of the clip won't appear at 0,0 but rather the clip's center point.

If the layout has changed, double-click Template so that you can edit the master symbol. While inside Template, position the text where you want it to appear. Although this may seem like a lot of work, it means that each author will simply need to position this clip in the known position 0,0.

To make this a Component, you need to access the symbol's Component Definition. Open the Library window, right-click Template, and select Component Definition. Click the plus button, and in the Name column type title. In the corresponding Value column, type Type Title Here. Click the plus again and type subtitle for the Name column and Type Subtitle Here for the Value column. Click OK. This process simply gives the author direct access to change these variables for each clip instance he uses. You'll also notice the symbol now has the Component icon.

Now you can distribute this Component to all your authors. The subsequent steps walk you through how this clip can be used.

Return to the main scene. Delete everything onscreen. Drag Template from the library onto the Stage. Use the Properties panel to set the center location to 0,0. With Template still selected, access the Parameters tab in the Properties panel. Select the editable title field (which reads Type Title Here) and type This is page one. For the subtitle, type the first page. Insert a keyframe in frame 2 and change the title and subtitle (via the Parameters tab in the Properties panel) to something different. Finally, insert another keyframe and include different text for the instance in the third frame.

Make a new layer, put a Stop action in the first frame of this layer, and then draw a box. Convert the box into a button symbol named “Button.” Select the button instance and open the Actions panel. Insert a nextFrame Action. Actually, because nextFrame() is really a version of the goto Action, first select goto (under the plus button, Actions, Movie Control, goto) and then change the parameter for Type to Next Frame. Notice the script changes to appear as in Figure 22.7.

Figure 22.7. The nextFrame Action (a version of “goto”) will let the user click a button to step through the frames.

Test the movie. You'll notice that the text changes but the formatting remains consistent. If any changes are made to the master Component (perhaps the font or location changes), you'll see that change reflected everywhere else.

Save your file and quit Flash. When you restart Flash you'll find your Template Component listed in the Components panel. Others on your team simply need to copy the source .fla into their Components folder to see the same thing.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint