I have a main index.html page and have a number of animations in their div containers as shown:
<div style="height:100%;width:100%;">
<div id="StageHelloWorld" class="Composition-HelloWorld"></div>
</div>
<div style="height:100%;width:100%;">
<div id="StageHelloWorldAgain" class="Composition-HelloWorldAgain"></div>
</div>
I load the animations as follows:
yepnope({load: ["edgeTemplates/HelloWorldAgain/HelloWorldAgain_edgePreload.js",
"edgeTemplates/HelloWorld/HelloWorld_edgePreload.js"],
callback: function(url, result, key){
//when the script is loaded, run these:
AdobeEdge.loadResources();
AdobeEdge.playWhenReady();
AdobeEdge.bootstrapCallback(function(compID){
console.log("Ready for : " + url);
});
}});
}, 6000);
And then in code, I trigger each animation to show (one at a time) via:
$("#StageHelloWorldAgain").hide();
$("#StageHelloWorld").show();
AdobeEdge.getComposition("Composition-HelloWorld").getStage().getSymbol("stage").play(0, true);
or
$("#StageHelloWorld").hide();
$("#StageHelloWorldAgain").show();
AdobeEdge.getComposition("Composition-HelloWorldAgain").getStage().getSymbol("stage").play(0, true);
So I would alternate between the above (after a fixed amount of time).
What I noticed is the order of the scripts that I am loading in the yepnope determine which animation is animated when shown. So for:
yepnope({load: ["edgeTemplates/HelloWorldAgain/HelloWorldAgain_edgePreload.js",
"edgeTemplates/HelloWorld/HelloWorld_edgePreload.js"],
edgeTemplates/HelloWorld/HelloWorld_edgePreload.js is animated however if I switch the order, then the last animation for the last script is shown.
So how do I load both animations correctly so that when I do show() on the animation it animates as expected?
As I had just started using Adobe Edge, I had created a number of projects each in their own folders. So each one had its own version of the adobe runtime js file.
Once I pointed all the projects to the same runtime file, the animations started playing in sequence.
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.
Placing multiple swiffy conversions on the same page seems to conflict, only the first one shows up. Is there an area of code, possibly instance names, that I can change on each one so that multiple conversions can appear on the same page?
Here's a link to the page I'm talking about: http://www.ufonies.com/fansmobi.html
The animation in the header works fine, there should be another small animation under the "Space Golf" image but it just appears as a blank space, the conversion code there.
Thanks
I had this problem too with a slider - each slide was a swiffy animation and every time I used two or more animations, swiffy threw an error.
I got around this by using iframe containers for slides instead of divs - this way each animation had its own namespace for variables and scripts.
I hope this helps.
It's pretty simple actually
The swiffyobject should be renamed to anything ex. swiffyobject2, swiffyobject3 and so on.
See in this example the container is renamed to container2 so is the Element id
And then i call swiffyobject2 instead of swiffyobject. that way we can use as much instances of swiffyobjects as we want.
<div id="swiffycontainer2" style="width: 190px; height: 195px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer2'),
swiffyobject2);
stage.start();
</script>
I like to create separate js files for every object and just call one instance of
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>
but that's just a personal taste. Hope this helps.
Try to make new instance.
Example:
var swiffyIntroSlide = new swiffy.Stage(document.getElementById('intro-slide'), introSlide);
swiffyIntroSlide.start();
var swiffyBanquePopulaire = new swiffy.Stage(document.getElementById('top-banner'), banquePopulaire);
swiffyBanquePopulaire.start();
Notes:
introSlide & banquePopulaire are variables of swiffy objects.
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.
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.
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.