2018 – #4

2018 – #4 – メディアデザイン実習J

今週の映像

今週の映像は「ソウルバスと映画タイトルバック」です。
・わが谷は緑なりき 1941
・2001年宇宙の旅 1968
・タクシードライバー 1976
・ブレードランナー 1982
・バックトゥザフューチャー 1985
・バットマン・リターンズ 1992
・ユー・ガット・メール 1998
・マイレージ、マイライフ 2009
・ウォッチメン 2009
・ソウル・バス(ソール・バス/SAUL BASS)作品集
「サイコ」「北北西に進路を取れ」「めまい」「オーシャンと十一人の仲間」「グラン・プリ」「黄金の腕」「カジノ」など

 

みなさんGWはいかがお過ごしでしたか。
いざまとまった休みができたからといって、何も手を付けられない人もいるかもしれません。
そういう人は、それはそれでダラダラするということが、必要な時間だったのでしょう。
無駄にしたなぁ〜などと悔しがる暇があったら、今この瞬間から気持ちを切り替えて明るく楽しく「日常」を大切にしていきましょう!

 

勉強やスキルアップ、物事へのチャレンジは確かに億劫ですが、習慣にしてしまえば楽になります。
まずはゲーム感覚で経験値を貯めてレベルを上げるように、将来の自分の輝かしい姿を想像しつつ、いま目の前のチマチマを楽しんでしまえばいいのです。
習慣を獲得することができれば、何も考えずにできるし、やらないと気持ち悪くなります。
騙されたと思って、なにか習慣を作って下さい。

日課にする・習慣づける

 

前回の残り・続きからです。
思い出してくださいね。

さまざまなUIとアルゴリズム

このセクションからは徐々に、自分で考えながらコーディングしていけるようになっていただきたいと思います。

実際にプログラミングする感覚をつかもう
ここで取り組む内容は以下の4つです。

1:ボタンがクリックされたらダイアログ表示
2:ボタンがクリックされたらオブジェクトが右に移動する
3:ボタンがクリックされたら背景が変わる

 

商用サイト(TVアニメ)のUI実装を再現する

4:「翠星のガルガンティア」を再現する

 

いかがだったでしょうか。

ポイントは、animate() addClass() attr() の3つのメソッド。
animate()の「イージング」は、こちらのプラグインをHTMLで読み込むことで多彩な表現が可能になります。

 

いかがだったでしょうか。

最後の作例はだいたい終わりましたが、2点残していることがあります。
・画像読み込みのタイミングを調整
・アドレスからのスクリプト実行

 

引き続き、ゼロからjQueryでの実装にトライしていきましょう。

では、さらに実践的なUIを実装したり、高度な処理を考えてみたりしましょう。

次に、処理のタイミングとフローについて考えます。
モチーフとして、有名なTVアニメ「ルパン三世」のオープニングタイトルを、モーショングラフィックとしてJS/jQueryで再現します。
 

コメントを残す

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