POPSブログ

CreateJSに関する記事の案内

254

  Category:  javascript2013/10/09 pops 

CreateJSで作る、当方ブログ記事などの案内です。

 

CreateJSで作る、当方ブログ記事などの案内です。殆んどが画像に関わるものですが、テキストアニメーション関連も有ります。当方では「1つの作品」として掲示しています。
ワタクシ、CreateJS に関しては「初心者」で有りますから、マチガイなど有りましてもご容赦ください。
easeljs-0.6、easeljs-0.7、の記事が混在していましたが。2013/10/23 全て easeljs-0.7 用に更新しました
easeljs-0.8に、バージョンアップしましたので、問題のある部分は修正追加しました。2015/03/23

 

CreateJS記事の案内


[デモ]はブラウザ、モニターなどにより動作、表示品質などに違いが有りますのでご了承下さい。
(2015/03/23現在のまとめ)


尚、当方の「家庭の事情」により「タッチ端末」には対応していませんのでご了承下さい(超貧乏のため対応未定、1000年後位にはなんとかしたいナ)。
よって、問題のある場合は、自己解決してください。

 


[ CreateJS記事の案内 目次 ]


 

注意、この案内ページの更新が遅いため、新しい記事が記載されていない場合もあります。

最新CreateJS記事のIndex: CreateJS (Tag) を参照下さい。

 

 

easeljs-0.7バージョンUPに伴う変更点


CreateJS バージョンUP(easeljs-0.7)に伴う「デモ」の変更点

EaselJSなどバージョンUPされました(easeljs-0.7)、EVENTなどの部分が大きく変更された所も有りますので、easeljs-0.7に対応させるため、当方の「デモ」JSの補正する箇所などを記載します。
(2013/10/23、CreateJS関連記事全てを easeljs-0.7 用に更新終了しました)


▲[ 目次 ]


その他のCreateJS関連記事


CreateJS easeljs-0.8 LoadQueueクラスでの画像表示の変更など

CreateJS 透過PNG画像の中の部分に陰影処理する (easeljs-0.7)

CreateJS CanvasエレメントでCompositeOperation合成テキスト表示 (easeljs-0.7)

CreateJS ステージのキャプチャーと複数コンテナを合成し画像に変換 (easeljs-0.7)

CreateJS キャプチャー画像 表示と 画像保存 (easeljs-0.7)

CreateJS Reflection 鏡面効果 (easeljs-0.7)

CreateJS Chromeでの shadowフィルター と、Opera での drawRoundRect の不具合の修正 (easeljs-0.7)

CreateJS コンテナ継承Sliderクラス (easeljs-0.7)

CreateJS Sliderパーツ、簡易3種を作ってみた (easeljs-0.7)

CreateJS ボタンでその都度、任意に画像を読み込みクロスフェード表示する (easeljs-0.7)

CreateJS Graphicsクラスの beginBitmapFill() を考える (easeljs-0.7)

CreateJS 「角丸RoundRectボタン」「shadowフィルター」の振る舞いなどを考える (easeljs-0.7)

CreateJS、で「TickerクラスのaddEventListener設定」を考える (easeljs-0.8)

CreateJS、で「ステージのレイアウトと画像Bitmapの書き換え」を考える (easeljs-0.8)

CreateJS、で「画像をロードして表示する」を考える (easeljs-0.8)


▲[ 目次 ]


コンテナ継承クラス利用のLoading表示関連の記事


CreateJS コンテナ継承クラスProgressBar組み込みLoading表示(easeljs-0.8)

CreateJS コンテナ継承クラスのLoading表示3(easeljs-0.8)

CreateJS コンテナ継承クラスのLoading表示2(easeljs-0.8)

CreateJS コンテナ継承クラスのLoading表示(easeljs-0.8)


▲[ 目次 ]


WebAPI利用関連の記事 (Flickr他)


CreateJS FlickrAPI LoadManager読み込みタグ検索画像表示 (easeljs-0.8)

CreateJS FlickrAPI「キーワード入力画面」付きのワード検索とImage()クロスドメイン画像表示 (easeljs-0.8)

CreateJS FlickrAPI「タグ入力画面」付きのタグ検索とImage()クロスドメイン画像表示 (easeljs-0.8)

CreateJS FlickrAPI「タグ入力画面」付きのタグ検索画像表示 (easeljs-0.8)

CreateJS FlickrAPI photos.search メソッドのキーワード検索画像表示 (easeljs-0.8)

