古堅真彦のActionScript 3.0によるインタラクティブデザイン講座

動きのデザイン、インタラクティブなデザイン、最近のWebサイトではこれらの要素が重要です。単純なビジュアルをデザインするだけではなく、それを成り立たせる構造やしくみを「デザイン」することが求められています。この構造やしくみのデザインに「プログラミング」はとても有効です。

時間という数値や、ユーザーからのアクションというデータにどのような処理をして、画面上に反映させるか、そこに「アルゴリズム」を組み立ててプログラミングすれば、とても表現豊かなWebサイトが出来上がるでしょう。

このコンテンツはJavaScriptをONにする必要があります。

※サンプル「大量のオブジェクトを物理法則で動かす」

本講座ではActionScript3.0を活用して、プログラミングはどのような表現が可能で、またどのような表現が得意なのかを体験し、独自の表現を模索します。

また、求める表現を実現するために必要となる、基本的な物理法則や数学的な公式を再復習し、概念を身につけた上でどのようなプログラミングに落とし込めばよいかを学習します。

数学の知識は高校文系程度を何となく覚えている程度で十分です。スクリプトはActionScript 3.0を使い、条件分岐やforループ、イベントリスナーの扱い、メソッドの定義を理解していることが前提となります。

受講者全員に古堅氏の著書『 Flash Math & Physics Design -ActionScript 3.0による数学・物理学表現- [入門編] 』をテキストとしてプレゼントいたします。

講座レベル

■カリキュラム概要

1. 「徐々に近づく」計算式を活用したインタラクティブな動き
2. 三角関数（sin、cos）を利用した回転メニュー
3. ３次元理論とぼかしフィルタを組み合わせたリアルな表現
4. 物理法則に則ってマウスに追随するロープ
5. 大量のオブジェクトを物理法則で動かす
6. お互いがちょうどよい距離を撮り合うオブジェクト

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション: Adobe Flash CS4
講師: 古堅真彦
テキスト: 『 Flash Math & Physics Design -ActionScript 3.0による数学・物理学表現-[入門編] 』
定員: 6名
対象: ActionScript 3.0の条件分岐やforループ、イベントリスナーの扱い、メソッドの定義を学習された方。
「林拓也のActionScript 3.0入門講座（後半）」を受講された方。
プログラミングを使ったデザイン表現に興味があるが、どのようにすればいいのか分からない方。
本ページ下の受講対象レベルチェック問題を理解できる方。
料金: 29,800円（税込み）

現在の募集はありません。最新情報はメールマガジン、RSSで配信しておりますのでぜひご確認ください。

受講希望の方は受講規約およびよくある質問のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。またお申し込みの流れもご参照ください。

■受講対象レベルチェック問題

＊全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問1：

ActionScript3.0でステージ上をクリックしたらその位置に半径20の円が描かれるプログラミングを考えてください。

このコンテンツはJavaScriptをONにする必要があります。

問2：

上記「問１」をベースにして、クリック位置から36度、距離が100離れた位置に半径20の円が描かれるプログラミングを考えてください。（角度は水平右向きを０度、時計回りを正の方向とします。）

このコンテンツはJavaScriptをONにする必要があります。

問3：

for文を活用してステージ上に図のような絵を描いてください。（黒い四角は20×20ピクセル、それぞれの間隔は10ピクセル。）

このコンテンツはJavaScriptをONにする必要があります。

答1：

//addEventListnerとMousEventとdrawCircleを活用
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(ev:MouseEvent){
	this.graphics.lineStyle(1, 0x000000);
	this.graphics.drawCircle(ev.target.mouseX, ev.target.mouseY, 20);
}

答2：

//sin、cosを活用して、任意の距離と角度の位置に描く
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(ev:MouseEvent){
	this.graphics.lineStyle(1, 0x000000);
	this.graphics.drawCircle(ev.target.mouseX+100*Math.cos(36/180*Math.PI), ev.target.mouseY+100*Math.sin(36/180*Math.PI), 20);
}

答3：

(A)

//２重のfor文で縦と横方向に位置をずらしながら描く
this.graphics.lineStyle(0, 0, 0);
for(var yp:Number = 0; yp < 8; yp = yp+1){
	for(var xp:Number = 0; xp < 8; xp = xp+1){
		this.graphics.beginFill(0x000000);
		this.graphics.drawRect(45+xp*30, 45+yp*30, 20, 20);
		this.graphics.endFill();
	}
}

(B)

//64個の黒い四角を折り返し（割り算の商と余りを使いながら）描く
this.graphics.lineStyle(0, 0, 0);
for(var i:Number = 0; i < 64; i = i+1){
	this.graphics.beginFill(0x000000);
	this.graphics.drawRect(45+int(i/8)*30, 45+(i%8)*30, 20, 20);
	this.graphics.endFill();
}

(C)

//大きな黒い四角を描いてから
this.graphics.lineStyle(0, 0, 0);
this.graphics.beginFill(0x000000);
this.graphics.drawRect(45, 45, 240, 240);
this.graphics.endFill();

//白い線（長細い四角）を縦と横に描いていく
for(var yp:Number = 0; yp < 8; yp = yp+1){
	this.graphics.beginFill(0xFFFFFF);
	this.graphics.drawRect(40, 65+yp*30, 250, 10);
	this.graphics.endFill();
}
for(var xp:Number = 0; xp < 8; xp = xp+1){
	this.graphics.beginFill(0xFFFFFF);
	this.graphics.drawRect(65+xp*30, 40, 10, 250);
	this.graphics.endFill();
}