短期集中型 アドビ認定トレーニングセンター
m-School (エムスクール)は、駿河台学園グループが運営するITスクールです。

2010年07月26日

ActionScript3.0 データ型の活用方法

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第27回の今日は、データ型についてご紹介します。

データ型とは


ActionScriptで取り扱われるデータは、必ず何らかのに属しています。
変数の型宣言をする際や、値の代入を行う際は、このデータ型の特性を理解し、正しく扱う必要があります。

代表的なデータ型
代表的なデータ型

数値を扱うような変数を宣言したい場合、Numberintuintの3つのデータ型が考えられます。
Number型は、全ての正負の整数から浮動小数点を含む数値まで、全ての数値を扱うことができます。
扱うデータが「正の整数のみ」とあらかじめ決まっているような場合には、uint型で指定するほうが効率的です。

かわいい数値(Number、int、uint)同士は算術演算子を使用して計算処理を行うことができます。
数値の算術演算


かわいい文字列(String)同士の算術演算はできませんが、加算演算「+」を使用すると、文字列同士を連結することができます。
文字列の演算


かわいいまた、数値と文字列も算術演算はできませんが、加算演算「+」を使用すると、「数値が文字列に自動的に変換」され、文字列同士の連結になります。
文字列と数値の演算


数値と数字


0 〜 9までのアラビア数字をプログラム上で扱う際には、データ型の違いに注意が必要ですひらめき
人間の目には同じ形の文字に見えても、プログラム上ではその数字が「数値」、つまりNumber、int、uintのいずれかの型なのか「数字」、つまりString型なのかによって扱い方が異なります。
例えば、uint型の100は算術演算が可能な「数値」ですが、String型の"100(イチゼロゼロ)"は、「数字(文字列)」です。

データ型の変換


データ型は意図的に変換することができます。
特に、文字と数値を取扱う際に文字⇔数値の変換をする場合が多くあります。
ユーザーがテキストフィールドに入力した値は数字かそれ以外の文字かに関わらず、必ずString型になっています。
そこで、入力された数字を算術演算で使用するために、String型のデータを数値の型に変換する必要があります。
このようにデータ型を意図的に変換することを「キャストする」といいます。

データ型をキャストする方法

データ型名(値)

uint(input_txt.text);


この例では、テキストフィールドinput_txtのtextプロパティをuint型に変換しています。このとき、input_txt にアラビア数字以外の数値に変換できない文字などが入力されていた場合は0、Number型に変換しようとしていた場合はNaN(Not a Numberの略)が割り当てられます。

変数の型指定は必須ではありませんが、しておくことが推奨されています。
型指定をすることで、誤ったデータが代入されるのを防げたり、処理が最適化され高速になったり等、メリットが沢山ありますぴかぴか(新しい)
posted by チャッピー at 13:00
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年07月08日

ActionScript3.0 条件分岐の記述方法(else文編)

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第26回の今日は、前回に続き条件分岐についてご紹介します。
今回はelse文です。

else文


前回お話したifは、「条件を満たした場合(true)の処理」のみが指定できましたが、条件分岐にelseを使用すると「条件を満たした場合(true)の処理」と「条件を満たしていない場合(false)の処理」を指定することができますひらめき

else文の記述方法

