JavaScript - Tracking Outgoing Links In Flash With Javascript

Is it possible to use GetVariable() on a variable outside the Main scene timeline?

Im trying to get a variable that is set on "sprite 479" that is gonna run on frame #2.. the variable name is "myVariable"

Code:

function getElement()
{
  var FlashArr = document.getElementsByName('myFlash');
  return FlashArr[FlashArr.length-1];
}

alert(getElement().GetVariable("myVariable"));

I can only get variables located on the MainMovie sprite.

Thank you.

Hi,
I'm currently working on a Flash pop-up that can be integrated in several websites. I'm currently testing the code. I've got a flash file with a semi-transparant background that loads over the complete page, it also closes the div with the flash content once the end of the swf is reached.

The thing is, I want to prevent the user from scrolling whilst the swf is active. That's why I disabled the overflow-Y.

Now I've got a javascript code that is supposed to change the body's overflow to visible again, and I'm calling to this code in the same frame as where I disable the div with the flash in it.

But for some reason it isn't working.

This is my complete Javascript code:

Code:

<script type="text/javascript">
<!-- Original: Gregor (legreg@legreg.de) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;


function hidelayer(lay) {
  if (ie4) {document.all[lay].style.visibility = "hidden";}
  if (ns4) {document.layers[lay].visibility = "hide";}
  if (ns6) {document.getElementById([lay]).style.display = "none";}
}

function writetolayer(lay,txt) {
  if (ie4) {
    document.all[lay].innerHTML = txt;
  }
  if (ns4) {
    document[lay].document.write(txt);
    document[lay].document.close();
  }
  if (ns6) {
    over = document.getElementById([lay]);
    range = document.createRange();
    range.setStartBefore(over);
    domfrag = range.createContextualFragment(txt);
    
     while (over.hasChildNodes()) {
      over.removeChild(over.lastChild);
    }
     over.appendChild(domfrag);
  }
}


<!-- This is the part I added which I thought would show the scrollbar again after the flashpopup is finished -->
function showbar(){
	document.getElementsByName('body')[0].style.overflowY = 'visible';
}

</script>

And in the final frame of my flash animation I first stop the swf, and then call to both functions:

//stops the movie
stop();

//this is the code that triggers the function to hide the div, and the function that should show the scrollbar

getURL("javascript:showbar();");
getURL("javascript:hidelayer('newlayer');");


I've also got an online webtest he
http://www.haragara.com/banner_test/

And I've included all the files in a zip

Can anyone tell me what I'm doing wrong?

Hi can Javascript talk to the flash plugin to access the microphone functionality?

if so how can i do this?

Hi,

I need a javascript that detects flash and replace z-index value.

i have 2 div. div1 (alternate HTML content) has z-index=-3 and div2 (flash object) z-index=0. If flash is detected, do nothing. if flash is not detected, i would like to set div1 z-index to a positive 3.

can someone please help me?

hi,
I have created a flash video that work on a php table (like php-nuke), this is seen well on my PC, instead with various screen the video size is not good. ON screen big the video is small, on screen small the video is big... How i can made a script that change the dimension of flash video ? any idea ? please help me..

Hi,

I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great.

The only problem is I am not able to open a flash file in modal window.

Can any one guide me or suggest me how should I fix this.

Thanks in advance.

Vikrant

I am embedding a flash photo gallery object in an html page. The flash gallery has a param "thumbVisibility" that allows you to set the visibility of the thumbnails with the options "NEVER" and "ALWAYS." I have it set to "NEVER" so that the thumbs do not show when the object loads. That is how I want it.

However, I would like to build a javascript method to create a toggle button to switch between "NEVER" and "ALWAYS" so that the thumbnails can be turned on and off by the end user.

As a first step, I know that javascript can be used to pass params to flash objects but as a js noob I haven't been able to find a clear and concise tut to figure out how to do this. Of course, the second step is how to do this in a function where I could switch between the two options using a single toggle button.

I would greatly appreciate it if someone could suggest an approach to the javascript required to solve this problem. Thanks in advamce for your assistance.

Hi,

