【FLASH秀】透明遮罩百叶窗渐隐效果,飞扬你的模块! (46/3492)

< 上一篇下一篇 >
本帖地址: 复制地址

修改 回帖 引用 楼主: 彼岸埖

用户形象图片

原文链接:http://user.qzone.qq.com/625855143/blog/1214790884

 

这次,彼岸花来教各位同学制作透明遮罩百叶窗渐隐效果。
这次的效果是非常烦琐的,建议初学者最好还是先学简单点的教程。同时,这个效果是建立在透明遮罩上的,因此,要学这个教程,彼岸花建议各位同学先学会《透明遮罩,创出不一样的效果!》这篇教程比较好。
这个效果的原理其实是非常简单的,就是N个透明遮罩的叠加。但是,正因为是N个透明遮罩,所以过程十分的繁多,一不小心就会出错。而且以彼岸花的速度,做出这么一个模块要花两个小时。所以,没耐心没时间的同学就不用学了。
废话不多说,下面就开始吧!

首先是最终效果图:
http://www.3q5.com/UUAuth/2008-6/292320531059.swf

 

1·
分别制作好放日志的底板图和一张遮罩图片。保存图片格式为PNG
如下图所示:

 
2·
⑴·在PS中打开做好的底板,双击解锁,重命名为“底板”。
拖入遮罩图片,放入适当位置,给图层重命名。
在空间截取日志图片,拖入适当位置,给图层重命名。
底板图层放在最上,下面依次为日志图层和遮罩图层。
在图层选项中单击“遮罩”层。选择“矩形选框工具”,在日志第一栏处拉一个矩形出来(矩形上部和左右两旁可稍大一些,下部不可过大)。
如下图所示:
 
⑵·把日志图层前的眼睛点掉,即可看到矩形拉出后的区域效果。
如下图所示:
 
⑶·把底板图层前的眼睛点掉,选择,反向,按一下键盘上的删除键,即可看到以下效果:
 
⑷·图像,裁减。
保存图片,命名为遮罩1,格式为PNG
­
3·
⑴·编辑,后退一步。图片返回为2·⑶中的效果。
再后退一步,则遮罩图片恢复。
把底板图层和日志图层前的眼睛点上。
选择矩形选框工具,在日志第二栏上拉一个矩形(矩形的左右旁可稍大一些,上部和下部则要谨慎选取)。
如下图所示:
 
⑵·接下来与2·⑵ 2·⑶ 2·⑷中的步骤一样。
保存图片命名为遮罩2
以此类推,直到日志最后一栏做好为止一共要做10个遮罩图片。
­
4·
⑴·打开FLASH,把大小调整好。
导入底板,把底板当中放日志的部分抠空(不会抠空的可以去彼岸花的《运用PSF8结合制作透明FLASH》里学习)。
在舞台的图上右击,转换为元件,选择图形,命名为底板。
在舞台的图上右击,剪切。
­
⑵·导入遮罩1,在舞台的图上右击,转换为元件,选择图形,命名为遮罩1
在舞台的图上右击,剪切。
­
⑶·以此类推,直到10个遮罩图全部转换为图形元件为止。
效果如下图所示:
 
5·
⑴·插入,新建元件,选择按钮,命名为底板按钮。
在“点击”处右击,插入关键帧。从库中把底板图形拖入舞台。
在属性面板中设XY值为0。在“颜色”中设置ALPHA值为0
如下图所示:
 
⑵·插入,新建元件,选择按钮,命名为1按钮。
在“点击”处右击,插入关键帧,从库中把遮罩1图形拖入舞台。
在属性面板中设XY值为0。在颜色中设ALPHA值为0
 
⑶·以此类推,直到10个遮罩按钮全部做成为止。
效果如下图所示:
 
6·
⑴·插入,新建元件,选择影片剪辑,命名为1影片。
新建5个图层,自上而下分别重命名为动作、底板、1按钮、遮罩1和底板按钮。
⑵·底板的操作:
单击底板层的第1帧,从库中把底板图形拖入到舞台。
在属性面板中设XY值为0
在底板层的第11帧处右击,插入帧。
点锁锁层。
效果如下图所示:
 
⑶·遮罩1的操作:
点击第1帧,从库中把遮罩1图形导入到舞台,调整位置(主意:位置要调整地十分谨慎)。
调整好后把XY值记在纸上(自认为记忆力强的同学可以试下不记在纸上)。
效果如下图所示:
 
