-Havoc-
04-25-2007, 06:45 PM
I am currently following this tutorial (http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Emb edding) (scroll down to "How-to make a DHTML pop-up" section) with good results. You can see that I got it working pretty well at my website (http://www.null-clothing.com/media.html), you should see the hyperlink in the upper-left hand corner labeled "Porkchop Sandwiches!!".
This is all well and good, but now I would like to convert that hyperlink code into actionscript format, link it to the pic on the box via Flash 8 and have it call on the script in the HTML file. I have the script I am using pasted at the end of this thread. The hyperlink code is pasted below.
<a href="http://www.youtube.com/v/5OEqXAzx6zk" onclick='return popVideo("vid1",true)'>Porkchop Sandwiches!!</a>
This bit of code calls on the script in the HTML file that I have pasted at the end of this thread. I've been at this for 2 days, trying to get this to work in actionscript. I know how to make buttons and all that, so don't worry. I'm at the point where I now need to configure the button with the appropriate actionscript. I think I'm on the right trail, so far I have this.
on (release'return popVideo("vid1",true)') {
//Goto Webpage Behavior
getURL("http://www.youtube.com/v/5OEqXAzx6zk");
//End Behavior
}
I'm trying to alter the code in actionscript so that my flash file calls on the script. The error output on publishing the file reads as follows...
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 1: ',' expected
on (release'return popVideo("vid1",true)') {
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 4: Statement must appear within on handler
getURL("http://www.youtube.com/v/5OEqXAzx6zk");
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 6: Unexpected '}' encountered
}
Total ActionScript Errors: 3 Reported Errors: 3
I will post the script that the link is trying to call on in the HTML file below for reference, top portion is HTML, the script portion is Java. The AHREF link that I am trying to import into my flash site is at the very end of this script. Wall of text incoming....
<div id='vid1' class='video' style='position: absolute; display: none;
padding: 10px; background-color: #800000; border: 3px solid black'>
<a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/5OEqXAzx6zk"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/5OEqXAzx6zk" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350">
</embed>
</object>
</div>
<script type="text/javascript">
function getElementsByClass (searchClass) {
// This function returns an array of all HTML objects with the
// specified className. Tag is optional
var returnArray = [];
var els = document.getElementsByTagName('*');
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (var i = 0; i < els.length; i++) {
if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
}
return returnArray;
}
function popVideo(vid, darken) {
// This function accepts a division ID (vid), either a string or the actual
// object itself. vid is mandatory. darken is optional, if it's true
// the page will be greyed out under the video.
var videos = getElementsByClass('video'); // Get all the videos on the page.
var isplaying=null;
for(i=0; i<videos.length; i++) { // Loop through all the videos
if (videos[i].style.display=='block') { // This video is playing
isplaying=videos[i].id; // remember its name
var tmp=videos[i].innerHTML; // Get the division contents
videos[i].innerHTML=''; // destroy the contents
videos[i].style.display='none'; // Terminate the video.
videos[i].innerHTML=tmp; // rebuild the contents.
}
}
// This handles the darkening of the background while a video is playing.
// First we see if the dark layer exists.
var dark=document.getElementById('darkenScreenObject') ;
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.backgroundColor='rgb(0, 0, 0)'; // Make it black.
tnode.style.opacity='0.7'; // Set the opacity (firefox/Opera)
tnode.style.MozOpacity='0.70'; // Firefox 1.5
tnode.style.filter='alpha(opacity=70)'; // IE.
tnode.style.zIndex='1'; // Zindex of 50 so it "floats"
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject') ; // Get the object.
}
dark.style.display='none';
if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
if (typeof(vid)=="string") { vid=document.getElementById(vid); }
if (vid&&typeof(vid)=="object") {
if (darken) {
// Calculate the page width and height
if( window.innerHeight && window.scrollMaxY ) {
var pageWidth = window.innerWidth + window.scrollMaxX;
var pageHeight = window.innerHeight + window.scrollMaxY;
} else if( document.body.scrollHeight > document.body.offsetHeight ) {
var pageWidth = document.body.scrollWidth;
var pageHeight = document.body.scrollHeight;
} else {
var pageWidth = document.body.offsetWidth + document.body.offsetLeft;
var pageHeight = document.body.offsetHeight + document.body.offsetTop;
}
//set the shader to cover the entire page and make it visible.
dark.style.width= pageWidth+'px';
dark.style.height= pageHeight+'px';
dark.style.display='block';
}
// Make the video visible and set the zindex so its on top of everything else
vid.style.zIndex='100';
vid.style.display='block';
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop)
scrollTop = document.documentElement.scrollTop;
else if (document.body)
scrollTop = document.body.scrollTop;
// set the starting x and y position of the video
vid.style.top=scrollTop+Math.floor((document.docum entElement.clientHeight/2)-(vid.offsetHeight/2))+'px';
vid.style.left=Math.floor((document.documentElemen t.clientWidth/2)-(vid.offsetWidth/2))+'px';
}
return false;
}
</script>
<a href="http://www.youtube.com/v/5OEqXAzx6zk" onclick='return popVideo("vid1",true)'>Porkchop Sandwiches!!</a>
Anyone able to help me out on this one? I know I'm missing something very small and simple here....
This is all well and good, but now I would like to convert that hyperlink code into actionscript format, link it to the pic on the box via Flash 8 and have it call on the script in the HTML file. I have the script I am using pasted at the end of this thread. The hyperlink code is pasted below.
<a href="http://www.youtube.com/v/5OEqXAzx6zk" onclick='return popVideo("vid1",true)'>Porkchop Sandwiches!!</a>
This bit of code calls on the script in the HTML file that I have pasted at the end of this thread. I've been at this for 2 days, trying to get this to work in actionscript. I know how to make buttons and all that, so don't worry. I'm at the point where I now need to configure the button with the appropriate actionscript. I think I'm on the right trail, so far I have this.
on (release'return popVideo("vid1",true)') {
//Goto Webpage Behavior
getURL("http://www.youtube.com/v/5OEqXAzx6zk");
//End Behavior
}
I'm trying to alter the code in actionscript so that my flash file calls on the script. The error output on publishing the file reads as follows...
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 1: ',' expected
on (release'return popVideo("vid1",true)') {
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 4: Statement must appear within on handler
getURL("http://www.youtube.com/v/5OEqXAzx6zk");
**Error** Symbol=Symbol 1, layer=Layer 4, frame=33:Line 6: Unexpected '}' encountered
}
Total ActionScript Errors: 3 Reported Errors: 3
I will post the script that the link is trying to call on in the HTML file below for reference, top portion is HTML, the script portion is Java. The AHREF link that I am trying to import into my flash site is at the very end of this script. Wall of text incoming....
<div id='vid1' class='video' style='position: absolute; display: none;
padding: 10px; background-color: #800000; border: 3px solid black'>
<a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/5OEqXAzx6zk"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/5OEqXAzx6zk" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350">
</embed>
</object>
</div>
<script type="text/javascript">
function getElementsByClass (searchClass) {
// This function returns an array of all HTML objects with the
// specified className. Tag is optional
var returnArray = [];
var els = document.getElementsByTagName('*');
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (var i = 0; i < els.length; i++) {
if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
}
return returnArray;
}
function popVideo(vid, darken) {
// This function accepts a division ID (vid), either a string or the actual
// object itself. vid is mandatory. darken is optional, if it's true
// the page will be greyed out under the video.
var videos = getElementsByClass('video'); // Get all the videos on the page.
var isplaying=null;
for(i=0; i<videos.length; i++) { // Loop through all the videos
if (videos[i].style.display=='block') { // This video is playing
isplaying=videos[i].id; // remember its name
var tmp=videos[i].innerHTML; // Get the division contents
videos[i].innerHTML=''; // destroy the contents
videos[i].style.display='none'; // Terminate the video.
videos[i].innerHTML=tmp; // rebuild the contents.
}
}
// This handles the darkening of the background while a video is playing.
// First we see if the dark layer exists.
var dark=document.getElementById('darkenScreenObject') ;
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.backgroundColor='rgb(0, 0, 0)'; // Make it black.
tnode.style.opacity='0.7'; // Set the opacity (firefox/Opera)
tnode.style.MozOpacity='0.70'; // Firefox 1.5
tnode.style.filter='alpha(opacity=70)'; // IE.
tnode.style.zIndex='1'; // Zindex of 50 so it "floats"
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject') ; // Get the object.
}
dark.style.display='none';
if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
if (typeof(vid)=="string") { vid=document.getElementById(vid); }
if (vid&&typeof(vid)=="object") {
if (darken) {
// Calculate the page width and height
if( window.innerHeight && window.scrollMaxY ) {
var pageWidth = window.innerWidth + window.scrollMaxX;
var pageHeight = window.innerHeight + window.scrollMaxY;
} else if( document.body.scrollHeight > document.body.offsetHeight ) {
var pageWidth = document.body.scrollWidth;
var pageHeight = document.body.scrollHeight;
} else {
var pageWidth = document.body.offsetWidth + document.body.offsetLeft;
var pageHeight = document.body.offsetHeight + document.body.offsetTop;
}
//set the shader to cover the entire page and make it visible.
dark.style.width= pageWidth+'px';
dark.style.height= pageHeight+'px';
dark.style.display='block';
}
// Make the video visible and set the zindex so its on top of everything else
vid.style.zIndex='100';
vid.style.display='block';
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop)
scrollTop = document.documentElement.scrollTop;
else if (document.body)
scrollTop = document.body.scrollTop;
// set the starting x and y position of the video
vid.style.top=scrollTop+Math.floor((document.docum entElement.clientHeight/2)-(vid.offsetHeight/2))+'px';
vid.style.left=Math.floor((document.documentElemen t.clientWidth/2)-(vid.offsetWidth/2))+'px';
}
return false;
}
</script>
<a href="http://www.youtube.com/v/5OEqXAzx6zk" onclick='return popVideo("vid1",true)'>Porkchop Sandwiches!!</a>
Anyone able to help me out on this one? I know I'm missing something very small and simple here....