Documentation

Flash Media Gallery Setup

Video: How to set up Flash Media Gallery

For all of it’s powerful features, the Flash Media Gallery is amazingly easy to set up. Your download includes everything you need to create a stand-alone flash Flash Media Gallery or a gallery to add to your html pages.

Step1 – Organize your content

After unzipping the files, you will find "content" folder. Place all your images, videos, mp3s, text and/or swf files here. Organize to your content: All sub-folders will be come sub-categories in the gallery. Your will not be able to preview until you upload everything to a server that supports php.
Note: images need to be in a folder of their own (album) You cannot have separate images mixed with other content, only albums.

Step 2 – Upload

Upload the following files to your server using your favorite ftp program: auto_folders.php, mediaGallery.swf, mediaGallery.html, styles.txt, flashdetect.js and your content folder with all it’s sub-folders. After upload, point your browser to mediaGallery.html and you will see your shiny new gallery. It’s really that easy!

Customizing Flash Media Gallery

Flash Media Gallery comes with an attractive dark gray theme, and more themes are available on the demos page. However, if you want to make a gallery that is all your own, you can do so by modifying a simple text document. Open styles.txt, which came with your download. You will see a long list of name="value" pairs. I know it might seem like a lot, but you can experiment with one value at a time. When changing the values, be sure to keep the same format, including the quotes, otherwise the gallery may not work properly. Here is a list of the properties with sample values and descriptions.

Property with sample value Description
Global Styles
autoSize="true" Set to true to automatically determine the width and height of the movie. Unless you are including the gallery in another flash movie, this should stay true.
movie_width="800" Total width of gallery with the nav. Ignored when autoSize is set to true
movie_height="465" Total height of gallery with the nav. Ignored when autoSize is set to true
loaderColor="FFFFFF" Color of preloader
loaderOpacity="100" Opacity of preloader
openFirstFile="true" Set to true to open the first file in the menu that doesn’t have sub-directories
 
