このチュートリアルで、私はActionScript 3.0を利用し、スタイリッシュアナログ時計をどう作成かを示します。我々もFlashのScreentime 付きswf映画を使って、完全に機能するスクリーンセーバーをクリエートします。
ステップ 1: 簡単な概要
Dateオブジェクトとそのプロパティを使用して、我々は1日、時間、分、秒を取得し、単純な数学を使用し、取得したデータをアナログ時計で表示させます。Timerによって、更新が処理されます。
また、このTutorialに従って、スクリーンセーバーには、デジタル時計を追加することができます。
ステップ 2: 開始
Flashを開いて、新しいFlashファイル（ActionScriptの3）を作成します。
640 × 400のステージのサイズを設定し、灰色の直線の背景（＃DBDBDD、＃B3B2B7）を追加します。Screentimeが自動的にフルスクリーンモードにムービーをスケーリングするので、フル解像度でのステージを設定する必要はありません。
ステップ 3: 時計の背景
我々は、時計の背景を作成することから始めましょう。
楕円ツール（O）を選択して、250 × 250ピクセルの円を描いて、黒い線の背景を（＃313131、＃000000）追加します。 グラデーションの変換ツール（換）を使用して、次の画像に見えるようにグラデーションを回転します：
今回は、248×248で、この線形グラデーション（＃595959、＃000000）を持つ別の円を作成します。 再度、グラデーションの変換ツールを使用し、回転して、グラデーションを調整します。
ステップ 4: 数字
今はクロックに数字を追加してみましょう。
テキストツール（T）を選択して、好きなフォントをピックアップし、クロックの適切なサイズを選択します。 私はMyriad Pro Regular, 22 Pt, #DDDDDD通常使用されます。
参照をせずに、それぞれに1つのテキストフィールドに数値を記述し、クロックに揃えるには、少し難しいので、画像のガイドを確認してください。
水平:
垂直:
ステップ 5: 時計の針
時計の針を作成します。
ポリスターツール（矩形ツールボタンをクリックして保つ）を選択して、[プロパティ]パネルをクリックしてツールの設定セクションの[オプション]ボタンをクリックします。 周辺数を３に変更します。
ホワイト20×70ピクセル三角形を作成し、MovieClipに変換し、"hourHand”で命名します。
分針はこのプロセスを繰り返しますが、高さは110ピクセルに変更します。インスタンス名を"minuteHand"に設定してください。
楕円形のツールを選択して、26×26ピクセルサークルを作成し、MovieClipに変換し、次のようにフィルタを適用します：
秒針は、2×116ピクセルの四角形と8 × 8ピクセルの円を組み合わせます。この色＃C90303でそれらを入力します。
ステップ 6: ActionScript
新しいActionScriptドキュメントを作成し、"Analog Clock.as"として保存します。
ステップ 7: 必要なクラス
これらは我々が必要になるクラスです：
- package
- {
- import flash.display.Sprite;
- import flash.utils.Timer;
- import flash.events.TimerEvent;
ステップ 8: クラスの拡張
我々はスプライトの特定のメソッドとプロパティを使用するつもりですので、我々はSpriteクラスを使用して拡張します。
- public class AnalogClock extends Sprite
- {
ステップ 9: 変数
我々が使用する変数は、コメント欄で説明しました。
- /* A Date object used to get the time */
- var date:Date = new Date();
- /* Time Variables */
- var hours:int = date.hours;
- var minutes:* = date.minutes;
- var seconds:* = date.seconds;
- /* A Timer object that will handle the updates, executed every second */
- var timer:Timer = new Timer(1000);
ステップ 10: main関数
クラスのロード時、この関数が実行されます。
- public function AnalogClock():void
- {
- /* This code will set the clock hands in the correct position using the Date object data */
- //The Hour Hand rotates 30 degrees in 60 minutes, thatüfs 0.5 degrees per minute
- hourHand.rotation = hours * 30 + (minutes * 0.5);
- //The Minute rotates 6 degrees per minute, thatüfs 360 degrees in 60 minutes an hour
- minuteHand.rotation = minutes * 6;
- //The Second Hand rotates 6 degrees per second, that is 360 degrees in 60 seconds a minute
- secondHand.rotation = seconds * 6;
- timer.addEventListener(TimerEvent.TIMER, updateClock);
- timer.start();
- }
ステップ 11: Update関数
これは、時計を処理する関数です。これは最初の関数と同じコードで、単にタイマーで1秒ごとに実行されます。
- private function updateClock(e:TimerEvent):void
- {
- date = new Date();
- hours = date.hours;
- minutes = date.minutes;
- seconds = date.seconds;
- hourHand.rotation = hours * 30 + (minutes * 0.5);
- minuteHand.rotation = minutes * 6;
- secondHand.rotation = seconds * 6;
- }
ステップ 12: Documentクラス
flaファイルに移動、[プロパティ]パネルにクラスのフィールドで、"AnalogClock"を追加し、ドキュメントクラスを作成します。
ステップ 13: フラッシュのScreentime
フラッシュのScreentimeはスクリーンセーバー作成ツールで、高速で使いやすいです。Webサイトからトライアル版を入手することができます。スクリーンセーバーが構築されてから1週間の期限を除いて、デモは完全に機能しています。
このチュートリアルでは私はMac版を使用しているため、スクリーンセーバーはmacだけでです。
ステップ 14: スクリーンセーバー
Screentimeをオープンし、[コンテンツ]タブで、"…"ボタンをクリックしてファイルを選択し、SWFを参照します。スクリーンセーバーの名前を入力します。
Properties とInstaller をデフォルトとして、Publish タブでinstallerを命名し、必要なオプションを選択し、Buildをクリックします。
ビルドが完了すると、インストーラアプリケーションを開き、インストールをクリックします。今すぐシステム環境設定から派手なスクリーンセーバーを選択することができます。
終わり
あなたがどれだけ簡単に、Flashムービーやアプリケーションをスクリーンセーバーに変換し、Screentimeアプリケーションを探索し、独自に作成することを学びました！
読んでいただきありがとうございます。: )
(No Ratings Yet)
Loading ...Posted on Wednesday, 7th October 2009 by admin
Tags: ActionScript, Flash, Screentime
Posted in ActionScript | Comments (0) | 1,045 views