Skip to main content
koljae74221351
Participant
August 3, 2017
Answered

Coverting Flash Videos to HTML5 using Components

  • August 3, 2017
  • 1 reply
  • 436 views

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

This topic has been closed for replies.
Correct answer kglad

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

1 reply

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
August 3, 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

koljae74221351
Participant
August 4, 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.

kglad
Community Expert
Community Expert
August 4, 2017

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