分享
 
 
 

为设计师打造的AS3+GSAP新手入门教程

王朝学院·作者佚名  2016-08-30
窄屏简体版  字體: |||超大  

5月的时候,开始坚持每天做一个小动画,发到我的微博@每日一动刘嘉伟 上,到现在也快三个月。有人问是用什么做的,我回答 as3 + Gasp,然后就没有然后了。今天这枚教程想告诉你的是,动画木有你想象中那么难,而且它还很有趣。体验下你就知道咯

动画基本都是纯代码写成的,其实代码写动画并没有想象的复杂,给每样东西起好名字,然后指挥它们谁谁,什么时间做什么事情就好了。

以前看过很多教程,一步步跟着做,但总会在中间某一步骤卡住,没法完成,就像《HOW TO DRAW A HORSE》一样坑!

我在看一些代码“入门级”书的时候,书里还是会默认你已经掌握一些“常识”,可我并不知道啊!总是无法做出最终效果,严重影响积极性。

我想,如果把步骤反过来,直接给出最终效果的代码,复制粘贴进去,一发布就是华丽的效果。然后就想玩玩具一样,改一下代码里的数字,看看有什么变化,在这个基出上改一个独一无二的版本出来,这样会开心很多 :)

= 。= || = 。= || = 。= || = 。= || 严肃的分割线 || = 。= || = 。= || = 。= || = 。=

先下载软件:

官网地址,注册一下就可以下载,30 天免费试用,最新版是 CC2015,但之前 CS3 —— CS6 版本也没问题可以使用:https://creative.adobe.com

因为我用的是 Mac 英文版Flash,防止菜单名称对不上,我就直接用快捷键表示。如果我也犯了“默认大家都知道的常识”这个毛病,请告诉我,我再详解。

(Flash 安装中…)

(叮~)

(安装完毕! ╮( ̄▽ ̄)╭ )

准备运行第一个动画代码吧~

1、新建文档: Windows 快捷键 【Ctrl + N】

Mac 快捷键 【? + N】

这时会弹出一个面板:

左边默认就是 AS3 语言,不用改。

右边按照标示,把场景宽高设置成 400 像素,当然其他大小也可以,你高兴就好。

Flash 的默认帧率好像是 12,改成 60,然后点【OK】,新建这个文档。

文档新建以后,各种面板可能不熟悉,也没关系,不用理会,用快捷键把我们需要的代码面板调出来就好。

2、打开代码面板 Windows 快捷键 【Alt + F9】

Mac 快捷键 【option + F9】

会出现下面这样的面板

为了保护眼睛,我把面板背景色设置成了黑色,大家代码面板应该是白色的。

3、复制粘贴代码

复制下面的代码,粘贴到 Flash 代码面板里

var box:Shape = new Shape();

var i:int;

var count:int;

addChild(box);

box.y = stage.stageHeight/2;//可以把 "=" 后面的值换成 0 ~ 400 之间的数字,发布看有什么效果

addEventListener(Event.ENTER_FRAME, wave);

function wave(e:Event)

{

count += 1.5;//可以把 "1.5" 替换成其他数字,发布看有什么效果

box.graphics.clear();

box.graphics.beginFill(0x000000, 1); //"0x000000" 是 16 进制颜色值,替换成 "0xFF0000" 看看效果

for(i = 0; i < stage.stageWidth + 1; i++)

{

box.graphics.lineTo(i, Math.sin((i - count)*Math.PI/180) * i / 4);

}

box.graphics.lineTo(stage.stageWidth, stage.stageHeight);

box.graphics.lineTo(0, stage.stageHeight/2);

box.graphics.lineTo(0, 0);

box.graphics.endFill();

}

粘贴进代码面板

字体颜色我也设置过,所以看起来和大家会有些不同,但不影响效果

4、运行动画: Windows 快捷键【Ctrl + Enter】

Mac 快捷键【? + Enter】

如果一切正常,应该能看到下面的波浪动画

代码里有些数值可以改一下,试试效果有什么不同,如果哪步卡住了,欢迎在新浪微博 @每日一动刘嘉伟 我。

下节课,我要介绍一个动画好帮手:GASP 堪称业界良心的动画引擎,别担心,依然是复制粘贴代码就可以看到动画效果。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有