Navigation Styles
menuY="0" Vertical position of menu
menuItemHeight="30" Height of individual menu buttons
menuWidth="170" Width of menu not including the collapse arrow
menuHeight="465" Height of menu. Ignored when autoSize is set to true
menuSpeed="15" 1-100 with 1 being slowest
shineOpacity="50" Opacity of the gradient over buttons
hoverColor="015287" Background color of buttons when mouse is over them.
hoverOpacity="100" Opacity of the hover color
menubgColor="000000" Background color of menu buttons
menuBgOpacity="100" Opacity of menu background
navTextX="0"
Horizontal position of text within menu items
navTextY="3" Vertical position of text within menu items
navTextSize="11" Size navigation buttons text
navHeaderTextSize="11" Size of text in header of navigation
navTextFont="Verdana" Font of nav text. Both header and nav elements
navTextEmbed="false" Set to true to use embedded fonts in nav. You need to make sure to embed the font into flash. See Defining Text Styles
navTextColor="999999" Color of nav elements text (off color)
navTextHoverColor="FFFFFF" Color of nav elements text when mouse is over them
headerTextColor="FFFFFF" Text color of menu header
navHeaderBgColor="404040" Background color of menu header
navHeaderBgOpacity="100" Opacity of menu header
navBackButtonEnabledOpacity="100"
Opacity of back button when enabled
navBackButtonDisabledOpacity="20" Opacity of back button when disabled (home)
navDivColor="222222" Color of hairline line between the nav buttons.
navDivOpacity="100" Opacity of hairline line between the nav buttons.
navBgColor="000000" Background color of menu pane
navBgAlpha="100" Opacity of menu page background
iconsColor="FFFFFF" Color of icons
iconsOverColor="FFFFFF" Color of icons when when mouse is over them
iconOpacity="20" Icon opacity
iconOverOpacity="60" Icon opacity when mouse is over them
navSeparatorColor="585858" Color of vertical line on edge of menu pane
navSeparatorOpacity="100" Opacity of vertical line on edge of menu pane
navCollapseButtonColor="4D4D4D" Color of collapse button
navCollapseButtonOpacity="15" Opacity of collapse button
navCollapseButtonSize="10" Size of collapse button.
scrollbarWidth ="12" Width of scrollbar in the nav and text pages.
scrollbarColor="585858" Color of scrollbars
scrollbarOpacity="100" Opacity of scrollbars
scrollbarBgColor="000000" Color of scrollbar track
scrollbarBgOpacity="100" Opacity of scrollbar track
showTooltips="true" Set to false to turn off tool tips
tooltipSize="10" Tool tip text size
tooltipColor="999999" Tool tip text color
tooltipStroke="0" Tool tip border thickness
tooltipStrokeColor="FFFFFF" Tool tip border color
tooltipStrokeAlpha="0" Tool tip border opacity
tooltipFillAlpha="50" Tool tip background opacity
tooltipFill="000000" Tool tip background color
tooltipCornerRadius="0" Roundness of tool tip corners. 0 for square
navOpenAtStart="true" Set to true to show nav open when the gallery loads, false – hidden
autoCloseNavFirstAfter="0" Number of second to wait before auto closing nav for the first time. Set to "0" to not auto close
autoCloseNavAfter="0" Number of second to wait before auto closing nav. Set to "0" to not auto close
showMusicFiles="true"
Setting to false will prevent showing music files in the navigation. Useful if you just want the music to be playing in the background. Music files will still play
showTextFiles="true" Setting to false will prevent text files from being displayed in the navigation. Useful if you want to have a general introduction to albums, but don’t want the text to be part of the menu. Text files will still display if they are the first in the directory/xml.
showTooltipsOnMenuItems="false" Setting to false, will prevent tool tips from appearing when rolling over nav buttons. Tool tips will still appear on other gallery elements.
tooltipFolder="folders" Tool tip text to be inserted after the number of folders that the item contains
tooltipImages="pics" Tool tip text to be inserted after the number of images that the item contains
tooltipMusic="songs" Tool tip text to be inserted after the number of mp3 files that the item contains
tooltipVideo="movies" Tool tip text to be inserted after the number of video files that the item contains
tooltipText="documents" Tool tip text to be inserted after the number of text files that the item contains
tooltipFlash="flash movies" Tool tip text to be inserted after the number of flash movies that the item contains
tooltipMusicSingle=" (mp3)" Tool tip text to be inserted after the file name when mouse is over an item that contains an mp3 file
tooltipVideoSingle=" (flv)" Tool tip text to be inserted after the file name when mouse is over an item that contains an .flv file
tooltipTextSingle=" (text)" Tool tip text to be inserted after the file name when mouse is over an item that contains an .txt file
tooltipFlashSingle=" (flash)" Tool tip text to be inserted after the file name when mouse is over an item that contains an .swf file
tooltipNoContents="empty" Tool tip text when mouse is over a folder that contains nothing
tooltipPlayPauseVideo="play/pause" new Tool tip text when hovering over video play/pause button.
tooltipSeekVideo="seek" new Tool tip text when hovering over video progress bar or play head.
tooltipDragVolume="drag to set volume" Tool tip text when hovering over volume button
tooltipNextSong="next:" new Tool tip text when hovering over Next button of music player
tooltipPrevSong="back:" new Tool tip text when hovering over Back button of music player
tooltipMusicShowSongTitle="true" new Set to true to show music title after tooltipNextSong and tooltipPrevSong
tooltipMinimizeVideo="original size" new Tool tip text when hovering over video minimize (-) button
tooltipMaximizeVideo="maximize" new Tool tip text when hovering over video maximize (+) button
tooltipShowVideoInfo="click for video info" new Tool tip text when hovering over video display area
tooltipLink="external link" new Tool tip text when hovering over menu item that is an external link.
 
Gallery Styles see xmlGallery Component for a full list of settings used for the gallery. Settings that differ are outlined below:
galleryTitle="hide" new Set to "show" to show gallery title, set to "hide" to hide it. Can be positioned anywhere in the gallery.
stage_width="500"
stage_height="500"
auto_size="true"
bgImage="images/bg.jpg"
bgImageSizing="fill"
musicVolume="100"
loopMusic="true"
Attributes are not used and do not effect gallery.
 
