【Flash教程】模块遮罩新方式——斜向拉出式的做法 (24/684)

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

修改 回帖 引用 楼主: 四月

用户形象图片

这个教程是晶宝教给我的,谢谢晶宝了。其实我也是个FS新新手,不懂的地方还很多,不怎么会写教程,写的不好的地方还请见谅。由于我的FS不好,所以我就吧教程改了下,呵呵,虽然这样做麻烦了些,但这样我感觉好懂些。
­
­
预备工作:做一个扣好的模块,一个完整的模块,一个框,一个扣好的框。都保存成png格式。
               
­
­
­
­
­
1、打开FS,创建一个新的文档,把文档属性里面的尺寸改成你的模块的宽和高。背景颜色改不改随意。
   我这里的模块是895*600,我吧背景颜色改成了蓝色,这样便于观看。点确定。
  
­
­
2、把四个png格式的图片导入到库,文件——导入——导入到库。这样会看到库里有四个文件。如下图
­
­
­
3、新建四个图形元件,插入——新建元件——选择图形——起名字,分别命名为bg1,bg2,遮盖1,遮盖2;双击bg1,进入bg1中编辑。把四月模块01拖入,居中对齐与舞台。然后右键分离。双击bg2,进入bg2中编辑。吧四月模块镂空拖入,居中对齐与舞台,右键分离,点工具栏中的套索工具,再点套索工具下方选项中的第一个魔棒,用魔棒选中镂空的部分,Delete删除。遮盖1的做法同bg1,遮盖2的做法同bg2,不同的是,遮盖1拖入的是框,遮盖2拖入的是框镂空。看下图图解。
­
    
­
­
­
­
­
­
­
4、回到场景。吧图层1改名为背景。把bg1拖入,在第15帧处插入帧。在第8帧处按两次F6插入两个关键帧。点击第8帧,选中第8帧的元件,点属性中的交换,把bg1交换成bg2。
­
­
这是背景层
­
­
5、再新建一层,命名为遮盖。把遮盖1拖入到下图的地方。(意思就是你想要方框出现在上面吧 ,你就吧框放到下面,明白)。然后在第7帧和第15帧按F6插入关键帧。看图解。
­
这时的图层情况
­
­
6、点第7帧,把框拖到如下图的地方,跟模块镂空的地方对齐。然后点第8帧,按两次F6插入两个关键帧。然后点第8帧,选中框,点交换,把遮盖1交换成遮盖2,(这里就不截图了,跟上面的一个做法)。然后在第1帧和第7帧及第9帧和15帧之间点右键都创建补间动画。选择第一帧和第8帧,按F9打开动作面板,分别都写入stop(); 看图解。
­
这是创建补间动画时图层的情况
这时输入代码后图层的情况
­
­
7、再新建一层,命名为遮罩。用矩形工具画一个矩形,颜色随意。画的矩形要能盖住你的框。然后在遮罩图层上右键遮罩层。会看见你画的矩形消失了,并且图层也产生了变化。看图解。
这是画的矩形,盖住了框
­
右键遮罩层后的状况
­
­
8、再新建一层,命名为按钮。在第1帧和第8帧按F7插入空白关键帧。选择第一帧,用矩形工具在“网络日志”文字上面画一个长方形矩形,遮盖住文字,如下图,点击矩形,右键转换为按钮元件,在属性面板把Alpha改为0%。双击按钮,进入编辑,在【指针经过】、【按下】、【点击】这三个上右键插入关键帧。看图解。
­
­
­
­
9、回到场景,点第8帧,用矩形工具多个矩形形状,颜色随意,使覆盖除中间【遮盖2】、【网络日志】之外的所有舞台。选中这个形状,点右键转换为按钮元件,修改属性面板的Alpha为0%。双击按钮,进入编辑,在【指针经过】、【按下】、【点击】这三个上右键插入关键帧。看图解。
­
­
这是最后库里的东东
­
­
10、选中按钮1和按钮2,要注意,是选中按钮哦。按F9,打开动作面板,写入下面的代码:
­
­
on(rollOver)
{
nextFrame();
play();
}
­
好了,完成了,测试下吧。
回到帖子顶部

