Introduce KafeComponent – Part 1

开发KafeComponent陆陆续续有两年的时间了。设计的初衷源自于一个动画师普遍的需求:每次用MovieClip做按钮都要绑定类,相当繁琐而且不便于修改。后来受到Progression框架里提供的组件的启发,改用复合的编程方式来进行开发。再后来又借鉴了Reflex里关于behaviors的思路,再一次进行了大规模的重构。Big Spaceship的display包也给我了很大的启发。一步步发展到今天这个比较稳定版本。

从最初的需求上就决定了这套组件与Flash自带的组件或者ASWing之类的组件的不同之处。我的目的就是为了能够让设计师延续自己的工作习惯,在不需要接触任何代码的情况下就能实现大部分的效果,同时程序员也能避免大量的重复劳动。这也正契合了我所推崇的SWC工作流程。所以在相当长的一段时间里,KafeComponentRobotGaiaAnt都是平行开发的。

前面废话了那么多,我们还是赶紧来看看这套组件提供了些什么功能吧。

首先到下载页面下载最新版本的zxp文件。下载完成后双击打开Adobe Extension Manager完成安装。

注意!中文系统下的Adobe Extension Manager有个bug。如果你安装完以后在Flash IDE里面找不到KafeComponent的话。请到以下目录手动把zh_CN下的文件复制到en_US:

Windows: C:\Users\[your username]\Local Settings\Application Data\Adobe\Flash CS5\en\

Mac: /Users/[your username]/Library/Application Support/Adobe/Flash CS5/en/

KafeComponent安装完成后会在Commands菜单下生成一个Kafe命令包。在组件面板下也会有对应的组件,主要分为两个包:kafekafeUI。以下我们用两个视频教程来分别演示一下基本的使用方法。在墙外的朋友请直接打开这两个链接12

从这个教程中我们可以看到Kafe组件虽然被添加到时间轴上,但是不会在最终文件中呈现出来。实际上这个组件只是个包含行为逻辑的空显示对象。设计师只需按照这个规范,用自己熟悉的方式来制作和放置对象就可以了。

KafeUI包下的组件和Flash自带组件类似,需要设计师在时间轴上进行定位和大小调节的,这些位置和尺寸信息会被反应到最终的呈现上来。

对设计师来说,一切就是这么简单。在第二部分,我们将具体介绍KafeComponent面向开发者又提供了哪些功能。

KafeComponent下载页面

教程源文件下载

 

7 thoughts on “Introduce KafeComponent – Part 1

  1. RoughRabbit

    Hi,
    It is a little tricky for me to understand the google translation of your chinese – and follow the video, but I do my best… Can you give me please any tips as to how the GaiaKafe button works?

    Many thanks

    1. Kevin Post author

      It just like KafeButton, the difference is the “branch” property you can set in the panel, which you can tell the Gaia system to go to that branch(Gaia.api.goto(branch)) without writing one line of code.
      It’s useful for navigation and internal links.

  2. banwenxiaoyu

    在win7中文系统下 按钮组件不能使用 拖不出来 拖出来是空的 , 不知道是不是我个人问题,在公司的英文系统中良好,谢谢,我已经把zh文件夹考不到en了

    1. Kevin Post author

      我在win7 64位中文系统下测试没问题啊。
      不知道你说的拖出来是空的是什么意思?场景上就没有还是发布的时候出错?

      1. banwenxiaoyu

        不是发布错误 , 就是拖不出来,怎么拖场景上都是空的,奇怪,可能是我个人电脑问题?有可能是我是win7 32位的 会不会是这个问题?

Comments are closed.