Text Page Styles
maximizeText="true" Set to true to have text fill entire available space, minus the textPageMargin on all sides
autoCenterTextPage="true" Set to true to center page horizontally and vertically
textPageMargin="130" Margin around text page
textPageWidth="450" Width of text page. Ignored if maximizeText="true"
textPageHeight="360" Height of text page. Ignored if maximizeText="true"
textPageX="250" Horizontal placement of text page. Ignored if maximizeText="true"
textPageY="40" Vertical placement of text page. Ignored if maximizeText="true"
txtEmbedFonts="true" Set to true to use embedded fonts in text pages. You can set individual fonts with the <font> tag as you would in html. You will need to embed each font you use in mediaGallery.fla. Otherwise, set to false and use web friendly fonts. More about text
Music Player Styles
loopPlaylist="true" Set to true to loop through all the songs in a folder.
musicPlayBackMethod="1" Possible values 1, 2 or 3. There are a few ways in which the music player can play music. Here
1 – Play only music files found in the main directory.
2 – Look for music in subdirectories and play them in any. If no music is found, current play list keeps playing.
3 – Look for music in subdirectories, and stop current music if no music is found/
showPlayer="true" Set to false to hide music player
mplayerX="center" Horizontal placement of music player. Set to left, center, right or a number
mplayerY="bottom" Vertical placement of music player. Set to top, middle, bottom or a number
mplayerMargin="5" Margin between music player and edge of the movie.
mplayerColor="FFFFFF" Color of music player
mplayerOpacity="60" Opacity of music player
mplayerSize="1" Size of music player
defaultVolume="10" Volume with which music starts playing when Flash Media Gallery first loads. Also applies to videos
musicFadeSteps="10" new Number of steps in which music fades in and cross fades between tracks
 
Video Player Styles
videoButtonsColor="ffffff" Color of buttons
videoBarColor="666666" Color ob progress bar
videoVolumeColor="ffffff" Color of volume control
videoControlsOpacity="60" Opacity of video controls
videoControlsYoffset="0" Vertical offset of controls from default position under the video
videoMargin="20" Margin around video
maximizeVideo="true" Set to true to maximize the video by default
videoPaused="false" Set to true to pause the video at start
videoPlaySequence="true" new Set to true to play all videos in a folder one after the other automatically. Set to false to stop the video after it finished playing.
videoSequenceLoop="false" new Set to true to repeat playlist of videos once the last one is finished playing.
videoDescriptionTextColor="999999" new Color of video description text.
Note: You can use html text in video descriptions. To do so, you will need to put you html code between CDATA tags like this: <![CDATA[Your HTML Description here]]>If using html, none of the attributes below will effect the text, and you will need to use html formatting to apply color, text size and font.
videoDescriptionTextSize="11" new Video description text size
videoDescriptionTextFont="Verdana" new Video description font
videoDescriptionBgColor="000000" new Video description text color
videoDescriptionBgOpacity="60" new Video description background opacity
videoDescriptionPadding="50" new Video description padding around text

 

Using Custom Icons and buttons

Your download comes with mediaGallery.fla file that has all the graphic user interface(GUI) elements used by the Flash Media Gallery. In order to modify these, you will need Flash 8 Authoring Software. You can download a fully functional free trial from the Adobe site. After you open mediaGallery.fla, go to the library panel (Window>Library). You will see all the interface elements, which you can modify or replace to your content. Be sure not to change the linkage names or delete any items from the library. This allows you to create a completely unique gallery without having to deal with a single line of code.

Setting custom menu icons

Each menu item in the gallery has a default icon. To change the default, you need to create the custom icon and put it on a new frame of the menu_arrow movie clip within mediaGallery.fla. Next, you will need to set the cutomIcon attribute for that element in the xml. See Using XML Instead of Auto for details on how to switch from auto to xml.

Controlling Flash Media Gallery with Actionscript

How to add Flash Media Gallery to Flash Projects

Flash Media Gallery was designed to be used as a stand-alone gallery or even a full flash site, however if you need to use it in a larger flash project, there are several methods available to you. 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. For an example on how to use events with the Media Gallery, see below.

Method Description

mediaGallery.setStyles(attributes)