在遮罩1层第2帧处右击,插入关键帧。在图上单击一下,属性面板变成图形后ALPHA值设为80
在第3帧处右击,插入关键帧。在图上单击一下,属性面板变成图形后ALPHA值设为60
4帧为40,第5帧为20
在第6帧处右击,插入空白关键帧。
在第5帧处右击,复制帧。在第7帧处右击,粘贴帧。
在第4帧处右击,复制帧。在第8帧处右击,粘贴帧。
在第3帧处右击,复制帧。在第9帧处右击,粘贴帧。
在第2帧处右击,复制帧。在第10帧处右击,粘贴帧。
在第1帧处右击,复制帧。在第11帧处右击,粘贴帧。
效果如下图所示:
 
⑷·1按钮的操作:
点击第1帧,从库中把1按钮拖入舞台。
XY轴的值设为6·⑶中的值。
效果如下图所示:
 
在第2帧处右击,插入空白关键帧。
在第11帧处右击,插入帧。
效果如下图所示:
 
单击舞台中的1按钮,当属性面板变为按钮后,在舞台中的1按钮上右击,动作,输入以下AS脚本:
on (rollOver) {
       nextFrame();
play();
}
 
⑸·底板按钮的操作:
在第6帧处右击,插入关键帧。
把库中的底板按钮拖入舞台,XY值设为0
效果如下图所示:
 
 
单击在舞台中的底板,当属性面板变成按钮后,在舞台中的底板上右击,动作,输入以下AS脚本:
on (rollOver) {
       play();
}
⑹·动作的操作:
在第1帧处右击,动作,双击“stop”。
在第6帧处右击,插入关键帧,动作,双击“stop”。
在第11帧处右击,插入帧。
效果如下图所示:
 
这样,1影片就全部做完了。
⑺·回到场景1,把库中的1影片拖入舞台。修改,对齐,左对齐,修改,对齐,顶对齐。
点一下控制中的测试影片,察看效果。如果鼠标放到遮罩1上遮罩没有变透明的话那就要及时查看自己做错了哪里,及时改正,不然等全做完再发现错误的话就无力挽救了。同学们一定要养成时时测试效果的好习惯。
­
7·
⑴·插入,新建元件,选择影片剪辑,命名为2影片。
新建5个图层,自上而下分别重命名为动作、底板、2按钮、遮罩2和底板按钮。
 
⑵·与6·⑵相同。
 
⑶·遮罩2的操作:
单击第1帧,把库中的遮罩1拖入舞台,XY值为6·⑶中一样。
把库中的遮罩2拖入舞台,调整位置。X值要与上同。
效果如下图所示:
 
点击舞台中的遮罩1,右击,剪切。这样的话遮罩2就能精确放置好了。
下面步骤皆与6·相同。
2影片做完后,回到场景1,新建图层2,把库中的2影片拖入舞台,调整位置。
以此类推,直到10个影片剪辑都做完为止。
效果为下图所示:
 
下图是场景1中的效果图:
 
这样,透明遮罩百叶窗渐隐效果就完成了!
再加上装饰的转动小花,意境是不是很美呢!
希望各位同学能学会哦~还有,学会了表忘了交作业~
 


 


彼岸埖 (625855143) 于 2008-06-30 14:31:48 对此贴进行了编辑
T-G-H (625855143) 于 2008-08-26 22:39:38 对此贴进行了编辑
T-G-H (625855143) 于 2008-08-26 22:41:02 对此贴进行了编辑
回到帖子顶部

回帖 引用 1楼 咔咔

用户形象图片

哎呀,额看滴头晕
回到帖子顶部

回帖 引用 2楼 咔咔

用户形象图片

