Flash CMS: Slot layout XML attributes

There are 3 different nodes defined in the xml file for the slot layouts:

• Setup
• Layout
• Targets

<setup maxRows="15" slotSpace="2" tabChar="§" editRollOverColor="CCCCCC" editRollOutColor="990000" layoutMenuHorizontal="false"/>

Defines how many slots are loaded per page.

Vertical spacing between the slots.

Because it is not possible to use the tabulator in a flash textfield as you are used to in a word processor software, I created a workaround: At the position you want to have a tab stop, add the special character. Then click on “TAB” and this character is replaced by “\t” in the HTML textfield. Watch this video.

The color of the textfield when you roll over with the mouse (red in the screenshot below):

The color of the textfield when you roll out with the mouse (light grey in the screenshot below):

If true, the layout menu will be shown horizontally, if false, it will be shown vertically. As shown in the screenshot below:



If you have many layouts, it is wiser to choose the horizontal way and change to numbers or abbreviations. You can hand out a PDF to your client like this one, so they no which number goes with which layout.

<layouts>
	<layout label=" Text only "/>
	<layout label=" Picture only "/>
	<layout label=" 2 Pictures "/>
	<layout label=" Pic left, Text right "/>
	<layout label=" Pic right, Text left "/>
</layouts>

<targets>
	<target id="tf0" type="text_html" visibility="1{0{1{1{1" x="0{0{0{0{0" y="0{0{84{84{0" width="219{0{105{105{108" richtext="true" embedfonts="true" multiline="true" align="left" leading="2" bgColor="" textStyles="newsFontStyle" linkStyle="newsLinkStyle" linkDir="" linkRemovedColor="000000" antiAliasType="advanced" />
	<target id="tf1" type="text_html" visibility="0{0{1{1{1" x="0{0{112{112{111" y="0{0{84{0{84" width="0{0{106{106{105" richtext="true" embedfonts="true" multiline="true" align="left" leading="2" bgColor="" textStyles="newsFontStyle" linkStyle="newsLinkStyle" linkDir="" linkRemovedColor="000000" antiAliasType="advanced" />
	<target id="pic0" type="media_pic" visibility="0{1{0{0{0" x="0{2{0{0{0" y="0{3{0{0{0" width="0{213{0{0{0" height="0{167{0{0{0" thumb="true" filePath="images/1_column_news" showFolders="true" bgColor="000000" bgAlpha="30" fileFilter="jpg,png,gif,swf" />
	<target id="pic2_0" type="media_pic" visibility="0{0{1{1{0" x="0{0{2{2{0" y="0{0{3{3{0" width="0{0{100{100{0" height="0{0{80{80{0" thumb="true" filePath="images/2_column_news" showFolders="true" bgColor="000000" bgAlpha="30" fileFilter="jpg,png,gif,swf" />
	<target id="pic2_1" type="media_pic" visibility="0{0{1{0{1" x="0{0{114{0{114" y="0{0{3{0{3" width="0{0{100{0{100" height="0{0{80{0{80" thumb="true" filePath="images/2_column_news" showFolders="true" bgColor="000000" bgAlpha="30" fileFilter="jpg,png,gif,swf" />
</targets>

ID of the textfield or the movieclip (containing the picture) in your FLA file.

Used for storing values in the database.
For textfields: “text_html” or “text_plain”
For pictures: “media_pic”

This string will later be split into an array, where the first value is used for the first slot layout, the second value for the second layout and so on. Have a look at the XML above, “Layout” and Targets”. Then examine this table:

Horizontal position of the target. Same philosophy as in “visibility” (split string into an array for different positions per layout).

Vertical position of the target. Width of the target. Same philosophy as in “visibility” (split string into an array for different positions per layout).

Width of the target. Same philosophy as in “visibility” (split string into an array for different widths per layout).

Used only for pictures (type=“media_pic”). Textfields are always autosized in height in the Flash CMS.

Use richtext=“true” if you want to use the rich text editor. Otherwise, the user cannot choose text styles in the text editor.

• richtext=“true”
  

• richtext=“false”
  

Use embedfonts=“true” if you want the fonts to be embedded. Otherwise, set “false”.

If multiline=“false”, the user is forced to have one line of text only. This is useful if in the design of your website there is also only one line of text allowed. But because the texfield in the text editor is autosized, the user might tend to write more than one line…

For example, textStyles=“newsFontStyle”.
This is the link to the array you have defined in “fonts.swf”:

_level0.newsFontStyle = [];
_level0.newsFontStyle.push({styleName:"Body",font:"_myfont1",size:12,color:0x4D5544});
_level0.newsFontStyle.push({styleName:"Body Chicken Scratch", font:"_myfont2", size:20, color:0x001288});
_level0.newsFontStyle.push({styleName:"Title", font:"_myfont3", size:18, color:0x000000});

For example, linkStyle=“newsLinkStyle”.
This is the link to the array you have defined in “fonts.swf”:

_level0.myLinkStyle = new TextField.StyleSheet();
_level0.myLinkStyle.setStyle("a:link",{color:"#990000", textDecoration:"underline"});
_level0.myLinkStyle.setStyle("a:hover",{color:"#FF0000", textDecoration:"none"})

Note: This style is not saved. When you connect your FLA to the CMS and load slot content, you have to set the styles again in AS3. It's just that the user is seeing the correct colors when adding hyperlinks in the Flash CMS.

Here you define the path to documents and images when a user is in the text editor. He can choose a file and than hyperlink it in the text, for example a PDF he has just uploaded.

When you assign a hyperlink to text, the color you have defined in linkStyle will be used to set the color of the text. Because the originial color is not saved anywhere, use e.g. linkRemovedColor=“999999” to set the color of the text back to “999999” when the hyperlink is removed again in the text editor.

Antialias type for the textfield, “normal” or “advanced”.

Used together with type=“media_pic” to tell if there is a thumbnail version of the picture (thumb=“true”) or not (thumb=“false”)

Used for pictures (type=“media_pic”) to define the file path.

If showFolder=“true”, the user can navigate in the drop down menu to select files to hyperlink. See the screenshot of ”linkDir”: You can navigate back: ”« back (images/4_column)”. With showFolder=“false” you can prevent this.

Used for pictures (type=“media_pic”) and textfields.
Pictures: When you add a new slot with a layout that contains a picture, a placeholder is drawn of the size and position you have defined in “x, y, width and height”. By using bgColor=“999999” you can set the color of this placeholder to grey.

See “bgColor” above. By using bgAlpha=“50” you can set the alpha value of this placeholder to semi-transparent. (0=transparent, 100=opaque).

Used for pictures (type=“media_pic”). By using fileFilter=“jpg” the user only sees ”.jpg”-files when he selects a picture in the slot. This is useful if you keep all files together in one folder, for example PDFs and JPGs. That way you can filter out all PDFs here. If you want to filter more than one file extension, use e.g. fileFilter=“jpg,png,swf”. Leave it empty or set fileFilter=“*” to allow all files in the drop down list.

If true, the loaded images will fit into the defined area (see width/height above) if they are larger.