Sets styles to gallery when passed an array of attributes.
mediaGallery.getFolders(xml) Loads xml document and parses into navigation.
mediaGallery.moveMenuBack() Moves menu one level back
mediaGallery.moveMenuHome() Moves menu home
mediaGallery.showNav() Opens nav if closed
mediaGallery.hideNav() Hides nav is showing
mediaGallery.displayGallery(node) Displays an image gallery based on xml node passed in the "node" parameter
mediaGallery.showTextPage(txt) Displays a text page based on location passed by "txt" parameter
mediaGallery.showTooltip(info) Displays a tool tip with "info" string.
mediaGallery.hideTooltip() Hides tool tip is showing
mediaGallery.showMusicPlayer() Shows music player if hidden
mediaGallery.muteMusic() Pauses music and hides music player
mediaGallery.unmuteMusic() Resumes music and shows music player
mediaGallery.playSong(song) Plays an mp3 passed in "song" parameter
mediaGallery.playVideo(video) Plays an flv passed in the "video" parameter
mediaGallery.loadSwf(swf) Loads a flash movie passed in the "swf" parameter
mediaGallery.clearAllContents() Removes all contents from stage
mediaGallery.openFile(navTitle) new Navigates to the specified nav element and opens it. navTitle is the path to the nav element. Example use: mediaGallery.openFile("Home/Vacation Videos/Beach");
Values in navTitle should correspond to the menu text displayed in the gallery separated by slashes.
   
Event Description

galleryReady new

Triggered when the gallery has initialized, xml has loaded, and menu created.
xmlLoaded new Triggered when xml/auto script has loaded.
xmlFailed new
Triggered if a faulty xml path has failed to load.
xmlInvalid new Triggered when xml that is being loaded is improperly formatted.
onStageResized new Triggered when gallery stage has re-sized. Usually when the browser window has re-sized. EventObject.movieValues is an object containing the following values:
movieValues.width – Width of movie
movieValues.height – Height of movie
movieValues.menuWidth – Width of menu
movieValues.navX – Horizontal position of menu
onMasterStylesSet new Triggered when styles have been read from xml and successfully applied. EventObject.settings is an object containing all values read from xml
onNavCreated new Triggered when navigation has initially been created.
EventObject.nav is a reference to the nav movie clip
onMenuMovedBack new Triggered when menu has moved back.
onMenuCreated new Triggered when a menu set has been created.
EventObject.menuPane is a reference to the current menu movie clip.
onMenuItemRolledOver new Triggered when a menu item has been rolled over.
EventObject.menuItem is a reference to the menu item movie clip.
onMenuItemRolledOut new Triggered when a menu item has been rolled off.
EventObject.menuItem is a reference to the menu item movie clip.
onMenuItemClicked new

Triggered when a menu item has been clicked.
EventObject.menuItem is a reference to the menu item movie clip.

onNavHide new Triggered when navigation is collapsed.
onNavShow new Triggered when navigation is expanded.
onGalleryCreated new Triggered when a image gallery has been created.
EventObject.galleryXML is an XML node object used to create the gallery.
onTextPageCreated new Triggered when a text page has been created.
EventObject.txt is the path to the text file.
onTextPageLoaded new Triggered when text has been loaded into the text page.
EventObject.txt is the text used to populate the text page.
onToolTip new Triggered when tooltip is displayed.
EventObject.txt is the text displayed in the tooltip.
onToolTipHide new Triggered when a tooltip is hidden.
onPlayVideo new Triggered when a video button has been clicked.
EventObject.txt is the path to the video.
onSwfCreated new Triggered when a flash page has been created.
EventObject.swf is the path to the flash file.
onSwfLoaded new Triggered when a flash page has loaded.
EventObject.swf is an XML node object used to create the gallery.

Example Using Event Listeners

The following is an example of using the onStageResized, event to open trace the location of the nav. Note that the listener is actually assigned to mediaGallery.myGallery.

// create event listener object
var mylistner:Object = new Object()

// set behavior
mylistner.onStageResized = function(eventObject:Object){
     trace(eventObject.movieValues.navX);
}

// Add event listener to instance of component
mediaGallery.myGallery.addEventListener("onStageResized", mylistner)

 

Defining Text Styles

All text in the gallery can be customized. Depending on whether or not you want the fonts to be embedded (appear smooth), you will use one of the following two methods.

Web Safe Fonts

Open styles.txt and modify the values for fonts, sizes and color of text. See above table of which values affect which text. You should specify only web safe fonts such as the ones you would use in an html page (Arial, Times, Verdana, etc.) Next, set the following values to "false": navTextEmbed and use_flash_fonts. If you want your fonts to appear smooth, or to use a wider range of fonts, see the second method

Embedded Fonts

For this method you will need to have Flash Authoring Software. First, set the following values to "true": navTextEmbed and use_flash_fonts. Now you can specify any font you wish in your styles.txt document. Next, open mediaGallery.fla and place a dynamic field on the stage for each of the different fonts that you specified in styles.txt. While the text field is selected, press the "embed" button and select all the upper, lower case and punctuation characters. Repeat this step for all the text fields. Place the text fields somewhere off stage and republish the movie.

Using XML Instead of Auto

Why would you want to use xml when the Auto script does things for you so nicely? The advantage is being able to organize the gallery even better and add custom captions to images in the gallery. To get the gallery to use a static xml document, you will need to follow these steps:

Step 1 – Modify mediaGallery.html

Open MediaGallery.html in your favorite html or text editor and find this line of code:

var so = new SWFObject("mediaGallery.swf", "gallery", "100%", "100%", "6", "#333333");

Add this line right below :

so.addVariable("data_source", "folders.xml");

Where "folders.xml" is the location of your xml document.

Step 2 – Set up folders.xml

The easiest way to go about this is to start with the xml that auto_folders.php outputs and modify it from there. First, you will want to set up your directory structure with some sample files in the content folder and upload it to a server that supports php. Next, load auto_folders.php in a browser and copy/paste the source code into folders.xml. Now you can re-organize the folders and files to your content. Your download comes with a sample folders.xml document.

You will notice that all the settings from styles.txt are at the top of the document. You will need to modify these in order to style the gallery, as styles.txt will no longer effect the gallery. The basic xml structure looks like this:


<folder name="folder name" file="folder_location">
   <folder name="sub folder name" file="folder_location/folder">
       <pic image="image.jpg" link="image.jpg" link_title="link text here" title="caption text" />
      <pic image="image.jpg" link="image.jpg" link_title="link text here" title="caption text" />
      <pic image="image.jpg" link="image.jpg" link_title="link text here" title="caption text" />
   </folder>
   <video file="video.flv" name="video title "><![CDATA[html description]]></video>
   <txt name="text page title" file="folder/textpage.txt" />
   <music name="Song Title" file="folder/music.mp3" />
   <swf name="movie title" file="folder/flash.swf" />
   <link name="Link title " customIcon="external" href="http://link.com" target="_blank" />
</folder>

The name attribute will always refer to the title that appears in the gallery, and the file attribute will be what is actually loaded. You will want to keep images within their own folder node, while text, video and swf files can be anywhere and will appear in the gallery as nav elements. All nav elements can have a custom icon, set by customIcon="frame label". Where "frame label" corresponds to the frame label containing the custom icon within menu_arrow movie clip.

Combining Auto with Custom XML

Flash Media Gallery allows you to combine the ease of the auto script with the control of xml. Placing an xml document anywhere within your directory structure, will force auto_folders.php to insert that bit of xml into the xml that is output by the script for the gallery. Here’s how it works. Suppose you have the following structure:
main/
main/album1/image1.jpg
main/album1/ image2.jpg
main/videos/videos.xml

The above structure would display 2 items in the navigation album1 and videos. Now, in your videos.xml document, you can add the following code to display videos from external sources:

<video name="video title" file="http://videoserver.com/video1.flv" />
<video name="video title" file="http://videoserver.com/video2.flv" /
<video name="video title" file="http://videoserver.com/vide3.flv" />

This would put these external videos under the "videos" tab in the gallery, as if those videos were within the videos folder. This is very useful if you want to link to external videos or images.

Customizing the Auto Script

Flash Media Gallery allows for some powerful control over how and what appears in the gallery. To make modifications, open auto_folders.php in a text or html editor. At the top of the script you will find a list of $name=value pairs. Here’s an overview of what each one does.

