『デザイナーさんのためのActionScript3.0講座』

デザイン中心って人はなかなか「敷居が高い」って片付けられてしまって、それがさらにモチベーションを遠ざけてしまいがちなActionScript3.0。
参考書籍を見て、いきなり分からないという方は、それ以前の予備知識が必要かもしれないのですが、それより先に簡単なものから触って動かしてしまおう!という考えで、始めていきたいと思います。

ちなみにDTP上がりのデザイナーである僕はこんなタイプでした。

まず環境をつくりましょう。
特にDTPデザイナーさんはMac使いが今でも多いかもしれませんのですが、Windowsユーザの方と特に区別がありませんからご安心下さい!

では、Adobe Flash CS3を立ち上げます。
ここで持ってない方、Adobeのサイトから体験版が試用出来ます。
http://www.adobe.com/jp/products/flash/

(※2008年6月2日現在、問題があって7月からしかダウンロード出来ないらしいです)

クルクル回転させよう

では、いよいよ準備も揃ったので、まずは、えんえんとクルクル回転させてみたいと思います。
ここでいきなりスクリプトの説明をすると疲れちゃうデザイナーさんもいると思うので、このコードをコピーしてアクションパネルに貼ってパブリッシュしてください。
別に横着してもよいという意味じゃないですよ、最初だけですよ、つぎからちゃんと書いてもらいますよ〜っ。

前回の応用で毎フレームの処理を体で憶えよう!!

さてここで前回のおさらいをしましょう。

前回のコードにちょっとだけ変化を持たせてます。

square_mc.addEventListener(Event.ENTER_FRAME,myRotation);
function myRotation(event:Event):void{
square_mc.alpha-=0.1;
}

くどいようだが体で憶えよう!!

  • 直感的に見て、興味をわかせる
  • プログラムが組めたことの実感を味わう
  • 理屈でやるのではなく、最低限は丸覚えでいいので、その理屈は後で理解を深める
  • クラスという概念やオブジェクト指向は今は見送る

はい、ここまで順調にすすんだ方はもうだいぶプログラムという文字や数字の集まりに何となく気持ちが近づいてきたかなって思ってますが、どうでしょう?

まあ、いままでは(当分この先も)理屈を抜きに、いったんこんな感じで「打ってみて」「試してみよう」的なノリで進んだ訳ですが、最初はこれでいいです、とにかくやってみて後からその意味を考えて、サンプルのコードをいじってみたり出来たらさらに一歩前進かな?

前回はプロパティの値をテキストフィールドに挿入してしまう方法を学習しました。
今までは、ただ、画面上の四角いオブジェクトのプロパティの値(x軸のピクセル数とか)を取得する事ができましたが、今度はマウスの動きを取得しましょう。

2008年10月15日のCSS Nite in Osaka, Vol.12のセッションでご案内いたしましたサンプルファイルを公開いたします。

XMLと連携したマウスで動くフォトアルバム

セッション中にご覧になっていただきました例の写真アルバムです。まずはXMLとphotoフォルダの中身を入れ替えてください。

Spriteを継承した簡単なカスタムクラスの練習

外部にクラスファイルを作成、new演算子の呼び出し方は、他のやりかたと全く代わりはありません。

リンケージされたオブジェクトをスクリプトで呼び出す

AS3の場合、新規のクラスをつくるような感じになります。
『基本クラス』の部分はムービークリップシンボルの場合、デフォルトでMovieClipが選ばれているはずです。
クラス名をつけて、インスタンス化する作法と同様に呼び出します。

スプライトに簡単な図形を書く

塗りつぶし、透明度を与えるbeginFill
四角形の場合、drawRect()
角丸四角形の場合、drawRoundRect
円の場合、drawCircle()を使う、いづれにせよ、上記はAS2のようにlineToなどを使う必要は無く、1行で行える。

ステージに複数は位置されているインスタンスに深度でアクセスする

numChildrenプロパティにより、子オブジェクトの数が返ってくるので、getChildAt()でその中の何番目の深度にいる子オブジェクトを指定、イベントを登録する。

外部の画像をローディング

Loaderオブジェクトを作成しロード、URLは別途URLRequestオブジェクトを作り、URLを指定する。

クリックイベントを登録する

addEventListener()メソッドの1番目引数にMouseEvent.CLICK,2番目の引数に自作メソッド名で処理を書く。

ロールオーバーイベントを登録する

addEventListener()メソッドの1番目引数にMouseEvent.ROLL_OVER,2番目の引数に自作メソッド名で処理を書くことで、ロールオーバー登録が出来る。
addEventListener()メソッドの1番目引数にMouseEvent.ROLL_OUT,2番目の引数に自作メソッド名で処理を書くことで、ロールアウト登録が出来る。

ステージのマウス座標の取得

例えば、X座標を取得するには、stage.mouseXを指定する。

リンケージした新規クラスの動作を外部asファイルに書く

一連の新規クラスの機能は外部に書いておくとよい。

1秒経つとイベントが通知されるタイマー

Timer()の第一引数には1000分の1秒単位で、第2引数はそれを何回繰り返すか、を記述。

Author
HidekiAkiba

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。

セミナー情報|秋葉秀樹
カテゴリ
siteInformation

info@akibahideki.com

Valid XHTML 1.0 Transitional 正当なCSSです!

powered by MovableType4
Powered by MovableType 4

Flash/ActionScript3.0
(X)HTMLwithCSS バグフィックス!?
WORKS
WEBデザイナーの日々是日記
Tags
2レイヤーで作るアクアアイコン Photoshop レイヤー効果 グラデーション 光彩(外側) ActionScript 3.0 ActionScript3.0 DTP上がりのデザイナー Flash ActionScript3.0 マウスイベントに挑戦 AS3 BitmapData Box2D BOX2DFlashAS3とMovableTypeを連携させる実験中(続編) BOX2DFlashAS3のMovableType(続編) clearfix、下に出る余白をfont-sizeが影響!?:Mac Safari 2 CSS CSS Nite CSS Nite in Osaka CSS Nite in Osakaに私、秋葉秀樹が出演します。 DREAMWEAVER テンプレート コメントタグ 表示崩れ IE6 Flash ActionScript3.0 超入門講座 flash ゴムの動き バネの動き Flashブログ GoogleEarth http://box2dflash.sourceforge.net/ http://www.akibahideki.com http://www.akibahideki.com/ ie6 margin 2倍 Sleipnir スレイプニール バグ Illustrator iPhone風 アクア アイコン Mac 故障 再起動 システム終了 2つに ダブる 英語 しゃべる Papervision 3D UMap Vol.12 WEB案件1つ終了、と・・思いきや WiiFlashServer XML アイデアに詰まり、リフレッシュにも勇気がいる。 イメディオセミナー イラスト グローバルナビゲーション 押したくなるボタン Photoshop セミナー タイトルバー、サイドメニューのボタンデザイン デザイナーさんのためのActionScript3.0講座 デザイナーさんのためのActionScript3.0講座 DTPデザイナー Flash デザイン ドラム バネの動き プロパティの値を取得してみよう ダイナミックテキスト マウスにゆっくりついてくるムービークリップ ライブイベント ロゴタイトルに説得力を持たせるデザイン手法 初心者のためのActionScript3.0入門講座 初心者のためのActionScript3.0入門講座 case.1-4 名刺 デザイナーの名刺 慣性 秋葉秀樹 衝突判定 講師 迷路