芃恺的小筑

First snow

kaman@live.com(pengkai) — Sun,27 Dec 2009 19:17:18 +0800

haha , snowing... the first snow @ this city.
花了点时间更新了一下首页 :-) enjoy.

触屏界面的按钮文本设计原则

kaman@live.com(pengkai) — Thu,19 Nov 2009 21:50:20 +0800

网上淘得一简短但实用的文字，看图说话即可。同样适用于广大的PC屏幕。
以下译文↓

一幅画可能包含了千言万语，但是一个用户界面却需要用简洁的语句明确地告诉用户该做什么。因此决定哪些文字应该出现，哪些文字应该是界面设计非常重要的一部分。以下是四个适用于触摸屏界面的文本添加原则，遵循这些一定有助于提升界面的可用性。

原则1

用动词来描述一个按钮是用来做什么的。
如果不是直接用动词描述，用户可能会感到困惑，并且增加学习的成本。所以"OK"和"Cancel"并不是最佳选择，“Yes”和“No”则更差。

原则2

把文本的重点放在最前面的12个字符上
（注：12个字符是英文，对于中文来说可能就是三四个字）。人们阅读地时候总是扫描文字，所以大家可以比较一下这两句话：

“您正要进行关机，确认吗？”
“关机吗？”

同样的意思但是哪一句您阅读地更快呢？

原则3

按钮的文本应该置于按钮本身而不是列在旁边。
研究显示多数触摸屏用户会触碰按钮的下半部，所以我们也建议把文字从垂直居中的位置上提一点，这样用户在按下按钮的同时，文本不容易被手指遮挡。

原则4

减少重复。
如果在一组按钮中一样的文字不断重复，那就把这些按钮放到一组，用一个标题来简化文本内容。或者有些情况下可以直接去掉这些重复的文字。这有助于帮助你的用户快速定位他需要进行的操作。

实际情况中我们不可能永远应用这四点，但是完全可以把这些思想灵活运用在界面设计中。

原文链接：Labeling Touchscreen Interfaces
译者：JJ.Ying

情系人人·感动常在

kaman@live.com(pengkai) — Tue,27 Oct 2009 19:30:27 +0800

看了人人的宣传片，让我感动了一把。
改变·坚持·联系·信任

Flash动画

在线播放

Flash player's BUG - stageWidth & stageHeight

kaman@live.com(pengkai) — Mon,12 Oct 2009 00:34:54 +0800

bug概述：
flash在生成以后其stageWidth和stageHeight属性的值为0.

为了更直观的查看效果，我们添加一个TextFiled对象到显示列表并设置它的x、y分别为舞台水平、垂直中心（舞台中心）。

 程序代码

代码片段：
TXT.x = stage.stageWidth/2;
TXT.y = stage.stageHeight/2;
trace(TXT.x,TXT.y); //0,0

发现TXT的位置并没有在舞台中心。而是在(0,0)处。

在网上淘到一篇资料，说是flash player的bug 。
bug解决办法：

引用内容

触发stage的Resize事件，即可返回正常值。

 程序代码

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE,onResize);
private function onResize(e:Event):void{
   trace(stage.stageWidth,stage.stageHeight);//550,400 舞台默认大小
}

资料：

引用内容

Stage RESIZE and the stageWidth and stageHeight Bug
while ago, I came across a situation where my Flash application would launch but the stage.stageWidth and stage.stageHeight properties would always return 0 within my document class’s constructor. As I needed to access those properties at runtime and I did not want to hardcode those values to a pair of variables, it drove me to seek an answer to this problem.

Turns out that when the stage is initialized, its stageWidth and stageHeight properties are 0 until a Stage RESIZE event is triggered. This event is dispatched when the scaleMode property of the Stage object is set to StageScaleMode.NO_SCALE and the SWF file is resized ie. when the stage is rendered by the Flash Player. So if you need to add a display object onto the stage and its positioning is dependent on the stageWidth or stageHeight properties at runtime, it’s best handled by a listener that is subscribed to the Stage RESIZE event.

Interestingly, despite universal claim that the Flash Player behaves exactly the same on all browsers, this problem only appears in a couple of browser/plugin configurations, namely FireFox/OSX and IE/Win. And strangely, on Safari and Firefox/Win, the RESIZE event is not even dispatched on page load, and neither does the Flash Player register the stageWidth and stageHeight properties as being 0. I have not tested the problem on other platforms but you are certainly welcome to do so yourselves and report your observations in the comments section. Eventually, it would be nice if we can get a straight answer from Adobe concerning this bug.

In the following demo code, I’ve attached a Sprite containing a Rectangle graphic and a TextField, to the stage once before the RESIZE event and once, after. You can see the results here.

 程序代码

