気になる〜

  • ドメインがほし〜い
    ピザ食べた〜い
    【Udemyでお勉強】
無料ブログはココログ

2018/06/02

Animate CC と Hippani Animator

Animate CC と Hippani Animator。どちらもWEBアニメーションが作れるツールです。
Hippaniは使いやすいのですが、情報が少なすぎます。
自動翻訳を使ったヘルプがほぼ情報の全て。

Animate CC もHTML 5で書く場合は情報が少ないのですが、Create JSという基本のフレームワークがあるので、その辺りからアプローチすれば謎が解明するときもあります。

Animate CC で作ったWEBタイマー、結局はHippani Animator 5でも作りました。Animate CC で作ったそのアプリをiPhoneで実行した時に時間が来ても音声が再生されず、原因を調べるためにHippani で色々実験しているうちにWEBタイマーの形になり始めたので、そのまま、作り込んで仕上げた感じです。

Animate CC と Hippaniを比べた大雑把な感想は、奥が深く、作りこむのはAnimate CC。簡単に作るにはHippani。
という印象です。

スタンダートでもアニメーションを作ったり、動きをつけたりほぼほぼ色々なことができます。
でも、自分の場合はプロフェッショナル版を購入しました。

ちなみに、Hippaniは日本語を直接入力することができません。テキストボックスにもスクリプト内にも
日本語を入力したいときは別のテキストエディットからコピー&ペーストです。

こういう気になる点もとりあえずメールに書いてHippaniに送っています。
返事が来るかどうかはわかりませんけどね。

後日談:Hippaniからメールが届きました。Hippaniもトラブルは認識しており対応する予定ですとのことが書いていました。
よろしくお願いします。

2018/05/17

FCPXの勿体無い使い方

Snagitを使って動画をキャプチャーします。

で、キャプチャー中に余計な音が入らないように「おやすみモード」にしているのですが、Esetのアップデートの通知は画面内に表示されます。
キャプチャーデータは動画の素材として使うので、余計な画面が入っていてはいけません。

会社ではTMPG Smart Renderを使って問題がないかを軽くチェックするのですが、自宅ではその作業はできません。素材として使うために会社に持って行って使えないとショックなので、これからは自宅でキャプチャーしたデータをちゃんとチェックしていくことにしました。

しかし自宅のMacではWindows 対応のSmart Renderは動作しないので、豪華にFinal Cut Pro Xを使ってチェックすることにしました。

問題なく目的を果たすことはできましたが、このためだけにFinal Cut Pro Xを使うのは勿体無い気がします。
でも年に1度の編集のために買ったソフトウェアであることを考えると使い方を忘れないためにも起動させたほうがいいかもしれませんね。

2018/05/16

私はAnimate CC でタイマーを作ることができるのでしょうか(終了)

一応キッチンタイマーを完成することができました。

前回のブログで書いたAlert後に再度キッチンタイマーが動作しない問題はAlert後にリロードする方法で対応することができました。

音声に関しても以下の記述で再生する事ができました。。(まだWindowsのEdgeでしか試していませんけど)

var audio = new Audio("test.mp3");
audio.play();

そもそも再生する音源をAnimate CC のライブラリに置いたのがならない原因でした。
HTML用で使う音源ファイルはそのままHTMLと同じファイル構成にしていないとダメなようです。

とりあえず形になったのでHTML製作者の方に渡して組み込んでその後の修正などを考えたいと思います。
今は時間の表示が常に二桁の表示になっていないので、その点も改善が必要でしょう。そして、途中の時間経過のアナウンスも必要になりそうです。

できるだけ頑張ります。

それにしてもAnimate CC のレイヤーの配置がみっともないです。
もっとちゃんと設計してから組むべきだったと後悔しています。

2018/05/15

私はAnimate CC でタイマーを作ることができるのでしょうか(3)

Animate CC でキッチンタイマーを作っています。

テストのためにオブジェクトを配置するのですが、慣れない私は非常にイライラします。

大まかに、現在時刻を表示するムービークリップと、設定時間を表示するムービークリップ。
キッチンタイマーを動作させるムービークリップの3つを配置します。

Animate CCに備わっているShapeを使って上記3つのパーツを配置し、それぞれをシンボルに変えて部品として作成し、タイムラインに並べるという方法を使っています。
Shapeを使って大きさを見るためにいきなり新規シンボルで部品を作っていないのですが、このあたりが非常に面倒なのです。2度手間。

ムービークリップの階層が深くなったりして名前を調べてアクセスするのにも一苦労しています。

シンボル名とステージに配置したムービークリップのパーツのプロパティで名前も違うので、さらに混乱してしまいます。
例えば設定時間に決められた時間を設定してスタートする機能を作った場合、スタートするボタンと設定時間を表示する部品は違います。
時間の表示はムービークリップの中のダイナミックテキストの部品の中に行います。

だからそのテキストの部品にアクセスするには

var _this = this;
_this.MC_CurrentTime.TXT_currentTime.text = String("ここに設定した時間を表示");
となるわけです。

上記のサンプルだとムービークリップ:MC_CurrentTimeの中に配置しているテキストボックス:TXT_currentTimeのtextに”ここに設定した時間を表示"をセットしてください。となるわけです。

部品の構成をパッと見ることができればいいのですが、その機能があるのかないのかすらわからないので、とりあえず部品を調べて、その都度コピー&ペーストでオブジェクトの名前を指定しています。

現状、キッチンタイマーの時間は2時間、1時間など必要な時間は決まっているので、細かく設定する必要はなく、2時間ボタンを押せば2時間をセットし、2時間経てばalertで”終了です"と出るようにしています。

alert表示後また2時間のボタンを押したら2時間後に同じ動作をしなくてはいけないのですが、ボタンを押すことができません。
この問題を解決しないとなりません。どうやって初期化したらいいのかまだまだ調べなくてはならないことが山積みです。

2018/04/18

hippaniの落とし穴

ブラウザ内で動作するタイマーを作るのですが、私の場合、HTMLのタグ打ちなんて夢のまた夢なので、ツールを使わざるを得ないわけで、選んだツールはAnimate CC。

使った感じが難しいのと、自宅では使えないこともあって、もっと簡単に使えて、なが〜く使える買い切りのツールが欲しかったのです。

そこで、たまたま見つかったツールがhippani。5300円で使うつもりなら一生使えます。
hippaniはAnimate CC をレベル低めの初心者でも使えるようにしている感じで非常に楽しそう。

setIntervalでエラーが出たので、サポートに2回問い合わせをしましたが、翻訳と日本語で送ったのですが返事はいただけませんでした。
hippaniのサイト内にユーザーフォーラムがあったので、そこで解決策を見つけたところまでは良かったのですが、もしhippaniでタイマーが完成しても次なる壁が待ち受けていることに気がつきました。

それは会社で使い続けるとなると5300円の費用がかかること。

Animate CC はCreative Cloudの一部で、もう契約済みなので、問題ありませんが、ここで費用が発生するのは勿体無い気がしてきました。

どうしてもAnimate CC で手に負えなければ、交渉してhippani購入をお願いするかもしれませんが、もう少しAnimate CC で頑張ってみることにします。

でも個人的にはhippani購入はアリですね。

2018/04/15

Lumixの動画撮影はこっちで行きます

AVCHDの60fpsかmp4の30fpsか。どちらがいいのか比べて見ましたが、画質の違いはわかりませんでいた。

なので、手間がかかるAVCHDよりサクッと編集に入れるmp4がいいと思います。Lumixでの撮影はmp4で行くことにします。

久しぶりにFinal Cut Proを使って見ましたが、使い方やショートカットを忘れていて、Evernoteのメモで思い出しながら編集と書き出しを行いました。

情けないなぁ。でも仕方ないです。普段使ってないんですもん。そしてそんな時のためにEvernoteにメモっているわけですからね。

2018/04/07

私はAnimate CC でタイマーを作ることができるのでしょうか(2)

Animate CC でタイマーを作ることに挑戦しています。
会社で空いている時間を見つけて実験しています。

今回は「ボタンを押してメッセージを表示する」に挑戦します。
前回は時間をテキストボックスに表示することができました。

Animate CC にはスニペットというプログラムのテンプレートを書いてくれる機能があります。
そのテンプレートがボタンを押すとアラートを開いてメッセージを表示するというもの
テキストフィールドのアクションに追加する形でボタンのアクションを追加しました。

これで動きを確認してみましたが、ボタンを押してクリックしても何も表示されません。押されてるかどうかをチェックするためにconsole.log("クリックされました");と書き加えたのですが、どうやらクリックされていないみたい。

レイヤーを分けずにテキストフィールドと同じレイヤーに配置していたので、別レイヤーにして、ボタンを移動。ボタンを選んで新たにアクションを追加。

するとアラートも開き、クリックされましたも表示できました。

今後のプログラムの書き方を考えるとアクションを追加したいオブジェクトは別レイヤーにしていた方がいいような気がしています。

2018/04/03

私はAnimate CC でタイマーを作ることができるのでしょうか(1)

