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月29日

    blogram登録してみました

    不まじめなブロガー(私のことです)

    アクセス数をアップさせるにはやはり毎日書くことが大事だと頭では思っているのですがそれはそれ。

    書けないのです。

    そこでなんとか、1ヶ月に1記事以上は書こうと思って努力しています。

    書けない月ができると、過去ログが飛んでしまうのです。つまりこれに空きができないようになんとかネタを考えながら・・・

    ところで、昨日、書きこもうとしてログイン画面に来たらなにか新しいものがある。

    blogramという、聞きなれないバナー。

    早速登録をしてみました。

    登録して、

    ???

    あれ?

    なにか忘れているのです。

    そう。

    アカウントを作っただけでした。

    ブログにツールを貼り付けなければ。

    さて、どこに。

    ということで、サイドバーに貼りつけました。

    カウンターの機能もあるようなので、早速今まで使っていた忍者ツールと数字を合わせて。

    表示は、時計表示とカウンター、そしてグローバーウォーク

    カウンターが二つ並ぶのも何なので、時計表示としました。

    まだ使い方がよくわかりませんが、面白くなるのでしょうか。
    posted by hirano at 14:26| 埼玉 ☔| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

    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月31日

    HTML5でcanvasを使う

    マウスで描画にボタンで図形描画とクリアーを追加してみました。

    四角部分をドラッグしてお絵かき。

    下にあるボタンを押して、図形描画。

    CLEARボタンで、全部消えます。

    CANVASにクリアーが無いようなので、新規に四角の枠を書き白で塗りつぶしました。


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

    2011年05月30日

    HTML5でお絵かきと、ブログにembed

    日経ソフトウエアの6月号から、HTML5の入門講座が始まりました。

    HTML5というとなんといっても、キャンバスです。

    HTMLというと、Hiper Text・・というくらいですから、本来はテキストなのでキャンバスというのは、

    え!、絵!

    というくらい、そぐわないキーワードです。

    そして、このキャンバスによって、今までならHTMLの中に絵を入れるには、GIFとか、JPEGなどの画像を貼り付けたり、JAVAなどで作成した画像をオンデマンドで貼り付けるといったことをしていたのに、なんと直接HTML5の中で、絵を作ることができるのです。

    その例として、6月号、第2回目では、キャンバスの中に四角や丸を描く。文字を描きそれを回転させる。

    そして、お絵かき。

    というサンプルがありました。

    面白そうなので、お絵かきに挑戦。

    ついでに、ブログの本文中にも。

    基本的なルールとして、今まではHTMLをShift-JISなどで、書いていましたが、HTML5ではUTF-8。

    タグは小文字で書きます。

    そこで、このテストコードを書くにも私の場合テキストエディタとして秀丸を使っていますが、保存時にコードをUTF-8に変更。

    これは通常そのまま保存するとWindowsの場合標準のShift-JISで保存してしまいます。

    そこで、メニューのファイルから、エンコードの種類をUTF-8に変更します。

    そして名前を付けて保存。

    さすがに、このコードをそのままブログの記事覧に貼り付けることはできませんので、作成したHTML5のドキュメントをファイルとしてアップロードします。

    次に、Flashと同じようにiframeタグで、srcの中にアップしたファイルを入れてみました。

    その結果がこれ。

    内側の四角部分をマウスでドラッグしてみましょう。(Ie9若しくは、Ie以外のブラウザでご覧ください)



    もちろん記事中の画像は500×500ですがこのサイズでは記事に入りませんので canvas widthを300に変更しました。

    Ie9でソースが見たい方は、灰色の内側で右クリック、ソースの表示を行って下さい。



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

    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年以上新しい記事の投稿がないブログに表示されております。