但那效果确实顶漂漂滴
支持`
回到帖子顶部

回帖 引用 3楼秀气葱头

用户形象图片

是滴。。虽然头晕,可是效果超漂亮。。
回到帖子顶部

回帖 引用 4楼>>>Only

用户形象图片


  ...头大咧........好复杂
回到帖子顶部

回帖 引用 5楼 " ; 花丶葬

用户形象图片



            呖   支持
回到帖子顶部

回帖 引用 6楼ヤ飛々龍℡ξ

用户形象图片

漂亮,顶起来
回到帖子顶部

回帖 引用 7楼噓偽々仩線

用户形象图片

有沒有簡單的額,頭暈了,貌似我太笨了
回到帖子顶部

回帖 引用 8楼独行公子

用户形象图片


有点头晕啊!


回到帖子顶部

回帖 引用 9楼|м.r 花若闲

用户形象图片



  恩。 不错不错。 加油呢。。。。


  不过我还是喜欢用PS9.0,喜欢的也请多交流喔 
回到帖子顶部

回帖 引用 10楼/╱。雲℡

用户形象图片

这是给老一辈看的,我们新手只有头晕的份
回到帖子顶部

回帖 引用 11楼ヾ祂.潴头m.

用户形象图片

眼花````
回到帖子顶部

回帖 引用 12楼 橙子°

用户形象图片

超级喜欢这个教程。。

花花好厉害。。。

得好好学学了
回到帖子顶部

回帖 引用 13楼や° |洏巳

用户形象图片

我y有点晕了
回到帖子顶部

回帖 引用 14楼╳灬平爺←╃

用户形象图片

呵呵


这么快就出来老!~!~1


回到帖子顶部

回帖 引用 15楼火寶貝

用户形象图片

我还是慢点来吧!
回到帖子顶部

回帖 引用 16楼文瑾

用户形象图片

 看着眼晕
8过好漂亮
回到帖子顶部

回帖 引用 17楼独行公子

用户形象图片

 


不太难,但是很麻烦!花点时间还是可以做出来的!

 

看偶做的效果三!

 

http://lonecity.blog.enorth.com.cn/attachment/flash/367297.swf

 

 

回到帖子顶部

回帖 引用 18楼[楼主] 彼岸埖

用户形象图片

引用 独行公子 (88020712)在 2008年7月22日 5:53:43的发表:

 


不太难,但是很麻烦!花点时间还是可以做出来的!

 

看偶做的效果三!

 

http://lonecity.blog.enorth.com.cn/attachment/flash/367297.swf

 

 


不错。公子你太有才了!~
回到帖子顶部

回帖 引用 19楼独行公子

用户形象图片


花花说得偶都不好意思了!

是你写得详细而已!
回到帖子顶部

回帖 引用 20楼茈籹孒.祸氺

用户形象图片



支持。支持,支持。
回到帖子顶部

回帖 引用 21楼身未动心已远

用户形象图片

太恐怖了,眼睛都看花了
回到帖子顶部

回帖 引用 22楼点滴

用户形象图片

可以在FL里面做一个白色块多次利用对框框那图遮罩就方便多了
回到帖子顶部

回帖 引用 23楼創慥唍羙亾泩

用户形象图片

太详细了,不过偶刚学还看不懂也,亲说有简单一点的?
回到帖子顶部

回帖 引用 24楼叶,因树而绿

用户形象图片



就是喜欢这样的模块
回到帖子顶部

回帖 引用 25楼Lavender依依

用户形象图片

看着都晕了,偶好象学不会,楼主太棒了,
    
回到帖子顶部

回帖 引用 26楼绿。

用户形象图片

这个非常棒。我得好好学学。
回到帖子顶部

回帖 引用 27楼╰☆耲丫头

用户形象图片

楼主才有才了,我光看眼睛就晕了,你还用打字的,太厉害了
回到帖子顶部

回帖 引用 28楼ˊ 喂﹖<<<

用户形象图片

  LZ你太有才了,貌似我连做隐触门最简单的都不会~~~~学这个太难了.....
回到帖子顶部

回帖 引用 29楼じ☆ve影子♂

用户形象图片

很好看,很漂亮,只是好复杂哦!!!
回到帖子顶部

回帖 引用 30楼叶,因树而绿

用户形象图片



楼主您好,空间教程版已经改为空间攻略

您的帖子属于PS教程,现将此帖转入【Flash秀】版面

请楼主查看后修改一下标题,谢谢,祝愿您 愉快!
回到帖子顶部
个人信息
  • 荣誉+3
  • 荣誉+2
  • 荣誉+1
  • 荣誉-1
  • 荣誉-2
  • 荣誉-3
发表留言
  • 文章不错!
  • 精华好文!
  • 支持原创文章!
  • 帖子图文并茂,好!
  • 真知灼见,说得好!
  • 恶意广告
  • 违规内容
  • 严重灌水
  • 重复发帖
  • 标题党
你确定要删除此楼层吗
扣20点经验值

快速回复进入高级回复

插入图片 选择表情

验证码 看不清?换一张(不区分大小写)

[完成后按Ctrl+Enter发表]
[回复须知]