CreateJS FlickrAPI jQuery.getJSON画像表示とオーナーページにリンク (easeljs-0.7)

CreateJS FlickrAPI photos.search メソッド利用のjQuery.ajax()画像表示 (easeljs-0.7)

CreateJS FlickrAPI photos.search メソッド利用のjQuery.getJSON画像表示 (easeljs-0.7)

CreateJS FlickrAPIのデータをjQuery.getJSONで読み込み画像を表示する (easeljs-0.7)

CreateJS Bjin.Me APIのデータをjQuery.ajax()で読み込み画像を表示する (easeljs-0.7)


▲[ 目次 ]


CreateJS WebフォントとSVG関連の記事


CreateJS canvgでSVGをラスター画像に変換してBitmap表示 (easeljs-0.7)

CreateJS 日本語WebフォントとSVGの表示 (easeljs-0.7)

CreateJS 日本語Webフォントの表示 (easeljs-0.7)

CreateJS フォントマスクと、Webフォントテキストアニメーション2 (easeljs-0.7)

CreateJS フォントをGraphicsクラスで描画する (easeljs-0.7)

CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正 (easeljs-0.7)

CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する (easeljs-0.7)

CreateJS Google WebFont OUTLINEテキストアニメのシミュレーション (easeljs-0.7)


▲[ 目次 ]


CreateJS OUTLINEテキストアニメーション


CreateJS Canvasエレメント描画OUTLINEテキストを補正しアニメーション (easeljs-0.7)

CreateJS Canvasエレメント描画のOUTLINEテキストアニメーション (easeljs-0.7)

CreateJS OUTLINEテキストアニメーション (easeljs-0.7)


▲[ 目次 ]


CreateJS 大型画像スライド MENU


CreateJS 大型画像分割(スライス) 2重DOORタイプ MENU (easeljs-0.7)

CreateJS 大型画像 ダブルスライド形式 MENU (easeljs-0.7)

CreateJS 大型画像 Carouselタイプ(Slider) MENU (easeljs-0.7)

CreateJS 大型画像スライス DOORタイプ MENU (easeljs-0.7)

CreateJS 大型画像Transition MENU (easeljs-0.7)

CreateJS 大型画像スライス(画像分割)、スライドMENU (easeljs-0.7)

CreateJS 大型画像スライドMENU 2 (easeljs-0.7)

CreateJS 大型画像スライド (MENU) (easeljs-0.7)


▲[ 目次 ]


CreateJS アコーディオン


CreateJS アコーディオンMENUと画像クロスフェード、ステージ1つのOverlayタイプ (easeljs-0.7)

CreateJS アコーディオンMENUと画像クロスフェード (easeljs-0.7)

CreateJS アコーディオン、DOMElement装飾ラベル、CLICKアクション形式 (easeljs-0.7)

CreateJS アコーディオン、DOMElement表示、HOVER(rollover)形式 (easeljs-0.7)

CreateJS アコーディオン、画面装飾HOVER(rollover)形式 (easeljs-0.7)

CreateJS アコーディオン 大型画像 HOVER(rollover) 形式 (easeljs-0.7)


▲[ 目次 ]


角丸多角形の描画とGraphicsクラスを拡張して描画


CreateJS Graphicsクラスを拡張 コーナー装飾矩形(Rect)描画 (easeljs-0.7)

CreateJS Graphicsクラスを拡張 Round PolyStar 角丸多角形の描画 2 (easeljs-0.7)

CreateJS Round PolyStar 角丸多角形の描画 (easeljs-0.7)

▲[ 目次 ]


CreateJS Canvasエレメント描画テキストのBitmap表示


CreateJS Canvasエレメント描画の TextCircle (サークルテキスト)等を作る (easeljs-0.7)

CreateJS Canvasエレメント描画の3D風テキストを作る (easeljs-0.7)

CreateJS Canvasエレメント描画のOutlineテキストをBitmapクラスで表示する (easeljs-0.7)

CreateJS Canvasエレメント描画のWebFontテキストをBitmapクラスで表示する (easeljs-0.7)

CreateJS Canvasエレメント描画のテキストをBitmapクラスで表示する (easeljs-0.7)


▲[ 目次 ]


CreateJS BitmapData


CreateJS BitmapData テキストパーティクル 2 (easeljs-0.7)

CreateJS BitmapData Textパーティクル (easeljs-0.7)