I'm trying to get my webcam feed embeded as a flash object. I have the url to the swf generated by the webcam software. If I copy and paste the url into IE's address bar, the webcam shows. However, the same url embeded into html does not work.

This directly in IE address bar works. But doesn't in any other browser:
Code:

http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240&camera=1

I've looked through the code from the webcam (Axis) admin page and copied the code for the flash option. Here is the code:
Code:

<html>
<head></head>
<body>
<script language="Javascript">
var width = "320";
var height = "240";
var width_height = 'width="' + width + '" height="' + height + '"';
var view_NeedFlashPluginTxt = "You need a Shockwave Flash plugin, get it from:";

    document.write('<EMBED src="http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240'+'&camera=1" ' +
    'quality=high bgcolor=#000000 ' + width_height +
    ' TYPE="application/x-shockwave-flash" swLiveConnect=TRUE' +
    ' PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">' +
    '</EMBED>' +
    '<NOEMBED>' + view_NeedFlashPluginTxt +
    '<a href="http://www.macromedia.com/shockwave/download/">Macromedia</a>.' +
    '</NOEMBED><br>');

</script>  
</body> 
</html>

and this is the html the Javascript outputs:
Code:

<EMBED height=240 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash width=320 src=http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240&amp;camera=1 swLiveConnect="TRUE" bgcolor="#000000" quality="high">
</embed/>

Can anyone spot anything wrong with the code or perhaps suggest why it isn't working?

I have 3 tabs with a flash video playing in each. If a user clicks on a video and then decides to move to another tab while the video is playing.... the video stops and the tab is switched. I am using the code below to achieve that.

Code:

onClick=player1.sendEvent('STOP'); player2.sendEvent('STOP'); player3.sendEvent('STOP');

this works fine if I have the tabs appearing in sequence with player1 embedded in the first tab, player2 in the second and player3 in the third. However, I wanted to randomize the tabs, in which case if tab 3 containing player3 appears first and is played and then the user switches to another tab the video keeps playing.... meaning the above code does not work in that instance.

I am at a loss here cause i thought that the onClick event should be going through all the players and stopping them.

website: http://tinyurl.com/ydalz2r (at the moment the tabs are displayed in sequence)

Hi,

Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected?

The code to show and hid layers in html is working and is he

Code:

//visible layers
function $_(IDS) { return document.getElementById(IDS); }

function setVisible( IDS ) {
  var obj;
  var sel = $_('divContent').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    obj = sel[i].id;
    if (obj != IDS) { $_(obj).style.display = 'none'; }
    else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
  }
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>

<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>

<div id="divContent">
                <div id="BIO" class='divElem'>
                <p>This is my content for bio</p>
                </div>
                <div id="News" class='divElem'>
                <pThis is my content for news</p>
                </div>
                <div id="Portfolio" class='divElem'>
                <p><This is my content for portfolio </p>
                </div>
                <div id="Resume" class='divElem'>
                <p>This is my content for resume</p>
                </div>
</div>

</body>

Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated.

Thanks and forever indebted.

Gerry

Hi everyone, I have successfully added Flash to my page but I want the flash animation to be inside the <div id="main">. For some reason when I put the <div id="flashcontent"></div> inside the main div it doesn't show up on the page. Please help. My code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MikeJamesDesigns</title>
<link rel="stylesheet" type="text/css" href="cssEdit.css" />

<script type="text/javascript" src="js/flashobject.js"></script>

<script type="text/javascript">
var fo = new FlashObject("bannerISRAEL.swf", "animationName", "450", "60", "8", "#FFFFFF");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "true");
fo.write("flashcontent");

</script>

</head>

<body>

<!--<div class="tikiImage">
<img src="/Users/MikeJamesRossi/Desktop/cssEdit/images/tiki.png" alt="tikiTorch" height="1040px" width="1100px"/>
</div>-->

<div id="wrapper">

<div id="sitebranding">
</div><!--end of sitebranding div-->

<div id="navigation">
<a href="home">Home</a> | <a href="about">About</a> | <a href="news">News</a> | <a href="images">Images</a> | <a href="home">Faq</a> | <a href="contact">Contact</a>
</div><!--end of navigation div-->

