最终预览

我们先看一下最终作品：

点击顶端的按钮看有何反应。

第一步：概述

一个单选按钮或选项按钮是一个图形用户界面元素，允许用户只选择一个预定义的选项集的类型。

在这个教程中，我们将创建一个传统的单选按钮。

第二步：设置Flash

打开Flash创建一个新文档，舞台大小设为320*190，颜色为#181818 ，帧频为 24fps.

第三步：界面

这是我们将要使用的界面：一个带标题的简单背景，一些用来与用户交互的文本，一个可以工作的单选按钮和两个静态按钮样本。

还有一个动态文本（图片里叫做 [Disabled] ）可以通过工作的按钮来进行修改。

第四步：背景

选择矩形工具并画一个 320×40 px大小的矩形，将它放置在舞台的顶端，并将其颜色填充为放射状 #D45C10到 #B43B02的过渡。

现在需要些什么将它分成几部分。

还是用矩形工具，画一个 300×1 px 大小的矩形用另一种颜色填充： #737173到#181818。将其复制并按下图摆放。

帧频的重要性
每一帧上都是一幅静止的图片，快速连续的帧会产生动画，每秒的帧数越多，展现的动画也就越流畅。

测帧频能让我们检测动画的进程，如果需要的话还可以优化动画。

当在不同的运行环境中测试动画时这个是非常有用的，例如浏览器中，电脑中，电视或手机中。

我们可以通过使用getTime()方法测帧频，并即时的在舞台中创建文本域来输出结果。

——————————————————————————–

第一步：创建新文档
打开Flash并创建一个新Flash文档（ActionScript 3).

——————————————————————————–

第二步：打开动作画板

执行窗口>动作打开动作面板。

——————————————————————————–

第三步：变量

我们将使用三个变量，如下所示：

var startTime:Number; //用来计算相对时间
var framesNumber:Number = 0; //当前帧频数
var fps:TextField = new TextField(); //展示实际帧频的文本域

——————————————————————————–

第四步：主函数
这是计数器的主函数：

function fpsCounter():void
{
startTime = getTimer(); //当动画开始时以毫秒为单位获取时间
addChild(fps); // 向舞台添加文本域

addEventListener(Event.ENTER_FRAME, checkFPS); //添加逐帧监听器并执行checkFPS函数
}

——————————————————————————–

第五步：检查帧频

这个函数将计算频帧：

function checkFPS(e:Event):void
{
var currentTime:Number = (getTimer() – startTime) / 1000; //当函数执行的时候以秒为单位获取时间

framesNumber++; //计数器加1

if (currentTime > 1) //判断当前时间是否比1大
{
fps.text = “FPS: ” + (Math.floor((framesNumber/currentTime)*10.0)/10.0); //计算频帧并在文本域展示
startTime = getTimer(); //重设开始的时间
framesNumber = 0; //重设帧数
}
}

——————————————————————————–

第六步：调用函数
用下面的一行代码启动主函数：

fpsCounter();

——————————————————————————–

第七步：全部的代码：

全部的代码是下面这样的：

var startTime:Number;
var framesNumber:Number = 0;
var fps:TextField = new TextField();

function fpsCounter():void
{
startTime = getTimer();
addChild(fps);

addEventListener(Event.ENTER_FRAME, checkFPS);
}

function checkFPS(e:Event):void
{
var currentTime:Number = (getTimer() – startTime) / 1000;

framesNumber++;

if (currentTime > 1)
{
fps.text = “FPS: ” + (Math.floor((framesNumber/currentTime)*10.0)/10.0);
startTime = getTimer();
framesNumber = 0;
}
}

fpsCounter();

——————————————————————————–

第八步：文档类版

可能比起时间轴代码你更习惯用文档类。下面的部分说明了如何使用。

package
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
import flash.utils.getTimer;

