Web Solution 4U: Flash work

I found DHTML Slideshow coded in JavaScript on Dynamic Drive for manual slide show for images.

I found it useful because i need same effect but Instead using image i need same effect for my videos.

So i have edit its javascript to run OBJECT code of youtube flash to create my dynamic Video galley. I am sharing my own edited script here so it will help other users to create their Video gallery.

To run the video we are using youtube links means videos uploaded on youtubes will run in our video gallery by passing their links to javascript array.

I am providing here complete source for JavaScript Dynamic Video gallery.

HTML Source

<div class="youtube_frame">
<div class="video">
<script type="text/javascript">

    //Define your own array to hold the photo album images
    //Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

    var myvacation = new Array()
    myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[1] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[2] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[3] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[4] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[5] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]

    //myvacation[2]=["http://www.youtube.com/v/r5N2BLDftuY?fs=1&hl=en_US&color1=0x234900&color2=0x4e9e00", "Delhi 6 Mast Song", ""]

    //initiate a photo gallery
    //Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
    var thepics = new photogallery(myvacation, 1, 1, '659px', '260px', 'testing')

    //OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
    //DELETE everything below to disable
    //Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
    thepics.onselectphoto = function(img, link) {
        if (link != null) //if this image is hyperlinked
            window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
        return false //cancel default action when clicking on image, by returning false instead of true
    }

</script></div>

</div>

Put this text into body of your HTML.

CSS Source

JavaScript Source

// -------------------------------------------------------------------
// Photo Album Script v2.0- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Mar 11th, 07': Script updated to v2.0
// -------------------------------------------------------------------

function photogallery(garray, cols, rows, twidth, theight, paginatetext){
 gcount=(typeof gcount=="undefined")? 1 : gcount+1 //global var to keep count of current instance of photo gallery
 this.gcount=gcount
 this.galleryarray=garray
 this.cols=cols
 this.rows=rows
 var twidth=twidth || "700x" //default table width is 700px
 var theight=theight || "500px"
 var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""] //Store 2 compontents of paginate DIV text inside array
 this.pagecount=Math.ceil(this.galleryarray.length/(cols*rows)) //calculate number of "pages" needed to show the images
 document.write('<table class="photogallery" id="photogallery-'+gcount+'" style="width:'+twidth+'; height:'+theight+';">') //Generate table for Photo Gallery
 for (var r=0; r<rows; r++){
  document.write('<tr>')
  for (var c=0; c<cols; c++)
   document.write('<td valign="top"></td>')
  document.write('</tr>')
 }
 document.write('</table>')
 document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>') //Generate Paginate Div

 var gdiv=document.getElementById("photogallery-"+this.gcount)
 var pdiv=document.getElementById("photogallerypaginate-"+this.gcount)
 gdiv.onselectphoto=function(imgobj, linkobj){return true} //custom event handler "onselectphoto", invoked when user clicks on an image within gallery
 this.showpage(gdiv, 0)
 this.createNav(gdiv, pdiv, ptext)
 gdiv.onclick=function(e){return photogallery.defaultselectaction(e, this)} //attach default custom event handler action to "onclick" event
 return gdiv
}


photogallery.prototype.createImage=function(imgparts){
 //var imageHTML='<img src="'+imgparts[0]+'" title="'+imgparts[1]+'"/>'
 var imageHTML='<object height="243" width="645" type="application/x-shockwave-flash" data="'+imgparts[0]+'"><param name="movie" value="'+imgparts[0]+'"><param name="quality" value="high"><param value="opaque" name="wmode"></object>'
 if (typeof imgparts[2]!="undefined" && imgparts[2]!=""){ //Create URL?
  var linktarget=imgparts[3] || ""
  imageHTML='<a href="'+imgparts[2]+'" target="'+linktarget+'">'+imageHTML+'</a>'
 }
 if (typeof imgparts[1]!="undefined" && imgparts[1]!="") //Display description?
  imageHTML+='<div class="details" style="position:absolute; left:0px; bottom:30px;">'+imgparts[1] +'</div>'
 return imageHTML
}


photogallery.prototype.showpage=function(gdiv, pagenumber){
 var totalitems=this.galleryarray.length //total number of images
 var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
 var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
 var tablecells=gdiv.getElementsByTagName("td")
 for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
  tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
 while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
  tablecells[currentcell].innerHTML=""
  currentcell++
 }
}

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
 var instanceOfGallery=this
 var navHTML=""
 for (var i=0; i<this.pagecount; i++)
  navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
 pdiv.innerHTML=ptext[0]+' '+navHTML
 var navlinks=pdiv.getElementsByTagName("a")
 navlinks[0].className="current" //Select first link by default
 this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
 for (var i=0; i<navlinks.length; i++){
  navlinks[i].onclick=function(){
   instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
   this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
   instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
   instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
   return false
  }
 }
}

