マウスのロールオーバーのキューブの移行

要約

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

ここでは、最終的な結果：

要件

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

注：このチュートリアルではこのスクリーンショットはFlash CS3で行われます。これは正確には、Flash CS4で同じ動作をします。

ステップ1 -インストールの効果のコンポーネント

購入したキューブへの移行の影響はここ。してください手順をインストールすると、コンポーネントパネルから。flaファイルのライブラリにコンポーネントをドラッグします。

ステップ2 - 新規レイヤーを作成します。

物事場合は、メインのタイムライン上に新しいレイヤーを作成し、その名前を清潔に保つために。この下のスクリーンショットで示すようにしないでください。

ステップ3 - 背景を作成します。

今、あなたはグラデーションで背景を作成します。これは、その効果も透明なコンテンツを（これについては後述）の作品を示して効果を動作させる必要はありません。

"bgで選択して、最初のフレーム"の層とキャンバス上に長方形ツールを使って図形を描画します。を選択して、四角形と調整の色の設定は、素晴らしいグラデーションが（また）他のカラーを使用することができます。

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

キューブ効果を動的にユーザーがマウスの状態（ロールオーバー/ロールアウト）に対応する必要があります。これは、効果自体にして、イベントリスナーを追加する代わりに、""ボタンを空白のまま使用するのベストプラクティスではありません 。

レイヤーをクリックして、最初のフレーム"btnの"とは、キャンバスのサイズで四角形を描画する（カラー）は母校からのボタンは表示されませんありません。を選択して、四角形とボタンに[F8キーを押すと変換]またはMovieClipの上で右クリック - ""に変換するシンボル..."。

"btnの"には、ボタンの名前を設定していることを確認は、その型は"ボタン"。

ダブルボタンをクリックします。今すぐ""を開設する最後のフレームを"ヒットする"の最初のフレームにドラッグします。このことは、ボタンが表示されない対話することができます。

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

ステップ5 - MovieClipの開始を作成します。

効果は、2つのムービークリップの場所を視覚的な情報から取得されている必要があります。ここでは、MovieClipの移行を開始するを作成します。

層"img1上の最初のフレームをクリックして"。 -受]または"ファイル" - ""インポート" - ステージ上に""インポート..."を押しますCtrlキーを押して、キャンバスのサイズをインポートするイメージ。

今は、MovieClipにはこの画像に変換し、名前を"img1"。

のインスタンス名を設定するだけでMovieClipのimg1"に作成された"。

ステップ6 - エンドムービークリップを作成します。

エンドMovieClipの代わりに、画像のテキストが含まれます。この場合、少し異なるアプローチが必要になりますを実現します。

層"img2を選択して、最初のフレーム"（いや、悪いネーミング、修正するために自由を感じる）とは、キャンバスのサイズで矩形を描画します。あなたが確信しているエンドMovieClipをスタートMovieClipのと同じディメンションを持つようにしたい。 Thatsなぜ、最初にスタートMovieClipのと同じ大きさで目に見えない形を描画します。

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

MovieClipの[F8キーを押して、図形に変換]またはMovieClipの上で右クリック - ""に変換するシンボル... ..."とは名前を"img2"。

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

頭に戻るメインのタイムラインにimg2"には、MovieClipのインスタンス名を設定する"。

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

Windowsの"とのレイヤーを選択し"スクリプト"と"アクションを開く"ウィンドウ" - "の"操作"または[F9キーを押します。

場合は、単にロールオーバーの移行が欲しい（とは逆の展開に移行）をコードウィンドウに次の行をコピーします。

 btn.addEventListener（MouseEvent.ROLL_OVER、_onOver）;

関数_onOver（電子：MouseEventを）（
 ヴァールmyFilterを：CubeTransitionEffectAS3 =新しいCubeTransitionEffectAS3（）;
  = falseをmyFilter.mouseEnabled;
  myFilter.mouseChildren =偽;
  addChild（myFilterを）;

  （img1、img2、75、の"l -"R"は、2、"easeInOutCubic"の場合はfalse）; myFilter.init
 ）