public class FPSDemo extends MovieClip
{
public var startTime:Number;
public var framesNumber:Number = 0;
public var fps:TextField = new TextField();

public function FPSDemo()
{
fpsCounter();
}

public function fpsCounter():void
{
startTime = getTimer();
addChild(fps);

addEventListener(Event.ENTER_FRAME, checkFPS);
}

public function checkFPS(e:Event):void
{
var currentTime:Number = (getTimer() – startTime) / 1000;

framesNumber++;

if (currentTime > 1)
{
fps.text = “FPS: ” + (Math.floor((framesNumber/currentTime)*10.0)/10.0);
startTime = getTimer();
framesNumber = 0;
}
}
}
}

你应用这个类在任意一个项目中嵌入一个这样的频帧计数器：

var fpsDemo:FPSDemo = new FPSDemo();
addChild( fpsDemo );

只要将它复制到一个新AS文件中并保存为“FPSDemo.as”就行了。

结论
这是一个使用帧频计数器函数的基本的例子。试试并将它用到你的项目中。

谢谢阅读。

最终预览

让我们看一下最终预览效果

第一步：二进制是什么意思？

每个人都知道如何计数，但不是每个人都知道有多少种不同的方法。我们现在要用一种很特别的方法，叫做十进制法。我们也可以用十六进制法，八进制法，二进制法或其他的。

在十进制法中，我们用10来代表我们进位基数，以此来进行加减。但是在二进制中，10和十进制中的2是相等的，11和十进制中的3相等，100和十进制中的4相等，等等。所以我们常见的10也可以表示不同的数。

二进制法是以2为基数的，这就是为什么它叫二进制，和以10为基数的十进制不同。计算机用二进制来工作。

有了这些知识，你能看明白上面SWF中的表么？

第二步：创建Flash文档

创建一个新的AS3Flash文档，命名为”Binary_Clock.fla”

第三步：设置舞台

进入属性面板，将舞台大小设为550*400，背景色为#222222.

第四步：获取TweenMax

到http://www.greensock.com/tweenmax/网站下载AS3所需的库

第五步：提取TweenMax

将文件解压并将名为”com”的文件夹复制到你存放Binary_Clock.fla的目录中。

第六步：创建一个方块（Bit）

现在执行插入>新建元件，建一个名为Bit的影片剪辑元件。

这个”Bit”将代表一个数的一个单位。它有两种状态，分别用两种颜色表示：一个代表0一个代表1。

第七步：画一个方块

下一步,在你新创建的元件中画一个50*50的正方形。

第八步：修改方块

将方块的颜色改为#00CBFF，并将其放置到中间。

第九步：创建数列柱

回到舞台，从库中选取些方块，并将它们摆成我们要用的样子。可以按下面的样子摆放。

在这个快速教程中你将学会如何使用AS3’s的补间类创建一个横向滑动条栏菜单，一个非常棒的导航条。

最终效果预览让我们看一看我们将要做的作品的最终效果

第一步：创建文本新建一个600*300px的Flash Actionscript3.0文件首先，选择文本工具并输入你的导航菜单文字，在这个教程中，我用的是Button1|Button2|Button3|Button4，字体选择”Arista Light”，大小为30点，颜色选择#999999.然后进入对齐面板（如果你看不到它的话就点击窗口>对齐），使文本相对于舞台水平中齐，垂直中齐。

第二步：画一个按钮

将当前的图层重新命名为”文本”并将其锁定，这样就不会误将其修改。然后创建一个名为”按钮”的新图层。选择矩形工具并在”button
1″的边缘外画一个矩形（任意颜色）。这将是你菜单条中可以点击的区域。

]]> http://hizhen.cn/560.html/feed 8 http://hizhen.cn/547.html http://hizhen.cn/547.html#comments Sat, 10 Apr 2010 17:20:41 +0000 cc http://hizhen.cn/?p=547 制作一个专业的2.0网页布局
在这个photoshop教程中我们将要学习怎么制作一个专业网站的2.0布局，以前我们学习了那么多的photoshop教程，似乎都有些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。 

最终效果预览

详细教程
软件：Adobe Photoshop
版本：CS4
难度：中级
预计完成时间：大约两个小时 

---

 

