アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。今回はEdge Animateをインストールして、簡単なスライドショーを制作しながら基本操作をマスターしましょう。 Edge Animateのインストール Edge Animateは、Mac OS/Windowsで利用でき、Adobe Creative Cloudのサイトからダウンロードできます。 ダウンロードは無料ですが、Creative Cloudのメンバー登録が必要です。未登録の場合は、「使用を開始」→無料プランの「登録」ボタンから必要事項を入力してメンバーに登録しましょう。 すでにCreative Cloudに登録している場合は、Adobe IDとパスワードを入力してサインインします。サインインすると、Creative Cloudのダッシュボードが表示されますので、
「スマホにも対応したいからFlashの代わりにHTML5でアニメーションを作って」と頼まれることありませんか？ ところが、JavaScriptのコードを記述してアニメーションを作るのはWebデザイナーにはハードルが高く、多くのデバイスで動くコンテンツの制作は簡単ではありません。そこで注目されているのが、Flash感覚でタイムラインベースのアニメーションを作れる「Edge Animate」です。本連載では、WebデザイナーやFlashクリエイターを対象に、Edge Animateの基本的な使い方から実践的なコンテンツ制作の方法までを解説します。（編集部） 「スマホにも対応したいからFlashの代わりにHTML5でアニメーションを作って」と頼まれることありませんか？ ところが、JavaScriptのコードを記述してアニメーションを作るのはWebデザイナーにはハードルが高く、多くのデバイスで動く
Edge AnimateでCSSフィルタが扱えるようになった HTML／CSS／JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。 基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。 Adobe Edge Animateについて Adobe Edge Animate ドキュメント Adobe Edge Animateは現在無料で提供されています。 タイムラインやステージ、アクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。 jQueryとAdobe製のライブラリが使用
昨年の2月にAptana Studio3の記事を書いてから、1年ほどAptanaちゃんを使っていたのですが、ちょっと忙しくしている間に、他にも素敵な子たちがいるとかいないとか目にするようになり、ずっと気になっていました。 で、ようやく時間ができたので、まずはAdobeの「Edge Code」を試してみました。ということで、これから「Edge Code」を使ってみようと思っている人に向けに、インストールから基本操作、拡張機能の追加方法までを書いていきます。 ところで「Edge Code」って何？ Edge Codeとは、2012年9月にリリースされた「Adobe Edge Tools & Services」の中にある、HTML, CSS, JavaScriptのコードエディタです。現在のところ、プレビュー版として無料で配布されています。ちなみにプレビュー版とは、開発中のソフトウェアを一般に公
Adobe Edge Code Preview とは？ Adobe Edge Code Preview は、Adobe が提供している HTML／CSS／JavaScript のコーディングツールです。 HTML5 と JavaScript で作られているオープンソースコーディングツール「Brakets」がベースとなっています。 軽快な動作がウリのツールです。 Adobe Edge Code Preview のインストール Adobe Edge Code Preview は Creative Cloud ユーザーであれば無料でダウンロードすることができます。 Creative Cloud 自体も Creative Cloud スタータープラン (無料) がありますので、どなたでもインストールが可能です。 以下のサイトで無料登録できます。 https://creative.adobe.com
11月1日。新しい月になって、久々にこのMUSHIKAGO APPS MEMOをリニューアルしました。 せっかくなので、「Adobe Edge Web Fonts」を使って、このMUSHIKAGO APPS MEMOのブログタイトル部分を オシャレな感じに 特徴のあるフォントに変えてみようと思います。Adobe Edge Web Fonts、とりあえずどんなものか。 2012年9月24日に発表された Adobe Edgeツール＆サービス。その仲間の「Adobe Edge Web Fonts」を試してみます。 このMUSHIKAGO APPS MEMOのブログタイトル部分をこんな感じ↓にしてみようと思います。 ※このブログは、WordPress 3.4.2です。 といっても何かをインストールするわけではなく、 Adobe Edge Web Fonts に行って、フォントを選んで、ソースをコピ
HTMLコーディングの次世代標準機能を備えるエディタ 先日紹介したAdobe Edge Tools & Servicesのエディタ担当Adobe Edge Codeを紹介します。対応OSはWindowsとMac OS Xで現在プレビュー版で無償で使うことができる。 先行して公開されているオープンソースプロジェクトBracketsをコアに採用しており、革新的な機能が備わっている。次世代エディタの標準となりそうな機能の解説を盛りだくさんでみていこう。 尚、ショートカットはMacベースで説明します。Winの方は適宜CmdをCtrlに読み替えてください。 HTMLファイル上から各タグのCSSを直接オープン これは感動的過ぎる。HTMLファイル内のスタイルを編集したいタグにカーソルを合わせ、Cmd + Eを叩くと、なんと直下にCSSの定義が呼び出されて表示される。奇跡だ。 なぜこの機能を今まで他のエ
HTML／CSS／JavaScriptに関する基礎知識や、WebサイトやWebアプリのテストの経験。 必要なアドビ製品 Adobe Edge Inspect Download / Learn more 他に必要な製品 Google Chrome Download Adobe Edge Inspect Chrome拡張機能 Download モバイルサイトを構築した経験をお持ちであれば、様々なデバイスでのテストやデバッグ作業がいかに面倒で、時には苦痛だということをご存じでしょう。こうした状況を改善するのために役立つのが、「Adobe Edge Inspect」です。Edge Inspectを使えば、様々なデバイスでのブラウジングを簡単に制御できるにようになります。また、デバッグや検査用のツールも用意されているので、サイト表示において問題があれば、その原因を的確に見つけることができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く