Basic Gallery Setup

How to set up Flash Gallery Pro

These steps will walk you through adding Flash Gallery Pro to a page on your site.

Step1 – Set up file structure

Place the folder flash_gallery_pro_files in the same folder as the page that will display the player in your site.

Step 2 – Add to your page

Paste the code below into the source code of your page where you want the gallery to appear:

<div id="flashcontent" style="width:600px; height:450px;">
<a href="flash_gallery_pro_files/iphone/list.php" class="iphoneBtn">Launch iPhone Gallery</a>
</div>
<script type="text/javascript" src="flash_gallery_pro_files/js/flashdetect.js"></script>
<script type="text/javascript">
var so = new SWFObject("flash_gallery_pro_files/flash/flashGalleryPro.swf", "gallery", "100%", "100%", "10", "#333333");
so.addParam("allowFullScreen", "true");
so.addVariable("content", "flash_gallery_pro_files/xml/content.xml");
so.addVariable("settings", "flash_gallery_pro_files/xml/settings.xml");
so.write("flashcontent");
</script>

You can adjust the width and height of the flash by changing the values "600px"- width and "450px" – height.

Step 3 – Add your content

Drag image and video files into flash_gallery_pro_files/images folder, and then open flash_gallery_pro_files/xml/content.xml in an html editor. Each album is represented by an <album></album> tag. Inside each album, an image or video is represented by and <image></image> tag.

Add albums using this format:

<album title="Album title" thumbnail="[thumbnail path]" >
<description>Album description goes here</description>
<!–images go here–>
</album>

Add images using this format:

<image src="[large image path]" thumbnail="[thumbnail path]">Caption Text</image>

Add flash videos using this format:

<image type="video" videoPath="[video path]" src="[large image path]" thumbnail="[thumbnail path]">Caption Text</image>

Add youTube videos using this format:

<image type="youTube" videoPath="[youTube video URL]" src="[large image path]" thumbnail="[thumbnail path]">Caption Text</image>

Paths to images should be relative to the html page that is displaying the player, not the swf or the xml.

That’s it. Upload to your site, and you are all set.

Customizing Flash Gallery Pro

How to adjust settings for Flash Gallery Pro

Flash Gallery Pro comes with an attractive dark gray theme. You can use the interactive demo to tweak the settings and download the styles xml. You can also customize the gallery manually by editing styles.xml, which came with your download. Below is a breakdown of all the available setting by category. For colors, you can have multiple values separated by a comma to create a gradient. Alphas work the same way, you should have one alpha for each color.

Jump to section:

• Global Settings
• Albums
• Thumbs
• Images
• Captions
• Slideshow
• Navigation
• Nav Thumbs

• Video
• Audio
• Background
• Stylesheet
• Preloader
• Fonts
• Share Panel

Global Settings

Sample Value	Description
<iconPath>images/icons/</iconPath>	Base path for icons. This is added before all paths for icons.
<baseURL></baseURL>	Base path for images. This is added before all image and thumbnail paths in content.xml.
<noScrollArea>50%</noScrollArea>	Controls how much of a scrollable item’s area is not scrollable. This allows users to rest the cursor over the middle section of thumbnails without having them scroll out of the way.
<inactivityTimer>5</inactivityTimer>	How often(in seconds) the gallery should check for inactivity before hiding navigation.
<initialView>albums</initialView>	Determines what to show upon first loading. Possible values: albums, thumbs, image
<defaultAlbum>0</defaultAlbum>	If initialView is set to thumbs, this determines which album to start with. Numbers start with 0.
<defaultImage>0</defaultImage>	If initialView is set to image, this determines which image to start with. Numbers start with 0.
<skipThumbs>false</skipThumbs>	Set to true, to go directly to the image detail when clicking on an album.

Layout

<width>100%</width> <height>100%</height>

Width and height of the gallery.

Albums

