CSS3を使ったアニメーションとインタラクション
CSS3を使うと、静的な表現だけでなく、アニメーションやインタラクションが加えられます。その作例を8つご紹介します。最後の例を除いて、JavaScriptコードは書きません。いずれも中身は、リンクしたノートで詳しく解説しています。 01 テキストのアニメーション ただのテキストでも、フォントを選んでCSS3でアニメーションさせると、表現力は大きく高まります。 01-01 テキストをイルミネーションのように点滅させるアニメーション 「Monoton」フォントを使って、text-shadowプロパティで光彩を与えました。そして、animationプロパティにより、イルミネーションの点滅のようなアニメーションを加えています(サンプル001)。 サンプル001■CSS3: Flickering billboard light refined 01-02 テキストを順に浮かび上がらせては消すアニメー
CreateJS: リッチでインタラクティブな体験をHTML5に
2012年9月24日にサンフランシスコでAdobeの開いたイベント「Create the Web」のセッションが、ビデオで公開されました(英語)。その中からGrant Skinner氏による「CreateJS: Creating Rich, Interactive Experiences for HTML5」について、スクリプティングに関わる部分のスライドの文章を邦訳して、コードを掲載しました。また、日本語の参考ドキュメントもリンクで加えています。 EaselJS リッチでインタラクティブな2Dグラフィックスをオープンなwebに作成できる拡張性のあるプラットフォーム an extensible platform for creating rich, interactive 2D graphics on the open web 機能 features しっかりと階層化された表示リスト ro
CreateJS発表
Grant Skinner氏が、blog記事「Announcing CreateJS」でCreateJSを発表しました。公式サイトも間もなく公開されるようです。氏のblogから内容をかいつまんでご紹介します。 CreateJSは、いくつものライブラリモジュールとツールを統合したものです。HTML5にもとづくリッチなインタラクティブコンテンツがつくれます。これらのライブラリはそれぞれ独立して使えますし、ニーズに応じて組合わせることもできます。まずは、EaselJSとTweenJS,、SoundJS、PreloadJSが提供されます。 公式サイトcreatejs.comでは、デモやドキュメント、チュートリアル、コミュニティ、ショーケースなどが公開される予定です。 EaselJS EaselJSはHTML5のCanvasに表示リストやインタラクティブな仕組みを加えます。扱い方も、Flashのデベ
詳細！Progression 4 Flashフレームワーク入門ノート
詳細！Progression 4 Flashフレームワーク入門ノート 大重 美幸（著） 価格：2,680円（税別） 発売：2010/7/17 出版：ソーテック社 ISBN：4881667432 大重さんの新刊です。今週末のF-siteセミナーにも、参加者へのプレゼントとして1冊ご提供いただいていますので、じゃんけん運をつけてぜひ足をお運びください（大重さんありがとうございます）。 Progressionを始めるとき、はじめに恩恵を受けるであろう「シーン」という独自の概念を理解することが最初の壁と言えます。私も、最初にProgressionに触れたときは、個人的に確立してきた手法との違いに戸惑いを覚えた記憶があります。学習したあとで振り返ると、良く作り込まれているフレームワークだからこそシンプルな構造になっていることに気づくのですが、何もない状態から手探りで始めると、ちょっとしたことでつまづ
F-site | [01/22]無料・Ameba × ロクナナワークショップ One Day College
株式会社サイバーエージェント（本社：東京都渋谷区、代表取締役社長CEO：藤田晋、 東証マザーズ上場：証券コード4751）と、株式会社ロクナナ（本社：東京都渋谷区、代 表取締役社長：上田キミヒロ）が運営するWeb 制作に特化したクリエイター育成スクー ル ロクナナワークショップ（アドビ公認トレーニングセンター）は共同で、2010 年1 月22 日（金）、「Ameba」のサービス企画及び開発の裏側を紹介する1 日限定の無料技 術カンファレンス「Ameba × ロクナナワークショップ One Day College」を東京・渋谷 にて開催いたします。 「Ameba」が独自の技術に関するカンファレンスを自社で開催するのは初めての取り組 みです。本イベントでは、「Ameba」のサービスを支える企画・開発チームから4 名が 登壇し、4 つのテーマに分けてセッションを行います。セッションでは、「Am
2009.01.31 F-site的MAX
demo1「Flash CS4 言いたい放題」 笠居トシヒロとゆかいな仲間たち demo2「Flashの勉強・解析・サイトについて」 trick7 寺井周平氏 demo3「Flash・Flexのテキスト周りの進化について」Adobe Nat McCully氏 demo4「オレら的Flash Design」 Ralph Hauwert氏 ＆ Erik Natzke氏 あいにくの雨の中にも関わらず、160人の会場に163人が参加した、F-site的MAX！ いつも以上に内容の濃いdemoが続きましたが、中でもカナダのFlashユーザーグループ「FITC(Flash in the can..)」のお二方のdemoは、「Flashでここまでやっちゃうの？？？」と驚きまくり。 demo1: Flash CS4 言いたい放題 笠居トシヒロとゆかいな仲間たち MAXよりも豪華(!?)なメンバーによるFl
[11/18]面白法人カヤックが語る制作会社のお仕事とAdobe AIR最新事例と制作実演
Flashの学校 ロクナナワークショップ Webクリエイター向けイベント企画！ 話題のクリエイティブ集団として幅広く活躍中の 面白法人カヤック より、ディレクター 鈴木 啓央氏とFlash Developer 瀬尾 浩二郎氏をお招きし、普段見ることのできない制作現場においてどのようにFlashやAIRのコンテンツが作成されているか、実演を交えながらご紹介いただきます。 また、FlashやAIRを活用したサイトやサービスをディレクター目線、Flash Developer目線で開発プロセスを含めながら制作の裏側までじっくり語っていただきます。 ・国内外の広告賞を受賞した作品の制作プロセスを一挙公開 ・珍味！？「BM11」（ブッコミイレブン） による過激サイト作成術 ・ブラウザから一歩外へ！実世界指向サービスのアイデア ・実演！産地直送 AIR アプリのつくり方と活用法 参加者全員にもれなく、鎌
2008.02.23一味違うFlashサイトの作り方
講師：大雅氏 フリーのWebディレクター兼デザイナーの大雅氏に、Flexをディレクター＆プロデューサー向けに分かりやすく、ご説明いただきました。本セミナーをまとめた大雅氏の詳しいレジュメは、F-site 発表資料として、下記でご覧いただけます。スライドのデータ、サンプルデータもダウンロードできます。 http://blog.taiga.jp/archives/2008/02/25/014500/ Flexとは XML文章のMXML、ActionScript、CSSを使った、RIA(リッチインターネットアプリケーション)のためのフレームワーク。多彩なビジュアルコンポーネントライブラリ、高性能なデータサービスを提供してくれる。 Flexで作れるものは、 HTMLの一部に埋め込むタイプのコンテンツ フルFlashコンテンツ いずれも、アウトプットはSWFなので基本的にはFlashと変わりない。
Web2.0風のボタン等がクリック一発で作れるPhotoShop用レイヤースタイル風MXP
むらけんです。こんにちわ。 次回のF-siteはアニメーター向けですね。それと関係あるのかないのかわかりませんが、PhotoShopのレイヤースタイルライブラリ風のGradationLibというグラデーションライブラリMXPを作成しましたのでご紹介します。 いきなり余談ですが、僕はMXPは初めての製作となりました。 「JSFL&MXPもっと使おうよ。」というお話とそれらに関するhelloWorldを頂いたtaka:niumさん。 製作にあたって、参考にさせていただいたmunegonさんらに感謝です。 【追記 8/27】バージョンを1.0.1にしました。 変更点は、Macの場合デバイスフォントを使用していたため、クレジットがレイアウト崩れを起こしていた問題を、修正しました。（機能的には何も変更していません） ダウンロードアドレスは同じです。 さてさて、今回作ったGradationLibはタイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
