Once you've installed your back-end, this tutorial will explain the steps necessary to start using the fCMSPro by walking you through the process of building a simple application for displaying news on your site.
1. Having installed the component using the
Adobe
extension manager and having installed the back-end, open Flash and start
a new file.
Note that while developing you may wish to copy the modules folder from the fCMSBackend folder into the same folder as your .FLA file, this will allow you to test locally.
2. Name the first layer 'fMaster', select frame 14 on the timeline and press F5 to add extra frames along the timeline. The fMaster component must initialize before any other fCMSPro module. To ensure this happens make sure it is on the lowest layer of the timeline (by default Flash loads from bottom to top).
3. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and open the fCMSPro folder. Locate the fMaster component inside and drag a copy onto your stage.
With the fMaster component still selected. (You can position the fMaster component anywhere in the work area, it does not have to be on the stage.) Press Ctrl+F3 (Windows) or Cmnd+F3 (Mac) to open the properties panel and give the component the instance name 'myCMS' (without the quotes).
With the component still selected press Alt+F7 to open the component inspector panel and set the fCMS Modules Path and the fCMS Server Path. These are the paths to your modules folder and to your backend installation.
Note that the fMaster component must initialize before any other fCMSPro component. For this reason you should place all your other content that uses the fCMSPro at least one frame later than the position of the fMaster component.
4. Create a new layer and name it 'fIndex & fPaging'. Select frame 5 on the new layer and press F6 to insert a new keyframe. Select frame 10 and press F7 to insert a blank keyframe.
Open the components panel and drag a copy of the fIndex component onto the new layer at frame 5. (As noted above adding the fIndex component at frame 5 allows the fMaster component to initialize first.)
With the component still selected press Ctrl+F3 (Windows) or Cmnd+F3 (Mac) to open the properties panel and enter the instance name 'newsIndex' for the component. Position the component to the top left of the stage, set its width to 200 and its height to 350.
With the fIndex component still selected open the component inspector. Set the linkedTextField to 'title_txt' (without the quotes) and set the 'recordMC identifier' to 'headline_clip' without the quotes. Both of these values will be explained below.
Note that the default value of the 'fields' parameter is 'title'. All documents require one record named 'title'.
5. Deselect the fIndex component. Press Ctrl+F8 (Windows) or Cmnd+F8 (Mac) and the 'Create New Symbol' dialogue box will appear. Name the symbol 'headline' and ensure the symbol type is 'Movie clip'. If the advanced section is not open click the 'Advanced' button and tick the 'Export for Actionscript' checkbox (the 'Export in First Frame' checkbox will select itself).
As the identifier, enter the the value you entered for the 'recordMC identifier' which was 'headline_clip' (without the quotes).
On the 'headline' movie clip's timeline press 'T' to select the Text tool and draw a single line dynamic text field. With the text field selected open the properties panel and give it the instance name 'title_txt' (without the quotes).
6. Return to the main timeline and open the components panel. Drag a copy of the fPaging component onto the stage. Position it below the fIndex component. With the fPaging component selected open the component inspector and set its target to the instance name of your fIndex component (newsIndex).
The fPaging component will allow you to run through multiple pages in the event that more than the 'pageNumbers' records (5 is the default) are returned from the backend.
7. Press Ctrl+F8 (Windows) or Cmnd+F8 (Mac) to open the 'Create New Symbol' dialogue box again. Give the symbol the name 'news item'. Ensure the type is 'Movie clip' and click 'OK'. Press T to select the Text tool and on the movieclip's timeline create two dynamic textfields, a single line textfield with the instance name 'title_txt' and a multiline textfield with the instance name 'details_txt'.
Open the components panel and drag a copy of the fString component onto the title_txt. Open the component inspector and enter 'title' (without the quotes) as the value of the field parameter. Check that the value of the targetTextField is 'title_txt' (without the quotes). The value of the targetTextField is set by dragging the 'fString' component onto the 'title_txt' textfield, this instructs fCMSPro to use this field to display and edit the content of the 'title' record field.
Drag a copy of the fText component onto the 'details_txt' text field. In the component inspector panel enter 'details' (without the quotes) as the value of the field parameter. Check the value of the targetTextField parameter is 'details_txt' (without the quotes). By dragging the 'fText' component onto the 'details_txt' textfield you instruct the fCMSPro to use this field to display and for editing the content.
8. Return to the main timeline and create a new layer. Select frame 10 and press F6 to to insert a new keyframe. Open the library and drag a copy of the 'news item' clip that you have just created onto the new keyframe. In the properties panel give it the instance name 'newsItem'.
Drag a copy of the fTemplate component out of the component panel and onto the 'newsItem' instance. In the component inspector panel ensure the targetMovieClip is 'newsItem' and double click next to the required fields to enter 'title' and 'details' as two separate values.
Set the document type to 'news' (without the quotes).
9. Create a new layer named 'buttons' and create a blank keyframe at frame 5.
Press Ctrl+F8 (Windows) or Cmnd+F8 (Mac) to open the 'Create New Symbol' dialogue box. Select 'Button' as the type, name the symbol 'index button' and click 'OK'.
Inside the symbol, on the first frame, place a static textfield with the text 'Index'. On the hitarea frame draw a rectangle to act as the button's hit area.
Return to the main timeline and drag the 'index button' symbol out of the library onto frame 5 of the buttons layer. In the properties panel give it the instance name 'indexButton' (without the quotes).
Create a new button with "News" as its text, drag a copy onto the timeline at frame 5 and in the properties panel give it the instance name 'newsButton' (without the quotes).
10. Create a new layer named 'labels' and insert keyframes on frames 5 and 10. Select the keyframe at frame 5 and in the properties panel enter 'index' as the frame label. At frame 10 enter the label 'news' in the properties panel.
11. Create a new layer named 'actions'. Select frame 5 and press F6 to insert a new keyframe. With the keyframe selected press Alt+F9 to open the actions panel and enter the following script:
stop();
This code stops the timeline playing once it reaches this frame.
Below that code enter the following script to create an object to act as a listener.
listenerObject = {};
Next, enter the following code.
listenerObject.recordInit = function ( eo ) {
eo.mc.title_txt.text = eo.data.title;
}
The recordInit event is triggered whenever the content of the index or template fields is changed. This is useful if we want to change the default way that the data is shown. The title_txt is the textfield we created inside the inside the 'headline' clip. The code inserts the title of the record in the text field.
Add this script to register the listenerObject with the 'newsIndex' component so that the listenerObject will be notified of the recordInit event.
newsIndex.addEventListener( "recordInit", listenerObject );
Lastly add the following script to add functionality to the indexButton and the newsButton.
indexButton.onRelease = function()
{
if ( myCMS.changeAllowed() )
{
gotoAndStop("index");
}
}
newsButton.onRelease = function()
{
if ( myCMS.changeAllowed() )
{
gotoAndStop("news");
}
}
The code for these two buttons runs when the mouse button is pressed and then released over the button. The code first checks with the fMaster component to ensure moving the timeline is allowed and then moves the playhead to either the 'index' or the 'news' frame depending on which button was clicked.
12. Finally press Ctrl+s (Windows) or Cmnd+s (Mac) to save your file. Select 'File > Publish' to publish the file and then upload the .html and .swf files to the server that you have installed your backend on. Note: The file fcmsfull.php (which is located in the php folder of your installation files), should be uploaded to the same folder as the HTML/php file in which the SWF containing the fCMSPro is embedded.