Hi All, Here is a little contribution to the T-nail gallery. Making a video gallery using the http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm as a base.
Objective: create a thumbnail gallery that would load .jpg's into a movieclip and also .flv files dynamically with XML into a FLVplayback component on the same stage, replace and/or hide the movieclip image loaded when the .flv plays.
-make a sound event on the over state of the thumbnails.
Results: A work around by separating the image gallery and video gallery on the timeline (not a strong coder here!!!) that loads dynamically with XML into a custom video player using a "Video" movie clip??? (found in the "Library" side menu)
Other adjustments:
-over states of the thumbnails use "this.blendMode = 9;" instead of "this._alpha = 50;" this creates a inverse effect
-I adjusted the spacing of the T-nails
Final thoughts:
In my search to do this I found video gallery methods that used component lists but very few used thumbnails but the ones that did where too complicated and required FMS ie: <http://www.adobe.com/devnet/flash/articles/video_player.html>
If anyone can help with my original "Objective" it would be greatly appreciated. I would really like to be able to use the FLVplayback component instead of the custom one I came up with. I read about using "SMIL" file but came up with limited info for this method anyone used this??
Here is the final results I worked on for a friend.
www.thurmanart.com (http://www.thurmanart.com)
Thanks!
-J-
PS. Sorry no .fla files available at this time.
::THERE MAY BE REDUNDANT CODE IN THE FOLLOWING::
/*The following script is based on Kirupa's thumbnail gallery posted at <http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm>*/
/////////////*Thank you www.Kirupa.com*//////////////
//////////////////video//////////////////////
var myVideo:Video;
// my_video is a Video object on the Stage
var my_nc:NetConnection = new NetConnection();
my_nc.connect(null);
var my_ns:NetStream = new NetStream(my_nc);
myVideo.attachVideo(my_ns);
//////////////////\video//////////////////////
function loadXML(loaded)
{
if (loaded)
{
xmlNode = this.firstChild;
video = [];
//video
description = [];
thumbnails = [];
//image = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++)
{
video[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
//video
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
//image[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
//video
} else
{
content = "file not loaded!";
}
}
///////////////////////////////////////////////
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images/videos.xml");
///////////////////////////////////////////////
listen = new Object();
listen.onKeyDown = function()
{
if (Key.getCode() == Key.LEFT)
{
prevImage();
//video
} else if (Key.getCode() == Key.RIGHT)
{
nextImage();
//video
}
};
Key.addListener(listen);
previous_btn.onRelease = function()
{
prevImage();
//video
};
next_btn.onRelease = function()
{
nextImage();
//video
};
/////////////////////////////////////
////////////////controls/////////////////////
stop_btn.onRelease = function()
{
my_ns.pause(true);
my_ns.seek(0);
};
pause_btn.onRelease = function()
{
if (my_ns.time>0)
{
my_ns.pause();
}
};
play_btn.onRelease = function()
{
my_ns.pause(false);
};
//////////SOUND CONTROLS//////////
var videoSound:Sound = new Sound(sound_mc);
mute_btn.onRelease = function()
{
if (videoSound.getVolume()>0)
{
videoSound.setVolume(0);
} else
{
videoSound.setVolume(100);
}
};
//////////volume/////////////
hiVolume_btn.onRelease = function()
{
videoSound.setVolume(100);
};
medVolume_btn.onRelease = function()
{
videoSound.setVolume(50);
};
loVolume_btn.onRelease = function()
{
videoSound.setVolume(10);
};
///////////////////////////////////////////////
/////////thumbnailWorks////////////////////////
function thumbnails_fn(k)
{
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc)
{
target_mc._x = hit_left._x+(target_mc._width+15)*k;
//space between thumbnails
target_mc.pictureValue = k;
target_mc.videoValue = k;
//video
target_mc.onRelease = function()
{
p = this.pictureValue-1;
p = this.videoValue-1;
//video
nextImage();
};
target_mc.onRollOver = function()
{
//this._alpha = 50;
this.createEmptyMovieClip("MovieClip", this.getNextHighestDepth());
this.blendMode = 9;
//T-nail blend mode
thumbNailScroller();
};
target_mc.onRollOut = function()
{
//this._alpha = 100;
this.blendMode = 0;
//T-nail blend mode
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
/////////////////preloader////////////////////
p = 0;
this.onEnterFrame = function()
{
filesize = video.getBytesTotal();
//video
loaded = video.getBytesLoaded();
//video
preloader._visible = true;
if (loaded != filesize)
{
preloader.preload_bar._xscale = 100*loaded/filesize;
} else
{
preloader._visible = false;
if (myVideo._alpha<100)
{
//video
myVideo._alpha += 10;
//video
}
}
};
///////////////\\\\\\\\\\\\\
function nextImage()
{
if (p<(total-1))
{
p++;
if (loaded == filesize)
{
video._alpha = 0;
//picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
my_ns.play(video[p], 1);
//video
picture_num();
}
}
}
function prevImage()
{
if (p>0)
{
p--;
video._alpha = 0;
//picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
my_ns.play(video[p], 1);
//video
picture_num();
}
}
function firstImage()
{
if (loaded == filesize)
{
video._alpha = 0;
//picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
my_ns.play(video[0], 1);
//video paused
picture_num();
}
}
function picture_num()
{
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller()
{
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 12;
tscroller.onEnterFrame = function()
{
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height))
{
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right)))
{
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left)))
{
thumbnail_mc._x += scroll_speed;
}
} else
{
delete tscroller.onEnterFrame;
}
};
}
///////////////////endScript/////////////////////
/////////////*Thank you Kirupa.com*//////////////
////////////////////////XML////////////////////////
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<video>images/videos/big_city.flv</video>
<caption>Big City</caption>
<thumbnail>images/videos/thumbnails/big_cityT.jpg</thumbnail>
</pic>
<pic>
<video>images/videos/healthy_walker.flv</video>
<caption>Healthy Walker</caption>
<thumbnail>images/videos/thumbnails/healthy_walkerT.jpg</thumbnail>
</pic>
<pic>
<video>images/videos/left_behind.flv</video>
<caption>Left Behind</caption>
<thumbnail>images/videos/thumbnails/left_behindT.jpg</thumbnail>
</pic>
<pic>
<video>images/videos/passionate.flv</video>
<caption>Passionate</caption>
<thumbnail>images/videos/thumbnails/passionateT.jpg</thumbnail>
</pic>
</images>
////////////////////////////////////////////////