package
{
  import flash.text.*;
  import flash.display.*;
  import flash.events.*;

  public class Demo extends Sprite
  {
    private var rect1:Sprite;
    private var rect2:Sprite;

    public function Demo()
    {
      rect1 = createNewRect("Before stage resize event.");
      rect1.x = 0;
      rect1.y = 0;
      addChild(rect1);

      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      stage.addEventListener(Event.RESIZE, resizeHandler);
    }

    private function createNewRect(str:String):Sprite
    {
      var rect:Sprite = new Sprite();
      rect.graphics.beginFill(0x99CCFF);
      rect.graphics.drawRect(0, 0, 200, 100);
      rect.graphics.endFill();

      var fmt:TextFormat = new TextFormat();
      fmt.font = "Arial";
      fmt.size = 12;

      var tf:TextField = new TextField();
      tf.width = 200;
      tf.height = 100;
      tf.multiline = true;
      tf.defaultTextFormat = fmt;
      tf.text = str + "\n" + "stage.stageWidth: " + stage.stageWidth + "\n" +
            "stage.stageHeight: " + stage.stageHeight;

      rect.addChild(tf);
      return rect;
    }

    private function resizeHandler( event:Event ):void
    {
      if (rect2 != null && contains(rect2)) {
        removeChild(rect2);
      }

      rect2 = createNewRect("After stage resize event.");
      rect2.x = (stage.stageWidth - rect2.width) / 2;
      rect2.y = (stage.stageHeight - rect2.height) / 2;
      addChild(rect2);
    }
  }
}

查看:http://hubflanger.com/stage-resize-and-the-stagewidth-and-stageheight-properties/
更新：
在初始化的时候加入stage.dispatchEvent(new Event(Event.RESIZE));
即可实现初始化时就调度Resize事件。
http://www.kirupa.com/developer/as3/resizing_centering_as3.htm

FDT+Eclipse 开发环境搭建

kaman@live.com(Kaman) — Mon,21 Sep 2009 22:40:44 +0800

今天感叹一句，FDT(Flash Development Tools)确实很强大！得益于Eclipse的支持，代码提示、折叠功能很好用。

1.安装Eclipse
Eclipse 无需安装，下载完成解压即可使用。
官方下载：http://www.eclipse.org/downloads/
请选择Eclipse Classic版本，目前最新的是3.5.0 (162 MB)

2.安装FTD
这里我们选择在线安装。打开Eclipse，工具栏 Help – Install New Software
在弹出的窗口中 work with栏填入：http://fdt.powerflasher.com/update
Type filter text 填入: FTD
稍等片刻，下面的列表框会出现如下选项，这里我们选择 FDT Professional 专业版。

Next以后就会出现下载进度，稍等片刻，等待下载完成即可。
完成以后会提示重启Eclipse.

3.选择配置
Eclipse默认的是Java开发环境，我们现在改成FDT开发环境。
点击右上角的加号
在弹出的窗口中选择Flash FDT
(图片系成功安装之后的演示操作，和未安装前略有不同)

至此我们就可以进行Flash的AS编码开发了。
在左侧Flash Explorer中点击右键 New – New Flash Project 新建Flash项目

其他详细功能研究中。

附：FDT注册码
Name: snowkit.cn
Code: x0tbr0m4qs31434u855s618eh6p37klb35p86ik1626765t77644pt

FDT常用快捷键：

引用内容

Ctrl+/ 打开代码提示（需要代码提示时按此快捷键即可）[以下摘自网络]

Ctrl + Shift +L：显示所有可用的热键

F3：打开声明

F4：打开类型层次结构

F5：打开超级实现

CTRL +SPACE：内容协助

Ctrl +1 ：快速协助

Ctrl + Shift + O ：组织导入

Ctrl + Shift +F：自动格式化[ 20 ]

Ctrl + Shift + R：打开资源

CTRL + R：参考搜索（专业版）

CTRL + T：快速类型层次结构（专业版）

CTRL + O ：快速大纲（专业版）

CTRL + U ：快速查看文件中出现的位置（专业版）

Ctrl+Shift+D：复制一行

Ctrl+D：删除一行

Alt+Shift+R：重命名

Ctrl+7：注释行

欲了解更多请下载官方帮助文档：
官方下载：http://fdt.powerflasher.com/blog/wp-content/fdtuserguide.pdf

发现一篇简易教程，不过版本有点旧，安装过程有点不太一样，但大致如此可以参考。
http://eidiot.net/lessons/fdt/index.htm

用Flash播放GIF动画

kaman@live.com(Kaman) — Sat,19 Sep 2009 00:00:08 +0800

今天看到这个太兴奋了。flash终于可以加载并播放gif动画了。

项目地址：http://code.google.com/p/as3gif/

主要内容：
  •GIF解码器（GIFDecoder）
  •GIF编码器（GIFEncoder）
  •GIF播放器（GIFPlayer）

使用方法：

 程序代码

package {
    import flash.display.Sprite;
    import flash.net.URLRequest;
 
    import org.gif.player.GIFPlayer;
 
    public class GIFPlayer_Test extends Sprite {
 
        public function GIFPlayer_Test() {
            var myGIFPlayer:GIFPlayer = new GIFPlayer();
            addChild(myGIFPlayer);
            myGIFPlayer.x = 50;
            myGIFPlayer.y = 50;
            myGIFPlayer.load(new URLRequest("test.gif"));
        }
    }
}

