2009年11月23日

マウスのアクション

ボタンにマウスが乗った時のアクションを見てみましょう。



四角を描画し、ボタンに変更

アクション設定で

on(press){
  txt1var="*** Press ***";//マウスを押されています
}
on(release){
  txt1var="";//マウスを放しました
}
on(rollover){
  txt1var=">> Mouse On <<";//マウスが乗りました
}
on(rollout){
  txt1var="--- Mouse out ---";//マウスが出ました
}


ボタンの上でマウス操作した時の動作を確認してみましょう。

どのコマンドで、どの操作をしているかわかりますか?


posted by hirano at 01:31| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年11月20日

アクションスクリプトの設定

as.jpgフラッシュ画像でアクションスクリプトを設定する場所は、フレームと図形や文字などのオブジェクトです。

図形にアクションスクリプトを設定するには、図形をボタンに設定します。

図形のプロパティを開き、Behaviorのところで、

Is a buttonのnoをyesに変更します。

するとプロパティの内容が変化してBehaviorにActionsが追加されます。

Actionsのnoneと表示されている部分をクリックすると、その右側に...のボタンが表示されます。

このボタンをクリックして、Button Actions and Soundsの中から+をクリックし、Action Scriptを選択します。

これで、アクションスクリプトエディターが開きます。

ボタンにアクションスクリプトを設定すると、ボタンに関連した動作を宣言することが出来ます。

  • ボタンにマウスが乗ったとき

  • ボタンからマウスが離れたとき

  • ボタン上にマウスが居るとき

  • ボタンをクリックしたとき

  • ボタンが現れたとき

  • その他


例えば画像の中で「やり直し」みたいなボタンを作った場合には、ボタンのアクションスクリプトとして設定します。

posted by hirano at 19:21| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年11月04日

KoolMovesをインストールしよう。

安上がりにフラッシュムービーを作ってしまうソフト。KoolMovesをインストールしてみましょう。

kmdown.jpgまず、http://www.koolmoves.com/download.htmlにアクセスし、KoolMovesのSite 1かSite 2 どちらでも結構です。

クリックします。

11月4日現在、最新版7.2.2のデモ版がアップされています。

kmsetup.exeと言うファイルをダウンロードします。

ダウンロードが完了したら、ダブルクリックで実行しましょう。

km01.jpgNextをクリックするとインストールが開始します。

その次に出てくる画面は、ソフトウエア使用許諾書です。

これに許諾しないと、ソフトウエアを使用することが出来ません。

I accept the agreementにチェックを入れ、Nextを押します。

その次は、インストールするフォルダー指定ですので、そのままNextを押します。

標準では、

C:\Program Files\KoolMoves Demo

にインストールします。

次は、スタートメニューのどこに設定しますか?と言うことで、

KoolMoves Demo

が表示されています。

これもそのままNextをクリックします。

次は、デスクトップにショートカットを作りますか?と言うことで、チェックが入っています。

チェックが入っていると、デスクトップにショートカットが追加されます。
km02.jpgこのまま、Nextボタンを押しましょう。

インストール方法の再確認です。

ここで、Installボタンを押します。

インストールが開始されます。

Finishボタンで完了です。

Finishを押すと、デモ版のKoolMovesが起動します。

最初に出ている画面は、広告です。これをCloseしないと、次に進むことが出来ません。

デモ版でも、フラッシュ画像を作ることが出来ます。

但し背景に、薄くKMの表示が出ます。

また、KoolMovesの形式で保存することが出来ないので、途中まで作ったファイルを保存してまた修正するということは出来ません。

勉強の程度なら充分使えますが、購入する場合には、$49.00 USDですので、今のレートだと5000円弱です。
posted by hirano at 19:00| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月30日

ダイナミックテキストの利用

プログラムから書き換える文字列やデータはダイナミックテキストを使用します。 日数計算プログラムの表示で使用していますが、プログラムの中で実際に表示している部分は、txt1.textと言う部分。

KoolMovesでダイナミックテキストを貼り付けるとダイナミックテキストの名前は、txt1とかtxt2つまり、最初にtxtでその後通しナンバーです。

つまり上記は、txt1と言うダイナミックテキストの文字です。

ここに計算結果のbufを表示する場合、txt1.text=buf;と書きます。

プログラムの中での=は代入。右のものを左に代入するという意味です。

数学で言う「右と左は同じ」と表現したい場合は、=を二つつなげて==と書きます。

この方式で表示している部分は今日の日付表示部分だけ。

その他の表示と書いてある部分は、txt2var=bufとか、event=dayなど。

これは、ダイナミックテキストのプロパティーを表示したときに、Variable nameのところに出ている文字列です。

