Coverting Flash Videos to HTML5 using Components
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