效果演示：可上传本地gif动画，看看效果。

Flash动画

在线播放

资讯来源：http://www2.flash8.net/teach/7866.htm

自定义你的YUI Reset CSS

kaman@live.com(Kaman) — Wed,16 Sep 2009 21:36:28 +0800

Q:什么是YUI Reset CSS？
A:顾名思义,其是 Yahoo! User Interface Library出品的一个CSS

Q：它的作用是什么？
A：作用很单纯，重置(reset)浏览器的默认样式。例如ul li 在IE 和Firefox下的默认margin值是不同的，使用YUI Reset CSS可以让各个浏览器默认值相同，这样页面各个元素默认显示的效果就相同了。

Q：如何使用？
A：粘贴代码到你的CSS文件的最上部分。

以上都是简单的使用。下面来说说为什么要自定义。
我们拿标签来说明，实际的效果是加粗显示。但是在YUI Reset CSS 中标签失去了加粗的作用。
从页面显示效果来看，并没有起到作用，我个人觉得这不是很合理，大多数情况下我们加就是为了使字体加粗显示，如果你需要其他的效果完全可以在CSS中单独定义。这种情况在站点比较大的情况下尤为重要，所以我觉得还原它们原有的表现比较好。同样的,还有（用来斜体显示）。
通常，我都会把和从YUI Reset CSS中去除。当然最终还要看个人习惯自定义你的YUI Reset CSS。

附：YUI Reset CSS [ 原汁原味，未经自定义 :-)  ]
程序代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

YUI Reset CSS 官方链接：http://developer.yahoo.com/yui/reset/

一道面试题

kaman@live.com(Kaman) — Fri,11 Sep 2009 14:22:30 +0800
找到Tencent 08年的面试题，最后一题是这样的：

引用内容

五、勇气拼一拼，让你超越别人的加分题目来了！（不限于一种方法，共30分）
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

要求：
1.使用2个div完成
2.使用3个div完成
3.使用5个div完成

题目比较简单，当然，解法比较多，最主要考虑优化代码。
尝试一下

------------ 2 DIV --------------
程序代码

HTML代码
<style> .h,.v{ background:#F00; position:absolute;} .h{ width:50px; height:150px; margin-left:50px;} .v{ width:150px; height:50px; margin-top:50px;} </style> <div class="h"></div> <div class="v"></div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

------------ 3 DIV --------------
程序代码

.a,.b,.c{ width:50px; height:50px; background:#F00;}
.b{ width:150px; height:50px;}
.a,.c{ margin-left:50px;}

HTML代码
<style> .a,.b,.c{ width:50px; height:50px; background:#F00;} .b{ width:150px; height:50px;} .a,.c{ margin-left:50px;} </style> <div class="a"></div> <div class="b"></div> <div class="c"></div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

------------ 5 DIV --------------
程序代码

HTML代码
<style> .padder{ width:150px; height:150px; background:#F00; } .aa,.ab,.ac,.ad{ width:50px; height:50px; background:#FFF; float:left;} .aa{ margin:0 50px 50px 0;} .ac{ margin:0 50px 0 0;} </style> <div class="padder"> <div class="aa"></div> <div class="ab"></div> <div class="ac"></div> <div class="ad"></div> </div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

附： 08年腾讯试题
点击下载此文件

推荐您升级IE浏览器

kaman@live.com(Kaman) — Wed,09 Sep 2009 14:04:55 +0800

IE6早在2001年出现至今已经有8年的历史了，IT业飞速发展，大家众所周知。但微软的XP系统在广大民间根深蒂固，使得IE6长期占领市场。大家喜爱XP，无可非议。其中IE6是一款相对不成熟的作品，存在很多bug，使得与之相关的工程师们要花大量的时间来修复IE6呈现上的bug。一定程度上影响了业界的发展。web 应用程序上一些新的特性也无法再IE6中完美体现。
鉴于此，建议大家升级您的IE6，体验更完美的网络世界。感谢您的支持！

附上下载地址：
IE 8 微软官方: http://www.microsoft.com/china/windows/internet-explorer/

开发者支持
HTML代码


[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

IE8中文超链接下划线

kaman@live.com(Kaman) — Wed,09 Sep 2009 01:28:47 +0800
中文链接在IE各版本下的呈现效果[见下图]

中文链接在IE8中下划线贴紧了文字，这样很不美观。
解决办法：
在标签中添加一个meta即可解决该问题
程序代码

但是，这样的做法会然IE8中的一些元素样式失效，因为“IE=EmulateIE7”这一句让IE8“变成”了IE7。
如：CSS中给标签设置了边框，IE系列中只有IE8能够识别，添加以上代码会让IE8中也同样无效。
如果你有更好的解决办法，敬请告知。