flash 遮罩层全解
2019獨角獸企業重金招聘Python工程師標準>>>
初學者關于遮罩的話題問的較多,下面我將遮罩的一些常見問題進行一下歸納。
1、請問遮罩的原理是什么?
[效果]
?1.swf (3.97 KB)
遮罩層好比黑夜中的一支手電筒,照在哪兒(指被遮罩層)哪兒就顯現。
第一步:創建兩個圖層,命名,一個是遮罩層,一個是被遮罩層;
第二步:在被遮罩層圖層輸入文字“閃吧,我的最愛”;
第三步:在遮罩層隨便畫一個形狀,例如一個圓;
第四步:此步最關鍵。點擊遮罩層圖層,右鍵選擇“遮罩層”,如圖1(1)
?
2、我想讓遮罩層運動起來,就象探照燈一樣的效果,應如何做?
[效果]
?2.swf (4.08 KB)
第一步:把上面的圓轉換為圖形元件;
第二步:在第15幀處插入關鍵幀,選中元件,把它放在場景的最右端,在兩幀之間右鍵選擇“創建補間動畫”,選中第1幀,右鍵選擇“復制幀”,在第30幀處粘貼幀,在第15幀和第30幀處右鍵選擇“創建補間動畫”;
第三步:把被遮罩層的幀延長到第30處;
[源文件]
?2.fla (22.5 KB)
3、我想讓遮罩層隨鼠標移動而移動應怎樣做?
[效果]
?3.swf (4.11 KB)
第一步:選中問題1的遮罩層,右鍵選擇“遮罩層”,去掉前面的勾,此時取消了遮罩;選中圓,右鍵選擇“轉換為元件”,在彈出的對話框中選擇“影片剪輯”,在主場景中給它個實例名mask_mc。
第二步:選中被遮罩層上的文字,同樣轉換為影片剪輯元件,實例名為_mc
第三步:新建圖層,名為“動作”,選中第一幀,寫如下代碼:
_mc.setMask(mask_mc);//設置_mc被mask_mc遮罩
mask_mc.onEnterFrame = function() {
//mask_mc在運行每一幀時執行函數
this._x = _xmouse;
this._y = _ymouse;
//mask_mc的坐標等于鼠標的坐標
};
[源文件]
?3.fla (24 KB)
4、我想讓遮罩層隨鼠標移動有緩沖的效果應如何做?
[效果]
?4.swf (4.14 KB)
把問題3的第三步代碼改為
_mc.setMask(mask_mc);
var speed:Number = 5;//申明變量
mask_mc.onEnterFrame = function() {
this._x += (_xmouse-this._x)/speed;//讓遮罩層緩沖運動
this._y += (_ymouse-this._y)/speed;
};
[源文件]
?4.fla (24 KB)
5、某對象的邊框一閃而過的效果怎么做?
[效果1]
?5(1).swf (33.09 KB)
[效果2]
?5(2).swf (2.55 KB)
下面以效果2為例詳解其制作過程
第一步:創建三個圖層,從上到下名稱分別為“邊框”、“矩形”、“文字”。
第二步:在“文字”圖層上輸入文字:“閃吧”,延長幀到第40幀處。
第三步:選中“文字”圖層的第一幀復制幀,粘貼幀到“邊框”圖層的第一幀上;將文字按住Ctrl+B,連按兩次把文字打散;選中右側“工具”欄中的“墨水瓶工具”,在打散的文字邊上點擊進行描邊;在該幀上用鼠標進行點擊(即全選該幀上的所有對象),然后把鼠標移到右側“工具”欄中的“填充色”上點擊,再把鼠標移到彈出對話框中的右上角,將填充色設置為無;選中剛才描出的邊線,在屬性中將其筆觸高度設置為1.5。具體設置和效果見圖1:
?
第四步:選中“邊線”,選擇“修改”→“形狀”→“將線條轉換為填充”;把幀延長到第40幀處。(此步是關鍵,不能用線條作遮罩層,應轉換為填充)具體設置見圖2:
?
第五步:創建圖形元件,在該元件編輯場景中畫一個矩形,從上到下進行線形漸變,具體設置見圖3;把該元件從庫中拉入到主場景中“矩形”圖層上的第一幀上,其位置在文字的上方;在第40幀處插入關鍵幀,把該元件的位置移到文字的下方;在第1幀和第40幀處右鍵選擇“創建補間動畫”。
?
第六步:選中“邊框”圖層,右鍵選擇“遮罩層”。
[源文件]
?5(2).fla (49 KB)
6、如何做出漸變、半透明、羽化遮罩效果?
[漸變效果]
?6(1).swf (3.99 KB)
第一步:創建兩個圖層,從上到下名稱分別是“遮罩”、“漸變”。
第二步:在“遮罩”圖層中輸入文字“閃吧,我的最愛!”。
第三步:在“漸變”圖層中畫一個矩形,填充漸變色。
第四步:選中“遮罩”圖層,右鍵選擇“遮罩層”。
[源文件]
?6(1).fla (48 KB)
[羽化效果]
?6(2).swf (91.55 KB)
第一步:創建兩個圖層,從上到下名稱分別是“遮罩”、“圖片”。
第二步:在“圖片”圖層上導入一張圖,并轉換為影片剪輯元件,實例名為tp_mc,延長幀到第40幀;在其屬性面板中勾選“使用運行時位圖緩存”。
第三步:在“遮罩”圖層上畫一個小圓,轉換為影片剪輯元件,實例名為mask_mc;選擇屬性面板中的“濾鏡”里的“模糊”,輸入模糊值均為100;在第40幀處插入關鍵幀,把圓放大;創建補間動畫。
第四步:在“動作”圖層的第一幀上寫代碼:
tp_mc.setMask(mask_mc)
[源文件]
?6(2).fla (137.5 KB)
半透明遮罩:把你半透明的遮罩層復制到上層即可
7、我用靜態文字作遮罩層或作為被遮罩時怎么沒有效果?
方法①將文字連按兩次Ctrl+B,把文字打散。
方法②更改該文字的屬性,不采用“使用設備字體”。
方法③把文字轉換為影片元件,實例名為wz_mc;把遮罩轉換為影片元件,實例名為mask_mc;在幀上寫代碼wz_mc.setMask(mask_mc)
8、動態文本設置被遮罩怎么沒有效果?
方法①把動態文本轉換為影片元件,實例名為wz_mc,創建遮罩影片元件,實例名為mask_mc;然后在幀上寫代碼:wz_mc.setMask(mask_mc)
方法②選擇嵌入,在彈出的對話框中出現的“包含這些字符”里輸入動態文本中要顯示的文字。(但這種方法會使文件體積變大)
[效果]
?8.swf (686 Bytes)
9、怎樣讓遮罩層沿著引導層上的任意路徑運動?
[效果]
?9.swf (91.17 KB)
[要點]
把遮罩先做成沿引導層上路徑運動的影片剪輯,再把該影片剪輯設為遮罩層
[步驟]
第一步:創建圖形元件,名稱為“圓”,畫一個圓。
第二步:創建影片剪輯元件,名稱為“運動的圓”,把圖形元件“圓”拖入;讓圓沿引導層上的曲線運動起來。如圖9:
?
第三步:在主場景中創建兩個圖層,從上到下名稱分別為“遮罩”、“背景”;把“運動的圓”拖入到主場景中的“遮罩”圖層上;在“背景”圖層上導入一張圖片;選中“遮罩”圖層,右鍵選擇“遮罩層”。
10、一般右鍵選擇設置“遮罩層”時只能遮罩一個圖層,那多個圖層怎么做?
方法①把沒有被遮罩的圖層拖入到已經被遮罩和遮罩層之間,再調整圖層順序。
方法②用鼠標按住沒有被遮罩的圖層不放,然后往上推,當出現灰色的虛線時釋放鼠標即可。如圖10:
?
11、空心圓做遮罩怎么中間的空白處也作了遮罩?
[效果]
?11.swf (90.98 KB)
[方法]把空心圓不能做成影片剪輯元件,但可以是圖形元件。
12、我想鼠標點擊時遮罩層出現并拖動,再次點擊時消失怎么做?
[效果]
?12.swf (58.13 KB)
在第6問的第四步代碼中作如下改動
Mouse.hide();
dt_mc.duplicateMovieClip("fdt_mc", 1);
fdt_mc._xscale = fdt_mc._yscale=150;
fdt_mc.setMask(mask_mc);
fdt_mc.swapDepths(fdj_mc);
mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
mask_mc.onEnterFrame = function() {
fdt_mc._x = -this._x*0.5;
fdt_mc._y = -this._y*0.5;
fdj_mc._x = this._x += (_xmouse-this._x)/4;
fdj_mc._y = this._y += (_ymouse-this._y)/4;
updateAfterEvent();
};
onMouseDown = function () {
this.id = !this.id;
if (this.id) {
?? mask_mc._visible = fdj_mc._visible=fdt_mc._visible=1;
}
if (!this.id) {
?? mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
}
};
13、導入外部的影片(如文件名1.swf)或圖片(如文件名1.jpg),怎樣設置遮罩?
第一步:創建影片剪輯元件,畫一個你要的遮罩形狀;把該元件拖入到主場景中,實例名取mask_mc。
第二步:在幀上寫代碼:
var my_mcl:MovieClip = createEmptyMovieClip("my_mcl", getNextHighestDepth());
var mcloader:MovieClipLoader = new MovieClipLoader();
mcloader.addListener(this);
mcloader.loadClip("1.jpg", my_mcl);
mask_mc._visible = 0;
this.setMask(mask_mc);
第三步:保存,并在該文件所在的文件夾內放一張圖片,名稱為1.jpg
如果導入的是外部影片,則把"1.jpg"改為"1.swf",當然,外部影片的名稱為1.swf
14、放大鏡是如何應用遮罩的?
[效果]
?放大鏡.swf (57.85 KB)
第一步:創建四個圖層,從上到下名稱依次是“動作”、“放大鏡”、“遮罩”、“底圖”。
第二步:創建影片剪輯元件,名稱為“底圖”,導入一張圖;把該元件拖入到主場景中的“底圖”圖層上,實例名為dt_mc。
第三步:創建影片剪輯元件,名稱為“遮罩”,畫一個圓,填充類型為放射狀,中間透明,四周不透明;把該元件拖入到主場景中的“遮罩”圖層上,實例名為mask_mc。再拖一個到“放大鏡”圖層上,實例名為fdj_mc。
第四步:在“動作”圖層的第一幀上寫如下代碼:
Mouse.hide();//鼠標隱藏
var speed:Number = 4;//申明變量
dt_mc.duplicateMovieClip("fdt_mc", 0);//復制底圖為放大圖
fdt_mc._xscale = fdt_mc._yscale=150;//放大圖放大
fdt_mc.setMask(mask_mc);//設置放大圖被遮罩元件遮罩
fdt_mc.swapDepths(fdj_mc);//把放大鏡放在最上層
mask_mc.onEnterFrame = function() {
fdt_mc._x = -this._x*0.5;//設置放大圖的坐標隨遮罩層的變化而變化
fdt_mc._y = -this._y*0.5;
fdj_mc._x = this._x += (_xmouse-this._x)/speed;//讓遮罩層和放大鏡坐標重合且緩沖運動
fdj_mc._y = this._y += (_ymouse-this._y)/speed;
updateAfterEvent();//更新舞臺
};
[源文件]
?放大鏡.fla (84 KB)
[后記]
遮罩無所不在,無奇不有,你還可以利用遮罩做出電影字幕、水波、萬花筒、百葉窗等強視覺的作品出來。
?
轉載于:https://my.oschina.net/xiaohelong/blog/366915
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的flash 遮罩层全解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: PHP几个快速读取大文件例子
- 下一篇: 设计模式之桥接模式实例