This tutorial shows you how to skin the fPaging component. In order to complete this tutorial, you will need a working fCMSPro project in which the fPaging component is used. You may wish to use the tutorials, which were included with your download, for this.
1. First you must create a new movie clip which will contain all of the skin elements that you will use in your custom fPaging component. Create a new movie clip in your movie by selecting Insert -> New symbol (Ctrl+F8 (Win) or Cmnd+F8 (Mac)). 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: pagingSkin
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 pagingSkin movie clip.
5. Place a textfield on the stage of the pagingSkin movie clip. This textfield will be used for the page numbers. Set this textfield to Dynamic Text and set the font, font size, style and color as you wish. Position this textfield at x:0, y:0 and give the textfield an instance name of: _txt
Note: As this textfield is dynamic, the font will not automatically be embedded. To embed the font, click on the Embed button and choose to embed all numerals. If you have specified any separators in the fPaging properties then you should enter the character for the separator in the Include these characters field.
6. Now you will create a movie clip for the next button. Create a new movie clip in your movie by selecting Insert -> New symbol (ctrl+F8 or cmnd+F8). Select the type to be Movie clip and give your movie clip a name, for example: nextBtn .
7. Press OK. Your timeline should be in the pagingSkin movie clip. You can now draw the graphics that you wish to use for the next button. This should be positioned at x:0, y:0 of this movie clip. You may wish to use text instead or graphics.
8. Ensure that you library is open. If is not open, press Ctrl+L (Win) or Cmnd+L (Mac) to open it. Locate the pagingSkin movie clip that you created above and double click on it to edit it.
9. Drag an instance of the next button movie clip that you created in step 6 (nextBtn) from the library, onto the stage of the pagingSkin movie clip. Position this movie clip so that the horizontal position (the Y position) aligns as you would like it to in relation to the textfield. Give this movie clip the instance name next
10. Repeat steps 6-9 for the creation of the first, previous and last buttons. The instance names of these buttons should be first, prev and last respectively.
Note: You can omit any of these buttons as well as the textfield. For example, if you would like your fPaging component to only contain the next and previous arrows, you would only create these two movie clips and omit the textfield. The vertical position (x position) of the movie clips is not important as this is calculated automatically.
11. Return to the main timeline and click on the fPaging component that you wish to customize in order to select it. Enter the identifier name of the skin movie clip that you created (e.g: pagingSkin) in the skinMC parameter.
You can now test your movie (ctrl+enter or cmnd+enter). You should see the new skin applied to the fPaging component.