Art Gallery

(Flash component)

User Guide

Contents
Requirements ....................................................................................................................... 2 Component Installation ......................................................................................................... 2 How to upgrade to full version ............................................................................................... 5 Publishing the gallery ............................................................................................................ 6 Publishing without a configuration file ................................................................................ 6 Publishing using a configuration file................................................................................... 9 Configuration file structure .................................................................................................. 12 XML configuration file structure ....................................................................................... 12 JSON configuration file structure ..................................................................................... 13 Gallery Parameters ............................................................................................................. 14 Component API................................................................................................................... 18 Properties ........................................................................................................................ 18 Methods .......................................................................................................................... 19 Tutorials .............................................................................................................................. 20 Inserting images from Flickr............................................................................................. 20 Inserting images from Picasa .......................................................................................... 20

Requirements
All galleries components can be used only in Adobe Flash CS3/CS4/CS5 in Actionscript 3.0 Flash movies.

Component Installation
The component is delivered in an MXP format, a standard Adobe extension format. Use Adobe Extension Manager to install Adobe extensions. The latest version of this software is available on the Adobe website at www.adobe.com/exchange/em_download/ To install the component please close the authoring Flash application if it is open. Unpack the ZIP archive you have received after downloading the component and run the MXP file. You will see a following window:

Fig. 1. Adobe Extension Manager Follow instructions of the installation. You will see a gallery in the list of installed components:

Fig. 2. Adobe Extension Manager This will install the component on your computer. If you are currently running the Adobe Flash, close and restart it. The next time the environment is started the component will appear in the components panel and be ready to work. You can find the gallerys component in the group flash-gallery.com:

Fig. 3. Components panel

If you have not found the gallery in the Components panel, follow these steps of manual installation: 1. Create folder "flash-gallery.com" in: Windows: Flash CS3: C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\ Flash CS4: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components\ Flash CS5: C:\Program Files\Adobe\Adobe Flash CS5\Common\Configuration\Components\ Mac: Flash CS3: Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components/ Flash CS4: Macintosh HD/Applications/Adobe Flash CS4/Common/Configuration/Components/ Flash CS5: Macintosh HD/Applications/Adobe Flash CS5/Common/Configuration/Components/ 2. Copy the .swc file from the folder install/manual installation/ from the downloaded archive to the folder "..../flash-gallery.com/" 3. Reopen Adobe Flash.

How to upgrade to full version

First of all you should know that the gallery has limitations only in the Internet. So, when you test the gallery locally it works without any restrictions. If you want to upgrade the gallery to the full version on your web-sites, make the following steps: 1. 2. Buy a gallery's license on our website http://flash-gallery.com/order/ After the license's purchasing add your websites domains in the account area http://flash-gallery.com/my_account/domains.php 3. In the list of domains you'll see the "Key" field next to the appropriate Domain name field.

4. 5. 6. 7. 8.

Copy text from the "Key" field for a domain where the gallery will be uploaded. If Adobe Flash is not opened, open it. Open your Flash movie with the gallery embedded. Find the gallery's instance on the stage and click on it Take a look in the Parameters or Properties panels and find the parameter "serial number"

9.

Paste the copied key in the "serial number" field.

Publishing the gallery

Publishing without a configuration file
1. Drop the gallerys component to the stage from the Components panel.

Fig. 4. Gallery Flash Component

2. Set a name for the gallerys instance in the Properties panel

Fig. 5. Name for the gallerys instance

3. Set a position and dimensions of the instance in the Properties panel

Fig. 6. Position and dimensions

4. Customize the view of the gallery using parameters in the Parameters panel or the
Properties panel

Fig. 7. Component parameters

5. Set values for the parameters imagesFolder and thumbnailsFolder. (If you do not
set paths to these folders you should include it by yourself in the path to every image, e.g. images/1.jpg)

Fig. 8. Path to images and thumbnails folders

6. Open the actions panel or the main class of your flash-movie

Fig. 9. Actions panel

7. Set all info about images as follows:

galleryInstance.items=[{source:1.jpg", thumb:1t.jpg, description:first image}, {source:2.jpg", thumb:2t.jpg, description:second image}, {source:3.jpg", thumb:3t.jpg, description:third image}];

Fig. 10. Info about images

8. Build the gallery with added items:

galleryInstance.build();

Fig. 11. Build the gallery

9. Now you can publish your Flash movie.

Publishing using a configuration file

An XML or JSON file can be used to add gallery images.

1. Drop the gallerys component to the stage from the Components panel.

Fig. 12. Gallery Flash Component

2. Set a position and dimensions of the instance in the Properties panel

Fig. 13. Position and dimensions

3. Customize the view of the gallery using parameters in the Parameters panel or the
Properties panel

Fig. 14. Component parameters

10

4. Set values for the parameters imagesFolder and thumbnailsFolder. (If you do not
set paths to these folders you should include it by yourself in the path to every image , e.g. images/1.jpg

Fig. 15. Path to images and thumbnails folders

5. Create a configuration file with info about images using a JSON or XML structure 6. Set a path to the configuration file using the parameter configPath in the list of
parameters:

Fig. 16. Path to the configuration file

11

7. Now you can publish your Flash movie.

Configuration file structure

XML configuration file structure
<gallery> <items> <item source="1.jpg" thumb="t1.jpg" description="Image 1" link="/images/1.jpg" target="_blank"/> <item source="2.jpg" thumb="t1.jpg" description="Image 2" link="" target=""/> <item source="3.jpg" thumb="t1.jpg" description="Image 3" link="" target=""/> . . . </items> </gallery>

source image file name thumb thumbnail file name description Image description link link to the web-page target - controls where the new document will be displayed possible values: "_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

12

JSON configuration file structure

{ "gallery": { "items": [ { "source": "1.jpg", "thumb": "t1.jpg", "description": "Image 1", "target": "", "link": "" }, { "source": "2.jpg", "thumb": "t2.jpg", "description": "Image 2", "target": "", "link": "" }, . . . . . { "source": "55.jpg", "thumb": "t55.jpg", "description": "Image 55", "target": "", "link": "" } ] } }

source image file name thumb - thumbnail file name description image description link link to the web-page target - controls where the new document will be displayed possible values: "_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

13

Gallery Parameters
Parameter name Serial number Description Specific key that is unique for your domain, allows you to use the gallery on your domain in the Internet without limitations of the trial version. You can get this key in your account area on the website: http://flash-gallery.com after purchasing a gallery license. configPath Full Path to an XML or JSON configuration file (contains a filename). Possible values: String. Default: "".

imagesFolder

Path to the folder with images. Possible values: String. Default: "".

thumbnailsFolder

Path to the folder with thumbnails. Possible values: String. Default: "".

buttons

Button settings fullScreenButton Show/hide a Full Screen button. Possible values: true, false. navigationButtons Show/hide navigation buttons. Possible values: true, false. slideshowButton Show/hide a slideshow button. Possible values: true, false.

image

Image settings align Image alignment. Possible values:left, right, top, bottom, center scaleMode Type of image scaling to the size of the visible area. Possible values: fit, fill,

14

Parameter name

Description noScale cornerRadius transitionEffect Image corners roundness degree Type of image transition effect. Possible values: fade, zoom, pixel useShadow Show/hide shadow of image. Possible values: true, false

thumbnail

Thumbnail settings width height cornerRadius Thumbnail width Thumbnail height Degree of thumbnail roundness. Possible values: [0, 90] alpha Thumbnail transparency. Possible values: [0,100] outlineColor Thumbnail outline color. Possible values: [0x000000, 0xFFFFFF] outlineColorOnRollOver Outline color of the thumbnail with the mouse pointer rolled over it. Possible values: [0x000000, 0xFFFFFF] outlineColorOnClick Active thumbnail outline color. Possible values: [0x000000, 0xFFFFFF] useShadow Show/hide shadow of thumbnail. Possible values: true, false usePreview Show/hide image preview element. Possible values: true, false

15

Parameter name thumbBar

Description Thumbnail bar settings position Thumbnail position. Possible values: left, right, top, bottom scrollSpeed Thumbnail scroll speed. Possible values: (0,infinity). Reasonable values: [5, 20]

caption

Caption settings position Position of image captions. Possible values: top, bottom visibleMode Defines when to show an image caption. Possible values: always, onRollOver, never bgAlpha Background transparency of captions. Possible values: [0,100] color Color of image captions. Possible values: [0x000000, 0xFFFFFF] bgColor Background color of captions. Possible values: [0x000000, 0xFFFFFF] fontName fontSize Font of image captions. Font size of image captions. Possible values: FontSizes

preloader

Preloader settings alpha Preloader transparency. Possible values: [0,100] usePreloader Show/hide preloader. Possible values: true, false

16

Parameter name

Description

preview

Preview settings width height alpha outlineColor Width of the image preview element Height of the image preview element Preview transparency. Possible values: [0,100] Preview outline color. Possible values: [0x000000, 0xFFFFFF] cornerRadius Degree of preview roundness. Possible values: [0, 90] useShadow Show/hide shadow of preview. Possible values: true, false

slideshow

Slideshow settings start delay Enables/Disables slide show mode Image display duration in Slideshow mode (in seconds). Possible values: (0,infinity) loop Loop/unloop image display in an automatic mode if all images are shown. Possible values: true, false stopAutoOnClick Possible values: true, false

17

Parameter name sounds

Description Sound settings onRollOver Sound heard when the mouse pointer is rolled over a thumbnail. Specify path to sound file. onClick Thumbnail click sound. Specify path to sound file.

Component API
Properties
Property name items Description Array of objects with info about images. Each object has following attributes: source image file name thumb - thumbnail file name description image description link link to the web-page target - controls where the new document will be displayed possible values: "_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 More info(Publishing without a configuration file) flickr Object, containing info about images from Flickr. Each object has following attributes: userID user ID in Flickr

18

Property name

Description photosetID - uniq ID to a photoset tags - tags of photos More info(Inserting images from Flickr)

picasa

Object, containing info about images from Picasa. Each object has following attributes: user login to Picasa albumID - uniq ID to an album More info(Inserting images from Picasa)

Methods
Method name build() Description Method to build gallery with configured params. Example: galleryInstance.build();

19

Tutorials
Inserting images from Flickr
The gallery allows you to display images from flickr.com 1. Sign in your Flickr account. 2. Select the Set with the photos. 3. Find out your User ID and Set ID within the Set link. The User ID can be found after the /photos/ part, and the Set ID after the /sets/ part of the URL. Sample: http://www.flickr.com/photos/53553796@N04/sets/72157624732156545/ User ID is 53553796@N04 Set ID is 72157624732156545 4. Create new Actionscript 3.0 movie in Adobe Flash. 5. Drop the gallerys component to stage and set name of the gallerys instance. 6. Open Actions panel in Adobe Flash or main class of your Flash movie and set value of property flickr of gallerys instance:
galleryInstance.flickr={userID:53553796@N04, photosetID:72157624732156545};

7. Build gallery: galleryInstance.build(); 8. Compile your Flash movie.

Inserting images from Picasa

The gallery allows you to display images from picasaweb.google.com 1. Sign in your PicasaWeb account. 2. Open the album with the photos you want to use in your gallery. 3. Find an RSS feed link ( button) on the page and click it.

4. You can find a User and an Album ID in the address bar of the page that opens after clicking on the RSS feed link.

20

Sample:
https://picasaweb.google.com/data/feed/base/user/zenphotogallery/ albumid/5511941231333065105?alt=rss&kind=photo&hl=en_US User is zenphotogallery; Album ID is 5511941231333065105. 5. Create new Actionscript 3.0 movie in Adobe Flash. 6. Drop the gallerys component to stage and set name of the gallerys instance. 7. Open Actions panel in Adobe Flash or main class of your Flash movie and set value of property picasa of gallerys instance:
galleryInstance.picasa={user:zenphotogallery, albumID:5511941231333065105};

8. Build gallery: galleryInstance.build(); 9. Compile your Flash movie.

21