裏掲示板 : 画像の回転詳説(1)
掲示板の一覧を表示
 
前の話題  次の話題  削除  返信を受信トレイに送信 
返信
おすすめ 削除    メッセージ 1 / 6 
投稿者 : キヨキヨ  (元のメッセージ) 投稿日時 : 2005/04/17 8:19
『 画像の回転 』
 
画像の回転を理解するためにはParaFlaの基本を再確認する必要
があります。
逆にParaFlaの基本をよく理解していれば画像回転も難しくありません。
 
↓は500×500の画面に100×50の長方形(緑色)を配置したものです。
 
この場合、長方形中央の中心を(400、100)に位置させていることはすぐに
判るでしょう。
では、長方形の左上角はどこにあるのでしょうか?
これにはちょっと計算が要りますが、(350、75)であることも判るでしょう。
 
これを言い換えると、
  1.長方形の中央(50、25)を基準点とした場合、その基準点を(400、100)に
    位置させれば上のようになる。
  2.長方形の左上( 0、 0)を基準点とした場合、その基準点を(350、 75)に
    位置させれば上のようになる。
ということになります。
 
ParaFlaでは 画像をどこに貼り付けるかと言うことは画像の基準点をどこ
貼り付けるかと言うことなのです。
そして、画像の基準点は自由に変えられるのです。
 
決して難しいことは言っていませんので、上のことをしっかり頭に叩き込んで
おいて下さい。
 
                                            つづく
最初の返信  前へ  2-6 通を表示 : 総返信数 6 通  次へ  最新の返信  返信を削除する 
返信
おすすめ 削除    メッセージ 2 / 6 
投稿者 : キヨキヨ 投稿日時 : 2005/04/17 8:24
では、↓の場合はどうでしょうか?
 
 
簡単ですね。
長方形の中央(50、25)を画面の(100、400)に貼り付ければ良いわけです。
 
このフラッシュを見て下さい。
 
3種類の画像回転のパターンを使ったフラッシュですが、左下クルクル回る
画像回転のイベント内容は↓のようになっています。
 
まず、貼り付ける画像の基準点(中心位置)を画像中央(50,25)
設定しています。
次に、貼り付ける基準点の位置を始めも終わりも変えていません
 
画像中央の位置が変わらず、角度だけが変わっているためクルクル
回るのです。
                                          つづく

返信
おすすめ 削除    メッセージ 3 / 6 
投稿者 : キヨキヨ 投稿日時 : 2005/04/17 8:31
次に左上の1/4回転の円運動はどのようになっているのでしょうか?
 
 
この場合、長方形の基準点を画像中央から下に100下げて
(50、125)に設定し、これを画面の(200、200)に張り付けてやれば、
始めも終りも基準点は(200、200)から全く動かず、角度だけ反時計回り
に90度変わっていることになります。
 
従って、このイベント内容は↓のようにしてやれば良いのです。
 
                                    つづく

返信
おすすめ 削除    メッセージ 4 / 6 
投稿者 : キヨキヨ 投稿日時 : 2005/04/17 8:35
最後に右下の1/4回転の運動です。
 
 
基準点を画像中央にした場合 (300、400)の位置から(400、300)まで
移動しているのは判るでしょう。
ところが、左上の場合と違って画像の姿勢は変わりません。
 
このタイプの円運動にはこのページ「円運動をする」のASを使います。
 
                                         つづく

返信
おすすめ 削除    メッセージ 5 / 6 
投稿者 : キヨキヨ 投稿日時 : 2005/04/17 8:48
1.素材エリアでスプライトを追加します。
 その際、スプライトの設定を↓のようにします。
 ここで基準点設定をした場合、他のところでは(0,0)のままに
 しておきます。
 
2.「スプライトを編集」で緑色長方形をイベントエリアに追加します。
 
3.親イベントエリアに「四角スプライト」を追加します。

4.追加したスプライトの「プロパティ」で↓のように設定します。
 
5.↑のままでは単純な直線運動となりますので直線運動を円弧運動
 に変えるASを挿入します
 「スクリプトを編集」ボタンを押し、「スクリプトエディタ」ウインドウに
 以下の構文をコピペします。
 
  onClipEvent(load){
cx = 300;//中心X座標
cy = 300;//中心Y座標
radius = 100;//半径
speed = -3;//1フレームあたりの回転角度
deg = -270;//初期の角度
}
-
onClipEvent(enterFrame){
radian = deg / 180 * Math.PI;
this._x = radius * Math.cos(radian) + cx;
this._y = radius * Math.sin(radian) + cy;
deg += speed;
}
 
↓にサンプルpflを添付しておきますので参照して下さい。
 回転運動.zip  

返信
おすすめ 削除    メッセージ 6 / 6 
投稿者 : キヨキヨ 投稿日時 : 2005/04/17 8:56
ここまで判れば、このアレンジ も出来るでしょう。
やって見て下さい。
 
ところで、使用する画像が複雑になると こんなふうに簡単には行きません。
しかし、理屈を理解していればむやみに試行錯誤するのではなく、
方向性を持って行えますから 時間も短縮されることになります。
 
Pixiaを利用して座標をさぐるのも一つの方法となるのです。
 

TITLE:50代のカラオケ・動画部屋
DATE:2008/12/22 12:39
URL:http://groups.msn.com/kiyokiyokaraoke/page5.msnw?action=get_message&mview=0&ID_Message=18943&LastModified=4675518532114563898&all_topics=0