the flash components on this site are simple to use and completely customizable through the supplied xml files. very little or no knowledge of actionscript is required to take advantage of them.
Order with your Credit Card or PayPal account. Once you complete the payment an email will be sent to your address with the product attached.
download free demoThe demo is fully functional but contains a link to this site.
The iGallery is a custom flash component that can be fully updated through the supplied XML file. Complete customization of the gallery is possible by updating the XML file with your own styles, the appearance of the iGallery, the images and captions can all be updated. No need to worry about resizing the images, the iGallery can set the image dimensions before its displayed, all that is required is the image path. Images will never appear larger than the original, thus reducing distortion and quality!
The download includes everything needed to add the iGallery to your html pages. Flash authoring software is not needed unless you intend to add the gallery to your flash movies and customize your rollovers.
Open iGallery.xml in any html or text editor. This is a simple text file that provides the information that is displayed on the iGallery. It can also be used to customize the way the iGallery looks and the content that appears. The xml structure looks like :
< iGallery
stageW='500'
stageH='300'
stageColour='FFFFFF'
thumbPaneColour='000000'
thumbPaneAlpha='40'
thumbPane_y='245'
thumbSizeW='50'
thumbSizeH='35'
thumbBorder='1'
thumbBgColour='FFFFFF'
thumbBorderColour='009999'
thumbLoader='009999'
thumbSpace='4'
scrollBarH='3'
scrollTrackColour='009999'
scrollBarColour='FFFFFF'
scrollBarPosition='bottom'
largeLoaderW='100'
largeLoaderH='10'
largeLoader_x='250'
largeLoader_y='100'
largeLoaderBorderColour='000000'
largeLoaderBarColour='009999'
largeLoaderAlpha='100'
captionPaneH='20'
captionPane_y='2'
captionPaneColour='000000'
captionPaneAlpha='20'
captionTextColour='FFFFFF'
captionTextSize='12'
captionTextBold='false'
enlargeFirstImage='true' >
The top, opening < iGallery tag contains a list of attributes that are used to define how the iGallery looks. These attributes are optional if the flash component is used through the component inspector, the attributes need to be deleted from the xml file as these take precedence over the component inspector.
Image information is represented by the < pic node. The attributes - image and caption - contain the information for that image. Remove the caption if you do not wish to have one for that image.
Once you have finished updating your xml file, save it and test the iGAllery by opening the iGallery.html.
Open iGallery.xml using a text editor or html editor. You will notice variables defined at the top. The following is a table of descriptions and sample values for the iGallery attributes.
| Attribute | Sample value | Description |
|---|---|---|
| stageW | 500 | Width of iGallery |
| stageH | 300 | Height of iGallery |
| stageColour | FFFFFF | Background colour of stage |
| thumbPaneColour | 000000 | Colour of background that thumbnails appear on |
| thumbPaneAlpha | 40 | Opacity of background that thumbnails appear on |
| thumbPane_y | 245 | y co-ordinate that thumbnails appear |
| thumbSizeW | 50 | Width of thumbnails |
| thumbSizeH | 35 | Height of thumbnails |
| thumbBorder | 1 | Size of border around thumbnails |
| thumbBgColour | FFFFFF | Background colour of thumbnails |
| thumbBorderColour | 009999 | Colour of border around thumbnails |
| thumbLoader | 009999 | Colour of preloader for thumbnails |
| thumbSpace | 4 | Space between thumbnails and edge of backgroudn |
| scrollBarH | 3 | Height of thumbnail scroller |
| scrollTrackColour | 009999 | Colour of scroll bar track |
| scrollbarColour | FFFFFF | Colour of scroll bar |
| scrollbarPosition | bottom | Where scroll bar should appear. Values - top, bottom |
| largeLoaderW | 100 | Large image preloader width |
| largeLoaderH | 10 | Large image preloader height |
| largeLoader_x | 250 | x co-ordinate of large image preloader |
| largeLoader_y | 100 | y co-ordinate of large image preloader |
| largeLoaderBorderColour | 000000 | Border colour of large image preloader |
| largeLoaderBarColour | 009999 | Bar colour of large image preloader |
| largeLoaderAlpha | 100 | Opacity of large image preloader |
| captionPaneH | 20 | Height of caption background |
| captionPane_y | 2 | y co-ordinate of captions |
| captionPaneColour | 000000 | Background colour of captions |
| captionPaneAlpha | 20 | Opacity of caption background |
| captionTextColour | FFFFFF | Colour of caption text |
| captionTextSize | 12 | Size of caption text |
| captionTextBold | false | Weight of caption text. Values - true, false |
| enlargeFirstImage | true | Indicates whether to enlarge first image. Values - true, false |
Experiment with the above settings to achieve the results you desire!
The iGallery component enables you to add the gallery to flash movies. You will need Flash 8 or higher to use the component, and swf files should be published to flash player 8 or higher.
To install the iGallery.mxp you will need the latest version of Adobe Extension Manager. Once installed, double click the iGallery.mxp to add the gallery to your component library.
The iGallery component will be available in the jbuda_components sub-directory. Drag a copy onto the stage, then open the component inspector to adjust the gallery attributes.
NOTE - to use the component inspector parameters, the attributes in the xml file must be removed. Using the xml to set the iGallery parameters is a good way to update it without republishing each time.
The component inspector for the iGallery will be similar to the one pictured below. For a full list of the parameters and their descriptions, please see the xml table above.
As well as using the attributes in the xml and setting parameters in the component inspector. Further control can be added to the iGallery with Actionscript by calling methods, setting properties and creating responders for events.
The following is a list of methods, events and properties :
| Method | Description |
|---|---|
| iGallery.loadXML('_xmlfile_') | Loads _xmlfile_ into gallery |
| Event | Description |
|---|---|
| onLoadFinished | Triggered when xml file loads and before styles applied. evtObj.pics is an array of objects, each contains pic and caption |
| onStylesFinished | Triggered when xml file defines styles. evtObj.styles is an object containg all styles |
| onThumbLoaded | Triggered when thumbnail finishes loading. evtObj.thumb is reference to thumbnail |
| onThumbOver | Triggered when thumbnail is rolled over. evtObj.thumb is reference to thumbnail |
| onThumbOut | Triggered when thumbnail is rolled out. evtObj.thumb is reference to thumbnail |
| onThumbPress | Triggered when thumbnail is clicked. evtObj.thumb is reference to thumbnail |
| Property | Description |
|---|---|
| autoLoadXML | Boolean :: Determines if xml is loaded when component loads. Default - true. Should be set to false when invoking iGallery.loadXML() |
| disableThumbs | Boolean :: Determines if default rollover effects are used. Default - false. Set to true when setting custom rollovers using onThumbOver and onThumbOut |
| defaultXML | String :: Default xml file for gallery to use. Default - iGallery.xml. |
Under the closing tag of the top iGallery > the next set of nodes < pics provide the information for the images.
| Attribute | Description |
|---|---|
| pic | Used to specify the location of the image to use |
| caption | Text that accompanies the image when clicked. Remove this attribute if no text is needed. |
The following is an example of using the onThumbOver, onThumbOut, and onThumbPress events to set custom rollover effect.
| // Turn off default rollovers for thumbs iGallery.disableThumbs = true; // Create event listener object var myObj:Object = new Object(); // Set rollover behaviour myObj.onThumbOver = function(evtObj:Object) { evtObj.thumb._xscale = evtObj.thumb._yscale = 140; } // Set rollout and press behaviours myObj.onThumbOut = myObj.onThumbPress = function(evtObj:Object) { evtObj.thumb._xscale = evtObj.thumb._yscale = 100; } // Add event listeners to component iGallery.addEventListener("onThumbOver", myObj); iGallery.addEventListener("onThumbOut", myObj); iGallery.addEventListener("onThumbPress", myObj); |