将Flash组件和9切片缩放转换为HTML5画布

时间:2014-03-31 14:32:42

标签: flash html5-canvas haxe

我正在尝试帮助我们的设计师将他们的GUI资源导出到HTML5画布,但他们可以在Flash Pro中继续处理这些资产。资产是“愚蠢的”,因为它们不包含任何JavaScript,例如。图标中的时间轴用于将鼠标悬停与鼠标移出等等,每个帧可能具有本地动画。但一般而言,GUI中的所有应用程序可观察状态都是由Flash Pro外部的Haxe中编写的应用程序代码控制的。

有像CreateJS这样的工具,但设计师使用的是组件,9切片缩放,字体等等,我们尝试过的工具无法处理这些工具。

那么你如何继续在Flash Pro中工作,但仍然在HTML5画布上使用这些功能:

  • 的ScrollPane
  • 组合框
  • 列表
  • 的TextArea
  • 的TextInput
  • 9切片缩放
  • 字体

我已经使用examples of using generated JS在Illustrator中看到了替代Ai2canvas plugin,但我担心这个过程中的流程是因为

  • 一方面,GUI的整体设计被推入编程领域,因为GUI需要由精通编程的人设置和控制,这通常会排除很多设计师。
  • 另一方面,在设计整个GUI概述的各个组件时,典型设计师必须在较低级别工作。

我将如何在Haxe中做到这一点?

2 个答案:

答案 0 :(得分:0)

这只是我的意见......不要用箭头把你的设计师送给我!

我认为您不会继续使用Flash Pro并使用Html5画布创建GUI组件。

我不是Flash专家,但我非常了解Html5画布。

从我的角度来看,Canvas并不是开发GUI组件的好框架。

Canvas是一个显示工具,而不是信息收集工具。 Canvas存在使像素跳舞而不是收集用户信息而不是偶尔的鼠标事件。 Canvas在提供信息方面表现突出,但在接收信息方面很糟糕。

所以恕我直言,一个Flash-to-Canvas组合将不满意,所以:

  • 坚持使用FlashPro,直到市场挤出你。

  • 使用CreateJS + Zoe导出swf,并使用CSS定位和设置样式的本机HTML GUI元素来收集用户信息。原生Html GUI元素是一个通用的&以各种方式收集信息的稳定方式。并且“这些不是你的祖父 - html元素(!)”。今天,CSS可以提供​​几乎可以满足您需求的各种定位和样式。

我自己的底线:不要用螺丝刀砸钉子。选择最适合工作的工具组合。

再次,只需2美分: - )

无论如何......我有一些代码可以在Canvas上进行9切片,如果你需要的话 - 请告诉我。

答案 1 :(得分:0)

一种选择是使用HaxeUI简化构建组件https://github.com/ianharrigan/haxeui。它几乎具有您列出的所有功能,可以节省您的编程时间。

至于从Flash Pro导出的某种方式,您可能需要研究构建插件。 CSSDK是免费的,可用于在AS3中构建面板。我已将它用于InDesign,虽然它可能不是最完善的SDK,但它可以让您控制应用程序。我相信也有javascript脚本可能也很有用。