if(条件){
 条件を満たした場合の処理
}else{
 条件を満たしていない場合の処理



if(studentScore >=80){
 trace("合格");
} else {
 trace("不合格");


この例では、変数studentScoreの値が80より大きいか等しい場合(つまり80 以上の場合)に、「合格」と出力し、この条件を満たさない場合(つまり80 未満の場合)、「不合格」と出力します。

image01.png


また、複数の条件を指定するにはelse ifを使用します。

else if文


else ifを使用すると「条件Aを満たした場合の処理」と「条件Aは満たさないが、条件Bを満たした場合の処理」のように、複数の条件を指定することができます。else ifを複数回使用することで条件を増やすことができますぴかぴか(新しい)


else if文の記述方法

if (条件A){
 条件Aを満たした場合の処理
} else if(条件B){
 条件Bを満たした場合の処理
} else {
 条件を満たしていない場合の処理
}


if (studentScore == 100){
 trace("満点合格");
} else if(studentScore >= 80){
 trace("合格");
} else {
 trace("不合格");
}


この例では、変数studentScoreの値が100 と等しい場合に、「満点合格」と出力し、この条件は満たさないが、80 より大きいか等しい(つまり80 以上100 未満の場合)に、「合格」と出力し、いずれの条件も満たさない場合(つまり80 未満の場合)、「不合格」と出力します。

image02.png

このように、ifやelseを使用して条件分岐をさせることで複雑な動きを実装することができます。
posted by チャッピー at 13:00
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年06月28日

ActionScript3.0 条件分岐の記述方法(if文編)

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第25回の今日は、条件分岐の記述方法(if文編)です。

条件分岐(if文)


条件分岐とは
ある条件を設定しその条件を満たしているか否かによって処理を分ける手法のことを「条件分岐」と呼びます。
通常、スクリプトは上から順番に一本道の処理を行うだけですが、この条件分岐を使うことで、複数パターンの処理を設定できますひらめき

image01.png

条件分岐では「条件を満たすか満たさないか」によって処理が分かれるため、条件設定が非常に重要ですダッシュ(走り出すさま)
条件を満たす場合をtrue(真)、満たさない場合をfalse(偽)といいます。
条件には「値が大きいか小さいか」または「等しいか等しくないか」などを設定することが多く、この値同士などを比較するために「比較演算子」を使用します。

主な比較演算子
image02.png


if文


条件分岐にはいくつか種類がありますが、最も一般的なのがif文です。
ifは日本語に訳すと「もし〜ならば」ですが、プログラムにおいても「もし設定された条件を満たすならば」という意味を表します。

if文の記述方法

条件分岐の中で最もシンプルなif文の場合、「条件を満たした場合(true)の処理」のみが指定でき、「条件を満たしていない場合(false)の処理」を指定することはできません。

if(条件){
  条件を満たした場合の処理




if(studentScore >=80){
  trace("合格");


この例では、変数studentScoreの値が80 より大きいか等しい場合(つまり80 以上の場合)に、「合格」と出力します。この条件を満たさない場合(つまり80 未満の場合)、何も行わずif文の処理を抜けます。

image03.png

次回は、「条件を満たしていない場合(false)の処理」を設定することができる、else文を説明しますぴかぴか(新しい)
posted by チャッピー at 14:34
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年06月17日

ムービークリップシンボルの入れ子構造(ActionScript編)

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第24回の今日は、前回作成したアニメーションにActionScriptを記述して制御を行います。

ムービークリップシンボルの入れ子構造(ActionScript編)


ぴかぴか(新しい)前回のおさらいぴかぴか(新しい)
前回は、ムービークリップシンボルを入れ子してアニメーションを作成しました。
このアニメーションには、メインタイムラインで
・ステージ上を左から右に移動するアニメーション
ムービークリップシンボル内で
・回転するアニメーション
上記の2つが含まれています。
複数のアニメーションに対し、どのように制御をかけていくのかを確認しましょう目

ぴかぴか(新しい)完成ぴかぴか(新しい)






作成方法


1新規にレイヤーを追加して、追加したレイヤーにボタンを配置します。
今回は、サンプルライブラリのボタンを利用して作成します。
[ウィンドウ]メニュー−[サンプルライブラリ]−[ボタン]を選択します。
classic buttons]−[play]と[stop]をステージにドラッグします。
image01.JPG

2配置したボタンそれぞれにインスタンス名をつけます。
・playボタン ⇒ play_btn
・stopボタン ⇒ stop_btn

3次にActionScriptを記述します。
新規にレイヤーを追加して、追加したレイヤーの1フレーム目を選択後、アクションパネルを開きます。
スクリプトペインに下記内容のスクリプトを記述します。
play_btn.addEventListener(MouseEvent.CLICK,xPlay);
stop_btn.addEventListener(MouseEvent.CLICK,xStop);

  function xPlay (evt) :void{
    play();
  }

  function xStop(evt):void{
     stop();
  }


ムービープレビューで動作を確認してみましょう。





左から右への動きは制御できますが、内側の回転の動きは制御できていません。
上記内容のスクリプトでは、あくまでもメインタイムラインで作成されたアニメーションのみ(今回であれば、四角形が左から右へ動くアニメーション)を制御しているに過ぎません。
では、内側の回転の動きも制御するように、下記の通りスクリプトを書き加えてみましょう。

play_btn.addEventListener(MouseEvent.CLICK,xPlay);
stop_btn.addEventListener(MouseEvent.CLICK,xStop);

  function xPlay (evt) :void{
     play();//四角形が左から右へ動くアニメーションを再生
     s1_mc.play();//四角形が回転するアニメーションを再生
  }

  function xStop(evt):void{
     stop();//四角形が左から右へ動くアニメーションを停止
     s1_mc.stop();//四角形が回転するアニメーションを停止
  }


ムービープレビューで動作を確認してみましょう。







アニメーションが入れ子になっている場合や、メインタイムラインに複数アニメーションが含まれる場合、どのアニメーションに対して制御をかけるのかを示す必要があります。
その場合、インスタンス名+制御内容を記述することによって特定のアニメーションに対して制御をかけることができますわーい(嬉しい顔)
posted by チャッピー at 13:54
連載:Flash Beginner's School | コメント(2) | トラックバック(0)
2010年06月10日

ムービークリップシンボルの入れ子構造

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第23回の今日は、ムービークリップシンボルの入れ子アニメーションを作成します。

ムービークリップシンボルの入れ子構造


シンボルはシンボル独自のタイムラインを持ち、メインタイムラインと同様にアニメーションを設定することができます。
ムービークリップシンボルの中に、ムービークリップシンボルを配置するいわゆる「入れ子」の構造を作ることによって、単体で動かすよりもより表現力豊かなアニメーションが実現できますぴかぴか(新しい)

今回は入れ子アニメーションの作り方を覚えるために、例として簡単なアニメーションを作っていきます。

ぴかぴか(新しい)完成ぴかぴか(新しい)






作成方法


1新規ファイル(AS3.0)を開きます。
 [矩形]ツールでステージに適当なサイズの矩形を1つ描画して、ムービークリップシンボルに変換します。
 作成したムービークリップシンボルのインスタンス名を「s1_mc」とします。
image02.JPG

2s1_mcをダブルクリックして、シンボルのタイムラインを表示します。
 新規にレイヤーを追加して、ステージ上の矩形よりも一回り程小さな矩形を1つ描画します。
 ※カラーを変えるなどするとわかりやすいです。
image03.JPG
  
3描画した矩形をムービークリップシンボルに変換した後、インスタンス名を「s2_mc」とします。

4s2_mcが配置してあるレイヤーの1フレームから24フレームにモーショントゥイーンを作成します。
 もう一方のレイヤーの24フレーム目にフレームを挿入します。
image04.JPG
  
5作成したモーショントゥイーンの24フレーム目を選択して、[プロパティ]パネルで「回転」を1回とします。
image05.JPG

6メインタイムラインに戻ります。
 ※ファイル名付近にある「シーン1」をクリックするとメインタイムラインに戻ります。
image06.JPG
  
7先ほどと同様に、1フレームから24フレームまでモーショントゥイーンを作成します。
 1フレーム目を選択して、[選択]ツールでs1_mcをステージの左側に配置します。
 24フレーム目を選択して、[選択]ツールでs1_mcをステージの右側に配置します。
image07.JPG

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

このように、ムービークリップシンボルを入れ子にすることにより、複雑な動きをするアニメーションも簡単に作成することができます手(チョキ)
また、入れ子構造にしたムービークリップシンボルを、ActionScriptで制御する時には階層に注意が必要ですあせあせ(飛び散る汗)
次回は入れ子アニメーションをActionScriptで制御する方法をご紹介したいと思います。
posted by チャッピー at 15:18
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年03月15日

アナログ時計の作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第22回の今日は、Dateクラスを使用してアナログ時計を作ります。

アナログ時計の作り方


ぴかぴか(新しい)完成ぴかぴか(新しい)






1新規ファイル(AS3.0)を開きます。
 ステージサイズを変更します。
 今回は「200」×「200」pxとします。

2文字盤」「秒針」「短針」「長針」の4つの素材をそれぞれ準備します。
analogue_parts

3秒針」「短針」「長針」をそれぞれムービークリップシンボルに変換し、下記の通りインスタンス名をつけます。
 秒針⇒second_mc
 短針⇒hour_mc
 長針⇒minute_mc

4同一のレイヤーにパーツを配置します。
analoguewatch

5新規にレイヤーを追加し、下記のスクリプトを記述します。

Script_Sample

(補足・・・)
【針の回転角度】
秒針は1秒間に360(度)÷60=6度回転
よって
 ⇒現在の秒×(360÷60)

長針は1分間に360(度)÷60=6度回転
よって
 ⇒現在の分×(360÷60)

短針は1時間に360(度)÷12=30度回転
1時間に1回しか動かないのでは針の動きが不自然なので、

これに、1分間に30(短針1時間あたりの回転角度)÷60=0.5度回転する動きを加えます。

よって
 ⇒現在の時×(360÷12)+現在の分×(30÷60)

と、なります。



(2010年3月27日追記)
記述するActionScriptについてですが、

var date = new Date();

ではなく、

var date:Date = new Date();

と、型指定した方がよいとあの方にご指摘を受けましたひらめき

きちんと型指定をした方が、Flash Player上におけるActionScriptの処理パフォーマンスが高まるぴかぴか(新しい)とのことです。
大変失礼いたしました〜あせあせ(飛び散る汗)

で、あの方がどなたかと申しますと、m-Schoolでも何度も講師をしていただいたことのある、あの野中文雄氏です目あせあせ(飛び散る汗)

見ていただけてるとは恐縮ですあせあせ(飛び散る汗)
大変有り難いご指摘ありがとうございましたわーい(嬉しい顔)ぴかぴか(新しい)
posted by チャッピー at 12:00
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年01月27日

マウスチェイサーの作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第21回の今日は、マウスカーソルを追っかける、マウスチェイサーの作り方です。

マウスチェイサーの作り方



ぴかぴか(新しい)完成ぴかぴか(新しい)







1
新規ファイル(AS3.0)を開きます。
マウスチェイサーとするムービークリップを作成します。

2
ペンツールでハートを作成します。
初めに輪郭を描いていきます。
線のカラーを「#FF9999」、塗りのカラーは「なし」とします。
まずは大まかな輪郭を描き、ダイレクト選択ツールで形を微調整していきます。
(ステージのグリッドを表示状態にするとわかりやすいです。)

pen-tool_heart

3
ハートの輪郭ができたら、バケツツールで中を塗りつぶします。
塗りのカラーは、輪郭と同じで「#FF9999」とします。

nuricolor

4
作成したハートを選択し、サイズを調整し(大きすぎず、小さすぎず。)、ムービークリップシンボルに変換します。
プロパティで「mouseChaser_mc」とインスタンス名をつけます。

5
mouseChaser_mcのプロパティで、フィルタ効果をつけます。
フィルタカラーは「#FF0066」とし、その他の項目も下記の通り設定します。

filter_dropshadow

6
最後にActionScriptを記述します。
mouseChaser_mcが配置されたフレームを選択し、アクションパネルに下記の通りスクリプトを記述します。

ActionScript

ムービープレビューで動作を確認します。
posted by チャッピー at 15:14
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年01月15日

デジタル時計の作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

すっかりご無沙汰になってしまいましたチャッピーあせあせ(飛び散る汗)

あっという間に年を越し、あっという間に過ぎていく日々。
1日1日を大切に過ごしたいものですあせあせ(飛び散る汗)

さて、第20回の今日は、ActionScript 3.0の初歩

デジタル時計の作り方



ぴかぴか(新しい)完成ぴかぴか(新しい)







1
新規ファイル(AS3.0)を開きます。
ステージサイズを変更します。
今回は「250」×「150」pxとします。
stagesize

2
背景を作成します。(位置はステージに合わせます。)
矩形ツールでステージサイズと同じ、250×150pxの矩形を描画します。
描画した矩形を選択し、カラーパネルでカラーを変更していきます。
種類で線状を選択し、グラデーションカラーを左「#663333」、右「#D9B3B3」とします。
backgroundcolor
設定が終わったら誤操作を防ぐために、レイヤーにはロックをかけておきます。

3
レイヤーを追加し、下記の画像のように日付、時間を表示するテキストをそれぞれ作成します。
text
「/」、「:」は静止テキスト、それ以外はダイナミックテキストで作成します。
入力する文字はあくまでも目安なので何でもOKです。

4
作成したテキストにグラデーショングローを適用します。
テキスト全てを選択し、プロパティパネルのフィルタでグラデーショングローを適用します。
下記の通り設定します。
color
グラデーションカラーは「#FF6599」とします。
gradation

5
作成したテキストにそれぞれのインスタンス名を設定します。

「年」を表示するテキスト⇒「year_txt」
「月」を表示するテキスト⇒「month_txt」
「日」を表示するテキスト⇒「day_txt」
「時」を表示するテキスト⇒「hour_txt」
「分」を表示するテキスト⇒「minute_txt」
「秒」を表示するテキスト⇒「second_txt」

6
新規にレイヤーを追加し、下記のスクリプトを記述します。

code


ムービープレビューで動作を確認します。
posted by チャッピー at 17:02
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年12月02日

かっこいいフルFlashサイト

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第19回の今日は、ちょっと個人的な趣味に走りますが…フルFlashで作られたサイトのご紹介ぴかぴか(新しい)

k-1×Twitter


k-1×Twitter

K-1×Twitter

k-1好きにはたまらないコンテンツです。
(果たしてブログ読者の皆さまの中にK-1好きがいるのでしょうか…)
このコンテンツは、12月5日に開催される『K-1 WORLD GP 2009 FAINAL』へ向けたTwitterを介したサービスなのですが、フルFlashで作られています。
フルFlashサイト、HTMLサイトと比べるとやっぱり表現力が違いますよねぴかぴか(新しい)
チャッピーはHTMLに関して詳しくないので1ユーザーとして見た客観的な感想ですが、こぉいった期間限定の特別コンテンツや企業のキャンペーンなどにはフルFlashで作られたかっこいいサイトが目をひきます目ぴかぴか(新しい)
かっこいいフルFlashサイトを自分でも作ってみたくないですか?
いきなりフルFlashサイトを作るのは難しいですが…まずは、Flashの基本操作をしっかり覚えて、使いこなすパンチことが重要です。
今から始めれば年明けにはかっこいいフルFlashサイトが作れるかも?
posted by チャッピー at 17:37
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年11月17日

パターン描画ツールの使い方(回転パネル)

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第18回の今日は、

パターン描画ツールの使い方(回転パネル)


こんなの作ってみました。

チャッピーを探せぴかぴか(新しい)
パネルのどこかにチャッピーが隠れてるので探してね。






作成方法


1矩形ツールで適当な大きさの正四角形を作成し、「panel」というシンボル名のムービークリップシンボルに変換します。(ステージの色はお好みの色に変更してね。)

2ムービークリップシンボル内の編集画面で、「panel2」というシンボル名のムービークリップシンボルに変換します。「panel2」に「panel_mc」というインスタンス名をつけます。
シンボル変換

インスタンス名

3下記の通りスクリプトを記述します。
AS

4メインに戻り、ステージ上のインスタンスを削除します。
インスタンスの削除

5隠す対象となる画像を適当な位置に配置します。
画像の配置

6パターン描画ツールを選択し、プロパティパネルで下記設定を行います。

・描画エフェクト
格子模様
塗り:panel
・詳細オプション
水平方向の間隔:2px
垂直方向の間隔:2px

パターン描画ツールの設定

7ステージをクリックして格子模様を作成します。
格子模様の作成

8格子模様を作成したレイヤーをアウトライン表示にし、ロックをかけます。

9隠す対象の画像をpanelシンボルの四角に収まるように位置を調整します。
配置の修正
posted by チャッピー at 14:12
連載:Flash Beginner's School | コメント(0) | トラックバック(0)