<div id="main">

<div id="flashcontent"></div>

</div><!--end of main div-->

</div><!--end of wrapper div-->

</body>

</html>


My css file looks like this:

#flashcontent {
position: relative;
top: 500px;
left: 365px;
width: 60px;
heightx;
background-color:red;
z-index: ;
}


Any help would be greatly aprreciated!! Thanks Mike!

I'm trying to convert A world Population Counter from Flash into HTML/Javascript.

But I'm having difficulties and It would be great if someone can help me out.

The sample show a analog clock, But the html version I want should use just a digital clock, it's simpler I think
http://www.webstylelabs.com/worldclock2.swf
http://www.webstylelabs.com/actionscript.txt

Here is my code,
http://www.webstylelabs.com/clock.html
So just plain input digital counter is ok

I appreciate any help

Hi Everyone,

I must admit that I'm a newbie in writing javascript.

Can anyone help me with a script that will enable me to display a flash movie on one of my sites.

I will appreciate all your responses.

Thank you.

Basically i have made a small gallery with a lightbox feature, and it half works. What i am trying to do is make the lightbox fade out the flash navigation like the rest of the page but it just seems to overlap my lightbox. Any ideas?

Here is the link for the webpage:
http://www.frozen-shy.webs.com/arts_signatures.html


Here is the javascript code:

Code:

/*	
	Table of Contents
	-----------------
	Configuration
	
	Functions
	- getPageScroll()
	- getPageSize()
	- pause()
	- getKey()
	- listenKey()
	- showLightbox()
	- hideLightbox()
	- initLightbox()
	- addLoadEvent()
	
	Function Calls
	- addLoadEvent(initLightbox)
*/


//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';		
var closeButton = 'close.gif';		


//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}



//
// getPageSize()
// Returns array with page width, height and window width, height
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}


//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	
	if(key == 'x'){ hideLightbox(); }
}


//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }
	

//
// showLightbox()
// Preloads images. Places new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
	// prep objects
	var objOverlay = document.getElementById('overlay');
	var objLightbox = document.getElementById('lightbox');
	var objCaption = document.getElementById('lightboxCaption');
	var objImage = document.getElementById('lightboxImage');
	var objLoadingImage = document.getElementById('loadingImage');
	var objLightboxDetails = document.getElementById('lightboxDetails');

	
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// center loadingImage if it exists
	if (objLoadingImage) {
		objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
		objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
		objLoadingImage.style.display = 'block';
	}

	// set height of Overlay to take up whole page and show
	objOverlay.style.height = (arrayPageSize[1] + 'px');
	objOverlay.style.display = 'block';

	// preload image
	imgPreload = new Image();

	imgPreload.onload=function(){
		objImage.src = objLink.href;

		// center lightbox and make sure that the top and left values are not negative
		// and the image placed outside the viewport
		var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
		var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
		
		objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
		objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


		objLightboxDetails.style.width = imgPreload.width + 'px';
		
		if(objLink.getAttribute('title')){
			objCaption.style.display = 'block';
			//objCaption.style.width = imgPreload.width + 'px';
			objCaption.innerHTML = objLink.getAttribute('title');
		} else {
			objCaption.style.display = 'none';
		}
		
		// A small pause between the image loading and displaying is required with IE,
		// this prevents the previous image displaying for a short burst causing flicker.
		if (navigator.appVersion.indexOf("MSIE")!=-1){
			pause(250);
		} 

		if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }
		objLightbox.style.display = 'block';

		// After image is loaded, update the overlay height as the new image might have
		// increased the overall page height.
		arrayPageSize = getPageSize();
		objOverlay.style.height = (arrayPageSize[1] + 'px');
		
		// Check for 'x' keypress
		listenKey();

		return false;
	}

	imgPreload.src = objLink.href;
	
}





//
// hideLightbox()
//
function hideLightbox()
{
	// get objects
	objOverlay = document.getElementById('overlay');
	objLightbox = document.getElementById('lightbox');

	// hide lightbox and overlay
	objOverlay.style.display = 'none';
	objLightbox.style.display = 'none';
	
	// disable keypress listener
	document.onkeypress = '';
}




