2011-11-16

lightboxのカスタマイズ｜jQuery

jQuery

lightboxのdownload

lightboxのカスタマイズ

全体をcontainer等で囲み、margin: 0 auto;を指定して中央揃えをしている場合、表示される大きい画像の位置が右にズレてしまいます。

それのカスタマイズ修正です。

jsフォルダ内の「jquery.lightbox-0.5.js」の142,143行目。
こちらはサムネイルをクリックされたときに表示される画像の...
表示位置指定です。
▼このようになっているところを・・・

142      top:  arrPageScroll[1] + (arrPageSizes[3] / 10),
143      left:  arrPageScroll[0]

▼こう書き換える。

142      top:  arrPageScroll[1] + (arrPageSizes[1] / 20),
143      left:  arrPageScroll[0] - (arrPageSizes[0] / 25)

ソースの意味は・・・

考えるんじゃない！感じるんだ！ｗ

説明は長くなるので省きます。
※ちなみに、上記ソースのちょっと上を見ると大体のことがわかります。

google api

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

2011-11-15

FLASH｜当たり判定を追加したスロット

Flash ActionScript

/*** 初期設定 ***/
num1_mc.stop();  // 数値ムービークリップの回転ストップ
num2_mc.stop();
num3_mc.stop();
result_mc.stop();  // 結果表示ムービークリップをストップ

/* 変数宣言 */
var num1: Number = -1;  // 止まった数値代入用変数＆初期値設定
var num2: Number = -1;
var num3: Number = -1;
var playFlg: Boolean = false;  // slotのスタートフラグ(オフ)

/*** メインスクリプト ***/
start_btn.onPress = function(){
    num1_mc.play();  // 数値ムービークリップの回転スタート
    num2_mc.play();
    num3_mc.play();
    playFlg = true;  // slotのスタートフラグ(オン)
    num1 = -1;  // 数値代入用変数の初期値設定
    num2 = -1;
    num3 = -1;
}

btn1_btn.onPress = function(){  // ボタン１が押された時
    num1_mc.stop();  // 数値の回転ストップ
    
    // 数値mcのフレーム数(１〜１０)から１を引いた数を代入。
    // つまり、-1の場合はボタンが押されていない状態であり、
    // それ以外の数値(０〜９)の場合は押されている状態とする。
    num1 = num1_mc._currentframe - 1;
    
    // slotスタートフラグが(オン)の状態で、
    // このボタン以外の２つのボタンも押されている状態だった場合。
    if( (playFlg == true) && (num2 != -1) && (num3 != -1) ){
        resultOutput();  // 結果表示関数へ...
    }
}
btn2_btn.onPress = function(){  // 上とほぼ同じ説明
    num2_mc.stop();
    num2 = num2_mc._currentframe - 1;
    if( (playFlg == true) && (num1 != -1) && (num3 != -1) ){
        resultOutput();
    }
}
btn3_btn.onPress = function(){  // 上とほぼ同じ説明
    num3_mc.stop();
    num3 = num3_mc._currentframe - 1;
    if( (playFlg == true) && (num1 != -1) && (num2 != -1) ){
        resultOutput();
    }
}


/*** 結果表示関数 ***/
function resultOutput(){  // 関数始まるよー！の合図。

    // 数値１と２、数値２と３が一致している場合、
    // 数値１と３も同じである。
    // つまり、３つの数値が全部同じである場合。
    if( (num1 == num2) && (num2 == num3) ){
        // あたりムービーへ飛ぶ。
        result_mc.gotoAndPlay(2);
    }else{
        // はずれムービーへ飛ぶ。
        result_mc.gotoAndPlay(18);
    }
    
    // リセット
    playFlg = false;  // slotスタートフラグを(オフ)にする。
    num1 = -1;  // 数値代入用変数の初期値設定
    num2 = -1;
    num3 = -1;
}

説明下手ですみません。上の解説でわかりますでしょうか・・・。
自分はActionレイヤーにスクリプトを一括して書くやりかたの方が書きやすいのですが、結果表示のムービー(戻るボタンなど)は面倒くさかったので、今回はそちらに直接スクリプトを書きました。

▼無駄にフォントを埋め込んでるのでちょっと重いですが、flashデータはこちらにあります。バージョンはｃｓ５に落としてあります。
参考までにどうぞ〜

~~slot_.zip~~

※公開してましたが、やめました。
　.flaデータ欲しい方はメッセージくださいね。
　

2011-11-11

Dreamweaver拡張機能

Dreamweaver

今日のダウンロードしたエクステンションを自宅のPCに入れたい人の為に、リンク先を載せておきます。

HTML5タグライブラリ

※画像がダウンロードサイトへリンクしてます。

CSS3コードヒント

※画像がダウンロードサイトへリンクしてます。

iPhone site extension for Dreamweaver CS4/5

※画像がダウンロードサイトへリンクしてます。

Zen-Coding

※画像がダウンロードサイトへリンクしてます。

2011-11-02

ActionScript2.0｜授業課題

9/20ｸﾗｽ授業 ActionScript

本日の課題。

ちょっとむずかしく書くと以下のようになります。
自作関数「function 〜()」で同じ計算,同じ動作を一つにまとめています。
こんなものもあるんだな程度で見てみてください。

今回のように単純な計算の場合はここまでしつこく書く必要はありませんが、プログラムが長く大きくなった場合このような書き方が基本になります。
「同じ計算,同じ動作は一つにまとめて使い回せ」ということ。

課題【A02】

var car_a:Number = 100;
var car_b:Number = 140;
var dist:Number = 560;
var output;

// 時間差の計算関数（計算関数（車Aの時速、距離）−　計算関数（車Bの時速、距離））
output = ( calc(dist, car_b) - calc(dist, car_a));

// 結果が負数になった場合、正数に戻す
// 上の計算でMath.absを使っても同じ結果。
if(output < 0){
	output = output * -1;
}

// 出力
trace(output);

// 計算関数（距離、車の時速）
function calc(input_dist, input_car){
	return(input_dist / input_car);
}

課題【A03】

var beer:Number = 500;
var uron:Number = 300;
var salada:Number = 600;
var chicken:Number = 800;
var pizza:Number = 800;
var persons:Number = 5;

// 出力（割り勘計算関数（単品小計関数結果＋単品小計関数結果＋・・・、人数））
trace(dutchCalc((calc(beer, 12) + calc(uron,4) + calc(salada, 2) + calc(chicken, 2) + calc(pizza, 2)), persons));

// 単品小計関数（単品値段、個数）
function calc(input_product, input_num){
	return(input_product * input_num);
}

// 割り勘計算関数（単品小計、人数）
function dutchCalc(input_sum, input_persons){
	return(input_sum / input_persons);
}

課題A03の、ビールやウーロン茶などを頼んだ個数が直書きになってますが、ユーザー側に入力させる形などにするとまた面白いですね。また、品目の値段を配列でひとまとめにするなど、もっと簡略化もできます。

おまけ「ひたすら加速するムービークリップ」(横Var.)

onClipEvent(load){
	speed = 0;
	accel = 1;
}

onClipEvent(enterFrame){
	speed += accel;
	this._x += speed;
	
	if(Stage.width < this._x){
		this._x = 0;
	}
}

※冒頭のFlashムービーはこのスクリプトを発展させて作ってみました(10分)

2011-10-25

検索について

検索して調べること

現在EclipseでPHPを進めてます。だいぶJavaにそっくりですね。Eclipseも懐かしい限りです。そのEclipseの設定や不具合の対処をしている間に、PHPと合わせてこちらの知識もだいぶ付いてきました。

まずはネットなどで自分で調べることは、PCで仕事をする者としての基本中の基本ですよね。

予習復習

さて、今日明日の授業はHTMLのformタグです。
今までのHTMLとは少し勝手が違い戸惑うかと思いますので、一応前もってどんなものか調べておいたほうがいいかと。属性とか。

「HTML form」などで検索すれば情報はたくさんでてきます。

”自分で考えず、ただ聞いて、それで形だけ合わせればいい”という考えでは、残りのあと約５ヶ月が苦痛になると思います。

がんばりましょう！

2011-10-23

Eclipse＆PHPEclipse＆Xdebug｜PHPの開発環境

PHP

Eclipse＆PHPEclipse＆Xdebugという、PHPの使用にあたっての環境構築の紹介をメモしておく。開発環境としてのエラー検出機能の強化など、かなり便利な構成になっている。
以下にダウンロードについての注意などもメモしておいたので、この開発環境を作る場合は参考にしてほしい。
なお、XAMPPは既にインストールされているものとして説明する。

インストール方法については、需要があれば後日書くことにする。

Eclipseなどの準備について

Eclipse(3.4 Ganymede Pleiades All in One)

http://mergedoc.sourceforge.jp/pleiades_distros3.4.html