Sample Value	Description
<picNumbers show="true" leadByZero="true" > <before>(</before> <after> pics)</after> </picNumbers>	You can display the number of items inside each album in your language. Gallery allows you to set the text before and after the number. Set show="false" to hide.
<showThumbnails>true </showThumbnails>	Set to false to hide thumbnail images
<showTitles>true</showTitles>	Set to false to hide album titles
<showDescriptions>true </showDescriptions>	Set to false to hide album descriptions
<adjustForNav>true</adjustForNav>	Adjusts scrolling to account for navigation
<showGalleryCaption>false </showGalleryCaption>	Set to true to display gallery description in the form of a caption
<captionDisplayMode>hide </captionDisplayMode>	Display mode for caption. Possible values: hover, always, hide
<rows>0</rows> <columns>0</columns>	Number of rows and columns. Set to 0 to auto-adjust to size of gallery
<width>250</width> <height>100</height>	Width and height of album containers
<scrollDirection>vertical</scrollDirection>	Possible values: vertical,horizontal. If set to vertical, number of columns is ignored. If set to horizontal, number of rows is ignored.
<align>center</align>	Alignment of albums group. Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<backgroundColors>444444,333333 </backgroundColors>	Album background colors of album containers
<backgroundAlphas>1,1 </backgroundAlphas>	Album background opacities of album containers
<backgroundStroke color="444444" weight="1" alpha="1"/>	Album background outline: color, thickness, opacity
<backgroundCornerRadius>10 </backgroundCornerRadius>	Album background corner roundness
<shadow color="000000" blurX="5" blurY="5" distance="0" angle="90" opacity="0.8" strength="1" />	Album background shadow: horizontal blur, vertical blur, distance, angle, opacity, strength
<margin>10,10,10,10</margin> <padding>10,10,10,10</padding>	Margin and padding for individual albums: top,right,bottom,left
<spacingVertical>10</spacingVertical> <spacingHorizontal>10</spacingHorizontal>	Vertical and horizontal spacing between albums
<thumbnailWidth>80</thumbnailWidth> <thumbnailHeight>80</thumbnailHeight>	Width and height of album thumbnail image
<thumbCornerRadius>10 </thumbCornerRadius>	Roundness of thumbnail corners
<thumbStroke color="000000" weight="3" alpha="0.2"/>	Album thumbnail outline: color, thickness, opacity
<thumbShadow color="000000" blurX="0" blurY="0" distance="0" angle="90" opacity="0" strength="1" />	Album thumbnail shadow: horizontal blur, vertical blur, distance, angle, opacity, strength
<captionPadding>10</captionPadding>	Space between thumbnail and text

Thumbs

Sample Value	Description
<align>center</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<rows>0</rows> <columns>0</columns>	Number of rows and columns. Set to 0 to auto-adjust to size of gallery
<backgroundColors>000000 </backgroundColors>	Background colors behind the thumbnails
<backgroundAlphas>0</backgroundAlphas>	Background alphas behind the thumbnails
<backgroundStroke color="000000" weight="1" alpha="0"/>	Background outline: color, thickness, opacity
<backgroundCornerRadius>15 </backgroundCornerRadius>	Background corner roundness
<scrollDirection>vertical</scrollDirection>	Possible values: vertical,horizontal. If set to vertical, number of columns is ignored. If set to horizontal, number of rows is ignored.
<adjustForNav>true</adjustForNav>	Adjusts scrolling to account for navigation
<cropThumbs>true</cropThumbs>	Set to false to preserve the aspect ratio of thumbnails
<width>100</width> <height>100</height>	Width and height of thumbnails
<thumbCornerRadius>0 </thumbCornerRadius>	Thumbnail corner roundness
<maxZoom>200%</maxZoom> <minZoom>50%</minZoom>	Maximum and minimum zoom levels for thumbnails. Used in conjunction with the zoom slider in the nav.
<spacingVertical>10</spacingVertical> <spacingHorizontal>10</spacingHorizontal>	Vertical and horizontal spacing between thumbnails
<padding>20,20,20,20</padding> <margin>0,0,0,0</margin>	Margin outside thumbnails background and padding between thumbs and background edge.(top,right,bottom,left)
<thumbStroke color="FFFFFF" weight="5" alpha="1"/>	Thumbnail out line: color, thickness and opacity
<shadow color="000000" blurX="5" blurY="5" distance="0" angle="90" opacity="0.8" strength="1" />	Thumbnail shadow: color, horizontal blur, vertical blur, distance, angle, opacity and strength.
<showGalleryCaption>false </showGalleryCaption>	Set to true to show album description in caption form.
<captionDisplayMode>never </captionDisplayMode>	Display mode for caption. Possible values: hover, always, hide

Images

