川北ゆうさんのサイトを更新しました。

2013.03.06
ゆうさんの作品

Yu Kawakita
Yu Kawakita Website

トップページのFlashに少しだけインタラクティブ性を持たせ、
中ページの作品追加などの更新を少々。

トップページでは、
ユーザーのマウスが動くたびに水がゆらぐような表現にした。
水や絵具を使って流動的に変化する様を定着させるという彼女の作品から、
動きのイメージを膨らませてFlash AS3.0で実装。

ActionScript3.0はあまり触ったことがなかったので、
クラスや、ActionScript2.0との記述方法の違いでとまどった。
数日考えながら作業して、知恵熱と戦いながらなんとか形に。
※いつもプログラムを考えていると夕方ぐらいに頭が痛くなる。

という訳で忘れないうちに復習。
特に一番頭が痛くなったクラスについて。

■クラスとは?
「何かを作るための工程をまとめたもの」

例えるなら、
デザイナーが構成を見て、デザインして、それをクライアントに提出する。
という作業を工程として考えた場合、

 ①指示書渡される
 ②デザイン素材集める
 ③デザインする
 ④できあがったデザインをクライアントに提出

という工程になる。としよう。
この一式をまとめて、「クラス」にする場合、
ActionScript3.0では、

class デザイナー
{
  function デザイン作業(①指示書渡される):④できあがったデザインをクライアントに提出
  {
    ②デザイン素材集める
    ③デザインする
  }
}

という書き方になる。
ざっくりとデザイナークラスができた。

これで①指示書渡される の部分で渡す指示書の内容が変われば、
④できあがったデザインをクライアントに提出 の出来上がったデザインも変わってくるイメージ。

で、このクラスを作ったら後は、指示書を書いてデザイナーを呼んで渡すだけ。

じゃぁ、いつ渡すか・・・?

・・・

・・

今でしょ!!

という訳で、デザイナーを呼び出す時は、
ユーザーが何かしらのアクション(イベント)することで呼び出すことができる。

マウスをクリックした時、マウスをのせた時、マウスを動かした時、マウスを離した時、
マウスをドラッグした時、マウスのくるくるをまわした時、キーボードの何かを押した時、
ウィンドウをスクロールしたとき、ページを開いた時、マウスが0.1秒間に100px動いた時、
ページを開いてから0.7秒後、ウィンドウのスクロールバーを下に525px、右に35px動かした時、
↓ボタン3秒タメの後↑ボタンと同時にAボタン、上司がニッコリ笑って手まねきしてきた時・・・

などなど、ほとんどの場合のイベントが用意されているので、ありとあらゆるタイミングで
「今でしょ!」とデザイナーを呼び出して指示書を渡すことができる。

書いていてなんだけど、深夜0:00に「今でしょ! 明日の朝までにあげといて」
指示書を渡すのも可能だな、これは。デザイナーに例えたせいか、ピンときすぎてしまうのはなぜだろう。

このクラスの考え方はiPhoneアプリ制作で使われている言語Objective-Cでも使うので、
iPhoneアプリ制作の盛んな昨今、覚えておいて損はない。
まぁ、プログラム部分はそんな感じ。さわりだけをざっと説明。

表現に関しての話に戻るが、
本当は水の揺らぐ表現は、本当はiPadなどのタッチ操作ができる端末で指で触ってもらって、
擬似的に水に触れている感覚が味わえたらもっと面白いのかもなぁ。
Webカメラやキネクトを使った動体検知でインスタレーションとして表現したり。

こうやってデザイン以外の色々な分野にも手を出して楽しみながら思うのは、
Webの仕事は技術の進歩やアイディアで日々できることが増えていく仕事だということ。

特に技術の進歩でできることが一気に広がっていく感覚はすごい。
さらに自分の手で何かを作り出す、という作り出すものの幅が広い。

これからもどんどん進歩していくのだろう。
できることが増えるのはワクワクする。

※写真は東京オフィスに飾ってある、ゆうさんの作品。

このエントリーをはてなブックマークに追加 シェア ツイート


人気記事





「仕事」カテゴリの他の記事




« »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメント( 2件 )

2013/03/11 10:46 AM  |  takeharu

>ふるいちさん コメント、ありがとうございます。 シンプルなものに少しだけ楽しいエッセンスを加えてどう魅せるのか、考えるのも作るのも楽しんでいます!

2013/03/09 10:51 AM  |  ふるいち

斬新なデザイン。 好きですこう言う感じ、参考にさせて頂きます。