投稿者: andesusanmyaku

Flash CS4に魅力を感じる

自宅のPCモニタがワイドのため、デフォルトのレイアウトだと狭く感じたのでちょっとだけカスタマイズ。 Adobe CS4シリーズ日本語版も発売され、ブログでもレビューが紹介されています。色々な書籍やサイトを見て、今回の一押しはFlash CS4の模様。個人的に気になった機能を挙げてみました。
  • アニメーション機能がAfter effectsに近く…今までのようにシンボルを作って配置してキーフレーム売ってトゥイーン設定して…という煩わしい作業から解放され、始点と終点を決めてその中で拡大・縮小・移動などアニメーションをより直感的にいじることが出来るようになっているようです。
  • 多関節アニメーションが作りやすく…3DCGで使われている「インバースキネマティクス」という、動かしたい箇所に「ボーン」と呼ばれる間接を設置することで人間の腕や足などの多関節アニメーションが簡単に出来るようになっているようです。こちらも今まではFlash用多関節モデルを理解するのに時間がかかっていたので、非常にうれしい機能です。
他にも多くの機能強化がされているようですが、体験版をいじる暇が無いのでこのくらいで。そのかわりFlash CS4をかなり詳しくレビューしているマイコミジャーナルを紹介しておきます。

LavaLampまとめ

仕事でLavaLampを導入しました。 簡単に設置できず試行錯誤したので、今後LavaLampを使ってみたい人向けの参考にまとめを載せておきます。 LavaLampはjQuery(Javascript)を使用したリッチメニューです。グローバルナビゲーションを格好良く見せることができます。 詳細はコチラのページ(英語)に書かれています。

導入方法

導入方法は2種類あります。ただ、パッケージとして提供されているものについては環境によりクリックできない可能性があり、完全解析するより個別導入した方が早そうなので個別導入方法で説明します。
  • 上記ページのStep 3: The Javascript項目下にあるdownload jQuery here, Easing plugin here, and the LavaLamp plugin here.から3つともDLします。 ※jQueryはバージョンにより動作制限があるかも知れません。私が導入した時のバージョンはjQuery1.2.6です。
  • 各ファイルを格納場所(自分で決めて良い)に格納し、Step 3: The Javascript項目を参考に呼び出します。
    < View plain text >
    HTML

    1. <script type="text/javascript" src="path/to/jquery.js"></script>
    2. <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
    3. <!-- Optional -->
    4. <script type="text/javascript" src="path/to/jquery.easing.js"></script>
    5. <script type="text/javascript">
    6.     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
    7. </script>
  • CSSはUpdate項目にあるDownload the zip fileをDL、解凍してlavalamp_test.cssの必要な箇所を取り出して、JSファイル同様に呼び出します。
    < View plain text >
    HTML

    1. <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="all">
  • HTMLにリストタグでメニューを記述します。
    < View plain text >
    HTML

    1. <ul class="lavaLamp">
    2.             <li><a href="#">Home</a></li>
    3.             <li><a href="#">Plant a tree</a></li>
    4.             <li><a href="#">Travel</a></li>
    5.             <li><a href="#">Ride an elephant</a></li>
    6.         </ul>
  • ※初期位置を決めるにはリストタグにクラスをセットします。
    < View plain text >
    HTML

    1. <li class="current">