カテゴリー別アーカイブ: テクニック(Flash)

[Flash]基準点って何?

もう7月になりました。

いよいよ夏突入ですねっ!夏休みの予定はお決まりですか?
私は今のところノープランです。

こんにちは。スタッフ「ほ」です。

さて、先日Flashの講習をした際に、生徒さんから「基準点って何に使うのですか?」というご質問をいただきました。

そんなわけで、今日はFlashネタでいきたいと思います。

例として、時計の秒針を使ったサンプルで説明します。

ファイルをこちらからダウンロードできます。

Flashをお持ちの方は、ダウンロードして練習用に使ってみてください。

まずは、「そもそも基準点って何?」というお話から。
Flash上で、オブジェクトを作成し、シンボルに変換する際に以下のダイアログが表示されます。

このダイアログのひとつの項目に「基準点」という欄があります。
この画面では、基準点は左上、ってことになります。このままシンボルを登録してみます。

出来上がったシンボルをライブラリから開いてみると、シンボルの左上に「+」マークが表示されています。これが「基準点」です。

ちなみに「自由変形ツール」でオブジェクトやシンボルを選択した時に表示される中心の○マークは「変形点」というもので、基準点とは別のものです。

こちらは自由変形ツールで拡大縮小やオブジェクトを回転させるときの中心になる点です。

さて、結局「基準点って何に使うの?」ってことになるわけですが、言葉で説明すると「Actionscriptでインスタンスを扱うときに基準になる座標の原点」ってことになります。ますます訳がわかりません。

そこで、ひとつサンプルを作成してみました。

時計のデータを作成しました。とりあえず秒針だけ作成しています。

秒針をシンボルとして登録します。
ここでは、ひとまず基準点を初期設定の左上のままにしてみます。

Actionscriptで秒針を回転させるスクリプトを書きます。
※今回、スクリプトの説明までしてしまうと、かなーり長くなってしまうので細かい解説はダウンロードできるファイルのスクリプト内に書いておきました。そちらをご参照ください。

さて、ムービープレビューしてみます。すると・・・

あらら?秒針が変な回転になってしまいました。

スクリプトでインスタンスを回転させると、基準点を中心とした回転になるため、このような現象がおきるのです。

それでは、これを調整してみます。ライブラリパネルから、登録した秒針のシンボルをダブルクリックして編集画面に入ります。
ここで、秒針のオブジェクトを移動して、基準点に回転の中心が来るように配置しなおしてください。

シーン1へ戻り、ずれた秒針の位置を調整し、再度、プレビューしてみましょう。

今度は、正しい回転になりました。
こんな感じで利用します。

まぁ、必要ない時は、まったく意識する必要はありませんし、シンボル編集で後からでも位置は調整できますので、シンボル登録する際は、どこになっていても大丈夫です。

「インスタンスって何?」「シンボル??」という方は、Flashの基本操作が1日で学べるバンフートレーニングスクールの「Flash基礎講座」にてお待ちしております。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Flash]雲の流れを自然に見せる

昨年、クリスマスイブに大型量販店で処分価格になっていたクリスマスの飾りを買い込んでおいたので、張り切ってツリーにつけようと思ったら、多すぎて我が家の小さめのクリスマスツリーには飾りきれない事態に…orz

大きなツリーに買い替えよう!と提案し家族から却下されたスタッフ「ほ」です。

さて、長い間たくさんの生徒さんからリクエストをいただいておりましたFlash講座が開講しております。

ですので、今回はFlashネタで行きたいと思います。

─────────────────

以前、ある生徒さんから
「空を流れる雲をループで作ると、いかにも『ループしてます』という印象になって単調になってしまうんですけど」
というご質問を受けました。

まぁ、こういうイメージですね↓

サンプルファイル「cloud01.fla」

雲のシンボルを3種類作って、それぞれのインスタンスを配置し、モーショントゥイーンで、流れる動きを付けました。
Flashを使ったことがある人であれば、簡単に作れるアニメーションだと思います。

これをいかにランダムっぽく見せていくか?ってのが今回のテーマです。

だいたい「Flash+ランダム」ってキーワードで検索すると、ActionScriptを使った方法がヒットします。
が、初心者には敷居が高いんですよね。

なので、ここではActionScriptは使わずにがんばってみようと思います。

こちらからサンプルデータをダウンロードできます。
4つのファイルが圧縮されていますのでダウンロード後、解凍してご利用ください。

サンプルファイル(zip形式/40KB)

さぁ、それでは始めましょう。
まずはファーストステップ

ステップ1:それぞれの雲の速度を変えてみよう

