How to load multiple HTML5 canvas on the same page (the proper method)
Hi,
I've been struggling to load multiple canvas animations on the same page. At the beggining I thought that exporting the movies with different namespaces and reloading the libraries in a sequential flow might work, but it doesn't. It always loads just the last animation loaded. More info here: Coding challenge: what am I doing wrong?
Here is a sample of what I'm doing:
1st: Publish two flash movies with custom namespaces for "lib" set in the "publish settings": "libFirst" and "libSecond".
2nd: Edit the canvas tags in the HTML page. One called "firstCanvas" and the other one called "secondCanvas"
3rd: Edit the javascript like this:
<script>
// change the default namespace for the CreateJS libraries:
var createjsFirst = createjsFirst||{};
var createjs = createjsFirst;
</script>
<script src="//code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="//code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="//code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="{{assets}}/js/first.js"></script>
<script>
function initFirstAnimation() {
var canvas, stage, exportRoot;
canvas = document.getElementById("firstCanvas");
exportRoot = new libFirst.first();
stage = new createjsFirst.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjsFirst.Ticker.setFPS(libFirst.properties.fps);
createjsFirst.Ticker.addEventListener("tick", stage);
</script>
<script>
// change the default namespace for the CreateJS libraries:
var createjsSecond = createjsSecond||{};
var createjs = createjsSecond;
</script>
<script src="//code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="//code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="//code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="{{assets}}/js/second.js"></script>
<script>
function initSecondAnimation() {
var canvas, stage, exportRoot;
canvas = document.getElementById("secondCanvas");
exportRoot = new libSecond.second();
stage = new createjsSecond.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjsSecond.Ticker.setFPS(libSecond.properties.fps);
createjsSecond.Ticker.addEventListener("tick", stage);
</script>
<body onload="initFirstAnimation(); initSecondAnimation();">
Could someone please reply with the best practice on how to do this? If possible, without the need to reload all the libraries...
If I only need to show one flash movie at a time, would it be more efficient to cut & paste the canvas tag using jQuery in the DOM and reloading a different lib on it?
Many thanks!
#flash #reborn
I was able to fix it. At the end, it was easier than I thought. Just have to publish using a different "lib" namespace for each movie, load all the scripts at the end of the <body> and then add the following to the onload or ready events:
$(document).ready(function () {
var canvas, stage, exportRoot;
// First movie
canvas = document.getElementById("firstCanvas");
exportRoot = new libFirst.first();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libFirst.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
// Second movie
canvas = document.getElementById("secondCanvas");
exportRoot = new libSecond.second();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libSecond.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
// Third movie
canvas = dument.getElementById("thirdCanvas");
exportRoot = new libThird.third();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libThird.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
Similar Messages
-
How to embed multiples HTML5 videos onto simple web page?
How to insert multiples HTML5 videos onto single web page?
I recommend Pickle Player -- one player can support playlists of MP4 or M4V video files.
http://www.pickleplayer.com/
Nancy O. -
When I print multiple photos on the same page, the prints come out different.
I have printed several copies of the same photo, 2 to a page. The 2 copies are different. One seems to be before adjustment and one after, so the exposure appears different. My printer is a Canon pro9000. Can anyone tell me what I am doing wrong?
Thanks!If you print the photo (2 to a page) twice separately, i.e. not 2 copies of the same setup in iPhoto, are they different?
Try this: in the Print menu use the PDF button and select the Save as PDF option. Then open the file in Preview and print the 2 copies. Do they look the same? If not then the problem may lie with the printer not maintaining the same settings from one print to the the next.
OT -
Multiple transactions control in the same page
I am using the Jdev11g 11.1.1.4 and ADF BC,
I am quite new for Jdev11g, My question is I have a page, there are a af: form region and two af:table regions inside the same page.
the 'master' is in af:form and two its 'details' are in either af:table.
I want the user can commit the editing of af:form without affecting the af:tables, and also, for each af:table, user can 'edit', 'add', 'delete' and commit it without affecting the af:form and the other af:table.
I know I can use the 'bound task flow' and build three regions to do so, but i have no experience about this, can you expert give me some idea or some sample link? Thanks!
Edited by: xsyang on Jun 2, 2011 12:56 AMHi,
there are two good videos from Frank N.
[url http://blogs.oracle.com/jdeveloperpm/entry/everything_you_wanted_to_know] Everything you wanted to know about ADF Task Flows .
"Taskflow-Transaction" and "shared data controls with calling task flow" vs. "isolated data controls.." are the topics on which you should look.
Martin -
Two tables on the same page. Is it possible?
Hi all,
I followed the multi-slect sample in Winston's blog and everything is working. However, when I tried to put two tables on the same page, the selections are all messed up. When I looked at the code again I realized the line
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
in the setSelected(Object object) method.
In the case that there are more than one tables on one page, how does the code which table it is refering to? Or how the code should be different so we can have multi tables with selectable rows on the same page? Thnx.Thanks. But how do you tie the TableSelectPhaseListeners to their respected tables.
This is Winston's code for row select (1 table)
private TableSelectPhaseListener tablePhaseListener = new TableSelectPhaseListener();
public void setSelected(Object object) {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
if (rowKey != null) {
tablePhaseListener.setSelected(rowKey, object);
public Object getSelected(){
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener.getSelected(rowKey);
public Object getSelectedValue() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return (rowKey != null) ? rowKey.getRowId() : null;
public boolean getSelectedState() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener.isSelected(rowKey);
For two tables. Do I just repeat the code like this?
private TableSelectPhaseListener tablePhaseListener1 = new TableSelectPhaseListener();
public void setSelected1(Object object) {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
if (rowKey != null) {
tablePhaseListener1.setSelected(rowKey, object);
public Object getSelected1(){
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener1.getSelected(rowKey);
public Object getSelectedValue1() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return (rowKey != null) ? rowKey.getRowId() : null;
public boolean getSelectedState1() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener1.isSelected(rowKey);
private TableSelectPhaseListener tablePhaseListener2 = new TableSelectPhaseListener();
public void setSelected2(Object object) {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
if (rowKey != null) {
tablePhaseListener2.setSelected(rowKey, object);
public Object getSelected()2{
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener2.getSelected(rowKey);
public Object getSelectedValue2() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return (rowKey != null) ? rowKey.getRowId() : null;
public boolean getSelectedState2() {
RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
return tablePhaseListener2.isSelected(rowKey);
Edited by: Thomas5 on Jan 18, 2008 5:28 AM -
Visiting the Apple developer site, pages have a task list at the top of a very long page. When I click on a task which is linked to an anchor on the same page, the screen briefly flashes up the intended topic, then redraws content about a screen above what I wanted, so I have to scroll down to the topic I wanted to read.
It happens when I open the topic in a new tab. There's a sidebar that's not drawn when the initial flashup happens. Then the sidebar draws and the content gets pushed down so the topic I wanted is now below the visible screen.
When I jump to the anchor in the original tab, the sidebar is already there, and it goes to the right topic. -
Two animations on the same page Html5 canvas (flash cc)
Hi all,
I have been using Flash CC to create some nice html5 animations and I am really enjoying it. However I wanted to add more than one animation to the same page. I have managed to get two animations running on the same page, but I am having some issues whereby only one of the animations load the supported images where as the second one does not. I have pasted my code below, any help would be gratefully received. In the long term I want to add many animations to the same page, so would appreciate some help on how this can be done more efficiently. Many thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>
<script src="animation-three.js"></script>
<script src="chart-animation.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("graph");
canvas = document.getElementById("piechart");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
function handleComplete() {
exportRoot = new lib.animationthree();
stage = new createjs.Stage(graph);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
exportRoot = new lib.chartanimation();
stage = new createjs.Stage(piechart);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="graph" width="530" height="410" style="background-color:#FFFFFF"></canvas>
<canvas id="piechart" width="530" height="410" style="background-color:#FFFFFF"></canvas>
</body>
</html>Hi all,
I have been using Flash CC to create some nice html5 animations and I am really enjoying it. However I wanted to add more than one animation to the same page. I have managed to get two animations running on the same page, but I am having some issues whereby only one of the animations load the supported images where as the second one does not. I have pasted my code below, any help would be gratefully received. In the long term I want to add many animations to the same page, so would appreciate some help on how this can be done more efficiently. Many thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>
<script src="animation-three.js"></script>
<script src="chart-animation.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("graph");
canvas = document.getElementById("piechart");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
function handleComplete() {
exportRoot = new lib.animationthree();
stage = new createjs.Stage(graph);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
exportRoot = new lib.chartanimation();
stage = new createjs.Stage(piechart);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="graph" width="530" height="410" style="background-color:#FFFFFF"></canvas>
<canvas id="piechart" width="530" height="410" style="background-color:#FFFFFF"></canvas>
</body>
</html> -
How to pass a parameter from a report to multiple forms in the same page
Hi:
i have a report and a lot of forms in the same page. The fact is that i want to stablish a link over a filed in the report which would make some information appear in those forms so that information could be updated. For example: i have a report with company names. Over those names i want to put a link. When the link would be pressed the forms would reflect the information about that comany. Is this possible to be done? how can i do this or something similar?
Thanks.
Regards. Urko.Please see post Re: session state security
It has been done for a single form in a page and can be extended to multiple forms as well. -
I have many photos with file extension of .PDD and that Photo Deluxe 4 no longer will operate in Win 7. How can I open? Next in Elements 11, how do I load and print different pictures and different sizes options on the same page?
Thanks,
Shirsbmgrams wrote:
I have many photos with file extension of .PDD and that Photo Deluxe 4 no longer will operate in Win 7. How can I open?
See here:
Reading PhotoDeluxe PDD Files -
Can u give clear steps how to load 3 data target at a time by the help of p
can u give clear steps how to load 3 data target at a time by the help of parllalesim
hi,
create the load infopackage type and give the infopack you need to load.
create 3 similar process types.
chain should have this flow
start -> delet index(if cube is the target) -> load target(connect the load process to start process) parallel -> and process -> create index(if cube)/actiavtion of ods(if ods)
Ramesh -
I use "element 12" and want like in the old PS version due Automating and Contact II upload multiple filesand print them with any columns and rows on the same page . How does it work?
Can you supply a link?
-
If I make a little picute in pages ... HOW DO I DUPLICATE THE IMAGE MULTIPLE TIMES ON THE SAME PAGE!11?????!!!!
Or you can hold down the Option key while you click on the image and drag to create a copy. Then Select All and repeat. Repeat again, each time doubling your image count. You may, at an early stage, want to align your photos so that they will be in position when you Option-Drag the next set.
Walt -
When I load pictures, I only see one page with pictures. On the next page the pictures are grey. How to slove this?
Thanks a lot.Sorry, I don't think I made myself clear on what I am trying to do. I am looking for a way to do this process a lot quicker. Sometimes these agendas could be 100 pages. Since I can only select text from one page at a time from the PDF after I scan it, this takes up so much time. What I am looking for is a way to open up the PDF file after scanning and be able to select text from all the pages and cut and paste into word. For example:
I scan 20 pages and save to PDF
I can view all 20 pages - pages 1 to 20
I want to highlight text starting at the beginning of Page 1 and ending on the last word on page 20?
Cut and paste everything into word
Is there a way to do this or should I be using another Adobe product to accomplish?
Thank you.
Cathy -
The internet pages don't display properly I'm using osx10.3.3, yahoo for example asks me to update, but I cant find out how, as the apple store just keeps sending back to the same page with no down load option...do i need to up date or is it just my mac
What Mac model do you have? You might be able to upgrade the OS to Tiger 10.4 or Leopard 10.5.
Even browsers for Tiger 10.4 will get the update message.
You could try a newer browser than Safari, which is obsolete, by downloading Firefox v2.0.0.20 at http://www.oldapps.com/mac/firefox.php
Cheers, Tom -
How can I have use the same div ID multiple times on the same page?
Okay so a problem I encounter a lot is that often times I want to use the same div ID several times on the same page. An example of this is when I'm creating table like designs.
Let's say for instance I create a div ID called 'product-container'. I want to use 'product-container' multiple times on the same page but if I do this it is improper XHTML and will throw errors in any XHTML validator (you are only allowed to use a div ID once on any XHTML page in order for it to be standards compliant).
Now the first option is that I could define 'product-container' in my CSS style sheet multiple times by doing something like this...
#product-container {
width: 300px;
#product-container-2 {
width: 300px;
#product-container-3 {
width: 300px;
#product-container-4 {
width: 300px;
What you will see there however is that it seems pointless to define the same ID numerous times over (just adding a number on the end) when each ID is the exact same thing and has the exact same attributes.
Now what I have noticed is that there are some sites out there who manage to have the same ID appear several times in the code but add a number to it just like above. The difference is that they only have one definition for 'product-cointainer' in their CSS document but in their actual XHTML code they have IDs for 'product-container' but with numbers on the end like 2,3,4,5, etc. It's almost as if JavaScript or some other code is automatically appending a number on the end of the ID so the validator won't consider the markup to be invalid, but yet it knows that it's using the same 'product-container' style that is contained in the CSS style sheet.
I hope I explained this correctly. I'm just hoping to find a way that I can put the same div ID on a page multiple times without having to define it over and over again in my CSS.
Any help is much appreciated!Because it seems like by using a class you can't make this position as
well as you can by using an ID. Am I wrong?
An ID name can be used only one time per page. A class name can be used multiple times per page.
.product {
width: 300px;
text-align:left;
color: #FF0000
border: 2px solid #666;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Maybe you are looking for
-
ACR 4.1, Bridge 2.1 and JPEG file handling
Question: I have bridge ACR preferences to use ACR for JPEG files. I find it to be inconsistent and was wondering if others had the same problem. 1. Some jpeg files open fine in ACR; others do not. 2. Also, if I select 2 or more jpeg files and then C
-
What is the best subscription for greece?
hello. i have read almost everything here, but it's a bit confusing so i would like your help. i want to make a subscription (or premium) for unlimited calls to greek mobiles and landlines. what is the best offer i should take? i don't care about vid
-
How to change(add) intro video?
Hello, i want to change intro video on my macbook pro but i don't know how.Now is blue with apple logo.... THANK YOU
-
sir! i have an ipod when i have try to install ios on my ipod they are being istall and after few minutes show some error. what can i do? plez solve my problem. thanku
-
Current Audition CS6 Build Number
Just over a week ago I received an email from Adobe Systems containing a link to the Adobe Store. It was for a downloadable complimentary upgrade to Audition CS6 from the boxed version of Audition CS5.5 Upgrade. I installed Audition CS6 on my deskto