Flash CMS: Demosite Documentation

The demosite consists of 4 pages and a news area. I have choosen fantasy names so you are not distracted by names like “home” or “contact”, because it can be any page. All of the 4 main pages present a different aspect of the CMS, so lets start exploring!

When you set up a slot and edit its content, the size and position of the textfields and images is stored. The example page “Malis” shows how it looks like when you just retrieve the CMS data by the use of net.kaegi.cms.LoadSlots and let this class “spit out” the slot data on screen.

Here is the simple implementation of it:

import net.kaegi.cms.LoadSlots;
var loadSlots:LoadSlots = new LoadSlots(this);
loadSlots.setup("/cms", "slot_layout_main.xml", "db_table1");
loadSlots.load();

In this example we “hijack” the load textfields and load picture events, so we can add some code before the slots are drawn on screen. The position and size of the textfields and images are still the same, but I have added a shadow and a frame to the images. Also notice the special textfields (darkgreen): They have an attribute “expandable” so you can fill them with any amount of text. They will collapse to one line in the CMS so the are not disturbing the height of the slots. When you later retrieve the slot data in your website code, you can grab this textfields, place them, rotate them and so on. In this example I activate them on rollover.

Here is the code:

import net.kaegi.cms.LoadSlots;
import net.kaegi.events.LoadSlotsEvent;
//
var loadSlots:LoadSlots = new LoadSlots(this);
loadSlots.hijackTextfieldEvents = true;
loadSlots.hijackPictureEvents = true;
loadSlots.setup("/cms", "slot_layout_main.xml", "db_table2");
loadSlots.load();
//
// Events:
loadSlots.addEventListener(LoadSlotsEvent.SLOTS_LOADED, onAllSlotsLoaded);
loadSlots.addEventListener(LoadSlotsEvent.TF_LOADED, textfieldLoadedHandler);
loadSlots.addEventListener(LoadSlotsEvent.PIC_LOADED, picLoadedHandler);
loadSlots.addEventListener(LoadSlotsEvent.PIC_ROLLOVER, picRollOverHandler);
loadSlots.addEventListener(LoadSlotsEvent.PIC_ROLLOUT, picRollOutHandler);
//
// Hijacked Textfield Events:
function textfieldLoadedHandler(event:LoadSlotsEvent):void {
  if (event.params.id.indexOf("expand") == -1) {
    TweenMax.to(event.params.tf, 0.1, {dropShadowFilter:{color:0x000000, alpha:.2, blurX:2, blurY:2, distance:4}});
    event.params.slot.addChild(event.params.tf);
  } 
}
//
// Hijacked Picture Events:
function picLoadedHandler(event:LoadSlotsEvent):void {
  // add a background and a frame the same size of the image to show before the image is loaded:
  var bg:MovieClip = new Pic_bg();
  var frame:MovieClip = new Picframe();
  bg.x = frame.x = event.params.posX;
  bg.y = frame.y = event.params.posY;
  bg.width = frame.picframe.width = event.params.width;
  bg.height = frame.picframe.height = event.params.height;
  // add the background, the image (which is in event.params.container) and the frame to the stage: 
  event.params.slot.addChild(bg);
  event.params.slot.addChild(event.params.container);
  event.params.slot.addChild(frame);
  // 
  // add the shadow: 
  TweenMax.to(event.params.container, 0.1, {dropShadowFilter:{color:0x000000, alpha:.7, blurX:6, blurY:6, distance:0}});
  //
  // check if the corresponding textfield has a link or is expandable:  
  var id:uint = event.params.id.substr(-1);
  if (event.params.link.length > 5 || event.params.textfields["tf_expand"+id].text.length > 0) {
    // ...if so, make the container of the image listen to mouse events:
    event.params.container.buttonMode = true;
  }
  // load the image into the container
  var mc = new LoadChildAsset(event.params.container,event.params.pic,onPicLoaded);
  mc.setMouseEnable(true);
}
function onPicLoaded(event:Event) {
  // You can listen for the PIC_LOADED event to do fancy things with your image, for example fading it in with a blur...
  TweenMax.from(event.target.content.parent.parent, 2, {alpha:0, colorMatrixFilter:{colorize:0x660000, amount:1}, blurFilter:{blurX:100}, ease:Expo.easeOut});
}
//
// Position, rotate and fade in the description when you roll over the picture:
function picRollOverHandler(event:LoadSlotsEvent):void {
  var tf:TextField = event.params.textfields["tf_expand"+event.params.id.substr(-1)];
  if (event.params.id == "pic0") {
    tf.y = event.params.target.y - 20;
    tf.x = event.params.target.x + 300;
    tf.width = 200;
  } else {
    tf.y = event.params.target.y - 10;
    tf.x = event.params.target.x + 90;
    tf.width = 100;
  }
    tf.autoSize = TextFieldAutoSize.LEFT;
    tf.rotation = 20;
    event.params.slot.addChild(tf);
}
//
// Hide the textfield on roll out:
function picRollOutHandler(event:LoadSlotsEvent):void {
  var id:uint = event.params.id.substr(-1);
  event.params.slot.removeChild(event.params.textfields["tf_expand"+id]);
}

In this example, no slots at all are drawn by the LoadSlots class. Instead, we take the slot data, which comes in an array, an do what is needed. For example, build a gallery. Also note that the title font is different in the CMS than in the final website on the right: I did this on purpose to show you that you can create a plain textfield in the CMS and just use the content, but not the font and format of that textfield in your final website.

Here is the code:

import net.kaegi.cms.LoadSlots;
import net.kaegi.events.LoadSlotsEvent;
//
var loadSlots:LoadSlots = new LoadSlots(this);
// avoid the slots being drawn:
loadSlots.drawSlotsEnabled = false;
// hijack slots:
loadSlots.hijackTextfieldEvents = true;
loadSlots.hijackPictureEvents = true;
loadSlots.setup("/cms", "slot_layout_gallery.xml", "db_table3");
loadSlots.load();
// listen for "all slots ready" event:
loadSlots.addEventListener(LoadSlotsEvent.ALL_SLOTS_READY, onAllSlotsReady);
//
function onAllSlotsReady(event:LoadSlotsEvent) {
  loadSlots.removeEventListener(LoadSlotsEvent.ALL_SLOTS_READY, onAllSlotsReady);
  // The slots are loaded. But instead of displaying them, we feed the gallery with it:
  setupGallery(event.params.slots);
}
//
function setupGallery(slots:Array) {
  // code not shown here, build the gallery...
}

The complete code and the gallery class can be found in the demosite source files. (Please note: The gallery class used is not the final version. I will release it for free, but I have to first create some more examples and, again, a documentation…)

This example is simple, it just shows that you can change the background color in the CMS to the same you use in your final website.

Notice in this example that the 2 images have links assigned, one routes internally to the gallery page “Bonorum”, the other one to an external website www.kaegi.net.

The internal link is saved as “event:gallery”. I listen for text link events in the code and trigger the appropriate action.

loadSlots.addEventListener(LoadSlotsEvent.LINK_EVENT, onLinkEvent,false,0,true);
function onLinkEvent(event:LoadSlotsEvent) {
  switch (event.params.linkID) {
    case "gallery" :
      navigationManager.activateBtn("b2");
      break;
    }
}