Flash CMS step by step tutorial “editing text”

Christian — Thu, 17 Sep 2009 08:05:43 +0000

The first step-by-step quick start tutorial is finished! It covers the basics and will guide you from the installation of the Flash CMS to the integration of it in your flash website (or maybe a flebsite? Well, that’s another story… ). I have set up a FLA file that shows kind of a greeting card. I’m sorry for the ugly 3D look, but I wanted the file to be compatible to CS3. In CS4 you would be doing this with the new 3D transformation tools. Anyway, it was important to show that you can connect any existing textfield; distorted, skewed etc. In this tutorial I will concentrate on editing a textfield only.

Before you start

To complete this tutorial it is required that you have installed and tested the Flash CMS. I have used free fonts from dafont.com: “Another“, “Chicken Scratch” and “Hardcore Pen“. Note for Mac users: On my MacBook Pro the fonts do not work in the flash IDE. I had to convert them into Mac True Type format (.dfont) first. I could not find a software for the Mac so I ended up using CrossFont on my old PC for doing this.
While reading this tutorial you might want to visit the case studies for more details. You can find the source files for this tutorial in the download section of the CMS.

Initial situation
Let’s assume some time ago you have created a website in AS3 that contains a “greeting card” like the one in the screenshot above. One day your client calls you to ask if you can make the text on the right side of the greeting card editable…

As the Turtlebite Flash CMS is a back end solution, this can easily be done. This is one of the huge advantages of this Flash CMS: You don’t have to build your website in a certain way or in a special cms system. Just create the website the way you prefer and “plug in” the cms later. Even better: the client gets a simple login to the Flash CMS and is only seeing what is relevant at the very moment: the textfield for the greeting card. No upload buttons, setting buttons or menu items that are not used yet and so on. Just give your client what he has demanded and don’t distract him with a bunch of not (yet) needed functionality. You set the menu on a per user basis in an xml file, but more about this later on.

Let’s integrate the Flash CMS

After you have installed and tested the Flash CMS, there are the following 5 steps that need to be done to integrate the Flash CMS:

Analyze the textfield of your FLA file (width, used fonts, colors and styles).
Embed the fonts.
Define the layout. Information about the textfield (type, width, position, multiline, textstyles, background color etc.) is saved in an xml file.
Create the Flash CMS menu. An xml file that contains all the menu items your client will be seeing. You can have a different menu for each user.
Create the user account.

Okay, let’s get a deeper look at each step.

Step 1: Analyze the textfield that needs to be connected to the Flash CMS
Open “quickstart.fla” and navigate to the textfield (book -> textbox -> tf). We need the following info:

Textfield width: 338 pixel (You don’t need to bother about the height, it will later be auto-sized)
Textfield leading: 2
“hardcore_pen”, 45 Pt., color: #486401. Let’s call it it “Title”.
“Another”, 20 Pt., color: #4D5544. Let’s call it “Body”.
“ChickenScratch AOE”, 22 Pt., color: #000000. Let’s call it “Body Chicken Scratch”.
The color for hyperlinks is #990000.

Step 2: Embed the fonts for the Flash CMS.

Create a new FLA, ActionScript 2. The size of the stage does not matter. Save it as “fonts.fla”.
In the library, add 3 new fonts with the settings shown in these pictures:

[View with PicLens]

In the first frame, copy and paste this code:

_level0.myFontStyle = [];
_level0.myFontStyle.push({styleName:"Body",font:"_myfont1", size:20, color:0x4D5544});
_level0.myFontStyle.push({styleName:"Body Chicken Scratch", font:"_myfont2", size:22, color:0x000000});
_level0.myFontStyle.push({styleName:"Title",font:"_myfont3",size:45,color:0x486401});
// --------------------------------------------
_level0.myLinkStyle = new TextField.StyleSheet();
_level0.myLinkStyle.setStyle("a:link",{color:"#990000", textDecoration:"underline"});
_level0.myLinkStyle.setStyle("a:hover",{color:"#FF0000", textDecoration:"none"});

As you can see when you look at the code above, the font information of step 1 is used here to define the font menu for the text editor. Later in the Flash CMS the “Select font style” menu will look like this:

Export this FLA for ActionScript 2. Then upload the “fonts.swf” into your the folder “login” which is inside your CMS folder on your server. There is already a “fonts.swf” file from the basic installation. You can rename it before you upload the newly created fonts.swf if you don’t want to overwrite it.

Step 5: Define the layout.
So far we have installed the Flash CMS, tested it, created and uploaded an SWF with the embedded fonts. The technical part is done. Now the Flash CMS needs to know about the textfield for the greeting card, the size of it, the fonts being used, colors and so on. All of this information is stored in an xml file.

