Animate Canvas (HTML5)

[chrisd20923491]

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!

[kglad]

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.

[kdmemory · Accepted solution]

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

[chrisd20923491]

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.

[ClayUUID]

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.

[chrisd20923491]

This JoãoCésar's is exactly what we were looking for! Being able to slap elements ontop, so far that works great.

The struggle right now is how video is loading. Because we're trying to load either one big clip or multiple small clips. The transition between them causes a flicker or you have to let the video play out.

So now that I've had time to really mess around with this, I have one main question as the rest seems to be fairly straight forward.

I would really like to have the video load the first frame, pause, and then wait for the under to interact with the video. So far I can't seem to do that. Autplay obviously autoplays, but it does load. But if I autoplay and pause on frame 1, it pauses before it can load. If I manually adjust it by going to frame 5 and pausing, it sometimes works. It depends, Chrome it works sometimes, Firefox, IE11 it's a bit slow. Our major client will be using the Chrome Browser but it seems unreliable method.

I was tossing in a .PNG/JPEG and hiding the loading/transitioning as well. But it's sort of a laborious task that feels wrong.

Thanks everyone for the responses so far. My origins are of a multimedia/3d developer so diving into the idea of having to slap more code into files is a bit daunting but it's becoming easier to grasp. I feel my career is going to throw me into it more as we're gearing up to re-deliver an entire project on a cloud based system.. so it has to all be WEBGL/HTML5.

EDIT:

I tried using the poster image, but it still flicks the screen to white when transitioning between poster image and video. Seeing there's some sort of code to drag a poster image from  videos?

[JoãoCésar]

Hi.

If I understand correctly, what you want is a way of playing the timeline and/or interacting with stuff after the video finished loading, right?

If so, check for the video state and then do what you need. A function like this may be what you need:

var tl = this;
tl.checkVideo = function(name, callBack)
{
    setTimeout(function()
    {
        dom_overlay_container.children[0].children[name].addEventListener("playing", function(e)
        {
            if (callBack !== null)
                callBack();
        });
    }, 0);
};

You can then call the function like this:

var tl = this;
tl.stop();
tl.checkVideo("video0", function() // "video0" is the instance name of your video component
{
    // play the timeline
    // allow click
    // whatever else needed
});

Please let us know if this is what you are looking for.

Regards,

JC

[chrisd20923491]

So I have this code in, but I must be doing something wrong because it's not really doing much.

This is a .FLA that is empty of media, but you can get an idea of what's going on.

Dropbox - TestVideo.fla

To put it simply, I need to show a video, stop. Have a highlight appear, click the highlight/hitbox, and then continue playing the timeline.

Currently I have the video behind with the code you put up about moving the canvas back in Z, and then turning off the cursor for it. But now the cursor won't work on my non-canvas elements. Plus, yes, there was a problem with transitioning fromt he poster image to a video, or video to video and the screen flickering.

I hope that makes it a bit more clear, and a source file makes it easier. If dropbox isn't an option I can upload it in another manner.

Using Adobe Animate CC Version 19.1

Appreciate it!

[resdesign]

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.

[chrisd20923491]

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.

[resdesign]

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