第17回
デジタル時計の作り方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回は、ActionScript 3.0の初歩でもある、デジタル時計の作り方をご紹介します。

▼完成

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

 

作成方法

  1. 新規ファイル(AS3.0)を開き、ステージサイズを「250」×「150」pxに変更します。
  2. 背景を作成します。(位置はステージに合わせます。)
    [矩形]ツールでステージサイズと同じ、250×150pxの矩形を描画します。描画した矩形を選択し、カラーパネルでカラーを変更していきます。種類で線状を選択し、グラデーションカラーを左「#663333」、右「#D9B3B3」とします。
    描画した矩形の色を設定
    設定が終わったら誤操作を防ぐために、レイヤーにはロックをかけておきます。
  3. レイヤーを追加し、下記の画像のように日付・時間を表示するテキストをそれぞれ作成します。
    日付・時間を表示するテキストをそれぞれ作成
    「/」、「:」は静止テキスト、それ以外はダイナミックテキストで作成します。入力する文字はあくまでも目安なので何でもOKです。
  4. 作成したテキストにグラデーショングローを適用します。
    テキスト全てを選択し、プロパティパネルのフィルタでグラデーショングローを適用します。下記の通り設定します。
    作成したテキストにグラデーショングローを適用
    グラデーションカラーは「#FF6599」とします。
    グラデーションカラーを設定
  5. 作成したテキストにそれぞれのインスタンス名を設定します。
    • 「年」を表示するテキスト⇒「year_txt」
    • 「月」を表示するテキスト⇒「month_txt」
    • 「日」を表示するテキスト⇒「day_txt」
    • 「時」を表示するテキスト⇒「hour_txt」
    • 「分」を表示するテキスト⇒「minute_txt」
    • 「秒」を表示するテキスト⇒「second_txt」
  6. 新規にレイヤーを追加し、下記のスクリプトを記述します。
    addEventListener(Event.ENTER_FRAME,digitalclockDate);
    
    function digitalclockDate(evt:Event):void{
    	//Dateクラス設定
    
    
    	var dateObj = new Date();
    	//年を表示
    	year_txt.text = dateObj.fullYear;
    	//月を表示
    	if (dateObj.month< 10) {
    		//1桁の場合は頭に0を足す
    
    
    		month_txt.text = "0" + (dateObj.month + 1);
    	} else {
    		month_txt.text = dateObj.month;
    	}
    	//日を表示
    	if (dateObj.date< 10) {
    		//1桁の場合は頭に0を足す
    
    
    		day_txt.text = "0" + dateObj.date;
    	} else {
    		day_txt.text = dateObj.date;
    	}
    	//時を表示
    	if (dateObj.hours< 10) {
    		//1桁の場合は頭に0を足す
    
    
    		hour_txt.text = "0" + dateObj.hours;
    	} else {
    		hour_txt.text = dateObj.hours;
    	}
    	//分を表示
    	if (dateObj.minutes< 10) {
    		//1桁の場合は頭に0を足す
    
    
    		minute_txt.text = "0" + dateObj.minutes;
    	} else {
    		minute_txt.text = dateObj.minutes;
    	}
    	//秒を表示
    	if (dateObj.seconds< 10) {
    		//1桁の場合は頭に0を足す
    
    
    		second_txt.text = "0" + dateObj.seconds;
    	} else {
    		second_txt.text = dateObj.seconds;
    	}
    }

ムービープレビューで動作を確認します。

次のページは…
アナログ時計の作り方
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読