要約

このチュートリアルではどのようにマウスのロールオーバーでキューブトランジション効果を作成する方法を学習します。

ここで最終的な結果：


必要条件

FlashはCS3またはCS4のフラッシュ。

：このチュートリアルのスクリーンショットは、Flash CS3で作られて注意してください。 これは、同じフラッシュCS4で動作します。

ステップ1 - インストール効果成分

購入キューブへの移行の影響をここに。 ご指示に従ってをインストールし、ライブラリからドラッグしてコンポーネントをにコンポーネントパネルに。FLAファイルです。

ライブラリにコンポーネントをドラッグ

ステップ2 - 新規レイヤーを作成

物事には、メインのタイムラインに新規レイヤーを作成する必要が整頓して名前を与えるために。 か、この下のスクリーンショットに示すように。

メインのタイムライン上に作成層

ステップ3 - 作成の背景

今、あなたは、グラデーションで背景を作成します。 これは必要なことは、その効果はまた、透過的なコンテンツ（上の詳細は後述の動作を示します）効果の仕事をすることはありませんが。

選択して"bgの"レイヤーの最初のフレームとキャンバス上の四角形ツールを使って図形を描画する。 を選択して四角形と）また、他の色を使用していい勾配（持ってカラー設定を調整します。

作成の背景の形

カラーグラデーションの設定

ステップ4 - [作成]ボタン

キューブ効果が動的にユーザーのマウスの状態（ロールオーバー/ロールアウト）に反応する必要があります。 これは、ボタンをは"最も効果的にイベントリスナーを追加する練習しない自分自身の空白の代わりに使用する"。

をクリックしてレイヤーの最初のフレーム"btnの"とキャンバス（色のボタンは表示されませんので、しない硬のサイズで矩形を描く）。 を選択して四角形とボタンに[F8キーを押します]またはムービークリップ上で右クリック - >"シンボルに変換..."にそれを変換します。

ボタンに変換する形状

設定"btnの"と、そのタイプは"確認するボタンの名前ボタン"。

ボタンのセット名

ボタンをダブルクリックします。 今すぐ最初のキーフレームをドラッグして"上へ"最後のフレーム""ヒットする。 これは確かに、そのボタンが表示はされませんインタラクティブされることができます。

ボタンの中の変更キー

メインのタイムラインに取得し、"btnの"ボタンのインスタンス名を設定します。

ボタンの設定のインスタンス名

ステップ5 - 作成開始のMovieClip

効果は視覚的な情報から取得されます2つのムービークリップ持って必要があります。 あなたは今で開始されますMovieClipを遷移を作成します。

をクリックして層"img1"の最初のフレームに。 インポート画像キャンバスのサイズとファイル"[はCtrl - R]のか"を押して - >"インポート" - >"ステージ上にインポート..."＃。

インポート画像

今MovieClipのこのイメージを変換し、"それを"img1という名前を付けます。

ムービークリップに変換するイメージ

ムービークリップのセット名

設定だけでMovieClipの作成"img1"のインスタンス名。

セットのインスタンス名

ステップは、6 - エンドのMovieClipを作成する

エンドムービークリップは、イメージの代わりにテキストが含まれます。 この場合は少し異なるアプローチが必要になりますを実現します。

を選択し、レイヤー"終了するファイル名"（[OK]を、悪い名前の最初のフレーム、修正するために自由に ：） ）、キャンバスのサイズで四角形を描画します。 あなたは、エンドMovieClipのスタート]ボタンをムービークリップと同じ大きさであることを確認します。 [スタート] MovieClipのと同じサイズの厥は、まず描画なぜ目に見えない形。

描画図形

図形を選択し、0にアルファ値（形状のセットはまだあるが、目に見えない）です。

図形のセットアルファ

ムービークリップ[のF8キーを押します]またはムービークリップ上で右クリック - >"シンボルに変換..."へ変換する形と名前を"終了するファイル名"。

変換は、MovieClipに

をダブルクリックし、作成したばかりのMovieClip、新しい空のレイヤーを作成し、その新しく作成された層の上にいくつかのテキストを置く。

ムービークリップにテキストを追加

ヘッドに戻るメインのタイムラインとのMovieClipのインスタンス名を設定する"終了するファイル名"。

セットのインスタンス名

ステップは、7 - ActionScriptのロールオーバーを追加する

レイヤーを選択し"スクリプト"および"Windows" - >"アクション"または[F9キーを押しますと]"アクション"ウィンドウを開きます。

オープンActionScriptウィンドウ

場合は、単にロールオーバーの遷移を持っている場合（および展開にはバックエンドの移行）のコードウィンドウに次の行をコピーします。 

 btn.addEventListener（MouseEvent.ROLL_OVER、_onOver）;

