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

2020.05.25.07:00



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

 前回作成したサイコロの六面体の回転体を

 モーフィング処理したParaDraw画像をひと

 つのムービークリップとして利用し、これ

 に様々なParaflaによるJavaScript変換可能

 なスクリプトを施すことにより、色々なアニ

 メーション動画を作成することが出来ます。



 これはParaflaによりテキストを作成

 する際に、その設定のテキストエフェクト

 から「投げ入れる(s)」と云うスクリプト

 をサイコロのムービークリップに採用して

 サイコロの回転処理をアニメ動画に仕立て

 たものです。





投げ入れられるサイコロ









 次に六面体のサイコロの画像を縦回転

 するようモーフィング処理したものです。

 横回転と違った動きをするので、アンカー

 を打つ作業に少し工夫が要ります。

 これで縦横に回転するサイコロのアニメ

 画像が得られます。





縦方向に回転するサイコロ









 次に上記の縦回転する画像のムービー

 クリップにバウンドするスクリプトを加えて

 みました。四隅の壁枠にぶつかって跳ね返る

 モーションもJavaScript変換出来ます。





四隅の壁にバウンドするサイコロ









 最後はこれらのサイコロの回転運動が活躍

 する双六を再現しました。





双六の上で活躍するサイコロ







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

2020.05.18.07:00



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

 さてこれからは六面体を持つサイコロの

 回転に取り掛かります。

 先ず、回転に伴い表面が裏面に隠れる

 際には回転方向の側壁に表面を吸着

 させます。そして回転後吸着した表面を

 一点に集約します。次に再び表面に出現

 する間際に再び集約した一点を側壁上で

 伸長させます。そしてその回転と共に

 表面へと展開させます。

 このように処理することにより不用意に

 サイコロの外枠線が現れたり錯綜すること

 防ぐのです。

 然しながら、このような方法でも一点に

 集約した外枠の塊が現れ、まるで蚊が飛来

 するように出現するのはご愛敬です。





六面体のサイコロの回転







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

2020.05.11.07:00



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

 前回は3面を持つサイコロの右横

 方向への回転でした。

 今回はその左横方向への回転と

 縦方向への回転処理です。

 この縦方向への回転も図形が変形

 するので、少し工夫が必要です。



 このサイコロの各面は正方形なので

 アンカーの数は4隅の4個で十分ですが

 変形を考えると8個以上が必要です。

 ここではその倍の16個で正方形を

 形どっています。このように少ない

 アンカーの数で面を作成すると後の

 変形が楽です。





サイコロの左横方向への回転











サイコロの縦方向への回転







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

2020.05.05.07:00



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

 前回はサイコロの縦横方向の回転で

 云わば2次元の回転運動でした。

 今回はサイコロの斜視図から見た

 3次元の回転処理について考えて

 みます。

 然しながら、サイコロの6面図を

 縦横に回転させるモーフィング処理

 を実現するのにはとても厄介な問題

 があります。それはサイコロの面の

 枠線が回転に伴って重なりあって

 しまうからです。

 これについて色々と試行錯誤して試して

 見たのですが、中々上手く行きません。

 世間はコロナ騒ぎで気が滅入る中あれこれ

 思案しているとたちまち一週間が経ち

 ました。



 一日遅れの投稿ですが、取り敢えず

 サイコロの6面をバラバラにして上面

 と左右の側面の3面のみを使用して

 3次元の回転運動に備えてみました。

 上面の回転と側面の移動と目の数の

 変化が異なるので上手く組み合わせる

 のに苦労しました。





サイコロの3次元の回転







プロフィール

chappychan2

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

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

この人とブロともになる

QRコード
QR