Browsing articles from "11月, 2009"
11月
30
2009

パノラマFLASH

QTVR

FlashパノラマVRの基本(明日の「QTVR Diary -OFFLINE- vol.6」の予習) – 京都・日本・世界の最新パノラマムービー情報:QTVR Diary

http://pencil-jp.net/weblog/archives/2008/10/basic-of-flashvr.html

Ryubin’s Flash Panorama

http://www.ryubin.com/panolab/panoflash/index.shtml

360度パノラマ画像をFlashビューアーで表示させる

http://d.hatena.ne.jp/kadokura/20071114/p1

360度パノラマ写真をループできるように出力する方法
http://oshiete1.goo.ne.jp/qa3378976.html
それでは Flash で行きますか?
本当は,
Flash内にムービークリップなどを作り込んで行って,
そのように動かせるような構造自体を作った上で,
ActionScript と言う言語でプログラムを組んで動かして行く物です。
しかし,
ご質問の感じでは,動かせるような構造を作ること自体が困難であるように思いますし,
構造を作るための説明をするだけでも気が遠くなりますから,
写真素材画像の作成以外は,ほぼ 100% ActionScript で動かす方法を書きます。
右も左もわからない状態の方の場合は,ActionScript のみでする方が簡単です。
まず,任意のフォルダに,
書かれていらっしゃる URL の横長いパノラマ写真を保存し,
すみませんが,パノラマ写真を Photoshop で 横幅 2880px 以下にリサイズしてください。
理由↓
?http://www.google.co.jp/search?hl=ja&q=2880px+Flash&lr=lang_ja?
そして,とりあえず,「panorama.jpg」 というファイル名にして保存しなおしてください。
この 「panorama.jpg」 を外部ファイルとして SWF からロード表示させるしくみにします。
横幅 2880px 以下にリサイズした 「panorama.jpg」 が用意できましたら,
Flash 8 を起動させて新規ドキュメントを作成し,
「panorama.jpg」 と同じフォルダに任意のファイル名で保存します。
そして,
ステージの上にある,タイムラインの レイヤー1 の フレーム1 の空白キーフレームを選択して,
ステージの下にあるアクションパネルを表示させます。
そして,アクションパネルに次の ===== 内のスクリプトコードを全てコピー&ペーストします。
===============================================
// パノラマ写真のパス及びファイル名を指定 ★
photo = "./panorama.jpg";
// パノラマ写真を動かすスピードの設定 ★
speed = 20;
//------
// カウント用変数 cnt の初期化
cnt = 0;
// フラグ用変数 flg1 と flg2 の初期化(ブール値の false)
flg1 = false;
flg2 = false;
//------
// 親ムービークリップを作成
_root.createEmptyMovieClip("oya_mc", 0);
// 親ムービークリップ内に子ムービークリップを2つ作成
_root.oya_mc.createEmptyMovieClip("ko1_mc", 0);
_root.oya_mc.createEmptyMovieClip("ko2_mc", 1);
//------
// MovieClipLoaderクラスのインスタンス mcl を作成
mcl = new MovieClipLoader();
// _root 自体をリスナーオブジェクトとして登録
mcl.addListener(this);
// 指定写真を ko1_mc にロード
mcl.loadClip(photo, _root.oya_mc.ko1_mc);
//------
// ロード&表示されたときの動作を定義
function onLoadInit(myMC) {
//もし 変数 cnt の値が 0 であれば
if (cnt == 0) {
// ko2_mc の座標を決定
_root.oya_mc.ko2_mc._x = myMC._width;
// 指定写真を ko2_mc にロード
mcl.loadClip(photo, _root.oya_mc.ko2_mc);
// カウント用変数の値を 1 加算
cnt++;
} else {
// フラグ用変数 flg1 を true にする
flg1 = true;
}
}
//
//-----—-
//
// マウス監視用リスナーオブジェクト msl の作成
msl = new Object();
// マウスダウン時の動作を定義
msl.onMouseDown = function() {
// フラグ用変数 flg2 を true にする
flg2 = true;
// マウスダウン時のマウスのx座標を保存
msx = _root._xmouse;
};
// マウスアップ時の動作を定義
msl.onMouseUp = function() {
// フラグ用変数 flg2 を false にする
flg2 = false;
};
// msl を Mouseクラスのリスナーに登録
Mouse.addListener(msl);
//
//-----—-
//
// 1フレーム進時間毎に随時実行
_root.oya_mc.onEnterFrame = function() {
// フラグ用変数 flg1,flg2 が共に true であった場合
if (flg1 && flg2) {
// マウスの座標によって変数 spd の値を変える
this.spd = speed*(msx-_root._xmouse)/(Stage.width/2);
// 実際の移動
this._x += this.spd;
// 左右の限界位置に達したとき座標を折りかえす
if (this._x<=-this._width+Stage.width) {
this._x += -this._width/2+Stage.width+this._width-Stage.width;
} else if (this._x>=0) {
this._x += -this._width/2;
}
}
};
===============================================
そして,
「制御」→「ムービープレビュー」してもらうと,動作確認ができます。
また,
「ファイル」→「パブリッシュ」でドキュメントを保存したフォルダに SWF と HTML が作成されると思いますから,
一応以上で完成です。
ステージの大きさは,ActionScript では指定できません。
「修正」→「ドキュメント」より,ドキュメントプロパティで適当に設定してください。
また,
動きをなめかにしたい場合は,フレームレート を 20 fps 以上くらいにしてください。
そして,
スクリプト中の★のついた最初の2行の値は必要に応じて変えてください。
 // パノラマ写真のパス及びファイル名を指定 ★
 photo = "./panorama.jpg";
