Possible to control SWF through Javascript? - javascript

Here's the situation:
Client wants a looping SWF file to pause for two seconds before it begins playing all over again (it's a nice build animation on a logo, but the logo doesn't stay on the screen for very long because the movie repeats so users can't see the logo for long. This is irrelevant, but good back story.)
They provided me with a SWF file, but not FLA. When I asked for the FLA I was told the hard drive that contained the FLA crashed and it cannot be retrieved. So, that is pretty much a dead-end.
Before I go and try to de-compile the SWF and all that fun stuff, I wanted to know if there was any way that this could be done with HTML and Javascript. That is:
Have the SWF loop
Pause the movie for two seconds before it restarts
What do you think?

This isn't easily possible with javascript, but it is very easy if you load the swf into another swf. You then have access to the main timeline of the original swf and you'd be able to control it. If you want to control a movie called targetMovie.swf you can do something like this:
var loader:Loader = new Loader();
loader.load(new URLRequest("targetMovie.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
addChild(loader);
var logoMovie:MovieClip;
function onComplete(evt:Event):void{
logoMovie = MovieClip(loader.content);
// call pauseMovie at end of timeline
logoMovie.addFrameScript(logoMovie.totalFrames-1, pauseMovie);
}
function pauseMovie():void{
logoMovie.stop();
// delay for two seconds;
setTimeout(function(){
logoMovie.play();
}, 2000);
}

You could simulate this entirely in javascript with swfObject. You would need to time how long the animation is, add two seconds, and make that the time before the script restarts. heres a working example with the homestarrunner intro:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn-history/r409/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startSwf()
})
var restartTime = 24500 //in milliseconds
function stopSwf(){
swfobject.removeSWF("swfLoop");
startSwf();
}
function startSwf() {
$("body").append("<div id='swfLoop'></div>");
swfobject.createSWF({data:"http://homestarrunner.com/newintro.swf", width:400, height:300}, null, "swfLoop");
setTimeout('stopSwf()', restartTime);
}
</script>
</head>
<body></body>
</html>
plug that in here: http://htmledit.squarefree.com/

Try this http://www.permadi.com/tutorial/flashjscommand/

Related

JavaScript --- Looping through elements in webpage #2 from webpage #1

Totally new to JavaScript. As in, today.
From an .html file on my MacBook desktop, I want to open TWO webpages. The first is the file itself, say from the command line, as follows:
open ~/Desktop/first.html
The second webpage is one that I call from the first.html file:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>JavaScript stuff</title>
</head>
<body>
<script>
w = window.open('https://fireship.io/courses/javascript/beginner-js-where-to-run/');
const elements = w.document.querySelectorAll('*');
const count = elements.length;
alert(count)
elements.forEach((elem) => {
console.log(elem)
});
</script>
</body>
</html>
WHAT I WANT TO BE HAPPENING is that w.document.querySelectorAll('*') is getting all elements in the second webpage, meaning https://fireship.io/courses/javascript/beginner-js-where-to-run/. WHAT'S ACTUALLY HAPPENING, though, is that the elements from first.html are returning. This is confirmed by inspecting the console output of first.html.
So, my general question is --- How do I loop through the elements of one webpage from scripting that resides in another?
Any help or direction is much appreciated!
Justin

displaying webpages every few seconds, for webpages that can't load in a frame?

I want to create a web page to display amazon products (kiosk-like display) and the goal is to change to the next product every few seconds. Amazon pages can't load in frames, so using php (or any client side/server side solution) is there a way to set a timer to change to the next product?
Here is the sequence:
Show product 1 -----> show product 2 ----> show product 3 ----> repeat
Here is a simple code that uses frames but it doesn't load amazon in the frame. My next step was to add timer but first I need to figure out how I can show amazon pages in a fashion that I can move to the next one after a few seconds. Basically the issue is that without the frames how can I set a timer (either server side or client side) to redirect the page to the next product?
<!DOCTYPE html>
<html>
<body>
<iframe width="500" height="400" id="myFrame" src="http://www.amazon.com"></iframe>
<p>Click the button to change the value of the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myFrame").src = "http://www.amazon.com";
}
</script>
</body>
</html>
Coding method (javascript and popup window):
I was able to do this with a pop up window instead of frames. Basically what you need to do is to open a pop up and control the url of that pop up through the parent page. Here is a sample code of the solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type='text/javascript'>
window.setInterval(function(){
process();
}, 15000);
arr = ['http://www.amazon.com/Apple-AirPort-Express-Station-MC414LL/dp/B008ALA2RC',
'http://www.amazon.com/dp/B0087NZ31S'
];
var popup = window.open('http://www.amazon.com','rotator');
i = 0;
function process(){
i++;
index =i%arr.length;
popup.location.href=arr[index];
}
</script>
</body>
</html>
Browser extension method:
I found a chrome extension named Rotisserie URL Rotator that does the rotation, can set a time for each page in seconds. Basically you will specify a set of (url, time) tuples and it will rotate on those urls for the specified times. I also found a few more but for now this does job for the display purpose well. I also found one that will rotate between tabs and had a lot more features like specifying random times, etc. But my main purpose was to show the page in only one tab.

