原版再见张震岳mp3:Flash AS2实例教程:制作360度全景动画效果

来源:百度文库 编辑:偶看新闻 时间:2024/04/27 20:59:58
文章出处:中国教程网 作者:fangge.888 发布时间:2009-10-16收藏到QQ书签
本系列Flash教程由中国教程网Flash互助课堂专为Flash新手制作,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!
1、首先找一张云层的图片,要大一点的,在Photoshop里处理成左右两连续的图最好。
2、找一张风景图片,然后将云层或者天空部分去掉,变成透明的,也在Photoshop里处理成左右两连续的图,存为png透明格式。
3、在主场景第一层第一帧中建立影片剪辑,实例名称为:bg_mc,在bg_mc下创建影片剪辑实例:bg,进入bg编辑,导入刚刚找到的云层图片。对齐坐标为0,0;
4、在主场景第二层第一帧中建立影片剪辑,实例名称为:img_mc,在img_mc下创建影片剪辑实例:img,进入img编辑,导入刚刚处理过的风景图片。对齐坐标为0,0;
5、在主场景第三层第一帧中加入以下AS代码:
/as----------------------------------------------------
stop();
Stage.showMenu = false;
Stage.scaleMode = "noScale";
fscommand(allowscale, true);
img_mc.img.duplicateMovieClip("img1", 2);//复制前景;
bg_mc.bg.duplicateMovieClip("bg1", 2);//复制云层北京;
page_width = Stage.width;//设置鼠标感应范围宽度
page_height = Stage.height;//设置鼠标感应范围高度;
step = 40;//设置间隔时间;
img_mc.img._x = 0;//初始前景坐标位置;
img_mc.img1._x = -img_mc.img._width;//初始前景被拼合为环视图
bg_mc.bg._x = 0;//初始背景坐标位置;
bg_mc.bg1._x = -bg_mc.bg._width;//初始背景被拼和为环视图;
img_mc._y = 0;//初始前景和背景y轴位置;
bg_mc._y = 0;//
_root.onEnterFrame = function() {//根据帧频持续调用函数;
img_width = img_mc._width/2;//设置前景鼠标检测范围;
bg_width = bg_mc._width/2;//设置背景鼠标检测范围;
if (_root._xmouse>0 && _root._xmouse0 && _root._ymouse
//判断鼠标是否在场景范围内;
img_mc._x = img_mc._x-(_root._xmouse-page_width/2)/step;//控制前景循环;
bg_mc._x = bg_mc._x-(_root._xmouse-page_width/2)/step*1.3;//控制背景循环,速度比前景快1.3倍;
if (img_mc._x<-(img_width-page_width)) {//以下几个if循环为检测是否超出范围;
img_mc._x = page_width;
}
if (img_mc._x>page_width) {
img_mc._x = page_width-img_width;
}
if (bg_mc._x<-(bg_width-page_width)) {
bg_mc._x = page_width;
}
if (bg_mc._x>page_width) {
bg_mc._x = page_width-bg_width;
}
}
};
效果:
素材:
Flash AS教程:模拟打字效果的动画
文章出处:中国教程网论坛 作者:zctmh0336 发布时间:2009-10-24收藏到QQ书签
本教程主要用Flash来制作两方面的特效,开始模拟打字效果的动画,然后是制作害怕鼠标的文字动画特效,主要都是用AS代码来完成的,喜欢这种效果的朋友一起来学习吧
',1)">
详细代码:
var str:String="秋天,公园里可美丽啦!各种菊花开了,有红的,有黄的,有白的,还有紫的,漂亮极了。桂花也开了,小小的,黄黄的,还发出一阵阵香味儿。梧桐树的叶子黄了,一片片飘下来,像美丽的蝴蝶在空中舞蹈。枫树的叶子红了,远远看去,像火红火红的彩云。松树和柏树还是那么绿,高高地挺立着,像风雨中站岗的战士。秋天来啦,秋天来啦,田野上画出美丽的图画。鸭梨挂起金黄的灯笼,苹果露出羞红的脸颊,稻海翻起闪光的波浪,高粱举起燃烧的火把,谁使秋天这样美丽?听蓝天上的大雁回答,他们排成大大的“人”字,像是说——勤劳的人们画出秋天的图画。秋天,果子熟了。阳光下,那熟透了的柿子像一颗颗红色的宝石。满树的苹果,像一张张孩子的笑脸。葡萄架下,成串的葡萄,有红的、白的、绿的、紫的,闪着迷人的光彩。多么美好啊!秋天的果园。一阵阵凉风吹来,果儿点着头,散发出甜甜的香味儿。";
var n=0;
addEventListener(Event.ENTER_FRAME,bb);
function bb(e:Event) {
var mc:MovieClip=new MovieClip();
addChild(mc);
var txt:TextField=new TextField();
mc.addChild(txt);
txt.defaultTextFormat=new TextFormat("黑体",20,0x993300,true);
txt.text=str.substr(n,1);
txt.autoSize=TextFieldAutoSize.LEFT;
txt.x=- txt.width/2;
txt.y=- txt.height/2;
mc.oldX=mc.x=n%25*22+10;
mc.oldY=mc.y=int(n/25)*22+10;
mc.vx=0;
mc.vy=0;
nmc.addEventListener(Event.ENTER_FRAME,frame);
}
function frame(e:Event) {
if (n>=str.length) {
var mc:MovieClip=e.target as MovieClip;
var r=Math.sqrt((mc.oldX-mouseX)*(mc.oldX-mouseX)+(mc.oldY-mouseY)*(mc.oldY-mouseY));
var ang=Math.atan2(mc.oldY-mouseY,mc.oldX-mouseX);
mc.x0=mouseX+((650-r)/20+r)*Math.cos(ang);
mc.y0=mouseY+((650-r)/20+r)*Math.sin(ang);
mc.vx=mc.vx*0.8+(mc.x0-mc.x)*0.2;
mc.vy=mc.vy*0.8+(mc.y0-mc.y)*0.2;
mc.x+=mc.vx;
mc.y+=mc.vy;
}
}
Flash CS4的骨骼工具制作皮影动画技巧
文章出处:商创技术 作者:望月狼 发布时间:2009-10-13收藏到QQ书签
本例将使用Flash CS4新增的“骨骼工具”来创建反向运动,该工具可以在短时间里制作出复杂而自然的动画效果,这种制作方式很适合运用在皮影动画中。
>>出自《Flash CS4动画设计与制作208例》
本例思路
导入素材,然后分割好图形的各部分元素。
使用“骨骼工具”为老人添加好骨骼,然后为老人制作出行走动画。
使用“骨骼工具”为小狗添加好骨骼,然后为小狗制作出跳跃动画。
Part 1  分割图形
(1)按Ctrl+R组合键导入本书配套光盘中的“Chapter06/素材/皮影.ai”文件,如图6-1所示。
图6-1  导入素材
(2)将老人的各肢体转换为影片剪辑,因为皮影戏的角色只做平面运动,然后将角色的关节简化为10段6个连接点,如图6-2所示。
图6-2  连接点
(3)按连接点切割好人物的各部分,然后每个部分转换为影片剪辑,如图6-3所示。
图6-3  切割素材
(4)将各部分的影片剪辑放置好,然后选中所有元件,再将其转换为影片剪辑(名称为“老人”),如图6-4所示。
图6-4  放置各元件
Part 2  制作老人行走动画
(1)单击“工具箱”中的“骨骼工具”按钮 ,然后在左手上创建好骨骼,如图6-5所示。
图6-5  创建左手骨骼
技巧提示:
使用“骨骼工具”连接两个轴点时,要注意关节的活动部分,可以配合“选择工具”和Ctrl健来进行调整。
(2)采用相同的方法创建出头部、身体、左手、右手、左脚与右脚的骨骼,如图6-6所示。
图6-6 创建其他骨骼
(3)人物的行走动画使用35帧完成,因此在各图层的第35帧插入帧,如图6-7所示。
图6-7  插入帧
(4)调整好第10帧、18帧和第27帧上的动作,使角色在原地行走,然后创建出“担子”在行走时起伏运动的传统补间动画,如图6-8所示。
图6-8  调整行走动作
(5)返回到主场景,然后创建出“老人”影片剪辑的补间动画,使其向前移动一段距离,如图6-9所示。
图6-9  创建补间动画
(6)按Ctrl+Enter组合键发布动画,效果如图6-10所示。
图6-10  行走动画
Part 3  制作小狗跳跃动画
(1)使用“骨骼工具”为小狗添加骨骼,小狗的骨骼和老人的骨骼不同,小狗只使用一副骨骼,如图6-11所示。
图6-11  创建骨骼
技巧提示:
小狗的右前脚和右后脚在身体的背面,被身体挡住了,所以不能直接关联对象,如图6-180所示,这时可以将右脚拉出来关联骨骼后,然后按住Ctrl键的同时使用“选择工具”将其放回原位,如图6-13所示。
图6-12  禁止关联对象
图6-13  关联调整对象
(2)调整小狗跳跃的各种姿势,如图6-14所示。
图6-14  调整跳跃姿势
(3)按Ctrl+Enter组合键发布动画,效果如图6-15所示。
图6-15  跳跃动画
(4)返回到主场景,然后为小狗添加补间动画,如图6-16所示。
图6-16  创建补间动画
(5)按Ctrl+Enter组合键发布动画。
Flash实例教程:好看的旋转文字动画
文章出处:闪吧 作者:love黄家驹 发布时间:2009-10-13收藏到QQ书签
本例将通过调整影片剪辑的旋转方向和变化高度来模拟三维透视中的旋转效果。
',2)">
本例思路:利用圆形阵列排放文字,为文本创建传统补间动画,并添加“模糊”、“发光”和“投影”滤镜来修饰图形。
Part 1  排列文字
(1)启动Flash CS4,新建一个文档,然后将文档属性做如图2-1所示的设置。
图2-1
(2)单击“工具箱”中的“文本工具”按钮 ,然后在其属性面板中做如图2-2所示的设置,并在舞台中输入如图2-3所示的文字。
图2-2 设置字体属性
(3)新建一个“图层2”,然后按住Shift键的同时使用“椭圆工具”绘制一个如图2-4所示的圆形。
图2-4  绘制圆形
(4)选中文字,然后按Ctrl+B组合键打散文字,如图2-5所示。
图2-5  打散文字
(5)使用“选择工具”将文字拖曳到线条上使文字围绕圆圈进行排放,如图2-6所示。
图2-6  排放文字
技巧提示:
在排放文字的时候可激活“工具箱”中的“贴紧至对象”按钮 (激活状态为 ),这样在排放文字的时候就会自动贴紧圆线了。
(6)依次选中单个文字,然后按F8键将每个文字都转为影片剪辑,然后使用“任意变形工具”调整文字方向,如图2-7所示,删除圆形线,再选中所有文字,最终将其转换为影片剪辑,效果如图2-8所示。
图2-7  调整文字方向
图2-8  文字效果
Part 2  旋转动画制作
(1)进入影片剪辑编辑区,然后选中第100帧,再按F6键插入关键帧,如图2-9所示。
图2-9  创建关键帧
(2)选择第1帧,然后在该帧上单击右键,并在弹出的菜单中选择“创建传统补间”命令,最后在属性面板中做如图2-11所示的设置。
图2-10  创建传统补间
图2-11 设置旋转属性
(3)返回到“场景1”,新建一个“背景层”,然后使用“矩形工具”制作出一个绿色背景,如图2-12所示。
图2-12  添加背景
(4)选中影片剪辑,然后按F8键再将其转化为影片剪辑(名称为“旋转字”),再进入该影片剪辑的编辑区,新建一个图层,最后将影片剪辑复制一份到新图层中,如图2-13所示。
图2-13  复制图形
(5)选中两个图层的第50帧,然后按F6键插入关键帧,如图2-14所示。
图2-14  插入关键帧
(6)再选中两个图层的第100帧,按F6键插入关键帧,然后在两个图层第50帧创建传统补间动画,如图2-15所示。
图2-15  创建传统补间动画
(7)选中第100帧,然后使用“任意变形工具”将两个图层的影片剪辑调整成如图2-16所示的效果。
图2-16  调整文字形状
(8)创建出两个图层,然后在第170帧和第200帧处创建出关键帧,再采用相同的方法在两个图层的170~200帧之间创建出传统补间动画,最后将两个图层的影片剪辑文字调整成如图2-17所示的效果。
图2-17  创建传统补间动画
(9)选择“图层1”的“影片剪辑”,然后将其向下移动一些像素,再为其添加“模糊”和“发光”滤镜,具体参数设置如图2-18所示。
图2-18  添加滤镜
(10)创建出两个图层,然后在这两个图层的第340帧和第400帧处创建出关键帧,再采用相同的方法在340~400帧之间创建出传统补间动画,最后将“图层2”的第400帧处的影片剪辑调整成如图2-19所示的效果。
图2-19  创建传统补间动画
(11)选择“图层1”第400帧处的影片剪辑,然后将其向上移动一些像素,再设置文字颜色为黑色,最后使用“任意变形工具”将其调整成如图2-20所示的效果。
图2-20  调整文字
(12)创建出两个图层,然后在这两个图层的第500帧处创建出关键帧,再为“图层2”的黑色文字添加“投影”滤镜,最后调整好“图层1”中白色文字的“发光”滤镜中的颜色,具体参数设置如图2-21所示。
图2-21  调整滤镜参数
(13)采用前面的方法为后面的帧创建循环动画效果(将第1帧复制到后面的帧中形成一个循环动画),此时的文字旋转效果如图2-22所示。
图2-22  动画效果
(14)返回到“场景1“,然后为影片剪辑添加一个“发光”滤镜,具体参数设置如图2-23所示。
图2-23  添加滤镜
(15)按Ctrl+Enter组合键发布动画。
Flash CS4教程:制作时尚的时钟效果
文章出处:动画设计与制作208例 作者:lby 发布时间:2009-10-14收藏到QQ书签
本例主要介绍如何取得系统时间,以及如何加载外部的swf皮肤文件。
',3)">
本例思路
.绘制出背景效果,再新建几个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代码
var skin_mc:SkinManager = SkinManager.getInstance();
skin_mc.loadSkin("skin/01.swf");
skin_mc.addEventListener("skincomplete",completeHandler);
function 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代码
/**
* 该类为皮肤加载管理类
* @author lbynet
* @version 0.1
*/
package {
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.EventDispatcher;
public class SkinManager extends EventDispatcher {
public static  const SKINCOMPLETE:String="skincomplete";
private static  var instance:SkinManager=new SkinManager();
public var loader:Loader;
public function SkinManager() {
if (instance != null) {
throw new Error("不能直接创建对象");
}
loader=new Loader();
}
public static function getInstance():SkinManager {
return instance;
}
public function loadSkin(path:String):void {
loader.load(new URLRequest(path));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
}
private function completeHandler(e:Event) {
//移除侦听器
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,completeHandler);
dispatchEvent(new Event(SkinManager.SKINCOMPLETE));//发布事件
}
public function getClass(className:String):Class {
try {
return loader.contentLoaderInfo.applicationDomain.getDefinition(className)  as  Class;
} catch (e:Error) {
throw new Error(className + " definition not found in " + e.toString());
}
return null;
}
}
}
技术看板:关于SkinManager类涉及到的难点
有一定编程基础的用户很容易看出该类使用了很常用的“设计模式”中的单件模式,通过提供该类公有的静态方法getInstance()作为返回唯一的实例对象,并且可以对该实例进行全局访问。
(3)新建一个ActionScript文件,并将其保存为Clock,下面编写时钟类的程序代码。该类接收3个Sprite类型的对象参数,它们分别来自前面3个元件类所创建的实例(如第21~28行代码),在创建实例时接收完这3个参数后,然后调用init()方法来注册ENTER_FRAME事件,并在侦听器函数enterFrameHandler()中创建Date的实例,再取得一个特定时间点的时、分和秒值(如第35~38行代码)。
AS3代码
/**
* 该类为时钟原理类
* @author lbynet
* @version 0.1
*/
package {
import Date;
import flash.display.Sprite;
import flash.events.Event;
public class Clock extends Sprite {
private var hour:Number;
private var minute:Number;
private var second:Number;
private var _hours:Sprite;
private var _minutes:Sprite;
private var _seconds:Sprite;
public function Clock(h:Sprite,m:Sprite,s:Sprite) {
//将传递进来的三个对象参数,赋给该时钟类的三个属性
this._hours = h;
this._minutes = m;
this._seconds = s;
init();
}
private function init() {
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function enterFrameHandler(event:Event) {
var now:Date = new Date(); // 构造一个Date实例,Date 类的实例表示一个特定时间点
hour = now.getHours();   //获取系统当前的时,分,秒
minute = now.getMinutes();
second = now.getSeconds();
//下面控制时针、分针、秒针的旋转规律、旋转角度 ,后面进行具体解释
_hours.rotation = hour*30 + Math.floor(minute*6/12);
_minutes.rotation = minute*6 + Math.floor(second*6/60);
_seconds.rotation = second*6;
}
}
}
技术看板:时、分、秒的算法
小时(hours):时钟转动一圈是360°,总共花12个小时,每一小时为30°,为了更加接近生活中时钟的运动效果,因此再加上时针(hour)走完一小时的角度(30°)与分针(minute)走完一小时的角度(360°),那么它们的比例关系就是1/12。
分钟(minutes):时钟转动一圈是360°,总共花60分钟,每一分钟是6°,再加上分针(minute)走完一分钟的角度6°与秒针(second)走过一分钟的角度360°,那么它们的比例关系就是1/60。
秒钟(seconds):时钟转动一圈是360°,共60秒钟,每一秒钟是6°。
(4)返回到flash文档中,然后新建一个AS图层,并编写出程序。通过SkinManager类来加载皮肤文件,并注册侦听器(如第1~3行代码);第5~8行代码是创建存储时钟组成元素的容器,并设置舞台为居中对齐;接着创建sprite_name和class_name两个数组,来分别存储将要被加载swf文件中的元件类的实例名称以及元件类名称(如10和11行代码);当加载完swf时钟皮肤文件后,调用侦听器函数completeHandler(),在侦听器函数中执行一个for()循环语句,然后创建4个(_length值等于4)被加载swf文件中的元件类实例,并在添加实例名称后统一添加到container_mc容器中(如第16~21行代码)。
AS3代码
var skin_mc:SkinManager = SkinManager.getInstance();
skin_mc.loadSkin("skin/01.swf");
skin_mc.addEventListener("skincomplete",completeHandler);
var container_mc:Sprite = new Sprite();
addChild(container_mc);
container_mc.x = stage.stageWidth/2;
container_mc.y = stage.stageHeight/2;
var sprite_name:Array = ["bg_mc","hours_mc","minutes_mc","seconds_mc"];
var class_name:Array = ["Bg","Hours","Minutes","Seconds"];
var _length:uint = class_name.length;
function completeHandler(e:Event) {
var _class:Class;
var new_sprite:Sprite;
for (var i=0; i<_length; i++) {
_class = skin_mc.getClass(class_name[i]);
new_sprite = new _class();
new_sprite.name = sprite_name[i];
container_mc.addChild(new_sprite);
}
create();
}
//创建一个时钟(Clock)类,传入三个参数,参数类型都是Sprite类型,
//它们分别是舞台上存在的三个影片剪辑元件,实例名分别为
//时针(hours_mc) , 分针(minutes_mc) , 秒针(seconds_mc)
function create() {
var a:Clock = new Clock(getItem("hours_mc"),getItem("minutes_mc"),getItem("seconds_mc"));
addChild(a);
}
function getItem(Name:String):* {
return container_mc.getChildByName(Name);
}
创建完被加载swf文件中的元件类实例后,调用create()方法来创建Clock类实例(如第28行代码);getItem()方法主要是通过container_mc.getChildByName()方法来取得container_mc容器中指定名称的对象。
(5)除了前面的方法外,还可以通过随机指定路径来加载swf皮肤文件。
AS3代码
var skin_mc:SkinManager = SkinManager.getInstance();
skin_mc.loadSkin("skin/0"+Math.ceil(Math.random()*4)+".swf");
skin_mc.addEventListener("skincomplete",completeHandler);
(6)按Ctrl+Enter组合键发布本例的所有程序。
Flash动画技巧:图形元件相关知识
文章出处:闪吧  作者:zhusw 发布时间:2009-11-19收藏到QQ书签
很多闪客辛辛苦苦制作完成了一部动画,后期导出视频格式时,发现只要用了影片剪辑的地方都失效了,静止不动,所以只好用格式转化软件,换来的是跳帧卡帧画质降低,这对于严肃的想在无纸动画领域有所作为的闪客是不可接受的,用过FLASH自带的AVI视频导出功能的人都知道,性能非常好,没有帧速局部变慢的现象。
所以我们从很多无纸动画公司公布的作品制作花絮中看到,他们基本不用任何元件,一个动作动辄几十个图层,这样多的图层,即给制作带来了困难,而且缺少影片剪辑元件带来的结构性,整个影片很难修改与维护。
怎么办?图形元件就是这时候用的了。图形元件是很神奇的,它在维持自己内部动画结构的同时,与时间轴完全同步,这无论在动画制作时还是在后期导出其他格式都是很重要的。首先它具有影片剪辑的结构性特点可以多层嵌套,然后其实它是和时间轴同步的,你在制作时就可以同步预览,完成时可以导出视频和GIF。
当然图形元件不支持任何脚本,但是有什么必要呢,图形元件本来就是为动画而生的。
以前看过某位AS大神未出版的书稿中,誓旦旦的说图形元件是废柴,建议flash把其取消掉,只留影片剪辑元件,我当时就笑了。我是做动画片出身的,影片剪辑元件在编程时固然很好用,但是在动画领域只能添麻烦,要知道FLASH软件在无纸动画领域几乎就是全部。
看来更郁闷的是,到现在很多人都不知道,图形元件是有时间轴的,没准还觉得图形元件和组差不多,放在库里还碍事。
是的,图形元件是有时间轴的,而且当图形元件拖入舞台后,她的时间轴是和舞台同步播放的,这就是它的优势。它可以看作是轻量级的影片剪辑。
以制作一个人走路的动画为例,通常的做法是先制作一个原地走路的影片剪辑,然后用该影片剪辑做补间动画。但是这样做缺点很明显,影片剪辑在舞台上无法与时间轴同步播放,你很难控制补间的时间,因为你看不到原地走路的动画节奏,需要反复调试。而且你导出GIF或者AVI的时候影片剪辑就会失效。所以动画公司的做法是全部在时间轴上制作,缺点是复用这段走路动画就必须复制时间轴上的帧了,而且你如果对走路动画不满意也无法只改一个元件就修改了全片所有的走路效果。这段动画如果用图形元件去做,以上问题都不会有。

这是我一个MV中的图形元件,这个图形元件由男孩头发元件,女孩头发元件,男孩腿部元件,轮子元件等组成。这些元件我全部使用了图形元件。所以我在制作时在任何地方都能看到它每个地方运动的节奏,导出GIF动画也不会出现某个地方不动的现象
Flash绘画教程:绘图功能制作奶瓶标志
文章出处:Flash8 作者::天行 发布时间:2009-10-30收藏到QQ书签
随着flash的发展,现在已经到了CS3的时代,而且对于AS的支持一带比一带强,可是大家(特别是新手)可能会忽略了一点,其实flash最开始是用来做动画的软件,他也有一定的绘图能力,所以思缘网也为大家收集了不少flash制作动画的教程,虽然过程可能简单但是对熟悉flash的图片处理功能很有好处
本教程从基本形状开始,完全使用FLASH画一个小奶瓶的图标,先看看效果图吧:
效果图
首先我们从一个圆角的矩形开始,把它的底部调节成圆形。
图1
图2
再把顶部调成突起的形状,如果你熟悉贝塞尔曲线,这不是什么难事。然后我们用形状扩展,外扩出一个粗边来,这将是瓶壁。
图3
图4
画瓶盖的圆柱其实很简单,先画一个椭圆,然后垂直复制一份。切去下半个的上半部分。
图5
图6
将上面的边拉伸出来,形成圆柱的壁,然后移到下层,这样很快是不是?
图7
下面的一个小圆柱也采用同样的方法。
图9
图10
这时我发现下面的瓶身需要一个瓶颈,于是先将其切去一块,再把切出的节点移动上来。因为画了两层,所以两层都要调整,如果一开始注意到,会好很多。
图11
图12
形状画成了,下面是奶嘴,让我们再从一个矩形开始。加出需要的节点,再调整曲线。
图13
图14
形状差不多了,如果你是对照照片来画的,可能会更像一点。然后,同样用形状扩展加一层边,因为橡胶奶嘴同样有厚度。
图15
图16
下面是颜色了,玻璃瓶我习惯用这样的圆形渐变。圆柱形用加上高光的线形渐变就可以了。
图17
图18
Flash绘画教程:绘图功能制作奶瓶标志
文章出处:Flash8 作者::天行 发布时间:2009-10-30收藏到QQ书签
FLASH并没有太复杂的渐变方式,但如果灵活运用,同样可以做出复杂的效果,而且毕竟我们也不是要仿真到完全一致,要做照片效果完全可以用3D。注意下面我把圆柱的顶复制一份,变成浅色,再向下移动一两个像素,然后移到下层,这样就形成了一个倒角的效果,有时细节是很重要的。
图19
图20
接下来是瓶身的渐变,用白色的线形渐变即可。
图21
图22
注意玻璃瓶是两面都有高光的,否则没有那种通透感。然后高光的形状要沿着瓶身的形状变化。
图23
图24
奶嘴也是同样的情况,但因为是橡胶的,所以不要像瓶身上那样规则,稍有点变化反而更好。
图25
图26
然后调一下色彩,把瓶盖加一道高光,这样质感更强烈一点。一个基本的奶瓶就画好了。
图27
图28
有一种瓶身是孤形的奶瓶似乎更好看一点,于是我们把形状和高光再调整一下。然后旋转45度,将瓶身的内层复制一层到顶端来。
图29
图30
切去新形状的上半部,将颜色改成浅蓝到白色的渐变,牛奶一般都是用这种色来表现的。
图31
图32
再复制一层变成深蓝色,两层调成相对的波浪形状。深蓝色的移到下层。牛奶就画好了。
图33
图34
把我们画好的奶瓶整体复制一下,Ctrl+B打散,把瓶子中心的部分去掉,生成Movieclip,再加一个模糊滤镜,这样影子就做好了。你当然可以使用阴影或到PS中修改,我这样做是为了瓶身的透明。
图35
图36
至此,一个小奶瓶就做好了。这里有一个经过进一步调整后的奶瓶,具体的方式和细节就看你自己的发挥了。
图37
图38
你可以通过Axialis IconWorkshop之类的软件生成图标,也可以做任意其它用途。我喜欢用FLASH做图标的原因就在于它是全矢量的,而且可以直接用在FLASH程序中,体积非常小,这个奶瓶生成的整个SWF文件只有1744Byte。
Flash AS教程:制作会眨眼的美女
文章出处:中国教程网论坛 作者:zctmh0336 发布时间:2009-11-04收藏到QQ书签
本教程主要用Flash AS3来编写一个会眨眼的美女效果教程,眼睛的眨眼过度处理的比较自然,整体的效果就出来了
来看看会眨眼的美女:
详细代码:400多行哦,要有耐心的。
var thAStext:TextField =new TextField();
thAStext.autoSize="left";
thAStext.x=10;
thAStext.y=4;
thAStext.text="2009年9月21日    AS3.0实例";
var thAS_fmt:TextFormat =new TextFormat();
thAS_fmt.bold=true;
thAS_fmt.color=0x990000;
thAS_fmt.font="Arial";
thAS_fmt.size=14;
thAStext.setTextFormat(thAS_fmt);
addChild(thAStext);
var emailtext:TextField =new TextField();
emailtext.autoSize="left";
emailtext.x=280;
emailtext.y=375;
emailtext.text=http://www.missyuan.net;
var email_fmt:TextFormat =new TextFormat();
email_fmt.bold=true;
email_fmt.color=0x990000;
email_fmt.font="Arial";
email_fmt.size=14;
emailtext.setTextFormat(email_fmt);
addChild(emailtext);
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance=5;
shadow.angle=45;
shadow.color=0x000066;
var slmtext:TextField =new TextField();
slmtext.autoSize="left";
slmtext.x=110;
slmtext.y=25;
slmtext.text="AS3.0纯脚本画眨眼女孩";
var slm_fmt:TextFormat =new TextFormat();
slm_fmt.bold=true;
slm_fmt.color=0xff0000;
slm_fmt.font="方正行楷繁体";
slm_fmt.size=30;
slmtext.setTextFormat(slm_fmt);
slmtext.filters=[shadow];
addChild(slmtext);
var myspe:Sprite =new Sprite();
function eye() {
myspe.graphics.clear();
myspe.graphics.lineStyle(2, 0x000000, 1);
myspe.graphics.moveTo(133, 178);
myspe.graphics.curveTo(116, 166, 104, 183);
myspe.graphics.moveTo(132, 181);
myspe.graphics.curveTo(116, 169, 104, 184);
myspe.graphics.moveTo(132, 184);
myspe.graphics.curveTo(117, 170, 104, 184);
myspe.graphics.moveTo(128, 193);
myspe.graphics.curveTo(119, 197, 109, 193);
myspe.graphics.moveTo(126, 179);
myspe.graphics.curveTo(130, 191, 121, 195);
myspe.graphics.moveTo(117, 195);
myspe.graphics.curveTo(106, 184, 116, 175);
myspe.graphics.lineStyle(0, 0x000000, 1);
myspe.graphics.moveTo(115, 179);
myspe.graphics.curveTo(118, 180, 118, 183);
myspe.graphics.curveTo(116, 185, 113, 183);
myspe.graphics.curveTo(114, 190, 119, 191);
myspe.graphics.curveTo(125, 190, 125, 185);
myspe.graphics.curveTo(124, 177, 115, 179);
myspe.graphics.lineStyle(2, 0x000000,1);
myspe.graphics.moveTo(151, 185);
myspe.graphics.curveTo(151, 177, 160, 173);
myspe.graphics.curveTo(168, 171, 173, 176);
myspe.graphics.moveTo(154, 180);
myspe.graphics.curveTo(162, 170, 171, 178);
myspe.graphics.moveTo(163, 174);
myspe.graphics.curveTo(170, 175, 170, 182);
myspe.graphics.moveTo(155, 192);
myspe.graphics.curveTo(163, 195, 167, 191);
myspe.graphics.moveTo(160, 175);
myspe.graphics.curveTo(153, 181, 155, 189);
myspe.graphics.curveTo(157, 192, 161, 192);
myspe.graphics.curveTo(171, 188, 163, 176);
myspe.graphics.lineStyle(0, 0x000000, 1);
myspe.graphics.moveTo(160, 180);
myspe.graphics.curveTo(162, 182, 161, 183);
myspe.graphics.curveTo(159, 184, 158, 182);
myspe.graphics.curveTo(156, 187, 160, 189);
myspe.graphics.curveTo(164, 189, 164, 185);
myspe.graphics.curveTo(164, 180, 160, 180);
addChild(myspe);
}
eye();
function eyeB() {
myspe.graphics.clear();
myspe.graphics.lineStyle(3, 0x000000, 1);
myspe.graphics.moveTo(133, 185);
myspe.graphics.curveTo(126, 176, 104, 183);
myspe.graphics.moveTo(128, 186);
myspe.graphics.curveTo(119, 187, 109, 186);
myspe.graphics.lineStyle(3, 0x000000, 1);
myspe.graphics.moveTo(151, 185);
myspe.graphics.curveTo(161, 177, 173, 186);
myspe.graphics.moveTo(155, 187);
myspe.graphics.curveTo(163, 188, 168, 187);
addChild(myspe);
}
addEventListener(Event.ENTER_FRAME,ey);
var i:uint=0;
function ey(ev:Event) {
i<1000?i++:i=0;
if (i%25<3) {
eyeB();
} else {
eye();
}
}
var mysp:Sprite =new Sprite();
mysp.graphics.lineStyle(0, 0x000000, 1);
mysp.graphics.beginFill(0x000000, 1);
mysp.graphics.moveTo(138, 164);
mysp.graphics.curveTo(119, 160, 98, 165);
mysp.graphics.curveTo(120, 155, 138, 164);
mysp.graphics.moveTo(156, 166);
mysp.graphics.curveTo(166, 162, 174, 164);
mysp.graphics.lineTo(174, 161);
mysp.graphics.curveTo(164, 160, 156, 166);
mysp.graphics.endFill();
mysp.graphics.lineStyle(2, 0xcc6600, 1);
mysp.graphics.moveTo(148, 185);
mysp.graphics.curveTo(147, 195, 153, 203);
mysp.graphics.curveTo(147, 207, 147, 209);
mysp.graphics.moveTo(130, 219);
mysp.graphics.lineTo(152, 218);
mysp.graphics.lineStyle(3, 0xcc6600, 0.4);
mysp.graphics.moveTo(133, 225);
mysp.graphics.lineTo(143, 225);
mysp.graphics.lineStyle(1, 0xcc6600, 1);
mysp.graphics.moveTo(174, 145);
mysp.graphics.curveTo(176, 157, 175, 172);
mysp.graphics.curveTo(173, 181, 172, 186);
mysp.graphics.lineTo(169, 212);
mysp.graphics.curveTo(169, 217, 164, 224);
mysp.graphics.lineTo(148, 242);
mysp.graphics.curveTo(144, 246, 135, 246);
mysp.graphics.curveTo(112, 242, 96, 230);
mysp.graphics.moveTo(71, 168);
mysp.graphics.curveTo(68, 164, 63, 164);
mysp.graphics.curveTo(58, 164, 55, 172);
mysp.graphics.curveTo(56, 191, 68, 204);
mysp.graphics.lineTo(74, 206);
mysp.graphics.lineStyle(1, 0xcc6600, 0.6);
mysp.graphics.moveTo(70, 174);
mysp.graphics.curveTo(67, 170, 63, 169);
mysp.graphics.curveTo(54, 174, 62, 185);
mysp.graphics.curveTo(68, 200, 72, 192);
mysp.graphics.moveTo(71, 180);
mysp.graphics.curveTo(71, 177, 68, 177);
mysp.graphics.curveTo(65, 177, 65, 180);
mysp.graphics.curveTo(66, 185, 64, 189);
mysp.graphics.curveTo(70, 200, 72, 189);
mysp.graphics.curveTo(67, 184, 71, 181);
mysp.graphics.lineStyle(1, 0xffcc00, 1);
mysp.graphics.moveTo(47, 151);
mysp.graphics.curveTo(55, 93, 113, 85);
mysp.graphics.lineTo(115, 87);
mysp.graphics.lineTo(116, 85);
mysp.graphics.curveTo(170, 92, 195, 130);
mysp.graphics.curveTo(207, 158, 194, 164);
mysp.graphics.curveTo(207, 152, 185, 123);
mysp.graphics.curveTo(203, 150, 189, 169);
mysp.graphics.curveTo(193, 150, 186, 138);
mysp.graphics.curveTo(197, 169, 179, 179);
mysp.graphics.curveTo(190, 174, 184, 145);
mysp.graphics.moveTo(176, 127);
mysp.graphics.curveTo(190, 165, 178, 174);
mysp.graphics.curveTo(184, 159, 178, 137);
mysp.graphics.curveTo(182, 156, 173, 169);
mysp.graphics.curveTo(179, 155, 175, 139);
mysp.graphics.moveTo(171, 123);
mysp.graphics.curveTo(181, 153, 164, 167);
mysp.graphics.curveTo(176, 146, 168, 127);
mysp.graphics.curveTo(175, 149, 159, 160);
mysp.graphics.curveTo(171, 141, 166, 129);
mysp.graphics.moveTo(161, 113);
mysp.graphics.curveTo(175, 141, 144, 164);
mysp.graphics.curveTo(161, 151, 161, 128);
mysp.graphics.moveTo(158, 127);
mysp.graphics.curveTo(159, 151, 143, 164);
mysp.graphics.curveTo(157, 147, 155, 119);
mysp.graphics.curveTo(152, 144, 120, 157);
mysp.graphics.curveTo(157, 136, 152, 106);
mysp.graphics.moveTo(150, 115);
mysp.graphics.curveTo(146, 139, 130, 150);
mysp.graphics.curveTo(140, 140, 147, 117);
mysp.graphics.curveTo(132, 149, 113, 153);
mysp.graphics.moveTo(145, 121);
mysp.graphics.curveTo(139, 132, 126, 141);
mysp.graphics.curveTo(116, 154, 97, 160);
mysp.graphics.moveTo(118, 141);
mysp.graphics.curveTo(103, 156, 98, 156);
mysp.graphics.moveTo(118, 141);
mysp.graphics.curveTo(105, 149, 98, 155);
mysp.graphics.curveTo(87, 162, 70, 163);
mysp.graphics.moveTo(101, 156);
mysp.graphics.curveTo(94, 163, 72, 163);
mysp.graphics.moveTo(71, 164);
mysp.graphics.curveTo(72, 222, 105, 318);
mysp.graphics.moveTo(74, 164);
mysp.graphics.curveTo(74, 185, 78, 205);
mysp.graphics.moveTo(77, 164);
mysp.graphics.curveTo(75, 194, 88, 241);
mysp.graphics.moveTo(80, 165);
mysp.graphics.curveTo(90, 245, 101, 292);
mysp.graphics.moveTo(72, 187);
mysp.graphics.curveTo(73, 225, 80, 250);
mysp.graphics.moveTo(82, 165);
mysp.graphics.curveTo(82, 210, 103, 259);
mysp.graphics.moveTo(85, 164);
mysp.graphics.lineTo(84, 193);
mysp.graphics.moveTo(90, 162);
mysp.graphics.lineTo(85, 171);
mysp.graphics.moveTo(95, 162);
mysp.graphics.lineTo(84, 177);
mysp.graphics.moveTo(172, 183);
mysp.graphics.curveTo(180, 247, 187, 263);
mysp.graphics.curveTo(200, 294, 195, 334);
mysp.graphics.moveTo(171, 200);
mysp.graphics.curveTo(174, 230, 182, 258);
mysp.graphics.moveTo(171, 212);
mysp.graphics.curveTo(170, 226, 183, 274);
mysp.graphics.curveTo(196, 314, 190, 331);
mysp.graphics.moveTo(168, 219);
mysp.graphics.curveTo(168, 234, 176, 263);
mysp.graphics.moveTo(165, 224);
mysp.graphics.lineTo(168, 242);
mysp.graphics.moveTo(163, 227);
mysp.graphics.curveTo(161, 251, 184, 296);
mysp.graphics.moveTo(166, 240);
mysp.graphics.curveTo(170, 253, 171, 268);
mysp.graphics.moveTo(173, 261);
mysp.graphics.curveTo(175, 272, 180, 281);
mysp.graphics.curveTo(188, 295, 189, 330);
mysp.graphics.lineStyle(2, 0xff0000, 1);
mysp.graphics.moveTo(68, 165);
mysp.graphics.lineTo(75, 154);
mysp.graphics.curveTo(68, 155, 62, 150);
mysp.graphics.curveTo(60, 150, 55, 154);
mysp.graphics.lineTo(50, 155);
mysp.graphics.lineTo(46, 163);
mysp.graphics.curveTo(49, 163, 50, 161);
mysp.graphics.curveTo(55, 162, 57, 166);
mysp.graphics.curveTo(62, 162, 68, 165);
mysp.graphics.moveTo(47, 159);
mysp.graphics.lineTo(58, 159);
mysp.graphics.curveTo(58, 156, 55, 157);
mysp.graphics.moveTo(44, 154);
mysp.graphics.lineTo(39, 148);
mysp.graphics.lineTo(18, 153);
mysp.graphics.curveTo(20, 160, 14, 167);
mysp.graphics.lineTo(30, 161);
mysp.graphics.curveTo(38, 164, 43, 163);
mysp.graphics.curveTo(40, 156, 44, 154);
mysp.graphics.moveTo(42, 157);
mysp.graphics.lineTo(36, 159);
mysp.graphics.lineTo(30, 157);
mysp.graphics.moveTo(44, 154);
mysp.graphics.curveTo(50, 150, 52, 153);
mysp.graphics.moveTo(44, 164);
mysp.graphics.curveTo(38, 167, 32, 166);
mysp.graphics.lineTo(22, 170);
mysp.graphics.lineTo(14, 170);
mysp.graphics.lineTo(4, 177);
mysp.graphics.curveTo(15, 179, 13, 191);
mysp.graphics.curveTo(22, 173, 43, 166);
mysp.graphics.curveTo(53, 182, 41, 203);
mysp.graphics.curveTo(53, 195, 62, 209);
mysp.graphics.lineTo(61, 196);
mysp.graphics.moveTo(57, 168);
mysp.graphics.curveTo(50, 169, 48, 163);
mysp.graphics.lineStyle(1, 0x9900ff, 1);
mysp.graphics.moveTo(31, 171);
mysp.graphics.curveTo(13, 201, 21, 210);
mysp.graphics.moveTo(37, 168);
mysp.graphics.curveTo(15, 204, 24, 214);
mysp.graphics.moveTo(31, 187);
mysp.graphics.curveTo(20, 213, 31, 218);
mysp.graphics.moveTo(35, 195);
mysp.graphics.curveTo(27, 225, 37, 224);
mysp.graphics.moveTo(34, 206);
mysp.graphics.curveTo(35, 224, 40, 222);
mysp.graphics.moveTo(44, 167);
mysp.graphics.curveTo(33, 221, 44, 225);
mysp.graphics.moveTo(41, 209);
mysp.graphics.curveTo(42, 228, 52, 228);
mysp.graphics.moveTo(47, 199);
mysp.graphics.curveTo(43, 228, 57, 227);
mysp.graphics.moveTo(49, 199);
mysp.graphics.curveTo(50, 226, 60, 228);
mysp.graphics.curveTo(71, 227, 66, 202);
mysp.graphics.moveTo(64, 200);
mysp.graphics.curveTo(62, 244, 54, 201);
mysp.graphics.curveTo(61, 240, 60, 204);
mysp.graphics.lineStyle(2, 0xff0000, 1);
mysp.graphics.moveTo(189, 169);
mysp.graphics.curveTo(192, 166, 195, 169);
mysp.graphics.curveTo(199, 174, 206, 176);
mysp.graphics.curveTo(196, 181, 196, 191);
mysp.graphics.curveTo(190, 178, 181, 179);
mysp.graphics.curveTo(188, 182, 188, 186);
mysp.graphics.curveTo(189, 189, 194, 188);
mysp.graphics.moveTo(187, 173);
mysp.graphics.lineTo(193, 175);
mysp.graphics.moveTo(197, 184);
mysp.graphics.lineTo(208, 189);
mysp.graphics.lineTo(204, 193);
mysp.graphics.curveTo(199, 190, 189, 205);
mysp.graphics.curveTo(188, 192, 184, 190);
mysp.graphics.curveTo(182, 189, 182, 183);
mysp.graphics.curveTo(179, 182, 180, 179);
mysp.graphics.lineStyle(1, 0x9900ff, 1);
mysp.graphics.moveTo(198, 193);
mysp.graphics.curveTo(207, 207, 193, 216);
mysp.graphics.moveTo(194, 203);
mysp.graphics.curveTo(195, 215, 188, 221);
mysp.graphics.moveTo(189, 204);
mysp.graphics.curveTo(192, 214, 186, 225);
mysp.graphics.curveTo(183, 227, 178, 224);
mysp.graphics.moveTo(180, 181);
mysp.graphics.curveTo(178, 186, 181, 191);
mysp.graphics.curveTo(187, 210, 182, 224);
mysp.graphics.moveTo(177, 181);
mysp.graphics.curveTo(176, 189, 180, 198);
mysp.graphics.curveTo(186, 213, 179, 223);
mysp.graphics.moveTo(181, 202);
mysp.graphics.curveTo(181, 219, 177, 218);
mysp.graphics.moveTo(176, 182);
mysp.graphics.curveTo(178, 199, 174, 205);
mysp.graphics.lineStyle(2, 0x000000, 1);
mysp.graphics.moveTo(80, 248);
mysp.graphics.curveTo(74, 248, 79, 253);
mysp.graphics.lineTo(79, 259);
mysp.graphics.lineTo(85, 265);
mysp.graphics.moveTo(103, 293);
mysp.graphics.curveTo(113, 319, 123, 335);
mysp.graphics.moveTo(76, 249);
mysp.graphics.curveTo(76, 259, 70, 263);
mysp.graphics.curveTo(84, 271, 90, 283);
mysp.graphics.moveTo(106, 318);
mysp.graphics.lineTo(112, 336);
mysp.graphics.moveTo(69, 263);
mysp.graphics.curveTo(29, 284, 29, 295);
mysp.graphics.curveTo(18, 331, 16, 372);
mysp.graphics.curveTo(33, 377, 55, 374);
mysp.graphics.curveTo(56, 369, 68, 369);
mysp.graphics.curveTo(73, 375, 65, 377);
mysp.graphics.moveTo(47, 292);
mysp.graphics.curveTo(56, 312, 69, 329);
mysp.graphics.curveTo(63, 334, 63, 340);
mysp.graphics.moveTo(57, 312);
mysp.graphics.curveTo(60, 339, 69, 356);
mysp.graphics.lineTo(67, 358);
mysp.graphics.moveTo(65, 353);
mysp.graphics.lineTo(69, 370);
mysp.graphics.lineStyle(1, 0x000000, 1);
mysp.graphics.moveTo(18, 363);
mysp.graphics.curveTo(40, 367, 48, 365);
mysp.graphics.curveTo(55, 359, 66,360);
mysp.graphics.moveTo(19, 374);
mysp.graphics.curveTo(18, 387, 20, 400);
mysp.graphics.moveTo(64, 370);
mysp.graphics.curveTo(65, 388, 67, 400);
mysp.graphics.moveTo(83, 255);
mysp.graphics.curveTo(83, 260, 80, 261);
mysp.graphics.moveTo(137, 248);
mysp.graphics.curveTo(137, 259, 139, 269);
mysp.graphics.moveTo(138, 263);
mysp.graphics.curveTo(142, 267, 148, 268);
mysp.graphics.lineStyle(2, 0x000000, 1);
mysp.graphics.moveTo(138, 254);
mysp.graphics.curveTo(156, 263, 157, 310);
mysp.graphics.curveTo(161, 327, 162, 335);
mysp.graphics.moveTo(141, 258);
mysp.graphics.curveTo(156, 270, 173, 273);
mysp.graphics.moveTo(159, 269);
mysp.graphics.curveTo(168, 289, 166, 314);
mysp.graphics.curveTo(167, 328, 169, 336);
mysp.graphics.moveTo(193, 287);
mysp.graphics.lineTo(202, 298);
mysp.graphics.curveTo(208, 336, 222, 365);
mysp.graphics.lineTo(215, 373);
mysp.graphics.lineTo(213, 374);
mysp.graphics.lineTo(195, 371);
mysp.graphics.moveTo(186, 307);
mysp.graphics.curveTo(181, 333, 185, 337);
mysp.graphics.lineTo(186, 342);
mysp.graphics.moveTo(63, 344);
mysp.graphics.curveTo(72, 338, 84, 337);
mysp.graphics.curveTo(103, 338, 140, 335);
mysp.graphics.curveTo(170, 335, 190, 347);
mysp.graphics.lineTo(187, 353);
mysp.graphics.moveTo(183, 346);
mysp.graphics.curveTo(205, 368, 185, 396);
mysp.graphics.lineStyle(1, 0x000000, 1);
mysp.graphics.moveTo(213, 373);
mysp.graphics.lineTo(213, 400);
mysp.graphics.lineStyle(2, 0xcc6633,0.6);
mysp.graphics.moveTo(136, 329);
mysp.graphics.curveTo(136, 331, 139, 335);
mysp.graphics.moveTo(131, 324);
mysp.graphics.curveTo(132, 325, 136, 329);
mysp.graphics.moveTo(139, 324);
mysp.graphics.curveTo(138, 325, 136, 329);
mysp.graphics.lineStyle(4, 0xcc6600, 0.2);
mysp.graphics.moveTo(131, 284);
mysp.graphics.curveTo(141, 280, 151, 282);
mysp.graphics.moveTo(119, 284);
mysp.graphics.curveTo(109, 280, 100, 284);
mysp.graphics.moveTo(123, 280);
mysp.graphics.curveTo(126, 282, 128, 279);
mysp.graphics.lineStyle(7, 0x000000, 0.1);
mysp.graphics.moveTo(79, 343);
mysp.graphics.curveTo(90, 339, 101, 341);
mysp.graphics.lineTo(155, 341);
mysp.graphics.curveTo(167, 339, 184, 349);
mysp.graphics.moveTo(72, 396);
mysp.graphics.curveTo(128, 389, 180, 397);
mysp.graphics.lineStyle(2, 0xff9933, 0.2);
mysp.graphics.moveTo(132, 93);
mysp.graphics.curveTo(144, 95, 152, 105);
addChild(mysp);
Flash CS4制作梦幻的星火飘落效果
文章出处:动画设计与制作208例 作者:lby 发布时间:2009-10-14收藏到QQ书签
本例主要是在上一个实例的基础上进行扩展,计算鼠标跟随对象来产生具有一定规律的星火特效。
',4)">
本例思路
导入背景素材,然后制作出星火特效。
创建文档类,产生鼠标跟随的多角星形特效;创建元件类的扩展类,产生随机大小的火花效果。
Part 1 制作星火特效
(1)新建一个大小为500×300像素,帧频为30fps的空白文档。按Ctrl+R组合键导入本书配套光盘中的“Chapter08/素材/西湖夜景.jpg”文件,然后设置其坐标为(0,0),如图8-1所示,再采用前面的方法在“属性”面板中添加Main文档类。
图8-1 导入背景
(2)按Ctrl+F8组合键新建一个影片剪辑(名称为Star_mc),进入该影片剪辑的编辑区域,然后按住Shift+Alt组合键的同时使用“椭圆工具”在该影片剪辑的中心点绘制一个圆形。
图8-2 绘制圆形
技巧与提示:
图形的填充色类型为“放射状”,第1个色标颜色为(R:255,G:0,B:0),第2个色标颜色为(R:153,G:0,B:0),第3个色标颜色为(R:153,G:0,B:0),Alpha为0%。
(3)新建一个star图层,再单击“工具箱”中的“多角星形工具”按钮 ,并在“属性”面板中设置好该工具的参数,然后按住Shift+Alt组合键的同时在影片剪辑的中心点绘制一个如图8-3所示的星形。
图8-3 绘制多角星形
(4)使用“选择工具”调整好星形的顶点位置,如图8-4所示。
图8-4 调整顶点
(5)选择调整好的多角星形,然后原位复制出一份,按Ctrl+Alt+S组合键打开“缩放和旋转”对话框,设置缩放为40%,再设置其颜色为白色,如图8-5所示。
图8-5 拷贝并缩放图形
(6)返回到“场景1”,按Ctrl+F8组合键新建一个影片剪辑(名称为Magic_mc),再设置填充类型为“放射状”,第1个色标颜色为(R:255,G:255,B:255), 第2个色标颜色为(R:255,G:255,B:204),第3个色标颜色为(R:255,G:204,B:0),第4个色标颜色为(R:255,G:102,B:0),第5个色标颜色为(R:153,G:0,B:0),Alpha为0%,然后按住Alt键的同时使用“矩形工具”以该影片剪辑中心点为起点绘制一个如图8-6所示的矩形。
图8-6 绘制矩形
(7)使用“任意变形工具”选择矩形,然后按Ctrl+T组合键打开“变形”面板,设置旋转为45°,再单击“重制选区和变形”按钮 ,复制出3份图形,如图8-7所示。
图8-7 复制图形
(8)复制出5个图形,然后将其调整成如图8-8所示的颜色,再将复制出的图形转换为影片剪辑,并将其分别命名为01、02、03、04和05 。
图8-8 复制图形
(9)将01、02、03、04和05 影片剪辑分别放置在Magic_mc图层的5个关键帧上,然后分别为其添加不同的“发光”滤镜,再新建一个AS图层,最后在“动作-帧”面板中输入stop():程序,如图8-9所示。
图8-9 应用滤镜效果
Part 2 创建元件类
(1)采用前面的方法分别为Magic_mc和Star_mc影片剪辑添加元件类,如图8-10所示。
图8-10 添加元件类
(2)新建一个ActionScript文件,将其命名为Main,然后将其保存在该实例的文件夹中,再输入控制代码。
/**
* 该类为主程序类
* @author lbynet
* @version 0.1
*/
package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.ui.Mouse;
public class Main extends Sprite {
private var star:MovieClip;
public function Main() {
Mouse.hide();
this.star = new Star_mc();
addChild(star);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
}
private function moveHandler(e:MouseEvent):void {
this.star.x = stage.mouseX;
this.star.y = stage.mouseY;
var _mc = new Magic_mc();
_mc.x = stage.mouseX;
_mc.y = stage.mouseY;
addChild(_mc);
_mc.addEventListener(Event.ENTER_FRAME, RemoveDrop);
}
private function RemoveDrop(event:Event) {
var _mc:MovieClip = event.target as MovieClip;
if (_mc.scaleX <= 0) {
_mc.removeEventListener(Event.ENTER_FRAME, RemoveDrop);
removeChild(_mc);
}
//trace(this.numChildren)
}
}
}
技巧与提示:
该文档类基本包含了“星星洒落”实例中Main文档类的知识,此外第18行代码为Mouse类的hide()方法,用于隐藏鼠标指针,在使用该方法前必须先导入Mouse类(如第11行代码)。
该文档类定义了一个私有属性Star,第19行代码是为该属性赋值,值为所创建的元件类(Star_mc),并将其添加到显示列表中(如第20行代码),而24和25行代码是为该元件类应用鼠标跟随效果。
(3)同样新建一个ActionScript文件,然后输入控制代码。
/**
* 该类为扩展元件类
* @author lbynet
* @version 0.1
*/
package {
import flash.display.MovieClip;
import flash.events.Event;
public class Magic_mc extends MovieClip {
private var dis:Number;
public function Magic_mc() {
init();
}
private function init() {
var Random = 1 + Math.round(Math.random()*4);
this.gotoAndStop(Random);
this.scaleX = this.scaleY = Math.random();
//产生随机数-5到5之间的随机数
dis = Math.round((Math.random()-.5)*10);
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function enterFrameHandler(event:Event) {
this.y += 5;
this.x += dis;
this.scaleX -=.005;
this.scaleY -=.005;
}
}
}
技巧与提示:
第19和20行代码是为该元件类创建一个1~5之间的随机数,使该影片剪辑元件类在实例化(被创建时)时将播放头移到并停止在指定的时间帧上。
Math.random()方法产生0~1之间的随机数,Math.random()*4方法返回到0~4之间的随机数,而Math.round()方法用于向上或向下舍入为最接近的整数并返回该值,所以1+Math.round(Math.random()*4)方法取得1~5之间的随机整数值;gotoAndStop()语句使影片剪辑的播放头移到并停止在指定的时间帧上。
通过使用Math.random()-0.5 方法来生成-0.5~0.5之间的随机数,然后乘以10得到-5~5之间的随机数,再使用Math.round方法进行舍入并取得整数,这样当鼠标指针由下往上移动时,就会产生星火飘落的效果,如图8-11所示。
图8-11  星火飘落效果
第30行代码是为火花加入y轴坐标方向上的一个固定加速度,而第31行代码则是火花在x轴坐标方向上的一个-5~5之间的随机加速度值。
(4)按Ctrl+Enter组合键发布程序
Flash制作汽车线条逐渐显示动画
文章出处:Hv-Designs.co.uk 作者:Websbook.com翻译 发布时间:2009-10-30收藏到QQ书签
这次我们用flash动画中的遮罩来制作线条从无到有显示的汽车轮廓动画效果,完成后的最后效果在教程末尾
在flash中新建立一文件,大小可以放进你准备的图片,这里我使用640x480px,白色背景.然后将汽车图片导入到flash中,"文件>导入>导入到舞台"
在图层1的第一针上你因该可以看到你导入的汽车图片
点击汽车图片,你会发现图片周围显示灰色的框,说明图片已经被选中,随后按F8将图片转换为元件,在名称中打入"VWGOLF",在类型中选择"影片剪辑"!
按"确定"后,一个影片剪辑就完成了,双击这个影片剪辑,我们会进入名为"VWGOLF"的场景中
现在"场景1"是我们的主场景,场景"VWGOLF"是次场景
点"插入图层"新建一图层,新图层命名为LINES,并将我们之前的图片图层锁定
选择"线条工具"勾选汽车轮胎部分,如下面的动态图片过程
然后使用钢笔工具勾出整个汽车轮廓(所有的轮廓因该在新键的图层中画出)
现在我们为轮廓增加遮罩层(遮罩的原理是被遮罩的部分会显示,不显示未遮罩部分,flash里的渐隐基本都是使用此功能来做的)
新建一图层作为遮罩层,用刷子工具(设置如下图)沿着汽车轮廓图进行描边(请注意所有的描边因该在遮罩层上而不是汽车轮廓层上)
这里我们每描一部分线条,按一次F6键,建立一个关键针,(这样做的目的是最后汽车轮廓可以逐步显示出来)你可以查看下面的动态展示图
在mask层上按右键,将此层转换为遮罩层
我们复制图层,用同样的方法制作轮胎部分的遮罩效果,针数与前面的相同
现在我们回到图片所在的图层,拖动图片元件到25针左右
同时在第60针新建一关键针,按F6
选中图片元件(在最外面的主场景中),在低部属性中设置颜色为"高级",按右边设置按钮!
跳出windows框,设置参数如下
在图片层第30~60针之间随意点上右击,选"创建补间动画"
这样图片的渐隐效果动画就制作完成了
最后完成效果如下,遮罩会逐一显示汽车轮廓,当读到第30针时汽车图片会通过渐隐的补间动画慢慢显示出来
Flash AS3制作个性的旋转圆形网页导航
文章出处:网页教学网 作者:闪电儿翻译 发布时间:2009-12-04收藏到QQ书签
Flash AS3制作个性的旋转圆形网页导航,最终效果如下。
2、重命名“layer 1″为 “actions”,我们使用http://blog.greensock.com/tweenlite/的小而美的Tweening Engine,下载AS3的压缩包,然后解压缩到com目录然后把这个目录放到menu.fla文件的文件夹中。
3、用矩形工具绘制一个黑色的矩形,转换为MC影片剪辑,打开属性窗口
4、双击这个影片剪辑编辑它,使用文本工具,设置为动态文本,绘制一个区域,设置颜色是白色,命名实例名为abelBtn。

5、回到场景1,删除掉刚刚建立的影片剪辑。
6、我们选择第一帧,然后打开动作面板,输入下面代码,主要是为了导入Tweenlite engine。
import com.greensock.*;
import com.greensock.easing.*;
7、然后创建一个数字,动态调用每个菜单的项目文字。
var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];
var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);
8、用一个函数buildMenu来实现每个菜单项目。
function buildMenu(){
var btn:myButton;
var angle:int=360/menu_items.length;
for (var i:int = 0; i< menu_items.length; i++){
btn = new myButton();
btn.buttonMode=true;
btn.labelBtn.text = menu_items[i];
btn.mouseChildren=false;
menu.addChild(btn);
TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}
}
9、最后添加一个监听单击事件的代码。
menu.addEventListener(MouseEvent.CLICK,clickHandler );
function clickHandler(e:MouseEvent ):void{
// TO DO ...
trace(myButton(e.target).labelBtn.text);
}
10、所有代码如下。
import com.greensock.*;
import com.greensock.easing.*;
var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];
var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);
buildMenu();
function buildMenu(){
var btn:myButton;
var angle:int=360/menu_items.length;
for (var i:int = 0; i< menu_items.length; i++){
btn = new myButton();
btn.buttonMode=true;
btn.labelBtn.text = menu_items[i];
btn.mouseChildren=false;
menu.addChild(btn);
TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}
}
menu.addEventListener(MouseEvent.CLICK,clickHandler );
function clickHandler(e:MouseEvent ):void{
// TO DO ...
trace(myButton(e.target).labelBtn.text);
}