回帖 引用 1楼ˇ蝶寶兒╰ァ

用户形象图片

支持四月 写的好好哦 辛苦了哈
回到帖子顶部

回帖 引用 2楼_夏陌離 °

用户形象图片

                    感谢四月分享,辛苦了
回到帖子顶部

回帖 引用 3楼苦艾草

用户形象图片

 感谢四月分享,辛苦了 


借樓上的話說的。
回到帖子顶部

回帖 引用 4楼^魔藤^

用户形象图片

四月好厉害,支持.
回到帖子顶部

回帖 引用 5楼→堔嬡←

用户形象图片

现在很流行这个的!


回到帖子顶部

回帖 引用 6楼美川兵仔

用户形象图片

我不太懂这个,晕晕呼呼的.
回到帖子顶部

回帖 引用 7楼

用户形象图片

这个教程对我来说,太高难度啦,也是看得晕呼呼的,呵呵~~
不过四月妹妹辛苦了哟,感谢你的分享,呵呵,等我练到这程度就来交作业哟
回到帖子顶部

回帖 引用 8楼 蓝色忧郁

用户形象图片

   效果蛮漂亮的啊  
回到帖子顶部

回帖 引用 9楼暢游的精靈

用户形象图片

我也想学,但我懒哦带回家收藏,有空再看看
回到帖子顶部

回帖 引用 10楼那时的天空

用户形象图片

等会偶也学。
回到帖子顶部

回帖 引用 11楼stōry

用户形象图片

         做到第七步不会做了
回到帖子顶部

回帖 引用 12楼千世情缘

用户形象图片

         还是不会
回到帖子顶部

回帖 引用 13楼粉銫薔薇娈

用户形象图片

              我只看不会
回到帖子顶部

回帖 引用 14楼ˋ誘惑_灬酷

用户形象图片

好复杂啊~请教下我啊
回到帖子顶部

回帖 引用 15楼竹采飞扬

用户形象图片

我最后一步怎么做不下去了呢,怎么点击按钮,动作输入不了。
回到帖子顶部

回帖 引用 16楼清晨阳光iCe

用户形象图片

  希望可以再详细点
回到帖子顶部

回帖 引用 17楼/aiq祝君好

用户形象图片

楼主,我做按钮那一层的时候,不知道哪里出错,在测试影片时总是提示如下信息:
**错误** 场景=场景 1, 图层=图层 15, 帧=8:第 1 行: 鼠标事件只允许用于按钮实例
     on(rollOver) 

是何原因啊?
回到帖子顶部

回帖 引用 18楼虫虫咬手手

用户形象图片

      学习咯
回到帖子顶部

回帖 引用 19楼/aiq祝君好

用户形象图片

呵呵,下午看了楼主空间里的视频教程,终于找出原因所在了,已经学会了,谢谢楼主!
回到帖子顶部

回帖 引用 20楼夏天!

用户形象图片

这个好实用。
回到帖子顶部

回帖 引用 21楼〆清韻蓮兒き

用户形象图片

这个好实用。 
回到帖子顶部

回帖 引用 22楼月碧雅桃

用户形象图片

好想学,可是我的FLASH还是这么笨。
回到帖子顶部

回帖 引用 23楼鈈洅兲眞_ю

用户形象图片

学了两天才学会
回到帖子顶部

回帖 引用 24楼Waiting

用户形象图片

做是会做了 可是做好后老是出问题的 不知道怎么回事
回到帖子顶部
个人信息
  • 荣誉+3
  • 荣誉+2
  • 荣誉+1
  • 荣誉-1
  • 荣誉-2
  • 荣誉-3
发表留言
  • 文章不错!
  • 精华好文!
  • 支持原创文章!
  • 帖子图文并茂,好!
  • 真知灼见,说得好!
  • 恶意广告
  • 违规内容
  • 严重灌水
  • 重复发帖
  • 标题党
你确定要删除此楼层吗
扣20点经验值

快速回复进入高级回复

插入图片 选择表情

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

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