BOB image slider - frog style web engineering


	My experience with frog style web engineering is the greatest buying experience I had so far on Internet (and believe me I'm buying very often) The application was working very well, with great examples, and when I wanted some information I received almost instant reply. If you are wondering if you should buy or not... don't hesitate a second, they are fantastic! John L. (Canada)

only US$ 29.95

Code Examples

Bob is very easy to use and you have plenty of ways to add your images (please note that only JPEG format is possible):

using the component inspector / properties panel

the component takes an array of image sources. This array can be populated using the component inspector of Macromedia Flash. If you can't find the component inspector, press Alt+F7. Look for the entry images and select it. You'll find a magnifier on the right, click on this. A window opens, where you can add items for your array. Fill the items with the image source files, for examlpe images/slider/image1.jpg.

using ActionScript and an array of image files

you can also use ActionScript to add images. Just create an array of image file names and assign the array to bob:

var imgf:Array = new  Array();     // create the array
imgf[0] = "images/rinerhorn.jpg";  // fill the fields of the array
imgf[1] = "images/tinzenhorn.jpg";
imgf[2] = "images/jatz_lift.jpg";

my_bob_instance.images = imgf;     // assign to bob

using ActionScript and an array of objects

maybe you want to store additional data on the image, like an alternative text or a location of a big version of this image. You can do this by passing an array of objects. Make sure the objects contain a value for src. Example:

var imgf:Array = new  Array();    // create the array
imgf[0] = {src: "images/rinerhorn.jpg",
           alt: "Rinerhorn", something: "hello world"};
imgf[1] = {src: "images/tinzenhorn.jpg",
           alt: "Tinzenhorn", anything: "some_value"};
imgf[2] = {src: "images/jatz_lift.jpg",
           alt: "Jatz Junior, Jakobshorn"};
my_bob_instance.images = imgf;    // assign to bob

using XML

you can also use XML to feed Bob. Either you load and parse the file yourself (example can be found in demo.fla which is included with the component), but easier is to use the component inspector. You can find an entry xml, where you can type the location of your XML file. Or you use ActionScript:

my_bob_instance.xml = 'your_xml_file.xml'

The Information Bubble and Event Handler

probably you noted the information bubble in the demo included. These bubbles are automatically shown if you are assiging an object that has an alt value or an XML node that has an alt attribute. Whenever the mouse rolls over this bubble, the function onInfoOver is called on the attached listener with the attributes event_obj, alt_text, mouse_x, mouse_y. When the mouse leaves the bubble, onInfoOut is called.

When the user clicks on an image, onClick is called on the event handler.

Here's an example of how to use these event handlers. It uses your tooltip component (with instance name fst) to show a bigger bubble with the info text:

listenerObject = new Object();
/* execute this, when someone clicks on an image */
listenerObject.click = function(event_object:Object, img_data:Object){
	trace(event_object + ".__image_data(" + img_data + ")");
}
/* the function when someone rolls over the info bubble */
listenerObject.onInfoOver = function(event_object:Object,
                            info:String, x:Number, y:Number)
{
	trace(event_object+".onInfo("+info+","+x+","+y+")");
	// display the alt text using the free tooltip component
	fst.show(info, 100, 60, x, y, "t");
}
/* the function when someone leaves the info bubble */
listenerObject.onInfoOut = function(event_object:Object)
{
	trace(event_object + ".onInfoOut");
	// hide the tooltip
	fst.hide();
}
/* assign this object to the slider */
your_bob_instance.addEventListener("click", listenerObject)

Properties of BOB image slider

You can set many properties to configure the image slider

images
set an array of strings or objects with src values that bob displays

image_height

image_width

border_color
the color of the border which is drawn around the images

border_width
the thicknes of the border

mouse_sensitive
a boolean value that specifies whether Bob rotates according to the mouse position

movement_interval
a number that specifies the milliseconds between two movements. Set to a higher value if you experience performance problems

radius
the radius of the circle. The total width of Bob will be (2 x radius + image_width)

rotation_acceleration
a value that describes the inertia, a smaller value stand for more inertia

rotation_max_speed
the maximum speed that the round-a-go can get

tilt_angle
the perspective angle in rads, good values range from -0.2 to 0.2

transparency
a boolean value. set to false to decrease CPU load

xml
the location of an XML file that describes the images

To start using BOB, drag an instance of BOB from the components panel (Ctrl-F7) on your stage.

If you want to control Bob by ActionScript, you have to name it. Look for the 'Properties' panel, which is usually at the bottom (if you can't find it: menu 'Window' > 'Properties').

Make sure that you display the 'Parameters' section of the panel. On the left, you can find an input field below a label that says 'Component'. Enter a name there, like 'my_bob' and press enter.

usually, you use the 'Component Inspector' (Alt-F7) to add images. Click on the name 'images' and then on the magnifier on the right

A window opens where you can fill the array. Use these tool to add images. Enter relative paths to your images to make sure everyone will see your slideshow correctly.

if you want, change other parameters of the component, like the radius, speed or anything else.

There's one parameter called 'xml' where you can specify an external XML file to be loaded. Check the downloaded package for a sample XML file.

Gianni Frey is a ColdFusion, C#, and Flash Programmer, and a Layout Designer. He currently studies Computer Science at ETH Zurich.

gianni@frogstyle.ch

313 ms