步骤1

 为了确保能够对齐我们采用960s坐标制（从这里获取）下载打开文件
我们先创建背景图层，在背景层上右击，然后选择背景图层，命名为“bg”。 

 

---

步骤2 

我们运用了这么多参考线，所以我们需要打开视图>标尺。  

---

步骤3

我们要为标题区设置下边框，所以需要在下方100px拖拽一条新的参考线，执行视图——新建参考线，位置：100  

---

步骤 4

让我们来创建标题。先创建一个1020*100px的选区，然后按下shift+backspace 填充（可用任何颜色）

做一个渐变叠加，如下图所示。

将这个图层命名为“header-bg”。

---

步骤 5

输入网站标题，并设置以下文字属性：
字体设置： Rockwell (从这里获取)
字体大小: 30px
字体样式: Regular
反锯齿设置：平滑
颜色：不要紧，因为我们还要执行一个渐变叠加

现在对文本添加渐变叠加，参考下图所示：

将你的网站标题和标题背景色对齐；同时选择你的标题层和“header-bg”层，然后选择垂直居中。

---

步骤 6

导航条字符设置如下：
字体设置：Arial
字体大小: 20px
字体样式: Regular
反锯齿设置：平滑
颜色：#ffffff

创建一个圆角矩形作为一个动态链接，固定大小65*35Px，半径5px，（可用任何颜色填充）。  

根据下图所示：执行描边，渐变叠加.  

在我们进行下一步之前，首先要确保你的图层条理清晰，下面展示的是我们的图层面版!

---

步骤7

现在我们该创建一个特色的设计空间了。我们先在上一个参考线430px之后添加一个水平的参考线作为下边框。  

创建一个1020*430px的选区作为特色设计空间的背景，用任何颜色填充。  

然后执行图层样式——渐变叠加，设置参考下图所示：

现在让我们添加光泽效果！创建一个1020*120px的选区，用任何颜色填充。

然后添加渐变叠加，可参考下图设置。

降低图层不透明度到40%

---

步骤 8

接下来添加高光！运用单排选取框工具创建一个1像素的选区，如下图所示设置对齐：

设置前景色为 #acd86e 然后按下 shift+backspace 填充；要确定是使用前景色作为填充色。

我保证你会拥有一个很棒的像素细节。

我们已经做好了创建背景的基础，所以我们要给他们命名，使他们系统化，然后把他们组合在一起。

---

步骤 9

让我们更精确些！根据下图拖拽两条参考线。

输入欢迎语，字符设置如下：

字体设置：Rockwell
字体大小: 40px
字体样式: Regular
反锯齿设置：锐利
颜色：#f4f4f4

 

]]> http://hizhen.cn/547.html/feed 0 http://hizhen.cn/493.html http://hizhen.cn/493.html#comments Fri, 09 Apr 2010 15:42:29 +0000 simplef http://hizhen.cn/?p=493 快速教程：如何用ActionScript侦测鼠标的位置

在这个教程中我们将学习如何用Flash AS3来得到鼠标的当前方位。我们可以用此为游戏创建有趣的控制方法，例如可把鼠标当作一个游戏控制杆。现在我们先展示一下我们的作品。

下面是一个简单的示例：

简单概述

使用鼠标事件来监听鼠标光标的运动，用变量存贮相应数据并展示其当前方位。

第一步：创建一个新文档

打开Flash并创建一个新的Flash文档（ActionScript 3）。

第二步：打开动作面板

按F9或执行窗口>动作打开动作面板。

第三步：变量

键入一些我们将使用的变量，变量名应能一目了然。

var previousX:Number =0;

var previousY:Number = 0;

var currentX:Number = 0;

var currentY:Number = 0;

var xDir:String;

var yDir:String;

var dir:TextField = new TextField();

第四步：主函数

下面是主函数

function getMouseDirection():void