Create an xml file, copy and paste the content below and save it as “slot_layout_quickstart.xml”.

Please refer to the docs for a complete description of each node/element of this slot xml file.
Now upload “slot_layout_quickstart.xml” to the server into folder “config” of your CMS installation.

Step 6: Create the Flash CMS menu
Now that the definition of the editable parts (the textfield of the greeting card) are defined, it’s time to create the menu bar for the Flash CMS:

Create an xml file, copy and paste the content below and save it as “cms_menu_quickstart_john.xml”:

Because our fictive user “john” should only be allowed to edit a single textfield and not being able to add new/move/copy/delete a slot, we have disabled these attributes in the cms menu xml file. Now we need to create an administrator file. Create an xml file, copy and paste the content below and save it as “cms_menu_quickstart_admin.xml”:

Now upload “cms_menu_quickstart_john.xml” and “cms_menu_quickstart_admin.xml” to the server into the folder “config” of your CMS installation.

Step 7: Create the user account(s)
Create 2 user accounts, one for “John” and the other one for the fictive adminstrator of John, “Kevin”. Remember: Each user can have his own menubar. Open “config.php” in your Flash CMS installation and add the two users: first Kevin, for “cmsmenu” type “cms_menu_quickstart_admin.xml”. Then add “John”, cmsmenu = “cms_menu_quickstart_john.xml”.

That’s it! Now let’s try it out.

In the menu bar, click on “edit”, than “greeting card”. We have to create the first slot. Do this by clicking on “Add new”:

A new slot is created with an empty textfield:

Now logout: In the menu bar, click on “File”, then “Logout”:

Let’s see what it looks like for our client “John”. Log in now as “John”. In the menu bar click “edit”, then “Greeting card”. It should look like this:

See the difference? The Slot Navigator and the Slot Menu are missing. That’s because we use different slot layout xml files for user John and for administrator Kevin. John should not be able to move/copy/delete slots etc. and therefor does not need to see the Slot Navigator and Slot Menu. Keep it as simple as possible for the client!

Ok, lets enter some text now. Just lean back and watch the video:

www.youtube.com/watch?v=FeIL4U2ztAE

Final step: Load the content of the CMS into the textfield of your FLA!
Open “quickstart.fla” and add this code in the first frame:

// Imports
import net.kaegi.cms.LoadSlots;
import net.kaegi.events.LoadSlotsEvent;
// This info is used in loadSlots. _myfontX in loaded html text will be replaced by the proper fontname.
var fonts:Array = [];
fonts[0] = ["_myfont1","Another"];
fonts[1] = ["_myfont2","ChickenScratch AOE"];
fonts[2] = ["_myfont3","hardcore_pen"];
// Load the textfield
var loadSlots:LoadSlots = new LoadSlots(this,fonts);
// Link style for the textfields
var linkStyle:StyleSheet = new StyleSheet();
linkStyle.setStyle("a:link",{color:"#990000", textDecoration:"underline"});
linkStyle.setStyle("a:hover",{color:"#FF0000", textDecoration:"none"});
loadSlots.styleSheet = linkStyle;
// avoid the slots being drawn. For more info see http://www.flashcmsframework.com/docs/doku.php?id=flash-cms-case-studies#free
loadSlots.drawSlotsEnabled = false;
// hijack textfield events:
loadSlots.hijackTextfieldEvents = true;
loadSlots.setup(pathToCMS, "slot_layout_quickstart.xml", "greeting_card");
loadSlots.load();
// Events
loadSlots.addEventListener(LoadSlotsEvent.TF_LOADED, textfieldLoadedHandler,false,0,true);
// Hijacked Textfield Events:
function textfieldLoadedHandler(event:LoadSlotsEvent):void {
book.textbox.tf.styleSheet = linkStyle;
book.textbox.tf.htmlText = event.params.tf.htmlText;
book.textbox.tf.addEventListener(TextEvent.LINK, onLinkEvent,false,0,true);
}

Your final compiled SWF of the greeting card should look like this:

Conclusion

Of course there is much more to cover. I realised that I have highly underestimated the effort of making a good documentation and how time-consuming it would be. I have put years into this Flash CMS and there are just so many things to explain. But this tutorial should give you a good starting point to get into it. Once you have completed your first project with it I’m sure you will gain speed quickly.

The next tutorial will cover the handling of images. Stay tuned!
Christian

Turtlebite's Blog » flash cms tutorial

Flash CMS step by step tutorial “editing text”

Before you start

Let’s integrate the Flash CMS

That’s it! Now let’s try it out.

Conclusion