※C/C++版をDownload。理由は、Eclipse用PHP開発環境のPDTは、上位VarsionのEclipseにも対応しているが、エラー検出などの機能が弱い為。
あとでPHP用に変更できます。

※JREあり／なしは、ローカル環境の「C:\Program Files\Java」にて確認。Java環境が無い場合は「あり」を選択。
※PDTのPHPEclipseが上記Varsionまでしか対応していない為。

※なお、Eclipseは、内部にファイルパスが非常に長くなるものが含まれている。なのでダウンロードしたzipファイルの解凍には「7-Zip、Lhaplus、Lhaca」は使用しない方がいい。理由は解凍先までのパスが260文字を超えていた場合に適切なエラーを返すことが出来ず、正常に解凍されたかの判断ができない為。解凍には「WinRAR」もしくはWindows7にデフォルトで搭載される「展開ウイザード」を使用。(仮にLhaplusなどの解凍ソフトを使う場合は、解凍後の展開先をCドライブ直下などにすればいい。)

PHPEclipse

https://sourceforge.net/projects/phpeclipse/files/a%29%20Eclipse%203.3.x/PHPEclipse-1.2.3/PHPEclipse-1.2.3.200910091456PRD-bin.zip/download

※本当はhttp://www.phpeclipse.com/から入るのですが、現在入ることができなかったので、上のリンクからダウンロードする。

※実際はEclipseコンソール内からダウンロード＆インストール設定が可能な為、データ保管以外にダウンロードする必要は無い。

Xdebug

【追記】
xdebugはxamppに既に入っています。
ただし、xamppのバージョンによって入っていない事があったり、あったとしても初期設定でxdebugはキャンセルされている場合があるので、後ほどこれを解除する必要があります。

↓いちおうXdebug単体ファイルのダウンロード先。これも保管用。

http://xdebug.org/download.php

20111023163557

※バージョンについて
XAMPP起動後、localhostのphpinfo()にて、
PHP*.*：一番上のPHP Versionに記載
VC：Compiler欄に記載
TS：Thread Safety欄に記載。enabledの場合はTS付きのを。

※下のみどり色の矢印の部分

20111023163734

…

2011-10-17

Photoshop｜本日の授業で質問の多かったところ

Photoshop 9/20ｸﾗｽ授業

Photoshopのシェイプツールについて

割りと勘違いしている方が多かったので補足いたします。

シェイプツールとは、別名「ベクトルシェイプツール」と言います。ベクトルと言うだけあって、Illustratorでいうベクター形式のように、パスで作成された(ような)図形です。

例えば、
シェイプツールで色のついた任意の図形を作成しますが…

ここで注意。

あくまでもこれは、

1. 【シェイプを作成したレイヤー】の全面を塗りつぶしたものを、
2. 「シェイプツールで作成した図形」でマスクした

…という意味ですので注意してください。(←解釈としてはですが。)

イメージとしてマスクを解りやすく言うと、
マスクとはただの“切り絵”です。

20111018024802

つまり、このレイヤーの図形を移動ツールで移動するということは、図形の絵が動いているのではなく、単にマスクが動いているものです。（見方を変えれば図形が動いたという解釈もできますが…）

その他の注意

マスクをしたレイヤーは「鉛筆ツールや選択ツールの塗りつぶし」など、図形や絵を描いたりすることはできませんが、ペンツールなどの「パスを指定するツール」は使用出来ます。

どうしてもそのレイヤーに描きたい場合は、

- 一度ラスタライズをして図形をビットマップ形式する。
- もしくは、シェイプ作成レイヤーを含む２つ以上のレイヤーの結合を行う。

という方法をとってください。

WebデザインノートBOOK

Webクリエイターに関する勉強を書き記したブログになります。

lightboxのカスタマイズ｜jQuery

lightboxのdownload

lightboxのカスタマイズ

google api

FLASH｜当たり判定を追加したスロット

Dreamweaver拡張機能

HTML5タグライブラリ

CSS3コードヒント

iPhone site extension for Dreamweaver CS4/5

Zen-Coding

ActionScript2.0｜授業課題

本日の課題。

課題【A02】

課題【A03】

おまけ「ひたすら加速するムービークリップ」(横Var.)

検索について

検索して調べること

予習復習

Eclipse＆PHPEclipse＆Xdebug｜PHPの開発環境

Eclipseなどの準備について

Eclipse(3.4 Ganymede Pleiades All in One)

PHPEclipse

Xdebug

Photoshop｜本日の授業で質問の多かったところ

Photoshopのシェイプツールについて

その他の注意