Lists and Tickers - Flash

Since Flash 4, developers have been able to create dynamic scrolling lists via the load Variables() action, which loads variables from text files. Why, then, should anyone use Generator to create Lists, Scrolling Lists, or Tickers?

First, Generator creates lists and tickers from databases or text files on the server side, rather than on the client side, which the loadVariables() action does. More importantly, Generator provides superior designing and formatting of lists and tickers, as it enables you to create dynamic links and insert images.

Now that we’ve got your attention, let’s have a look how List and Ticker Objects are built. Generator can create four different list types:

  • List (a basic list)
  • Scrolling List (a scrollable list)
  • Multipage List (a manageable series of pages for large list data)
  • Ticker (a scrolling list that continuously loops)

For the most part, all four List types share the same property settings in the Generator Panel. The only difference is that there is an additional field in the Scrolling List, shown in Figure below, and the Ticker called Step Size.

How do List and Ticker Objects work? Generator preconfigures a custom Movie Clip instance that builds itself from the data in the data source. You don’t have to worry about spending time developing buttons and ActionScript to control movement of list content!

Properties for the Scrolling List Object

Properties for the Scrolling List Object

Basic Lists
In this tutorial, you create a Generator List Object. Unlike a Flash 5 ActionScriptdriven list that would need to use loadVariables() to bring in dynamic content, we see how Generator can build the list from a predefined data source and serve it to the user without waiting for a loadVariables() action to finish. We start by creating a data source, and then building the List Object in our Generator Template.

  1. Create a new directory (folder) on your local hard drive and name it list.
  2. Inside this directory, create another directory and name it data.
  3. Next, let’s create a data source for your list. Open a text editor, create a new text file, and save this text file as basicList.txt inside the data folder.
  4. The only defined value you need inside this text file is the variable name clip.
  5. The clip variable defines the symbol name that you want to use for a given item in the list. This symbol can contain graphics and text that you want to appear for each item in the list. Give all of the other variables meaningful names to help yourself remember them. For now, let’s use the following structure:

    clip, header, textvalue, url

    Besides the required clip variable, we’ll also use three more variables, all of which will need to be reflected inside your Movie Clip symbol (defined by the clip variable).

  6. Save the text file in the data folder, and create a new Flash movie file in Flash 5. Save the .FLA file in the list folder.As always, be sure to enable the Generator Template format in the Publish Settings dialog. Usually, this format is automatically checked as soon as you add a Generator Object to a Flash movie, but it’s always a good idea to check the Publish Settings.
  7. Drag the List Object from the Generator Object tool window to the Stage.Select the Object, and use the Arrow Tool with the Scale modifier to resize the List Object so that it is nearly as tall as the Stage and about 210 pixels wide.
  8. Next, we prepare the format of the list, as it will be displayed in the Flash movie. We need to create a Movie Clip to use within the List Object. Choose Insert➪New Symbol, name it clip_1 and leave the Symbol behavior at the default Movie Clip. Generally, you can give your clips any name you like, but you should use meaningful names, so that you can remember to refer back to them in your data source text file.
  9. With the clip_1 Movie Clip open in Symbol Editing Mode, type the following in two separate text fields, making sure that the first variable, header, is bold:
  10. {header}{textvalue}

    Set the text location below and to the right of the center point. This way, when you align your symbol, you don’t need to change the default value in the Generator Panel. Notice also that the more space you leave between the center point and the first line of text, the more space that you have between your first list item and the top. It is also a good habit to set the width of the text field to the width of your list , so that Generator does not wrap the text to the next line.

    Notice that you are essentially doing the same task here that you did in the text replacement exercise from the previous, except that you are placing the variables in a Movie Clip symbol, rather than on the Main Timeline. Two of the three variables in our text file data source have been added to the clip_1 Movie Clip symbol. The last one, url, will be used in the actions of a Button instance described in the next section.

    In Flash 5, you can drag a guide to the X axis at 210 pixels, because this is the width of our List Object on the Main Timeline. Make sure each text field area extends to this guide.

    you can drag a guide to the X axis at 210 pixels

    Now we add another level of sophistication, so that you can really see what Generator can do. We are going to add an invisible Button instance to our Movie Clip. This button will contain ActionScript that will reference the url Generator variable. Technically, this can be done with ActionScript and the loadVariables() action however, unlike loadVariables(), we won’t have to make sure the data has loaded before we can use it. Because Generator delivers the Flash .SWF file with everything already in it, we won’t have to wait for any additional data to be delivered.Strictly speaking, invisible Buttons are not needed for List Objects in Generator. Also, if you want to create buttons for the text, complete with rollover states, you could do that as well. For this example, we use the invisible Button to link to a new URL.

  11. Create a new Button symbol (Ctrl+F8 or Command+F8) and name it invisibleButton.
  12. Insert a keyframe in the Hit frame.
  13. Draw a rectangle shape approximately 200 pixels wide and 50 pixels high on the Stage. Use the Info Panel to size up the shape.
  14. Open the clip_1 Movie Clip in Symbol Editing Mode.
  15. Create a new layer, and move it to the bottom of the stack. Name this layer button.
  16. Drag an instance of the invisibleButton symbol onto the Stage and place it directly on top of the {header} variable text block. Scale the button so that it is the same height as the {header} variable text block.
  17. Select the Button instance and open the Actions Panel.
  18. Cover the entire {header} text block with the invisibleButton instance, scaling as necessary to make it fit.

    Cover the entire {header} text block with the invisibleButton instance, scaling as necessary to make it fit.

  19. To create a dynamic URL link, you need to set a Generator variable inside your ActionScript. This is where we will use the url variable from our data source text file. Add the following ActionScript to the Button instance:
  20. Now we are ready to move beyond what loadVariables() lists are capable of producing.

  21. Select the clip_1 Movie Clip symbol in the Library, and choose Duplicate from the Options menu, located at the top right corner of the Library window. Name this new duplicate symbol clip_2.
  22. Delete the {header} text block and the invisibleButton instance, but keep the {textvalue} text block.
  23. Return to the Main Timeline (Scene 1), select the List Object, and open the Generator Panel.
  24. In the Data Source field, define your data by either browsing to the local folder where your text file is located, or by typing the relative path:
  25. data/basicList.txt
  26. In the Orientation field, define the direction of your List by selecting Vertical (top to the bottom).
  27. The Mask to Box option lets you define whether your List should be masked.Usually you leave it set to true, unless you want your list to expand beyond the defined space. For this example, leave it set to true.
  28. Spacing can be either Fixed or Automatic. When Fixed, each clip takes the amount of space in pixels you define in the Item space field. If spacing is set to Automatic, it will take as much space as the clip needs from your data source. For this exercise, set this option to Fixed.
  29. Item Space specifies the amount in pixels between clips. Enter 40.
  30. The Horizontal and Vertical Alignment options define how the clip should be aligned inside the list area. Items are always aligned on the center point of the Movie Clip. Leave the options at the default Left and Top, respectively.
  31. Instance Name identifies the object so it can be used with Actions such as with() and print(). Name this instance basicList.
  32. After setting all the values for your Basic List, you should have object properties identical to below.

    These List values will properly format our Basic List Object.

    These List values will properly format our Basic List Object.

  33. The .FLA file is ready, but we don’t yet have any values in the data source!
  34. Open your data source text file and enter the following values:

    You might be curious as to why we are reusing clip_1. One advantage of Generator Lists is that you can reuse clips inside your Template as many times you like and fill it with different information. If you test your Flash movie, you will see that the first line in your list has the same look and feel like the as the third one.

    If you have a clip that does not contain one of the variables (in our case header or url), your data source would look like this:

    You still need to account for the general data source, but you can leave these fields empty and they will be ignored. As you will see, the value of using Basic Lists in Generator over Scrolling Lists that use loadVariables() in normal Flash movies is that you can build custom graphics and formatting for each item in the list. In this way, you can make items belong to category types, and assign the appropriate category formatting to each item in the list.

Scrolling Lists
Now that you know how Column Name/Value layouts work with Basic Lists, let’s move on to Scrolling Lists. Of course, the primary difference between a Basic List and a Scrolling List is that a Basic List has a finite length (the size of the List Object on the Stage), whereas a Scrolling List can continue indefinitely past the frame of the List Object. By using scroll buttons, we can navigate the items in the list. To make a Scrolling List, the steps are similar to the Basic List procedure, with a few exceptions:

  • Choose Scrolling List, rather than Basic List from the Generator Object Panel.
  • The Scrolling List has an additional parameter, Step Size, that you need to set in the Generator Panel.
  • Scrolling Lists require an additional Button symbol instance that controls the scrolling of the list items.

To add scrolling functionality to a Scrolling List Object:

  1. Drag a Scrolling List Object from the Generator Objects tool window to the Stage. Set up a data source text file in the same manner as the Basic List data source. Set the other object properties in the Generator Panel so that they resemble those of the Basic List from the previous section. Create Movie Clip instances that contain the formatting (and interactive functionality) for each list item.
  2. Create a new Button symbol containing artwork of an arrow pointing down, and place two instances of it on the Stage. Rotate one of the instances so that it points up. These Buttons will target the Scrolling List Object, thus enabling the scrolling function.
  3. Position the Button instances next to the Scrolling List Object on the Stage.
  4. In the Generator Panel, name the Scrolling List instance scroll_down.
  5. To create a simple Scrolling List, highlight the Button instance with the arrow pointing down, and open your Actions Panel. Add the following script:
  6. For Flash 5 compatibility:

    You now have a down button for your Scrolling List.

  7. Select the Button instance with the arrow pointing up, and, in the Actions. Panel, modify the ActionScript so that it reads as follows:
  8. For Flash 5:

    You now have up and down Buttons for your Scrolling List.

Ticker Objects work the same as Scrolling Lists, with these differences:

  • Tickers play as a continuous loop. Therefore, they do not need buttons.
  • Select the Ticker Object from the Generator Objects tool window, rather than from the Scrolling List Object.Otherwise, you can use the same settings for the Ticker and the Scrolling List. The formatting for their data sources is identical as well.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics