最近は携帯のパズルサイトにはまっている森です。

以前FlashLiteの外部アクセスについて勉強会を行いましたが、基本的な携帯Flashサイトの作り方については触れていませんでした。そこで今回FlashLiteサイトの作り方について勉強会を行いました。

こんな感じのFlashの作り方です。（携帯のQRコードでアクセスしてください）

FlashLiteサイトの作る上で気をつけなければならない点は大きく3つあります。

2.画面外のボタンにはフォーカスが当たらない
縦長のFlashを作った場合、操作できなくなってしまう？

3.容量制限
キャリア別、機種別で違いますが、基本的には100KB。リッチな表現が売りのFlashなのに…

そして問題は1と2にです。これらを解決するため、以下の様な構造にする必要があります。

・操作は上下キーだけ

・ボタンはすべて1画面内に配置する。

でも、これでは最初に紹介したサンプルのように、縦長のFlashは実現できないように感じます。しかし、下図の様な構造にすることで、解決することができます。

メニュー部分にはフォーカスせず、画面内に配置した、透明のボタンにフォーカスが当たるようにします。そのフォーカスが移動したときに内部的に変数のカウントアップ・ダウンを行い、その変数によって動きを制御するのです。

たとえば、変数iの初期値が1（i=1）としたとき、フォーカスが[空ボタン1]から[空ボタン2]から移動すると、変数iは加算されi=2となります。i=2になったとき、一番上のメニューをロールオーバー画像にし、かつムービーのY値も調整するようなスクリプトを記述します。

こうすることであたかもメニューにフォーカスし、それに合わせて縦スクロールしているように見せることができるのです。

具体的どんなスクリプトを書けばいよいのか、ということが問題になってはきますが、Flash liteのスクリプトはまた少し特殊です。これはまた別の機会ということで・・・

なお、今回は以下の書籍を参考にさせていただきました。
参考書籍: Flash Liteで作る携帯コンテンツ実践教科書

Tweet Read More →

新入社員の森です。
今月号のWebDesigningは特集が「Flash最新表現の設計図」でした。
アジケでもFlashの表現力をもっと磨かないと！
というわけでWebDesigningを参考にしつつ、Flashの設計について勉強会を行いました。

・フル動画をキレイに見せる方法
画面全体にキレイな動画を展開しようとすると、どうしてもファイルサイズが大きくなってしまいます。この問題を解決できる、軽い画像の見栄えをよくするのが「格子レイヤー」です。
フル動画の上に格子状のレイヤーを重ねることで、ピクセル数を増やしたような効果が出ます。また引き締まった印象にもなります。
「RADIOHEAD | 12 CAMS, CREATE YOUR RAINBOW」
このサイトは右クリックで拡大できますので、格子レイヤーを使用していることがよくわかります。

・Google Maps API for Flash（http://code.google.com/intl/ja/apis/maps/documentation/flash/intro.html）
ActionScriptからGoogleMapを利用できるAPIです。Google Maps API for Flash – Flash CS3 TutorialにFlashCS3での連携方法が記載されています。AS3を扱うことができる人なら難しくはなさそうです。しかし簡単だからこそアイデアが大切な気がしました。

・魅せるサムネイル
ただのサムネイル写真より動画の方が中身が想像しやすくクリックしたくなりますよね。そんなサムネイル動画をどうやって実装する方法が紹介されていました。また、サムネイル写真に演出をつけて興味を引く事例も紹介されていました。サムネイルはただ並べるだけではクリックされにくいので、演出をつけていくことが大切です。これはいろいろな事例を見て、引き出しの数を増やしていくことが大事ですね。
WebDesigningで紹介されていた、動画サムネイルを使用したサイト→「Honda　インサイトボイス」

・レイヤーで奥行きを表現する
Flashで3D表現をする際に考えなけらばならないのが、カメラ（視点）を動かし方と物体を動かし方の二点です。どちらを中心にしていくかによって、デザインも大きく変わります。そのため、先に動きのイメージを持ちながらデザインをしていく必要があります。
カメラだけを動かしている例→「櫻山」
物体もカメラも動かしている例→「CREATED201 STUDIOS」
物体だけ動かしている例→「Yahoo!きっず環境 – Kids Planet!」

デザイナーはどのような技術を使ってどのような表現をするのか、理解しながら具体的なイメージを持ってデザインする必要があります。そして最終的に実装するのはフラッシュデベロッパーなので、イメージの共有も必要です。なるべく早く、デザインの下書きの段階からズレがないよう共有していくことが大切なようです。

Tweet Read More →

adobe max初参加してきました。
以下受講したセッション。

【１日目】
■基調講演
翻訳機の存在を知らず、英語が聞き取れず悲しいことに。。

■Flex Builder時期バージョンの紹介
プログラマーにとって、かゆいところに手が届く嬉しい機能が追加されますよ。

■Adobe made some noise
※スピーカー体調不良でセッション内容が変更。
Flashプログラングより生成したデザインを活用した仕事例。
思わぬ綺麗なデザインが出来てしまったりで、コンピューターは偉大だ。
スピーカーの方がとっても面白い人だった。

