WEB制作 | memo-memo - Part 2 Skip to content

memo-memo

web制作に便利そうな情報をメモるブログ

Archive

Category: WEB制作

今日は、CurveModifiersを使ってみた。
インスタンスを動かす時に、直線ではなく、
中間のポイントを指定してやる事で、曲線的に動かすことが出来る。

import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;

CurveModifiers.init();

start_mc.buttonMode = true;

start_mc.addEventListener(MouseEvent.CLICK, tween);

function tween(event:MouseEvent){
	start_mc.removeEventListener(MouseEvent.CLICK, tween);
	Tweener.addTween(memo_mc,
                        {_bezier:[{x:125,y:200},{x:275,y:0}],
                          x:350,y:100,time:3,transition:"linear"});
}

こんな感じ。
赤文字の部分が、CurveModifiersの部分。
ポイントは、いくらでも増やせるみたい。

This movie requires Flash Player 9

どんどん記事もコードも大雑把になっていく…
とりあえずメモって事で。
ぼちぼち、tweenerの機能をまとめた様な記事が書きたいな。
時間がない!!!

若干手抜きだけど、サンプルを作ってみました。
どうやら、tweenerには、特殊なプロパティなるものが存在して、
それらを使うには、各々クラスを読み込まなきゃならないらしい。
FilterShortcutsを使う為には、

import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

が、ColorShortcutsを使う為には、

import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

が、各々必要。
必要なクラスを読み込んで、初期化しているっぽい。
で、その二つを使ったサンプルを作りました。
時間無くて、若干手抜き…

//Tweener読み込み
import caurina.transitions.Tweener
import caurina.transitions.properties.FilterShortcuts;
import caurina.transitions.properties.ColorShortcuts;

//初期化
Tweener.init(stage);
FilterShortcuts.init();
ColorShortcuts.init();

//グローバル変数
var timer;
var cont;
var ball;
var check = 1;

//ボタンモード
switch_mc.buttonMode = true;

//インスタンス化
cont = new Container();
timer = new Timer(100);

//タイマーイベント
timer.addEventListener(TimerEvent.TIMER, tween);
//stageをクリックしたら、on/off
switch_mc.addEventListener(MouseEvent.CLICK, repeat);

function tween(event){
	//場所をランダムにして、コンテナーの上にaddChild
	ball = new Ball();
	ball.x = Math.floor(Math.random()*300);
	ball.y = Math.floor(Math.random()*300);
	trace(ball.x);
	trace(ball.y);
	cont.addChild(ball);
	//tweenerで、addChildしたものをアニメーション
	Tweener.addTween(ball,{time:0.5,
        _color:0x3E64FD,
        _Blur_blurX:10,
        _Blur_blurY:10,_Blur_quality:100, transition:"easeOutQuart"});
}

//stageをクリックしたら、アニメーションのon/off
function repeat(event){
	if(check == 0){
		switch_mc.gotoAndStop(1);
		timer.stop();
		check = 1;
	}else if(check == 1){
		switch_mc.gotoAndStop(2);
		timer.start();
		stage.addChild(cont);
		check = 0;
	}
}

リンケージの設定は、丸いボールが、Ball
空っぽのmcが、Container
赤文字の部分が、FilterShortcuts。青文字の部分が、ColorShortcuts。

This movie requires Flash Player 9

このブログも、若干手抜きになってる…
次は、もうちょい解りやすく書かなきゃ。

久々の更新です。

Flashのライブラリである、tweenerを使ってみました。

http://www.tonpoo.com/tweener/index2.html

こちらのサイトに色々書いてあります。

使用するには、ダウンロードが必要ですが、

URLが、上記の説明ページと同じで、若干解りづらいですね。

さて、ダウンロードしてきたら、普通にインポートすれば

使えます。

import caurina.transitions.Tweener

こんな感じ。

参考にしたサイトは、

基本的な使い方が書いてある

http://www.scratchbrain.net/blog/ver2/entries/000311.html

トランジションのリストが書かれてる

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

こんな感じです。

で、折角ダウンロードしてきたので、簡単なサンプルを。

最近、auのandoroidのCMやってますよね。

あれのテキストがユラユラするやつが、ちょっとかっこ良いなぁと思ったので、

まねてみます。

//tweenerをインポート
import caurina.transitions.Tweener

//グローバル変数の定義
var nTxtX = txt_mc.x;//txt_mcの最初のx位置
var nTxtY = txt_mc.y;//txt_mcの最初のy位置
var nMoveX:int;//ランダムの数字を格納する変数(xに足す用)
var nMoveY:int;//ランダムの数字を格納する変数(yに足す用)
var nCheck:int = 1;//スタート、ストップを制御する為の変数

//初期設定
switch_mc.buttonMode = true;//ボタンモードオン
switch_mc.gotoAndStop(2);//switch_mcを2フレームめで止める(stopが表示される)
tween();//tween関数を実行

//関数の定義
//ランダムに文字を動かす関数tweenの定義
function tween(){
	//1〜8までのランダムの値を、変数nMoveX、変数nMoveYに格納
	nMoveX = Math.floor(Math.random()*8 + 1);
	nMoveY = Math.floor(Math.random()*8 + 1);
	//ランダムで、変数nMoveX、変数nMoveYをマイナスにする
	if(Math.round(Math.random())){
		nMoveX = -nMoveX
	}
	if(Math.round(Math.random())){
		nMoveY = -nMoveY
	}
	//tweenerアニメーション。
	//xは、変数nTxtXに、ランダムな数字が格納された変数nMoveXを、
	//yは、変数nTxtYに、ランダムな数字が格納された変数nMoveYを、指定。
	//0.3秒で、指定した位置に移動する。
	//処理が終わったら、関数repeatTweenを実行。
	Tweener.addTween(txt_mc, {x:nTxtX + nMoveX,
                                  y:nTxtY + nMoveY,
                                  time:0.3,
                                  onComplete:repeatTween,
                                  transition:"linear"});
}

//関数tweenを繰り返し実行させるrepeatTween関数
function repeatTween(){
	//変数nCheckが1だったら、関数tweenを実行
	if(nCheck == 1){
		tween();
	}
}

//スタート、ストップを制御する関数btnPush
function btnPush(e){
	//関数nCheckが0だったら、switch_mcを2フレーム目で止めて、
	//変数nCheckに1を代入。
	if(nCheck == 0){
		switch_mc.gotoAndStop(2);
		nCheck = 1;
	//関数nCheckが1だったら、switch_mcを1フレーム目で止めて、
	//変数nCheckに0を代入。
	}else if(nCheck == 1){
		switch_mc.gotoAndStop(1);
		nCheck = 0;
	}
	//関数repeatTweenを実行。
	repeatTween()
}

//イベントリスナーの定義
switch_mc.addEventListener(MouseEvent.CLICK, btnPush);

上記の様なコードになりました。
上記の赤文字の所が、tweenerを使った所です。この記事の主役のくせに、あんまりコードの量が多くない…

This movie requires Flash Player 9

見比べてみると、若干違う気が…
まぁ気にしない気にしない。

まずは、MySQLにログインして、使用するDBを選択する

今回は、「title_id」、「title」、「pages」という3つ列からなる、booksという名前のテーブルを作ってみる。

コマンドプロンプトで、下記の様に入力。

データの型は、「title_id」がINT、「title」がVARCHAR、「pages」がINT。

「title_id」は、空の状態を許可しないNOT NULLと、勝手にキーが生成される様に、AUTO_INCREMENTが付いている。

「title」は、150文字まで格納可能な、(150)が付いている。

PRIMARY KEYは、title_idを指定している。

その他のオプションや、データ型については、追々。

テーブルの列について確認するには、、DESCRIBEを使用する。

DESCRIBE テーブル名;

使用してみたのが、下記の画像。

で、次はデータの追加の仕方。

データを追加するには、INSERTコマンドをしようする。

title_idが1、titleがRomeo and Juliet、pagesが500のデータを追加してみると、下記の様になる。

INSERT INTO books VALUES(1,"Romeo ant Juliet",500);

コマンドプロンプトで入力したのが、下記の画像。

列名を指定して追加する方法は、追々。

コマンドプロンプトで、全ての権限を持っているユーザを作成する方法。

まず、MySQLにログインする

GRANT構文を使用する。

GRANT ALL PRIVILEGES ON データベース.オブジェクト TO ‘ユーザ名’@'ホスト名’ IDENTIFIED BY ‘パスワード’;

実際に、ユーザー名「hoge」、パスワード「memo」を作成してみる。

権限については、こちらに書いてありました。

追々色々試してみよう。