How to load several HTML5 canvas on the same page (the right way)

Hello

I struggled to load several animations of canvas on the same page. At the beginning, I thought that export movies with different namespaces and reload the libraries in a sequential workflow might work, but it doesn't. It still load just the last loaded movie. More info here: coding challenge: what am I doing wrong?

Here's a sample of what I'm doing:

1: publish two flash animations with namespaces customized to "lib" defined in the "publication settings": "libFirst" and "libSecond".

2nd: Edit the canvas tags in the HTML page. One called "firstCanvas" and another one called "secondCanvas".

3rd: change 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 answer with best practices on how to do it? If possible, without the need to reload all libraries...

If I only need to show a flash animation at the same time, it would be more efficient to cut/paste the canvas using jQuery tag in the DOM and reload a different lib on this subject?

Thank you very much!

#flash #reborn

I was able to remedy. In the end, it was easier than I thought. Just publish using namespace different 'lib' for each film, load all the scripts at the end of theand add the following in 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);
});

Tags: Adobe Animate

Similar Questions

  • The screen upside down - why? How can I return it the right way up?

    My screen is upside down, no idea how it back to the right way to the top?

    Press Ctrl & Alt keys and use the arrows to rotate back.

    According to the graphics card on your computer, these can be alternatives.

    Right click on the desktop | Graphics options | Rotation.

    Right click on the desktop | Screen resolution | Orientation.

  • How to change dyou from Korean to English and time date thing dones t work is English version 1.0 of the right way to do it on a wiodows xp home

    How can we change from Korean to English and time date thing doesn t work is English version 1.0 of the right way to do it on a windows xp family

    Hello

    Refer to these...

    http://answers.Microsoft.com/en-us/Windows/Forum/windows_xp-windows_programs/how-do-you-change-Korean-to-English-please-help/0adfb674-886d-440d-8a86-37adcb9a305b

    It comes to English instruction to change the regional language. This will not change any Korean in all English unless your computer is running XP Pro Corporate. The only way to change all Korean at all English is by reinstalling Windows with the English version.

    http://www.computing.NET/answers/Windows-XP/Windows-XP-language-from-Korean-to-English/178270.html

  • I wipe my keyboard and mouse with a paper towel and the screen flipped sideways, how I recover the right way? /

    I wipe my laptop and keyboard mouse with a paper towel and the screen turned sideways, how I recover the right way?

    Hi ken1957,

    Try pressing Ctrl +or to rotate the screen.

  • How can I get this question to the right person in Sony cameras?

    How can I get this question to the right people in the Sony cameras?  The main site contact form does not have a pre-sales question:

    I intend to buy a digital SLR type that has at least 24 million pixels, 4K recording/storage/exit offers video, Wi - Fi, objective interchangeable with anti-shake zoom function and which allow me to save my pictures in full form, so that I can view in 4 K on a Sony 4 K TV.
    Looking at the picture of the cameras is intimidating.  I prefer Sony.  Can you point me to one of your cameras that meet my needs?  If there is on the way before the month of may of the next year, please let me know about that as well.  In addition, I don't want the so-called very high prices of professional cameras, namely $5K or more.  Thank you.

    With regard to a DSLR with 4 k video, no again.
    Will there be one in the future? Yes there will be.
    When? No idea yet.

    The closest thing that currently holds the Sony is the Sony RX10ii

    DSLR body, 4 k video, built in an optical (in lens), wifi/NFC, stabilizer etc.

    However, it is only 20mp and it uses not interchangeable objectives.
    It's lens located between however 18-200mm (35mm equivalent)

    Finally, it's only a 1 "sensor, so don't expect a quality digital SLR image, but quality located near DSLR quality nonetheless.

  • seems that I bought the wrong size stock photo because it shows the low resolution 20 x 30... How can I return it and get the right kind of photo?

    How can I return it and get the right size stock photo that actually works to post 20 x 30

    Hi Debbie,.

    Once that the photos were allowed, they cannot be removed or not allowed.

    Thus, you must make sure that the image you need for your projects. You can also check the size of the images before their approval.

    Hope that answers your question.

    ~ David

  • On a 32-bit vista business system, what is the right way to recover from a damaged NTLDR file that prevents the system from booting?

    On a 32-bit vista business system, what is the right way to recover from a damaged NTLDR file that prevents the system from booting?

    Also, is there a powerful device filled, utility like Winternals Windows PE boot, I can download for the resolution of problems like this and others?

    Thank you in advance!

    Have you had a glance at this startup repair disk?

    Download the ISO on the link provided and make a record of repair time it starts.

    Go to your Bios/Setup, or the Boot Menu at startup and change the Boot order to make the DVD/CD drive 1st in the boot order, then reboot with the disk in the drive.

    At the startup/power on you should see at the bottom of the screen either F2 or DELETE, go to Setup/Bios or F12 for the Boot Menu.

    When you have changed that, insert the Bootable disk you did in the drive and reboot.

    http://www.bleepingcomputer.com/tutorials/tutorial148.html

    Link above shows what the process looks like and a manual, it load the repair options.

    NeoSmart containing the content of the Windows Vista DVD 'Recovery Centre', as we refer to him. It cannot be used to install or reinstall Windows Vista, and is just a Windows PE interface to recovering your PC. Technically, we could re-create this installation with downloadable media media freely from Microsoft (namely the Microsoft WAIK, several gigabyte download); but it is pretty darn decent of Microsoft to present Windows users who might not be able to create such a thing on their own.

    Read all the info on the website on how to create and use it.

    http://NeoSmart.net/blog/2008/Windows-Vista-recovery-disc-download/

    ISO Burner: http://www.snapfiles.com/get/active-isoburner.html

    It's a very good Vista startup repair disk.

    You can do a system restart tool, system, etc it restore.

    It is NOT a disc of resettlement.

    And the 32-bit is what normally comes on a computer, unless 64-bit.

    See you soon.

    Mick Murphy - Microsoft partner

  • I close Firefox the right way every time. Why dose he keep saying opps seems firefox crashed... Each time...

    I checked all of the updates and there is no... Why dose Firefox keep saying OPPPPPS well this is embarrassing, seems that your session broke down... Well I know not down because I close every time the right way to dose... Can someone tell me how to solve this problem... It's really annoying... Also, I tried each and everything I thought to try and nothing works...

    Hello Marlin29, this is currently an issue in firefox when you close all firefox windows open first and then close the application subsequently - the bug should be addressed in a more recent version of firefox.

    a workaround in the meantime, you could close firefox (via firefox > quit) while the browser window is still running or try this: enter: config in the firefox address bar (confirm the message information where it appears) & search preference named browser.sessionstore.resume_from_crash. Double-click it and change its value to false.

  • The right way to face the camera and camera on standby?

    How one brings the camera back to life after the unit returns to standby mode?  What is the right way to manage the device sleep and wake?  Any help is appreciated.

    Hi Sucroid,

    I intend to produce a sample that shows this I hope that during the holiday season.

    Here is some information that can hopefully help you get started...

    When the screen goes to sleep, off camera equipment.  There is nothing you can do about it today, outside of the application one keep awake in your application window. (value SCREEN_PROPERTY_IDLE_MODE SCREEN_IDLE_MODE_KEEP_AWAKE).  Note that this won't save you a user who clicks the power button to force the unit in standby mode.  It will protect you against a situation where your application goes to background or another application requires video resources that are used by the camera.  In these two situations, your application will lose his viewfinder.

    But all is not lost!  There are some events of status, you can listen to that lets you know that the camera stops.  You can listen to these events either with an attached status_callback (applied when starting the viewfinder for example), or by authorizing explicitly state the events using camera_enable_status_event() and waiting for impulses of status.  All these things are detailed in the documentation for the API of photo here: http://developer.blackberry.com/native/reference/bb10/com.qnx.doc.camera.lib_ref/topic/overview.html

    The corresponding lights events are:

    CAMERA_STATUS_RESOURCENOTAVAIL - this event is logged every time that the camera is about to close.  If you have previously called camera_register_resource(), this is the event that listen to you to know that all your camera buffers are about to be démappés - so stop all logic that looks at them and then camera_deregister_resource() camm.  If you do not physically the buffers of viewfinder, then necessarily no need to use this registry/invert mechanism.  It's just there to provide warning and to activate the drivers of the device for you to recognize that it is safe to unamp wait for memory.  Each time the screen goes to sleep, the power button is pressed, or another application has need of resources of the camera, you will get this signal.  If you are curious to know the reason, you can check the 'extra' uint16_t argument in the callback of the situation for one of the camera_powerdownreason_t values.  All video recordings currently active or encodings auto-terminera when this signal is received.

    CAMERA_STATUS_POWERDOWN - event status is reported immediately after the hardware of the device is turned off.  You can't interact more with the camera until this condition is removed.  Note that to capture this event, you will need the user of the status of the event-mode (camera_enable_status_event()) interface, because any reminder of status you can have attached when starting the viewfinder will be cleaned up when the viewfinder stops.

    CAMERA_STATUS_POWERUP - event status is reported immediately after that camera material is fed up after having previously be put off.  Even not not on using status of event-mode interface (camera_enable_status_event()) applies in this case too.

    So, what can you do with this information?

    Well, tuned for CAMERA_STATUS_RESOURCENOTAVAIL will tell you when your viewfinder will close.  At this point, your application must enter a State where he is waiting for an event that will wake it again...

    In most cases, this is the event browser that indicates your application is active or foreground again (NAVIGATOR_WINDOW_ACTIVE or equivalent).

    So when your application is told by browser is it back to the foreground, you can then restart the viewfinder using camera_start_photo_viewfinder() or camera_start_video_viewfinder() according to the requirements of your application.  You will still need to follow the same recipe to start the viewfinder as a cold start your application (for example. Wait for the window of your viewfinder to be filled), but you will not need to reconfigure all the settings.

    OK... which covers 99% of the use cases that you will encounter.  Use case for the 1% remaining, you will need to follow for this CAMERA_STATUS_POWERUP event.  Why?  Well, there is a race condition when things down, in which case if the user wakes up the device while the camera is closing (eg. they struck twice in quick succession, the power button), then the camera will enter its off State, but navigator may actually not report your application it becomes idle.  This is because the infrastructure of power management is waiting actually for the material from the camera to the power off until the system goes to sleep.  If the user wakes up the device upward, then this action is canceled, and the unit enters never actually standby.  In this case of corner, navigator does not say your app to become active, again because he never told your application becomes idle.  So what are you doing?  Well, I have 2 suggestions:

    1. You can follow to CAMERA_STATUS_POWERUP using the event interface mode for the camera equipment.  It's actually the more correct approach and what we are doing internally with the BB10 camera App.
    2. You can use a timer to try to wake up the camera in the case of this corner case occurred.  for example. wait 5 seconds after the signal CAMERA_STATUS_RESOURCENOTAVAIL.  If your application has not been made inactive by browser, then you can try turning it back on the camera.

    I hope this help get you pointed in the right direction and still... I plan on collecting a best-practice appropriate sample that illustrates exactly how to do this when the weather!

    See you soon,.

    Sean

  • I bought Lightroom Version 3.0 in 2009. Now, I want to install Version 6.3. on a new laptop. What is the right way?

    My older Version 3.2. is to install on PC with Windows XP. The new book has 10 Windows.

    First I got trey to install 3.2. in Notepad. I hope that the serial number will be displayed. Then, I want to do the upgrade 6.3. by a download.

    What is the right way?

    Thanks for the reply.

    Please Install Photoshop Lightroom from here. You can check: How to download, install and activate Adobe applications here.

  • What is the right way of javadoc a variable-length argument list

    What is the right way of javadoc a variable-length argument list?

    Let's say I have the following function:
    public void foo(Integer... intArray){
    //...
    }
    I'm not sure how I would want doc this, well, is there something special, I want to point out?

    Thank you for your time,
    Brandon

    Identical to another argument. Name it and say what's the point.

  • setting up Lightroom the right way

    I just ordered Lightroom 3.0.  I have

    should it be a few days.  I woould would like to know if there is

    information out there about how to implement the right way on a first time install.  Earlier today, I use Photoshop Elements 8.0 and I was wondering if Lightroom automatically brings my files of the PSE or what I have to do.  Is it all what I need to do with my files in ESP for making a transition smoothly to LR 3.0.

    The 50 d is supported by Lightroom3.2 and Lightroom3.3 RC

  • What is the right way to stop an external hard drive please?

    What is the right way to stop an external hard drive please?

    Take it down to disk utility

  • What is the right way to recharge the iphone 6

    What is the right way to recharge the iphone 6?

    Hello

    Follow the instructions here to recharge your iPhone:

    Recharge your iPhone and iPod touch - Apple Support

  • What is the right way to allow multiple developers working on the same .uir using Subversion?

    We are two developers working on the same .uir at the same time. Y at - it all the tools that would allow us to merge our own changes? If not, is there a way to avoid us to make changes at the same time.

    For now we are only two, so the problem could easily be fixed by talking or other shipping when the changes should be applied. In any case, I would like to know the right way to work to ignore this issue.

    Thank you!

    Enjoying a beautiful UIR: Options / Save in Text Format...