Sample Value	Description
<resize>fill</resize>	Available values: fit, fitForced, fill, stretch, noResize
<align>center</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<adjustForNav>false</adjustForNav>	Adjusts scrolling/cropping to account for navigation
<enableKeyboardNavigation> true </enableKeyboardNavigation>	Set to true to enable navigation using keyboard:next, previous, pause and play.
<autoHideNav>true</autoHideNav>	Set to false to keep nav visible all the time.
<scrollMode>drag</scrollMode>	Possible values: scroll, drag, none. Scroll will let users pan around an image that is larger than the stage or is zoomed in.
<zoomSteps>3</zoomSteps>	If using a zoom button in the nav, this determines how many times button can be pressed to zoom in before zooming out.
<minZoom>10%</minZoom> <maxZoom>200%</maxZoom>	Used by zoom slider for maximum and minimum zoom levels
<margin>10,10,10,10</margin>	Margin around the image: top,right,bottom,left
<stroke color="FFFFFF" weight="5" alpha="1"/>	Outline around image: color, thickness, opacity. Be sure to set this o 0 alpha if using Fade transition.
<shadow color="000000" blurX="5" blurY="5" distance="0" angle="90" opacity="0.8" strength="1" />	Image shadow: color, horizontal blur, vertical blur, distance, angle, opacity and strength.
<cornerRadius>25</cornerRadius>	Roundness of image corners
<linkToUrl>false</linkToUrl>	Set to true to make images clickable to a url. Not recommended with scrollMode=drag. You can also use the external links panel to link images.
<customDragCursor>images/icons/hand.png </customDragCursor>	Lets you set a path to a custom drag cursor.
<customDragDownCursor>fist.png </customDragDownCursor>	Lets you set a path to a custom drag cursor (fist).
<customScrollCursor>scroll_arrow.png </customScrollCursor>	Lets you set a path to a custom scroll cursor.

Captions

Sample Value	Description
<displayMode>hover</displayMode>	Display mode for images: always, hover, hide
<adjustForNav>true</adjustForNav>	Adjusts placement to account for navigation
<align>bottom</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<width>50%</width> <height>10</height>	Width and height of captions. Set width to 0 to auto-adjust to size of text.
<margin>10,10,10,10</margin> <padding>15,15,15,15</padding>	Margin and padding around text: top,right,bottom,left
<cornerRadius>25</cornerRadius>	Roundness of caption background
<backgroundColors>000000 </backgroundColors>	Background colors
<backgroundAlphas>0.5 </backgroundAlphas>	Background opacities
<backgroundStroke color="000000" weight="1" alpha="0"/>	Background outline: color, thickness and opacity

Slideshow

Sample Value	Description
<slideshowPaused>true</slideshowPaused>	Set to false to have images rotate from the start
<slideshowTime>3</slideshowTime>	Amount of time each image stays on
<transitionTime>1</transitionTime>	Length of transitions
<transitionType>Cube</transitionType>	You can set a specific transition or enter multiple transitions separated by commas. Available transitions: Cube, FocusFade, Ripple, Iris, Blinds, Fade, Photo, Squeeze, PixelDissolve, Wipe, Zoom, Fly, random
<easing>linear</easing>	Same as Tweener easing.
<kenBurnsEffect>none </kenBurnsEffect>	Slowly pans or zooms the image over time. Possible values: none, zoomIn, zoomOut, zoomInOut, zoomRandom, pan, panRight, panLeft, panLeftRight, panRightLeft, panUp, panDown, panUpDown, panDownUp, random
<kenBurnsAmmount>1.3 </kenBurnsAmmount>	Amount of Ken Burns effect. Should be slightly more than 1. This will scale the image by this amount (1.3 = 130%)

Navigation

This is the more advanced part of the settings. Navigation is broken up into settings and content groups. You can set different navigation items to appear for each of the 3 views: Albums, Thumbnails and Images. Each view consists of 3 groups – Left, Middle, and Right. Any button can be placed in any group. Below is a breakdown of all the possible items. All user interface elements are loaded in and can be customized. For best results save all icons are saved at the same height.

Navigation Settings

