摘要

在本教程你將學習如何創建一個立方體對小鼠過渡過渡效果。

在這裡，最後的結果是：


需求

Flash CS3中或Flash CS4中。

注：本教程中的屏幕截圖是在Flash CS3中。 它的工作原理完全一樣在Flash CS4。

第1步 - 安裝組件的影響

購買立方過渡效果在這裡 。 請按照安裝說明，並拖動該組件從組件面板到您的圖書館。FLA文件。

拖放組件到庫

第2步 - 創建一個新層

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

創建層主時間軸

第3步 - 創建背景

現在，您創建一個背景漸變。 雖然這是沒有必要把它表明，影響工作的效果還與透明的內容（更多關於該版本）。

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

創建背景形狀

顏色漸變的設置

第4步 - 創建按鈕

該立方體的效果應該動態地反應用戶鼠標狀態（過渡 /部署）。 這是最好的做法是不會添加事件監聽器的效果本身，而是使用“空白”按鈕。

單擊第一幀層“銀行技術新聞雜誌”，並繪製一個矩形的大小的畫布（顏色不母校，因為該按鈕將不可見）。 選擇矩形並將其轉換為一個按鈕與 [按F8]或右鍵點擊影片剪輯“ - >”轉換為元件...“。

轉換形狀按鈕

設置按鈕的名稱為“銀行技術新聞雜誌”，並確保該類型是“按鈕”。

設置按鈕的名稱

雙擊該按鈕。 現在，第一個關鍵幀拖到“向上”的最後一幀“熱”。 這可以確保，該按鈕會互動，但不可見。

關鍵幀裡面更改按鈕

回到主時間軸，並設置實例名稱的按鈕，“銀行技術新聞雜誌”。

設置實例名稱的按鈕

第5步 - 創建啟動的MovieClip

其效果需要有兩個影片剪輯的視覺信息的地方採取由。 現在您創建的MovieClip的過渡將開始。

點擊第一幀上一層“img1”。 導入圖像的大小的畫布，按下[按Ctrl - R的]或“文件” - >“”導入“ - >”“導入舞台...”。

導入圖像

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

轉換圖片的MovieClip

集名稱的MovieClip

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

設置實例名稱

第6步 - 創建完的MovieClip

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

選擇第一幀的層“img2”（好，壞的命名，隨時糾正這種 ：） ）和繪製一個矩形的大小的畫布。 你想，以確保最終的MovieClip具有相同的尺寸為開始的MovieClip。 那你為什麼先畫一個無形的形狀與大小相同開始的MovieClip。

繪製形狀

選擇的形狀和alpha值設置為 0（形狀仍然存在，只是無形的）。

設置阿爾法形狀

轉換形成一個 movieclip [按F8]或右鍵點擊影片剪輯“ - >”轉換為元件...“，並命名為”img2“。

轉換為影片剪輯

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

將文本添加到影片剪輯

頭回主時間軸，並設置的MovieClip實例名稱為“img2”。

設置實例名稱

第7步 - 添加翻滾動作

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

打開窗口的ActionScript

如果您只是想有一個過渡期過渡（無備用過渡期推出）複製下面的行到代碼窗口。 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;

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

  myFilter.init（img1，img2，75，“升-> R”的，2，“easeInOutCubic”，假）;
 ）

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

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

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

第8步 - 更多複雜的ActionScript

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

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

變種運行 =虛假的;
變種戈=虛假的;
變種 goOut =虛假的;

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

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

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

 如果（戈）（
  _createAnimation（“走出去”）;
 否則）（
 運行 =虛假的;
  goOut =虛假的;
  ）
 ）

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

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

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

 如果（目錄 ==“在”）（
  myFilter.init（img1，img2，24日，“升-> R”的，2，“easeInOutCubic”，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_inAnimationDone）;
  ）否則如果（目錄 ==“走出去”）（
  myFilter.init（img2，img1，24“，與 r ->升”，2，“easeInOutCubic”，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_outAnimationDone）;
  ）
 ）

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

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

函數“_createAnimation”（行52）是你的helper函數一開始就視動畫的方向“目錄”您傳遞的參數。

請注意，在調用“removeFilter”方法（行29和41）都開始影片剪輯和最終的MovieClip設置為可見（出來的效果）。 那你為什麼設置的MovieClip能見度 - 過渡開始 - 為 false（行30和42）。

最終結果

下載

點擊這裡下載本教程的FLA。 注：。FLA的影響並不包括組件。 為了使FLA的工作，您需要購買此立方過渡效果 。

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

  • 分享/書籤