The funny thing is, it is really simple if you know the right MySQL syntax you have to use. It is not done by setting the “Default Character Set” of  the database tables to “utf8″, which is what I have tried many times before. You have to add 2 more lines before the query.

In PHP, Instead of this:

//......
$query = "SELECT * FROM table";
$result = mysql_query($query);
//.....

…it should look like this:

//......
$query = "SELECT * FROM yourtable";
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET NAMES utf8");
$result = mysql_query($query);
//.....

I know this may seem too obvious, but at the time I was trying to solve this I just didn’t find the solution. And as I said, I had a workaround that was fine for a long time.

Another small improvement in version 4.71: skip crop/resize picture
I have added a checkbox in the upload section of the CMS, when you crop/resize a picture. It is now possible to skip the first cropping/resizing and therefor upload a picture “as is” (see the screenshot below). After that, you can still define the thumbnail. Why that? I have a client who is very keen on image quality. Even if I set the quality of imagemagic to 100%, the image quality loss was to big for the client, and even worse, the image became to large in file size. So now the client can prepare the image in photoshop, upload it as it is and just use the thumbnail functionality of the CMS to create the thumbnail, where quality does not matter that much.

Download the Turtlebite Flash CMS here.

Cheers,
Christian

You can download the Flash CMS here. Be sure to visit the documentation for further info.

Don’t hesitate to leave a comment or drop me a line if you need help or have questions!

BTW: Merry christmas!
Christian

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:

1. Analyze the textfield of your FLA file (width, used fonts, colors and styles).
2. Embed the fonts.
3. Define the layout. Information about the textfield (type, width, position, multiline, textstyles, background color etc.) is saved in an xml file.
4. 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.
5. 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.

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

   

   

   

   
3. 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"});
   

4. 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”.

<?xml version="1.0" encoding="UTF-8"?>
<root>
<setup maxRows="15" slotSpace="2" tabChar="§" editRollOverColor="990000" editRollOutColor="CCCCCC" layoutMenuHorizontal="false"/>
<layouts>
<layout label=" Single Textfield "/>
</layouts>
<targets>
<target id="tf" type="text_html" visibility="1" x="0" y="0" width="338" richtext="true" embedfonts="true" multiline="true" align="left" leading="2" textStyles="myFontStyle" linkStyle="myLinkStyle" linkDir="" linkRemovedColor="4D5544" antiAliasType="advanced"/>
</targets>
</root>

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”:

<?xml version="1.0" encoding="UTF-8"?>
<menu>
<menuitem label="File">
<menuitem label="Logout" id="logoff"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Greeting Card" contentSource="greeting_card" slotSource="slot_layout_quickstart.xml" hideContentVersionManager="1" slotNew="0" slotMove="0" slotCopy="0" slotLayout="0" slotDelete="0" bgColor="FFFFFF"/></menuitem>
</menu>

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”:

<?xml version="1.0" encoding="UTF-8"?>
<menu>
<menuitem label="File">
<menuitem label="Logout" id="logoff"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Greeting Card" contentSource="greeting_card" slotSource="slot_layout_quickstart.xml" hideContentVersionManager="1" slotNew="1" slotMove="1" slotCopy="1" slotLayout="1" slotDelete="1" bgColor="FFFFFF"/>
</menuitem>
</menu>

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.

Login to the Flash CMS as the administrator “Kevin”:

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

Visit the documentation here.

I will finish the step-by-step tutorial within the next view days, so stay tuned.

I assume you have downloaded and installed the Flash CMS and everything works fine so far. You’ve tested and played around with it and now want to take the next steps.

Step 1: Embedding the fonts

1. Open “fonts.fla” in Flash.
2. Open the library: you see 2 fonts already defined: “_myfont1″ and “_myfont2″. You are going to owerwrite these 2 and create a third, new font.
3. In the library, create a new font. Name it “_myfont3″. (Note: The CMS will refer to these names. You can define up to 15 different fonts: “_myfont1″ to “_myfont15″).
4. Open “_myfont1″ in the library and choose any font you like. Be sure your export settings are the same as in the screenshot. Repeat these steps for “_myfont2″ and “_myfont3″ with different fonts.

Step 2: Defining textstyles

1. Now open frame 1 (“setup”) in the actions panel to edit it.
2. At the top you can see the styles for hyperlinks. Change it if you like (different colours and decorations).
3. Next, you can find an array “_level0.testFontStyle”. Leave the name for now. There are 3 styles defined: “Body”, “Body bold” and “Headline”. These are the names the user sees and can choose from in the CMS.

Now, type in the fontnames you have embedded. I have used these fonts: “Bumblebee” (_myfont1), “JanicesHand” (_myfont2) and “Gadget” (_myfont3). 

Here the code after all changes:

