简单的Flash GUI工具  40

代码: 用最小的比较快AS3原型

更新:基思自己一直致力于类似的想法,并释放 MinimalConfigurator 。

基思·彼得的 最小的组件 任何Flash开发人员来说是一个非常好的工具时添加实时配置SWF。 我发现自己使用它们在我的演示和原型但与许多编辑草图参数仍然是一个麻烦写样板代码设置和安排组件,以及添加适当的事件处理程序。

灵感来自等OpenFrameworks GUI工具 ofxSimpleGuiToo 和 ofxTweakbar , ControlP5 处理,我想是时候有一个同样快速和容易使用GUI工具Flash AS3的项目。

引入SimpleGUI

SimpleGUI AS3项目是一个类实用程序设计,开发人员需要迅速将UI控件变量或函数添加到一个草图。 属性可以控制只有一行代码使用各种奇妙的组件 最小的比较 集,以及自定义组件为SimpleGUI如写的FileChooser 。

SimpleGUI目前公开下列方法,以及开放 addControl 方法可以传递任何类定义:

• addColumn :开始一个新列的组件
• addGroup :开始一个新组的组件
• addLabel :添加一个文本框标签或说明
• addToggle :为布尔值添加一个复选框
• addButton :添加一个按钮触发回调
• addSlider :创建一个滑块数值
• addRange :创建一个滑块两个数值范围
• addStepper :另一个组件的滑块数字
• addColour :添加一个颜色选择器为整数
• addComboBox :任何对象添加一个下拉列表框盒
• addFileChooser :允许用户加载数据
• addSaveButton :这个触发器生成代码的保存方法

其他功能包括:

• 热键 :显示/隐藏分配热键GUI
• 上下文菜单 从上下文菜单项:切换GUI
• 消息 :脉冲工具栏中的消息给用户
• 显示切换 :显示GUI时切换隐藏的
• 保存设置 :生成AS3代码提交你的当前值

使用SimpleGUI

每个方法接受一个可选的参数 选项 ,这是一个简单的动态对象,您可以传递任何参数的值对应的组件,以及 回调 和 callbackParams 每次组件属性触发方法的变化。

例如,要创建一个滑块控制一个数字,设置它的宽度、执行回调并显示一个自定义标签,你会写:

_gui.addSlider("myNumber", 0, 100, {label:"My Number", width:200, callback:onNumberChanged});

虽然可以通过自定义标签,每个组件,省略此参数会导致变量名称解析和使用的标签。 例如,一个变量“myNumber” 将生成的标签 “我的号码” 。

SimpleGUI还支持嵌套属性,任何深度,使用普通点语法。 所以你可以控制一个粒子的位置通过编写:

_gui.addSlider("myParticle.position.x", 0, 1000);

这里的代码 演示 以上。 只有27行代码来控制整个草图。

_gui = new SimpleGUI(this, "Example GUI", "C");_gui.addGroup("General Settings");
_gui.addColour("backgroundColour");
_gui.addButton("Randomise Circle Position", {callback:positionCircle, width:160});
_gui.addSaveButton();_gui.addColumn("Noise Options");
_gui.addSlider("noiseBase.x", 10, 200);
_gui.addSlider("noiseBase.y", 10, 200);
_gui.addSlider("noiseSeed", 1, 1000);
_gui.addSlider("noiseOctaves", 1, 4);
_gui.addSlider("turbulence.x", -10, 10);
_gui.addSlider("turbulence.y", -10, 10);_gui.addGroup("Wave Options");
_gui.addStepper("waveCount", 1, 20);
_gui.addStepper("waveSteps", 2, MAX_WAVE_STEPS);
_gui.addSlider("amplitude", 0, 200);
_gui.addColour("waveColour");_gui.addColumn("Circle Options");
_gui.addRange("minCircleSize", "maxCircleSize", 10, 120, {label:"Circle Size Range"});
_gui.addSlider("rotationSpeed", -10, 10);
_gui.addComboBox("circle.blendMode", [{label:"Normal",  data:BlendMode.NORMAL},{label:"Darken",   data:BlendMode.DARKEN},{label:"Overlay",  data:BlendMode.OVERLAY},{label:"Difference",  data:BlendMode.DIFFERENCE},]);_gui.addFileChooser("Circle Texture", textureFileRef, textureLoaded, [new FileFilter("Image Files", "*.jpg;*.jpeg;*.png")
]);_gui.addToggle("animateCircle");_gui.addColumn("Instructions:");
_gui.addLabel("Press 'C' to toggle GUI");
_gui.addLabel("Press 'S' to copy setup code to clipboard");_gui.show();

所以,SimpelGUI其实就是一个节省时间的开发人员希望快速原型在闪光的东西,或与控制释放演示。 实际的努力工作已经完成 基思 在构建和维护他理所当然地受欢迎 最小的比较 。

你可以浏览 源代码 或下载 SimpleGUI 下面的类。 SimpleGUI的一部分 Soulwire AS3框架 。

下载: SimpleGUI