Sample Value	Description
<align>bottom</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<width>100%</width> <height>10</height>	Width and height of navigation. Can be number or percentage. Set to 0 to auto-adjust.
<margin>5,5,5,5</margin> <padding>5,5,5,5</padding>	Margin around the navigation and padding between nav edge and buttons.(top,right,bottom,left)
<cornerRadius>15</cornerRadius>	Roundness of navigation background.
<backgroundColors>333333,000000 </backgroundColors>	Background colors.
<backgroundAlphas>0.8,0.6 </backgroundAlphas>	Background opacities
<backgroundStroke color="444444" weight="1" alpha="0.8"/>	Background outline: color, thickness and opacity.
<buttonSpacing>5</buttonSpacing>	Button spacing.
<shadow color="000000" blurX="5" blurY="5" distance="0" angle="90" opacity="0.8" strength="1" />	Navigation shadow: color, horizontal blue, vertical blue, distance, angle, opacity, and strength.
Navigation Items
<item id="external" src="images/icons/btn_external.png" hover="images/icons/btn_external_over.png" />	Shows/hides external links panel.
<item id="albums" src="images/icons/btn_albums.png" hover="images/icons/btn_albums_over.png" />	Link to the albums view
<item id="thumbs" src="images/icons/btn_thumbs.png" hover="images/icons/btn_thumbs_over.png" />	Link to thumbnails view
<item id="info" src="images/icons/btn_info.png" hover="images/icons/btn_info_over.png" />	Shows/hides caption
<item id="audio" src="images/icons/btn_audio.png" hover="images/icons/btn_audio_over.png" />	Shows/hides audio player
<item id="fullScreen" src="images/icons/btn_full_screen.png" hover="images/icons/btn_full_screen_over.png" />	Enters/exits full screen
<item id="prev" src="images/icons/btn_prev.png" hover="images/icons/btn_prev_over.png" />	Previous image
<item id="playPause" src_play="images/icons/btn_play.png" src_pause="images/icons/btn_pause.png" hover_play="images/icons/btn_play_over.png" hover_pause="images/icons/btn_pause_over.png" />	Play/pause slideshow button
<item id="next" src="images/icons/btn_next.png" hover="images/icons/btn_next_over.png" />	Next image button
<item id="thumbnails" />	Add this to display thumbnails inside nav
<item id="zoom" src_plus="images/icons/zoom_plus.png" src_minus="images/icons/zoom_minus.png" src_track="images/icons/zoom_track.png" src_slider="images/icons/zoom_slider.png" hover_plus="images/icons/zoom_plus_over.png" hover_minus="images/icons/zoom_minus_over.png" hover_slider= "images/icons/zoom_slider_over.png" />	Slider for zooming in/out of images and thumbnails
<item id="zoomImage" src="images/icons/btn_zoom.png" hover="images/icons/btn_zoom_over.png" />	Simple zoom button. Clicking it zooms image 3 times before zooming back out

Nav Thumbs

Thumbnails that appear within the main navigation in image view

Sample Value	Description
<thumbWidth>40</thumbWidth> <thumbHeight>40</thumbHeight>	Width and height of nav thumbnails
<backgroundColors>000000,333333 </backgroundColors>	Background colors behind thumbs
<backgroundAlphas>1,1 </backgroundAlphas>	Background alphas behind thumbs
<backgroundStroke color="444444" weight="1" alpha="1"/>	Background stroke color, thickness and opacity
<backgroundCornerRadius>15 </backgroundCornerRadius>	Background roundness
<width>50%</width>	Width of thumbs panel
<thumbSpacing>5</thumbSpacing>	spacing between thumbs
<padding>5,5,5,5</padding>	space between thumbs and edge of background (top,right,bottom,left)
<margin>5,5,5,5</margin>	space between thumbs background and navigation background (top,right,bottom,left)
<thumbCornerRadius>0 </thumbCornerRadius>	Roundness of thumbnail corners
<thumbStroke color="FFFFFF" weight="2" alpha="1"/>	Thumbnail outline: color, thickness, opacity
<thumbStrokeActive color="0066FF" weight="2" alpha="1"/>	Thumbnail active outline: color, thickness, opacity
<shadow color="000000" blurX="5" blurY="5" distance="0" angle="90" opacity="0.8" strength="1" />	Thumbnail shadow: color, blur horizontal, blur vertical, distance, angle opacity and strength.

 

Video

Videos are controlled by the same settings as images. These settings apply to the video controller and any video specific settings.

