Home > FLASH

FLASH Archive

携帯Flashサイトの作り方について勉強会を行いました。

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

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

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

QR_Code

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


1.上下キー+数字キーでしか操作できない
一部機種で他のキーを使用できることもありますが、基本的に使用不可です。

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

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


3については色数を調整したり、スクリプトの変数名をなるべく短くするなどして地道にやっていくことで解決できる問題です。大変なんですが・・・

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

・操作は上下キーだけ

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

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

flashlite

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

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

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

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

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

Flash表現の設計について勉強会を行いました。

新入社員の森です。
今月号の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!」

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

adobemax2009行ってきました。

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

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

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

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

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

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

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

【2日目】
■基調講演
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からシステムまですべてのサービスに対して
最適なツールを提供しますよ的なイメージが残りました。

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

adobe CS4発表セミナーいってきましたの報告。in 大阪

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

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

【デザインセッション】
■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
 ———————————————————————————

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

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

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

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

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

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

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

以上。

Progressionワークショップ in 大阪参加してきました。

久々エントリーですが、筒井です。
さてはて、みなさん3連休いかがお過ごしでしょうか!
ハイキング!?楽しそうだな・・・。めそめそ。

僕はProgressionワークショップ in 大阪 + 裏大阪てらこ参加してきました。

ProgressionとはFLASH用フレームワークでALLFLASHサイト作成時などに必要不可欠になるであろうフレームワークです。※実際アジケサイトでも使用させて頂きました。
「百聞は一見にしかず」という言葉があるように実際に開発者のniumさんを迎えワークショップ形式で解説していただくことにより、あれよあれよと理解を増した気がします。

関西ではこういう機会はめったにないのですが、東京では頻繁にワークショップを開かれているようなのでFLASHに興味ある人は足を運んでみるのも良しです。
FLASHに限らず自分の興味ある分野の勉強会をチェックし足を運ぶことは、知識の向上だけでなく、モチベーションの向上にもつながると思います。

PS.
飲み会の時に開発者のniumさんとお話させてもらったのですが、アジケサイトのことをご存知でした。しかも、Progressionを使用していることまで!何だかとても嬉しい限りでございます。しかし、なんという情報収集力・・・恐るべし。当のアジケサイトですが改善すべき点が何点かあって時間ある時にがっつり作り直さなきゃなっと。。。

Papervision3D 2.0をさわってみました。

某案件にてPapervision3Dは使用していたのですが、そのバージョンが1.7。
そんなPapervision3Dも2.0へとバージョンUPされています。

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

結構仕様が変わっていて、1.7で得た知識だけでは、ちょっと厳しくなっていたので、
ちょっとだけ弄ってみました。
http://www.y-tti.com/blog/2008/10/papervision3d_20.php

感想としては、クラスというかオブジェクト指向をしっかりと学ばないと扱いきれないシロモノになってしまった気がします。いきなり案件に使用するには難しくしっかりと勉強して準備する必要ありな感じです。

ちなみにネットに転がっている情報は、1.5、1.7の時のが混ざっているので、バージョンのチェックはしっかりと。

別物ですが、ajikeサイトで使用したProgressionフレームワークも3.xへとバージョンUPされてます。※ajikeサイトではProgression2.0を使用。

http://progression.libspark.org/

Progressionに関しては、11月初旬に開発者のniumさんを交えて関西にてワークショップがあるのでしっかり勉強してこようと思います。※東京では頻繁に開かれてたようですが、関西では初?。勉強会関連は東京はやはり充実してるなー。。。

Bitmapdataのお勉強をしたかった。

Bitmapdataのお勉強。

DrawTest01.jpg

※クリックで写真爆破→写真配置→爆破→配置・・・
今年の1月に行われた第11回てらこにて、
さくーしゃさんがライブコーディングしたやつ
当時、ソース見てもサッパリ??????だったので
今になってもう一度見返してみた。
おお。何となく分かるぞ~!!ちょっと嬉しい。
で、それぞれのパーティクルをピクセルではなく、
Bitmapdataに置き換えてやってみました。
ん~。なかなか気持ちい。
■追記
BitmapTest2_2.jpg
どうもIEだけフレームレートが遅い。
私のIEがダメなのかどうか。。
FirefoxとGoogle Chromeは普通に速度出てるぽい。

AS3勉強中

カーテンを開けたようにテキストを表示する。

最近いろんなサイトで似たようなものを見ていたので、自分でも作ってみたくなりました。

結構きもちいい動き。

 

masktext.jpghttp://www.ajike.co.jp/ajiblo/masktext.html

これを元に応用すれば、これからいろんなサイトでも使えそうな・・・

でも応用するだけの頭が必要ですな。

asはややこしいし難しい。

Flash OOP に参加してきました。

昨日、flash OOP for AS3というイベントに参加してきました。

参加人数はかなり多く、おそらく100~200人くらいいたと思います。みなさん勉強熱心すぎます。

テーマは「AS3の今を語ろう」というもので、サイトやアプリケーションの製作過程や裏話などを聞くことができました。

業界トップレベルで活躍している方々ばかりだったので、初心者の僕にはわからない話も結構ありましたが、少なくとも刺激にはなりました。

おそらく年もそんなに離れていない方が、世間の話題になるサイトの中心人物として制作に携わっているわけですから、ぼくも頑張ろう!という気になります。

0からスタートして、コツをつかむまでは四苦八苦しなければならないのでしょうが、それを乗り越えられたらきっと楽しく制作できるようになるでしょう。僕はまだまだ四苦八苦しなければならないようです。

普段接することがない人の話を聞くというのは、新鮮でいいですね。昨日はかなり疲れましたが・・・

トップを走る人を見て、自分の現在置を知ることができただけでも参加した価値があったのかもしれません。

BitmapDataを使って消し消し

BitmapDataのお勉強。
夏なんでホラー風に!

DrawTest01.jpg

ドラッグにて、A画像を消して、B画像を浮かび上がらせます。

内部的には、B画像の上にA画像(マスク)を配置して、
ドラッグにより、マスク範囲を描いてA画像を表示している感じです。

とまあ、BitmapData.drawを確かめたかった。それだけ。。。汗

src

ホーム > FLASH

Search
Feeds
Meta

Return to page top