■After Effect超表現術
After Effectでどのような表現が出来るのか？をデモを使って説明。
個人的に１日目の一番楽しみにしてたセッションで、一番満足なセッションでした。

■サービスとしてのFlash Lite開発
xmlやシステムと絡めたFlash Lite開発の説明。
今後、モバイルとFlashは無視できないものとなると思うが、
現時点では、Flash Lite1.1のしばりがあってなかなか難しい。

■Technology Sneak Peek
用事で途中退室しました。

【２日目】
■基調講演
adobe製品の説明。

■映像とプログラミング
発想を導きだすための手法の説明。
初めて実物yugopを見ました＾＾

■アイデアの実装／コントロールの最適化
モノを動かす時に「視点」に注目してプログラムする手法。
エコだ動物園がとっても軽い（PC的に）3D表現なわけですが、
その鍵となる部分を説明してくださった。
個人的に今回maxで一番役立つTipsでした。

■”最後の聖戦”　photoshop vs Fireworks論争に決着
用事でほとんど見れなかった。

■コミッタ全員集合！？　Spark projectライトニングトークセッション
用事で見れなかった。

■EDGE Now! of the Year
用事で見れな（略

参加しての感想ですが、
デベロッパー向けのセッション内容が多い！
Flashを主としている自分にとっては嬉しいセッション内容ですが、
デザイナーさん達は？？？だったかもしれない。
adobeがFlashに力を入れていくと公言しているように
Flashを中心としたイベントだったと思います。
adobe=photoshopやillustratorのイメージは、もはやそこにはなく、
adobe=Webからシステムまですべてのサービスに対して
最適なツールを提供しますよ的なイメージが残りました。

最後に月末に参加してしまったことにより、
関係者の皆様にはご苦労、ご迷惑をおかけしてしまい
大変申し訳ございませんでした。

Tweet Read More →

とりあえず、箇条書きメモです。　
———————————————————————————
■CS4
・作業の効率化
・タブ表示化
・XFLフォーマット（将来flaに変わるフォーマット）

■ConnectNow
　ネットを介して３人まで画面共有可能に。

【デザインセッション】
■illustrator
　・アートボードの複数化
　・グラデーションの使い勝手向上
　・塗りブラシツールの追加

【フォトセッション】
■photoshop
　・GPU（グラボ）使用による高速化
　・3Dオブジェクトの取り込み
■Bridge
　・インターフェースの変更
　・3Dオブジェクトの表示
　・ギャラリー出力機能（PDF,FLASHなど）

【WEBセッション】
■FLASH PLAYER10
　・3D効果強化、ピクセルベンダー、ファイルUPLOAD、サウンド生成
■Fireworks
　・共有ライブラリの増加
　・ものさしツールの強化
　・Air,Flexとの連携
■Dreamweaver
　・UIをadobe化
　・photoshopとの連携
■FLASH
　・UIの大幅変更
　・アニメーション作成方法の変更
　・フレームベースからオブジェクトベースへ
　・3D効果
　・ボーンツール（IKクラス）
　・Soundboothとの連携
　・FlashとFlexとの連携
　・テキストの縦書き
■DeviceCentral
　・複数デバイスでの自動テスト機能

【VIDEOセッション】
■Premire Pro
■AfterEffects
　———————————————————————————

全体的に３D機能が多く見られた。これからは3Dの時代か！
色々機能追加あって把握できないよ！っと思うので仕事内容別に
いいなって思った部分記述しておきます。

■企画・立案
ConnectNowという機能により、ネットを介して３人まで画面共有可能となるそうです。デザインなど直接クライアントと画面見ながら、コミュニケーションが取れるのはいいことだ。
あと、Fireworksが企画・立案にも使用してもらいたいとの意向で機能追加されてるらしいです。※実際触ってみないと分からないですね。

■デザイン
機能としては劇的に変わるようなものはなかったものの、作業効率UPしてもらいたいとの意向の元に機能追加、変更が加えられているようです。画像処理をGPUにまかせることによりソフト自体が高速化したようです。

■FLASH
FLASHに関しては劇的に機能追加され、かつ、タイムラインアニメーションの制作方法までも変更されています。adobe自体がFLASHに多くの力を注いでる印象も受けました。

■コーディング
DreamweaverのUIがマクロメディア風から、adobe風に変更されています。個人的にDreamweaverのUIがどうも苦手だったので嬉しいかも。あとエディタがどれだけ使いやすくなっているか触ってみないと分からない。それとphotoshopやfireworksからの画像切り出しや編集のやりとりなども使ってみないと分からない。。

■動画編集
個人的にAfterEffectsなど動画編集ものを使用することがないので、どの部分が機能追加され便利になったのかが分からなかったのですが、AfterEffectsは凄いなと。webとしてもFlashとの連携で色んな可能性を秘めていると思いました。

今回のCS4ですが、売りとして「作業効率UP」が掲げられています。個人的にweb制作としてはCS3で十分だと思うのですが、作業効率の部分には大きく惹かれるものがありました。CS4日本語版が発売されれば情報ももっと明確化していくと思いますので、各自直接使用するソフトに関してはチェックしておいたほうが良さげな感じです。

以上。

Tweet Read More →