Dynamic Flash Video Gallery

Dynamic Flash Video Gallery

This flash video player has an integrated thumbnail playlist and comes with a lot of features which can easily be changed using the XML file (size, colors and other options). It has support for RTMP, HD videos, sharing and fullscreen display.

The video player supports H264 files, as well as RTMP and can play mov, mp4, flv files.

Features:

- video / image gallery thumbnail playlist with scrollbar
- play/pause
- timer/total time
- draggable volume bar
- draggable progress bar
- share (embed code) or downdload button
- HD toggle - on/off
- fullscreen
- auto-hide playlist and controls when there is no mouse interaction and on leaving the swf

Note: The videos used in this file are for display purposes only.

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Dynamic Flash Video Gallery - change log

2010.03.12 - version 2.0

* new XML functionality and bug fixes

- controller totally resizeable (controls and list auto resize depending on the height of the controller)
- control the margin of the controller on sides and under it
- control the distance between the controls, list and progress bar

- enable / disable center play button and control its dimension
- enable / disable a download button instead of the share button

- control colors of the button (stroke and fill of the background, stroke and fill of the sign)

- define if each item should start or not with the HD video
- if the item is an image, you can now define how much time should the player show it





 2009.06.26 - version 1.0

* First release!

Dynamic Flash Video Gallery - tips and tricks

Introduction: 

     This flash video player has an integrated thumbnail playlist and comes with a lot of features which can easily be changed using the XML file (size, colors and other options). It has support for RTMP, HD videos, sharing and fullscreen display.

     This Dynamic Flash Video Gallery contains a handful of features and settings. It is easy to use the file in your own Flash projects or as an independent Flash Component on your html based website.

     If you want to use the video player in a Flash file, importing it is as easy as moving some actionscript files around and dragging the movieclip containing the poll in your Flash file.

     Skinning is very simple as well. To edit the file you don't need any Flash experience, because all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the size of the elements, the size of the player and much more.

     The media files are also loaded from an external XML file, so you can add unlimited content.

     The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Dynamic Flash Video Gallery such as the fonts, the .AI source files, and the fla source file.

Features:

1. Gallery thumbnail playlist with scrollbar.
2. Play / Pause.
3. Timer / Total time.
4. Draggable volume bar.
5. Draggable progress bar.
6. Share (embed code).
7. HD toggle - on/off.
8. Fullscreen.
9. Auto-hide playlist and controls when there is no mouse interaction and on leaving the swf.

Folder structure:

     Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Dynamic Flash Video Gallery work.

     videogallery/xml/playersettings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Dynamic Flash Video Gallery.

     videogallery/xml/playlist.xml

     Media XML configuration file - This is where you make all changes to the player's content.

     js/swfobject.js

     Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

     js/expressInstall.swf

     SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.

     preview.swf

     This is the component swf file which is embedded in your website.

     index.html

     HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.

 playersettings.xml structure: 

     Below you can see what each of the attributes in the XML file means:

<videoplayer 
width = "730" 
height = "410">

     Here you can define the player width and height.

 <autoPlay>true</autoPlay>

     Set the autoplay to true or false. If true, the video will automatically start.

<bufferTime>3</bufferTime>

     Here you can set the buffer time. The higher the number, the longer the user has to wait for the video to buffer before being able to play.

<initVolumePercent>50</initVolumePercent>

      Sets the initial volume value.

<controllerHeight>160</controllerHeight>

     Don't change this. This is the controller height, which will be implemented at the next update, so that the controller can be resizeable.

<controllerUnder>false</controllerUnder>

      You can put the controller under the video, or keep it over it as it is in the preview above.

   <controllerAutohideTime>4</controllerAutohideTime>

     Sets the autohide time, for when the user does not move his mouse, or when he rolls out of the stage.

<disableCenterPlayBt>true</disableCenterPlayBt>

     You can enable/disable the middle button.

<colors>
 	<!-- background of the player, usually black -->
 	<background>0x000000</background>
 		
	 <!-- for play and volume bar -->
	 <backBarsColor></backBarsColor>
	 	
	 <!-- for play and volume progress -->
	 <progressBarsColor></progressBarsColor>
	 	
	 <!-- for play download bar -->
	 <downloadBarColor></downloadBarColor>
	 	
	 <!-- for play bar scrub -->
	 <playScrubColor></playScrubColor>
	 <playScrubStrokeColor></playScrubStrokeColor>
	 	
	 <!-- for volume bar scrub -->
	 <volumeScrubColor></volumeScrubColor>	 		 	
	 	
	 <!-- for the sign of controls -->
	 <controlsSignColor></controlsSignColor>
	 	
	 <!-- for the background of the controls -->
	 <controlsBackColor></controlsBackColor>
	 <controlsBackStrokeColor></controlsBackStrokeColor>	
</colors>

     Self-explanatory attributes. Basically you add the colors for everything here. If a color is missing, it means that the player is using the default color.

playlist.xml structure:

     This xml contains the media content. It also has a node for the thumbnail settings:

<playlist 
itemsWidth = "114" 
itemsHeight = "79" 
itemsMargin = "2" 
distBetween = "5" 
selectedItem = "1"
scrollerScrubColor = "">     

     This is where you define the thumbnail width, height, stroke, distance between thumbs and also the selected item. The last attribute is to set the color of the scrub(now is yellow as in the FLA cause the color is not set).

<!-- if the videoPath misses then the item is considered the type of "image" else "video" -->
<item 
videoPath="videogallery/videos/video1.flv" 
videoHDPath="" 
streamer = "" 
previewPath = "videogallery/images/previews/preview01.jpg" 
thumbPath = "videogallery/images/thumbs/thumb01.jpg"/>

     The videoPath represents the path of the normal video. If you want to add an HD version of the same video, fill the videoHDPath as well.

     The streamer is used for RTMP. Here you can define a path such as "rtmp://server.com/videos/". This is just an example, you should know this if you have FMS installed. Do not change this attribute if you don't use a FMS or any other type of RTMP server.

      The preview path is the path to the big image, where the thumb path is the path to the small image. Note if you don't pass any video, the images will display as a slideshow.  

Flashvars:

     In the html file you can set some variables for the player like dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder of course, and the media content xml file.                        
     

// PLAYER DIMENSIONS inside the SWF
flashvars.componentWidth = stageW;
flashvars.componentHeight = stageH;	

            
// PATH TO FILES
flashvars.pathToFiles = "videogallery/";
            
// player settings
flashvars.settingsXmlPath = "xml/playersettings.xml";
                	
// playlist xml path
flashvars.plalistXmlPath = "xml/playlist.xml";

Support:

     If you need any help using the product, please contact us at support@flabell.com.