12/21 Flashでリップル・アルゴリズムとEclipseの導入 - Webデザインの方法

Webデザインの方法 26日目内容

Flashでリップル効果
Flashでアルゴリズムの構築
Eclipse導入
AptanaStudio3

Flashでリップル効果

大きく拡散されたものが収束するものは目に止まりやすい

ステージに文字を入力
選択したまま修正→分解
その状態のまま→修正→レイヤーに分配
一文字づつ選択し、分解(Ctrl+B)→シンボルに変換(F8)
文字が消えながら大きくなり、戻りながら小さくなるモーションをつける
空ボタンを作成して完了

完成品はこちらから

Flashでアルゴリズムの構築

インスタンス名:ステージ上の名前

Actionscriptで制御するために必ず必要

thisはステージ丸ごと動かしてる感じでインスタンス名を指定するのは神様視点
ボタンインスタンスに直接記述する場合

onClipEvent (enterFrame) {
	this._x += 10;
	this._y += 5;
}

フレームにインスタンス名を指定して記述する場合

ball_mc.onEnterFrame = function() {
	ball_mc._x += 10;
	ball_mc._y += 5;
}

ボタンインスタンスに直接記述する場合

onClipEvent (load) {
	//初めは静止しているので速度は０に設定します
	speed = 0;
	//加速度を１に設定します
	accel = 1;
}
onClipEvent (enterFrame) {
	//速度に加速度を足します
	speed += accel;
	//Ｘ座標に速度を足します
	this._x += speed;
	//speedが徐々に上がるのを確認します
	trace(speed);
}

フレームにインスタンス名を指定して記述する場合

//読み込まれたときのspeedとaccelの変数宣言グローバル変数
this.onLoad = function() {
	var speed:Number;
	var accel:Number;
}
//速度の代入ロカール変数
this.onLoad = function() {
	speed = 0;
	accel = 5;
}
//ボールへ加速度の代入
ball_mc.onEnterFrame = function() {
	speed += accel;
	ball_mc._x += speed; 
	trace(speed);//speedを出力する
}

準備
Eclipse本体と様々なプラグインを日本語化してくれるパッケージ「Pleiades」を開発公開している「MargeDocProject」のページに行きEclipse4.2 JunoのPHP版パッケージ32bitFullEdithionをダウンロードしてくる
ファイル名：pleiades-e4.2-php-32bit-jre_20121123.zip

落としたzipファイルを展開し、xamppが導入済みの場合は必要ないので消去する
展開したpleiadesのファイルをcドライブ直下に移動
この後、導入済みのxamppと紐付けするので念のためxamppを起動しApacheとMySQLをSTARTさせておく

この状態でEclipseの導入に入る
導入
ここまで問題なければcドライブに移動したpleiadesファイルの中のeclipse→eclipse.exeを起動
しばらくするとワークスペースランチャーのダイアログが出てくるのでxammpの中のhtdocsを指定しOKを押す

PHPファイルを管理するためのフォルダを作成する
ファイル→新規→PHPプロジェクト
出てきたダイアログのプロジェクト名にPHPを入力しOK

OKを押すとEGitはGitがインストールされている場所が検出できませんでした。と、
ホームディレクトリの確認のダイアログが出るが互換性の問題なので今後表示しないにチェックしOK

PHPの環境設定
PHPファイルを編集してみる
先程作ったフォルダを右クリック→新規→PHPファイル
ソースフォルダはそのファイルを収める場所
これまでの設定どおりの場合「c:\xammp\htdocs\PHP\newfile.php」となる

内容を下記のように記述してツールバーの緑色の丸に白三角の実行を押す(Ctrl+F11)と内部Webブラウザでの表示が確認出来る

この状態だと日本語が文字化けしてしまうので一旦Eclipseとxammpを終了し、php.iniファイルを編集する
cドライブ→xampp→php→php.iniを探す（先程作成したxampp→htdocsの中の大文字PHPファイルとは別）

最初にコピーしてバックアップを取る

メモ帳でphp.iniファイルを開き、Ctrl+Fで検索ダイアログを出す
「defualt_charset」と検索し
下記画像の一文を見つけたら「；」のコメントアウトをはずす、UTF-8になってなかったらUTF-8にする

次に「[mbstring]」を検索し
下記画像の一文を見つけ同様に「；」をはずしJapanese,UTF-8にする
ファイルを上書き保存して
xammpとeclipseを立ち上げて先程のファイルを開き実行して表示を確認する

日本語が文字化けしなくなったら成功です

失敗したらphp.iniを捨てバックアップを複製しphp.iniに元に戻してもう一度試します

AptanaStudio3

HTML+CSS+Javascriptの支援機能を利用するためにAptanaStudio3をEclipseに入れる
ヘルプ→新規ソフトウェアのインストール
作業対象のバー右側の追加を押しリポジトリーの追加ダイアログを出す
名前：「AptanaStudio3」等の管理用の名前
ロケーション：「http://download.aptana.com/studio3/plugin/install」を入力しOK

名前に出てきたAptana Studio 3をチェックし次へ

インストール詳細はそのまま次へ

使用条件の条項に同意しますにチェックして完了

最初の画面に戻るがこっそりインストール中と画面下に表示されている

終わると再起動するように促されるので再起動する

再起動するとまたGitファイルがと出るので次から表示しないにチェックをしてOK

初期画面に開始ページが表示されaptanaのサイトが表示されていればインストール完了