plamoでタグ「 Flash 」が付けられているもの

Fantasista Webサイト公開!

fanta.jpg

デザイン会社、FantasistaのWebサイトを制作しました。
http://www.fantasista.co.jp/

サイト自体は4/1日にオープンしたのですが、そこからさらに機能をちょこちょこと追加し、
ついに先日完成したのです。

制作の進め方としては、最初にデザイナーの榊原くん(写真中央)から、サイトのコンセプトや、目指す雰囲気などをヒアリングし、基本デザインをもらって、そこから僕のフィードバックを重ね、二人であれやこれや意見を詰めていきながら少しずつくみ上げていった流れです。

キバラくん(榊原くん)は、デザイナーとしての経験が非常に豊富で、DTPの技術も長けているので、"グラフィックデザイナー" vs "Webクリエイター"としてのお互いのこだわり、また、できることできないことをぶつけ合ってサイトを作っていく作業がすごく刺激的で楽しくて経験にもなりました。

ちなみにキバラくんのワークスはこちらです↓
http://www.fantasista.co.jp/sakakibara/

そしてFantasistaサイト制作にあたって、主に次のような機能を盛り込みました。

  1. 社内スタッフ全員が簡単に記事を作成、更新可能にする
  2. リストページを2段組にして、一覧性をあげる
  3. 各記事のメイン画像をサムネイルで切り替え可能にし、簡単に更新できるようにする
  4. トップページはリストページと少しフォーマットが違うため、
    更新システムの負荷、柔軟性を考慮し、Flashで作成する
  5. 映像作品は作品の性質上Youtubeなどの共有サイトでアップ不可のため、
    オリジナルのプレイヤーを作成し、簡単にアップロードできるようにする
fanta_palaning.jpg

(2) の2段組は、メイン画像のサイズがリスト用に小さくなるように、アップ時に、小さくリサイズした画像も書き出しくれるプラグイン実装しました。

(3) のサムネイルでの切り替えは、更新システムにmootoolsというライブラリを使用することで実現しました。最初、jQueryを使っていたのですが、jQuery独特のバグというか仕様で、ブラウザによってうまく表示できないことがあったのでやめました。
編集者はメイン画像5つまでとサムネイル画像をアップするだけで、ページに反映されるようになっています。

(4) のトップページは、Javascriptがオフの場合、また、iPhone、iPadなどのFlashプレイヤーが使用できない端末で閲覧した場合にも、HTMLで表示されます。
Flashの裏側のソースが常に最新の記事になることで、検索エンジン対策にもなっています。

(5) は、編集者がアップしたFlv動画のファイル名を更新システムが取得し、HTMLの flashvar を介してFlashムービープレイヤーが、ファイル名を読み込むという形にして実現しました。
最近実装したばかりなのですが、徐々にアップされる予定です。
参考 → http://www.fantasista.co.jp/works/commercial-film/-shs-id.html

とはいえ、一番大事なのは、サイト内の記事の充実です。
Fantaサイトにはすでにたくさん記事がアップされていますのでぜひ見てみてください〜


Fantasista inc. :
http://www.fantasista.co.jp/

mootools参考:
http://tenderfeel.xsrv.jp/mootools/279/

10.07.17.PM08:25

JAGDA CALENDAR SALONE 2011

jagda_calendar_2011.jpg

昨年に引き続き、JAGDA CALENDAR SALONE 2011の特設サイトを制作しました。
基本的には、昨年とほぼ同じフォーマットですが、コメントが増えたり、Aboutページを作ったりと、少し要素が増えています。

昨年は作者名のアルファベット順にサムネイルを並べていたのですが、今年は50音順に並べ、サムネイルの下に名前を表記させるなど、よりユーザビリ ティに配慮しています。

また、イベントのフライヤーをデザインされた草谷さんのグラフィックをアクセントで活用させていただきました。

技術的には今年もProgressionを使用したのですが、バージョンは4にアップしました。
相変わらずページ遷移は非常に制作しやすいのですが、地味にボタンキャスト機能の強化や、swf Object2へのバージョンアップなどの、細かいところへの配慮が嬉しいところです。(FireFox3.6への対応もありがたい)

この中から実際に商品化されるカレンダーが出るといいなー。

JAGDA CALENDAR SALONE 2011 :
http://www.jagda.org/contents/calendarsalone2011/

JAGDA:
http://www.jagda.org/

10.04.09.PM05:58

JAGDA CALENDAR SALONE 2011

JAGDA CALENDAR SALONE 2011

http://www.jagda.org/contents/calendarsalone2011/

Design, Direction, Flash + Progression + XML

P, De : Tadahiro Gunji [Nippon Design Center]
Gr : Takafumi Kusagaya
D, De, Fla : Mikio Yamade [plamo]

10.04.09.PM03:37