Sample Value	Description
<align>center</align>	Video nav alignment. Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<alignNav>bottom</alignNav>	Video controls alignment. Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<resize>fit</resize>	Resizing of video. Available values: fit, fitForced, fill, stretch, noResize
<navWidth>70%</navWidth> <navHeight>10</navHeight>	Width and height of video controls
<adjustForNav>true</adjustForNav>	Adjusts video controls placement to account for navigation
<pausedAtStart>true</pausedAtStart>	Set to false to auto-play when thumbnail is clicked.
<volume>10</volume>	Video volume 0-100
<autoHideNav>true</autoHideNav>
<loadFailMessage>Could not load video</loadFailMessage>	Allows you to set a custom message in case a video cannot be loaded
<videoMargin>0,0,0,0</videoMargin>	Margin around video
<margin>5,5,5,5</margin> <padding>5,15,5,5</padding>	Margin and padding for video controls.Settings: top,right,bottom,left
<cornerRadius>3</cornerRadius>	Roundness of video controls.
<backgroundColors>333333,111111 </backgroundColors> <backgroundAlphas>1,1 </backgroundAlphas>	Video controls background colors and alphas
<buttonSpacing>5</buttonSpacing>	Video controls button spacing
<largePlayButton id="largePlay" display="true" src="images/icons/btn_largeplay.png" hover="images/icons/btn_largeplay_over.png" />	Large play button that appears over the images
<thumbPlayButton id="thumbPlay" display="true" src="images/icons/btn_thubplay.png" hover="images/icons/btn_largeplay_over.png" />	Play button that appears over the thumbnails
<playButton id="playPause" src_play="btn_play.png" src_pause="btn_pause.png" hover_play="btn_play_over.png" hover_pause="btn_pause_over.png" />	Video controls play button info
<progressBar height="6" bgColors="111111" bgAlphas="1" bufferColors="333333" bufferAlphas="1" progressColors="3399ff,111111" progressAlphas="1,1" cornerRadius="0" />	Video controls progress bar settings
<volumeControls height="10" bgColors="000000" bgAlphas="1" fillColors="3399ff" fillAlphas="1" />	Video controls volume slider settings
<playHead id="playHead" src="zoom_slider.png" hover="zoom_slider_over.png" />	Video controls playhead settings
<youtubeAdsClickable>true </youtubeAdsClickable>	Set to false to make youtube videos not clickable. This will have an effect on auto-showing of navigation, since video will not be responsive to mouse events.

Audio Player

Sample Value	Description
<pausedAtStart>true</pausedAtStart>	Set to false to load and play audio with the start of the gallery
<defaultVolume>50</defaultVolume>	Volume 0-100
<align>bottomRight</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<adjustForNav>true</adjustForNav>	Adjusts placement to account for navigation
<width>0</width> <height>0</height>	Width and height of player. Set to 0 to auto-adjust.
<margin>5,5,0,5</margin> <padding>5,5,5,5</padding>	Margin around player and padding between buttons and background. Settings: top,right,bottom,left
<buttonSpacing>2</buttonSpacing>	Button spacing
<cornerRadius>15</cornerRadius>	Background roundness
<loopPlaylist>true</loopPlaylist>	Set to true to loop through songs.
<backgroundColors>000000 </backgroundColors> <backgroundAlphas>0.5 </backgroundAlphas>	Background colors and opacities
<backgroundStroke color="FFFFFF" weight="1" alpha="1"/>	Background out line color, thickness and opacity.
<showTitle>false</showTitle>	set to true to show song title above progress bar
<titleHeight>20</titleHeight>	Height of track title text field. For pixel pushers
<playButton id="playPause" src_play="btn_play.png" src_pause="btn_pause.png" hover_play="btn_play_over.png" hover_pause="btn_pause_over.png" />	Play button settings
<progressBar height="6" bgColors="111111" bgAlphas="1" bufferColors="333333" bufferAlphas="1" progressColors="3399ff,111111" progressAlphas="1,1" cornerRadius="0" />	Progress bar settings
<volumeControls height="10" bgColors="000000" bgAlphas="1" fillColors="3399ff" fillAlphas="1" />	Volume slider settings
<prevButton id="audioPrev" src="btn_prev.png" hover="btn_prev_over.png" />	Previous button settings
<nextButton id="audioNext" src="btn_next.png" hover="btn_next_over.png" />	Next button settings
<playHead id="playHead" src="zoom_slider.png" hover="zoom_slider_over.png" />	Playhead settings

Background

Sample Value	Description
<colors>222222,000000</colors> <alphas>1,1</alphas>	Background colors and alphas
<cornerRadius>0</cornerRadius>	Background roundness
<image>flash_gallery_pro_files/images/bg.jpg</image>	Background image. To use colors, leave this value blank.
<resize>stretch</resize>	Background image sizing. Available values: fit, fitForced, fill, stretch, noResize
<align>center</align>	Background image alignment. Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<backgroundStroke color="000000" weight="1" alpha="0"/>	Background outline: color, thickness, opacity.

Stylesheet

Sample Value	Description
<globalStyleSheet> <![CDATA[...styles... ]]>	All styles are added inside this one setting. All text used in the interface uses classes. Below is a breakdown of each.
.albumThumbTitle	Header text for albums
.albumThumbDescription	Description text for albums
.caption	Overall caption style
.videoTimeDisplay	Video time display
.videoError	When video does not load, error message is displayed in this style
.audioTimeDisplay	Music player time display
audioTitle	Music player title
a:link, a:hover, p, h1, h2, h3, etc	You can specify general html styles to be used in captions.

