Flash Motion Tweenを使用したBlinkieの仕上げ

• 四月 19, 2024

最後にFlash blinkieアニメーションに取り組んだとき、テキスト効果を完成させました。アニメーションで最後に発生したテキスト効果は、Webサイト名「J3 Designs」の出現と消滅でした。タイムライントランジションエフェクト（タイムラインのトランジション3）とともに左側のステージから消えます。これには理由があり、あなたはその理由が何であるかを見つけようとしています。

設計の詳細の一部として、これら2つのてんとう虫があることに注意してください。さあ、彼らを働かせましょう。 blinkieプロジェクトにレイヤーを構築したときに、Bug 1レイヤーにゴールドのてんとう虫を追加しました。ここで、最初に行うことは、2番目のてんとう虫をBug 2と呼ばれる新しいレイヤーに追加することです。この赤いてんとう虫をカメオの下から表示する必要があります。したがって、新しいレイヤーをStatic Detailsレイヤーの下に配置する必要があります。

blinkie2.flaをFlash CS3で開き、作業を始めましょう。ウェブサイト名が消え始めると、てんとう虫がカメオの下から動き始めるようにします。てんとう虫のためにテキストが消えているように見せたい。そこで、この新しいてんとう虫をフレーム110に追加します。これは、テキストが消え始めるときです。

1. [ファイル]-[インポート]-[ライブラリにインポート]をクリックして[インポート]ダイアログボックスを開き、赤いてんとう虫をライブラリに追加します。
   
   
2. Static Detailsレイヤーの下に新しいレイヤーを追加し、「Bug 2」という名前を付けます。キーフレーム（挿入–タイムライン–キーフレーム）をフレーム110に追加します。赤いてんとう虫をライブラリからカメオの下にドラッグし、今のところ見えないようにします。
   
   テキストが消えてステージから消えるまで、このてんとう虫が左に移動するようにします。そのため、フレーム160に到達するまでに、てんとう虫をステージの左端まで移動してほしいです。
   
   
3. Bug 2レイヤーのフレーム160をクリックし、キーフレームを追加して、赤いてんとう虫を左に、ステージの外までドラッグします。フレーム110と160の間を右クリックし、ポップアップメニューから「モーショントゥイーンを作成」を選択します。
   
   ムービーをテストすると、てんとう虫がムービーの上を移動すると、テキストが消えるのを確認できます。赤いてんとう虫がステージから外れたら、金色のてんとう虫（バグ1レイヤー）を上から右に動かして、ステージから消えます。
   
   
4. Bug 1レイヤーのフレーム160をクリックし、ゴールドてんとう虫のアニメーションの開始点にキーフレームを追加します。 20フレームを使用して、金色のてんとう虫をステージから移動させましょう。フレーム180をクリックして、キーフレームを追加します。ゴールドのてんとう虫をステージの上下に移動します。
   
   
5. フレーム160と180の間を右クリックして、モーショントゥイーンを作成します。フレーム180をクリックし、静的詳細および背景レイヤーにフレームを追加して、これらのレイヤーのコンテンツを再び表示します。
   
   最後に、金色のてんとう虫をステージの左下の元の位置に戻します。しかし、バグをステージの最上部から下に移動させたくありません。ステージの下から上に移動してほしい。そのため、最初に左とステージの下に金色のてんとう虫を配置する必要があります。あとは、アニメーションを繰り返すことができるように、元の位置に戻すだけです。 10フレームを使用して、てんとう虫を元の位置に戻します。
   
   
6. Bug 1レイヤーのフレーム1に戻り、ゴールドのてんとう虫を選択します。 「編集-コピー」をクリックして、ゴールドてんとう虫の元の位置を保存します。
   
   
7. 引き続きBug 1レイヤーで、フレーム190にキーフレームを追加します。[編集] – [クリア]をクリックして、既に存在するゴールドのてんとう虫を削除します。次に、[編集]-[所定の位置に貼り付け]をクリックして、金色のてんとう虫を元の位置に戻します。
   
   
8. 引き続きBug 1レイヤーで、フレーム181をクリックしてキーフレームを追加します。次に、すでにあるゴールドのてんとう虫を削除します。金色のてんとう虫をこのフレームの元の位置に戻します（貼り付けます）。次に、このてんとう虫をステージの下にドラッグします。フレーム181と190の間にモーショントゥイーンを追加すると、このてんとう虫がステージ上に移動します。
   
   
9. フレーム190をクリックし、静的詳細レイヤーと背景レイヤーにフレームを追加して、これらのレイヤーのコンテンツを再び表示します。
   
   

まばたきをテストし、blinkie3.flaとして保存します。その後、まばたきを.swfファイルとして公開し、新しいまばたきをお楽しみください。

J3デザイン

Copyright 2018 Adob​​e Systems Incorporated。全著作権所有。 Adobe Systems Incorporatedの許可を得て、Adobe製品のスクリーンショットを転載しました。 Adobe、Photoshop、Photoshop Album、Photoshop Elements、Illustrator、InDesign、GoLive、Acrobat、Cue、Premiere Pro、Premiere Elements、Bridge、After Effects、InCopy、Dreamweaver、Flash、ActionScript、Fireworks、Contribute、Captivate、Flash CatalystおよびFlash Paper米国および/またはその他の国におけるAdobe Systems Incorporatedの登録商標または商標です。