このパスは,
SWF を HTML に貼り付けた場合,SWFからのパスではなく,HTMLからのパスになります。
したがって SWF と JPEG と HTML を違うフォルダに保存する場合は,
パスの変更に気をつけてください。
Flash は今回使ってみるだけということでしたら,
以下は無視してくださってかまいません。
/////////////////////////////////////////////////////////
次の URL は Adobe Flash 使用のためのサイトではなく,
他の Flash 作成ソフト(Suzuka)を使うためのサイトですが,
画像を無限ループ移動させる原理は同じです。
参考URL↓
?http://suzupara.iinaa.net/photo.html?
原理をビジュアル的に知りたい場合は,上のページの下の方を参考にしてみてください。
この原理を利用しています。
また,今回書いたスクリプトの 最後の数行 は,
上のページと同じコードを使用させていただいています。
※ ダウンロードできるファイルは Adobe Flash 用ファイルではないので
  Flash8 では使用できません。
  しかし,Adobe Flash がご自宅にないのであれば,
  最初から上記サイトのフリーソフト Suzuka を使う手もありますよ。
もし今後も Flash にとり組み続けたいと思われる場合の話ですが,
Adobe Flash でも,普通は上のページのような感じで構造を作り込む修行を繰り返しします。
ものを作り込む修行をすると,
空想上のイメージだけで時間的空間的な構造が作り込めるようにもなります。
すると,構造を具体化する ActionScript も考えられるようになって,
ある程度であれば ActionScript だけでも,ものを配置したり動かすことができるようにもなります。
今回は構造を作り込むことに関する説明が困難であるため,ActionScript のみで作成しただけです。
普通の場合は,当然 ActionScript だけでする必要は全くありません。
実際に作り込んだものの方が,さらに細かい動きや複雑な動作も作成することが可能となります。
Adobe Flash にとり組む場合は,
コピペでする方法ではなく,基礎的な簡単な本を買って,
ぜひ,「ものづくり」や「ActionScriptを使わないアニメーション」から始めてください。
結局,基礎的なことを積み上げて行くことが,上達への早道になります。
※ Suzukaには書籍などはおそらく存在していません。
  サイトの情報を参考に自己鍛錬あるのみです。
  また上記スクリプトは,
  Flash 8 では動作検証済みですが,Suzuka での動作検証は行っていません。

11月
30
2009

写真を効果的に見せてくれるフリーFLASHギャラリー集「25 Amazing &amp; Free Fl

写真を効果的に見せてくれるフリーFLASHギャラリー集「25 Amazing & Free Flash Based Image Galleries」 DesignDevelop

http://design-develop.net/web-design/25-amazing-free-flash.html

11月
30
2009

ポートフォリオを作る

Webデザイナーになりたい新卒のあなたへ Webデザイン講座 – オシャレチップス

http://oshare.chips.jp/special/02_webdesinger/index.html

2005年12月15日更新

http://oshare.chips.jp/special/02_webdesinger/13portfolio.html

ポートフォリオを作る

TOP > 大学生の「Webデザイナーになりたい」就職活動 >


あなたのスキルと将来性を見せる恰好のPRポイント

面接では時々、ポートフォリオを提出させるところがあります。このポートフォリオとは、あなたの作品集です。今まで作ってきたサイトのスクリーンショットを印刷してポートフォリオとしたり、ポートフォリオ用のサイトを一つ作るという2種類があります。

このポートフォリオをつくる作業、簡単そうに見えますがスクリーンショットをとったり、それを加工したりで、予想以上に時間がかかってしまいます。突然ポートフォリオを送ってくるようにと言われることもあるかもしれませんので、あらかじめ作っておくのが得策です。

さて、このポートフォリオをなぜ提出させるのかというと、面接官になったつもりで考えると答えは簡単です。あなたのスキルやセンスを見るものです。

スキルを見る

Webサイトを作る際には、PhotoshopやIllustratorなど、たくさんのツールを使っていくことは知っていますね?これをきちんと使えているのかを見ているようです。?Web制作会社であまり研修が充実しているところは少なく、比較的即戦力になりそうな人を採用する企業が多いようです(←これは私の私見です)。

センスを見る

また、同時にデザインセンスも見られます。これは「できる/できない」とか「数字で表せる/表せない」と行った問題ではないので、対策のほどこしようがありません。仮にセンスがないと思われても、新卒の募集は何を重要視するかによってその評価も変わってきますので、恐れずにポートフォリオに載せることが大事だと思います。

