• 微课视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
微课江湖
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 微课视频
  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax
您的位置:首页 > 平面设计 >flash > Flash CS4制作时尚的时钟走动gif动画效果

Flash CS4制作时尚的时钟走动gif动画效果

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-05-24

佚名 向大家分享了Flash CS4制作时尚的时钟走动gif动画效果,其中包含Flash CS4制作时尚的时钟走动gif动画效果等知识点,遇到此问题的同学们可以参考下

这篇教程是向的朋友介绍Flash CS4制作时尚的时钟走动gif动画效果,本例主要介绍如何取得系统时间,以及如何加载外部的swf皮肤文件。 我们先来看看最终的效果图:

本例思路

.绘制出背景效果,再新建几个fla文件用来存储时钟界面(必须发布swf文件),然后绘制出时钟效果。

. 编写加载皮肤的管理类,然后编写出时钟类,再加载swf皮肤文件,创建出时钟对象。

Part 1 定制皮肤

(1)新建一个500×350像素的空白文档,然后使用“矩形工具”绘制出如图12-1所示的斑马条纹背景。

图12-1 绘制背景

技巧与提示:

图12-2所示是本例所创建的几个.fla文件,这几个文件专门用来存储时钟界面的皮肤,并且发布了swf文件,它们统一保存在skin文件夹内。

图12-2 皮肤文件

(2)下面只介绍一个皮肤文件的制作方法。新建一个Flash文件,并将其保存为01,再新建一个影片剪辑(名称为Bg),然后绘制出如图12-3所示的时钟界面。

图12-3 绘制时钟背景

(3)新建一个“刻度”图层,然后绘制出表盘的刻度,如图12-4所示。

图12-4 绘制刻度线

(4)使用“椭圆工具”绘制一个只有边框的灰色圆形,然后删除圆形内的线条,再删除圆形,如图12-5所示。

图12-5 绘制刻度

(5)将时针所在的刻度直线进行加粗显示,然后添加时刻文字(静态文本),如图12-6所示。

图12-6 添加文本

(6)新建一个“高光”图层,然后绘制一个半圆形作为高光区域,再设置填充类型为“线性”,并设置第1个色标颜色为(R:255,G:255,B:255),Alpha为60%,第2个色标颜色为(R: 43,G:43,B:43),Alpha为0%,效果如图12-7所示。

图12-7 绘制高光

(7)新建3个影片剪辑,分别命名为Hours、Minutes和Seconds,然后分别在对应的影片剪辑中绘制出如图12-8所示时针、分针和秒针。

图12-8 绘制表秒针

Part 2 输入控制程序

(1)切换到“库”面板,然后分别为4个影片剪辑添加元件类,如图12-9所示。

图12-9 添加元件类

技巧与提示:

在前面步骤中只创建了4个影片剪辑元件,它们只存在于“库”面板中,当发布成swf文件时,此时查看swf文件则为空,因为没有编写任何程序来进行引用和控制,就相当于该swf文件中只包含4个元件类,下面将通过加载该swf文件来引用和创建其元件类实例。

(2)新建一个ActionScript文件,并将其保存为SkinManager,然后编写出加载皮肤的管理类程序。

AS3代码


AS3代码


技术看板:关于SkinManager类涉及到的难点

有一定编程基础的用户很容易看出该类使用了很常用的“设计模式”中的单件模式,通过提供该类公有的静态方法getInstance()作为返回唯一的实例对象,并且可以对该实例进行全局访问。

(3)新建一个ActionScript文件,并将其保存为Clock,下面编写时钟类的程序代码。该类接收3个Sprite类型的对象参数,它们分别来自前面3个元件类所创建的实例(如第21~28行代码),在创建实例时接收完这3个参数后,然后调用init()方法来注册ENTER_FRAME事件,并在侦听器函数enterFrameHan

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-24用flash绘制一只飞起来的立体小瓢虫
  • 2017-05-24Flash制作心动动画过程解析
  • 2017-05-24Flash设计绘制具有卡通风格的石头和山脉实例教程
  • 2017-05-24Flash AS 入门教程 三个实例讲解
  • 2017-05-24Flash CS3制作Fla形式的组件
  • 2017-05-24flash cs5基础教程 时间轴的认识
  • 2017-05-24Flash AS3.0实例教程:教你射击类游戏的制作及解析打飞机游戏的制作过程
  • 2017-05-24Flash制作牛奶摇摇杯实例教程
  • 2017-05-24flash总的帧该怎么理解?flash帧的详细使用方法
  • 2017-05-24flash制作一个一个字的冒出来的打字效果

文章分类

  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax

最近更新的内容

    • flash怎么绘制一个大红灯笼?
    • Flash+ASP+XML+Access开发留言本(图文教程)
    • flash引导层动画:引导层制作飞行的飞机
    • flash怎么复制元件并更改?
    • Flash AS教程:填色游戏的制作
    • flash制作绚丽星空的动画
    • flash制作冰糖葫芦的矢量图?
    • Flash cs3鼠绘教程:图文讲解铰连身体部分
    • flash怎么制作图片慢慢缩小的动画?
    • Flash as教程:图片模糊运动

关于我们 - 联系我们 - 免责声明 - 网站地图

©2015-2018 All Rights Reserved. 微课江湖 版权所有