Photos and Links

A minimal xml file for the Carousel should look like this:

<slide_show> 
   <photo>image1.jpg</photo>
   <photo>path/image2.png</photo>
   <photo>../folder/subfolder/image3.gif</photo>
   <movie>animation.swf</movie>
   <photo title="This is me in Rome">./photos/meInRome.jpg</photo>
</slide_show>

I suggest you to use relative paths, but remember: they are relative to the location of the html page containing the Carousel (not to the Carousel.swf itself). Moreover, the xml file must be valid: modern browsers (like Firefox and IE) can be used to check xml files.

Prepare your images! Don't use huge images (like jpeg files from your 5 MegaPixel Camera)! Scale images to a size (in pixels) proportional to the space they will occupy in the Carousel. Remember that, by default, images take up to 50% of vertical space, to allow for vertical movement; you can change this via vertical_ratio option (see Carousel Options).

You can egnerate your images with scripts:

<photo>scripts/generatejpg.asp</photo> 
<photo>scripts/generatejpg.php?var1=123&amp;var2=two+words</photo>

Notice that & sign MUST ALWAYS be escaped as &amp;. Read What you must know about XML files for more information.

Links

You can associate a link to each photo specifying href and target exactly as you do for html anchor tags (you cannot specify anything else: no rel, no title, no class).

<photo href="mypage.html" target="_self">image.jpg</photo>

You can add links to any anchor, URL (even with CGI parameters), JS function, and FSCommand. See the Links on images example.

Further examples of what you can write are:

<photo href="page.html">imgs/image11.jpg</photo> 
<photo href="path/page.html">imgs/image12.jpg</photo> 
<photo href="http://www.example.com/test.html">imgs/image13.jpg</photo> 
<photo href="#anchor">imgs/image14.jpg</photo> 
 
<photo href="url.html" target="_blank">imgs/image21.jpg</photo> 
<photo href="url.html" target="_top">imgs/image21.jpg</photo> 
<photo href="url.html" target="_self">imgs/image21.jpg</photo> 
<photo href="url.html" target="myFrameName">imgs/image21.jpg</photo> 
 
<photo href="http://www.google.it/search?hl=en&amp;q=saverio+caminiti" target="_self">imgs/image31.jpg</photo> 
<photo href="javascript:alert('From Carousel you can call JavaScript functions.')">imgs/image32.jpg</photo> 
<photo href="javascript:myFunction(123, 'abc xyz')">imgs/image33.jpg</photo> 
<photo href="fscommand:anyCommand" target="parameter">imgs/image34.jpg</photo>

Notice that & sign MUST ALWAYS be escaped as &amp;, even inside attribute values! Read What you must know about XML files for more information.

If you open link in new windows (even using target=“_blank”) or call JavaScript functions set the allowScriptAccess parameter to aways (see Embedding Parameters).

Titles

You can add a title to each photo:

<photo title="This is me!">image.jpg</photo>

You can also use some very basic html tag (like <i>, <b>, and <br>) in your titles. Remeber that XML standards requeres you to replace < with &lt; and > with &gt; like this:

<photo title="This is a &lt;b&gt;bold&lt;/b&gt; word">image.jpg</photo>

Refer to Flash Manual for a list of html tags supported by Flash (this is a custon subset of html tags).

Alternatively you can use the exploded syntax for your photo tag, like this:

<photo>
  <href>http://www.flshow.net/</href>
  <target>_blank</target>
  <src>../images/DCP_0730.png</src>
  <title>This photo title has <i>italic</i> and <b>bold</b> text.<br/>There is also a second line here!</title>
</photo>

Do not mix inline and exploded syntax in the same photo and always remember that your XML file must be valid!

The default font and size is controlled via the titles > style option (see Carousel Options); but you can change it using font and textformat tags according with the flash-html specifications (see Flash Manual).

<photo>
  <src>../images/DCP_0730.png</src>
  <title>This is <font size="16" color="#FF9900">big orange</font> text.</title>
</photo>

Local tests

When you test an html page on your local computer Flash Player prevents Carousel to follow links to Internet addresses for security reasons (it can read data from your hard disk, it is not safe to let it communicate over the Internet). This apply also to JS function calls.

You can change this behaviour by declaring Carousel.swf as trusted:

  1. Right Click (ctrl+Click on Mac) on Carousel area;
  2. Click on “Settings…”;
  3. Click on the blue question mark, this leads you to the Flash Player Settings Manager;
  4. Go to “Global Security Settings Panel” (left menu);
  5. Add the Carousel.swf (with its full path on your computer) or a path that contains it (you can browse for files or folder);
  6. Close your browser and try again.

Cross Domain images

When you use images from a websites different from the one where the Carousel.swf is, cross-domain policy of the Flash Player apply.
This is all about copyright!

If your Carousel.swf is on a site (say yoursite.com) and image are on a different site (say anothersite.com) there is no evidence that you (your Carousel) have the right to manipulate those images. So you can display them but you cannot perform advanced image manipulation (like compute the reflection!).

The easy way to solve the problem is to put the Carousel.swf and all images on the same site (it doesn't have to be the same of your html page). Otherwise: anothersite.com should explicitly transfer copyright to yoursite.com. The way it must be done is by publishing a file named crossdomain.xml in the root of anothersite.com. Inside this file, with a proper xml syntax yoursite.com have to be declared as “allowed”.

Please notice that http://www.mysite.com/ and http:/mysite.com/ are (formally) different domains.

Sorry, these are Adobe policies to avoid FlashPlayer be involved in copyright violations. I cannot change this behaviour.

Please refer to the Adobe documents for more information.

Movies

You can place swf files inside the Carousel using the tag movie. This way you can add animated and interactive content to the Carousel. You can specify href, target, and title for movies also.

<movie>
  <href>http://www.flshow.net/</href>
  <target>_blank</target>
  <src>../animations/first.swf</src>
  <title>This is a flash movie</title>
</movie>

Movies do not have automatic reflection. It is up to you to draw a reflection inside your swf file. The stage size of your movie will be used as image size, so carefully set the stage size and draw your reflection outside the stage area. Moreover, if you have bitmaps inside your movie, don't forget to allow smoothing (with Flash CS3 open the Library, right click (ctrl+click on mac) on your bitmap, select properties and then check allow smoothing).

Also notice that Carousel uses ActionScript 3, so your swf file must be AS3 in order to allow interaction (click, mouseOver) from Carousel. Also notice that all movie are loaded with a simple Loader instance, then addEventListener method of the Loader is invoked to register listeners for mouse events. All movies are loaded in the same isolated ApplicationDomain so you can use a class with static methods to perform simple communication between your movies. Flash Cross Domain Policies apply.


Personal Tools