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>

Similar Messages

  • HOW TO PUT TWO PANNEL IN THE SAME PAGE

    HI ALL
    I NEED TO KNOW HOW TO PUT TWO PANNEL IN THE SAME PAGE TO FULLY UTILIZE FULL PAGE AREA BECAUSE THE PANNEL WIDTH IS TOO SMALL , SO I WANT TO MAKE THE PAPER CONTAIN TO PANNELS VERTICALLY.
    THANK YOU

    So Barb,
    I like to use multiple desktops and move back and forth between then using gestures. At the moment I have 5 open: Chrome, Firefox, Safari, Photoshop CS 6 and a desktop. I use "gestures" to navigate between them:
    Mac Basics: Multi-Touch gestures - Apple Support
    and I use Mission Control (F3) to move the various desktops around in the order I want them.
    Mac Basics: Mission Control - Apple Support
    So say I'm searching for a photo to open in CS 6, I find it on the open desktop then hit select "open" in CS 6 and go to that folder in the select pane.
    Even right now I'm typing this in Safari and "gesturing" back to Chrome where I did the search about multi touch and mission control. I drag copy the URL there  and gestured back here to paste the URL into this text.
    If you did a lot of photo searches, I set professional clients of mine in Chicago up with dual monitors (In this case you'd have an external monitor on extended desktop.). So all you need to do is just glance over at the second monitor slide your cursor over there open stuff up find your photo and go back to Photoshop and open it up.
    Hope this helps.

  • How do I put two galleries on the same page?

    What's the "trick" to putting two galleries on the same page?
    I've been experimenting, but it's not working out well. I have one working, but when I put the seond one on, all sorts of unexpected things happen. The first gallery goes up "over" the banner (it covers it??) and even though the sizes are spec'd the same, the second one shows up a lot larger as well.
    It's very weird.
    Any insight would be appreciated!
    Thanks!
    Michelle

    Juan,
    When Application Express finds a validation error, the page rendering step is executed again in the same database process used for the validations. So the procedure wwv_flow.accept, which is doing your validations, calls wwv_flow.show (a PL/SQL call) and passes information about the validation errors to the show procedure so that error text can be merged into the page rendering process.
    If you want to simulate this you might need to save validation info in collections and build the "show" part of the page so that it knows how to run in "validation-display" mode, i.e., to be able to use the collections.
    Scott

  • 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

  • Two iviews in the same page

    hi
    i have created two iviews in the same page based on the two jspdynpage components.
    i am displaying a tableview on the ist view..on on cell click i hav to pass an the value in the cell(of ist view) to the second view...
    how do i call the second view with passing this argument...
    please tell the code to proceed .
    looking forward for ur response.
    thanks
    bidyut dutta

    Try this code and let me know the results.
    EPCF1.java(producer of event)
    ===============================
    package com.epcf;
    import com.sapportals.htmlb.page.DynPage;
    import com.sapportals.htmlb.page.PageException;
    import com.sapportals.portal.htmlb.page.JSPDynPage;
    import com.sapportals.portal.htmlb.page.PageProcessorComponent ;
    public class EPCF1 extends PageProcessorComponent {
    public DynPage getPage(){
    return new EPCF1DynPage();
    public static class EPCF1DynPage extends JSPDynPage{
    public void doInitialization(){
    public void doProcessAfterInput() throws PageException {
    public void doProcessBeforeOutput() throws PageException {
    this.setJspName("EPCFProducer.jsp");
    EPCF2.java(consumer of the event)
    ===================================
    package com.epcf;
    import com.sapportals.htmlb.page.DynPage;
    import com.sapportals.htmlb.page.PageException;
    import com.sapportals.portal.htmlb.page.JSPDynPage;
    import com.sapportals.portal.htmlb.page.PageProcessorComponent ;
    public class EPCF2 extends PageProcessorComponent {
    public DynPage getPage(){
    return new EPCF2DynPage();
    public static class EPCF2DynPage extends JSPDynPage{
    public void doInitialization(){
    public void doProcessAfterInput() throws PageException {
    public void doProcessBeforeOutput() throws PageException {
    this.setJspName("EPCFConsumer.jsp");
    EPCFProducer.jsp
    ================
    <%@ taglib uri = "tagLib" prefix = "hbj" %>
    <hbj:content id="myContext" >
    <hbj:page title="PageTitle">
    <script>
    function buttonClick()
    var name = 'hi';
    alert('hi');
    EPCM.raiseEvent("urn:com.epcf.EPCFProducer", "clickEvent", name);
    alert('hi');
    </script>
    <hbj:form id="myFormId" >
    <hbj:button
    id="myButton"
    text="click"
    width="125px"
    tooltip="click here"
    onClientClick="JavaScript:buttonClick();"
    />
    </hbj:form>
    </hbj:page>
    </hbj:content>
    EPCFConsumer.jsp
    =================
    <%@ taglib uri = "tagLib" prefix = "hbj" %>
    <hbj:content id="myContext" >
    <hbj:page title="PageTitle">
    <script>
    function eventHandler(event)
    myFormId.data.value=event.dataObject;
    EPCM.subscribeEvent("urn:com.epcf.EPCFProducer", "clickEvent", eventHandler);
    </script>
    <form id="myFormId" >
    The string passed is:
    <input type="text" value="" name="data"/>
    </form>
    </hbj:page>
    </hbj:content>
    portalapp.xml
    ================
    <?xml version="1.0" encoding="utf-8"?>
    <application>
    <application-config>
    <property name="SharingReference" value="com.sap.portal.htmlb"/>
    </application-config>
    <components>
    <component name="EPCF1">
    <component-config>
    <property name="ClassName" value="com.epcf.EPCF1"/>
    </component-config>
    <component-profile>
    <property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>
    </component-profile>
    </component>
    <component name="EPCF2">
    <component-config>
    <property name="ClassName" value="com.epcf.EPCF2"/>
    </component-config>
    <component-profile>
    <property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>
    </component-profile>
    </component>
    </components>
    <services/>
    </application>

  • Can you give me a paper or document related to this phone was changed since it was broken down? I need IMEI numbers of two Iphones on the same page. Because I don't wanna save this Iphone again in my country. I paid one time for my old Iphone.

    My Iphone was changed because of broken down thanks to its warranty. I am from Turkey and I paid one time for my old Iphone to save. Can you give me a paper or document related to this phone was changed since it was broken down? I need IMEI numbers of two Iphones on the same page. Because I don't wanna save this Iphone again in my country. I paid one time for my old Iphone. If you give me a document, I don't need to save my Iphone5 and also I don't need to pay again to save in my country.

    this forum is made up of users like you, not apple employees.  We can not help you with that kind of request.

  • How to create a field in an OAF page which sums two fields in the same page.

    Hi,
    In the HRMS appraisal page, I have two fields in different regions.
    1. One field shows the total score of the competencies.
    2. Another field shows the total scores of the objectives.
    The problem with the appraisal total score is it returns only the rating level id. (It does not take decimal values)
    Hence I want to add the above two fields which is displayed in the same page and show as a new field in the top of the page as the final appraisal score.
    [Something similar to what is mentioned in the metalink document 1315431.1 ]
    We are in 11.5.10.2.
    I am new to OAF and have no idea as to how to achieve the above step. Can anyone guide me in doing it?
    regards

    Hi,
    Went through the steps to do a VO substitution.
    But normally in all the examples given the page will belong to the application where we are modifying.
    Eg. in this case the "about this page" shows /oracle/apps/fnd/wf/worklist/webui/NotifDetailsPG
    This is coming under fnd top where all the appraisal VOs and other pages comes under PER_TOP.
    Should I bring all the files from FND_TOP of the server to my PC where jdev is installed.
    I have already taken all the files under $PER_TOP to my PC.
    regards

  • To create an application with a master and two details in the same page

    How I make to create an application contend a form master with two forms details in the same page?
    Tomaz
    Message was edited by:
    user517841

    Hi,
    You do not need to mount a screen. Just add a new region with several text fields inside. You should fetch a row by a process and populate the set when you load the page or click on a button. Insert, update, and delete should be done by processes. You have to have Next and Previous buttons to brows trough all rows of the detail table.
    The most important thing here is what the connections between tables in your database are.
    If they are the "One to many, One to one" you can use the approach described above.
    If they are "One to many, One to many" will be better to use buttons or links to lunch details' tables in separate forms.
    If the second and third tables are connected only to the master table you can use two buttons at the right of every master row. Clicking on the buttons will bring separate form for each detail table.
    If the third table is just a luckup table to the second one you can use "Select List" field into tabular form of the second table in one Master-Detail form.
    Konstantin
    [email protected]

  • Two tabs for the same page

    Hello,
    I have been spending the whole morning trying to find a solution for this problem but did not find any either by myself or parsing the forum messages.
    I am building an application with a two level tab for the navigation.
    Everything is fine as long as the pages referenced by the tabs have a different number.
    My problem is that i use the same dynamic page (let say 40) to be accessed through two different tabs.
    e.g Parent tab is labelled "Parent"
    Two other tabs are created linked to parent tab "Parent" and those are labelled "Action1" and Action2"
    Selecting "Action1" will result in rendering the page 40 with a parameter (let say page_type) set to the value 1.
    Selecting "Action2" will result in rendering the *same* page 40 with a parameter (let say page_type) set to the value 2.
    For the parent tab "Parent" let say that the default is to select "Action1"
    Is there any solution to implement that kind of behaviour?
    I have tried to create redirecting pages (empty page and a single branch) to achieve this but i always get stucked when trying to have page 40 displaying the proper tabs and parent tab.
    Thanks in advance for any help.
    Daniel

    Hi Andy,
    Thanks for your answer!
    Whilst it is fairly straightforward to create multiple tabs for the same page (this can be done through Shared Components, Tabs and click Add on the standard >>tabs bar, enter in any page number you like), the functionality of tabs does not provide the means to set item values. Additionally, as both tabs would be >>"current" for your page 40, once you've clicked on one, you can not click on the other.Yes this is exactly what i discover once my page 40 has been built.
    There may be ways to do what you need, but as tabs are really there for navigation purposes only, this may become rather complicated. What is the difference >>between Action1 and Action2? Can this be achieved in another way? Have you considered switching to lists for navigation (where you can set item values)?In fact, i can still duplicate this page and have a few changes within each new page. But as a matter of code design as both pages have around half in common, i wanted to share most of the items (build a single page) and then play for a few additional items with conditions encompassing the page type i have set before rendering the page.=> Most items in common, a few others whose display is conditionnal. For the end user, it looks like two different pages because in their business process the "Action1" and "Action2" are clearly different.
    I use lists in this application on the home page to reach most of the application pages but while some users prefer to use the links on the home page and go back to home page, other would like to use the tabs and a number of them use both navigation mechanisms.
    Sorry if it is not quite clear (english is not my mother tongue).
    Regards,
    Daniel

  • How to deal with the checkbox columns in the two reports on the same page

    Hi,
    I have 2 reports having checkbox column in the same page. Now how can i differentiate between these 2 checkboxes column and based on them the values in the reports ,while i have to do some processe based on these reports using checkboxes.
    Thnks in adv.

    I just got a new computer and transfered my audio files to the new computer. Itunes made multiple copies of all my files too. I am really hoping there is an efficient way to fix this problem because I have way too many files to go through one at a time.
    Thanks

  • There is confusional data when two terminal get the same page?

    Hi,All
    The page has a textfield for inputing qualification, a button for performing query (invoking Ejb's method) and a table for putting data.
    If two terminal invoke the page at the same time,then the second terminal show the same qualification and data at first.
    When saving one after the other,two terminal have mistake.but, only one terminal,that's right.
    I need your help!
    Thanks
    Smile

    JSF version 1.1 uses the pathinfo of the URL to identify a page (/Home.jsp for example) and creates one component tree per page. You can implement an own window management or change to another JSF version. I don't know if JSC actually supports JSF 1.2.

  • Putting two webcams on the same page

    Hi there,
    For a two-person video chat room, what does it take to place two webcam objects where one shows the webcam that displays the person you're talking to and the other webcam displays yourself?  It's like Skype where there are two cameras showing the person you're talking to and also yourself.
    Thanks,
    Kevin (newbie to AFCS)

    Hi Kevin,
    All you need is two Webcamsubscribers and a WebcamPublisher object. WebcamSubscriber shows the video streams . By default, it shows all user video streams in a grid structure. But if you set publisherIDs property( by default its null) to the userIDs of the selected user videos you want to show , it will show only those user videos.
    For your case, lets say you want to see yourself in a small window and other person in a large window. You can have one webcamsubscriber have publisherIDs property set your user ID and the other one has publisherIDs set to the other person's userID. Then you can make the size and placement of both these websubscribers as per what layout you want e.g. the one showing you is small and in one corner, while the other one takes the full screen.
    The example WebCamera in sampleApps folder illustrates the use of multiple webcamsubscribers to have one such layout. Please go through that example and also read the API doc for publisherIDs. Please let us know about any issues you have.
    Hope this helps
    Thanks
    Hironmay Basu

  • Two separate text areas for typing in two languages on the same page

    Dear All,
    I am trying to find a way to have two separate typing areas on a single page so that I can write a letter in both French and English. I can easily get two columns, one which follows another, but that is not what I want.
    Any help would be greatly appreciated.
    I am running Pages '09.
    Thanks
    Tunaman

    What do you want then? Can you describe how you like to position the text?
    In word processing document you can use layout breaks and column beaks to get two text columns beside each other.
    You can also use text boxes, one for each language. You can even use Shapes as text boxes.

  • Two trees in the same page

    Hi,
    is it so that there can be only one js tree per page ? If so, is there a workaround ?
    When I tried to put a second tree on a page, only empty region is showing. In the page source code,
    it seems that the data for the second tree includes nodes from the first tree, althought they surely are
    not included in the query for the second tree.
    Tiina

    Hi!
    I want to up this topic. I use Firefox 3.5.11 and I've made an example on apex.oracle.com (APEX 4.0.1.00.03, Oracle DB 11.1.0.7.0 EE) where you can see the trouble here: http://apex.oracle.com/pls/otn/f?p=2092:5:0. There are two regions with trees on the page. First one has the following tree query:
    select case when connect_by_isleaf = 1 then 0
                when level = 1             then 1
                else                           -1
           end as status,
           level,
           "ENAME" as title,
           null as icon,
           "EMPNO" as value,
           null as tooltip,
           null as link
    from "#OWNER#"."EMP"
    start with "MGR" is null
    connect by prior "EMPNO" = "MGR"
    order siblings by "ENAME"Second one has this tree query:
    select case when connect_by_isleaf = 1 then 0
                when level = 1             then 1
                else                           -1
           end as status,
           level,
           level as title,
           null as icon,
           level as value,
           null as tooltip,
           null as link
    from dual
    connect by level <= 5So you can see from the code, the second tree should only contain the numbers. But please follow the link above and expand the second tree - it contains the first tree nodes!
    I think it's a bug. Any other thoughts / workarounds, please?
    Edited by: tiPPLer on 26.08.2010 13:55

  • Add two animations to the same movieclip

    Hi there,
    I was wondering if anyone could tell me how to fade my movie
    clip out after using tweener, or if it can even be done? If anyone
    has any suggestions how to find the answer to this question it
    would be greatly appreciated.
    In addition, if anyone can direct to a place/book/tutorial
    that help me how to write sequential animation to one movie clip
    w/out button events, that too would be very helpful!
    Thank you very much!

    In addition, you can pass parameters to the function called
    when the tween is finished by passing along an object to
    onCompleteParams. You can create sequential animations using this
    method (although it may not necessarily be the most efficient
    implementation). Also, be sure to check out the
    Tweener
    Documentation for more help.

Maybe you are looking for