榊正宗@BlenderQuiz @megamarsun アニメの制作費の話とかするとみんな引くかなあ。アニメがどういう風に成り立っているかを制作費から知る事は、作り手としてはとても重要な事なんだが。公にしていくかは、ちょっと迷う所。 2013-11-10 05:56:57 榊正宗@BlenderQuiz @megamarsun #アニメの制作費 金額の前に大前提としてアニメには原画と動画という言葉がありますが、ここの定義の確認。ユーザーさんが見てる完成品に原画という絵は存在しません。原画の間を割るのが動画ではなく、原画は動画を描くための下絵と考えるのが正確です。枚数も少ないです。ここ誤解しやすい所です。 2013-11-10 06:14:43 榊正宗@BlenderQuiz @megamarsun #アニメの制作費 原画はカット単位で発注されます。動画は、１枚いくらで計算します。また、原画
宮崎駿監督は、記者会見に合わせて、「公式引退の辞」として報道陣に書面でも引退の理由を明かしました。書面の全文を掲載します。 「ぼくは、あと１０年は仕事をしたいと考えています。自宅と仕事場を自分で運転して往復できる間は、仕事をつづけたいのです。その目安を一応“あと１０年”としました。もっと短くなるかも知れませんが、それは寿命が決めることなので、あくまでも目安の１０年です。 ぼくは長編アニメーションを作りたいと願い、作ってきた人間ですが、作品と作品の間がずんずん開いていくのをどうすることもできませんでした。要するにノロマになっていくばかりでした。“風立ちぬ”は前作から５年かかっています。次は６年か、７年か・・・・・・それではスタジオがもちませんし、ぼくの７０代は、というより持ち時間は使い果たされてしまいます。 長編アニメーションではなくとも、やってみたいことや試したいことがいろいろあります。や
格好いい攻撃モーションには、すべて理由があった！ “身体の動きと原理から知る、闘うインゲームアニメーションの中身”リポート【CEDEC 2013】 理にかなった攻撃モーションの作成を目指す 2013年8月21日～23日、パシフィコ横浜にて開催された、日本最大のコンピュータエンターテインメント開発者向けカンファレンス“CEDEC 2013”。3日目に開催されたセッション“身体の動きと原理から知る、闘うインゲームアニメーションの中身”のリポートをお届けする。 講演を行うのは、株式会社バンダイナムコスタジオ ET開発本部 アニメーション部 アニメーション課の元梅 幸司氏。元梅氏は格闘ゲームやアクションゲームのキャラクターの動きを作成している3DCGアニメーターで、自分の動きを参考にしたり、ときには自分で動いてモーションを作成しているという。 本セッションを簡単に解説すると、身体の仕組みや動きを理
Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述） まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。 GreenSock Animation Speed Test 豊富なアニメーション機能 GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。 ベジェアニメーション 繰り返し 逆再生 時間指定 一時停止 フレームラベル ゆ
著作権侵害であっても権利者以外からの削除申請には一切応じない、ニコニコ動画運営 ニワンゴ取締役 木野瀬友人さんが 「北久保さんが消せない理由って何ですか？」 って呟いたら、北久保弘之さん本人からリプライがきて、あらあらまあまあ 2/3 関連動画、関連記事 関連まとめを追加 / kinoppix氏が急にプロフィールを変更したことに関わるやりとりを追加 【続編】http://togetter.com/li/277301 北久保監督とドワンゴ会長川上量生氏のやりとり 『ドワンゴ会長「権利者からじゃねーなら知らねーしwww」 監督「権利者です」 会長「知らねーよ」 監督「その動画、俺の監督作品です」 会長「権利者なら削除依頼すればいいんじゃないっすか？」 監督「……」』
Animated Web Banners With CSS3 | Codrops アニメーションするバナーをCSS3で作るチュートリアル。 FlashみたいにアニメーションするバナーをCSS3のkeyframeで実現したデモとチュートリアルが公開されています。 近い将来、広告のクリエイティブがCSS3になっていたりして。iPhoneでFlashが動かないのでこういう動きがでてきてもおかしくないですね デモページ デモといいつつクオリティがかなりいいですね。 関連エントリ IE9にも対応したCSS3リファレンスサイト「css3files」 CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3のアニメーションサンプル４７
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
coding かつては4ブラウザの接頭辞を含めなければ動作しないという、スタイルシートがとんでもなく冗長になるということがあったが、2013年6月時点での実装では、webkit/blinkのみ接頭辞を用意すれば良い。 @keyframesの後にキーフレーム名を記述し、アニメーション変化の仕方を記述する。0%が始点、100%が終点となる。それぞれエイリアスでfromとtoのキーワードが用意されているが、今回のサンプルでは用いていない。 自然にループさせるために、0%と100%に同じプロパティを用意し、50%に変化させるプロパティを記述した。また、:hover擬似クラスでマウスを置いたときにアニメーションが開始するように仕向けておき、animation-iteration-count: infinite;として、無限ループするようにしてある。animation-nameで@keyframesで
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
「どーもくん」と言えば、NHKのマスコットキャラとして1998年から10年以上も活躍しつづけている、世界的にも知られたキャラクターです。このどーもくんを作ったアニメーション作家の合田経郎氏によって、日産の新たなキャラクター「PLUG（プラグ）くん」と、彼の住む世界「Planet Zero」が作り出されましたが、そのクオリティは、ちょっと尋常ではないほど力が入ったものとなっています。 NISSAN Zero Emission：Planet Zero http://the-planet-zero.com/ これが合田経郎氏によって生み出された日産の新キャラクター「PLUG」。昨今のゆるキャラブームをまったく無視したかのような直線的なキャラクターデザインです。 PLUGくんのすごいところは、彼らがすべて立体で製作され、コマ撮りアニメーションでその世界観と物語が作られているところ。下のムービーでは
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
JavaScript - TextFX - A jQuery Text Animation Tool - CodeCanyon Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 Flashにもこうしたテキストアニメーション作成ツールがあった気がしますが、jQueryでも出来るみたい。 １５のコアとなるアニメーションに加え、１８種類の設定、カスタムイージング、スピードなどカスタマイズ自在です。 デモページ ブラウザで動くエフェクトジェネレーター付きで、自由自在かつ簡単に動きをデザインできます。 注意点として、$5のライセンスウェアのようですが１からつくることを考えれば安いですね IEやSafariなどでも互換性があるみたいです。 関連エントリ プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 スマ
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
1 以下、名無しにかわりましてVIPがお送りします 2011/05/14(土) 23:06:46.29 ID:+thpqrue0こういうの最高だと思うんだが、 他にもあったらおしえてくれ GLAY / サバイバル http://www.youtube.com/watch?v=ujHgSf68VkY 編集元タイトル：クオリティの高いアニメーションPV貼ってけ 編集元URL：http://hibari.2ch.net/test/read.cgi/news4vip/0305382006/ 3 以下、名無しにかわりましてVIPがお送りします 2011/05/14(土) 23:07:44.24 ID:+thpqrue0俺からいくぞ 有名だが チャゲアスの On Your MarK http://zoome.jp/5103/diary/3 4 以下、名無しにかわりましてVIPがお送りします 2011
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