//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{
	
	if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName("a");

	// loop through all anchor tags
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];

		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
			anchor.onclick = function () {showLightbox(this); return false;}
		}
	}

	// the rest of this code inserts html at the top of the page that looks like this:
	//
	// <div id="overlay">
	//		<a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage"></a>
	//	</div>
	// <div id="lightbox">
	//		<a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
	//			<img id="closeButton">		
	//			<img id="lightboxImage">
	//		</a>
	//		<div id="lightboxDetails">
	//		</div>
	// </div>
	var objBody = document.getElementsByTagName("body").item(0);
	
	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.onclick = function () {hideLightbox(); return false;}
	objOverlay.style.display = 'none';
	objOverlay.style.position = 'absolute';
	objOverlay.style.top = '0';
	objOverlay.style.left = '0';
	objOverlay.style.zIndex = '90';
 	objOverlay.style.width = '100%';
	objBody.insertBefore(objOverlay, objBody.firstChild);
	
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// preload and create loader image
	var imgPreloader = new Image();
	
	// if loader image found, create link to hide lightbox and create loadingimage
	imgPreloader.onload=function(){

		var objLoadingImageLink = document.createElement("a");
		objLoadingImageLink.setAttribute('href','#');
		objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
		objOverlay.appendChild(objLoadingImageLink);
		
		var objLoadingImage = document.createElement("img");
		objLoadingImage.src = loadingImage;
		objLoadingImage.setAttribute('id','loadingImage');
		objLoadingImage.style.position = 'absolute';
		objLoadingImage.style.zIndex = '150';
		objLoadingImageLink.appendChild(objLoadingImage);

		imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs

		return false;
	}

	imgPreloader.src = loadingImage;

	// create lightbox div, same note about styles as above
	var objLightbox = document.createElement("div");
	objLightbox.setAttribute('id','lightbox');
	objLightbox.style.display = 'none';
	objLightbox.style.position = 'absolute';
	objLightbox.style.zIndex = '100';	
	objBody.insertBefore(objLightbox, objOverlay.nextSibling);
	
	// create link
	var objLink = document.createElement("a");
	objLink.setAttribute('href','#');
	objLink.setAttribute('title','Click to close');
	objLink.onclick = function () {hideLightbox(); return false;}
	objLightbox.appendChild(objLink);

	// preload and create close button image
	var imgPreloadCloseButton = new Image();

	// if close button image found, 
	imgPreloadCloseButton.onload=function(){

		var objCloseButton = document.createElement("img");
		objCloseButton.src = closeButton;
		objCloseButton.setAttribute('id','closeButton');
		objCloseButton.style.position = 'absolute';
		objCloseButton.style.zIndex = '200';
		objLink.appendChild(objCloseButton);

		return false;
	}

	imgPreloadCloseButton.src = closeButton;

	// create image
	var objImage = document.createElement("img");
	objImage.setAttribute('id','lightboxImage');
	objLink.appendChild(objImage);
	
	// create details div, a container for the caption and keyboard message
	var objLightboxDetails = document.createElement("div");
	objLightboxDetails.setAttribute('id','lightboxDetails');
	objLightbox.appendChild(objLightboxDetails);

	// create caption
	var objCaption = document.createElement("div");
	objCaption.setAttribute('id','lightboxCaption');
	objCaption.style.display = 'none';
	objLightboxDetails.appendChild(objCaption);
}




//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
//
function addLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		window.onload = function(){
		oldonload();
		func();
		}
	}

}



addLoadEvent(initLightbox);	// run initLightbox onLoad

Any help is much appreciated
xx

Hi...

Im in between a project in which I have to make and Online Radio for various languages

Im using Javascript and HTML/CSS and confused on how and where n which way to get a Radio Player on my the web page!!

Also whn if I get a Player on page...How would I go about to Make it to Play a Particular Online Radio!!

Im using Javascript and HTML(and im not tooo keen on using FLASH as im not aware of it!!!)


Pls sumbody help me on this ASAP

!!
Thanks
!!