CreateJS BitmapData モザイク (easeljs-0.7)

CreateJS BitmapData 1ピクセルに分解してパーティクル (easeljs-0.7)


▲[ 目次 ]


Matrix 3D Carousel


Matrixの変更が大きいのでeaseljs-0.8用に新規に書き換えました。

CreateJS Matrix円周配置インスタンス回転(easeljs-0.8)

CreateJS 3D風TEXT文字Carousel表示(easeljs-0.8)

CreateJS 3D風Carousel画像拡大表示(easeljs-0.8)

CreateJS 3D風画像CarouselのBlur処理(easeljs-0.8)

CreateJS 3D風画像Carousel表示(easeljs-0.8)

CreateJS 3D風Carousel円周配置のインスタンスを回転させる(easeljs-0.8)

CreateJS Matrixで円周配置の図形Shapeなどを回転(easeljs-0.8)


CreateJS 3D Carousel もどき、画像のBlur処理 (easeljs-0.7)

CreateJS 3D Carousel もどき、とテキストの組み合わせ (easeljs-0.7)

CreateJS 3D Carousel もどき、と画像拡大の組み合わせ (easeljs-0.7)

CreateJS 3D Carousel もどき、Matrix2Dで画像などを回転させる (easeljs-0.7)

CreateJS 3D Carousel もどき、Matrix2Dで円周上に配置したインスタンスを回転させる (easeljs-0.7)

CreateJS Matrixで円周上に配置した図形Shapeなどを回転 (easeljs-0.7)


▲[ 目次 ]


Loading Shape


CreateJS Loading 円周上にgraphicsラインを描画し、Shapeを回転させる簡易形です (easeljs-0.7)

CreateJS Loading 円周上にShapeを配置し、コンテナを回転させる簡易形です (easeljs-0.7)

CreateJS Loading Shape (弧状) 回転テスト3 (easeljs-0.7)

CreateJS Loading Shape 回転テスト2 (easeljs-0.7)

CreateJS Loading Shape 回転テスト1 (easeljs-0.7)


▲[ 目次 ]


Transition Maskエフェクト


CreateJS 画像分割とTransitionMask等を組み合わせてアニメ表示する2、番外編 (easeljs-0.7)

CreateJS 画像分割とTransitionMaskを組み合わせてアニメ表示する、番外編 (easeljs-0.7)

CreateJS Transition Mask マスク要素を組み合わせてアニメ表示する、番外編 (easeljs-0.7)

CreateJS Transition Mask 形状の違うマスク要素を組み合わせてアニメ表示する (easeljs-0.7)

CreateJS Transition Mask 6角形(hexagon)マスク処理してアニメ表示 (easeljs-0.7)

CreateJS Transition Mask 画像を複数のShapeでマスク処理してアニメ表示B (easeljs-0.7)

CreateJS TransitionMask 画像を複数の分割Shape()でマスク処理してアニメ表示する (easeljs-0.7)


▲[ 目次 ]


新型ボタン、画像ボタン


CreateJS MouseOverで背景を変化 ラベルを中心に配置した drawImage() で画像分割したボタン (easeljs-0.7)

CreateJS MouseOverで背景を変化 ラベルを中心に配置した SpriteSheet 利用の画像ボタン (easeljs-0.7)

CreateJS ラベルを中心に配置し、MouseOver で背景を変化させるボタンを考える (easeljs-0.7)


▲[ 目次 ]


テキストアニメーションと組み合わせ


CreateJS WebFont テキストアニメーション (easeljs-0.7)

CreateJS テキストアニメーション 祝賀用豪華3段重ね (easeljs-0.7)

CreateJS テキスト背景に図形を挿入して(MotionGuide Tween)テキストアニメーション (easeljs-0.7)

CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する (easeljs-0.7)

CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色) (easeljs-0.7)

CreateJS 画像フェード、テキストアニメーションとレインボー色 (easeljs-0.7)


▲[ 目次 ]


MotionGuideテキストアニメーション


CreateJS MotionGuidePlugin利用、複数のガイドパス登録でテキストをMotionTweenさせる (easeljs-0.7)

CreateJS MotionGuidePlugin 利用してサムネール等を、パスに沿ってMotionTweenする (easeljs-0.7)

CreateJS MotionGuidePlugin を利用した複合、組み合わせ、テキストアニメーションの一例です (easeljs-0.7)