使い方としては、ダイナミックテキストの名前を使用したtxt1.textはこの中に入っている文字は文字列です。文字として使用する場合は、+で連結になります。

足し算をする場合は、Number(txt1.text)+Number(txt2.text)と言うようにする必要があります。

それに対し、Variable nameに入れたデータは、もし数字であるなら、直接足し算が出来ます。

よくプログラムを見比べて見ましょう。

ps.
携帯からアップしてみました。
携帯からのアップだと、改行がうまく使えません。どうしても読みにくくなります。
後から修正を行いました。
posted by hirano at 12:53| 埼玉 ☁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月29日

何度もある処理は関数にしよう

繰り返して行う処理は、関数としてまとめると便利です。

関数のキーワードは、function

但し戻り値は持たないようです。

呼び出すときに指定する初期値だけ入力して呼び出します。

もし戻り値が必要ならば、専用の変数を作っておいて、そこに入れるようにします。

例題として、アクションスクリプトを使って目標の日までの日数を計算するソフトを作ってみました。

行っていることは、先日のダウンカウンターと同じことです。

ダウンカウンターでは結果の数字を見て、結果が0になったら、表示を変えるだけです。

ところで、日数計算、フラッシュでは日数データがエクセルと違い日数にはなっていません。だから単純に引き算と言うわけには行きません。

そこで、グレゴリオ暦を使い、一旦1900年1月1日からの日数を計算し引き算を行っています。

つまり、目標の日付のグレゴリオ日数と、今日のグレゴリオ日数が必要なわけです。

これは入力の日付が違うだけで処理の仕方は同じになりますからこの処理をまとめて関数とします。

また、フラッシュでの日付の表示は2009/10/29のような表示ではなくThu Oct 29といった表示になっています。

そこでこれも通常の日本式表示になるように関数としました。

eventの欄の文字列が変更できますので、適当な日付を入力して、calcボタンを押してください。

日付の計算を行います。検算が出来るようにExcelで日付を入力し、表示形式を標準にしたときの値で確認できるようにしました。

現在はクリスマスの日までの日付にしてあります。(イブまでのほうが良かった?)



// 最初に実行する処理
    day=0; // 関数戻り値用バッファ
    buf=""; // 関数戻り値用バッファ

    todayObj = new Date();     // 今日の日付設定
    dispDate(todayObj);        // 日付表示用文字列作成
    txt1.text=buf;            // 今日の日付表示
    datevalue(todayObj);    // 1900年1月1日からの日数計算
    today=day;                 // 日数表示
    
    eventDay = new Date( 2009,11,25); // 目標の日付設定(クリスマス;月は-1で表示)
    
    dispDate(eventDay);    // 日付表示用文字列作成
    txt2var=buf;    // eventに設定の日付を表示します
    
    datevalue(eventDay);    // 1900年1月1日からの日数計算
    event=day;                // 日数の表示
    txt5var=event-today;    // 今日からの日数表示

//----------------------------------
btn2.onRelease = function() {    // ボタンを押したときの処理
    buf=txt2var;// eventに入れた文字列を日付に変換します。
    i=buf.indexOf("/");    // 最初のスラッシュの位置を調べます
    j=buf.lastIndexOf("/");    // 最後のスラッシュの位置を調べます。
    
    d=Number(buf.substr(j+1));            //文字列から日付を抽出
    m=Number(buf.substr(i+1,j-i-1))-1;    //文字列からつきを抽出
    y=Number(buf.substr(0,i));            //文字列から西暦を抽出
    
    day = new Date(y,m,d);    // 入力した文字列を日付データに変換
    
    datevalue(day);            // 1900年1月1日からの日数計算
    event=day;                // 日数の表示
    txt5var=event-today;    // 今日からの日数表示
}

//----------------------------------
function dispDate(day1){    // yyyy/mm/dd の表示に
    buf = (day1.getYear()+1900) +"/" + (day1.getMonth()+1)+"/" +day1.getDate();
}

//-----------------------------------
function datevalue(day1){    // グレゴリオ暦を使用し日数の計算
    yy=day1.getYear()+1900;
    mm=day1.getMonth()+1;
    dd=day1.getDate();
    
    // 月が1月または2月の場合前年の13月・14月として扱う
    if(mm<=2){
        temp_y=yy-1;
        temp_m=mm+12;
    } else {
        temp_y=yy;
        temp_m=mm;
    }
    
    // 経過年を日に換算:とりあえず全て平年として計算
    year_d=365 * (temp_y-1);
    
    //うるう年の回数を算出
    leap_y=Math.floor(temp_y/4) - Math.floor(temp_y/100) + Math.floor(temp_y/400);
    
    // 1月1日からの日数
    adj_d=Math.floor((temp_m*979-1033)/32);
    
    //1年1月1日からの日数 (1900/1/1〜1900/2/28は日数が違います。Excelは1900/2/29が有る)
    day=year_d + leap_y + adj_d + dd - 1;
    day=day-693593;            // 結果をMS-Excel にあわせてあります
}
posted by hirano at 20:00| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月26日

