2012年02月29日

Koolmovesでシュミレーション

今回は、ムービー以外の目的に使ってみました。

複雑な動作をする部品の画像をKoolmovesで作ってみました。

その動作を見るために行ったことは、ムービースピードの変更です。

通常は10〜15くらいで使用することが多いのですが、極端に下げてみました。

キーフレームの時間を変更した上で、ステップ実行をします。

ムービースピードは、1秒間の画面数です。キーフレームを2秒にして、ムービースピードを2枚にすると、一つのキーフレームを4枚にすることができるのです。

シングルステップは、正方向と逆方向がありますので、細かい画像を作らずに、前後の様子を確認することが出来るのです。

意外と簡単な作業でできるので、便利でした。
posted by hirano at 23:53| 埼玉 ☔| Comment(1) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2011年12月31日

体験版で、ズームと回転


ズームと回転サンプルをKoolmovesの体験版で作成して見ました。

今回は、背景のKMが見えないように感じますが、どうでしょうか。

描画エリアも、前回は360x360で作成したのですが、ちょっと小さくして、240x240にして見ました。

そのため、スクリプトでもサイズに影響する部分を少し変更しています。

また、これをアップする頃には年が変わっていそうなので、文章も変更しました。

まず、文字列側のアクションスクリプトは
onClipEvent(load){
this._x = 120;// 座標を、画像の中心としました
this._y = 120;
sense = 0;
}
onClipEvent(enterframe){
this._rotation -= 5;
if(sense == 0){
this._xscale -= 1;
this._yscale -= 1;
if(this._xscale == 3){ // ズームの最低を指定します
sense = 1;
}
}
if(sense == 1){
this._xscale += 2;
this._yscale += 2;
if(this._xscale == 105){ // ズームの最大を指定します
sense = 0;
}
}
}


としました。

また、丸側のスクリプトは、
onClipEvent(load){
this._x = 120; // 中心を描画エリアの中心とします
this._y = 120;
}
onClipEvent(enterFrame){
this._rotation += 4;
}


体験版では、名前を付けて保存(save as)が使えません。

exportでas swfを行います。
posted by hirano at 23:48| 埼玉 ☔| Comment(2) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2011年12月27日

Koolmovesをインストールしよう

Koolmovesはホームページからデモ版のファイルをダウンロードして使用出来ます。

Koolmovesのダウンロードサイトを確認してみたら、以前はEXEファイルだけだったのですが、ZIPファイルもダウンロードできるようになっています。

kmdown.gifと言っても、ZIPファイルを開いてみると中身はEXEとしてダウンロードしたものと同じものがダウンロードされます。

セキュリティなどの理由により、直接EXEファイルとしてダウンロード出来ない場合は、ZIPファイルとしてダウンロードできるかもしれません。

お試しください。

つまり、EXEとして2ヶ所から、ZIPとして、2ヶ所、合計4種類のダウンロード方法があります。

と言っても、ダウンロードしたものはすべて同じものとなります。

製品版を購入していない場合は、とりあえずこのデモ版をダウンロードして使ってみましょう。

デモ版で作成した場合は、背景にKMの文字が薄く入ります。

また、koolmovesの形式(拡張子:fun)で保存できないので、作品を作り直したい場合は最初から、若しくはswf形式のファイルを読み込んで修正することになります。この場合は、完全に同じものになるとは限りません。

しかし、使用期限などはありませんから、しっかりと体験版で練習して購入しましょう。
posted by hirano at 18:45| 埼玉 ☔| Comment(1) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2011年12月24日

フラッシュで、ズームと回転の効果




今回は、ネクロマンサスのサンプルの中から、ズームと回転の効果です。

サンプルの中のAS1の中の一番最後にあるZoom Rotator 回転とズームと言うサンプルです。

文字を日本語にして、書き換えて見ました。

スクリプト関係はそのまま使っています。

ムービー領域は360×360

回転する丸と回転する文字列はそれぞれ逆方向に回転します。

文字は回転しながら縮小拡大をが繰り返します。

今日はクリスマスイブですので、サンタ追跡システムのURLも紹介しておきます。

http://www.noradsanta.org/

今日の16時ころから、追跡が開始しますのでご覧ください。それまではカウントダウンです。
posted by hirano at 01:44| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