Maybe you are looking for

  • Satellite L750-1NG - impossible to get into the BIOS

    Hello team, I've recently updated my Toshiba BIOS of v3.0 to v3.6 and I am not currently able to access BIOS. I don't see a splash or the other screen. Except that my computer works very well. I have a Satellite L750-1NG and running Windows 7. Thanks

  • What Options are available for a Windows unattended Setup?

    Hi all I work in a data center and we are changing a lot of things at the beginning of the year that I hope will increase business. This will also increase the workload of course. I do the research ways that I can deploy Windows Server 2003 and 2008

  • Software Windows not genuine even if bought new at HP in the trustworty shop

    I read a few questions about this already but not not yet found a good answer.I bought a new laptop about two years ago in a good shop in the United Kingdom (PC World).He came with preinstalled software and works since then.Now, I get this message th

  • Resale of Windows 7

    Hello I bought a disc of Windows 7 Upgrade Amazon. However, my Dell Lap top doesn't have the graphics capability to manage the operating system, so I had to go back to XP. This is why I would like to sell the disc of Windows 7. I'm sure that I don't

  • Command sets does not not on ACS 5.1

    I'm under ACS 5-1-0-44-3. I have everything works correctly on ACS 5.1.  I want to implement the sets of commands for specific users and groups.  Under access-> Device Admin-> authorization policies I have order selected sets.  The provided cisco is