Carousel Designer V3

Package content

The package you purchased contains the following files:

Note that the rollover.mp3 that comes with this package was kindly provided by FlashDen user Webmarbles. For legal usage of this sound effect, contact the owner.

 

XML overview

In the .xml file that comes with the package, you can set a number of variables in the <settings /> tag. They are shown in the table below:

Variable name Variable type Value range Description
Rotation & control
rotationKind Number 0/1 The kind of rotation: 0 is continuous, 1 puts one image in front. Please note that some of the other variables only apply to one of these rotationKinds.
rotationSpeed Number > 0 The speed of the rotating animation. If rotationKind is set to 0 and autoRotate to 0 (i.e. the carousel is mouse controlled) this defines the strength of the rotation depending on the mouse position.
enableMouseWheel Boolean 0/1 Whether or not the carousel can be controlled using the mousewheel. This will only work when rotationKind is set to 1.
stopRotatingOnMouseOver Boolean 0/1 If set to 1 the carousel will stop rotating on mouseOver. If rotationKind is set to 1 and autoRotate is on, this will prevent the carousel to turn to the next carousel item.
AutoRotate functions
autoRotateMode Number 0/1/2 If rotationKind is set to 0:
if autoRotateMode is set to 0, the carousel will be controlled by the mouse position. If set to 1, the carousel will automatically rotate in a continuous movement. Setting this value to 2 will not have any functionality if rotationKind is set to 0.

If rotationKind is set to 1:
if autoRotateMode is set to 0, the carousel will only rotate if the user clicks an item, or a controlbar button. If set to 1, the carousel will automatically rotate to put the next item in front with an interval of autoRotateInterval (see below). If set to 2, the same will happen as if set to 1, but autoRotation will stop after one complete cycle.
autoRotateInterval Number >0 If rotationKind is set to 1, this value defines the number of seconds before the carousel autoRotates to the next item. Of course this only works if autoRotateMode is set to 1 or 2 (see above).
stopAutoRotateOnClick Boolean 0/1 This will only work if rotationKind is set to 1. If this is set to 1, the carousel will stop autoRotating when the user takes control over the carousel, i.e. clicks an item or a controlbar button.
Text settings
useTooltip Boolean 0/1 Whether to show a tooltip when the user hovers carousel items. The contents of the tooltip can be set in the individual item settings (below).
tooltipColor1 HEX-color #000000-#ffffff The color of the tooltip title (captionText 1).
tooltipColor2 HEX-color #000000-#ffffff The color of the tooltip main text (captionText 2).
tooltipColor3 HEX-color #000000-#ffffff The color of the tooltip help text (only active if showTooltipHelp (see below) is set to 1).
showTooltipHelp Boolean 0/1 Whether to show the help texts that tell the user what happens if they click an item.
tooltipHelpMove String The helptext that tells the user that the carousel will move the hovered item to the front when clicked.
tooltipHelpLink String The helptext that tells the user that a link will be followed when clicked.
useSubtitle Boolean 0/1 Whether or not to show text as subtitle textfields below the carousel. The texts shown are the same as used in the tooltip.
subtitleY Number Any The Y position of the subtitle text. The x-position can't be defined because it will always be centered.
useSecondCaption Boolean 0/1 Whether or not to show a second line of caption, defined in the xml of individual items. This applies to the subtitle as well as to the tooltip.
Navigation
useNavigationButtons Boolean 0/1 Whether or not to show the numbered navigation bar if rotationKind is set to 1.
navigationY Number Any The Y position of the navigation bar.
Item settings
borderColor HEX-color #000000-#ffffff The color of the border shown around the items.
borderThickness Number >= 0 The thickness of the border shown around the items. When using transparent png's this value should always be 0.
useImageSmoothing Boolean 0/1 Whether to smoothen the images loaded. Note that this will take more CPU.
playRollOverSound Boolean 0/1 Whether or not to play a sound on rollover. This sound should be a file named 'rollover.mp3', located in the Assets folder.
Carousel shape
spanY Number Any The height of the carousel.
spanX Number Any The width of the carousel.
centerX Number Any The x position of the center of the carousel, relative to the position of the 'carousel' movieclip in the .fla file.
centerY Number Any The y position of the center of the carousel, relative to the position of the 'carousel' movieclip in the .fla file.
distanceValue Number 0-1 This value defines the simulated distance of the complete carousel. If set to 0, the carousel will not be scaled (i.e. the front image will be 100% in size). If set to 1, the carousel will be scaled to 0%, i.e. it won't be visible anymore. Any value in between (e.g. 0.1, 0.5, 0.789) is allowed.
distanceDarken Number 0-1 This value defines the darkness of the image in the absolute back of the carousel. If set to 0, it will not be darkened. If set to 1, it will be completely darkened (appear black).
perspectiveRatio Number 0-1 Use this setting to finetune the shape of the path. Setting this to 1 will result in an equally drawn circle path, while choosing a value closer to 0 results in a path that is more 'pointy' in the back.
minimumscale Number 0-1 The scale of the image in the absolute back of the carousel. Set to 1 will mean this image is as big as the images in front, while set to 0 will make this image invisibly small.
Visual effects
useFocalBlur Boolean 0/1 Whether or not to apply focal blur (blur images that are further away).
focalBlurValue Number >0 The strength of the focal blur.
useMotionBlur Boolean 0/1 Whether or not to apply motionblur (blur images when the carousel is rotating).
motionBlurValue Number >0 The strength of the motionblur.
useFadeOnMouseOver Boolean 0/1 Whether or not to darken other items when the user hovers an item.
mouseOverDarkness Number >0 The darkness of the images darkened on mouseover.
useReflection Boolean 0/1 Whether or not to apply motionblur (blur images when the carousel is rotating).
reflectionAlphaValue Number 0-1 The visibility of the reflection

 

