iPhone / iPod / iPad Detection

Flash on the iPhone? Unfortunatly not (not yet… I’m an optimist ). But anyway, I believe it’s the wrong way to have the exact same site on a mobile device and in the browser. Not only is the screen smaller and loading takes longer, I personally have other priorities when surfing on a mobile phone. So let’s take this as a challenge and provide different content when someone visits your page on an iPhone. All I did is provide a detection in index.php which redirects users of iPhone & Co. to a special page: iphone.php. In this file the same xml structure is parsed, but this time the navigation is displayed in a flat hierarchy to provide as much room as possible for the content itself. Check it out! I have used some iPhone specific settings so that the zooming is disabled for example:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

You only need to adjust the CSS files to your needs.

Here 2 links with useful and detailed infos:
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
http://fuint.com/2010/09/when-developing-websites-you-have-to-...
.

Automatic width and height handling with full browser scrolling

I’ve decided to implement this into the Fleb Framework, because I use it in every website to be sure the user can see all content, even if he/she has a small display. I prefer to use the built in UI Scrollbars, because that way I get the most flexibility.
A few times I used other solutions that make use of the native browser scrollbars, but I was not happy with that, because there is no way to scroll just a part of the website: it always scrolls the whole embedded SWF. Check out this deeplink of the Flebsite demo and scroll. Watch the word “BASE” at the upper left corner and also the black gradient at the top. It stays where it is, exactly what is wanted. This would not be possible if the browser scrollbars were used. Or another example to make it more clear: only the content is scrolled, the header and footer don’t move. By the way: of course you can set if and how much the scrolling will ease in and out.

But if you prefer it the other way (SWFFit for example): simply remove a few lines of code to get rid of the SiteScrollbars class and use your preferred solution.
.

Font Manager

Another nice thing is now part of the Fleb framework: dynamic font loading. This is a really cool method I’ve found some time ago. Here is a post about it. It’s ridiculously simple: Just create an empty FLA file, add one or more dynamic textfields to the stage and select the fonts, compile, done. All you have to do in Fleb later is telling the framework where the fonts are:

Core.getInstance().init(this, pH, nH, "fonts/fonts.swf", "fonts/style.css");

You can also load the styles at the same time. The font manager will be accessible from anywhere like this:

import net.kaegi.utils.VarCentral;
var varcentral:Object = VarCentral.getInstance().vars;
tf.styleSheet = varcentral.flebFontManager.getStyleSheet();
tf.text = "<span class='font2'>" + txt + "</span>";

.

Print Manager: multipage printing out of the box

In the flebsite demo, I have integrated the printing solution to show how you can use it in a Fleb site if needed. It is a very handy method to provide the possibility to print out your website or parts of it. The Print class will adjust the size, accordingly to the choosen paper orientation, to always fit the content to the page (or pages, if multipage printing is desired). This class is simply imported in your Fleb main document class. It’s there for your convenience: if you don’t need it, just remove the import and the printing methods. To get more info about this class visit this post and the documentation.

.

And now?

You will find all of this in the demo site. You can download all files and analyze them. To get started and download the framework, please visit the documentation.

Cheers (and merry christmas if this was my last post in this year…)
Christian

When I started writing this editor, I wanted to create something to handle xml files for the global navigation. It quickly turn into something much more complex, and even better, much more flexible. In a next post I will show how you can turn this editor into a specialised editor for Gaia site xml files, for example. By creating so called configuration xml files you can use this xml editor for any of your xml files.

Simple but flexible CMS
I have also implemented a rich text editor. In the final version you will be able to install this editor on your server and turn it into a simple but flexible CMS with individual user management. Easy but effective. More later.

Stay tuned!
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.

—-

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…

.

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