軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

「Smokescreen」Webサイト スマートフォンなどの組み込み系デバイスでのFlashサポートが話題になっているが、ここにきて新しい技術がオープンソースとしてデビューを飾ろうとしている。Flashの代替技術が開発されつつあるのは多くが知るところだが、今回紹介する「Smokescreen」はFlashそのものを排除するのではなく、HTML5とJavaScriptを組み合わせてFlashコンテンツを再現しようというものだ。 AppleがiPhone OS上でのFlash非サポートを宣言する一方、GoogleやOperaなどのベンダーがFlashサポートを改めて明言するなど、業界内部でFlashを中心とした対立構図ができあがりつつあることが大きな話題になっている。だが実務レベルの話でいえば、これまでさまざまな場面で利用されてきたFlashをいきなり丸ごと排除するのは現実的ではなく、既存のサ

ご使用のブラウザ環境では、本サイトが正しく表示できない可能性があります。 以下の注意点を確認し、必要な設定を行った上で再度表示してください。 ブラウザの JavaScript 設定を有効化してください。 最新の Adobe Flash Player をインストールしてください。

CSS Nite in FUKUI, Vol.3のミニセッションで、「これからWebデザインをはじめたい人向けの学習プラットフォームについて」と題し、短大での実践と地元のコミュニティについてお話させていただきました。 その中で、短大での授業で採用させていただいているProgressionについても紹介させていただきました。 （10月31日に参加させていただいたWCAN mini ActionScript Vol.13「名古屋でProgression！」では、本発表の一部（短大での実践部分）を拡充し「Webデザイン・ビギナー向けプラットフォームとしてのProgression」というタイトルで発表させていただきました。） Continue reading YouTubeのアノテーション機能を使って、コンポーネントスタイルでのビデオチュートリアルを作ってみました。 ビデオチュートリアルの制作手順

目次 はじめに 独自のタグが横行する分野 XHTML/HTML の規格の範囲内でどうするか embed → object の書き換え どう書き換えるか 注意点 記述例 applet → object の書き換え 記述例 DOM / ECMAScript を用いた動的制馭 要素を生成させてみる Netscape 6/7, Mozilla の場合 MSIE の場合 動的なパラメータ設定 MSIE 5.x (Win)での注意点 Flash の LiveConnect を使ってみる 動的に生成された Flash を制馭する はじめに 独自のタグが横行する分野 Web 上でのプレゼンテーションとして、音楽やムービーを HTML 文書内に埋め込む手法がよく用いられています。 よく MSIE では object タグを、 NN では embed タグを使いましょう という話が Web 制作サイトなどで挙

Mac版FlashでProgression(拡張機能[MXPやJSFL])がインストール(アップデート)できない！ 2009年09月12日 （土） ActionScript/Flash | Mac/PC/Soft Mac版 Flash CS3 (9.0) Extension Manager 1.8.169にて発生した問題。 独自のフレームワークでフルFlashサイト作り機会が多かったんですけど、今回動的に動かす部分が多かったためProgressionを使用することにした。しかしProgressionのバージョン 3.1.52 と古かったため最新にアップデートしよう MXP 形式にてダウンロード。それをAdobe Extension Managerで無事アップデート完了。 Adobe Extension Managerでの表記も最新バージョンになっている。しかし、Flashを起動してもPro

仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 AS2版のほうはこちらのサイト様を参照しました。 テキストくるくるライブラリ - pandajustice.jp ソースを読めば以外と簡単。 もうちょっと簡潔＆仕様追加してAS3に移植してみました。 package { import flash.display.DisplayObjectContainer; import flash.text.TextField; import flash.events.Event; public class RandomText { private var sourceTxt:String = "_/-=+%&$#!?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

DataGridに表示した値を編集したいとき 例：「edit」をクリックすると編集モードになる サンプルはもう一つの私のサイトにて公開 コード import fl.data.DataProvider; import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridCellEditor; import fl.controls.dataGridClasses.DataGridColumn; import fl.controls.listClasses.ListData; import fl.events.DataGridEvent; var editFLG:Boolean = false; //var arr:Array = [{col1:"1.A", col2:"1.

Adobe® Flash® CS4 Professional http://help.adobe.com/ja_JP/Flash/10.0_Welcome/ Adobe ActionScript 3.0 のプログラミング http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/ ActionScript 3.0 言語およびコンポーネントリファレンス http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/

Flash制作を簡単にする ActionScriptライブラリとは？ 特集：Flasherに便利なオープンソース「Spark project」 Spark project コミッタ 新藤 愛大 2008/12/10 「ActionScriptライブラリ」って何？ 読者の方は、Flashを使った複雑なアニメーションの制作をどのように行っているのでしょうか。ActionScriptコードを勉強して一から制作していますか？ そんな人にこそ知っておいてほしいことがあります。実は、オープンソースの「ActionScriptライブラリ」を使うと、無料で簡単に複雑な機能・動きが実現できるのです。 ActionScriptライブラリとは、一言でいうと、「みんなが使えるように公開されているActionScriptコード」のことです。 イマイチピンと来ませんか？ そんな人でも、「Tweener」「Paperv