関数_onOver（電子：MouseEventの）（
 ヴァールmyFilter：CubeTransitionEffectAS3 =新しいCubeTransitionEffectAS3（）;
  = falseをmyFilter.mouseEnabled;
  myFilter.mouseChildren = falseは、
  （myFilter）メソッドaddChild;

  （img1、終了するファイル名、75の"l -> myFilter.init r"は、2、"easeInOutCubic"の場合はfalse）;
 ）

最初の行では、ボタンにロールオーバーのイベントリスナーを追加します。 関数の中で"_onOver"（ライン3）は、コンポーネント（ライン4および5のマウスのインタラクティブ機能を無効にする前に、最初のCubeTransitionEffectAS3のインスタンスを作成）。 場合は、以前のマウス効果の世話をして作成ボタンを覚えておいてあなたはそれに干渉する効果を望んでいない。

最終的には9行目は、（初期化の効果はここパラメータのドキュメントをの）。 重要な部分は最初の2つのパラメータです。 あなたは、移行は"img1"と"で終わるで始まる定義終了するファイル名"。

エクスポートをFLAファイル。 このように、エフェクトコンポーネントは完全に"終了するファイル名"の透明な背景で動作します。

ステップ8 - その他の複雑なActionScript

[OK]を、上記のコードでロールオーバーは正常に動作します。 しかし、あなたもしたい場合はどのような終了するファイル名"を"img1"から"トランジションを逆にロールアウト機能を持っている？ あなたはより複雑なコードを必要とする達成するために。 削除スクリプトを挿入、次の： 

 btn.addEventListener（MouseEvent.ROLL_OVER、_onOver）; btn.addEventListener（MouseEvent.ROLL_OUT、_onOut）;ヴァール実行= falseは、ヴァールやった= falseは、ヴァールgoOut = falseは、関数_onOver（電子：MouseEventの）（（もし！実行している） （_createAnimation（"で"）;実行している=はtrueをする）else（やった= falseは、goOut = trueを;））関数_onOut（電子：MouseEventの）（するif（！実行している）（_createAnimation（"アウト"）;実行している=はtrue。します）else（やった= trueをgoOut = falseを;））関数_inAnimationDone（電子：イベント）（e.target.removeFilter（）; img1.visible = falseは、場合（やった）（_createAnimation（"アウト"）;）他（実行= falseの場合、goOut = falseを;））関数_outAnimationDone（電子：イベント）（e.target.removeFilter（）; img2.visible = falseは、場合（goOut）（_createAnimation（"で"）;）他（falseを実行している= ;やった= falseを;））関数_createAnimation（ディレクトリ：文字列）（ヴァールmyFilter：CubeTransitionEffectAS3 =新しいCubeTransitionEffectAS3（）; myFilter.mouseEnabled =はfalse; myFilter.mouseChildren = falseの場合、メソッドaddChild（myFilter）;（ディレクトリ=="の場合" ）（myFilter.init（img1、終了するファイル名、24、"リットル-> r"は、2、"easeInOutCubic"の場合はfalse）; myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE、_inAnimationDone）;する）else if（ディレクトリ=="アウト"） （myFilter.init（終了するファイル名、img1、24、"のr -> l"を、2、"easeInOutCubic"の場合はfalse）; myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE、_outAnimationDone）;））

それは知っていることが重要、その場合は、移行することができます方向の逆ではない効果中に実行している。 代わりに""効果まで行われ、折返しのトランジションを適用を待つユーザーの行動を覚えています。

変数は、"やった"と"goOut"（5行目と6）その目的のために使用されます。 あなたは8および18）を実行してもそれらの関数は、"_onOver"と"_onOut"（ラインを設定します。 しかし、それは偽（ライン9と19）は、すぐに（行の移行を開始だ場合にのみvarは実行してtrueの場合、10および20）。

関数"_createAnimation"（52行）で、ヘルパー関数開始の方向の"ディレクトリ"あなたは、パラメータとして渡さ応じてアニメーションです。

注意"removeFilter"メソッド（29行目と41）の両方を起動ムービークリップとエンドMovieClipを呼び出した後に設定されて見える（アウト効果）。 thatsはなぜあなたはMovieClipの可視性を設定 - 移行を開始 - 偽（30行、42）に。

最終結果

ダウンロード

ここをクリックしチュートリアルこのFLAファイルをのダウンロードします。 注：。FLAファイルは、コンポーネントを効果しない含まれています。 ために仕事をFLAファイルのできるよう、あなたが購入する必要が移行効果をここキューブ。

ここで見つけることができるビデオの効果を別の実装するチュートリアルの方法を示します。

  • 共有/ブックマーク