Preloader

Sample Value	Description
<type>pie</type>	Possible values: pie,bar, none. If set to none, preloader will still show for the first time while settings are loaded. Default is pie.
<align>center</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<margin>20,20,20,20</margin> <padding>10,10,10,10</padding>	Margin around preloader and padding inside the background: top,right,bottom,left
<width>50</width> <height>50</height>	Width and height of preloader
<stroke alpha="1" weight="1" color="FFFFFF" />	Loader outline: opacity, thickness, color
<cornerRadius>5</cornerRadius>	If type is "bar" roundness of corners of loader bar.
<loadedColors>FFFFFF,FFFFFF </loadedColors> <loadedAlphas>.8,.8 </loadedAlphas>	Loaded colors and opacities (filled in)
<unloadedColors>FFFFFF,FFFFFF </unloadedColors> <unloadedAlphas>0.4,0.4 </unloadedAlphas>	Unloaded colors and opacities (before being filled in)
<backgroundColors>000000,000000 </backgroundColors> <backgroundAlphas>0.5 </backgroundAlphas>	Background colors and opacities
<backgroundCornerRadius>10 </backgroundCornerRadius>	Background corner roundness
<backgroundStroke alpha="0" weight="1" color="000000" />	Background outline opacity, thickness, color
<showForAlbums>Loading Albums: #%</showForAlbums>	Text that appears under the bar/pie for albums. Add a # symbol where you want the percentage to appear. Possible values:text,[blank], false. Set to false to hide preloader for albums.
<showForThumbs> </showForThumbs>	Text that appears under the bar/pie for thumbnails. Add a # symbol where you want the percentage to appear. Possible values:text,[blank], false. Set to false to hide preloader for thumbnails.
<showForImages>Loading: #%</showForImages>	Text that appears under the bar/pie for images. Add a # symbol where you want the percentage to appear. Possible values:text,[blank], false. Set to false to hide preloader for images.
<showForBuffering>Buffering </showForBuffering>	Text that appears under the bar/pie for videos. Possible values:text,[blank], false. Set to false to hide preloader for albums.

Fonts

The gallery gives you a lot of flexibility when working with font styles. The gallery has a sophisticated system that allows you to use your own embedded fonts loaded from an external swf file. All text styles are set through a stylesheet defined in settings.xml. You can choose to embed fonts for the different elements within the gallery.

Sample Value	Description
<fontSwf>fonts/fonts.swf</fontSwf>	Location of external swf where fonts are embedded.
<fontNames> Papyrus,Rockwell,HelveticaMedExt </fontNames>	Class names of the embedded fonts.
<embedAlbumTitle>true </embedAlbumTitle> <embedAlbumDescription>true </embedAlbumDescription> <embedCaptionFont>false </embedCaptionFont> <embedPreloaderFont>false </embedPreloaderFont> <embedAudioTimeDisplay>false </embedAudioTimeDisplay> <embedAudioTitle>true </embedAudioTitle> <embedVideoTimeDisplay>true </embedVideoTimeDisplay> <embedShareView>true </embedShareView>	You can choose to embed some of the fonts but not others using these settings

Embedded New Fonts

Step1 – Embed the font in fonts.fla.
Open fonts.fla, located in the fonts folder. Click the context menu in the upper right of the panel and select "New Font". See screenshot below.

Select the font you would like to use. In the actionscript tab select "Export for Actionscript". Give the font a class name and make note of it. Publish the flash file.

Step2 – Add to xml
Locate the <fontNames></fontNames> tag within the <fonts> section in styles.xml. Add the class name you entered in step1. All class names should be spelled exactly as they appear in the library panel, separated by commas.

Now you can use this font anywhere in the gallery. When you specify the font in the stylesheets be sure to use the exact name of the font, not the class name. (example: Helvetica 65 Bold)

Share View Panel

To display this panel, you must add <item id="external" /> to one of your navigation sets. Panel will display different links depending on where you are in the gallery.

