Coverting Flash Videos to HTML5 using Components

Report · Aug 03, 2017

Dear Community,

we are facing the following situation and I want to get your opinion how we should approach it. In general we want to convert Flash Training Videos into HTML Canvas projects. So far so good. We are using the Animate CC Converted and all the animations work fine. Still in our Flash Videos there are Flash Components and I will try to illustrate by looking at two simple components: Labels and Buttons.

Labels.

So labels seems simple as there is already a HTML Label Component available. As far as I can remember the an_Label Component creates a <label> HTML element and attaches it to the dom. We are fine with that, only that some effects get lost as they are always on top and some transitions are not working anymore. I noticed that when using createjs.Text() the labels have the expected behavior but replacing:

this.instance = new lib.an_Label({some json object});

this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)

with

this.instance = new function() {

var item = new cjs.Text("Study Design", "35px 'Arial'", "#FFFFFF");

return item;

};

this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)

does end up in the text being completely different in sizing. In our project we need to consider automation of all converting steps so we need to keep that in mind as well. First question is why does Animate produce this transformation: this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1). It will scale the text very largely and that prevents us from using the createjs Text.

Buttons

Imaging we have a movie clip with a button that has a hovering effect and mouse down effect in Flash and something happens when I click on the button. It was built as a flash component. I now need to convert this into a Canvas compatible component. Ideally I leave the graphics and all to Animate and let it convert it but I need to rewrite the code with the hovering and the mouse down and the action in Javascript. There is no option to modify the resulting Javascript because remember we need to automate this. Our approach right now is to save the Canvas project as XML then modify the DOMComponentItem from the corresponding XML file and then be able to access the Button in our component.

In general I did a bit of research in the forum and I keep reading that native Canvas Components are not yet available in Animate. I am not familiar enough yet to understand what this means for our project. My idea was to change new lib.an_Label({some json object}); to something like new lib.myCreateJSLabel({some json object}) that produces a createJS Text item and returns it into the main JS file. Similar with the button I wanted to create a component new lib.myCanvasButton({some json object}); to manipulate the button. Am I overlooking something or will this work?

Thanks for your Help

Report · Aug 03, 2017

i've never found a reason (in a swf, air or canvas project) to use a button component or a label component. there are, at least, two reasons to avoid them:

1. they are more difficult to customize than a movieclip button/movieclip label that you make yourself

2. there's no benefit/time savings to using those components

Report · Aug 04, 2017

Are you saying you make your changes in Animate itself? My question was more going towards automation and conversion. How can we convert a movie clip having a button programmed with hover and mouse down effects and a mouse down event into HTML5? And there is no option to manually go into animate and insert Javascript code, we want to somehow manipulate XML files and make use of components I guess or automate the modification of Javascript.

Report · Aug 04, 2017

there is no reliable program/tool that automates the conversion of swf's to html5.

Report · Aug 04, 2017

I understand that. But our goal is to create such a tool for our videos at least. Let me ask the following question about Flash Videos taking one example.

If I look at the stage and the library I can see that there is an object which I can identify to be a Movie Clip. It has a linkage set so I am guessing that makes it a Flash Component. To simplify this lets say this linkage has Actionsscript code to simply stop the Movie Clip from playing. When I save the Flash Movie as XML I see the following when I look at this component:

<DOMTimeline

...

When I compare this to a HTML Component from Animate that works I can see in difference this:

<DOMComponentItem...">

</persistentData>

<DOMTimeline

...

Now it would be easy for us to add this persistentData tags in an automated fashion to the XML. The question is not inside of the Javascript component that is referenced in PD n="source" will I be able to manipulate the movie clip and stop it from playing?

The other question was why it is that when I replace

this.instance = new lib.an_Label({some json object});

this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)

with

this.instance = new function() {

var item = new cjs.Text("Study Design", "35px 'Arial'", "#FFFFFF");

return item;

};

this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)

That the location and the size of the label is completely off?

Thanks

Report · Aug 04, 2017

koljae74221351 wrote
The other question was why it is that when I replace
this.instance = new lib.an_Label({some json object});
this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)
with
this.instance = new function() {
var item = new cjs.Text("Study Design", "35px 'Arial'", "#FFFFFF");
return item;
};
this.instance.setTransform(135.7,136.1,5.664,1,0,0,0,49.9,50.1)
That the location and the size of the label is completely off?

Because the jQuery UI and canvas text APIs are completely different. One generated DOM text floating above the canvas, while the other draws text directly to the canvas bitmap. It would be astonishing if they matched.

Coverting Flash Videos to HTML5 using Components

1 Correct answer