Flash Media Gallery Setup
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. |
| 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
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. |
| 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 YouTube, Google and other External Videos
First, read the above section on Combining Auto with Custom XML.
Next, you will want to get the url for those videos, which Google and YouTube hide so well. No worries, simply copy the url of the page where the video is playing (example: http://youtube.com/watch?v=sdUUx5FdySs) and go to http://keepvid.com/ which allows you download google and youtube videos. Once you get the download link, instead of downloading the video, you will right-click and select "copy link location", then paste it into the file attribute of your xml doc. If the video doesn't show up, try adding ".flv" to the end of the link you copied.
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.
© Copyright 2010 FlashNifties.com | savdesign.com