{

dir.width = stage.stageWidth; //文本区域的大小

addChild(dir); //在舞台上添加文本区域

//在舞台上添加一个鼠标事件监听器，并当鼠标运动时执行checkDirection 函数

stage.addEventListener(MouseEvent.MOUSE_MOVE, checkDirection);

}

]]> http://hizhen.cn/493.html/feed 1 http://hizhen.cn/513.html http://hizhen.cn/513.html#comments Fri, 09 Apr 2010 10:37:04 +0000 石小镇 http://hizhen.cn/?p=513 如果想要原创独特的设计作品，有一个寻找灵感的好的来源显得尤为重要。我们可以从音乐、家庭和朋友以及其他人的作品中寻找，也许他人的作品能给你提示让你想到一个好的点子。

这里所展示的是清新风格的网站，并已经分成了不同的站点类型。

个人网站

通过运用恰当的文字图形排版方式，一个简单的个人网站也能做的让人惊喜不已。这里有一些值得推荐的站。

31Three

kzxtreme

mick evans

Design Development & the Pursuit of Happiness

Francesco Fonte

James Charlick

Patrick Algrim

Jason Reed

Sinopse

Kenny Meyers

Rose Fu

My favorite thing

Jennifer James Wright

Vlad Georgescu

pete usborne

nicu.ws

t.grimes

]]> http://hizhen.cn/513.html/feed 2 http://hizhen.cn/485.html http://hizhen.cn/485.html#comments Mon, 05 Apr 2010 17:20:48 +0000 石小镇 http://hizhen.cn/?p=485 我们知道很多用电设备都具有定时装置，如果有的设备没有呢？名为“Energy Lock”的概念设计可以给任何电器设定定时断电！特别是不在室内的充电设备使用该种插座更是能锁住能源，节省电源。当然了，它可以用在任何插头上。

有个小问题：图上的这种插头并非来自美国，哪位读者朋友可以告诉我它是哪个国家的插头呢？

使用也非常的简单，只需要转动插头，设定好断电时间，你就可以安心的做其他的事情，到了设定好的时间电源会自动切断。譬如手机充电，电动车充电等设备相当需要。

设计者: Young Suk Kim

]]> http://hizhen.cn/485.html/feed 0 http://hizhen.cn/476.html http://hizhen.cn/476.html#comments Mon, 05 Apr 2010 16:50:42 +0000 石小镇 http://hizhen.cn/?p=476 该概念桌子可以由很小的体形伸展为很大的桌子。最伟大的是：它其实是由18块小部件折叠成1块的。设计它的目的并不是为了像变形金刚那样给让人们感到变化的精彩，实际上上就是为了节约室内空间。在整个桌子的18个组件中的14个是桌面的组成部分，而其他4块是桌腿。目前位置该产品只有白色，也许随着人们对它的慢慢熟悉后也许会出现18种颜色也说不定，还会成为未来生活中的常用品。

该概念桌子是由Sigrid Strömgren 和 Sanna Lindström创作，这是他们首次合作的作品。他们对工业设计有着巨大兴趣，他们都是瑞典的自由设计师，他们的设计作品让人耳目一新。

设计者: Sigrid Strömgren & Sanna Lindström

]]> http://hizhen.cn/476.html/feed 1 http://hizhen.cn/465.html http://hizhen.cn/465.html#comments Mon, 05 Apr 2010 15:52:38 +0000 石小镇 http://hizhen.cn/?p=465 UpSide主题是适合用在个人博客上的WordPress主题。本主题可以在后台管理页面设置5种不同的颜色和2种不同的页面布局。

UpSide主题遵循开源的GPL License， 你可以在任何项目上自由使用而没有任何限制。该主题是由DynamicWP 团 队所创建。希望大家喜欢。

预览

这里是UpSide主题的一些预览图：

提示：点击下面任何图片都可以进入动态演示页面。

首页

日志索引

侧边栏

联系页面

嵌套评论

演示

你可以查看来自DynamicWP UpSide主题 的演示。

• UpSide 主题演示

说明文档

阅读UpSide主题的 说明文档页面（英文） 可以学习如何更好的使用该主题。

下载

• upside_wordpress_theme (ZIP, 0.20 MB)

]]> http://hizhen.cn/465.html/feed 1