最初の行では、ボタンにロールオーバーのイベントリスナーを追加します。関数"_onOver"で（ライン3）最初にあなたの前に（ライン4および5）のコンポーネントを無効にし、マウスの双方向CubeTransitionEffectAS3のインスタンスを作成します。、以前のマウスの効果の世話を取っている場合は、ボタンが作成さを覚えて、その上で干渉の影響をしたくない。

9行目の最後では、パラメータをここに（マニュアル）の効果を初期化します。重要な部分は最初の2つのパラメータです。あなたは、遷移img1"と"が起動し、img2"で終わる"を定義します。

エクスポートしてflaファイル。見てのとおり、その効果はコンポーネントを完全にimg2"の背景が透明な"作品。

ステップ8 - もっと複雑なActionScriptを

[OK]を、ロールオーバーは問題なく動作する前のコードです。しかし、どの場合にも、"img1"をimg2"からの移行"の逆の展開機能を持ってしたいですか？その場合、より複雑なコードが必要に達成するために。スクリプトを削除し、次の挿入：

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

実行している= falseをヴァール;
ヴァールgoIn =偽;
ヴァールgoOut =偽;

関数_onOver（電子：MouseEventを）（
 場合（！実行している）（
  _createAnimation（""）で;
  = trueを実行している;
  ）他（
  goIn =偽;
  goOut =真;
  ）
 ）

関数_onOut（電子：MouseEventを）（
 場合（！実行している）（
  _createAnimation（"アウト"）;
  = trueを実行している;
  ）他（
  goIn =真;
  goOut =偽;
  ）
 ）

関数_inAnimationDone（電子：イベント）（
  e.target.removeFilter（）;
  = falseをimg1.visible;

  （goIn）の場合（
  _createAnimation（"アウト"）;
  ）他（
  = falseを実行している;
  goOut =偽;
  ）
 ）

関数_outAnimationDone（電子：イベント）（
  e.target.removeFilter（）;
  = falseをimg2.visible;

  （goOut）の場合（
  _createAnimation（""）で;
  ）他（
  = falseを実行している;
  goIn =偽;
  ）
 ）

関数_createAnimation（ディレクトリ：文字列）（
 ヴァールmyFilterを：CubeTransitionEffectAS3 =新しいCubeTransitionEffectAS3（）;
  = falseをmyFilter.mouseEnabled;
  myFilter.mouseChildren =偽;
  addChild（myFilterを）;

 場合（ディレクトリ=="で"）（
  （img1、img2、24日の"l -"R"は、2、"easeInOutCubic"の場合はfalse）; myFilter.init
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE、_inAnimationDone）;
  ）他の場合（ディレクトリ=="アウト"）（
  （img2、img1、24日の"r -"l"を、2、"easeInOutCubic"の場合はfalse）; myFilter.init
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE、_outAnimationDone）;
  ）
 ）

それを知って、それを NOT効果の間にトランジションの方向を逆にすることができます実行していることが重要である。代わりに""するまでは、効果が行われ、折返しトランジションを適用するまでは、ユーザーのアクションを覚えている。

変数"goIn"と"goOut"（5行目と6）は、目的のために使用されます。あなた"や"_onOut"（8行目が関数"_onOverそれらの設定、18）が実行されます。かどうか（9行目および19）がfalseのが唯一の場合には、varを実行して、真の場合は、すぐに（ライン10および20）への移行を開始します。

関数"_createAnimation"（ライン52）、ヘルパー関数は、開始の方向性をパラメータとして渡されるの"dir"に応じて、アニメーションです。

通知は、"removeFilter"メソッド（29行目と41）の両方のスタートムービークリップとEnd MovieClipを呼び出した後に表示する（アウト効果）の設定されます。 Thatsなぜする - の移行を偽（30行目と42 - ）を開始したMovieClipの可視性を設定します。

ダウンロードする

ここをクリックし、このチュートリアルのFLAファイルをダウンロードします。注：。FLAのしない効果のコンポーネントが含まれます。順序では、FLAの作業を確認するには、ここにキューブへの移行の影響を購入する必要があります。

ここでは、動画をどのように異なるエフェクトを実装するためのチュートリアルを見つけることができます。

フラッシュ効果のチュートリアルクール！

をお書きくださいコメント 2009年4月8日

要約

要件