Adobe Edge设计例子之-顶部广告设计-Part-1

常用的广告的gif或flash,load进网页的时候,以图片格式读入的时候会造成效率低下
所以Edge以文字形式实现动画效果的话,会使效率大大提高。
通过下面的例子设计广告,会将adobe edge功能都有以介绍。

1.首先建立一个stage,就是桌布,大小设定为W:700  H:250,背景颜色:#d7e68d,Overflow属性为hidden。因为只有hidden的话超出桌布范围的图形就不会在实际html中出现。

2.下面开始设置里面的元素,首先是tilte,,在桌布画面写入文字”CCJK Edge Test”,在元素栏将它命名为”title”,字体”Georgia,times New Roman”,大小:30px,颜色#3a365d,粗体。
效果:标题,从右到左运动,使用“easeInBack”效果。

操作:在要运动结束那一桢设置关键帧。谨记,改变字体效果或形状的时候,一定要关掉自动关键帧属性。设好文字的状态后,文字位置放在结束或开始的位置都可以,关键是控制时间轴上的两个小块,如图所示,上面小块是当前的状态,下面的小块是相应另一端的状态,默认是在上面小块改变形状,用以达到图形文字变化效果,所以你一开始放置的是起始状态的话,上面的小块只能放在结束的位置。反之则位置调转。当你设置好前后两个小块位置的时候,在主窗口,拖动元素运动到你想要的位置,(顺便鄙视一下这个预览版,连辅助线都没有),你想平行拖动的时候,提示一下按着shift键,再用鼠标拖动或改变形状,就会垂直或水平的运动或改变。单击时间轴里面的长条形的效果,在属性那里设置easeInBack效果,(实际上看后来生成的文件就知道,使用了jquery,这效果是jquery插件的一个实现效果)。
3.slogan栏目:设置3个文字元素,“language translation”,“language service provider”,“website localization”分别命名为slogan1,slogan2,slogan3,。

效果:也是分别从右向左运动,停下来之后慢慢变成半透明效果,3个分别由上到下排列,运动实际相差一秒左右。
操作:运动的效果设置和title一样,主要提提怎么变半透明效果,因为慢慢变半透明的开始是从运动结束开始,所以在运动结束的这一点建立Opacity的关键帧,所以的变化设置都类似,调整两小块位置设置变化时间段。同理不开自动关键帧的时候设置好起始点,透明变化的结束关键点改变Opacity的值(注意:不要打开自动关键帧属性的按键)。设好其中一个slogan之后,将全部效果拷贝,分别复制到另外两个slogan里面,再调整一下在时间轴里面的位置,实现相差一秒的效果,透明最终状态,3个的效果都有差值,一个10%,15%,20%。


4.bottom块:字体下端的小方块,目的是要各位学会变形。
效果:一个浅蓝色的小方块沿着左端从天而降,到了最低端,小方块右端慢慢延长,变成一个长条。
操作:画小方块,颜色:#60617d,分析,这个效果是要分两段来操作的,一个从天而降,一个是变形,从天而降和字体移动没区别,也是先设一个关键帧,后设置运动时间段,在改变结束值。(或许还有人问怎么设关键帧,=_=# 属性前的小菱形就是了。)和上面类似,2段的效果,是先ty变化,再Width变化。设好可以微调达到需要的效果。(微调小技巧,在主窗口,点击元素后,按键盘的上下方向键微调,按住shift或ctrl再按上下左右可以改变微调速度,以实现更精确的调整。)
待续..........

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP