フラッシュの課題No.68(スクリプトの勉強 Study1)

2020.06.29.07:00



 スクリプトの勉強の第一弾です。

 先日まここまさんからご質問がありました。

 それはフラッシュのマスク処理がJavaScript

 変換出来ないかと云うものです。

 そこでこれからはスクリプトの処理について

 考えて行きます。本日は先ず初めにマスクの

 掛かった画像処理についてお話します。



 ParaFlaによるFLASH制作に役立つサンプル

 ファイルを収めたサイト(サンプルpfl.-Para!

 Wiki)があります。

 そこで先ず手始めにここに掲載されている

 マスク処理のサンプルを利用してJavaScript

 変換の出来るフラッシュの制作を手掛けました。



 下欄の枠内に表示されたフラッシュ画像

 は全てJavaScrip変換可能なswfファイルです。

 上欄の二つの画像は、テキスト文によるマスク

 処理と八の字運動するハートによるマスク画像

 です。

 中欄の二つの画像はブレンド処理を加えたもの

 でキャラクターの動きも取り入れました。

 下欄の二つの画像は、正確にはJavaScrip変換

 出来ていません。本来はゆっくりとしたマウス

 の動きで陰に隠れているキャラクターを描く

 処なのですが、それが上手く行きません。

 仕方がないのて一気にキャラクターを出現

 させる仕様となりました。





テキストによるマスク処理



ハートによるマスク処理











キャラの動くマスク処理



ブレンドによるマスク処理











マウスによるマスク描画



マウスによるマスク描画









フラッシュの課題No.67改訂版(立方体の回転 Lesson9)

2020.06.22.07:00



 立方体の回転の第九弾です。

 今回はその応用編の第二弾です。

 前回に続いてパノラマ画像と共に立方体の回転

 運動をご覧下さい。

 さてこのパノラマ画像が映す場所は一体何処で

 しょう?

 皆さんは行かれたことはありますか?



 さて今回は前回の立方体の回転運動に対して

 スクリプトなどによるアニメ処理を施しました。

 先ず縦横回転の立方体についてはテキストエフェ

 クトにも採用されているスクリプトを採用しま

 した。次に横回転の立方体についてはスプライト

 のイベントのプロパティ画面のガイド指定で移動

 の軌跡を描画しました。



 ここで急遽改訂版を投稿する羽目に至り

 ました。

 次に縦回転の立方体についてduplicateMovieClip

 によるスプライト(MovieClip)の複製の為の

 スクリプトでアニメ処理を指定していました。

 然しながら、InternetExplorerによるブラウザ

 のページ表示に問題が発生してスクリプトが

 正常に機能しませんでした。

 Microsoft EdgeやGoogle ChromeやFireFox等の

 ブラウザではなんとかスクリプト制御出来て

 表示出来るのですが、この処理が重すぎる

 のでしょうか?

 そこで、InternetExplorer以外のブラウザ

 でご覧になられる方の為に、以下のリンク

 先を示しておきます。

   https://blog-imgs-135.fc2.com/c/h/a/chappychan2/panorama_script.html

 また、改定前の原画のswfファイルの

 保存先は以下のURL通りです。

  https://blog-imgs-135.fc2.com/c/h/a/chappychan2/sai6.swf

 以上、宜しくお願い致します。





パノラマ画像と立方体の回転のアニメ画像







フラッシュの課題No.66(立方体の回転 Lesson8)

2020.06.15.07:00



 立方体の回転の第八弾です。

 今回はその応用編の第一弾です。

 パノラマ画像と共に立方体の縦、横、縦横の回転

 をご覧下さい。右向き、左向きの指画像にマウス

 を載せるとパノラマ画像が動きます。

 ここの橋はもう通行出来るようになったのかしら?



 さてParaFlaではスプライトで描画された画像

 などの素材をイベントリストに載せたものがFlash

 で云う処のmovieclip(ムービークリップ)に当たり

 ます。従ってParaFlaではmovieclipと云う概念は

 ありません。

 またこのmovieclipと云われる素材そのものには

 JavaScript変換出来ないものでは決してありま

 せん。ParaFlaでは画像などの素材をアニメ処理

 する事等の為に、フレームアクション、ボタン

 アクション、クリップアクションの3つのイベント

 処理があります。

 ここに使用されているスクリプトにActionScript

 があります。このActionScriptは現在Ver.3.0と

 なっています。

 また、これに似たスクリプト言語にJavaScript

 があります。こちらの方は現在Ver.1.7となって

 いるようです。

 このうちParaFlaで採用されているのいくつかの

 ActionScriptの文法の一部が今の処上手くJava

 Scriptへの対応が取れていないだけなのです。

 その点誤解されないようにして下さい。





パノラマ画像と立方体の回転







フラッシュの課題No.65(立方体の回転 Lesson7)

2020.06.08.07:00



 立方体の回転の第七弾です。

 前回はキャラクター画像を持つサイコロの面を

 個別に回転処理するスプライトをParaFlaにより

 サイコロに組み立てました。

 然し、今回は再び6面全てにParaDrawによるモー

 フィング処理したキャラ画像を配置してサイコロ

 の回転制御をParaFlaにより行いました。

 その際各キャラ画像を構成する部品点数がとても

 多くて、モーフィング用の画像を描画するのに

 処理が困難でしたが、各キャラ画像をグループ化

 して一つの部品として扱えるように配置したので

 比較的楽に制作する事が出来ました。





6面体の画像を持つサイコロの縦回転











6面体の画像を持つサイコロの横回転









 このように6面体の画像を持つサイコロの

 縦回転と横回転とをそれぞれ作成する事により

 これらを統合して縦横に回転するサイコロを

 仕上げる事が出来ます。





6面体の画像を持つサイコロの縦横回転







フラッシュの課題No.64(立方体の回転 Lesson6)

2020.06.01.07:00



 立方体の回転の第六弾です。

 今回はこれまでのサイコロに代って面の数を

 キャラクター画像に変えてみました。これは以前

 から作成していたブロ友さん達のマスコット画像

 をParaDrawで描画していたものです。

 但し、これらの画像を仕上げるのに部品点数が

 多くて、到底六面体のサイコロの中には収容出来

 ませんでした。止む無く個別の面にそれぞれの

 キャラクター画像を配置して、ParaFlaにより

 サイコロに組み立てました。





キャラクターの面を持つサイコロ







プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR