基礎から学ぶActionScript 3.0

時計の秒針と分針のアニメーション

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
時計の秒針と分針のアニメーションは、DateインスタンスのDate.secondsとDate.minutesプロパティを調べて、1分間または1時間で360度回します。
講師:
09:11

字幕

時計の秒針と、分針の アニメーションを作ってみます。 この時刻は、きちんとコンピューターの 時計から取り出して、 正確に、それに合わせてあります。 時、分、秒の時、 いわゆる短針は、 ちょっと別考慮が必要なので、 今回は使わない事にします。 正確に、現在の時刻の青い針が分、 赤い針が秒を示しています。 まず、秒針から作ります。 タイムラインに秒針のインスタンスが、 ムービークリップインスタンスが 配置してあります。 この中に、シンボルの中に、 フレームアクションが書かれていますので、 シンボルのインスタンスをダブルクリックして、 シンボルの編集状態にします。 シンボルは、 Bar_Second にしてあります。 今、シンボルが編集されている状態です。 scripts のレイヤーに、 すでに側の分だけ、 EventListener の登録の部分だけ、 書いてあります。 今、「アクション」パネルを開くのに ショートカットを使いました。 一回、閉じましょう。 キーボードから、 Windows は Alt キー、 Macintosh は Option キーを押しながら、 キーフレームをダブルクリックです。 これで、「アクション」パネルが開きます。 今、書かれているのは、 EventListener の登録の部分だけです。 アニメーションについては、まだ、 ステートメントが書かれていません。 確認しましょう。 addEventListner で、 イベントは、アニメーションの場合には、 Event.ENTER_FRAME です。 そして、リスナー関数を定めます。 2行目がリスナー関数の定義で、 eventObject を引数として受け取り、 データ型は指定したイベント、 ENTER_FRAME のクラス Event になります。 そして :void で {} の中には、 まだ、ステートメントが入っていません。 これから加えます。 まず Date クラスの インスタンスを作ります。 そして、変数を入れますので、 変数名は my_date にします。 データ型は Date クラスの インスタンスですから、 Date です。 そして、インスタンスを作る時は、 new クラス名 Date がハイライトしましたので、 Enter キーで入れてしまいます。 () の中は、今回は何も入れません。 そして、秒針ですから、 秒を取り出して、変数に入れます。 変数名は nSeconds にしましょう。 秒針は、秒の単位は、 Number としときます。 そして、 秒数の取り出しはインスタンス、 Date インスタンスの、 seconds というプロパティですね。 s で、 seconds が ハイライトしましたので。 Enter キーで入力しました。 そして、このインスタンスの角度、 rotation を、 1秒あたり6度回転しますので、 nSeconds これはコピーを 使った方がいいですね。 タイプミスを防ぐために、 コピーを使いまして、 1秒あたり6度回転すればいい という事になります。 では、「アクション」パネルは いったん閉じて、 ムービープレビューで確かめましょう。 「制御」>「ムービープレビュー」です。 針がいきなり、角度をトンッと回りましたね。 これはタイマーと違って、 現在の時刻の秒を取って設定したからです。 ですから、今さっき、 多分、 15 秒以上過ぎてたんだと思います。 ですので、4分の1の角度以上回りました。 でも、その後はちゃんと、 1秒1秒回転しています。 良さそうですね。 では、 SWF のウインドウを閉じます。 そして、今度は分針に移りますので、 「シーン1」、メインタイムラインに 戻りましょう。 次は分針です。 まだ、タイムラインにおいてませんので、 「ライブラリ」から、 分針は Bar_Minute という 名前にしています。 これを、とりあえず、ステージに タイムラインに持ってきて、 位置は、「プロパティ」インスペクターで 揃えます。 重ね順は、分針の方を 秒針の後ろにしましょう。 「修正」で「重ね順」を 「最背面」へ持っていきます。 そして、やはり、この分針のシンボルの中に スクリプトを書きますので、 ダブルクリックで、 シンボルの編集にします。 Bar_Minute が、 今、開いている状態です。 やはり、スクリプトは 途中まで書いてあります。 「アクション」パネルを開きましょう。 キーフレームを、 Windows は Alt Mac は Option を 押しながら、ダブルクリックです。 やはり、 EventListener の 登録まではやってあります。 addEventListener で、 Event.ENTER_FRAME 関数名だけ一応、変えてあります。 xSetMinutes です。 そして、 eventObject を 受け取って、と。 :void そして {} 先程の秒針の場合と、ほとんど一緒ですね。 リスナー関数の中に、 ステートメントを書き込みましょう。 やはり、 Date インスタンスを 作ります。 var my_date そして、型指定、 データ型は Date ですね。 new Date () 秒針と同じ変数名は使っていますけども、 ローカル変数ですし。 function の中で宣言した ローカル変数ですし、 また、シンボルも異なります。 インスタンスが異なっていますので、 同じ名前を使ったからといって、 ぶつかる事はないです。 では、分を取り出しましょう。 分数(ふんすう)ですね。 nMinutes とします。 型指定、 データ型は Number です。 そして、 my_date.minutes ですね。 コードヒントから、 Enter で入力しました。 角度は 60 秒で1分、 60 分で1時間ですから、 回転角は一緒ですね。 rotation = minutes は、 ちょっとタイプが変わっていますので、 タイプミスをしないようにコピーをします。 そして、1分あたり6度ですから、 やはり 6 をかけます。 これで分針も出来上がりました。 「アクション」パネルは、 いったん閉じます。 それから、シンボルの編集状態から、 メインタイムライン、 「シーン 1」に戻りましょう。 そして、ムービープレビューを確かめます。 「制御」>「ムービープレビュー」です。 現在の時刻の分と秒に針があります。 秒はちょうど、 ゼロのところだったようですね。 現在の時刻が示されていませんけれども、 間違いなく現在の分と秒に従って、 針が回転しています。 SWF のウインドウは閉じましょう。 フレームアクションを もう一度見て、おさらいしましょう。 代表して、秒針の方から開きます。 「シーン 1 Bar_Second 」という、 秒針のシンボルが開いています。 このフレームアクションで 確認する事にしましょう。 まず、アニメーションはいいですね。 addEventListener (Event.ENTER_FRAME, そして、リスナー関数を定義していますので、 毎フレーム、毎フレーム、 描画が更新されて、 アニメーションが行われます。 ポイントはこの中の部分です。 new Date で、 Date インスタンスを作ります。 Date で、データ型を 指定した変数に入れます。 そして、プロパティは、 秒の場合には .seconds です。 いちいち開きませんが、 先程の分数(ふんすう)の場合には、 .minutes ですね。 それで、秒、あるいは分が、 変数にとられます。 現在の時刻の秒と分です。 秒も分も、 60 で一回転しますので。 1秒 1分あたりの回転角は、 6度になりますから、 その取り出した秒、 あるいは、分に 6 をかけ合わせて、 インスタンスの回転角とすれば、 時計の針になるという事です。 以上、 Date クラスを使った、 そのプロパティ、 seconds minutes を使って、 秒針と分針の アニメーションを作りました。

基礎から学ぶActionScript 3.0

このコースではFlashのActionScript 3.0を初めて学ぶ方を対象に、ActionScriptの基礎から実際にプログラミングをするところまで学習していきます。簡単なスクリプトによるオブジェクトの操作の仕方から始まり、変数や関数といったプログラミングの基礎、そしてインタラクティブなコンテンツの作成まで詳しく解説いたします。

6時間30分 (49 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。