スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

前回はFlashでボタンを作成してみましたが、
Flashでボタンを作る
http://blog.he-ron.jp/2009/09/flash-4.html

今回はその知識を活かして、バナーを作ってみました。

ロールオーバーアクションなども入れずに、完全に手抜きですが、素人ながらに結構かっこいい出来だと自負しております。





久しぶりにFlashを触りました。

今回はボタンのロールオーバーです。

下のサンプルのように、わざわざボタンだけのFlashを作るということはほとんどないと思いますが。。。大抵の場合はFlashコンテンツを作成して、その上にボタンを設置しますよね。




Flex3プログラミング入門
宮田 亮
秀和システム
売り上げランキング: 233152

Flexを習得するにあたり、参考にしている本を紹介します。

Flexを学ぶにあたり、最初のポイントとなるのはmxmlを理解することだと思います。

AjaxのRIAが「XHTML + CSS + JavaScript」で構成されているのと同じように、Flexは「mxml + CSS + ActionScript」で構成されている。
CSSはそのまんま。ActionScriptについてはいわゆるプログラミング、オブジェクト指向などをかじっていれば、特に大きな壁にはならない。
ここで、Flex全体の感覚をつかむ意味でもmxmlの理解が重要となる。

この本では、mxmlを中心に、簡単なサンプルがまとめられている。内容が少し易しすぎるか、最終的にはいらなくなってしまいそうだが、これからFlexを学ぼうという人にはぴったりだと思う。

人気があるのか、部数が少ないのかは分からないが、Amazonではプレミアが付いているようですね。
私の場合は、地元から少し離れた書店で偶然見つけました。

FlexのHTTPServiceを使って、他のサイトのRSSを読み込み、リスト表示をしようとした。
最近では、PHPなどでブログの最近記事の一覧をトップページに出力することは、よくやる手法である。

しかし、Flashの世界では、これが単純にはいかない。
通常の処理で、HTTPServiceで他のサイトのxmlファイルにアクセスにいくと、以下のようなエラーが出力される。

[RPC Fault faultString=”URL へのアクセス中にセキュリティエラーが発生しました” faultCode=”Channel.Security.Error” faultDetail=”送信先 : DefaultHTTP”]

つまりは、FlashやFlexではセキュリティ上、他のドメインへのコンテンツは基本的にアクセスできないようになっているらしい。

Flexをはじめました。

ここ最近の記事を見てのとおり、Flashをはじめたのだけど、プログラマの私にとっては、どうもグラフィックツールやタイムラインはしっくりこない。そこで開発者向けのFlexから習得しようという気になった。

CSのFlashはデザイナ向けのソフトで、グラフィックで際立たせる。一方で、Flexはプログラマ向けで、オブジェクト指向を理解していたり、アルゴリズムに強い人は入りやすく、アプリケーション開発向けである。
しかし、アウトプットはどちらもSWF。やろうと思えば、同じことは実現できる。はずである。。。
というわけで、早速だがFlexを触ることにした。

最近、xampp1.6.8を使い続けていて、エラーが多いと感じる。
詳細は不明だが、とにかくページ遷移のタイミングでApacheエラーなどのアラートが出る。いや、ページは遷移するので、致命的というわけではないが、とにかく不安定な感じは否めない。

一方で、xampp1.7以降でPHP4のサポートが打ち切られたため、PHP4の環境を作れる1.6系は捨てがたい面もある。
世の中、まだPHP4で動いてるシステムも結構あるので。

そんな場合は1.6系と1.7系を共存させちゃおう!
特に難しいことはないです。違うディレクトリにインストールするだけ。
例えば、「C:xampp1.6」と「C:xampp1.7」にそれぞれインストールするなど。

注意することは、同時に起動させないこと。ポートなどが競合するので、使用する場合は、PHP4の場合はxampp1.6、PHP5の場合はxampp1.7というように使い分ける必要がある。

今回は「モーションマスク」。

Photoshopなどでマスクを適応させて、画像などを部分的に隠すような使い方をしますが、まさしくそれと同じ。
Flashならそのマスクにアニメーションを加えることができる。

以下がその例で、星型のマスクを一枚の画像に敷き詰めて、回転しながら拡大という動きを付けている。
作成は大変そうに見えるが、一つのシンボルを作成して、それを多数並べているだけ。




これと同じくして、Flashではアイディア次第では単純な素材でも、ゴージャスにコンテンツを見せることができそう。

ちなみにこの写真は嘉手納基地に飛行機が着陸しようとしている写真です。

それにしても最近はFlashばっかり触っている。がんばろう!

今回は「モーションガイド」。

これまでのムービーでは、オブジェクトを移動させる際に、直線的な動きしか実現できなかった。もしくはコマの間がない、パラパラ漫画のような動き。

しかし、このモーションガイドを利用すれば、複雑な動きが実現できる。
以下の地図の例では矢印を「く」の字に移動させている。また、かどを曲がるのにきちんと前方を意識して回転している。絵では見えないが、えんぴつなど書いた道をなぞって矢印は移動している。





この例では派手な動きはないが、複雑な曲線を描いたとしても、ガイドにそって物体を移動させることができる。

ちなみにこの絵はいつもおせわになっているBAR「ROOTS!」の地図を利用させてもらいました。。。

ローカル環境でGoogle Maps APIを使って開発をしたい場合がります。

しかし、開発を進めようと本番環境のドメインでAPI Keyを取得して、いざローカルで開発をはじめようとすると
「GoogleマップAPIに使用されているキーは他のウェブサイトに登録されています。。。」
というエラーが出て、ローカルではKeyが使えません。

http://code.google.com/intl/ja/apis/maps/signup.html
そんな場合は、別途開発用にローカルのドメインでAPI Keyを取得してしまえばいいです。
つまり、サイトURLを「http://localhost/」など、開発環境のURLを登録してAPI Keyを取得すれば問題ないです。

もちろん、本番へアップする場合には前に取得したKeyに置き換えなければいけません。

ちなみに「Googlemap api key ローカル」などと検索すると、「http://localhost/」で利用できるKeyを公開しているサイトなどを見かけますが、どっから出てきたのでしょうか。確かKeyはアカウント毎に発行されるので、配るのはあまりよろしくないとは思いますが。。。

今回は「フィルタ」機能を試してみた。

任意の写真にぼかしを入れて、文字を表示するだけです。
手持ちの素材に、うまくフィルタをかけることで表現の幅が広がりそうですね。





ムービーの終わりにチカッとフラッシュするように見えますが、なんなんだろ。。。
調査するほどのスキルもなく。。。う~ん。

ちなみに写真は今年の4月に目黒で撮影したものです。
桜はきれいだ。

Monthly Archives

Search