Building Indexes

By using the fIndex component, you can create an index (or table of contents) so that visitors to your site can see the titles and possibly a short extract of some or all of the articles on your site. From the index, they will be taken directly to that article.

 

First, ensure that you have entered a name in the documentType parameter of each template for which you would like to index. For example, a template consisting of news articles could have a documentType of news. It is also necessary that the frame on which the template sits has a frame label that matches the documentType. In this example, the frame name is: news

 

Click on a keyframe on your timeline in which you would like the index to appear and place a stop action in this frame. To do this, press F9 to open the Actions panel and type stop();

 

Drag and drop the fIndex component from the Components panel, onto the stage, ensuring that it appears in your desired keyframe. In most cases you would want the index to appear on the timeline before the templates.

 

Image showing the fIndex component in the components panel:

 

Image showing the timeline with the fIndex component appearing before the template:

 

Select the fIndex component that you just dragged onto the stage by clicking on it and open the Component Inspector (Alt+F7). You can now set the parameters to tell the index which templates and fields to display. Set the parameters as follows:

Parameter Description Example
autoLoad This parameter defines whether to display the index automatically when this frame is entered or not. If you set this parameter to "no" you can manually display the index when desired through ActionScript by using the refresh method. true
docTypes This is a list of the template document types that you wish to display in this particular index. The names entered should be the same names that you entered in the documentType parameter of each template. Double click inside this field in order to open the list box in which you can enter each document type on its own line. news,articles
fields This is a list of fields that the fIndex component should read from the templates. The title field is mandatory so this field should always appear. It will also appear even if it is deleted. In this example, we will use the title field only. For additional fields, such as description, please see the Building more advanced indexes section below. title
linkedFields This is a list of fields that will appear in the index that you would like to be clickable links to the full article. In this example, we will use the title field only. For additional fields, such as description, please see the Building more advanced indexes section below. title
number of records This is the number or records that you would like to display in the index. By default, records will be displayed in a 'new to old' order. If you are using the fPaging component together with the fIndex component, the number of records specified in this parameter will be the number shown per page. 4
recordInitFrameDelay This value specifies the number of frames to wait before displaying each record in the index. This can be used as an effect to display the records appearing one at a time. 2

 

You can now test your movie. The index should load. Clicking on a title in the index should take you directly to that item. For more advanced uses of the fIndex component, please see the section below called Building more advanced indexes.

 

Building more advanced indexes

This section explains how to build more advanced indexes by changing the fonts and colors, adding part of the content of each item under each title, adding a custom date field alongside each item.

 

In order to have custom titles and descriptions in the index, you will need to create a movie clip containing these fields in your desired fonts and styles.

 

1. Create a new movie clip in your movie by selecting Insert -> New symbol (ctrl+F8). If your new symbol window opens in basic mode, press the advanced button to open the advanced options.

 

2. Select the type to be Movie clip and give your movie clip a name, for example: indexMC

 

3. Check the checkboxes for Export for ActionScript and Export in First Frame. The name that you entered for the movie clip name should automatically be entered in the Identifier field.

 

4. Press OK. You should now be on the timeline of the indexMC movie clip.

 

5. Place a textfield on the stage and set it to be Dynamic Text. Set the X,Y position of this textfield to be 0,0. This will be the textfield for the titles. Give this textfield an instance name title. You can also set the font, font size and color.

Note: As this is a dynamic textfield, the font will not automatically be embedded so in order to ensure that the correct font is displayed, press the Embed button to choose the embedding options for this font.

 

6. Return to the main timeline and select the fIndex component that's on your stage. In the Component Inspector, set the recordMC identifier to be the same identifier name that you gave to the movie clip in step 3 above (indexMC).

 

If you test your movie now (ctrl+enter) you should see the titles appear in the index in the new font.

 

7. Double click on the indexMC movie clip that's in your library in order to edit it. Add a multiline dynamic textfield underneath the title textfield. This will be for the content text. Set this textfield to render for HTML and set the font and style for this textfield. Give it an instance name of content. The instance name should be the same name that you have set for the fieldname for the content inside your templates. Note: If you make this textfield too high, there will be too much space between each item in the index.

 

8. Return to the main timeline and select the fIndex component that's on your stage. In the Component Inspector, add content to the fields parameter, to ensure that both the title and the content records are displayed.

 

9. Click on the timeline on the keyframe where the fIndex component first appears and press F9 to open the Actions panel and add the following code:

import fcms.Tools;
lis = {};

lis.recordInit = function ( eo:Object )
{
eo.mc.content.htmlText = Tools.truncate( eo.mc.content.text, 20, " more" );
}
index_mc.addEventListener( "recordInit", lis );

 

This code truncates the content text at the nearest complete word, with the text being up to a maximum of 20 characters. After this text, the word "more" will appear which will be linked directly to the article. You can change these parameters by editing the following line in the above code:

eo.mc.content.htmlText = Tools.truncate( eo.mc.content.text, 20, " more" );

If you test your movie now you should see the titles appear in the index in the new font as well as the first 20 characters of the content of each article.

 

10. You can now add the day and month alongside each title. Double click on the indexMC movie clip that's in your library in order to edit it. You should see the title textfield sitting at the 0,0 location and the content textfield directly underneath. In this example, we'll be adding the day and month just above the title so in order to make room for this, select the 2 textfields that are in this movie clip and move them down 20 pixels so that the title textfield is now sitting at X:0, Y:20.

 

11. Place a single line dynamic textfield the 0,0 for the month textfield and give it an instance name month_txt. Place another single line dynamic textfield to the right of this textfield, for the day value, and give it an instance name day_txt.

 

12. Replace the ActionScript code that you added in step 9 with the following code:

import fcms.Tools;
lis = {};


lis.recordInit = function ( eo:Object )
{
eo.mc.day_txt.text = Tools.formatDate( eo.dates.modification, "%d" );
eo.mc.month_txt.text = Tools.formatDate( eo.dates.modification, "%B", true ).substr(0,3).toUpperCase();
eo.mc.content.htmlText = Tools.truncate( eo.mc.content.text, 20, " more" );
}
index_mc.addEventListener( "recordInit", lis );

 

If you now test your movie (ctrl+enter), you should see the month and day appear above each title.

 

The look for the items in the index can be entirely flexible. For example, you may wish to add some graphics inside the movie clip to liven up the look.

 

For more information on the code used in these examples and to examine more options, please read about the Tools.formatDate and Tools.truncate methods in the ActionScript section of this userguide.