Every item also has its own properties. They are listed in the table below (note that there are different variables for 'video' items and 'image' items):

Variable name Variable type Value range Description
type String "video" or "image" If you want to play a .flv video using the built-in player, choose "video". If you want to load an image or a .swf, choose "image".
captionText String Any The first line of caption text. It will be the 'title' of the tooltip.
captionText2 String Any The second line of caption text. It will be the 'main text' of the tooltip.
If type is set to "image"
imageURL String Any The path to the image (.jpg, .gif, .png) or .swf to load. Note that this path is relative to the highest parent that loads the CarouselDesignerV3.swf. If you find any trouble loading files, read the FAQ below.
linkType String "URL", "frameNumber", "frameLabel" or "loadMovie" A command to tell what to do with the linkData and linkTarget. See below for examples.
linkTarget String A html target ("_blank", "_self", etc) or the movieclip in which linkData lies (if linkData is a frameNumber, a frameLabel or a container for loadMovie) A command to tell what to do with the linkData and linkTarget. See below for examples.
linkData String Any Either a URL to visit when clicked, a frame number, a frame label or a movie to load.
imageWidth Number Any Optional image width. If you're loading a .swf this value must be set. If this value is not set, the image width will be automatically determined.
imageHeight Number Any Optional image height. If you're loading a .swf this value must be set. If this value is not set, the image height will be automatically determined.
enableButtonWhenInFront Boolean 0/1 If rotationKind is set to 1, this defines whether the item is clickable when in front. This can be used for example when you are loading a .swf and you want the user to be able to control custom buttons inside it.
If type is set to "video"
imageURL String Any The path to the image (.jpg, .gif, .png) or .swf to load as a preview for the video. Note that this path is relative to the highest parent that loads the CarouselDesignerV3.swf. If you find any trouble loading files, read the FAQ below.
videoURL String Any The path to the video .flv to load. Note that this path is relative to the highest parent that loads the CarouselDesignerV3.swf. If you find any trouble loading files, read the FAQ below.
autoStart Boolean 0/1 Whether or not to start playing the video when this item is in front.
videoSmoothing Boolean 0/1 Whether or not to apply smoothing to the video. Note that this takes a lot of CPU and may slow down the carousel.
playerWidth Number >0 The width of the videoPlayer. The video will be resized to this value.
playerHeight Number >0 The height of the videoPlayer. The video will be resized to this value.

 

Using the linkage options

Using URLs

One way of linkage is to follow a usual URL. To do this you'll have to set linkType to "URL" and linkData to the URL you want to visit, for example "http://www.jurgenvisser.nl". linkTarget defines the window in which the URL is being loaded. For example "_blank" (opens a new window), "_self" (navigates away from the current page) or a frame name defined in your html website. Example: 

	<thumb
		type="image"
		imageURL="Assets/img1.jpg" 
		
		linkType="URL" 
		linkData="http://www.jurgenvisser.nl"
		linkTarget="_blank"
		
		captionText="Cupcakes" 
		captionText2="Some delicious cupcakes my aunt baked" 
		enableButtonWhenInFront="1"
	/>

Using a popup window