Sample Value	Description
<align>bottomLeft</align>	Available values: center, top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right
<width>0</width> <height>0</height>	Width and height of background. Set to 0 to automatically adjust to the size of content
<cornerRadius>5</cornerRadius>	Roundness of background
<backgroundColors>000000 </backgroundColors> <backgroundAlphas>0.5 </backgroundAlphas>	Background colors and opacities
<backgroundStroke color="000000" weight="1" alpha="0"/>	Background outline color, thickness, opacity
<itemHeight>10</itemHeight>	Item height
<itemSpacing>5</itemSpacing>	Item spacing
<itemCornerRadius>5</itemCornerRadius>	Item background corner roundness
<itemBackgroundColors>00000 </itemBackgroundColors> <itemBackgroundAlphas>1 </itemBackgroundAlphas>	Item background colors and opacities
<itemBackgroundStroke color="FFFFFF" weight="1" alpha="0"/>	Item background outline: color, thickness, opacity
<thumbnailWidth>20</thumbnailWidth> <thumbnailHeight>20</thumbnailHeight>	Item thumbnail width and height
<thumbnailResize>fill</thumbnailResize>	Available values: fit, fitForced, fill, stretch, noResize
<thumbnailCornerRadius>0 </thumbnailCornerRadius>
<thumbnailTextOffset>5 </thumbnailTextOffset>	Space between thumbnail (if any) and text.
<adjustForNav>true</adjustForNav>	Adjusts placement to account for navigation
<items> … </items>	You can put as many links into the panel as you want. There are a couple of different id’s you can set as described below
<item id="link" src="images/icons/btn_external_over.png" url="http://facebook.com">Share on facebook</item>	Simple link
<item id="imageLink" src="images/icons/btn_external_over.png">Buy this picture</item>	Only displayed when in image view. Links to the "link" attribute of the image you’re on
<item id="imageDownload" url="http://facebook.com">Download Image</item>	Only displayed when in image view. Links to the path of the image you’re on

 

Using Custom Icons and buttons

The gallery is built with not a single graphic element. This means that all visual elements can be either customized through xml or created in PhotoShop and loaded into the gallery. All buttons, cursors and icons can be found in the images/icons folder of the download. For your convenience we’ve included a psd file so you can make adjustments. These are custom icons crated specifically for Flash Nifties and cannot be used outside of the flash project containing the gallery.

Controlling Flash Gallery Pro with Actionscript

Flash Gallery Pro can be used as a standalone application or in a larger flash AS3 projects. Below is a list of the methods with descriptions. These methods will not be available until the gallery has fully initialized. Below is also a list of events that the gallery transmits.

Method	Description
flashGalleryPro.loadSettings(settings.xml)	Reloads the gallery using the specified settings file.
flashGalleryPro.loadContent(content.xml)	Reloads the gallery with the specified content file.
flashGalleryPro.destroy()	Removes all listeners, events and visual elements from the gallery. Returns true if successful.
flashGalleryPro.showThumbs(num)	Displays thumbnails. Optional parameter num indicates index of the album.
flashGalleryPro.showAlbums()	Displays albums
flashGalleryPro.showNav()	Shows navigation
flashGalleryPro.hideNav()	Hides navigation
flashGalleryPro.toggleNav()	Shows nav if hidden, hides if visible.
flashGalleryPro.playSlideshow()	Starts slideshow if in image mode, otherwise ignored.
flashGalleryPro.pauseSlideshow()	Pauses slideshow if in image mode, otherwise ignored.
flashGalleryPro.nextImage()	Goes to next image if in image mode, otherwise ignored.
flashGalleryPro.prevImage()	Goes to previous image if in image mode, otherwise ignored.
flashGalleryPro.gotoImage(num)	Goes to specified image number if in image mode, otherwise ignored.
flashGalleryPro.muteMusic()	Pauses music and hides music player
flashGalleryPro.unmuteMusic()	Resumes music and shows music player
flashGalleryPro.setVolume(num)	Sets volume of audio player 0-100
flashGalleryPro.playSong(xmlNode:String)	Plays an mp3 and displays it’s name in the audio player. Format for xmlNode: ‘<audio src="audio/music.mp3" title="Song Title" />’
flashGalleryPro.pauseAudio()	Pauses audio
flashGalleryPro.resumeAudio()	Resumes audio
flashGalleryPro.nextSong()	Goes to next song in playlist
flashGalleryPro.prevSong()	Goes to previous song in playlist
flashGalleryPro.showAudioPlayer()	Displays audio player
flashGalleryPro.hideAudioPlayer()	Hides audio player
flashGalleryPro.toggleAudioPlayer()	Toggles visibility of audio player
flashGalleryPro.showLinks()	Displays links panel
flashGalleryPro.hideLinks()	Hides links panel
flashGalleryPro.showCaption()	Displays caption
flashGalleryPro.hideCaption()	Hides caption
flashGalleryPro.playVideo(xmlNode)	Plays or resumes current video. Optionally you can pass in an xml node with new video info. Example: flashGalleryPro.playVideo(‘<image type="youTube" videoPath="YON_thALqvM" />’)
flashGalleryPro.pauseVideo()	Pauses currently playing video
flashGalleryPro.setVideoVolume()	Sets volume for current video: 0-100
Event	Description
onSettingsLoaded	Triggered when settings xml is loaded.
onContentLoaded	Triggered when content xml is loaded.
onLoadFailed	Triggered if xml fails to load
onGalleryReady	Triggered when gallery is initialized and ready to respond to function calls, but before any data is loaded.
onStageResized	Triggered when gallery is resized. event.object has the following properties: width – width of gallery layout height – height of gallery layout
onAlbumsLoaded	Triggered when all albums have been created and all albums thumbs have loaded
onAlbumsVisible	Triggered when entering into albums view
onAlbumThumbLoaded	Triggered with each album thumbnail that loads. event.object is a reference to the album thumbnail sprite.
onThumbsLoaded	Triggered when all image thumbnails have loaded
onThumbsVisible	Triggered when entering thumbnail view
onThumbLoaded	Triggered with each thumbnail that loads. event.object is a reference to the thumbnail sprite.
onImageLoaded	Triggered when an image loads. event.object has the following properties: xml – xml node from content.xml hasVideo – true/false slideIndex – number within the album
onImageActive	Triggered when image becomes active. event.object has the following properties: xml – xml node from content.xml hasVideo – true/false slideIndex – number within the album
onVideoVisible	Triggered when video first becomes visible. event.object has the following properties: xml – xml node from content.xml type – "video" or "youtube"
onVideoProgress	Triggered with every change of progress bar. event.object has the following properties: position – current position in milliseconds total – total time loaded – percent loaded
onVideoPlay	Triggered when video starts or resumes playing.
onVideoPause	Triggered when video pauses.
onVideoClose	Triggered when video player is removed from stage.
onAudioStart	Triggered when new audio begins to play. event.object has the following properties: xml – xml node from content.xml
onNextSong	Triggered when next song begins to play. event.object has the following properties: xml – xml node for next song
onPrevSong	Triggered when previous song begins to play. event.object has the following properties: xml – xml node for next song
onAudioPlay	Triggered when music begins to play after being paused
onAudioPause	Triggered when music is paused
onAudioProgress	Triggered with every change of progress bar. event.object has the following properties: position – current position in milliseconds total – total time

Example Using Event Listeners

The following is an example of using the onStageResized, event to open trace the width and height of gallery layout.

 

Playing YouTube, H.264, and Flash Videos

The gallery is built to seamlessly play Youtube, FLV, or any H.264 using the same, fully customizable player controls. Adding a video to the gallery is similar to adding an image, but in addition to the thumbnail and image paths, you also need to provide a video path and type attributes. Type can be either "youTube" or "video". For video path, enter the path to the video, or in the case of youtube the url of the youtube page. You can also just enter the 11 character video id that can be found in the url.

<image type="youTube" videoPath="http://www.youtube.com/watch?v=bXMbPNaDHtc" thumbnail="demos/flashGalleryPro/content/Insects/bbc_video.jpg" src="demos/flashGalleryPro/content/Insects/bbc_video.jpg">BBC Documentary</image>

Setting up iPhone version

The gallery comes with a javascript/php version that runs on a mobile device such as an iphone or iPad. If a user does not have a flash-enabled device, a link to the gallery is displayed in place of flash. If you are using the basic setup, you should not need to make any modifications for the iPhone gallery to work. The gallery reads all the content from content.xml, and creates all the appropriate image and thumbnail sizes.

If you change your file structure or rename the xml files, you may need to set the right paths for the iPhone version.

Within flash_gallery_pro_files/iphone, find _config_pipho.php and open it in an html editor. At the very top you’ll see two settings that you should consider:

define(‘CONTENT_XML’, ‘../xml/content.xml’);
This sets the path for your content.xml file relative to the iPhone folder. If you move the folder, you should adjust this accordingly.

define(‘BASE_URL’, ‘../’);
This is similar to the <baseURL> setting within settings.xml, in that it’s the text added to all of the image and thumbnail paths when viewing the iphone version. Again, this needs to be relative to the iphone/ folder.

NOTE: iPhone gallery requires PHP 5 with GD graphic library support.