Skip to main content
C
chrisd20923491
Known Participant
February 13, 2019
Answered

Animate Canvas (HTML5)

  • February 13, 2019
  • 3 replies
  • 3860 views

Hello,

I've tried searching the forums but my problem seems a bit more specific and to understand I think it's worth noting what I use Flash/Animate for. I work for a company that does a lot of E-Learning courseware. We deliver a tremendous amount of content in the form of interactive flash content. Some of them are tested via SCORM and used in an LMS (Learning Management System) to record the results. This often lead to .PNG's stills for backgrounds such as analog panels of how to operate systems onboard ships or aircrafts. We'd then use .FLV's of animated sequences when the users clicked the correct button in a scenario/animation. So what this lead to was rich media that had interactivity. We'd be swapping from .PNG stills to .FLV's instantly without any noticable loss in quality. Sort of like how you'd swap in and out from AfterEffects/Premiere but with interactivity.

Now we're challenged to deliver the same content/conversion in HTML5 and all I can figure out is to use MP4's in a very clunky video component that has to load each time I slap it up, can't be embedded ( I can't scrub the timeline to see where to put my code to stop/play ) and there seems to be even less code to interact with (just a pause/play feature but no jumping around, we used to use Graphic Symbols a lot for frame holds/plays). I know there's more .js libraries, and I have to brush up on that now.

But am I right in thinking at this current time, re-creating the content we used to make isn't going to be possible in the same manner? I'm about to cut the quality, remove all animated sequences, video, and just go for simplistic tweens of nobs, dials, and digital screens tweening fades of positions and whatever is on the screen.

I feel HTML5 and the tools that work with it are a bit immature, but our industry is freaking out about needing to convert all of our as2.0/3.0 content up to it. From a code stance, this seems easy but from delivering the same animated/interactive content it looks to be a challenge.

Any insight would be great, we've even looked at other tools but we're all rather stubborn and would like to stick to Animate of course.

I can provide an example if that would help, but I feel it's a fairly generic question.

