摘要

在本教程中，您將了解如何創建一個立方體的過渡對小鼠過渡。

在這裡，最終結果：


需求

閃光CS3或組件語言。

注：本教程的屏幕是由在Flash CS3。 它可以完全一樣在Flash CS4。

第1步-安裝組件的影響

購買立方過渡所產生的影響 。 請按照安裝說明 ，並拖動組件從組件面板到您的圖書館。FLA文件。

拖放組件到庫

第2步-創建一個新層

為了保持整潔，應創建一個新層的主時間軸並給它一個名稱。 做到這一點，顯示在下面的截圖。

創建層的主時間軸

第3步-創建背景

現在，您創建的背景，漸變。 雖然這是沒有必要讓工作中的效果表明，效果還與透明的內容（稍後更多）。

選擇第一幀的“bg”層和繪製形狀與矩形工具在畫布上。 選擇矩形和調整顏色設置有一個很好的梯度（你也可以使用任何其他顏色）。

創建背景形狀

顏色漸變的設置

第4步-創建按鈕

多維數據集的效果應該動態地反應用戶的鼠標狀態（過渡/部署）。 這是最好不要添加事件監聽器的作用本身，而是使用“空白”按鈕。

單擊第一幀層中的“百特”，並繪製一個矩形的大小的畫布（彩色不母校，因為該按鈕將不可見）。 選擇矩形，將其轉換為按鈕與[按F8]或右鍵點擊的MovieClip - >“”轉換為元件...“。

轉換形狀按鈕

設置按鈕的名稱為“百特”，並確保類型是“按鈕”。

設置按鈕的名稱

雙擊該按鈕。 現在，第一個關鍵幀拖到“起來”的最後一幀“點擊”。 這可以確保，該按鈕將是互動式的，但不可見。

更改關鍵幀內部按鈕

回到主時間軸並設置實例名稱的按鈕，“百特”。

設置實例名稱的按鈕

步驟5 -創建啟動的MovieClip

其效果需要有兩個movieclip中的視覺信息時採取的。 現在您可以創建的movieclip，過渡將開始。

點擊第一個幀層“img1”。 導入圖片大小的畫布按[按Ctrl - R的]或“文件” - >“”導入“ - >”“進口舞台...”。

導入圖像

現在，這個圖片轉換為影片剪輯，並命名為“img1”。

轉換圖片的MovieClip

集名稱的影片剪輯

設置實例名稱為剛剛創建的MovieClip“img1”。

設置實例名稱

第6步-創建完影片剪輯

最終影片剪輯將包含文字而不是圖像。 在實現這一目標，你需要稍微不同的方法。

選擇第一幀層的“img2”（好，壞的命名，隨時糾正這種 ：） ）和繪製一個矩形的大小的畫布。 你想確保最終的movieclip具有相同的尺寸作為開始的MovieClip。 多數民眾贊成你為什麼先劃出一個不可見的形狀與大小相同開始的MovieClip。

繪製形狀

選擇形狀，並設置Alpha值為0（形狀仍然存在，但無形的）。

設置阿爾法變形

轉換的形狀到MovieClip [按F8]或右鍵點擊的MovieClip - >“”轉換為元件...“，並命名為”img2“。

轉換為影片剪輯

雙擊剛創建的MovieClip，創建一個新的空層，把一些文字上，新創建的層。

將文本添加到影片剪輯

頭回主時間表和設置實例名稱的MovieClip的“img2”。

設置實例名稱

第7步-添加翻轉動作

選擇圖層“腳本”，打開“操作”窗口的“視窗” - >“”行動“或[按F9]。

打開動作窗口

如果您只是想有一個過渡過渡（無背過渡推出）複製以下行到代碼窗口。 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;

功能_onOver（五：MouseEvent的）（
 無功myFilter：CubeTransitionEffectAS3 =新CubeTransitionEffectAS3（）;
  myFilter.mouseEnabled =假;
  myFilter.mouseChildren =假;
  addChild（myFilter）;

  myFilter.init（img1，img2，75，“左旋”住宅“，2，”easeInOutCubic“，假）;
 ）

在第一行添加事件監聽器的過渡到按鈕。 在函數“_onOver”（第3行）首先創建一個實例的CubeTransitionEffectAS3之前禁用鼠標交互組件的（4號線和5）。 請記住，您在前面創建按鈕是照顧鼠標效果，你不希望影響進行干預的。

終於在第9行初始化的效果（ 文件在這裡的參數 ）。 的重要組成部分，是前兩個參數。 您定義，過渡開頭“img1”，終於“img2”。

導出FLA文件。 正如你看到的，效果組件工作完全符合透明背景的“img2”。

第8步-更複雜的動作

行，與前面的代碼的過渡工作得很好。 但是，如果你也想有一個推出功能，推翻了過渡到“img2”到“img1”？ 為了實現這一點你需要一個更複雜的代碼。 刪除腳本，並插入以下內容： 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;
 btn.addEventListener（MouseEvent.ROLL_OUT，_onOut）;

無功運行=假;
無功goIn =假;
無功goOut =假;

功能_onOver（五：MouseEvent的）（
 如果（！運行）（
  _createAnimation（“在”）;
 運行=真;
 否則（）
  goIn =假;
  goOut =真;
  ）
 ）

功能_onOut（五：MouseEvent的）（
 如果（！運行）（
  _createAnimation（“去”）;
 運行=真;
 否則（）
  goIn =真;
  goOut =假;
  ）
 ）

功能_inAnimationDone（五：事件）（
  e.target.removeFilter（）;
  img1.visible =假;

 如果（goIn）（
  _createAnimation（“去”）;
 否則（）
 運行=假;
  goOut =假;
  ）
 ）

功能_outAnimationDone（五：事件）（
  e.target.removeFilter（）;
  img2.visible =假;

 如果（goOut）（
  _createAnimation（“在”）;
 否則（）
 運行=假;
  goIn =假;
  ）
 ）

功能_createAnimation（導演：字符串）（
 無功myFilter：CubeTransitionEffectAS3 =新CubeTransitionEffectAS3（）;
  myFilter.mouseEnabled =假;
  myFilter.mouseChildren =假;
  addChild（myFilter）;

 如果（迪爾==“在”）（
  myFilter.init（img1，img2，24，“左旋”住宅“，2，”easeInOutCubic“，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_inAnimationDone）;
  ）否則如果（迪爾==“出”）（
  myFilter.init（img2，img1，24，即“R -”升“，2，”easeInOutCubic“，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_outAnimationDone）;
  ）
 ）

重要的是要知道，你不能扭轉方向過渡過程中的影響正在運行。 相反，你可以“記住”行動的用戶，等到完成的效果和應用翻領過渡。

這些變量“goIn”和“goOut”（第5和6）用於這一目的。 當你設置它們的職能“_onOver”和“_onOut”（8和18）被執行。 但是，只有如果var運行是真的，如果是假的（9號線和19條），你開始過渡馬上（第10行和20）。

函數“_createAnimation”（行52）是您的幫助函數一開始就視動畫的方向的“dir”你作為參數傳遞。

請注意，在調用“removeFilter”方法（第29行和41）都開始movieclip並最終影片剪輯被設置為可見（出效果）。 多數民眾贊成你為什麼設置的movieclip可視性-過渡期開始-為false（第30行和42）。

最終結果

下載

點擊這裡下載弗洛本教程。 注：。弗洛不包括效力的組成部分。 為了使弗洛工作，您需要購買立方過渡所產生的影響 。

在這裡你可以找到一個視頻教程如何實現不同的效果 。

  • 分享/書籤