どんなサイトが評価されるのか

多くのWeb制作会社ではジャンルを問わず、たくさんの企業と取引をしてWebサイトを制作しています。しかし、多くのWebサイトは商用サイトだということは間違えないでしょう。そこで、あなたがポートフォリオに載せるサイトは次のようなサイトがいいでしょう。

  • 商用のWebサイト(ECサイト、ショッピングサイト)
  • 会社案内のサイト

アルバイトでなら、これらのサイトを作ったことがあるかと思います。これらをポートフォリオの中に掲載して、積極的にアピールしていくといいでしょう。

制作会社でのアルバイト経験がない人/制作実績がない人

地方では、Web制作会社が少なく、アルバイトをするといっても、働き口がないのが現実です。その中でポートフォリオをつくるとなると、ポートフォリオに載せるものがないと嘆いてしまいます。それでポートフォリオがありませんと言っても、評価されることはありません。

そこで、どのようにするのかというと、架空のサイトを作ってしまうんです。いわゆるモデルルームを作るのです。架空の商用サイトや会社案内のサイトであれば、ほぼ無限に作ることが出来ます。そして、架空のサイトだということを注意書きとして書けば問題ありません。

ただのポートフォリオにワンポイント!

ただ単にWebサイトのスクリーンショットを貼り付けるだけでは、物足りなさを感じますね?もし、あなたが面接官でいきなりサイトのスクリーンショットを見せられても戸惑うと思います。そのため、サイトについての説明やアピールポイントなどをつけて、どのような意図でサイトをつくるようになったのかを面接官に伝えるようにしましょう。

ポートフォリオに入れておきたい項目

  • サイトの概要
    • [制作期間] いつ頃作ったのか、制作期間はどれくらいか
    • [ターゲットユーザー] 誰を目的にしたサイトか?
    • [サイトの目的] なにをするためのサイトか?
  • アピールポイント
    • [工夫点] どこにどのような工夫をしたのか
    • [制作ツール] 使用したツール
    • [開発言語] 使用した言語(プログラムを含んでいる場合)
      注意)HTML・CSSは当たり前なので、書かなくても大丈夫です。

他にもあるかもしれませんが、これぐらい作品に対して書いておくと、どのようなサイトなのかということにも加えて、自己PRにもなります。ですので、このようなことを積極的に書いてあなた自身をどんどん売り込んでいきましょう。

11月
30
2009

ポートフォリオサイト

Web-chan.net-webデザイナーhassyのポートフォリオサイト-

http://web-chan.net/index.html

ポートフォリオ バーチャルコミュニケーションズ Virtual Communications

http://www.vccorp.net/jp/portfolio

Leonian’s Room|駆け出しWebデザイナーのポートフォリオ

http://www.leonian.net/
デザイナーのためのWEBポートフォリオ集「50 Beautiful and Creative Portfolios」
http://design-develop.net/web-design/50-beautiful-and-creative-portfolios.html

11月
30
2009

swfからflaファイルを吐き出す

Motion Decompiler 3

http://www.ah-soft.com/mdw/index.html

Motion Decompiler 2

http://www.ah-soft.com/md/index.html

SWF Decompiler フラッシュデコンパイラトリーリックス – SWFデコンパイラ – フラッシュエディター – SWFからFLAへのコンバーター

http://www.flash-decompiler.com/jp/

SWFファイル逆コンパイラ, flash逆コンパイラ, 逆コンパイラソフトウェア, decompiler, 逆コンパイラツール

http://www.swfdecompiler.net/jp/

Sothink SWF Decompiler V5.3
http://www.altech-ads.com/product/10004053.htm

http://www.infocentral.jp/daunrodo/sothink-swf-decompiler/20318.htm

11月
28
2009

Tweener

開発がストップしているのでこれ以上の進歩は期待できない。

30秒で分かるTweener
http://wiki.libspark.org/wiki/Library/AS2/Tweener

Tweenerを使って一枚の画像を超シンプルにボタンにする方法
http://clockmaker.jp/blog/2009/01/simple_button/

■tweener

http://code.google.com/p/tweener/

■tweener動き

Transition Types

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

========================================================================

import caurina.transitions.Tweener;//フォルダ名でファイル呼び出し

Tweener.addTween(mc,{x:700,time:1,transition:"easeOutExpo"});

//{x:700(xを700に),time:1(1秒で),trainsition:"easeOutExpo"(動きの種類はeaseOutExpo)});

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

Tweener.addTween(mc,{y:400,time:1,transition:"easeInOutExpo",delay:1});

//delay:1で指定した秒数を遅らせて開始する

========================================================================

11月
28
2009

求人

WEBデザイナーの募集
WEB制作の人材に強い優クリエイト経験豊富なクリエイター多数登録

https://www.y-create.co.jp/

11月
27
2009

360度パノラマで廃墟写真を閲覧できる「360icon」: DesignWorks

360度パノラマで廃墟写真を閲覧できる「360icon」: DesignWorks

http://www.360icon.com/

ページ:12345»
年会費無料のクレジットカードなら「楽天カード」