_level0.testLinkStyle = new TextField.StyleSheet();
_level0.testLinkStyle.setStyle("a:link",{color:"#24A831", textDecoration:"underline"});
_level0.testLinkStyle.setStyle("a:hover",{color:"#177120", textDecoration:"none"});
// --------------------------------------------
_level0.testFontStyle = [];
// --------------------------------------------
f = {};
f.styleName = "Body";
f.font = "_myfont3";
f.size = 12;
f.color = 0x000000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "Handwriting in red";
f.font = "_myfont2";
f.size = 15;
f.color = 0x990000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "bigger Handwr. in blue";
f.font = "_myfont2";
f.size = 20;
f.color = 0x003399;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "HUGE Handwr.in pink";
f.font = "_myfont2";
f.size = 45;
f.color = 0xD906F0;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "The bubble Bumblebees";
f.font = "_myfont1";
f.size = 22;
f.color = 0x003333;
_level0.testFontStyle.push(f);

Step 3: Export fonts.swf and upload it to the server

1. Export fonts.swf for (ActionScript 2!) and upload it into the folder “login” on your server.

Login the CMS and test it. It should look similar to this (of course with your chosen fonts).

Step 4: Create the FLA that loads this content

First, we will create the “fonts_as3.swf”. In this SWF the fonts are embedded for global use all over your website. Create 3 fonts in the library with the settings as shown in this screenshot below.

Step 6: Register the fonts in AS3

Font.registerFont(_myfont1);
Font.registerFont(_myfont2);
Font.registerFont(_myfont3);

import net.kaegi.utils.VarCentral;
var fonts:Array = [];
fonts[0] = ["_myfont1","Bumblebee"];
fonts[1] = ["_myfont2","JanicesHand Regular"];
fonts[2] = ["_myfont3","Gadget"];
VarCentral.getInstance().vars.fontsForCMS = fonts;

In the code above you can see that I use a little class, “VarCentral”. This comes in very handy if you want to store any variables in a central place because you may need them somewhere else in your site. It’s up to you to also use this or do the handling of global vars in your preferred way. The array “fonts” will later be used to replace all occurences of “_myfontX” in the html textfields of the CMS with the corresponding real fonts. This method is very useful, because you are able to change fonts without disturbing the saved html text.

Step 7: Create the SWF that loads the CMS slots

Please download this FLAs. I have commented everything so it should be self-explanatory. It also contains the font_as3.fla. Note that you may have to adjust it to your own fonts.

Below just a reminder that the Flash CMS backend is written in AS2 and your website is written in AS3:

.

—-

Done! I have finished the service center, and have rewritten the installation steps. There are not many anymore…
Also I had to remove the download of the demo site, because I need to do some adjustements to it due to the introduction of the service center. Anyway, as I’ve written in my previous post, the demo site was far to complex for someone to start with the Flash CMS, so I will setup some examples (yes I know, promised for a loooong time…), starting with very simple ones and going deeper one by one. The first example is ready and can be downloaded. I will document it here as soon as I have time…

OK, back to work…

.

I know I promised a quick start tutorial. In fact, I’ve started with a simple example that shows how you can connect a textfield of your website to the Flash CMS. But there are still too many questions that need to be answered so I have decided to programm something first: the Turtlebite Flash CMS ServiceCenter. With this, you can configurate and setup the CMS in a central place, and you dont’t have to edit a single PHP file anymore. You even don’t have to use phpMyAdmin or another MySQL tool to edit, delete or add CMS users in the tables! By using this, it will be the first step into the direction of my final goal: To make the installation and setup as painless and easy as possible.

So, here is a quick glance:

Configuration

On this page a systemcheck is performed, telling you if your server meets the requirements. You enter your database connection setup, hit ENTER and the corresponding php file (db_connect.php) will automatically be created for you. Also, you set the browser title, welcome text, background color settings etc., and it will create the php file for you (config.php).

CMS Users

Here you can edit, add or delete users of the Flash CMS. No need anymore to use phpMyAdmin or any other MySQL editor tool!

View the CMS Database

On this page you can view the content of the Flash CMS tables. This is not the place to edit anything, but you can view and, more important, delete records. You can only delete records from “turtlebite_index”. The records of “turtlebite_slot” and “turtlebite_content” will be removed accordingly. Remember the relationship: Every index record has any number of slots, and every slot has any number of content records. So, this is a good place to explore the tables to see if they contain anything, but also to cleanup and empty a CMS installation.

I’m still working on the ServiceCenter, I hope I finish soon so I can provide a much easier start for the Turtlebite Flash CMS, and also a simple long awaited quick start tutorial!

Stay tuned!

.

Have a look at this PDF, it shows the concept of the Flash CMS:

Don’t get scared off by this PDF, I just try to visualize where the XML/PHP files etc. appear in the CMS:

BTW, I will release this gallery class for free in the near future.

www.youtube.com/watch?v=ETmwERvRSec

I have created some pictures of the CMS when logged in. In these screenshots I gave everything a name. I will post more infos as time comes. And I will set up a structured documentation here.

[View with PicLens]

So, again: Thanks for the patience and stay tuned!
Christian

.