Making HTML Templates from Existing Flash Templates

General
1

Hello,

We currently have all flash based templates running with 2.0.7. however we would like to migrate all of these templates to HTML for rolling into 2.2. I am no longer a part of the studio I was when I was originally learning and working with Caspar, and I have handed off all the work to another one of the people there, however I am still giving him some help. While I know nothing of HTML, my understanding is that all the graphics are made through text instructions inside the HTML template, which defines text, shapes, colors, etc.

We already have rendered .png sequences for all of our Flash-based graphics, and was wondering if it was possible to use these png sequences as the templates to be used in HTML. Is this possible, or am I completely misunderstanding this?

Thank you,
Jack

2

Is there a technical reason to migrate the existing templates?

1 Like
3

Not so much technical as it is we want to ensure all the graphics stay the same with their animations and effects when we copy over.

4

Without knowing what the templates do there is no way of estimating how much effort it would take to migrate them from Flash/AS to HTML/JS. But if you have someone with knowledge of both Flash/AS and HTML/CSS/JS it should be a breeze.

Regarding the PNG sequence, you should simply convert the seq. with ffmpeg to VP9 with alpha and use them in in HTML and control them from JS. They will be 1/10th the size and perform much better.

1 Like
5

Just to follow up on what Hrein said about the PNG Sequences in HTML templates. You could add them many different ways but I would suggest either…

Requiring all the PNG images in the HTML as <img> tags and setting all but the first’s images opacity to 0. I found this works the best for wipes and animations that only play once then get killed. But, the down side is, depending on your system, there may be a few dropped frames on any playing animations while the other template loads.

A more dynamic but also potentially risky way is to use requestAnimationFrame to change the source of the image tag every time a new frame needs to be drawn. Here is the MIND Link to learn more.

And a small example of request animation frame.

const img = document.querySelector('img');

// The folder the Web server is serving the images from
const imgPath = 'http://localhost:8080/images/IMG_FOLDER/';
// The wipe I was recalling has 78 frames
const totalFrames = 78;
// It is a total of 2.25 seconds
const animationDuration = 2250;
// How much time each frame needs to be displayed
const timePerFrame = animationDuration / totalFrames;

let timeWhenLastUpdate;
let timeFromLastUpdate;
let frameNumber = 0;
   
const runWipe = startTime => {
    if(!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
    timeFromLastUpdate = startTime - timeWhenLastUpdate;

    if(timeFromLastUpdate > timePerFrame) {
         // Fixing the trailing 0's for the PNG file
         if(frameNumber < 10) {
             index = '000' + (frameNumber);
         } else {
             index = '00' + (frameNumber);
         }
         img.src = imgPath + `YOUR_PNG_FILE_NAME${index}.png`;
    }

    if(frameNumber < totalFrames) {
        frameNumber++;
        window.requestAnimationFrame(runWipe);
    }
}

Please let me know if this helped any. And, if anyone has a better way to do this, please let me know!