动起来的代码!为设计师打造的As3+GSAP新手入门教程 - 优设-UISDC

动起来的代码!为设计师打造的As3+GSAP新手入门教程

2015/07/24 7990评论区

as3-gsap-introduction-tutorials-1

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 堪称业界良心的动画引擎,别担心,依然是复制粘贴代码就可以看到动画效果。

谢谢观看~

 【动效神器Hype零基础入门教程系列】

先聊一下这个软件的强大功能,附上简单教程!
《Sketch神助攻!无代码做动效神器Hype3入门教程》

台湾设计师叫你用Hype做原型过场!
《无代码动效神器!教你用HYPE3做APP原型的基础过场(附神器)》

美丫姐手把手教你用Hype做Path菜单动画!
《比AE还方便!教你用HYPE无代码制作PATH扇形菜单动画》

投稿者:@每日一动刘嘉伟

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量98万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/as3-gsap-introduction-tutorials

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 产品设计 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里