2007年7月 3日 (火)

リニューアルした。

会社のサイトをリニューアルしました。
サイトはこちら

ベースはFlex2で作ってます。といってもほぼAS3でMXMLはほとんど使ってないです。。
パーツはFlash8で作成して、LocalConnectionで通信してます。通信しまくりです。
ByteArrayの値を変更するやり方も試してみようかなーと思ったけど俺が手を出せる世界じゃないと思ってやめました(笑)
でもややこしいのでそのうち全部FlashCS3に移行したい。

Papervision3Dを使ったシンプルな見せ方を最初に考えていて、それをベースに作り上げた感じです。
サウンドの波形取得や、SkypeAPI、マップ等でもっとやりたいことあったんだけど時間も無かったので軽めになりました。今後時間空いたらおもしろくしていければなーと思ってます。

バグもまだあると思います。。エラーが出たり、表示がおかしくなった場合は見なかったことにしてすぐに更新してください(笑)

●Flex2
Flex2の機能はほとんど使ってないのでまだよく分かってない。
最初のローディングをどうやって変えるのかも分からず。といってもFlex2で作ったのが分かりやすいから変えるつもりなかったので特に調べなかったけど。

●AS3
今年始めにちゃんとAS2を始め、1ヶ月で無理やり卒業してAS3を始めました。
クラスの意味がようやく分かってきた。。自作の簡単なクラスも作って使用してるけど、いい書き方じゃなさそう。
それにしてもnullを参照したり、LocalConnection消してなくて2回目以降動作しなくなったり、Stageがnullで取得できなかったり、いろいろと面倒なことが多かった。。なんとか乗り越えたけど、でもたまにエラー出ちゃってたりして。。
ENTER_FRAMEが複数設定できるのは便利だね。ただやっぱり1つのことをやるのに書くことが多くてだんだん分け分からなくなってくる。

●Papervision3D+Tweener
メインのCubeと「WORKS」のサムネイルはPapervision3DとTweenerで制御してます。
Cubeが前面まできたタイミングでFlash8で作った中身のコンテンツに切り替えてます。
別コンテンツに移動する時にCubeの面に中身をdraw。
WORKSでサムネイル選んで詳細表示になった時は、他のサムネイルとCubeをBitmapDataにdrawして全て非表示にしてます。処理を軽くするため。

●波形取得
最初は背景部分で分かりやすい、音に合わせたアクションを入れてたんだけど、デザインの都合上無くなり、代案も思いつかなかったので結局右下のやつを音に合わせただけになりました。。

●Skype
うちのWEBチームはみんなSkypeを使ってます。
使いすぎなのが良くないと思うんだけど・・・便利なツールも使い方をよく考えないとね。。ってそんな話はいいか。
これ用に1台PCを用意してこれ用のIDのコンタクトリストに全員のIDを追加します。
そのPCでJavaで作ったプログラムを24時間動かし、Skypeの通信を監視してます。
今のところ好きなタイミングでSkypeの状態を見に行けるわけじゃなくて、何か変化が起きたタイミングでSkype内に送られるメッセージを読み取ることができるだけです。
そのタイミングでサーバにデータを送信してXMLファイルを書き換えてます。それをFLASHで読み込んでます。
表示は「オンラインになってからの経過時間」で色が変わっていきます。オフラインはグレー。
なので朝は青が多く、夜になると黄色とか赤になったり、帰ればグレーになります。(なるはず)
動作は100%ではないので、表示されているものは確実なものではないです。
回線が止まってるとJavaのプログラムが止まってしまうので、その時はまた再起動・・・直るかな?
他にMOOD TEXTも取得できるので、MOOD TEXTを変更したらサイトのコメントも変更される機能も近々実装したいなと思ってます。
将来的にはあるSkypeIDにメッセージを送るとサイトが更新できるような仕組みにしたい。
他にもいろいろ遊べるかな。

●Google Maps
Google MapsとFLASHの動画を連動させてみました。詰めきれてないのがバレバレですが・・・動作がちょっと不安定。
映像をフルスクリーンにしましたが、フルスクリーンにするとちょっとのカメラの揺れでも激しくなります。見ているとだんだん酔ってきてしまうので、これはダメかなと思いました。
その時AfterEffectsのスタビライズの機能を知りました。
スタビライズは動画内の指定した部分を追っていき、その変化量をアンカーポイントに反映できます。これを使うことで揺れをある程度抑えることができました。
ただ動画を毎フレーム上下左右に動かすわけなので、上下左右が切れてしまいます。結構大きく切れてしまう箇所もあるので「位置」も変更しながら地道に調整します。ある程度はトリミングしなきゃいけないです。
今回のはざーっとやった感じですが、ちゃんとやればもっとよくなるでしょう。
また、スタビライズをやりやすくするために前に人を歩かせました。これをスタビライズで追っていってます。
六本木駅からは人が多くて、人がかぶってしまうことが多くて難しかったです。
あとはFLASHとMapの連動。これはjavascriptで。javascriptはあんまり分からないので試行錯誤しまくり。すごい危なっかしいスクリプトが出来上がりました。
と、がんばってFLASHと連動させるものを作ってたら、Yahooの地図のAPIがいつのまにかFLASHに対応していて・・・。
そっちのほうがおもしろいことできそうだけど、もうそんな時間も無かったのでまたの機会に。

| | コメント (2) | トラックバック (0)