问题
I am trying to help our designers export their GUI assets to HTML5 canvas, but in a way that they can keep working on these assets in Flash Pro. The assets are "dumb" in the sense that they do not contain any JavaScript, eg. the timeline in icons is used for separating mouse-over from mouse-out, and so forth, and each frame might have local animations. But in general, all application-observable state in the GUI is controlled from the application code written in Haxe, outside of Flash Pro.
There are tools like CreateJS, but the designers use Components, 9-slice scaling, fonts, etc. which cannot be handled by the tools we have tried.
So how do you keep working in Flash Pro but still use these features on an HTML5 canvas:
- ScrollPane
- ComboBox
- List
- TextArea
- TextInput
- 9-slice scaling
- Fonts
I have seen alternative examples of using generated JS from Illustrator using the Ai2canvas plugin, but I am worried about the flow in such a process because
- On one hand, the overall design of the GUI is pushed into the programming realm because the GUI needs to be setup and controlled by someone programming-savvy, which usually excludes many designers.
- On the other hand, the typical designer will have to work at a lower level when designing the individual components outlined by the overall GUI.
And how would I go about to do this in Haxe?
回答1:
This is just my opinion...Don't send your designers at me armed with pencils!
I don't think you keep working in Flash Pro and create GUI components using Html5 canvas.
I'm no Flash expert, but I know my way around Html5 canvas fairly well.
From my perspective, Canvas is not a good framework for developing GUI components.
At its roots, Canvas is a display tool and not an information gathering tool. Canvas exists to make pixels dance and not to collect user information beyond occasional mouse events. Canvas is outstanding at presenting information but lousy at receiving information.
So IMHO, a Flash-to-Canvas combo will be unsatisfying, so either:
stick with FlashPro until the market squeezes you out.
Export what swf's you can with CreateJS+Zoe and use native HTML GUI elements positioned and styled with CSS to gather user information. Native Html GUI elements are a universal & stable way of collecting info in the variety of ways you require. And "these-are-not-your-grandfathers-html-elements(!)". Today, CSS can provide positioning and styling in varieties that almost certainly fit your needs.
My own bottom line: Don't pound nails with a screw driver. Pick the best combination of tools for the job.
Again, just by 2-cents :-)
Anyway...I have some code that does 9-slicing on Canvas if you need it--let me know.
回答2:
One option would be to use HaxeUI to simplify building components, https://github.com/ianharrigan/haxeui. It has almost all of the features you listed and should save you programming time.
As for some way of exporting from Flash Pro you might want to look into building a plugin. The CSSDK is free and can be used to build panels in AS3. I've used it for InDesign and while it's maybe not the most well documented SDK it is very powerful in giving you control over the application. I believe there are also javascript scripts that may be useful to look at as well.
来源：https://stackoverflow.com/questions/22764384/conversion-of-flash-components-and-9-slice-scaling-to-html5-canvas