Opening an URL in a popup window is quite the same as opening a normal URL. First, set linkType to "popup". To give specific settings for the popup window, add a string as if defining popup window settings in javascript (see example). For more info on the latter, see this page. If you leave linkTarget empty (linkTarget=""), standard settings will be used (640x480 window). Example: 

	<thumb
		type="image"
		imageURL="Assets/img1.jpg" 
		
		linkType="popup" 
		linkData="http://www.jurgenvisser.nl"
		linkTarget="width=640,height=480,scrollbars=yes,toolbar=no,location=no, status=no, menubar=no, resizable=yes"
		
		captionText="Cupcakes" 
		captionText2="Some delicious cupcakes my aunt baked" 
		enableButtonWhenInFront="1"
	/>

Using frameNumbers and frameLabels

To make your flash movie go to a specific frameNumber or frameLabel you must set linkType to either of those values, and the linkData to either the number or the label name you want the timeline to go to. The linkTarget will be the timeline that contains the frame you're referring to. You can refer to this either using relative path ("_parent._parent" will be the timeline containing the 'carousel' movieclip) or absolute path ("_root.yourMovieClip"). Example: 

	<thumb
		type="image"
		imageURL="Assets/img1.jpg" 
		
		linkType="frameNumber" 
		linkData="13"
		linkTarget="_root.myMovieClip.mySecondMovieClip"
		
		captionText="Cupcakes" 
		captionText2="Some delicious cupcakes my aunt baked" 
		enableButtonWhenInFront="1"
	/>

Using loadMovie

You can also give a direct loadMovie command. To do this, linkType should be set to "loadMovie", and linkData should be the path to the movie to be loaded. linkTarget will then be the container movieclip. Example: 

	<thumb
		type="image"
		imageURL="Assets/img1.jpg" 
		
		linkType="loadMovie" 
		linkData="mySwfFolder/mySwf.swf"
		linkTarget="_parent._parent.myMovieClip.myContainer"
		
		captionText="Cupcakes" 
		captionText2="Some delicious cupcakes my aunt baked" 
		enableButtonWhenInFront="1"
	/>

 

Loading transparent .pngs and .swfs

If you want to load .pngs or .swfs, the thumb type should be set to "image". To make the background transparent, the borderThickness in the settings tag should be set to 0, else the image will show the borderColor as background color.

If you load a .swf note that you must set imageWidth and imageHeight values to properly show the swf.

 

Resizing the carousel

To resize the carousel there are a few simple actions you should walk through:

Now if you open index.html in your browser, nothing has changed to the size of the carousel orbit itself, only to the stage's size. To change the carousel's size, do the following:

 

Adding a centered object to the carousel

I've had a lot of requests from people who wanted a movieclip centered in the movie. Since v2 it's very easy to do that.

 

Defining the front thumb

You might want to have a certain item in front (when rotationKind is set to 1). This can be set in the FlashVars in the index.html file.

 

Working from a custom .xml file

If you want to make various carousels, but don't want to upload a zillion copies of the viewer.swf file, you can now choose a xml file defined in the html, so that you only have to make several .xml files.

 

I'm having trouble loading the carousel!

I get a lot of questions from people why their carousel is not showing. Below are two common cases that are easy to solve. If you still can't manage to find a solution you can always contact me.

If you're seeing nothing that looks like a carousel (for example only a background color)

This problem is caused when the .xml file cannot be loaded. Either the .xml file cannot be found, or there's a syntax error. A common syntax error is putting a semicolon (;) behind a variable definition. Don't!

If the .xml file can't be found, it's often caused by the carousel .swf not being in the same folder as the .html or .swf file in which the carousel .swf is being loaded. For example: if you put index.html in your main folder and the carousel .swf and data.xml file in "carousel/", then the reference to data.xml (strange as it seems) should not be relative to the carousel .swf, but to the index.html, thus being "carousel/data.xml". You can change this in the index.html. To see how, scroll up to read "Working from a custom .xml file".

Note that solving the latter problem will often leave you with the problem below, so don't panic and just read on! :)

If you're seeing all image preloaders, but no images are being loaded

This means the data.xml has been loaded, but the path to the image file is incorrect. This has the same cause as the problem explained above. Here you should also refer to the image files relative to the index.html file, and not relative to the carousel .swf file.

 

Copyright notices

You may use this file in any of your projects, either commercial or non-commercial. You may not resell this file as is, or as part of a package, neither may you distribute this file freely, nor 'share' it with others who have not bought an original copy from www.flashden.net. You may though use this file as part of a custom project (e.g. website) for which you earn a payment.

 

Credits

I would appreciate it if you'd put my name and a link to my website (www.jurgencreative.nl) somewhere in the project where you used this file, but of course you don't have to. Also I love to see how my files are being used, so if you have finished your project I would really appreciate it if you would send me a link at flashden@jurgenvisser.nl.

Thank you for purchasing this file,

Jürgen