2011年10月22日

イメージギャラリー

今回は写真アルバムの作成です。

Koolmovesのサポートページ、ネクロマンサスからイメージギャラリーを作成します。

下の画面でスクロールさせた写真を上の画面に大きく表示させるアルバムを作成します。

使い方。

今回はダウンロードしたファイルの中のak.swfはそのまま使います。

Imagesフォルダーに、200×300の画像を保存します。
thumbsフォルダーに、82×124に縮小した画像を保存します。

説明を変更する場合は、imagesフォルダーにあるimages.xmlファイルを開き、エンコードをUTF-8に変更しinfo項目を変更します。

画像を増やしたい場合は、xmlファイルの項目を増やします。




フォルダー構成は、ここからダウンロードした、AK.zipと同じで、

AK.swf
Images---images.xml
     +AK1.jpg (大サイズ画像)
     +AK2.jpg
     +AK3.jpg
       :
       :
     +AK9.jpg
     +thumbs----AK1.jpg (小サイズ画像)
           +AK2.jpg
           +AK3.jpg
           + :
           + :
           +AK9.jpg


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

2011年09月27日

ホームページで使えるメニューをつくる

KoolMovesのサポートで、Necromanthusを開くとサンプルが大量にあります。

この中に、ホームページのメニューに使えそうなものがありました。

KOOLMOVESのMISCELLANEOUSに、Communicationというサンプルです。

ここに、SenderとReceiverがありますが、このうち、Senderのほうを書き換えるてメニューにしてみました。

サンプルでは、Senderで、クリックすると、Receiverに文字が反映するのですが、そこを書き換えて、クリックで、リンクに飛ぶようにします。

KoolMovesのDynamicTextは日本語に対応していないようなので、たぶんReceiverは無理と思うのですが、Senderだけ使用して、メニューをつくることができました。

この場合、SenderでもDynamicTextを使用しているのですが、ここにはTextを使用します。

最初に、ムービーのサイズを決定します。

メニューがぎりぎり入るサイズで良いと思いますが、ここに貼り付ける関係上380 x 40としました。

右下のFrame Durationは0tweenにします。

ボタンは、高さがムービーサイズの高さより少し小さい長方形としました。

オプションで、Snap to GridをOnにして、書くと書きやすいです。

後から動いてくるアンダーバーのためにコピーをひとつ作っておきます。
これは、Movie Clipに変更して、myMenuLineとリネームします。

次にボタン用の長方形を選択して、Convert to Movie Clipを実行します。

プロパティで、Framesをクリックします。

ボタンの長方形を選択して、Line widthを0にします。

また、Color/fillでGradient Colorにして、左側の白を灰色として中間に移動します。
右側の色は、48,207,207(水色)としました。

Shape Fillの左下、で90度回転し、OKボタンを押します。

Textでボタンいっぱいに、リンク先を表示する文字を書きます。

文字とボタンを選択して、Score/Timelineでフレームを1個コピーして、フレーム2とし、8 tweenに変更します。

フレーム2をコピーして、フレーム3にして、水色をピンクに変更します。

フレーム3をコピーして、フレーム4にし、0 tweenに変更します。

フレーム4をコピーして、フレーム5、フレーム6とします。

フレーム6を8 tweenとして、フレーム6をコピーし、フレーム7とします。

フレーム7のボタン(長方形)を選択し、ピンクを水色(48,207,207)にします。

フレーム7をコピーして、フレーム8とし、フレーム8を0 tweenとします。

ムービーオーバービューを表示し、フレーム1と4のアクションを
Stop();
として、フレーム8のアクションは、
gotoAndStop(1);
とします。

Main Movieに戻り、ムービークリップにアクションを以下のように設定します。
onClipEvent(rollOver) {
this.gotoAndPlay(2);
_root.myMenuLine.xPosition = this._x;
}
onClipEvent( rollOut) {
this.gotoAndPlay(21);
}

on (release ){
getURL(url ,"_blank");
}


urlの部分に、リンク先のURLを記入します。

myMenuLineのアクションスクリプトは、
onClipEvent (load) {
var xSpeed = 10;
xPosition = _root.home._x;
}

onClipEvent (enterframe) {
this._x = this._x - (( this._x - xPosition ) / xSpeed);
}

とします。

ボタンは必要個数コピーして、名前とurlを変更して使用します。


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

2011年08月30日

KoolMovesで3Dのサンプルに挑戦

Necromanthus には、難しいサンプルがいくつもあります。

今回はそのひとつ。3DMathというサンプルを挑戦してみました。

といっても、作成の手順をつくってみようと思います。

最初に画像のサイズを決めます。

今回の画像は、480×320ですのでそのままでは、このブログに表示できません。

そこで、Movie sizeは 380 x 320としました。背景色も設定します。

1.[Movie] -> [Movie Width/Height]で Width を380 heightを320にします。
2.[Movie] -> [Background Color] で上から、104,100,104と設定します。
3.右下のScene1の時間を0tweensに変更します。

デフォルトは6ですが、6のままでは、再生がすごく遅くなります。

6tweenが表示されるたびに、0tweenに変更します。

次に、回転している角に付いているボール(mingie)の作成です。
4.ムービー領域の外に、直径が15pixcelくらいの円を描画します。

5.塗りつぶしツールで、Gradient colorとRadialを選択します。
右側の色(内側)は、0,255,255
左側の色(外側)は、0,0,104です

6.図形のプロパティで、Line widthを0にします。

7.Convert to movie clipでムービークリップに変換します。

8.ついでに名前を変更して、mingieとします。
この名前は、後でアクションスクリプトの中で使用します。

9.ムービー領域いっぱいの十字架を書きます。十字架一つとして、ムービークリップに変換します。

10.十字架の名前は、axisです。

11.ムービー領域の右上にコントロールボタンを配置します。

コントロールボタンの名前は特に気にする必用はないと思います。S5、S6、S7としました。

各ボタンには、Action scriptが設定されます。

12.ラインを描画します。0,0から70,70への斜めに描画し、Line colorは白に設定です。
ラインは、ムービークリップの中で、左上(ラインの開始点)の座標を0,0にします。

13.ラインの名前は、linieとします。

ラインと、ボールはプログラムの中で、コピーして使用するので、ムービー領域の外に配置します。

ラインとボール以外を全て選択し、4フレーム分コピーします。

14.Movie Overviewから、4つのフレームに対し、Action scriptを設定します。

SWFとして、エクスポートして完成です。


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

2011年07月31日

KoolMovesが8.1.2に

ちょっと気を抜いていたら、Ver8になってから4回目のマイナーバージョンアップ

8.1.2になっていました。

バージョンアップになった場合に私のすることは当然ですが普通にバージョンアップを行ってしまいます。

その次にすることはヘルプの修正です。

ヘルプの修正にはまずヘルプが変化したかどうかが問題です。

インストールフォルダーを見て、ヘルプファイル。KoolMovesの場合には、koolmoves.chmというファイルのタイムスタンプが新しくなっているかどうかです。

新しくなっている場合には、具体的にどこが変わっているかです。

しかし、ヘルプファイルのページ数から言うと、約160ページ。

画像ファイルが約150個あります。

これを1文字1文字チェックするとなると、気が遠くなってしまいます。

そこで使用するツールが二つ。

  • HTML Help Workshop
  • テキスト比較ソフトDF

    です。

    HTML Help Workshopはマイクロソフトがフリーで公開しているHTMLヘルプ作成ソフトですが、出来上がったヘルプを中身に分解する(decompile)という機能も持っています。

    そこでdecompileによって、元のファイル。 HTMLファイルと画像ファイルに分解します。

    これを、バージョンごとにフォルダーに分けて保存しておきます。

    次に、テキスト比較ソフトです。

    これもフリーで便利なソフトが公開されていますのでそれを使用します。

    上記で紹介した、DFはファイルとフォルダーと両方共比較してくれます。

    HTML Help WorkshopでDecompileすると、生成されたファイルのタイムスタンプは、作成者が作ったときのものではなくDecompileした日時で作成されます。

    つまり、バージョンごとに保存した場合にDecompileしたたびごとにその時に日時。つまり全てが新しいファイルとなってしまっています。

    そのためファイルの比較は、タイムスタンプだけでなく、ファイルの中身まで比較する必要があるのです。画像ファイルの場合には、ファイルサイズや内部コードまで比較する必要があるため、バイナリーモードで比較を行います。

    もちろん新しく作成されたファイルも検出する必要があります。

    そういったことを全てDFは行ってくれるのです。

    メニューのファイルから、「フォルダの比較」を行うとファイルリストが左右に分かれます。

    修正のあるファイルは、ファイル名に色がつきます。

    新規にできたファイル、なくなったファイルは片方が空欄となります。

    これによって変わった部分をチェックできるのです。

    8.1.1から8.1.2ではMorphing Hintsというページが新規に作成されました。

    内容の修正は4ページあります。

    逆に言えばこれだけチェックしておけば良いのです。

    あとはWhat's Newを確認します。
  • posted by hirano at 17:13| 埼玉 ☔| Comment(1) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

    2011年06月28日

    KoolMovesでHTML5

    KoolMovesが8.1.1になってHTML5の作成がちょっと楽になりました。

    といっても、HTML5がスラスラ書けるという意味ではないですけどね。

    8.1.0まではHTML5のページを作成するためには、KoolMovesのユーザーインターフェースをHtml5 for mobile devices(以下Html5モードと書きます)モードにして、画像などを作成してファイルメニューのExportから、HTML5 Web pageとして保存する必要がありました。

    慣れれば、Flashモードで作成して、保存する前にHTML5モードに切り替えて出力でも出来るとは思いますが、8.1.1ではAdvancedやCartooningモードで作成し

    出力するときにメニューのExportからHTML5を選択でHTML5として出力できるようになったので、昨日が増えたというわけではなく、操作が自然になったというべきでしょうか。

    以前作成したチョウの作成をHTML5で作成してみました。

    HTML5モードでは塗りつぶしとしてグラデーションを使用できないのでモンシロチョウとしてあります。

    ムービークリップも使用できません。

    Advancedモードで、チョウの羽を1枚作成し反対側はそれをコピー反転しグループ化。

    適当な大きさに縮小した状態で、タイムラインに10個ほど並べフレームごとに適当なサイズ方向。向きを調整して作成しました。

    最後にExportから As Html5 Animationを選択し適当に名前を付け保存です。

    チョウは一回りしたらどこかに止まってしまうのでは面白く無いので、Loop Movieにチェックを入れておきます。

    今回作成の難点は、白い背景にモンシロチョウなので、見えにくい。

    目を凝らしてよく見てください。

    あまりにも見えにくいので、背景をつけてみました。

    右の羽と左の羽がバラバラですね。
    posted by hirano at 15:13| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

    2011年05月10日

    HTML5でイメージ効果

    KoolMovesでHTML5の使い方がいまいちわからなかったのですが、連休前のバージョンアップで8.1.0になりました。

    さらに、変更履歴で、HTML5のモーションスクリプトが22個も追加になっているということで、More Infoを確認したところ、HTML5のイメージ効果が40個(ただし、Ieでは見れない)となっていましたので早速確認してみました。

    たしかに、HTML5のモーションスクリプトが40個になっています。

    40 Html5 image effects (not viewable in IE)というところをクリックしてみましょう。

    not viewable in IEですが、Ie9では表示できました。残念ながら、Ie8ではだめです。

    作り方としては、Koolmovesでムービーエリアを設定し、Import imageで写真を貼り付けます。

    ボタンの三角形はそのままでは上を向いていますので、回転してみました。

    すると、HTML5では回転を反映できず、そのままの形となってしまいましたので、三角形を止め、多角形を使用して、右向き三角形と左向き三角形を作りました。

    線なし、塗りつぶしを黄色とした後にボタンに変更。

    次に画像をクリックして、Motion scriptの設定です。

    右上にモーションスクリプトの内容を書きますので順番を決めてメモしておくと良いですね。

    出力ファイル毎に一種類のMotion scriptを設定します。

    右ボタンで次のファイル、左ボタンで手前のファイルに飛ぶようにURLを設定します。

    その予定に従って、名前を付けて保存をした後にHTML5でエクスポートします。

    Internet Explorerの場合は、9以上で見てください。

    写真は不老川の辺りの桜です。
    posted by hirano at 17:44| 埼玉 ☀| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

    広告


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

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

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


    ×

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