$file_dir – Main directory where the script will start from. This should not end with /
$main_title – Title to be displayed at the top of the navigation menu in the "home" state( in case you want it to be different from the name of the folder.
$show_titles – Set to true to display captions in the image galleries, set to false to hide.
$omit_chars – Number of characters the script will take off from the beginning of the file and folder titles. This is useful in organizing the order in which your content will appear in the gallery. For example, you can name your folders 01_folderName, 02_folderName and set $omit_chars=3 and the folders will appear without the "01_" part.
$show_links – Set to true to show links to the images in the image galleries. Set to false to hide.
$before_link – Text to insert before link text.
$after_link - Text to insert after link text.
$styles_file – Location of the styles document, usually styles.txt. This allows you to switch between several themes.
$exclude_files – An array of files and/or folders that should be excluded from the gallery. If you list a folder name, none of it’s sub-folders will show up either. Format should be: $exclude_files=array("file1.jpg", "folder2","vidow3.flv");
Notice the comas between values, quotes and the semicolon on the end. If any of these are omitted, the script will not work.
$swf_loc – Location of mediaGallery.swf, if it is not in the same directory as mediaGallery.html. This is necessary for video playback, as streamed video url needs to be relative to the swf file, not the html file.

Playing Videos

First, read the above section on Combining Auto with Custom XML.

To add external videos to the gallery, you’ll need to create an xml document that has the video paths and add it to your folder structure. The gallery will then add the videos to the navigation. You’ll need the full url to .flv video you wish to display. Create a new xml document and save it in a folder within content/ directory where you want the vidoes to appear. Then add a video tag for each of your videos like this:

<video name="video title" file="http://videoserver.com/video1.flv" />

Note: You will not be able to display YouTube videos this way, because they expires after a couple of days. To display YouTube videos you should use Flash Gallery Pro, which employs the YouTube API for loading videos that never expire.

About Displaying SWF Flash Files

Because of it’s ability to display flash movies, Flash Media Gallery can be serve as a navigational shell for a full flash site. To make integration of your flash movies smoother, the gallery has some special tricks. By setting up functions within your flash movie, you can take specific actions when certain events occur in the gallery, such as opening of the nav. Here’s a list of functions that the gallery will execute on an swf file and a description of each:

onLoadFinished() – once the swf file loaded the gallery will call this function. So, you can set your swf file to have a blank keyframe at the beginning with a stop() command and the following function:

stop()
onLoadFinished = function(){
   play()
}

This will keep the movie on frame 1 until it is fully loaded and then play it.

onStageResized(width, height) – This is called whenever the size of the movie is changed, such as when the browser window is resized and when the nav is opened and closed. width is the the width of the available stage(between nav and edge of the gallery) height is the height of the stage. Example use:

onStageResized = function(width, height){
   backgroundGraphic._width = width
   backgroundGraphic._height = height
}

This would resize a movieclip name backgroundGraphic to the width and height of the stage.

 

 

Free Package

Want to try before you buy? Free version has all the functionality, but includes a small link to this site.

Download

Paid Package

Use a credit card or PayPal. Download will start immediately after purchse. You’ll also receive an email with the download link.

Price: $40

Purchase

Nifty Products

About Flash Nifties

Flash Nifties is a collection of flash components and tools designed to take the pain out of creating rich interactive presentations. These robust flash tools can be set up in minutes, and most have a fully functional free download, so you can give them a try without putting up any cash. Enjoy!

Testimonials

"Masterfully executed!"

I would like to say that you have done an amazingly great job! Masterfully executed! Throughly designed! Perfect in every way. Thank you so much for offering a photo gallery that works like a photo gallery should.

Steve Nyhof (Auto flash gallery)

"Can't say enough good things"

Just bought your product and i can't say enough good things about it. I'm not the most proficient flash user, which is part of the reason i got this product...to help a project.

Sandlog (Flash Media Gallery)

"All I could have asked for an more"

I've used your xml flash gallery just a couple of days, but I was so impressed that I just had to give you props. This is all I could have asked for an more. Thanks!

Todd D. (XML flash gallery)

more testimonials