I finally have launched a website on which I can show that I actually use all the stuff that I write about in this blog. I have also integrated my upcoming online xml editor, which is almost complete. Well, it actually is, but as usual I have to setup the documentation etc. But you can already have a look and try out the basic functions: www.online-xml-editor.com (User: demo, Pw: demo). For the menubar of the XML editor I used the global navigation. As you can see, it is also very suitable to create application-like menus!

BTW: All content of the turtlebite.com flebsite is managed by the Turtlebite Flash CMS. Have a look at this video:

www.youtube.com/watch?v=KQrFRPzPNCw

Online XML Editor
I will write a special post for the XML editor itself soon!

Cheers,
Christian

Goodbye Servicecenter…
In this release I also got rid of the Servicecenter I introduced in version 4.67. Its intention was to optimize the installation process, but in the end many users had problems with it because of file permission issues. As a consequence I have moved all settings into one file called “config.php”, where you edit all settings. User management is now also handled in this config file, so the table turtlebite_user is also not needed any longer.

«flashcmsframework.com» changed to «turtlebite.com»
And finally, I changed the main domain name from “flashcmsframework.com” to “turtlebite.com”. When I started this blog, I thought it would be all about the Flash CMS. But than came the Global Navigation and the Fleb Framework. And there is another project in the works: an online xml editor. Stay tuned!

This site was built with the Fleb Framework and the client can upload files and edit every line of text. This was especially useful because I’m not really an expert in the russian language…

www.russiabeats.com

Managing table reservation
The Turtlebite Flash CMS Framework is also used to manage the table reservation of the website.
Visit this link to see the front end of it.

I’m constantly improving the Flash CMS. At the moment I’m working on an online XML editor.

Stay tuned!
Christian

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

Here is what the say about themselves:

“We are excited to introduce new informative Topflashcms.com source you could find useful for yourself. You may ask what is it all about? It is innovatory blog from where the users can derive extensive knowledge about various top Flash CMS inventions.

In case you lack essential information, this source thoroughly examines new Flash technologies and consequently issues most effective informational output whether it is connected with diverse Flash CMS platforms, or with professional Flash CMS Templates.

For Flash designers, Topflashcms.com is considered to be a profound set of informative blocks that gives exhaustive explanations of every new Flash novelty. What is also exciting that Topflashcms.com enables the visitors and Flash fans to share their own flash conceptions within submitted guest posts. In addition, this blog, being considerably redesigned, uses modern and clean style approach to make intelligible lay-out execution.

Apart from all above, you can find there functional on-line store with comprehensive variety of top-quality Flash CMS Templates you can purchase at affordable prices.

So, either you are a Flash designer, Flash enthusiast, or a Flash site owner you have a lot of reasons to check out Topflashcms.com.”

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…

.