How to display variables from external JavaScript in HTML. Internet Explorer 7

I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it

rendering multiple images in a browser in a video like fashion

I have approximatively 500 images that differ very slightly one from another. They are all of the same size. They hence form a sort of video when watched one after the other very fast.
I am looking for a way to display them in a browser (html file from disk), all in the same spot, to form that video looking effect. I want to be able to play, pause, stop, play faster, play slower (and if possible even more controls, such as maybe go to specific time (ie, image 47, if there's a slider for example; if there's only play,pause,fast and slow it's okay though).
I am not a programmer but I think javascript might do that. If there's a better technology, please redirect me to it. I'm just looking for a solution that works the way I intend, but I have no javascript knowledge. This surely has been done before though, so I would gladly accept a working solution.
Although you seem to be going the conversion route, here is a solution that uses javascript, allows pausing, jump to frame, and changing speed (I didn't bother with a slider for this [or a nice UI for any of it]):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="launch()">
</body>
<script>
var frames=['frame1.png','frame2.png','frame3.png','frame4.png','frame5.png','frame6.png','frame7.png','frame8.png','frame9.png','frame10.png'];
var playing=true;
var on_frame=0;
var timer;
function launch(){
document.body.innerHTML='<img id="film" src="frames/'+frames[on_frame]+'"/><br/><button id="actionbutton">Play</button><button onclick="stop()">Stop</button><br/>Milliseconds between frames:<input type="text" id="framerate" value="50"/><br/>Go to frame:<input type="text" id="gotoframe"><button onclick="goFrame(document.getElementById(\'gotoframe\').value);">Go</button>';
document.getElementById('actionbutton').addEventListener('click',play);
play();
}
function change(){
document.getElementById('film').src='frames/'+frames[on_frame]; //I have my images in a folder named frames
on_frame++;
if(on_frame==frames.length){on_frame=0;}
if(playing){
timer=setTimeout(change,document.getElementById('framerate').value?document.getElementById('framerate').value:50);
}
}
function play(){
document.getElementById('actionbutton').removeEventListener('click',play);
document.getElementById('actionbutton').addEventListener('click',pause);
document.getElementById('actionbutton').innerHTML='Pause';
clearInterval(timer);
playing=true;
change();
}
function pause(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;
}
function stop(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;
on_frame=0;
}
function goFrame(x){
if((x>-1)&&(x<=frames.length)){
on_frame=x;
if(!playing){document.getElementById('film').src='frames/'+frames[on_frame];}
}
else{
alert('Out of range');
}
}
</script>
</html>

Javascript for dynamically loading the SWF

I need a Javascript or Ajax to load SWF files in a folder.
/swfdir
|_ test_1.swf
|_ test_2.swf
|_ test_3.swf
.
.
.
|_ test_50.swf
A folder has number of swf files. I want load all of them one by one, by replacing existing one. each flash should play for 10 secs, then it must be replaced with next swf file.
Please provide me a working snippet.
UPDATE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function loadSWFObjects() {
var i=1;
for(i=1;i<=50;i++) {
document.getElementById("mySWF").innerHTML =
"<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_"i".swf\" width=\"300\" height=\"120\">";
}
}
</script>
</head>
<body>
<div>
<object id="mySWF" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<object type="application/x-shockwave-flash" data="SWFObjects/test_1.swf" width="300" height="120">
</object>
</div>
</body>
</html>
How to call that function after loading the page? This code is not working for me :(
Any help indeed.
thanks
At a minimum, your code isn't working because you have a syntax error here -- you're not concatenating your "i" value:
document.getElementById("mySWF").innerHTML =
"<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_"i".swf\" width=\"300\" height=\"120\">";
It should be like this:
.../test_" + i + ".swf...
Given your requirement, you'd be much better off using something like Flowplayer. If you just use javascript, all you can do is something like setInterval(), and javascript won't know anything about the state of the swf -- if something prevents the swf from playing within 10 seconds (or whatever you set the interval at), the script will load the next swf anyway -- very brittle design. Flowplayer uses playlists where you can define a list of any length, and the next video will only play once the previous is done -- regardless of how long it takes. Take a look at this sample. I use JSON to return dynamic lists of variable length. Use whatever server-side language is at your disposal to inspect your file system and return the list of file names.
If you simply cannot use Flowplayer, note that HTML object syntax varies according to browser/version. I see that you're loading swfobject.js, yet you're not using any swfobject functionality. Why? Take a look at the swfojbect javascript API.
That said, the following script will handle the interval functionality:
var loadSWFObjects = function() {
var i = 1;
var sInt = setInterval(function() {
if(i >= 50) {
clearInterval(sInt);
}else{
i++;
}
document.getElementById("mySWF").innerHTML = "<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_" + i + ".swf\" width=\"300\" height=\"120\">";
}, 10000);
}
And just do this if you want it to occur on page load:
window.onload = loadSWFObjects;
If you need a more flexible/modern onload handler, try this or google.

Categories

Resources