ランダムに見せるためには、それぞれの雲の速度を変えるのがてっとり早いです。

流れる風景ってのは、基本的に近くのものは早く、遠くにあるものほどゆっくり動きます。

車に乗って窓の外を眺める時を思い出してください。
近くにある街灯や建物はびゅんびゅんすごいスピードで通り過ぎて行きますが、遠くに見える山や雲はゆっくりと動いているはずです。

なので、近くにある雲と遠くにある雲とで、画面の右端から左端まで移動するのに要するフレーム数を変えていきます。

一番大きな手前の雲を30フレームで。
真中の雲を60フレームで。
そして一番奥に見える小さな雲を120フレームで1ループするようにしてみました。

その結果がこれです↓

サンプルファイル「cloud02.fla」

どうでしょう?
これだけでも、かなり自然に見えるようになったんじゃないでしょうか。

ただ、この状態では、タイムラインがえらいことに…
そこで次のステップ

ステップ2:タイムラインをすっきりと

現時点でのタイムラインはこんな感じです↓


※クリックで拡大します

雲が3つあるので、雲のレイヤーのために3レイヤーを用意し、それぞれ30フレーム周期、60フレーム周期、120フレームで雲が一巡するように作っています。

雲がさらに増えて行くと、どんどん雲のためのレイヤーが増えていくわけです。

ちょっと管理しづらいですよね。

そこで、雲が流れる動きは、シーン1のタイムラインには作らずに、シンボル内のタイムラインで作成することにします。

ステージに配置されている雲の1つをダブルクリックしてシンボル編集モードに入ります。

シンボルの中にもタイムラインは存在しますので、ここで雲が流れる動きをモーショントゥイーンで作成します。


※クリックで拡大します

3つの雲、すべてに動きをつけていきます。

シーン1に戻り、背景以外のレイヤーを一度削除します。

新たに1つレイヤーを追加します。

追加したレイヤーに、ライブラリパネルから3つの雲のインスタンスを配置します。

プレビューしてみると…

サンプルファイル「cloud03.fla」

先程と同じようなアニメーションができます。
※シンボルがムービークリップで作成されている必要があります。

ただし、今回のタイムラインはこんなです。

どうでしょう?
かなりスッキリしましたね。

ここで完成!と言ってもいいところですが、もうひと押し。

ステップ3:雲を変形させてみよう

流れるだけではなく、刻々と形を変える雲にしてみましょう。

ステージ上に配置されている雲をダブルクリックします。

雲のシンボル編集モードに変わり、ここのタイムラインに先程作った雲が流れる動きが作られています。

そこで、今の雲をもう一度ダブルクリックします。

さらに一段下のシンボル編集モードに入ります。

ちょっとややこしいですね。

Flashは、モーショントゥイーンを作成すると、そこで動きを付けたオブジェクトは、自動的にシンボルに変換されます。

今回は、シーン1のステージ上で雲を配置しました。

この雲はインスタンス(分身)です。
ですので、そのシンボル(本体)がライブラリパネルに登録されています。
※サンプルファイルでは、このシンボルを「雲1」と名付けました。

ステージ上でインスタンスをダブルクリックすることでシンボルを編集することができるのですが、今回は、そのシンボルの中でさらにモーショントゥイーンを作成しているため、そこに配置されている雲がさらにシンボルとして登録されます。
※サンプルファイルでは、このシンボルを「cloud1」と名付けました。

ですので、シーン1のステージ上で雲をダブルクリックすると、

シーン1>雲1

となり、「雲1」のシンボルを編集するモードになります。

そこで、もう一度雲をダブルクリックすると

シーン1>雲1>cloud1

を編集することになるわけです。

今回、シンボル「雲1」には雲が流れる動きをつけました。

そこからさらに一段下がったシンボル「cloud1」には、今のところ何も動きがついていません。

そこで、このシンボル「cloud1」のタイムラインで、雲が変形するためのシェイプトゥイーンを作成しました。

イメージ的にはこんな感じです。


※クリックで拡大します

んで、出来上がったのが、このアニメーションです
雲が流れつつ変形しているのがわかるでしょうか?

サンプルファイル「cloud04.fla」

この方法がマスターできれば、他にも立ち上る湯気とか、いろんなのに応用できそうですね。

ダウンロードしたサンプルファイルでいろいろ試してみてください。

「そもそもFlashの基本操作がわからないんだけれど…」な方や、「モーショントゥイーン?シェイプトゥイーン?」という方は1日でFlashの基本操作が身に付く「バンフートレーニングスクールのFlash基礎講座」でお待ちしております。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