フラッシュでテストプログラムを作る

一般のプログラム言語で、最初に行うテストプログラムは「Hello world!」です。

プログラムを実行すると、指定の画面にHello World!と表示するソフトです。

たとえばC言語の入門書でよく見るプログラムは

#include
int main (void){
  printf("Hello, World!\n");
  return 0;
}

プログラム言語を目指した人は誰でも一度は目にします。

これは標準出力、通常はコンソール出力に対し、Hello World!と出力するための最低限のプログラムです

フラッシュで最低限のプログラムを作るには、どうしたらよいのでしょう。

標準出力というのがありませんので、ムービーエリアを使います。

最初はムービーエリアにDynamic Textを使うとよいと思います。

マウスの動作、どこで具体的にマウスをプレスするとどういう動作をするかということをテストするのです。

テスト用のログラムです。

ちょっと複雑ですが、ムービークリップとボタンの動作をテストしています。

アクティブスクリプトからみると、ムービークリップとボタン同じようなイベントとしてスクリプトの中に取り込むことができます。

counter = 1;  // 画面を表示したとき最初に1をセットします。

myHit.onPress = function(){
  drawPen();  // MovieClipをプレスするとカウントをスタートします。
}

myHit.onRelease = function(){
  _root.onEnterFrame = null;// MovieClip内でマウスを放すとカウンターが停止します。
}

myHit.onReleaseOutside = function() {
  _root.onEnterFrame = null;// マウスをプレスしたままMovieClipからマウスが外に出たときこれがないとカウントが停止しません
}

function drawPen(){
  _root.onEnterFrame = function(){
    counter++;// マウスをプレスしている間、カウントアップを続けます。
  }
}

eraser.onRelease = function(){
  counter=1;//Eraserボタンをプレスすると、カウンターを1にします。
}

ムービーエリアに、長方形を二つ、一つをMovieClipにもう一つをボタンに変換しました。
MovieClipに変換した方をRenameでmyHitに変更。
Buttonに変換した方をRenameでeraserに変更しました。
さらに動作をみるために、両方の図形に重ならない部分に、ダイナミックテキストを置き、ダイナミックテキストのVariable nameをcounterに変更しました。

この状態で、フレーム1のアクションスクリプトとして上記プログラムを設定して動作を確認します。

ムービークリップを押している間数字がカウントアップしていきマウスを放すとカウントが停止。

Eraserボタンを押すと、カウントが1に戻る様子を見ることができます。

コマンドによって、どのタイミングでカウント数が変化し始めどのタイミングで1になるか。確認しましょう。

また、行の途中に、"//" スラッシュが連続して二つつながっている部分があります。

これはコメントです。1行の中にこの文字があると、それ以降の部分はコメントとみなされ無視されます。

プログラムの説明などを入れる場合、スラッシュを連続して二つ付け、そのあとに書き込みます。行が変わった場合には、スラッシュ二つをつけなおします。

KoolMovesのスクリプトエディターの中では、コメント部分は文字が薄くなりますので見分けがつくと思います。

プログラムの動作をテストするには、テストしたいコマンドの手前にスラッシュを二つつけてコメント化してしまいます。これをコメントアウトといいますが、こうすることによりその動作が止まりコメントアウトする前とした後での動作の違いを確認することができます。

プログラムを書いた場合には、細かくコメントを書いておき後からわかるようにするとしばらくして見直した場合でも簡単に思い出せるようになります。
posted by hirano at 00:38| 埼玉 ☁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月23日

ムービークリップを使って

KoolMovesでの作品、つまりフラッシュ画像の最大の特徴は
Movie Clipでは無いだろうか。

MovieClipとは、図形や写真、もちろん文字などもムービークリップにすることにより、アクションスクリプトで動画やアニメーションの部品に出来てしまうということではないだろうか。

ところで、ムービークリップを作るには、2種類の方法があります。
ひとつは新規に作る方法、もうひとつは変換してムービークリップにする方法です。

○変換の場合
変換は、変換したい図形や画像、文字など、必要なフレームも選択して、Convert to Movie Clipを行います。

ツールバーの左側、直線ツールのすぐ上にあります。New Movie Clipが表示されている場合はしばらくボタンを抑えましょう。隣に、convert to Movie Clipのアイコンが出てきます。

メニューバーからの場合、Shapesの中にあります。
○新規に作る場合
ツールバーの、New Movie Clipをクリックするか、メニューバーのShapesから Add Movie Clipを実行します。

