There are two ways we initiate video pop-ups: called from html and called from within a flash file (such as an event box).

First we will describe and show examples on how to call from html.

In the HEAD, include the following two lines:

<script type="text/javascript" src="includes/galleryviewer/viewer3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="includes/galleryviewer/viewer3.css" />

These lines MUST be input as the LAST javascript include below all other script files being added. IE7 will break the other files if this is not done.

If you would like to modify/override the CSS defaults "includes/galleryviewer/viewer3.css", then you can create a site specific CSS file, named 'popupviewer.css'. In this file, you can edit the following elements:

div#viewer_container
div#viewer_window
div#viewer_content
img#viewer_close

Again, several attributes are predefined in "includes/galleryviewer/viewer3.css", but can be over-written if needed.

In order to call the script, you'll need to setup a link like the following:

<a href="javascript:void(0)" onclick="new GalleryViewer({[options]});>Video</a>

Here are the list of options and their defaults:

Note that these options can be in any order.

<a href="javascript:void(0)" onclick="new GalleryViewer({contentUrl: 'files/video/2008-09-21-metro.mov', baseUrl: 'https://production.perpetuatech.com/', contentType: 'mov', contentWidth: '640', contentHeight: '360', closeImage: 'includes/galleryviewer/dialogCloseButton.png'});">View Video</a>

--------------------------------------------------------------

Easier to read version:

<a href="javascript:void(0)" onclick="new GalleryViewer({
    contentUrl: 'files/video/2008-09-21-metro.mov',
    baseUrl: 'https://production.perpetuatech.com/',
    contentType: 'mov',
    contentWidth: '640',
    contentHeight: '360',
    closeImage: 'includes/galleryviewer/dialogCloseButton.png'
});">View Video</a>

View Video

You could also setup the options before hand:

<script type="text/javascript">
var videoOptions = {
    contentUrl: 'images/layouts/video_player.swf?video_flv=/files/video/video.flv',
    baseUrl: 'https://production.perpetuatech.com/',
    contentType: 'swf',
    contentWidth: '320',
    contentHeight: '240'
};
</script>

<a href="javascript:void(0)" onclick="new GalleryViewer(videoOptions);">FLV</a>

FLV

<script type="text/javascript">
    var videoOptions2 = {
     contentUrl: 'http://www.youtube.com/v/D7_dZTrjw9I',
     contentType: 'youtube',
     closeImage: 'includes/galleryviewer/dialogCloseButton.png'
    };
    </script>

    <a href="javascript:void(0)" onclick="new GalleryViewer(videoOptions2);">Starbucks Video</a>

Starbucks Video

Create an empty button:

Go to the menu and select "Insert > New Symbol..." Then name the button to something recognizable in the library, such as "video button," and select the type to be a button. Then create a new keyframe on the "Hit" frame. Draw with the shape tool the area you wish the user to be able to click the button in. Leave the Up, Over and Down frames empty unless you wish there to be some sort of animation (this should probably be done through actionscript however).

The button is now created in your library. Select it and drag it over to the stage in Scene 1 in a new layer. Move this layer above whatever image or movie clip is the clickable item.

Click on the stage and select the button. This should bring up the properties widow at the bottom of the screen for that button. In the box labeled "<Instance Name>" type video_btn in that box. This is the name of the button that we will call from actionscript.

In the actions layer of scene one, above the first keyframe of your placed button, type this line of code:

video_btn.onRelease = function() {
    getURL("javascript:showVideo()");
} 

This will will call the javascript function "showVideo()", which we will add next, when the user clicks the button.

Just as done previously, in the HEAD, include the following two lines:

<script type="text/javascript" src="includes/galleryviewer/viewer3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="includes/galleryviewer/viewer3.css" />

Also add below or within another javascript function(s) being called within the HEAD tag:

<script type="text/javascript">
      function showVideo() {
            var videoOptions = {
                 contentUrl: '<content_path_to_video_here>',
                 baseUrl: 'production.perpetuatech.com',
                 contentType: 'mov',
                 contentWidth: '640',
                 contentHeight: '375'
            };

            new GalleryViewer(videoOptions);
      }
</script>

Obviously replacing the dimensions, and content path with your own. Style popup player as previously mentioned.