FENOROA BLOG

GridOmatic

Tue, 13 Jan 2009 18:26:07 +0900

グリッドデザイン関連でおもしろい記事を発見したのでご紹介。

これまでサイトデザインを行うときは、Ilustrator等で自作した方眼用紙を使って
ラフを制作してたりしましたが、何やら自分オリジナルの方眼用紙を誰でも簡単に
作ることが出来るフリーソフトがあるようなのでご紹介します。

自身でも使ってみましたが、なかなか使いやすく便利だったのでオススメです。

詳しくは下記詳細をご覧ください。

参照記事：DesignWorks
http://designwork-s.com/article/112390059.html

GridOmatic -ダウンロードページ
http://www.nutsnbits.com/nutsnbits_000060.htm

ウェブデザイン見本帳

Tue, 16 Dec 2008 01:37:19 +0900

レイアウト強化月間かと思うほど、ここ最近レイアウトにのめり込んでいますが、今日はそのついでに実例で学ぶwebのためのレイアウト基礎本のご紹介。

実例をあげて紹介していることから、見ているだけでも勉強になるのですが、何のためのレイアウトなのか、どうすれば上手くレイアウト出来るのかというようなことをレイアウトの基本を交えながらわかりやすく紹介されてます。

Webレイアウトの基礎やセオリーに触れたいと考えている方は是非。

RaNa extractive, inc.

Fri, 12 Dec 2008 22:17:17 +0900

RaNa extractive, inc.
http://www.ranaextractive.com

前回のMichael Paul Young と同じ形式のレイアウト、こちらはFlashサイト。

同じようなレイアウトでも作り方一つで見え方が変わって来ますね。

Michael Paul Young

Thu, 11 Dec 2008 22:42:38 +0900

#TOP

#CONTENT

Michael Paul Young
http://www.michaelpaulyoung.com

最近は、ポートフォリオサイトというとFlashで作られたインタラクティブなものをよく見かけます。

もちろん、それはそれですばらしいのですが、こういうシンプルなポートフォリオサイトもこれはこれでまたいいものですね。

勉強になります。

sonicjam Inc.

Thu, 11 Dec 2008 00:33:15 +0900

# TOP

# WORKS

#COMPANY

グリッドレイアウト勉強になります。

イラストが書けない（書かない？）私にとって写真・フォント・レイアウト、この使い方は重要です。

またFlashサイトにも関わらず、Flashサイト特有のアニメーションを強調した感じがせず、あたかもＨＴＭＬ+ＣＳＳのサイトかようなレイアウトで、ほんのり入れたFlashアニメーションがどこか心くすぐる感じがして個人的には好感を持てるサイトでした。

あとあのスペシャルコンテンツの３Ｄはおもしろいですね。必見です。

sonicjam Inc.
http://www.sonicjam.co.jp

UNICLOCK & UNIQLO TRY

Wed, 10 Dec 2008 23:48:22 +0900

UNICLOCK
http://www.uniqlo.jp/uniqlock

UNIQLO TRY
http://www.uniqlo.com/try2

今更ながらいいですね、興味深い作品です。
今後は、UNIQLOのプロモーションに対して、Ｈ＆Ｍがどう出るのかその反応にも注目していきたいところです。

Tweenの練習

Sun, 15 Jun 2008 04:28:00 +0900

http://www.yoshifumiohama.com/flash

Tweenの勉強ついでに自分のポートフォリオサイトのFlash版を簡単に作ってみました。

Tweenのおおよその使い方は、なんとなく理解できたかなと思います。

あと、Tweenを調べているなかでFusekitなるものもあり、なかなか便利とのことなのでいづれ使ってみたいと思います。

Tweenクラス（ActionScript2.0）

Wed, 04 Jun 2008 22:19:26 +0900

// クラス宣言
import mx.transitions.Tween;
import mx.transitions.easing.*;

// 各値
var startPos:Number = logo_mc._x;
var targetPos:Number = 350;
var easingType:Function = Strong.easeIn;
var duration:Number = 1.5;

logo_mc.onRelease = function():Void {

    // Tweenインスタンスの生成
    var logoTween:Tween = new Tween(logo_mc, "_x", easingType, startPos, targetPos, duration, true);
    logoTween.onMotionFinished = function():Void {
        logo_mc.stop;

        logo_mc.onPress = function(): Void {
            logo_mc._x = 7;
        };

    };
};

◎基本形式

var 変数 : Tween = new Tween(
　　　アニメーションさせたいインスタンス名,
　　　変化させたいプロパティ名,
　　アニメーションの種類,
　 // (Back,Bounce,Elastic,Regular,Strong,None) , (easeIn,easeOut,easeInOut,easeNone)
　　　開始値,
　　　終了値,
　　　継続時間,
);

Loadクラス（ActionScript3.0）

Fri, 30 May 2008 16:09:39 +0900

外部のイメージファイルをロードするときに使用するクラス。

JPEG、GIF、PNG、SWFファイルを読み込むことができる。

手順

１．Loaderコンストラクタを引数なしで実行してLoaderクラスのインスタンスを生成する。

２．ロードするイメージのURLを表すURLRequestクラスのインスタンスを生成する。

３．URLRequestオブジェクトを引数にLoaderオブジェクトのload()メソッドを実行する。

４．Loaderオブジェクトを引数に表示オブジェクトコンテナのaddChild()メソッドを実行する。

//Loaderオブジェクトの生成
var img01:Loader = new Loader();
//URLの設定
var theUrl:URLRequest = new URLRequest("image/photo01.png");

//イメージをロード
img01.load(theUrl);
//座標の設定
img01.x = 100;
img01.y = 100;

//ステージに追加
addChild(img01);

ActionScript3.0 ドキュメントクラスの基本メモ

Thu, 29 May 2008 15:30:55 +0900

１．ドキュメントクラスのメリット

　　ⅰ．クラスの継承が利用できる

　　　　通常のクラスと同じく、作成したいドキュメントクラスを継承する別のドキュメントクラスを作成することができるので、クラスの再利用が可能。

　　ⅱ．複数のムービーで同じプログラムの使い回しが簡単

　　　　他のFlashドキュメントでも、同じドキュメントクラスを利用できるためプログラムの使い回しが簡単。

　　ⅲ．Flash以外のアプリケーション（開発環境）でも利用が可能

２．ドキュメントクラスにする条件

　　ⅰ．MovieClipクラスもしくはSpliteクラスを継承する

　　ⅱ．必要なクラスはすべてインポートする

　　ⅲ．ステージに配置したインスタンスは変数で定義しない

３．ドキュメントクラスの作成

　　カスタムクラス同様に、クラス名とASファイル名を同じにして、設定したASファイルのリストを表示し、これをFlashドキュメントと同じ階層に保存する。

　　設定は、プロパティを表示し、ステージ外をクリック、そうするとプロパティにドキュメントクラスを設定するボックスが表示され、そこにクラス名を入力する。

ActionScript3.0 カスタムクラスの基本メモ

Thu, 29 May 2008 13:14:56 +0900

オリジナルのクラスであるカスタムクラスは、ActionScript3.0の場合ASファイルという外部テキストファイルに記述する。（拡張子「.as」のテキストファイル）

◎カスタムクラスの基本的な書式

package パッケージ名{

　　　　　import インポートするクラス

　　　　　public クラス名{

　　　　　　　　　変数の宣言

　　　　　　　　　コンストラクタの定義

　　　　　　　　　メソッドの定義

　　　　　}

Point！

ⅰ．パッケージ名はクラスが属するパッケージを示す。

　　（パッケージ名を省略するとデフォルト見なされ、Flashドキュメントと同じディレクトリに保存される。）

ⅱ．クラス名とファイル名は同じにする。

　　クラス名が「thanks」の場合、ファイル名を「thanks.as」にする。

ⅲ．アクセス修飾子

　　フィールド変数とメソッドをあわせてクラスのメンバーと呼び、個々のメンバーには、どのクラスからアクセス可能かを、アクセス修飾子と呼ばれる属性で設定することができる。

internal ・・・同じパッケージ内のクラスから参照可能

private ・・・同じクラス内からのみアクセス可能

protected ・・・同じクラスおよび派生クラス（そのクラスを継承するクラス）からアクセス可能

public ・・・任意のクラスからアクセス可能

※通常のメソッドはアクセス修飾子性を指定していないと「internal」、コンストラクタは「public」と見なされる。

if文メモ

Wed, 28 May 2008 12:53:16 +0900

１．if 文

　　if ( 条件式 ) {

　　ステートメント１;

　　ステートメント２;

　　.....

　　}

　　条件が成り立つかどうかの判断の基準はさまざまで、ActionScriptの場合は、条件式の結果が「0」、「null」、「undefined」、および、空文字列「""」以外の場合には、条件が成り立つと判断する。

２．if ~else 文

　　if ( 条件式 ) {

　　　　　条件式が成り立った場合のステートメント１；

　　　　　条件式が成り立った場合のステートメント２；

　　　　　・・・・・

　　} eles {

　　　　　条件式が成り立たなくなった場合のステートメント１；

　　　　　条件式が成り立たなくなった場合のステートメント２；

　　　　　・・・・・

　　}

３．if ~else 文の組み合わせ

　　if ( 条件式１) {

　　　　　条件式１が成り立った場合の処理

　　} eles if ( 条件式２ ){

　　　　　条件式１が成り立たず、条件式２が成り立った場合の処理

　　} eles if ( 条件式３ ){

　　　　　条件式１,２が成り立たず、条件式３が成り立った場合の処理

　　}eles {

　　　　　すべての条件が成り立たなかった場合の処理

　　}

　　if~eles文を組み合わせることで、複数の条件をテストし処理を分岐させることができる。

４．条件演算子

　　「?:」を使ってif~eles文と同じような処理を行うことができる。

　　書式としては、以下のものになる。

　　条件式 ? 式A : 式B

　　→　条件式が成り立てば式Aが実行され、そうでなければ式Bが実行される。

　　var score:uint;
　　var result:String;

　　score = X ;

　　　　　　　 ↑ このXに入る値によって合否の判定を行う

　　result = (score >= 80) ? "合格" : "不合格";
　　trace(result);

５．switch文

　　switch文は、if 文のような「～より小さい場合」、「～より大きい場合」といったものではなく、条件式の値に応じた細かい分岐を行うことができるもの。

　　var month:uint;

　　//月の値を代入
　　month = 1;

　　switch(month) {
　　 case 12:
　　 case 1:
　　 case 2:
　　　　　　　 trace("冬");
　　　　　　 break;
　　case 3:
　　case 4:
　　case 5:
　　　　　　trace("春");
　　　　　　   break;
　　 case 6:
　　 case 7:
　　 case 8:
　　  　　　　　trace("夏");
　　  　　　　　break;
　　case 9:
　　case 10:
　　 case 11:
　　  　　　　　trace("秋");
　　  　　　　　break;
　　 default:
　　  trace("12以下の数値を指定してください");
　　}

オブジェクト指向の基本的な考え方とクラス

Tue, 27 May 2008 16:48:04 +0900

１．オブジェクト指向言語の基本的な考え方

　　オブジェクト指向言語では、オブジェクトに対してデータと操作をモデル化していきます。

　　　　　　　　　　　　　　　　　　　　　　　　　プロパティ↑　　　 ↑メソッド

　　例えば車をモデル化したオブジェクトの場合

[ 車 ]

　　プロパティ　→　名前　色

　　メソッド　→　進む　曲がる

２．継承

　　継承はオブジェクト指向言語の概念の一つです。

　　既存のオブジェクトのプロパティとメソッドを引き継いで、新たに別のプロパティやメソッドを追加したオブジェクトを作ることができます。

　　例えば先ほどモデル化した車のプロパティとメソッドを継承して、新たに機能を追加したスーパーカーを作ることができます。

　　[ スーパーカー ]

　　プロパティ　→　名前　色　金額

　　メソッド　→　進む　曲がる　高速走行

３．クラス

　　クラスはオブジェクトの設計図のようなもので、オブジェクトの実態はクラスを基に作られます。

　　そして、クラスによって作られたオブジェクトのことをインスタンスと呼び、そのインスタンスはそれぞれ個別のプロパティを持つことができます。

　　例えば。。。

　　車クラスから車A、車Bを作るとしたら、それぞれのプロパティは以下のようになります。

　　インスタンス：車A　　　　　　　　　　　　インスタンス：車B

　　[ プロパティ ]　　　　　　　　　　　　　　　[ プロパティ ]

　　名前：A　　　　　　　　　　　　　　　　　　　名前：B

　　色：赤　　　　　　　　　　　　　　　　　　　　色：青

　　ActionScriptによるプログラムでは、ムービークリップならMovieClipクラス、ボタンならSimpleButtonクラス、テキストフィールドならTextFieldクラスという感じで、すべての要素をオブジェクトとして扱います。

ローディング画面作成（ActionScript3.0）

Tue, 27 May 2008 11:34:18 +0900

１．イベントリスナーの登録

　　ローディングで使用するイベントは「Event.ENTER_FRAME」です。

　　これにリスナー関数のloadCheakを加えて以下のようにする。

　　→　this.addEventListener(Event.ENTER_FRAME,loadCheak);

　　　　 //次にloadが完了するまで１フレーム目で止めておくためのstop();を記述する。

　　　　 stop();　

　　一先ずこれでイベントリスナー登録の部分は完了。

２．ロードされたデータのパーセンテージを求める

　　function loadCheck(event:Event):void {
　 var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);

　　}

