calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< November 2019 >>

categories

archives

ブレンドを使用して画像の背景(黒)を透明にする

0
    背景が黒の画像素材にブレンド(加算やスクリーン)を適用すると、背景(黒部分)を透明になるようにできます。

    元画像は↓これ


    ブレンドを適用し背景の黒を透明にしたのが↓

    動くデモはこちら
    ソースはこちら

    ブレンドはプロパティで設定できますが、ブレンドを指定できるのはムービークリップだけです。つまり画像素材に直接ブレンドモードは適用できないので
    _菫を貼り付けただけのムービークリップシンボルを作り、
    △修離燹璽咫璽リップシンボルをシーンに貼り付け
    シーンに張り付けたムービークリップシンボルのブレンドを設定する
    という手順で作成します。

    ブレンドは加算にすると光りっぽい演出ができ、単純に黒抜きにしたい場合はスクリーンにします。
    今回のデモなんかだと、ブレンドを減算にしたらブラックホールみたいになりました。

    あと今回使っている素材なんですが、POV-RAYという海外のフリー3DCG作成ソフトを使って作ってます。
    日本語の解説ページも結構あるし、太陽系の星とか星雲なんかのCGは簡単にいろいろ作れて楽しいです。

    塗りカラーをアルファでグラデーションして光を表現する

    0
      今回も光の表現についてまとめたいと思います。
      今回はブラーではなくアルファを使った表現方法です。
      ブラーを使ってやる方法と比べて実行時の動きが軽い様です。


      デモはこちら
      ソースはこちら

      形状が円で白い光の場合、手順としては、
      ・楕円ツールを使って円を描く。そのときの塗りカラーを円のグラデーションを選ぶ。
      ・カラータブで段階的に白→黒となっている黒の部分を白にし、アルファを0%にする。
      たったこれだけです。
      あとは適宜グラデーションポイントを増やし、アルファを調整する位です。


      一応注意点としては
      ・カラーの変更は作成した絵を選択した状態で行う。
      ・右端にあるグラデーションポイントは、右端にあるままでは色やアルファが変更されないようなので、少し左にドラッグしてから設定を変更し、右端へドラッグして戻す。
      といったところです。

      形が丸か、線のものだったら、このアルファを使った方法がお勧めです。
      形が複雑なものであれば、ブラーを使った方法、という感じで使い分けるといいんではいでしょうか。

      追記)MCの拡大縮小をすると、ブラーを使った場合見た目がおかしくなります。ブラーの度合自体をフレーム毎に動的に変えるのは負荷が相当高いのでお勧めしません。光を拡大・縮小したい場合は、アルファを使った方法がお勧めです。

      BlurFilterを使って光を表現する

      0
        今回は3Dネタではなく、MovieClipにBlurFilterをかけて光を表現するというお題です。


        デモはこちら
        ソースはこちら

        後光は黄色の星のMovieClip、光の球本体は白の星のMovieClipです。
        それぞれにBlurFilter(ぼやかし)をかけて、光っぽくします。

        左がブラーをかける前、右がブラーをかけた後

        ブラーを掛けるには、[フィルタ]のウィンドウでぼかし設定します。

        MCを選択→フィルタウィンドウの「+」ボタンを押す→「ぼかし」を選択→ぼかしの度合を変更
        星の例では、黄色のぼかしを60、白のぼかしを15に設定した。

        2つの星それぞれに対して、ブラーを掛ける度合、MCの大きさ、色、の3つを調整しますと、光り方を色々調整できると思います。

        技術ネタ:MP3ループ再生時の無音対策

        0
          BGMをループ再生する際、サウンドデータを読み込む方法としては以下の2通りがあり、それぞれにメリット・デメリットがあります。

          方法
          予めライブラリにサウンドファイルを読み込んで使用する。
          メリット:MP3以外のサウンドファイル形式にも対応できる。
          デメリット:パブリッシュしたswfのファイルサイズが大きくなる。

          方法
          外部ファイルを、プログラムから動的に読み込んで使用する。
          メリット:パブリッシュ時のswfのファイルサイズが小さい。
          デメリット:MP3しか対応していない。

          ちなみに当ブログ(ロリポブログ)は、アップロードできるflashファイルのサイズ制限が100KB以下なので、上記△諒法を採用しています。ここまでの説明ですと、上記△任いご兇犬しますが、上記△世肇襦璽弸得源にはちょっとした問題が発生します。MP3は最初に一瞬無音が入ってしまう事から、ループ再生した場合にリズムがちょっと突っ掛かる感じがしてしまうのです。

          そこで、MP3をBGMとしてループ再生する場合は、ループの開始時間を一瞬遅らせてスタートさせます。最初の部分が一瞬切れて再生されるのですが、リズムが突っ掛かる感じよりは全然良くなると思います。

          ※サウンド再生のコマンドは、第一引数で開始位置(ミリ秒)を指定できます。詳しいコマンドの説明については、Adobeのリファレンスガイドをご覧下さい。


          技術ネタ:回転する立方体の作り方

          0
            立方体を回転させるMovieClipをスクリプトを一切書かずにモーショントゥイーンだけで作成してみました。(手順はflashをご覧ください)今回も3Dアドオン等は一切使っていません。難しい事は特にしていませんが、ポイントとしては、

            ・正方形を回転させたMovieClipを作り、そのMovieClipを自由変形で潰すと、3D的な回転に見える。(X軸回転)
            ・潰した状態のMovieClipを更に入れ子モーションで回転させると、疑似3D回転している様に見える(Y軸回転)

            特に上記のX軸回転のテクニックは他にも応用が効きそうです。
            ちなみにZ軸回転させるには、更に一工夫必要なのでそこまでは追求してませんが、とりあえずXY軸の回転だけでもそれっぽく見えると思います。



            ※手順では分りやすくする為に沢山のMovieClipを作成していますが、慣れた方であればより少ないMovieClipで作成できると思います。

            技術ネタ:雲の作り方

            0
              雲のぼやけた感じを表現するには、雲のMCにブラー効果を設定します。
              ブラー効果を設定するには、下記スクリプトを記述します。AS2とAS3で共通だと思います。

              import flash.filters.BlurFilter;

              var bf:BlurFilter = new BlurFilter();
              bf.blurX = 50; //ブラー効果の横の度合
              bf.blurY = 25; //ブラー効果の縦の度合

              cloud.filters = [bf]; //cloudは雲のMC名

              blurの度合や雲MCの形・色などによって、よりリアルに表現できると思います。

              また、雲以外にもブラーを使うことにより
              ・スピード感(速さによって横ブラーの度合を変える)
              ・遠近感(近くははっきり、遠くはぼんやり)
              といった表現が可能です。


              技術ネタ:走る人の作り方

              0
                パラパラ漫画的なアニメーションではなく、モーショントゥイーンで滑らかな動きをさせて「走る人」を作る方法です。(flashをご覧ください。)もちろん同じ手順でモーションを変えれば歩く人も作れますし、動物などでも表現できます。大まかにいうと、膝下と太もも(二の腕と肘から下)を2重の入れ子モーションにして、それぞれを同じ長さの周期で振り子の動きをさせるというものです。

                ポイントは、

                ”┣爾搬世發癲米鵑力咾班から下)の周期を1/4周ずらします。これによりより滑らかな自然な感じの動きを得ることができます。

                flashの手順では紹介していませんが、ActionScriptで動きの周期をずらすことができます。これによって、腕と足1本づつ作れば、もう片方は作る必要がありません。

                周期のタイミングを調整したり、体自体にモーションを追加すれば、躍動感なども出てくるのではないでしょうか。


                技術ネタ:LoadingBarの作り方

                0
                  最初に表示させるLoading Barの作り方です。(flashをご覧ください。)
                  オーソドックスな方法なんですが、ちょっと注意が必要なのはAS2とAS3で、ロード済みバイト数とトータルバイト数を取得するメソッドの記述が違うところです。

                  AS2.0の場合
                  Math.floor(this.getBytesLoaded() / this.getBytesTotal() * 100);

                  AS3.0の場合
                  Math.floor(this.loaderInfo.bytesLoaded / this.loaderInfo.bytesTotal * 100);

                  ローディングバーだけでなくAS3には色々悩まされましたが、今となっては逆にAS2の記述に違和感を覚える今日この頃です。


                  ※ツッコミ大歓迎です。ご指摘・ご提案等あればお知らせください。

                  技術ネタ:自転する惑星の作り方

                  0
                    今回は3Dツールなどは一切使わずに、自転して見える惑星の作り方です(flashをご覧ください)。この「見える」というのがポイントで、実際は単に展開図をスクロールさせて見せるだけなのですが、半透明の影を付ける事で一見球体が回転しているかのような感じがします。

                    難しい事はしてないのですが、一応ポイントとしては、
                    ・惑星の展開図2つをつなげてスクロールさせ、永久にスクロールしている様に見せる。
                    ・影が付いた球体を、半透明(アルファ50〜70%前後)にし、球体っぽく見せる。
                    ・レイヤーにマスクを使って、球体の部分だけを表示させる。
                    といったところでしょうか。

                    またマスクはパフォーマンスが重くなるそうですが、これについては代替えの方法があるようなので、そちらの方法に置き換えてやってみてもいいかもしれません。


                    ※ツッコミ大歓迎です。ご指摘・ご提案等あればお知らせください。

                    技術ネタ:衛星の作り方

                    0
                      今回は、「惑星の周りを回る衛星」の作り方についてまとめてみました。(FLASHをご覧ください) 課題としては、衛星が手前を回る時は惑星の前に、奥を回る時は惑星の後ろになるという事です。レイヤーの順番を変えたり、表示の前面・背面をスクリプトで動的に変える事を最初は考えていたのですが、少しネットで調べたところ、いろいろな要素が絡み合うと若干面倒臭そうだったので、スクリプトを書かなくても比較的簡単に実現できる方法を考えました。

                      簡単に説明すると、前面用の衛星(惑星よりも上位のレイヤーに配置)と、背面用の衛星(惑星よりも下位のレイヤーに配置)の2つを、全く同じモーション・同じ位置で交互に見せるという手法です。

                      作成する際のポイントとしては、
                      ・前面用惑星と背面用惑星は、元は同じモノからコピーして作る(動きがずれないように)
                      ・前面用惑星と背面用惑星は、表示の入れ替えは一番右端と一番左端で、それぞれ1フレームだけ両方表示するようにする(惑星の表示が途切れないようにする)
                      といったところでしょうか。

                      この手法を使えば、衛星以外にも色々応用ができます。今回は分り易くする為に、MovieClipを複数作成して実現していますが、慣れた方であれば2つ位のMovieClipだけでもできると思います。


                      ※ツッコミ大歓迎です。ご指摘・ご提案等あればお知らせください。

                      << | 2/2PAGES |