Animate CCを真剣に触りました。

社内で、WEBアプリケーション用のタイマーを作ろうという話が持ち上がり、年に2回、Flashの更新をしている私に話がありました。Flashを更新していると言っても、テキストを修正したり、計算式を変更したりする程度で、オリジナルから作る必要は全くありませんでした。

でも、Flashを触っているということで話が来たわけです。
実際にWEBアプリケーションを作るならAnimateCCしか思いつきません。なので、動画編集の合間にAnimate CC をいじって見ました。

なんとなく、画像などは全てSymbolにして、ステージに配置し、インスタンス名をつけてプログラム側からコントロールするものだろうという予想はついたのですが、そのオブジェクトを呼び出すことができません。
仮に aと名付けたオブジェクトの x値を変更したいだけなのに、a.x = 0; と書いても aなんてないよ〜と怒られるだけ。

色々Webで検索して見てもジャストな答えは出て来ませんでした。
英語のサイトなどを見て、やっとthisをつければいいという記事を発見し、試してみるとちゃんと 0 の位置に移動しました。

ですが、今度はイベントで移動させたいと思い、イベントの中にさっきまで動いていたプログラムを移動させると、オブジェクトは動かず、また aなんてないよ〜と言われる始末。

またまた検索すると
var _this = this;と表示するという記述があったので、それに合わせて _this.a = 0;とするとイベントが実行された時にちゃんと移動しました。

対処療法しかできません。_thisとthisの違いが全くわかりません。
私のレベルでは今月中にタイマーを完成するのはかなり手強いです。
もう少し、もがいてみるつもりですが、どうなりますことやら。

2018/02/18

FCP X での書き出しはどっちもどっちでしょうか

FCPで編集を終えた書き出しデータを提供したので、気になっていたことをテストしてみました。

今回はAVCHDを読み込み、編集を進めるのは非常に大変でした。
どんなふうに大変だったかというとAVCHDを読み込むと、FCPの操作はほぼ固まった状態になりました。でもしっかり読み込みは進行しています。おそらく、ほったらかしにしていれば、1時間の動画を1時間ほどで読み込んでくれたと思います。
FCPを触り始めた時は読み込みが開始していないようで、不安になり強制終了を繰り返していましたが、FCP Xはちゃんと読み込んでくれるようです。FCP X を信用しましょう。

ですが、読み込みまでに時間がかかるし、その後プロキシへの変換が必要(私のMacが古いため)なので、今回の編集では、ProRes422に変換して素材を作りました。

ここからがテストです。
実際に時間はかかるAVCHDから最終書き出しをした画像を、ProRes422に変換した素材を使って最終書き出しをした画像を比べてみました。


422h264

上の画像はProRes422を素材にH264フォーマットで書き出したデータ

Avchdh264

上の画像はAVCHDを素材にH264フォーマットで書き出したデータ

Avchd422

上の画像はAVCHDを素材にProRes422で書き出したデータ

3つを見比べても好み的にはProRes422で書き出したデータが細かいかなぁってほどの違いで、大した差はないと思いました。書き出しサイズは全て1920 x 1080です。

自分の中の結論としては一度変換して書き出す。

2018/02/14

FCP X チャプターを含んだ書き出し

DVDにする予定がなかったので、チャプターについては考えていませんでしたが、QucikTimeでの再生の場合、チャプターを含めることができます。

なので、マーカーをチャプターに変更する方法を試しました。
マーカーをつけていると簡単です。

マーカーをクリックして、チャプターのアイコンを押すだけです。
サムネールもピンみたいなマークが表示されるので欲しいサムネールの位置に移動させればお気に入りの画像をサムネール画像にすることができます。

QuickTimeで見るときは非常に便利です。

そうそう、マーカーの移動はContorl + : で次のマーカー、Control + ;で前のマーカーという風にショートカットで移動しながらチャプターに変更していく方が快適です。
それから、マーカー自体を移動させる方法がないと思っていましたが、1フレームごとの移動はできるみたいです。
そのショートカットはControl + .で1フレーム次へ移動、Control + ,で1フレーム前に移動となります。
使えなさそうだけど、使えそうな気がするショートカットです。

チャプターを含んだムービーを書きだしたら、本当に今回の編集は終わりだと思います。

より以前の記事一覧

最近の写真

  • P1140248
  • P1140247
  • P1140244
  • Blender_e00
  • 20180617_101016
  • 20180617_100936
  • 20180617_100925
  • 20180617_100916
  • 20180617_100906
  • 20180617_100856
  • 20180617_100843
  • 01