Movie Clipウインドウでは、画面中央に+が見えますが、この+の位置がムービークリップとなったときの原点となります。



ボールの下に影をつけました。

ボールの運動にはムービー領域の中心に対し回転しているボールを斜め上から見ている感じです。

小さくなったときに、ボールのサイズとアルファー値を変更していかにも遠くなったように見せています。

運動部分の式はこんな感じ

radian = Math.PI/180*degree;
this._x=xcenter + r*Math.cos(radian);
this._y=ycenter + r*Math.sin(radian)/3;
this._xscale = this._yscale = this._alpha = r*Math.sin(radian)/2+100;
degree += 5;

アクティブスクリプトでは三角関数で度表示ではなくラジアンで表示します。
分かりやすいように5度づつ回転しているのですが、それをラジアンに変換しMath.sin、Math.cosに代入しています。
posted by hirano at 20:18| 埼玉 ☁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月21日

立体的なボールを描く

前回のbounceどうですか?

うまく遊べましたでしょうか。

マウスでボールを押さえ勢いよく壁にぶつけて放すと跳ね返って反対側に飛んでいきます。

ところでこのボール、なんとなく丸く見えますが、この立体画像意外と簡単に出来るんです。

前回のバルーンでは、バルーンの立体感を持たせるために半透明の画像を用意しました。

今回は使用しません。

ボールには模様がありませんので、グラディエーションの設定だけです。

但し中心からグラディエーションをかけると、目玉みたいになってしまいますので、中心の位置をちょっとだけ移動します。
paintfill.jpgグラデーション中心の移動は図のようにTranslateボタンを使っても良いのですが、この場合には数字で指定する必要があります。

rotategradient.jpgメニューから、[Transforms]-[Rotate/Shift Gradient Fill]でグラデーション中心を表示し、マウスでドラッグすると、簡単にグラデーション中心を移動できます。
posted by hirano at 15:00| 埼玉 ☀| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月14日

アプリケーションには高級感のあるボタンを

ただ四角いだけでなく立体感を持たせると高級感のあるボタンを作ることが出来ます。

Koolmovesでは残念ながら木目スタイルなどは持っていませんが画像ファイルを背景として設定できますのでこれを使って木目調のボタンを作ってみましょう。

ボタンは長方形で面どりを下ボタンです。背景用の木目模様はWordのテクスチャ画像をコピーしファイルとして保存しておきます。

図形ツールで角が丸い長方形を描きます。

Ctrl+C、Ctrl+V、Ctrl+Vで今作った長方形のコピーを二つ作り、同じ大きさの長方形を3個にします。ひとつは木目用。他の二つは立体感を持たせるためのマスク用です。

一番下の長方形は、外枠無し、塗りつぶしでImageを選択し保存してあった木目模様を指定します。

次に立体感を持った縁取り部分の作成です。図形を立体的に見せるためには、光沢や影を使用します。

button.jpg今回は影を利用しましょう。

影の無い部分は模様がそのまま見えます。

陰のある部分は少し黒くなります。

長方形ですので、上下と左右に影を作ります。

影の無い部分は透明とし透明度を設定します。

透明部分のグラデーションバーを選択して、100%とします。

グラデーションバーの個数はバーの隣にある+文字をクリックし、追加できます。

垂直のグラデーションは、90度回転して設定します。
posted by hirano at 21:00| 埼玉 ☁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2009年10月03日

ゴンドラを描く

バルーンの下のゴンドラ。

バルーンは2色で手前からみて2つの縦方向ストライプとなっている。つまり、一周で縦に線が8本あることになる。
色の関係が入れ替わるところまでの回転は45度となる。

そこで、ゴンドラの回転も45度の回転で描こう。

回転の開始点としてバルーンの縦の線が真横に来るようにすると。ゴンドラのも正面からの図、それと斜めからの図にできる。

ゴンドラを吊るロープはバルーンの縦の線。つまりバルーンの次部分につるす形とする。

ゴンドラは真横から描くと立体感が無くなってしまうので斜め上から見た感じにしよう。

そうすると、正面からも正面斜め上。

gondora.jpg描画の順番としては、奥から描くようにする。つまり、奥、左右、正面となります。

ゴンドラの床部分は常に隠れていますので書く必要はありません。

次に回転後のゴンドラですが、ゴンドラは、回転して45度の図形になるのだから次のフレームでは正面の図形をコピーし変形するようにしなければなりません。

また、塗りつぶしの色は、外側は明るい色。内側はちょっと暗めにします。

バルーンとゴンドラは同じMovie Clipに描画すると、一緒に動きます。

回転した場合どの面がどの面になるか、また、どの辺がどの辺になるかよく考えて変形するようにします。
posted by hirano at 12:55| 埼玉 🌁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。