photogallery.defaultselectaction=function(e, gdiv){ //function that runs user defined "onselectphoto()" event handler
 var evtobj=e || window.event
 var clickedobj=evtobj.target || evtobj.srcElement
 if (clickedobj.tagName=="object"){
  var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null
  return gdiv.onselectphoto(clickedobj, linkobj)
 }
}

Modification
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]

Myacation is array name to add new links.
it accept four argument as describe below.
["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

path_to_thumbnail = here you mention the url for video you want to run.
Else option will not used as we are working on video so their title will be same as it on youtube.

Online Link

Download link

This tutorial by Flash Farmer covers how to create a dynamic Flash XML navigation menu using Actionscript 2.0 and XML. Each button has a roll over and roll out animation. Control the clickthroughs, button titles and the total number of buttons with the external XML file. Once the Flash file is created you can update the menu just by editing the XML file.
This file consists of a nice structure and code is well commented. Also, files to be downloaded comes along with full offline documentation.
Example of final product:

In This example and Tutorial you have learn how to createVertical Menu.

By Modifing its Action Script we can change this vertical menu to Horizontal Menu.

//FLASH FRAMER NAVIGATION MENU 1
//www.flashframer.com

//Store Button Position
var yPosition:Number = 0;

//Declare New XML Object
var myXML:XML = new XML();
//Set Flash to ignore the XML file's white space
myXML.ignoreWhite = true;
//Declare new Array to store the links from the XML file
var links:Array = new Array();
//Declare new Array to store the names from the XML file
var names:Array = new Array();

//Set XML onLoad function
myXML.onLoad = function(){
   //Set varible to store the XML childNodes
   //This allows you to get the number of buttons in the XML file.
   //You'll use this tell flash how many times to loop the for loop.
   var linkname:Array = this.firstChild.childNodes;
   //Set a for loop
   for(i=0;i<linkname.length;i++){
       //Push the button name into the names Array
       names.push(linkname[i].attributes.NAME);
       //Push the button link into the links Array
       links.push(linkname[i].attributes.LINK);
       //Attach the button Movie Clip from the libray give it an instance name and place it on the next highest level
       _root.attachMovie("button","btn"+i,_root.getNextHighestDepth());
       //Set the y position of the buttons
       _root["btn"+i]._x = yPosition;
       //Increace the varible yPosition 15 pixel each time the loop runs to place each button under each other
       yPosition = yPosition + 125
       //Place the button name from names Array into the blackTxt text box
       _root["btn"+(i)].blackTxt.Txt.text = (names[i]);
       //Place the button name from names Array into the whiteTxt text box
       _root["btn"+(i)].whiteTxt.Txt.text = (names[i]);
       //Assign the btnOver function to the button onRollOver state.
       _root["btn"+(i)].onRollOver = btnOver;
       //Assign the btnOut function to the button onRollOut state.
       _root["btn"+(i)].onRollOut = btnOut;
       //Assign the btnRelease function to the button onRelease state.
       _root["btn"+(i)].onRelease = btnRelease;
   }
}
//Load the XML file
myXML.load("links.xml");

//Button Over function
function btnOver(){
   //This referse to the current button the mouse is over
   //Go To And Play frame 2 of the current button the mouse is over
   this.gotoAndPlay(2);
}
//Button Out function
function btnOut(){
   //Go To And Play frame 16 of the current button the mouse rolls out from
   this.gotoAndPlay(16);
}
//Button Release function
function btnRelease(){
   //Set a varible named currentBtn equal to the instance name of the current button the mouse clicked on
   var currentBtn:String = this._name;
   //Set a varible named currentIndex equal to the varible currentBtn and the characters between 3rd letter and 5th of that string.
   //This will return a number between 0 and the total number of buttons
   var currentIndex:String = currentBtn.substring(3,5);
   //Get the URL from the links Array
   //Use the currentIndex varible as the index number
   getURL(links[currentIndex]);
}

//FLASH FRAMER NAVIGATION MENU 1
//www.flashframer.com

Its Define the position of menu from where the menu start to create.
_root["btn"+i]._x

This Define the space difference between two menu buttons .
yPosition = yPosition + 125

NOTE :-
In this Tutroial we need to take care about text length for next menu position.

Now your flash will show as

Web Solution 4U

Pages

Wednesday, June 15, 2011

JavaScript Video Gallery, youtube Video Gallery, JavaScript Dynamic Video Gallery, JavaScript Tutorial to create dynamic Video gallery using youtube, DHTML SlideShow in JavaScript for Video

Friday, June 3, 2011

Create A Dynamic XML Navigation Menu using Actionscript 2.0 | dynamic tutorial