This is what I want to achieve.
While the swf file is loading, wrapper div displays an html content (e.g. text content).
When the swf file has loaded 100%, it replaces the text content within the wrapper div, and then plays within the wrapper div.
When the swf file is finished playing, it is then replaced with the previous text content.
(This is more like html to swf to html swapping within a div)
any thoughts if this is possible or any other workarounds?
Much appreciated to anyone who could share.
The easiest way to do this is call your div-swapping function from ActionScript in your movie.
You can call is when the movie is 100% loaded and then again from the "last frame" of the movie, so you'd be getting the flash movie to say "show me" and then later "hide me".
Have the HTML and Flash in one div. Since you can't hide a SWF. This trick is to shove it off screen:
<div id="wrapper">
<div id="flashWrapper" style="position:relative; left:-2000px;">
<object>flash embed code</object>
</div>
<div id="loading">Flash is loading...</div>
</div>
It's more fool-proof to have the SWF call a JS function with the ExternalInterface when it's finished. But you can check it via JS:
<script>
var v = setInterval(function(){
if(flashMovie.PercentLoaded() == 100){
document.getElementById("flashWrapper").style.left = "0px";
document.getElementById("loading").style.display = "none";
clearInterval(v);
}
});
</script>
If you are inserting the SWF dynamically be sure to wait a millisecond before accessing it.
Related
I'm working a project using phaser. They want to play video (youtube, or another source) in the website. Can phaser do that ? I already search but not found anything.
For a Phaser version-agnostic solution, keep in mind that Phaser lives in an HTML page and uses JavaScript.
An easy way to handle working with other HTML in your game is to add a container div in the same page that includes the game and then use JavaScript to dynamically populate and/or load/display that container.
Since you didn't provide any code for us to work with, some starter code that you would need to customize and expand upon for your needs is below.
<body>
<!-- Phaser game would need to be loaded passing this div's id -->
<div id="gameDiv"></div>
<!-- Video -->
<div id="videoContainer">/* CSS by default would set visibility to hidden and absolute positioning over the game */
<!-- depending upon how many videos there are, if it's a static video element it could just be added here, or would be empty and populated via JavaScript -->
</div>
</body>
Then within your game have it toggle the visibility of the video container.
function playVideo() {
var el = document.getElementById("videoContainer");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
window.scrollTo(0, 0);
}
This function could be expanded upon to clear the contents of the div#videoContainer and add another video dynamically, have the video start, toggle the visibility of a different container, etcetera.
Josh Morony's Creating a Shop with Purchasable Items in a Phaser Game has a good overview of how to do this, and is what I borrowed from for pieces of the above.
I need to have a swf file that fills the entire html page. But sadly I fail to make it work as intended. Even thought the SWF does indeed fill the entire page, it's dimensions are shown wrong. here is what I am talking about: http://tinypic.com/r/w7k75i/6
As you can see, the swf is at the end of the window, but the dimension is 1024x768 (the text at the bottom left corner) and the "stage resize" event was never triggered (0- the last number). This works perfectly when oppening the swf on my PC, but not when embeded in an html page.
This is how I embed my SWF:
<body><script type='text/javascript' language='javascript' src='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&0=0&0=0'></script>
<div id="content">
</div>
<script type="text/javascript">
swfobject.embedSWF("SiteVali.swf", "content", "100%", "100%", "9.0.0");
</script>
Any suggestions? Thanks.
Reposting solution from comments:
Is your dimension checking code only triggered by Event.RESIZE? You may just need to manually check the stageWidth and stageHeight values once after loading completes, as it won't fire the first time the swf is rendered, even if it's not the default size.
I am launching a mobile site and I want it to have a loading icon while loading all the content and images.
Details:
I have several pages. I want when I click on it will load the pages (to other html page), but I don't want to show the page without fully loaded and I want to show loading animation while it loading all the content. Once, the content is fully loaded. then the loading animation have to hide.
How to do that?
You can make a large <div> at the beginning of the page, then hide it using Javascript in the load event or using an illegal <style> block at the end of the <body>.
You need to give a more specific question to get more specific (useful answers).
In the meantime here are some (hopefully useful) resources:
http://www.devcurry.com/2009/05/display-progress-bar-while-loading.html
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm
http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
This one may come particularly if it applies to your situation:
Showing a div while page is loading, hiding when its done
Good luck!
Any number of ways, but you will need javascript.
You are ready when all image assets have been loaded. Define full screen div that covers the whole page. In this div, show e.g. loading spinner animated gif and what ever text you want.
<html>
<head> .. </head>
<body>
<div id="loader"> .. </div>
<div id="content" style="display:none"> .. </div>
<script> .. </script>
</body>
</html>
On your script preload all images. This ensures that they are in cache when they are needed.
<script>
var loadc = 0;
function _preload(path) {
var image = new Image;
image.src = path;
image.addEventListener('load', function() {
loadc++;
if (loadc == images.count) {
$("#loader").hide();
$("#hide").show();
}
// update here progress counter on loading div
};
}
var images = [ '/image/some.png', '/foo/bar.png' ]
$(document).ready(function() {
for (var i = 0 ; i < images.length; i++) _preload(images[i]);
});
</script>
You need to define in images array all assets that you want to be ready when content div is shown, this includes stuff referred from CSS and DOM and possible dynamic DOM. You can use this same method for other assets, like audio and json.
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
Thanks
Use Javascript, and populate the image src properties later. The # tells the browser to link to a URL on the page, so no request will be sent to the server. (If the src property was empty, a request is still made to the server - not great.)
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.
HTML:
<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />
JS:
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
EDIT
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span> container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
I think this article https://varvy.com/pagespeed/defer-images.html gives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder
I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?
is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.
http://malsup.com/jquery/cycle/
Here is the JS needed if you used jQuery -
Say this was your HTML:
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
Here would be the needed jQuery:
$(function(){
$('div.pics').cycle();
});
no need to worry about different browsers- complete cross browser compatibility.
If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.
At any rate, here's a simple example
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.
To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)
If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.
If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.
Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.
Pre-AJAX that was a pretty good solution.
I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.
That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.