本教程介绍Flash CS4制作时尚的时钟移动gif动画效果。这个例子主要介绍了如何获取系统时间以及如何加载外部swf皮肤文件。
想想这个例子
绘制背景效果,然后新建几个fla文件存储时钟接口(必须发布swf文件),再绘制时钟效果。
编写加载皮肤的管理类,然后编写时钟类,再加载swf皮肤文件来创建时钟对象。
第1部分定制皮肤
(1)新建一个500350像素的空白文档,然后使用矩形工具绘制斑马条纹背景。
提示和提示:
图中显示了几个。本示例中创建的fla文件。这些文件是专门用来存放时钟界面皮肤的,发布了swf文件,都存放在皮肤文件夹里。
(2)下面只介绍皮肤文件的制作方法。新建一个Flash文件,保存为01,新建一个电影剪辑(名为Bg),然后绘制时钟界面。
(3)新建一个"刻度"层,然后绘制刻度的表盘、
(4)用椭圆工具画一个只有边框的灰色圆,然后删除圆里面的线,再删除圆,
(5)大胆显示时针所在的刻度直线,然后添加时间文本(静态文本),
(6)新建一个“高光”图层,然后画一个半圆作为高光区域,然后设置填充类型为“线性”,设置第一个色阶为(R:255,G:255,B:255),Alpha为60%,第二个色阶为(R: 43,G:43,)
(7)创建三个新的电影剪辑,命名为小时、分钟和秒,然后在相应的电影剪辑中绘制时针、分针和秒针。
第二部分输入控制程序
(1)切换到“库”面板,然后分别为4个电影剪辑添加组件类。
提示和提示:
在上一步中,只创建了四个影片剪辑元件,它们仅存在于“库”面板中。当发布为swf文件时,此时swf文件是空的,无法查看,因为没有编写任何程序来引用和控制,它相当于只包含四个符号类的swf文件。在下文中,将加载swf文件以引用并创建其符号类实例。
(2)新建一个ActionScript文件,另存为SkinManager,然后编写一个管理程序加载皮肤。
AS3代码
复制代码
代码如下:
var skin _ MC:skin manager=skin manager . getinstance();
skin _ MC . loadskin(' skin/01 . swf ');
skin _ MC . addevent listener(' skin complete 'complete handler);
函数completeHandler(e:Event) {
var class _ name:String=' Bg '
var _ Class:Class=skin _ MC . getclass(Class _ name);
var new _ Sprite:Sprite=new _ class();
addChild(new _ sprite);
}
AS3代码
复制代码
代码如下:
/**
*这个类是皮肤加载管理类。
* @作者lbynet
* @版本0.1
*/
包{
导入flash . display . loader;
导入flash . net . URL request;
导入flash . events . event;
导入flash . events . event dispatcher;
公共类SkinManager扩展EventDispatcher {
公共静态const skin complete:String=' skin complete '
私有静态var实例:skin manager=new skin manager();
公共var加载器:Loader;
公共函数SkinManager() {
如果(实例!=null) {
抛出新错误(“无法直接创建对象”);
}
Loader=new Loader();
}
公共静态函数getInstance():SkinManager {
返回实例;
}
公共函数loadSkin(路径:字符串):void {
loader.load(新的URL request(path));
loader . contentloaderinfo . addevent listener(事件。COMPLETE,COMPLETE handler);
}
私有函数completeHandler(e:Event) {
//删除侦听器
loader . contentloaderinfo . removeeventlistener(事件。COMPLETE,COMPLETE handler);
dispatchEvent(新事件(SkinManager。skin complete));//发布事件
}
公共函数getClass(Class name:String):Class {
尝试{
将loader . contentloaderinfo . application domain . get definition(Class name)作为类返回;
} catch (e:Error) {
引发新错误(在“e.toString()”中找不到“className”定义);
}
返回null
}
}
}
技术看板:关于SkinManager课程中涉及的困难
有一定编程基础的用户很容易看出这个类使用了常用的“设计模式”中的一体式模式。通过提供这个类公共的静态方法getInstance(),它可以返回唯一的实例对象,并且可以全局访问实例。
(3)新建一个ActionScript文件,另存为Clock。下面写时钟类的程序代码。该类接收Sprite类型的三个对象参数,它们分别来自前三个组件类创建的实例(如第21~28行)。创建实例时收到这三个参数后,调用init()方法注册ENTER_FRAME事件,在监听器函数enterFrameHandler()中创建Date的实例,然后获取特定时间点(如35 ~秒)的时、分、秒
AS3代码
复制代码
代码如下:
/**
*这个类是时钟原理类。
* @作者lbynet
* @版本0.1
*/
包{
导入日期;
导入flash . display . sprite;
导入flash . events . event;
公共类时钟扩展Sprite {
私人var小时:数字;
私人var分钟:数字;
私有var第二:数字;
私var _hours:雪碧;
私var _minutes:雪碧;
私var _seconds:雪碧;
公共函数时钟(h:Sprite,m:Sprite,s:Sprite) {
//将传递的三个对象参数赋给clock类的三个属性。
这个。_ hours=h;
这个。_分钟=m;
这个。_ seconds=s;
init();
}
私有函数init() {
this.addEventListener(事件。ENTER_FRAME,ENTER FRAME handler);
}
私有函数enter frame handler(Event:Event){
var now:Date=new Date();//构造一个日期实例,日期类的实例代表一个特定的时间点
hour=now . get hours();//获取系统当前的时、分、秒
minute=now . get minutes();
second=now . get seconds();
//下面控制时针、分针、秒针的旋转规律和角度,后面会详细说明。
_ hours . rotation=hour * 30 math . floor(分钟* 6/12);
_ minutes . rotation=minute * 6 math . floor(秒* 6/60);
_seconds.rotation=秒* 6;
}
}
}
技术看板:小时、分钟和秒的算法
小时:时钟转360,总共需要12个小时,每个小时30。为了更接近生活中时钟的运动效果,所以加上时针(30)和分针(360)的角度,它们的比例关系是1/10。
分钟:时钟转360,一共60分钟,每分钟6。再加上分针结束一分钟的角度是6,秒针结束一分钟的角度是360,那么它们的比例关系就是1/60。
秒:时钟的一转是360 60秒,每一秒是6。
(4)返回flash文档,然后新建一个AS层,写一个程序。通过SkinManager类加载皮肤文件,注册监听器(如第1~3行);第5~8行代码是创建一个存储时钟组件的容器,并将stage设置为居中对齐;然后创建sprite_name和class_name两个数组,分别存储swf文件中要加载的组件类的实例名和组件类名(比如10行和11行代码);加载swf时钟皮肤文件后,调用监听器函数completeHandler(),在监听器函数中执行for()循环语句,然后在加载的swf文件中创建四个(_length值等于4)组件类实例,并将实例名添加到container_mc容器中(如第16~21行)。
AS3代码
复制代码
代码如下:
var skin _ MC:skin manager=skin manager . getinstance();
skin _ MC . loadskin(' skin/01 . swf ');
skin _ MC . addevent listener(' skin complete 'complete handler);
var container _ MC:Sprite=new Sprite();
addChild(container _ MC);
集装箱_ MC . x=stage.stageWidth/2;
集装箱_ MC . y=stage.stageHeight/2;
var sprite_name:Array=['bg_mc ''小时_mc ''分钟_mc ''秒_ MC '];
var class_name:Array=['Bg ''小时''分钟''秒'];
var _ length:uint=class _ name . length;
函数completeHandler(e:Event) {
var _ Class:Class;
var new_sprite:雪碧;
for(var I=0;i _ lengthi ) {
_ class=skin _ MC . getclass(class _ name[I]);
new _ sprite=new _ class();
new _ sprite . name=sprite _ name[I];
container _ MC . addchild(new _ sprite);
}
create();
}
//创建一个时钟类,传入三个参数,都是Sprite类型,
//它们是舞台上存在的三个电影剪辑元素,实例名为
//时针(hours_mc),分针(minutes_mc),秒针(seconds_mc)
函数create() {
var a:Clock=new Clock(getItem(' hours _ MC '),getItem('minutes_mc '),getItem(' seconds _ MC ');
addChild(a);
}
函数getItem(名称:字符串):* {
返回container _ MC . getchildbyname(Name);
}
在加载的swf文件中创建组件类实例后,调用create()方法创建时钟类实例(如第28行代码);getItem()方法主要使用container_mc.getChildByName()方法获取container_mc中指定名称的对象。
(5)除了前面的方法,还可以通过随机指定路径来加载swf皮肤文件。
AS3代码
复制代码
代码如下:
var skin _ MC:skin manager=skin manager . getinstance();
skin _ MC . loadskin(' skin/0 ' math . ceil(math . random()* 4)'swf’);
skin _ MC . addevent listener(' skin complete 'complete handler);
(6)在本例中,按Ctrl+Enter发布所有程序。
教程最后,以上是Flash CS4制作时尚时钟移动gif的动画效果。希望能对大家有所帮助!