Dreamweaver Extensions

Working with XML content

Open the book.xml file in Dreamweaver (File -> Open), to change the content of your FlipBook. Also, you can open the XML content file through FlashDevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Flip Book). After that, in the category of 'General', click the 'Edit' button near the 'Source' field.

The following example shows the basic structure of the content XML file:

<?xml version="1.0" encoding="utf-8"?>
<book>
   <page bookmark="BOOKMARK">
      <item type="text" font_size="16" color="0xF0F0F0" caption="TITLE" />
      <item type="separator" color="0x505050" />
      <item type="text" caption="PAGE TEXT 1" />
      <item type="link" caption="EXTERNAL LINK" link="empty.html" target="_self" />
      <item type="link" caption="PAGE LINK" link="goto:2" />
      <item type="img" src="photos/photo01.jpg" link="empty.html" target="_self" margin_top="5" />
   </page>
   <page wide="true">
      <item type="text" caption="PAGE TEXT 2-3" />
      <item type="img" src="photos/photo02.jpg" />
   </page>
   <page>
      <item type="text" caption="PAGE TEXT 4" />
      <item type="img" magnify="true" src="photos/photo05.jpg" />
   </page>
   <page>
      <item type="text" caption="PAGE TEXT 5" />
      <item type="img" src="photos/photo05.jpg" />
   </page>
   <page bookmark="BOOKMARK">
      <item type="text" caption="PAGE TEXT 6" />
      <item type="img" src="photos/photo06.jpg" />
   </page>
</book>

In this example, parent <book> tag contains 5 child tags <page>.

First tag <page> has additional attribute bookmark "BOOKMARK". Also this tag <page> has 6 items with different types. First type is a simple text "TITLE" with specified font, size and colour. Second type is a separator with specified colour. Third type is a simple text "PAGE TEXT 1" with on-default settings that are specified in config.xml. Fourth type is an external link with caption "EXTERNAL LINK", the path of this link is 'empty.html'. Fifth type is an internal link with caption "PAGE LINK" and it goes to the second page of the book 'goto:2'. Sixth type is an image. It has a source link 'photos/photo01.jpg', link where it goes on mouse click 'empty.html' and its own top margin.

Second tag <page> has additional attribute 'wide'. So the content of the page will take two adjacent pages. Also this tag <page> has 2 items with different types. First type is a simple text "PAGE TEXT 2-3" with on-default settings that are specified in config.xml. Second type is an image with source link 'photos/photo02.jpg'.

Third tag <page> has no additional attributes. Also this tag <page> has 2 items with different types. First type is a simple text "PAGE TEXT 4" with on-default settings that are specified in config.xml. Second type is an image with source link 'photos/photo05.jpg'.

Fourth tag <page> has no additional attributes. Also this tag <page> has 2 items with different types. First type is a simple text "PAGE TEXT 5" with on-default settings that are specified in config.xml. Second type is an image with source link 'photos/photo05.jpg'.

Fifth tag <page> has additional attribute bookmark "BOOKMARK". Also this tag <page> has 2 items with different types. First type is a simple text "PAGE TEXT 6" with on-default settings that are specified in config.xml. Second type is an image with source link 'photos/photo06.jpg'.

<book>

Description
Main tag and contains the description of the component.

<page>

Description
Contains the page content of the Flip Book.

Optional attributes
The following attributes are optional for tag <page>.

  • wide, A Boolean value that indicates whether the content of the page will take two pages (like open book).
  • bookmark, The bookmark of the page.
  • background_color, The background color of the page.
  • background, The absolute or relative URL of the background image file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.
  • frame, The absolute or relative URL of the page frame file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://. Usually images of PNG and GIF formats with transparent background are used as frames.

Example: <page wide="true" bookmark="LOREM IPSUM" background_color="0xFF0000" background="imgs/background.jpg" frame="imgs/frame.png">

<item>

Description
Contains the description of the page item. Four types of the tag <item> are used to generate the content of the page. The type of the tag is specified with the help of attribute type. Depending on the value of type attribute, tag <item> can have different additional attributes. If you didn't specified some attributes, it would take on-default parameters from the config.xml, for example font, font size and font colours (see Customizing the component -> Content). Attribute type is an obligatory attribute for tag <item>.

For exmaple: <item type="text" caption="TEXT" />

Each <item> is situated one after another, as they are written in tag <page> (except elements with attributes x and y). Elements, that have attributes x and y are placed at the page according absolute coordintes x and y.

Attribute type can have the following values:

  • separator, Dividing line.

Optional attributes

  • color, The color of the line.
  • margin_top, The top margin of the line, in pixels.
  • margin_bottom, The bottom margin of the line, in pixels.

Exmaple: <item type="separator" color="0x505050" margin_top="5" margin_bottom="10" />
  • text, Simple text.

Attributes

  • caption, The caption of the text item.

Optional attributes

  • font, The font of the text. The number of fonts are limited, as fonts are integrated into flash. Available fonts: "Eurostile LT Std Ext Two", "Tahoma", "Myriad Pro", "Impact", "Monotype Corsiva".
  • font_size, The size of the font.
  • color, The color of the text.
  • margin_top, The top margin of the paragraph, in pixels.
  • margin_bottom, The bottom margin of the paragraph, in pixels.
  • margin_left, The left margin of the paragraph, in pixels.
  • margin_right, The right margin of the paragraph, in pixels.
  • x,The x coordinate of the text item.
  • y,The y coordinate of the text item.
  • width,The width of the text in pixels.

Exmaple 1: <item type="text" caption="TEXT" font="Impact" font_size="16" color="0xFFFFFF" margin_top="5" margin_left="10" />
Exmaple 2: <item type="text" caption="TEXT" font="Tahoma" x="20" y="100" width="150" />
  • link, This parameter represents the paragraph as a hyperlink. This type of tag <item> is similar to type text and has the same additional attributes. A little bit lower are written parameters that are unique for this type (simple text doesn't have such parameters).

Optional attributes

  • highlight, The highlight color of the link item.
  • link, The URL from which you can obtain the document or the link that opens a page of the book. The following record: link="goto:number_page" , is used to navigate through pages of the book. Instead of number_page goes the number of the page.
  • target, Specifies the window or HTML frame into which the document should be loaded. You can enter the name of a specific window or select from the following reserved target names:
    • _self specifies the current frame in the current window.
    • _blank specifies a new window.
    • _parent specifies the parent of the current frame.
    • _top specifies the top-level frame in the current window

Exmaple 1, a usual hyperlink:
<item type="link" caption="LINK" color="0x909090" highlight="0xFFFFFF" link="empty.html" target="_self" />

Exmaple 2, demonstrate the navigation through pages of the Flip Book:
<item type="link" caption="LINK" link="goto:5" />

Exmaple 3, as a link you can use javascript:
<item type="link" caption="LINK" link="javascript:alert('link');void(0);" />
  • img, an Image. This type of tag <item> place images on the page. If you didn't specify the size of the image, picture will take the whole space on the page.

Attributes

  • src,The absolute or relative URL of the image file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.

Optional attributes

  • scale_mode, This attribute determines how the image contents are adjusted. This property can be set to Fit, Crop and None values. Fits in the entire image cell or fills the entire image cell with an image, cropping the edges of the image where necessary.
  • magnify, A Boolean value that indicates whether it would be added magnifying lens to the image (true). Lens size is set in tab 'Content' in Flashdevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Flip Book).
  • width, The width of the image, in pixels.
  • height, The height of the image, in pixels.
  • border, Controls the thicknes of a border around an image item.
  • border_color, The color of the border around an image item.
  • margin_top, The top margin of the paragraph, in pixels.
  • margin_bottom, The bottom margin of the paragraph, in pixels.
  • margin_left, The left margin of the paragraph, in pixels.
  • margin_right, The right margin of the paragraph, in pixels.
  • x,The x coordinate of the image item.
  • y,The y coordinate of the image item.
  • link, The URL from which you can obtain the document or the link that opens a page of the book. The following record: link="goto:number_page" , is used to navigate through pages of the book. Instead of number_page goes the number of the page.
  • target, Specifies the window or HTML frame into which the document should be loaded. You can enter the name of a specific window or select from the following reserved target names:
    • _self specifies the current frame in the current window.
    • _blank specifies a new window.
    • _parent specifies the parent of the current frame.
    • _top specifies the top-level frame in the current window

Exmaple 1: <item type="img" src="photos/photo.jpg" />
Exmaple 2: <item type="img" src="photos/photo.jpg" width="80" height="10" x="20" y="100" link="goto:5" />
Exmaple 3: <item type="img" src="photos/photo.jpg" height="200" margin_top="5" link="empty.html" target="_blank" />

Image map

You can set area for multiple links on an image with the help of transparent images. These images you need place over image with the help of absolute coordinates.
Use attributes X and Y for tag <item>.

<page>
   <item type="img" src="photos/page02.jpg" />
   <item type="img" src="empty.png" x="50" y="50" width="100" height="20" link="empty.html" target="_blank" />
   <item type="img" src="empty.png" x="50" y="150" width="100" height="40" link="empty.html" target="_blank" />
</page>

empty.png - is an image with a transparent background.

  • swf, an Flash object. This type of tag <item> place flash object on the page. Attributes are the same as for image (see type="img").
  • video, This type of tag <item> place video on the page. If you didn't specify the size of the video, player will take the whole space on the page.

Attributes

  • src,The absolute or relative URL of the video file. A relative path must be relative to the SWF file. Absolute URLs must include the protocol reference, such as http://.

Optional attributes

  • scale_mode, This attribute determines how the image contents are adjusted. This property can be set to Fit, Crop and None values. Fits in the entire image cell or fills the entire image cell with an image, cropping the edges of the image where necessary.
  • thumb_frame, Defines, which frame will be taken as a thumbnail. Parameter sets in seconds. On-default it is 1 sec.
  • width, The width of the image, in pixels.
  • height, The height of the image, in pixels.
  • margin_top, The top margin of the paragraph, in pixels.
  • margin_bottom, The bottom margin of the paragraph, in pixels.
  • margin_left, The left margin of the paragraph, in pixels.
  • margin_right, The right margin of the paragraph, in pixels.
  • x,The x coordinate of the image item.
  • y,The y coordinate of the image item.

Exmaple 1: <item type="video" src="videos/video.flv" height="200" />