CreateJS MotionGuidePlugin 利用して、テキストアニメーションを作る一例です (easeljs-0.7)

CreateJS MotionGuide利用、テキストアニメーションのシミュレーション (easeljs-0.7)


▲[ 目次 ]


サークルアニメーション


CreateJS 図形テキストをアニメーション、Tween 連続操作と MotionGuideTween の組み合わせ (easeljs-0.7)

CreateJS グラデーション図形を円周配置た、サークルアニメーション、Tween連続操作 (easeljs-0.7)

CreateJS 図形を円周に配置した、サークルアニメーション、Tweenをwait()で連続操作する(虹色) (easeljs-0.7)

CreateJS 「サークルテキスト」アニメーション、Tweenをwait()で連続操作する(虹色) (easeljs-0.7)

CreateJS 「サークルテキスト」アニメーション、レインボー色(虹色) (easeljs-0.7)


▲[ 目次 ]


CreateJS LightBox


CreateJS wicks方式サムネール、LightBoxタイプ、フルサイズ表示 (easeljs-0.7)

CreateJS 画像拡大ビューア、サムネールDrag対応 LightBoxタイプ、フルサイズ表示 (easeljs-0.7)

CreateJS 画像拡大ビューア、サムネールDrag対応 LightBoxタイプ (easeljs-0.7)


▲[ 目次 ]


画像拡大ビューア


CreateJS 画像拡大ビューア、サムネールDrag対応 キャンバスサイズ自由形 (easeljs-0.7)

CreateJS 画像拡大ビューア、サムネールDrag対応 (easeljs-0.7)


▲[ 目次 ]


ボタン、ボタンとの組み合わせ


CreateJS 角丸RoundRect 画像埋め込みボタンのactive時背景色を変える(最新) (easeljs-0.7)

CreateJS 角丸RoundRect rolloverボタンのactive時背景色を変える(最新) (easeljs-0.7)

CreateJS マウスオーバーCircleボタンと「画像分割表示」active対応、タイマー形式 (easeljs-0.7)

CreateJS マウスオーバーRoundRectサムネールボタン表示 active対応 (easeljs-0.7)

CreateJS マウスオーバーCircleボタン表示active対応 (easeljs-0.7)

CreateJS RoundRectマウスオーバーボタンのactive時の変化を考える (easeljs-0.7)

CreateJS 画像埋め込み、角丸RoundRectマウスオーバーボタンを考える (easeljs-0.7)

CreateJS Gradient 角丸RoundRectマウスオーバーボタンを考える (easeljs-0.7)


▲[ 目次 ]


画像フエード、スライド


CreateJS 画像スライド、アニメーション DOMElementクラスでテキスト表示 (easeljs-0.7)

CreateJS-Canvas画像クロスフェード、一括画像読み込み、タイマー形式 (easeljs-0.7)


▲[ 目次 ]


画像分割、トリミング


CreateJS sourceRect 画像トリミング (easeljs-0.7)

CreateJS 画像を分割(複数)してBitmap処理、Tweenさせる処理を考える (easeljs-0.7)

CreateJS 画像をトリミング(又は分割)してBitmap処理、Tweenさせる処理を考える (easeljs-0.7)


▲[ 目次 ]


画像分割アニメーションとボタンの組み合わせ


CreateJS 画像分割アニメと、スイッチ風Circleボタン、サムネール表示の組み合わせ (easeljs-0.7)

CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ B (easeljs-0.7)

CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ (easeljs-0.7)


▲[ 目次 ]


画像分割アニメーション


CreateJS 画像分割とテキストアニメーションの組み合わせ (最新) (easeljs-0.7)

CreateJS 画像分割アニメーション、一括画像読み込み、toDataURL()を使用しない方式 (easeljs-0.7用)

CreateJS-Canvas画像分割アニメ、一括画像読み込み単純階層化、タイマー形式 (easeljs-0.7)

CreateJS-Canvas画像分割アニメ、回れ回れオマワリさん、タイマー形式 (easeljs-0.7)

CreateJS-Canvas画像分割アニメ、ドアタイプ追加のテスト、タイマー形式 (easeljs-0.7)

CreateJS-Canvas画像分割アニメーションのテスト、タイマー形式 (easeljs-0.7)


▲[ 目次 ]



以上、CreateJS記事の案内でした。

 


[ この記事のURL ]


タグ:CreateJS , memo , javascript

 

ブログ記事一覧



[1]