Thanks!

    This topic has been closed for replies.
    Correct answer kdmemory

    Hi Chris

    I can understand your despair. But SWF and FLV and AS3 are on their way out. Support for Flash Player stops next year.

    So HTML5 and Javascript, huh? First, don't demand that everything you know does work the same way you were used to within the new framework. There is a need to adapt gradually and change styles and methods here and there.

    That what you did with PNG-stills, FLV-video in the timeline and graphic/button/movieclip instances in a constant interoperative way, that isn't that easy to replicate in HTML5.

    For a start HTML5 in Animate CC means Canvas. And the Video Component is outside the canvas ecosphere, so say floating on top of the canvas in the host HTML DOM. This is why one can't  "scrub the timeline to see where to put .. code to stop/play". This is something you have to accept, as hard as it may be.

    Nevertheless there are ways to work in similar ways as you used to do. I.e. you can display the video behind the stuff you are designing in the timeline (the canvas). There are two approaches as far as I know:

    • Using the video component, transparent stage background and z-index (see JoãoCésar's short description here - correct answer)
    • Using the DOMElement Class from EaselJS, createElement and addChild to create a kind of improvised video component (see ClayUUID's description here - 4th post on the page).

    I haven't tried ClayUUID's method so far. But what you say about "a very clunky video component", yes I agree. I too don't like it, first of all it loads a slightly outdated jQuery library and throws this warning:

    Use of Mutation Events is deprecated. Use MutationObserver instead. jquery-2.2.4.min.js

    It doesn't harm really, but it isn't good either.

    In both cases the video is running in/through a HTML5 video element. And there is quite an extensive API available to control such a video ( "jumping around" for instance ). See for a short overview HTML Audio/Video DOM Reference.

    This is by no means an answer to all your questions but maybe a start to lift your mood towards the new lands .

    Klaus

    3 replies

    avid_body16B8
    avid_body16B8
    Legend
    March 20, 2019

    I do E-learning too and I rarely use videos but when I do I usually have a button that will start the video and a pause button to stop it. I usually hide the video's native controls but sometime I allow them. It depends on what i am doing.

    I can make an example for this thread later but if you want an example of a simple fla I made, then PM me. In this one in particular I could have used to play directly when the video is chosen from a button, but I chose to have a play button and hidden pause button on the frame where the video resides. The videos are short so I do not have any flicker which could be related to the size of the file. I am not sure.

    C
    chrisd20923491Author
    Known Participant
    March 20, 2019

    Play/pause doesn't seem to have an issue. It's more when I swap from the poster image, or swap from video to video.

    Maybe it's because I use the timeline a lot more than using code?

    The environment that we use requires the use of frame labels to allow for an external LCMS to contact the HTML5 file and navigate around for E-Learning purposes.

    avid_body16B8
    avid_body16B8
    Legend
    March 20, 2019

    I feel your pain. Dealing with CANVAS can be a pain!

    kdmemory
    kdmemoryCorrect answer
    Inspiring
    February 13, 2019

    Hi Chris

    I can understand your despair. But SWF and FLV and AS3 are on their way out. Support for Flash Player stops next year.

    So HTML5 and Javascript, huh? First, don't demand that everything you know does work the same way you were used to within the new framework. There is a need to adapt gradually and change styles and methods here and there.

    That what you did with PNG-stills, FLV-video in the timeline and graphic/button/movieclip instances in a constant interoperative way, that isn't that easy to replicate in HTML5.

    For a start HTML5 in Animate CC means Canvas. And the Video Component is outside the canvas ecosphere, so say floating on top of the canvas in the host HTML DOM. This is why one can't  "scrub the timeline to see where to put .. code to stop/play". This is something you have to accept, as hard as it may be.

    Nevertheless there are ways to work in similar ways as you used to do. I.e. you can display the video behind the stuff you are designing in the timeline (the canvas). There are two approaches as far as I know:

    • Using the video component, transparent stage background and z-index (see JoãoCésar's short description here - correct answer)
    • Using the DOMElement Class from EaselJS, createElement and addChild to create a kind of improvised video component (see ClayUUID's description here - 4th post on the page).

    I haven't tried ClayUUID's method so far. But what you say about "a very clunky video component", yes I agree. I too don't like it, first of all it loads a slightly outdated jQuery library and throws this warning:

    Use of Mutation Events is deprecated. Use MutationObserver instead. jquery-2.2.4.min.js

    It doesn't harm really, but it isn't good either.

    In both cases the video is running in/through a HTML5 video element. And there is quite an extensive API available to control such a video ( "jumping around" for instance ). See for a short overview HTML Audio/Video DOM Reference.

    This is by no means an answer to all your questions but maybe a start to lift your mood towards the new lands .

    Klaus

      C
      chrisd20923491Author
      Known Participant
      February 13, 2019

      No, this answer is actually quite good. This is what I was thinking had to happen, we wouldn't be able to take the same approach we had taken in the past. We have idea's to remedy it, we're just exploring our options. We were given the chance to provide a proof of concept of for a small lesson. But as usual, everyone thinks there will just be a "Convert to HTML5 " button that magical will move roughly 2,500 FLA's into Canvas and all the code and functionality will be the same. That's the next project we're ramping up, so providing a much clearer idea of the level of effort is needed.

      Thank you for the quick reply, I will check out the DOMEElement Class and other idea's you posted. But this helps support my original findings that at the current state, we won't be able to just simply re-use what we did 1:1. I even noticed that it strips all the .flv's out of your library, and leaves the movie clips empty. It makes sense, but it's confusing when you first try to do it.

      Thanks again.

      C
      ClayUUID
      Legend
      February 13, 2019

      Note that unless you need any of the functionality that CreateJS's DOMElement interface provides (I personally never have), you can go even more bare metal than in the above-linked thread:

      // Create a DIV layer above the canvas

      // Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

      // CSS styling is a CSS-formatted literal string

      mkDiv = function(id, x, y, w, h, html, css) {

          var d = document.createElement("div");

          d.id = id;

          d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

          d.innerHTML = html;

          canvas.parentNode.appendChild(d);

      }

      // Remove an element by ID name

      rmDiv = function(id) {

          try {

              var elem = document.getElementById(id);

              elem.parentNode.removeChild(elem);

          }

          catch(e) {}

      }

      The basic idea is that you float a fixed-position, fixed-size DIV over the canvas element, then populate that DIV with whatever HTML elements you want. Media players, rich text, etc. The downside is that the Animate timeline has no idea the DIVs are there, so you have manage their visibility yourself. Also, just like with Animate's HTML components, they don't scale along with the stage. If you need them to scale, it's possible, but rather complex, and involves wrapping everything in a master container that then has CSS scaling applied to it.

      However, I suspect that using HTML5 video for the specific application required in this thread (animated controls) would work rather poorly, since browsers have a lot of control over how native video is queued, streamed, seeked, auto-played, etc. Chrome and Safari in particular like to screw with how the spec says media elements should behave, all in the name of user experience and data usage. If these knob videos aren't too high-res and/or too long, I'd recommend instead trying to import the video sequences as a series of still JPG images, each in its own movie clip.

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      February 13, 2019

      adobe animate can create html5 applications that contain video.

      adding timeline content that overlays the video is problematic but otherwise should work for you or, at least, deserves a test.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices