講義35日目＆36日目

講義内容

35日目は主にサイト作成の時間となりました。
36日目はActionScriptとJavaScriptの課題問題とサイト作成時間でした。

Flash (ActionScript2.0)

【実践課題I】
テキストボックス名：ans_txt

var tensu:Array=new Array(70,88,63,95,59);
var goukei:Number=0;
for (var i:Number=0;i<tensu.length;i++){
	goukei=goukei+tensu[i];
}
var heikin:Number=goukei/tensu.length
trace("5人の平均点は"+heikin+"点です");
this.ans_txt.text="5人の平均点は"+heikin+"点です";

【実践課題J】
テキストボックス名：kuji_txt

var kuji:Array=new Array("大吉","中吉","小吉","吉","凶");
kakuritsu=Math.floor(Math.random()*5);
trace(kuji[kakuritsu]);
this.kuji_txt.text="あなたの今日の運勢は"+kuji[kakuritsu]+"です";

【実践課題K】
テキストボックス名：ans_txt

var test:Array=new Array(50,33,61,57,49);
for (var i:Number=0;i<test.length;i++){
	test[i]=test[i]+10;
	trace(test[i]);
	this.ans_txt.text +=test[i]+"\n";
}

講義34日目

講義内容

Flash (ActionScript2.0)

減速

ある定点に近づくにつれ減速させるには、加速度を少しずつ減らしてやればよい。
例えば、インスタンス(this)をx軸上のaまで減速値ｂで動かしてやるとすれば　this._x +=(this_mc_x)/bとなる。

var a:Number=400;   //x軸方向に400px移動させる
var b:Number=10;  //減速値（大きいほど遅くなる）

this.onEnterFrame=function(){
  this._x +=(a-this._x)/b;
}

講義33日目

講義内容

Flash (ActionScript2.0)

オニオンスキン

タイムライン下にあるアイコン[オニオンスキン]は、クリックすると前後のフレームが半透明に表示され、複数のフレームにまたがったアニメーションの動きを見ることが出来る。その範囲はタイムライン上の○印で囲まれたオニオンスキンマーカーを動かすことで調節できる。
※オニオンスキンとは玉ねぎの皮のように薄く透けてみえることから来ている

オニオンスキンアウトライン

アルファをつけたオブジェクトなどの動きをチェックするときに利用するオニオンスキン

複数フレームを編集

複数にまたがるオブジェクトを一括して表示し、移動や整列（中央揃え等）や回転を使って編集することができる

講義32日目

講義内容

JavaScript

  • onMouseOverとonMouseOutを用いて画像置換の復習
  • サムネイル(thumbnail)で画像置換
  • jQueryを用いてクロスフェード
jQuery（ジェイクエリー）

JavaScriptライブラリの一つで、Web制作に活用できる代表的なもの。
１．ライブラリー本体をホームページ(http://jquery.com/)→上部のDownloadタグ→現在のリリース(Current Release)のMinifiedを任意の場所にダウンロード
２．html内のhead欄に以下を記述（ver1.7.2を同階層のjsフォルダ内に置いたとして）

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

※複数読み込ませる場合は列挙する（jquery.cross-slide.min.jsなど）
３．jsファイルを読み込ませたあとにjQueryのコードを以下の方式で記述する

<script>
$(function(){
  jQueryの処理
});
</script>

４．JQueryの処理は以下の形式で記述

※セレクター名は、CSSで定義されたセレクター（*,h1〜h6,p,img,#(id名),.(class名)など）やjQuery特有のセレクターが使われる。

講義31日目

講義内容

Flash (Action Script2.0)

ムービークリップの制御メソッド
  • startDrag();

ムービークリップのインスタンス内をドラッグして移動を始める。引数1と引数2があり、引数1ではTrueもしくはFalse、引数2ではドラッグできる範囲をステージの基準点（左上）からみた座標で指定できる。
startDrag(false,左端のx座標,上端のy座標,右端のx座標,下端のy座標);
※trueの場合はインスタンスの基準点をロックした状態で移動し、falseを指定するとドラッグした場所を基準に移動する。

  • stopDrag();

ムービークリップのインスタンスのドラッグ移動をやめる。

JavaScript

イベントハンドラ
  • onMouseOver

マウスが触れた（上に乗った状態。擬似クラスの:hoverとほぼ同義）ときにイベントを実行する。

  • onMouseOut

マウスが離れたときにイベントを実行する

上記の２つを使って、JavaScriptで画像にマウスを乗せたときにhover用画像に変えるときは以下のように書く

<img src="画像名" width="幅" height="高さ" alt="名前" 
onMouseOver="this.src='ホバー画像名'" 
onMouseOut="this.src='画像名'">

講義30日目

講義内容

Flash (Action Script 2.0)

for文

指定した分だけ繰り返す処理を行う。初期値を変化させ条件に合う（True）まで処理を実行し、条件に合わなくなる（false）まで継続させる。

for (値を初期化する式;継続する条件式;変化を定義する式){実行する処理;}

描画メソッド
  • lineStyle(線の幅,色の指定,不透明度);

描画する線のスタイルを指定する。線の幅はpx（pxの記述は省略可）、色の指定は#の代わりに”０ｘ”を記述する。また不透明度（アルファ）はなくても構わない。
例）幅5pxのアルファ50の黒の線
lineStyle(5,0x000000,50);

  • moveTo(x座標,y座標);

描き始める座標点を指定

  • lineTo(x座標,y座標);

直線を描画する先の座標を指定。moveToと組み合わせて直線を描画する

講義29日目

講義内容

Illustrator CS5.1

  • 拡大・縮小ツールを使った複製

バウンディングボックスに使った拡大・縮小のほかに、拡大・縮小ツールを使ってもできる。この場合、クリックして基準点を決めることが出来る。

  • アンカーポイント切り替えツール

ハンドルのあるアンカーポイントをクリックするとハンドルが無くなり尖った角ができる。逆にハンドルのないアンカーポイントをクリックするとハンドルができて曲線にできる。

  • パス上文字ツール

パスに添って文字を書くツール。ただし元にあったパスは無くなる。
円の上をクリックしたら、クリックした場所から円に添って文字を打ち込める。これと文字の中央揃えをつかって、円の真下をクリックして始点にすれば、上部中央揃えできる。また選択してできる文字上部の線を下に持っていくと円の内側に移せる。