　　int は整数の変数定義するために使用。（percentは変数名）

　　loaderInfoはMovieClipのプロパティで、ファイルのロード状況を管理するもの。

　　bytesLoaded はロードしたバイト数で、bytesTotal はムービーの総バイト数。

　　最後にこれらを囲んでいる Math.ceil()は小数点以下を切り上げるメソッド。

３．求めたパーセントの値をテキストフィールドに表示する

　　テキストフィールドに値を代入する基本の型は「インスタンス名.text = 値 ;」です。

　　この型に値を入れ込むと以下のものになる。

　　→　percentArea.text = percent + "%";

４．１００％ロードされたときの処理を行う

　　必要なのは、この２つ。

　　ⅰ．イベントリスナーの終了

　　ⅱ．次のアクション（10フレーム目に移動etc）

　　これを言葉にして言い換えると以下のものになる。

　　→「もしローディングが１００％になったら、イベントリスナーを終了させて、１０フレーム目に行く」

　　あとは、この文章通りにスクリプトを記述すればいいだけ。

　　　　もし１００％ロードしたら

　　→　if(parcent >= 100){

　　　　イベントリスナーの終了

　　　　１０フレーム目に移動

　　　　}

　　イベントリスナーの終了

　　→　this.removeEventListener(Event.ENTER_FRAME,loadCheak);

　　１０フレーム目に移動

　　→　gotoAndPlay(10);

if (percent >= 100) {
this.removeEventListener(Event.ENTER_FRAME, loadCheck);
　gotoAndPlay(10);
　 }

５．スクリプトを組み合わせる

　　３と４で作ったスクリプトを２のvar pacent:int = ~~~; のあとに挿入する。

addEventListener(Event.ENTER_FRAME, loadCheck);
stop();

function loadCheck(event:Event):void {
var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);

percentArea.text = percent + "%";

if (percent >= 100) {
removeEventListener(Event.ENTER_FRAME, loadCheck);
gotoAndPlay(10);
}

}

ボタンをクリックしてリンク先にジャンプ（ActionScript3.0）

Mon, 26 May 2008 22:52:33 +0900

指定したURLにジャンプするには二つの処理が必要となる。

１．URLRequestのインスタンスを生成する。

　　◎ var 変数名 : 変数の型 = 値;

↑　この形に基づいて実際にリンク先にジャンプするステートメントを作成すると以下のようになる。

　　var theURL : URLRequest = new URLRequest("http://yrg.yoshifumiohama.com/");　

２．navigateToURL()関数の実行。

　　navigateToURL()

　　→URLリクエストの結果を現在のブラウザウィンドウ/新規ウィンドウに表示させることができる。

　　引数には、１．で作った変数theURLを渡す。

　　つまり、　ステートメントとしてはこのようになる。

　　→ navigateToURL(theURL);

ここまで来たらあとは、以下のようにボタンを押したら１．２．を実行するというスクリプトを記述すればいい。

　　jump_btn.addEventListener(MouseEvent.Click,gotoURL);

　　function gotoURL(event:MouseEvent):void{

　　　　　var theURL:URLRequest = new URLRequest("http://yrg.yoshifumiohama.com/")

　　　　　navigateToURL(theURL);

　　}

※複数のボタンがある場合は、一つ目と異なるリスナー関数を与えて、ジャンプ先のURLを変更してあげればOK。