Flash
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1648/flash%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%92html5%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%99%e3%82%8bgoogle%e3%81%ae%e3%80%8cswiffy%e3%80%8d%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf/’;Check 「Swiffy」のトップ画面。 変換前のswfを選ぶ。 重要事項にチェックをいれるとUpload and convertが活性化する コンバート完了画面。左がコンバート前のswf、右がコンバート後のhtml5。 変換前後での、挙動の違いを確認できる。 コンバート時のエラーログも出力されている。 書き出されたhtmlファイルへのリンクも生成されるので、これを右クリックで対象をファイルに保存する。 書き出されたソースコード。JSON形式でSVGのベクターデータが書き出されているのがわかる。画像はbase64変換でバイナリデータ化されている模様。 データ量は、変換前が40K,変換後が120Kくらい。約3倍になっている。 しかしSVGアニメーションとしては大変優秀な軽量化がされている。 base64化されている画像をpngなどで外部ファイル化すればもう少し軽くなるであろう。 しかし、SVGはベクターで画像を描画するフォーマットであるはずなので、 base64変換されているのはどの部分なのか、ベクターで描画されているのはどの部分なのか、ソースコードの解明をすすめていきたい。
Continue reading about FlashコンテンツをHTML5に変換するGoogleの「Swiffy」を試してみた。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1639/flash%e2%86%92html5%e5%a4%89%e6%8f%9b%e3%81%ae%e3%83%a1%e3%83%a2%ef%bc%88%e5%85%bc%e3%80%80html5%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%aa%e3%83%bc%e3%82%b5%e3%83%aa%e3%83%b3%e3%82%b0/’;CheckFlash→HTML5はFXG形式で書き出し可能(Flash CS5以降) swfからASを抜き出すフリーソフトあり ↓ 挫折 ↓ 一からHTML5アニメを作るには・・・こんなツールがあった (for Windowsでフリーのもの) Inkscape・・・フリーのベクター描画ツール SVG形式で書き出し Blender・・・3Dアニメーション作成ツール(Blender to WebGL exporterで変換) ↓ SVGのオーサリングツールは割と充実していることが分かった。 ところで、SVGとcanvasの違いって? SVGはベクター、canvasはビットマップで描画する ↓ Why Adobe chose FXG over SVG? → Essentially, SVG didnt map well to the Flash world.
Continue reading about Flash→HTML5変換のメモ(兼 HTML5コンテンツオーサリングツールについてのメモ)
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1148/%e4%b8%ad%e6%9d%91%e5%8b%87%e5%90%be%e3%81%95%e3%82%93%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/’;Check中村勇吾さんという世界的に有名なWebデザイナーについて調べています。 Web業界で仕事を始めて2年、佐藤可士和さんの著作で恥ずかしながら最近はじめて知りました。 作品や人となりを知り、こういうこの世の奇跡みたいな優秀な方も世の中にはいるんだなと。 以前いた業界(中村さんの場合は建築業界)に疑問や不満、あるいは限界を感じ、 それを解消できる場としてWebにやってきた、という点では私と同じだが、 現在たどり着いている到達点は全くかけ離れている。 おそらくは出発点も全然違う。相当ハイなところから出発しているはずである。 Webプログラミングも独学だという。 それにしても中村さん、世界的に有名なクリエイターとなった今も 「Webデザイナー」という肩書きを使っているところに美学を感じる。 「Webデザイナー」はこれまで、グラフィックデザイナーよりひとつ低い地位 とらえられる風潮があるように思う。 理由は単純に、グラフィックデザイナーはWebデザイナーを兼ねるが、 Webデザイナーはグラフィックデザイナーを兼ねない、と考えられていたから。 (それは、ある意味正しく、ある意味間違っていると考えるが、これについては、また別の機会に説明しよう) もうひとつの風潮として、Webデザイナーとして経験を多く積み、ディレクションする立場になると 「アートディレクター」や「Webプロデューサー」と名乗る場合が多かった。 そのため「Webデザイナー」というと、グラフィックデザイナーやイラストレーターが作った マテリアルをWeb向けにリアレンジしたり、html&cssにコーディングする、という クリエイティブ度のあまり高くない下流工程の仕事、という世の中のステレオタイプが 形成されつつあった。 そんな中、ここまで世界的に有名な「Webデザイナー」という肩書きが成立していること、また それどころかその肩書きでないと説明し得ないほど「Webというユニークなメディアのための デザイン」を追求する姿勢に、同業者は大変勇気付けられるであろう。 これからももっと活躍し「Webデザイナー」の地位向上にさらなる貢献をしていただきたい、と 応援したくなってしまうのは自然なことであろう。 私たち一人一人がこういったWebのスタープレイヤーたちが築きつつある「Webデザイナー」 という誇らしい呼称に恥じない人材となるよう、スキルを磨いていかねばならない。 Web業界3年目、もう一度気持ちを引き締め直し、充実した仕事をしていきたいと思っている。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1011/wordpress%e3%81%aeweb%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc3%e5%82%91/’;Checkwordpressで構築されたサイト、多いですよね。人気の背景には、プラグインやテーマ(デザインテンプレート)が充実していることが挙げられると思います。ちなみに当ブログも、wordpressで動いております。日ごろWebクリエイターなどをやっているにもかかわらず、このサイトはほぼ頂き物だけで作られています。有志の方々が作ってくれた、便利なプラグインやテーマを組み合わせているだけ。日ごろ全身全霊を込め人様のサイト制作をしているので、自分のサイトくらい楽をさせて、というのが現状の偽らざる本音でございます。 さて、そんな便利なwordpressプラグインをもっぱら個人的な趣味で開発、無償で提供し、ブログライフひいてはウェブライフを便利にしてくれる愛すべき”ギーク”たちには感謝と敬意(といくばくかの呆れ)を忘れてはなりません。 また、彼らの創造物から学び、一歩でも追いつこうとする技術的向上心も、忘れてはなりません。 私が特に個人的にリスペクトを欠かさない三人を、感謝と敬意(といくばくかの呆れ)を表し、ご紹介します。 ■Roy Tanck http://www.roytanck.com/ Flashによる3Dタグクラウド「WP-Cumulus」の作者。当ブログにも設置させていただいてます、球体でクルクル回るタグクラウド。回すと気持ちいいですね。呆れるくらい、よく出来てる。 ■Alex King http://alexking.org/ ・Wordpressブログのサイドウィジェットに最新のTweetを表示 ・Wordpressブログに記事を投稿するとTweetで知らせてくれる ・一週間のツィートのまとめをWPブログに投稿してくれる など多機能なTwitter用プラグインTwitter Toolsの作者。まぁ、普通ですが、Twitterと連動させたいコトはこれ一本で事足りるので、Tweeterには便利です。 ■Andres Armeda http://armeda.com/ jQueryを使い記事をカルーセル表示させる「WP Post Carousel」作者。 jQueryを使ったwordpressのプラグインもだいぶ充実してきているなか、このインターフェイスは画期的。残念ながら当サイトのようなブログサイトよりはニュースサイトやECサイトのほうが使い道がありそうですが、wordpressの使い道の新たな方向性を提示するような優れたイノベーションという感想を持っております。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/632/%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%82%92%e5%85%b7%e7%8f%be%e5%8c%96%e3%81%99%e3%82%8b%e3%81%ab%e3%81%af%e3%80%81%e7%b4%99%e3%81%a8%e3%82%a8%e3%83%b3%e3%83%94%e3%83%84%e3%81%8c/’;Checkイメージを具現化するのにあれが必要、これが必要、と考えてしまいがちだが、根幹となるアイデアを練り上げるにあたっては紙とエンピツがあればたいていのことは可能である。紙ならフリースタイルでイラストや文字でアイデアをどんどん出していける。 後からそれをデジタルコンテンツにする場合PhotoshopなりFlashなりCubaseなりテキストエディタなりのアプリケーションでデジタルにトレースしていけばよい。 とはいえもちろん、ツールに助けられて生まれる作品やプロダクツも多い。 音楽家の場合、頭の中で頭からエンディングまで全部組み立ててしまう人もいる一方で、楽器に助けられて曲が生まれることも多々ある。 「ピアノの前に座ることからすべてが始まる」という作曲家も多いし、 「どこどこで見つけた12弦ギターにインスパイアされて曲を書いた」という逸話もよく耳にする。 逆に紙とエンピツだけで済みそうな人の場合を考えてみよう。 たとえばモーツァルトは、曲はまるまる一曲全パート、脳内に鳴り響く完璧なる音像として現出し、彼にとって作曲とはその音像を譜面に変換する作業に他ならなかったという。 彼の天才には凡庸な作曲家につきまとう試行錯誤や二者択一とは無縁だったようだ。 そんなモーツァルトにとっては紙とエンピツがあれば事足りる、ということになるだろう。 それにしても、このエピソードを知り、その上でたとえば「トルコ行進曲」のあの一音たりとも動かせないような完璧な構築を思うとき、空恐ろしささえ感じるのは、私だけではなかろう。