Firefox3.6におけるFlashでの不具合

先日Firefoxが3.6にアップグレードされたのですが、過去にフルフラッシュで制作したサイトなどをチェックしてみると、予期せぬブラウザのスクロールバーが出現したり、以前機能していたボタンが機能しなくなったりしていました。 焦

注意点や解決策などを以下にまとめておきます。


■フラッシュエリアをクリック(フォーカス)するとスクロールバーが出現する

【解決策】
フラッシュエリアを囲んでいるHTMLのdiv要素にoutline:none;を指定する

#flasharea:focus {
    outline:none;
}

しかし、僕はこれでなぜかうまくいきませんでした。
そこで swffit.js を使用したら解決しました。
こちらの方が確実かも。

□swffit:http://swffit.millermedeiros.com/
□参考:http://www.mousouchiku.net/blog/2010/01/22-150505.php


■Firefox3.6 ではProgressionコマンドエラーで、ムービーがストップする

例えばDoTweenerコマンドを使用したりして、コマンドエラーが出力パネルで
出ていた場合でも Firefox3.6 以外のブラウザでは無視して動いていたのですが、
3.6ではムービーが止まったりするみたいです。
3.6では、よりちゃんとしたスクリプトを組まないとFlashが止まっちゃうようです。

Flash以外でも、Javascript周りの機能がちょっと微妙だったり、ブラウザ上でテキストのコピペがうまくいかなかったり、となんだか色々とエラーが起きてるような気がします。

おそらくですが、色んな細かいエラーなどにたいして、ブラウザがシビアに反応するようになったのではないかという印象です。ちゃんときれいなスクリプティングをすれば問題ないのではと思うのですが、敷居があがった気がします。

FlashやJavascript使わずに、これからはHTML5を使うんだぞ!というMozillaの密かな警告のイントロダクションだったりして。。なーんて考え過ぎか。

10.02.18.PM12:49

Progression4:useHTMLInjection

Progression4の機能で密かに注目しているHTMLタグの読み込み。

現在進めている仕事で、Movable Typeから吐き出したXMLをFlash側で読もうと思っていたのだが、HTMLタグから直接情報を読み込んだ方が、スマートだし、そのままHTMLソースもSEO対策に使えそうなので、早速使ってみるこにした。

Is It So Easy?さんの説明を参考に色々試していたのだが、HTMLを読み込む気配は全くない。

色々調べてみたところ、Progression4アップデートリリースノート
「WebConfig クラスのコンストラクタ第四引数 useHTMLInjection のデフォルト値を false に変更しました。」
と書いてある!

もしやと思い、「WebConfig.as」の「useHTMLInjection:Boolean = false」部分を「true」に変更したらうまく読み込めました。

10.02.16.PM08:43

Tween比較

Green Sockというサイトで、色んなTweenエンジンの比較をしています。
http://blog.greensock.com/tweening-speed-test/

ずっと慣れ親しんできたTweenerがこんなに動きが重いとは。。
性能や将来性を考えるとSprak Projectで開発しているBeTweenが良さそうです。
日本人チームが開発者だし、将来Progressionに統合される可能性もある。
しかしまだα版なので、エンジンの仕様が変わっていく可能性も大きいので、今使用してしまうとそれはそれで後で正規版を入れた時に動かなくなるってこともありえるので、現段階ではプロジェクト毎に同階層にエンジンを置いて使用することにしよう。

Spark Project
http://www.libspark.org/

BeTween
http://www.libspark.org/wiki/BetweenAS3

09.12.14.PM03:55

JET'S PROJECT

jets_img.gif

数々のCMやMusic Videoの美術、空間デザインを手がけているJET'S PROJECTのWebサイトを制作しました。

デザインは、AIMデザインの根岸氏と、JET'S PROJECTの石田さんです。

JET'Sは、数人のスタッフで数え切れないくらいの案件をこなしている会社でして、特にCMなどの映像美術デザインの作品数は膨大です。(全部で230作品ほど掲載しているのですが、これでも100ほど削りました)

今回は、JET'Sサイドと幾度と話し合いながら企画・構成を考えていき、サイトで打ち出したいこと、目指すところ、JET'Sカラーなどを明確にして制作を進めていったので、完成した時の喜びもひとしおでした。

技術的には今回もProgressionを使用し、作品がどんどん追加されることと、なるべく全ページ更新可能にしたいということでしたので、「アクセスマップ」と「お問い合わせ」以外は更新可能にしました。

Informationでは、日付、内容、リンク先を更新するのですが、Progressionのおかげというか、SWF Addressのおかげで、ページ内リンクを外部からも更新可能なので、Flash内へのリンクが貼ることができるのです。いやー、本当に便利です。

Progressionの素晴らしさをさらに付け加えるならば、実は「映像美術デザイン」のトップページは、最初は1ページに230作品ものサムネイルを配置していたのですが、実際動かしてみたところ、読み込みの負担が相当なものでした。
このページはサイトの中でも一番見せたい大事なコンテンツでしたので、急遽サムネイルのページ分けを実装。難しい部分もありましたが、Progressionのおかげで比較的スムーズにページ分けを実装することができました。

とはいえ、技術的にはまだまだ甘ちゃんだなと思うところがたくさん。
もっともっと精進せねば。


そんなこんなでございますが、JET'Sのみなさん長い間ありがとうございました!
そして悪友のアツオくんありがとう 笑

□JET'S PROJECT
http://www.jets-juno.jp/

□AIMデザイン
http://www.aimdesign.jp/

□Progression
http://progression.jp/ja/

09.11.16.AM01:14

JET'S PROJECT

JET'S PROJECT

http://www.jets-juno.jp/

Planning
Direction
Flash (CMS)

Pl, D, Fl : Mikio Yamade [plamo]
De : Atsuo Negishi [Aim Design], Yuichi Ishida [Jet's Project]

09.11.16.AM12:44

Progression ProccessEvent

シーン移動する時に発行してくれる「ProccessEvent」というProgressionのカスタムイベントがあります。
ナビゲーションのモーションを変化させる時などに非常に役に立ちます。
ProccessEventには以下のようなものがあります。

//シーン移動のアクション全てで発行
progression.addEventListener(ProcessEvent.PROCESS_EVENT, onEvent);

//次のシーンが始まる瞬間に発行(現在のシーンから離脱した直後)
progression.addEventListener(ProcessEvent.PROCESS_SCENE, onEvent);

//シーン移動開始時に発行(現在のシーンの離脱開始時)
progression.addEventListener(ProcessEvent.PROCESS_START, onEvent);

//次のシーンのloadイベント実行時
progression.addEventListener(ProcessEvent.PROCESS_INTERRUPT, onEvent);

//次のシーンでエラーが出た時に発行
progression.addEventListener(ProcessEvent.PROCESS_ERROR, onEvent);

//シーン移動が全て完了した時に発行(次のシーンのaddCommand終了時)
progression.addEventListener(ProcessEvent.PROCESS_COMPLETE, onEvent);

motuLogさんの記事を参考にしました。
http://plug.heteml.jp/motulog/2009/03/progression3152-processevent.html

09.10.16.PM11:36

AS3でSingleton パターン

Singletonパターンは、インスタンスを1個しか生成しないこと
(より広い意味では、生成できるインスタンスの個数に制限があること)を、
クラスデザインとして表現するパターンです。

目的としては
*変数などをどのクラスからでも簡単に参照したい→データ保持用のクラスプロパティなどを作る
*外部からのインスタンス生成を阻止。内部でひとつ作ってしまい。それを外部からコントロール可能にする。

シングルトンクラスの実装。
*コンストラクタの直接呼び出し時にはエラーを投げるようにする。
*コンストラクタが直接呼び出されたのか、インスタンス返却メソッド経由で呼び出されたかを判断する。
*インスタンス返却メソッドが呼ばれた場合、インスタンスが既に作成済みかチェックしインスタンスを返します。(内部的にすでに作成済)

09.08.18.PM06:12

AS3で小数点第二位以下の四捨五入

Number型だと処理が重くなるけれど、int や uint ではなく
少数第2位以下を四捨五入したい時の(2.3など)簡単な方法は
求めたい数値に10倍したものをMath.roundなどで一旦整数化し、
その後で10で割るとよいです。

var num:Number = 2.36589;
x = Math.round(num * 10) / 10;

参考サイト:EviryTimes
http://times.eviry.com/?p=30

09.08.18.PM06:03

FireFoxでフルスクリーンモード

Flashをフルスクリーンモードに対応させたい場合、HTMLの<object>タグ内に<param name="allowFullScreen" value="true" />を記述する必要があります。

なので swfobject を使用している場合、「swfobject.js」にこの情報を追加(add)する必要があります。

so.addParam("allowFullScreen", "true");

(記述例)
 

ここで気をつければならないのは、FireFoxだと「Ese」キーなどでフルスクリーンモードを解除した際に、Flashムービーが表示されず、ブラウザウィンドウを可変すると表示されるという挙動が起きることです。

これは、通常「ウィンドウモード」を
so.addParam("wmode", "transparent");
と記述するところを
so.addParam("wmode", "window");
と記述することで解決します。

09.08.18.PM05:46

REDSOUND "FUNKY OPINION" Music Video

アライ・リョウの変名"REDSOUND"のPVを制作しました。
先日発売されたREDSOUND×GRIND DISCO(イルリメ)のスプリットアルバム"DRAG AND DROP"からの1曲です。

VJノリでジャンクにイルリメのイラスト素材が飛び交います。
Flashのスクリプトやらタイムラインやらを駆使してます。

スペースシャワー系列のDAXにムービーがアップされていて、同サイト内の裏MyXという企画でも取り上げられているので是非ご覧ください!

■Title: FUNKY OPINION
■Artist: REDSOUND aka Riow Arai
■Label: Imagined Records

□Creative Direction, Flash: 山出幹夫(plamo)
□Flash: 近藤充(QLEA) / 南誠子(FICC) / 野口祐希(INSIDE TECH) / 白本雄二(PuchiPlus.com
□Movie Eddit: 力石友弥(QLEA
□Illust: イルリメ

DAX:
http://www.dax.tv/?item=3322

裏MyX:
http://www.dax.tv/uramyx/redsoundgrinddisco/

Riow Arai オフィシャルサイト:
http://www.riowarai.com/

イルリメ オフィシャルサイト:
http://www.illreme.com/

Imagined Records:
http://www.imaginedrecords.com/

09.08.10.AM12:47

Drag and Drop

REDSOUND "FUNKY OPINION"

http://www.youtube.com/watch?v=BWl1H2fjUhg

Creative Direction
Flash

CD, Fl : Mikio Yamade [plamo]
Fl :Mitsuru Kondo [QLEA], Seiko Minami [FICC], Yuki Noguchi [INSIDE TECH], Yuji Shiramoto [PuchiPlus.com]
Ed : Tomoya Rikiishi [QLEA]
Il : illreme

09.08.08.AM03:25

サウンドラグーン

soundlagoon1.jpg

先日発売されたサウンドラグーン(Sound Lagoon)という、クレイジーケンバンドなども参加するコンピレーションアルバムの特設サイトといいますか、企画ページのフラッシュとサウンドを担当しました。
アートディレクション軍司匡寛、写真は大和田良氏です。

このページは olio photo というWeb上でフォトアルバムのデザインなどをカスタマイズできるサービスによるコラボ企画で、大和田さんの写真を使ったフォトアルバム閲覧などができます。

フラッシュ部分は時間帯によって、1時間おきにメインの写真が入れ替わります。
右上の時計は表示中の写真を指し示しているのですが、この時計自体がナビゲーションになっていて全ての写真が閲覧できます。

フルスクリーン表示も可能なので、ぜひ写真を堪能してください。

olio photo × sound lagoon1:
http://www.olio-photo3.jp/cont/gallery/soundlagoon/

日本デザインセンター:
http://www.ndc.co.jp/

大和田良オフィシャルサイト:
http://www.ryoohwada.com/

09.08.07.PM06:08

getDefinitionByNameでクラス名を文字列から作る

文字列からインスタンス名を作りたい時は「getChildByName」を使いますが、 クラス名を作る時は「getDefinitionByName」を使います。

サムネイル画像に使うような、比較的容量が小さめの画像を、最初からライブラリに登録しておいて、始めにロードしておきたいという場合など便利です。

例えば、ライブラリに読み込んだビットマップ画像のリンケージ名をPhoto1, Photo2...と連番で名前を付けた場合は下記のような書き方ができます。

09.07.17.AM02:18

Progression Listenコマンド

Progressionのシリアルリスト内で、ロードコンプリート後に次のアクションを起こすスマートなやり方がないかと探していたのですが、Listenコマンドがかなり便利です。

例えばキャストスプライトクラス内で、スプライト自身がディスプレイリスト追加時に、 任意の外部画像を読み込んだ後で、ロードオブジェクトをフェードインしたい場合はこう記述します。

09.07.15.AM12:24

AS3で外部swfに埋め込んだフォントを読み込む

前回特定の文字数だけフォントを埋め込む方法を紹介したのですが、今回は

・スクリプトで指定のフォントデータを全て埋め込みたい
・しかし、書き出す際に重くなるのは避けたい

という場合に便利な、外部swfにフォントデータを埋めてしまって、本体のswfにスクリプティングで読み込む方法を紹介します。

09.07.13.AM11:44

AS3で指定した文字数だけフォントを埋め込む

タイトルなど、後々変更がありそうな文字をスクリプトで書いておきたい場合があると思います。

var str:String = "AS3で指定した文字数だけフォントを埋め込む";

その方法として、ライブラリパネル + AS3を使用する方法があります。

まず、テキストツールを選択し、ステージ上にダイナミックテキストか、テキスト入力でフィールドを作り、使用したいフォントを選択します。今回は「FOT-ロダン Pro B」にします。

09.07.12.PM09:31

JAGDA CALENDAR SALON 2010

JAGDA CALENDAR SALONE 2010

http://www.jagda.org/contents/calendarsalone2010/

Flash + Progression + XML

AD : Tadahiro Gunji [Nippon Design Center]
Fla : Mikio Yamade [plamo]

09.04.23.PM04:42

plamoを購読する