HTML&CSSでゲージ(プログレスバー)を作るサンプルコード2種

いずれもjavascriptで値を書き換えるとアニメーションしながら伸縮します。

パターンA(簡易版)
以下のようなケースで使います。

  • ブラウザ負荷を軽くしたい(スマホ用)
  • 正確な表示じゃなくてもOK

Sample

Loading…70%

HTML

<div id="gauge" style="-moz-background-size: 70% 100%;-webkit-background-size:70% 100%;-o-background-size: 70% 100%;background-size: 70% 100%;">Loading...70%</div>

CSS

#gauge {
  width: 100px;
  height: 12px;
  padding: 1px 4px;
  border: 1px #000 solid;
  font-size: 10px;
  line-height: 12px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
  background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  -moz-transition: background-size 1s;
  -webkit-transition: background-size 1s;
  -o-transition: background-size 1s;
  transition: background-size 1s;
}

javascriptでゲージの長さを変える時はHTMLのbackground-sizeの”70%”の部分を書き換えます。
横幅を0%にした時、iOSのSafariではゲージの色が1px見えてしまうため1pxのborderを付加しています。
(backgroundはborderの背面に回り込むので、1pxのゲージが見えなくなる)。
そのため見た目上は±2%の誤差が出ますが、0%が1%になるよりは誤解されにくいのでこうしています。
より正確な表示をするならBパターンを使った方がベター。

パターンB(詳細版)
以下のようなケースで使います。

  • パターンAより正確な表示がしたい
  • 装飾したい(ゲージ部分にbackground-imageをrepeatさせたり、背景にグラデーションをつけたり)
  • CSS3非対応ブラウザを対象にする場合

Sample

Loading…70%

HTML

<div id="gauge-wrapper">
  <div id="gauge" style="width: 70%;">Loading...70%</div>
</div>

CSS

#gauge-wrapper {
  position: relative;
  width: 100px;
  height: 14px;
  border: 1px solid #000;
  background: #666;
  background: -moz-linear-gradient(top, #666 0%, #000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#000));
  background: -webkit-linear-gradient(top, #666 0%,#000 100%);
  background: -o-linear-gradient(top, #666 0%,#000 100%);
  background: -ms-linear-gradient(top, #666 0%,#000 100%);
  background: linear-gradient(to bottom, #666 0%,#000 100%);
}
#gauge {
  position: absolute;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: #6db3f2;
  background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
  background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;

javascriptでゲージの長さを変える時はHTMLのwidthの”70%”の部分を書き換えます。
position: relative; と position:absolute; は省略可能ですが、
widthの書き換え時にブラウザのリフローが発生して描画の負荷が大きくなるので付けます。

jQueryでタブ切替を実装する5行のjavascript

その場限りのページで時々使うタブ切替のサンプルコード。

HTML


<ul id="tabs">
    <li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
    <li>タブB</li>
</ul>

<section class="content">
    <!-- タブAの内容 (初期状態では表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブBの内容 (初期状態では非表示 -->
</section>

javascript


var $tabs = $("#tabs li");
$tabs.click(function(){
    $(".content").hide().eq($tabs.removeClass("on").index(this)).show();
    $(this).addClass("on");
});

タブと内容はHTMLソース上での並び順を合わせる必要があります。
2番目の#tabs li が選択された時に2番目の.content が表示される仕組みです。

タブの増減はhtml側の編集のみ。


<ul id="tabs">
    <li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
    <li>タブB</li>
    <li>タブC</li>
</ul>

<section class="content">
    <!-- タブAの内容 (初期状態では表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブBの内容 (初期状態では非表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブCの内容 (初期状態では非表示) -->
</section>

こうするとみっつになります。

list-style-typeの代替メモ

list-style-typeでdescやdecimalを使うと、
マーカーの表示位置がブラウザによって異なるため要素の位置が揃いません。
これを揃えるには、list-style-typeの代わりにCSSでマーカーを付けます。

ul (list-style-type:desc; の代替)


ul {
  list-syule-type: none;
}
ul li {
  position: relative;
  padding: 0 0 0 1.4em;
}
ul li:before {
  content: "・";
  position: absolute;
  left: 0;
}

ol (list-style-type:decimal; の代替)


ol {
  counter-reset: num;
  list-syule-type: none;
}
ol li {
  counter-increment: num;
  position: relative;
  padding: 0 0 0 1.4em;
}
ol li:before {
  content: counter(num)".";
  position: absolute;
  left: 0;
}

[WordPress]本文中の記事タイトルに自動で内部リンクを張る方法

はてなキーワードやニコニコ大百科みたいな記事内リンクをWordpress内で行う方法です。

内部キーワードリンクは以前「SEO smart link」で作成していましたが、いつの間にか外れてしまった(あと、日本語も使えなくなっていた)のでWP Keyword Link で張り直しました。

以下、手順メモ。

1.プラグイン導入
プラグイン画面から「Export to Text」「WP Keyword Link」で検索、
または各配布サイトから入手してインストール&有効化。

2.記事名とURLのセットをTXT形式でエクスポート
Tools > Export to Text から エクスポートしたいデータを選択します。
私の場合はブログ記事内に美術用語が出てきたらその記事にリンクしたいので、
・「Category」で「美術用語」以外のチェックを外す
・「Select And Reorder Data To Generate:」で「Title」と「Permalink」以外のチェックを外す
の設定にし、その他の設定項目は全て「All」としました。
「Generate Preview」で出力イメージを確認できたら、
「Download as TXT file」から記事名とURLが対になったtxtファイルをDLします。

3.エクスポートしたデータをWP Keyword Link に流し込み
2.で生成したテキストファイルをWP Keyword Linkの形式に書き換えます。
私の場合はテキストエディタで以下の作業を行いました。

・拡張子を.csvに書き換え
・設定項目(nofollowとか)を追加。日本語で使うためには「zh_Cn」を1にする
・1行目と最後の2行をサンプルデータからコピペ
・区切りのタブをコンマに置換
・URLとキーワードをダブルクオート(“)で囲む

あとは「Import and Export File」から「Import from file」を選択し、
作成したCSVファイルをアップロードして完了です。

後から追加した用語に対して自動でリンク追加はできませんが、
用語が増える予定もないので一旦これで済ませることにしました。

地塗り

ファンデーション絵具やジェッソを塗ること。
生キャンバスに地塗りを行うと発色や定着力、描き味が良くなる。

油彩用の地塗りには、シルバーホワイトが適している。
ジンクホワイトは亀裂や剥離につながる可能性があるので使わない。
チタニウムホワイトは地塗りにも使用できるが、人工的な白色があり乾燥も遅いため扱いにくい。
またフレークホワイト、ミキシングホワイトのように複数の白色を混ぜてつくられた絵具は、それぞれの白色の特性に左右される。

アクリル絵具や透明水彩等の水性絵具へは、アクリルジェッソが適している。
アクリルジェッソは多孔質でざらざらしているため、上から透明水彩を塗ってもはじかない。

錆漆

水で硬めのペースト状に練った砥の粉と、生漆を1:1で混ぜ合わせたもの。
パテのように使用し、陶器の欠損部分を埋めるのに使用する。

糊漆

でんぷん糊と生漆を1:1で混ぜ合わせたもの。
金継ぎなどで、陶器の繋ぎ合わせる際の接着剤として使われる。

でんぷん糊には炊いた白米を潰した糊や、強力粉や上新粉を煮た糊が使われる。
硬さを増すために砥の粉を加えたり、防腐剤としてホルマリンが添加されることもある。

金継ぎ

陶器や磁器の修理方法の一種。
糊漆で割れた部分を接着したり、錆漆で欠損部分を補修し、漆と金粉で仕上げを行う。
金粉の代わりに銀粉を使用したり、金属粉を使用せず色漆で仕上げる場合もある。

Flash Liteで作成したswfファイルのテスト・動作確認まとめ

PC版Flash Playerでは、携帯向けに作成したデータの確認ができません。
例えば、
・携帯では動かないような重いデータでも動作してしまう
・携帯専用のActionScriptが動作しない
などの違いがあります。

そのため専用のツールや実機を使用して検証を行います。
この記事では3パターンの確認方法を書いています。

 PC上でのエミュレーション実機確認デバッグ用のツールを使用する
メリット様々な環境でどう動作するか見られるPC上では再現しきれない不具合もカバーできる不具合の原因箇所がわかりやすい
デメリット実機と動作が完全に一致しない場合がある本体や確認環境を用意しないと検証ができない扱うのに知識が必要

PC上でのエミュレーション

Adobe Device Centralを使用する
CS3以降のFlashやPhotoshopに付属するツールです。
機種ごとのプロファイルが用意されていて、各機種でのメモリ使用量やエラーログ、スクリプトの動作状況を見られます。
iモードHTMLシミュレーターIIを使用する (Windowsのみ)
docomoから提供されている無料の開発用ツールです。
fscommand2で取得できる値をツール側で設定できます。
電池最大容量等も変更できるため、au、softbank向けのデバッグができます。

実機確認

実機でswfファイルをダウンロード&再生する方法は、各キャリアごとに異なります。

docomoswfをサーバーにアップロード後、DL
auPCからswfファイルをメール添付
swfをサーバーにアップロード後、DL
待受として設定したり、データフォルダからすするには、実行できます。
Softbankswfをサーバーにアップロード後、ブラウザで開く
Softbankはデータフォルダ内でキー入力を拾えないため、ASでoncommandを使用している場合の動作検証はブラウザで行います。

デバッグ用のツールを使用する

・trace関数を使う
 ActionScriptの関数のひとつで、動作確認に使われます。
 ASの動作がわからない時、変数にどんな値が代入されているかが見られます。

Flash Decompiler Trillixを使用する
 swf内部の画像やシェイプ、AS等を見られるツールです。
 動作がおかしい場合の不具合箇所を見つけるのに使います。

今からFlashLiteを始める人にこれは読んでおけと薦めるリンク集

FlashLite初心者の時に参考にしていたサイトのメモが出てきたので、まとめました。
はじめてFlashに触れるデザイナー向けなので、慣れてる方は(3)あたりから読んでください。

(0)Flash Liteについて

携帯向けのFlashです。待ち受け、Flashゲーム、きせかえ、携帯向けサイト、デコメなどで使われています。
バージョンが1.0から3.1までありますが、古い機種にも対応させるため1.1が主流。次に2.0。
この記事はだいたい1.1向けに書いています。

(1)ソフトを揃える

Flash(swfファイル)を作成するためのソフトと、作成したデータを確認するためのソフトを用意します。

●作成ツール
・Flash MX 2004以降のFlashが、FlashLite1.1に対応しています。
MX2004またはFlash8では、Professional版を使用してください。
お手持ちのFlashがBasic版かMX2004以前の場合は、Flash4でパブリッシュすると携帯でも動きます。
これはFlash Lite1.1が、Flash4を基にして携帯用のスクリプトが動くように拡張されたものだからです。
Flash4で携帯向けのActionScriptを書くとパブリッシュ時にエラーが出ますが、書き方さえ合っていればちゃんと動作します。

・フリーソフトで揃えるならPalaFla、またはSuzukaが使えます。
この記事ではFlashMX 2004以降での参考URLを貼っていますので、適宜読み替えてください。

●動作確認用のツール
Adobe Device Central
端末上での動作をシミュレーションでき、Heapメモリ消費量も見られます。
FlashCS3以降に付属しています。

iモードHTMLシミュレータII
携帯向けFlashのシミュレーションができます。
電池電波や時刻表示関連の値を変更することができ、待受Flashのテストに最適。
電池電波は最大値の変更ができますので、auやSoftBank向けのActionScript検証にも使えます。

(2)アニメーションするデータを作れるようになる

FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト Flashの枝
パソコンで再生するためのFlashの作り方を説明しているサイトですが、基本的な操作方法を覚えるのに便利なので挙げています。
こちらの目次の「シンボルとインスタンス」から「マスクとは?」までを一通り読んで、更に余裕があれば「ActionScript とは?」から「gotoAndStop() gotoAndPlay()」までを読んでください。
上に挙げなかったページは、Flashの操作に慣れるまではまだ読まないことをおすすめします。
パソコン向けのFlashと携帯向けのFlashでは、少しずつできる事が違います。
このサイトには携帯Flashで出来ないことも書いてありますので、全てのページを読むと混乱してしまうかも。

(3)時間や電池残量で表示の変わる待受の作り方を覚える

動く待ち受けはFlashの操作を覚えれば作れますが、
電池残量によって絵柄が変わる待受や、時計付きの待受を作るにはActionScript(AS)という簡単なプログラムを書く必要があります。

Design Flash Wall Gallery!
FlashLite1.1でサンプル付きのActionScriptリファレンスがあります。
最新機種に合わせるにはちょっと記述が古い(09年11月現在)ので、_level0.KAYACのまとめ記事や、このブログの記事もあわせて読んでください。

(4)もっと詳しく

ここまで挙げた記事よりも、もう少し細かいことの書いてある入門記事です。
Flash Lite 1.0/1.1メモ
Flash Lite入門講座 第1回 日本のFlash Liteの仕様
Flash Lite 1.1 の基本が分かる8つのポイント

待ち受け制作でハマりがちなこと

FlashLiteでも特に待受で起こる事についてメモ。
Flash全般の問題は「Flash Lite1.1のバグ?とその対処法」を参照ください。

音量に連動するActionScriptは使用しない

待ち受けでは、fscommand2(“GetVolumeLevel”);が動作しません。
待受設定時のFlashでは、音が鳴らない仕様で音系関数の戻り値も0(またはサポート外)です。

画像の大きさはFlash上で変更しない方がよい

一部機種では、待受の表示に時間がかかったり、「展開中」と表示されることがあります。
ビットマップ画像が原寸よりも拡大(縮小)されている時に起こりやすく、
何らかレンダリングが上手くいかない機種があるのだと思います。

画像はscaleの変更や回転をせずに原寸で配置します。
変更の必要がある場合はPhotoshop等でリサイズしたものを使用してください。
また、幅240(QVGA)の機種と幅480(VGA)の機種ではファイルを分けてください。
幅240pxで制作した待受を、幅480pxの機種で表示した際にも
ビットマップ画像が原寸よりも拡大されて表示されていることになりますので、
機種によっては表示エラーを起こすことがあります。

Flashに4080pxを超える画像が正常に書き出せないバグがある?

Flashで[ファイル]→[書き出し]から静止画を保存する時に、大きさが4080pxをこえる画像が正常に書き出せませんでした。
結局どうにも解決策が見つからなかったのですが、試した事だけメモ。

状況

  • FlashProfessionalCS3+WinXP (Flash8Proでも発生)
  • シェイプ・ビットマップ・ダイナミックテキスト混じりのデータ
  • 高さ2080pxのムービーを解像度144dpi(2倍サイズ)で保存しようとした

保存した画像は左上(0,0)から数えてx軸方向・y軸方向ともに、4080px付近からノイズがかったように崩れ始め、4100px以降は透過または白になってしまいました。
ワークステージ、およびオブジェクトのサイズ上限(2880px)には触れていませんし、
書き出しできる画像のサイズ上限(8000x8000px)にも触れていないのでそのあたりに原因はなさそう。

やってみたこと

  • パブリッシュ設定を変えてみる
    →変わらず
  • 保存する形式を変えてみる
    • 静止画系(bmp、jpg、png、その他でオプションを変えながら保存)
      →変わらず
    • .aiで書き出し
      →シェイプは問題なく書き出せたが、ダイナミックテキストが途中で途切れてしまった。
      100個くらいある各テキストが、各行で頭の4文字くらいしかない。。
    • .epsで書き出し
      →IllustratorCS3で、「不明なエラーのため、操作を完了できません」と表示されファイルが開けない。
  • 横幅を変えてみる
    →変わらず。全体のピクセル数ではなく、一辺が4080px以上であることがお気に召さない様子。
  • 内容を変えてみる
    →長方形のシェイプが1枚置いてあるだけでも4080px以降の部分は崩れる。
  • 複数あったシンボルをひとつのシンボルにしてみる
    →変わらず
  • 書き出しの解像度を変更する
    →解像度にかかわらずビットマップ画像中で4080px以降の部分が崩れる

このあたりで諦めた。4080でぐぐっても出ないし何ぞこれ(´;ω;`)ブワッ

Flaファイル内の画像を取り出す方法3通り

(1)コピー&ペースト

 ・透過していない画像
 ・面積の小さいもの、または画質が多少劣化しても構わない場合
以上のような画像であれば、直接photoshop等の画像編集ツールにコピペできます。
その際、Flashの[編集]→[環境設定]→[クリップボード]を以下の設定にしてください。
 ・色深度…32ビットカラー(アルファチャンネル)
 ・解像度…72dpi
 ・サイズ制限…5000KB
画像編集ソフトの標準が72dpiであることが多いため、解像度が72dpi以外のものに設定されているとコピー&貼り付け前後で画像の縦横サイズ(px)が変わることがあります。標準では「画面サイズに合わせる」になっているので注意してください(windowsの標準は96dpiのためズレが生じます)。
画像が透過を含む場合は透過部分が黒く表示されてしまいますので、次の(2)(3)のいずれかの方法を使います。

(2)swfから画像を抽出する

 ・8ビットカラーの透過を含むPNG画像、透過しているGIF画像
 ・JPEG画像
以上のような画像は、一度swfにパブリッシュしてからHugFlashのようなswfから画像を抽出できるツールを使用するとファイルをまとめて取り出すことができます。
Flash上でJPEG画像の圧縮を使用していると、圧縮後の劣化した画像が取り出されます。
圧縮を使用しているかどうかは、[ライブラリ]パネルからプロパティを選択して確認できます。PNGやGIFの場合は[圧縮:]で[ロスレス]を選択、JPEG画像の場合は「読み込んだJPEGデータを使用する」にチェックを入れてください。
また、半透明を含む24ビットPNG画像を取り出した際には半透明部分の色調が黒色ががって見える場合があります。
その際は(3)の方法で画像を取り出してください。

(3)Flashの書き出しを使用する

・24ビットの半透明を含むPNG画像
・各種画像やFlash上のパスを画質を劣化させず正確に抽出したい
以上のような場合はFlashの書き出しを使用します。
1.新規作成したFlashのステージ上に取り出したい画像を配置します。
2.[ファイル]→[書き出し]→[イメージの書き出し]を選択します。
3.ダイアログで保存先とファイル名を指定し、種類をpngにして保存します。
4.次のダイアログで[解像度:72dpi]、[範囲:イメージサイズ]、[カラー:24ビット(アルファチャンネル)]を選択し、[OK]を押します。

携帯Flash向け:PNG画像の最適化バッチファイル

主にモバイルFlash向けに、PNG画像を減色→最適化するバッチファイルです。
アルファチャネル付きの24ビットPNG画像も減色、最適化できます。

使い方

  1. pngquantPNGrewriteOptiPNGPNGOUTをそれぞれダウンロードし、解凍します。
  2. 以下のコードをメモ帳にコピー&貼り付けします。
  3. SETLOCAL
    ::------------------------------------------------ここから設定項目
    ::何色きざみで減色を行うか、イコール(=)の右側に数値を半角で入力してください。
    SET /A color=16
    ::軽量化処理に使用する各ソフトのファイルパス(それぞれのソフトを解凍した場所)を、イコール(=)の右側に入力してください。
    SET pngquant=pngquant-0.95-win32\pngquant.exe
    SET pngrewrite=pngrewrite-1.3.0\pngrewrite.exe
    SET optipng=optipng-0.6.1-exe\optipng.exe
    SET pngout=pngout.exe
    ::------------------------------------------------ここまで設定項目
    md result\fullcolor
    copy "*.png" result\fullcolor\
    %optipng% result\fullcolor\*.png -o7
    for %%V in (result\fullcolor\*.png) do %pngout% /y %%V %%V
    for /L %%M in (%color%,%color%,256) do md result\%%Mcolor
    :LOOP
    SET /A clr+=%color%
    IF %clr% GTR 256 GOTO END
    %pngquant% %clr% *.png
    move "*-fs8.png" result\%clr%color\
    for %%R in (result\%clr%color\*.png) do %pngrewrite% %%R %%R
    %optipng% result\%clr%color\*.png -o7
    for %%V in (result\%clr%color\*.png) do %pngout% /y %%V %%V
    GOTO LOOP
    :END
    ENDLOCAL

  4. 説明にしたがい、設定項目を記入したらお好きなファイル名で保存します。
  5. 保存したテキストファイルの拡張子を「.txt」から「.bat」に変更します。
  6. このバッチファイル(.bat)と同じフォルダに最適化したいPNG画像をコピーします。
    圧縮したいPNG画像が複数枚ある場合は、すべてコピーしてください。
    (同じフォルダにあるすべてのPNGファイルが最適化されます)
  7. バッチファイルを実行すると、最適化処理が始まります。
    終了までしばらくお待ちください。
  8. バッチファイルのあるフォルダに、「result」という名前のフォルダができます。
    このフォルダの中に、減色&最適化済みのPNGファイルが色数別に保存されます。

利用上の注意

    変換後のPNGファイルはアルファチャンネル付きインデックスカラーPNGです。
    photoshop等の画像編集ツールで正常に開けない場合がございますので、必ずバックアップをとってください。

高圧縮になった分、展開にHeapメモリを消費しないかどうかが若干心配になり
こちらの記事のサンプルデータで比較してみたのですが、全く変わりませんでした。
どの圧縮方式を利用しても変わらないのかな。

このバッチファイルは各種最適化ツールを順番に実行しているだけなので、PNGgauntletやBlastPNGとやってる事は大体同じです。
重ねがけはそんなに意味がないので、最近はこれ1つで全て済ませています。

資料写真

自分用に撮った写真を素材として公開しています。
リンクをクリックするとSkyDriveに飛びますので、アイコンか「ダウンロード」をクリックしてzipファイルをダウンロード後、解凍してください。
利用に制限等はございません。クレジット表記も不要です。

動物の写真 (10枚)
 鯉、ゾウ、虎、猫、オランウータン、ペンギン、鴨、アヒル

街の風景 (35枚)
 空、建物、室内、電車、線路、駅、城、骨董市、標識、大仏、狛犬、教会、夜の風景、花火 など

自然の風景 (20枚)
 海、砂浜、海岸、入江、波打ち際、海鳥、空、夕陽、滝、川、水草、並木、木漏れ日 など

植物・花 (36枚)
 木立、樹木、木漏れ日、コスモス、バラ、ハイビスカス、あじさい、かすみ草、野ぎく、睡蓮、桜 など

ぼけ写真・ぶれ写真 (7枚)
 空、街灯、建物、自転車、信号 など (主にテクスチャ用途)

規格判寸法表

自分メモ。
規格判(A判、B判、郵便、印画紙、画面解像度、広告バナーサイズ)を携帯から見られるように画像にまとめました。
元々紙で持ち歩いていたのですが、使う頻度も減ったので携帯でいいかと。

http://pw6.jp/images/flash/777-kikaku.jpg

携帯からのアクセスの方は直接上のリンクで開けます。
PCからのアクセスの方はここから携帯宛にこのURLをメールできます。

モーショントゥイーンをActionScriptに置き換えると軽くなる

Flashではタイムラインが長くなるほどメモリを消費し、ファイルサイズも大きくなります。
ゆっくりとしたアニメーションでは長いモーショントゥイーンが使われることもありますが、これらはASで書いて軽量化できます。

サンプル:流れる雲(A、B)

このサンプルでは、インスタンス “cloud” がx座標-110に配置されています。
そこから約1分(12fpsで800フレーム)かけて右に500ピクセル動きます。

サンプルAではモーショントゥイーンを使って動かします。
サンプルBでは以下のASを1フレーム目に書き、2フレーム目ではcall(1);として同じスクリプトを実行。1フレーム目と2フレーム目をループさせています。
[code lang=”js”]
//1フレームに0.6ずつ右に動かす
//("cloud"のx座標プロパティに、0.6を加算して代入)
cloud._x += 0.6;
//雲が410pxよりも右に移動したら、-110pxへ戻してループさせる
//("cloud"のx座標プロパティが410以上になったら、-110を代入する)
if (cloud._x>410) {
cloud._x = -110;
}
[/code]

AとBの比較では、ファイルサイズは70.3KBから1.2KBに、
消費メモリは217~223KBから184~190KBになりました
(Flash CS3+DeviceCentralCS3+プロファイルW52Kで確認)。

使うプロパティを変えたり複数のプロパティを組み合わせて使えば、複雑なアニメーションもASで書けます。
以下、使いそうなプロパティ。

_x x座標。数値が増えるほど右へ移動
_y y座標。数値が増えるほど下へ移動
_alpha 透明度(%)
_height インスタンスの高さ
_width インスタンスの幅
_xscale インスタンスの横の拡大率(%)
_yscale インスタンスの縦の拡大率(%)
_rotation 回転。正の値で時計回りに回る。

FlashLiteのファイルサイズオーバー対策まとめ

そのうち補足を足さなくちゃとは思いつつメモ的に箇条書きで。
このブログ内に関連エントリがあるものはリンクを貼ってあります。

この対処法はファイルサイズを減らすためのものです。
こちらの対策を行うことで端末での再生に使用するHeapメモリが増えることがあります。
メモリオーバー対策まとめ記事もあわせて参照してください。

シンボル、シェイプ

Flash内のビットマップ画像の最適化

ActionScript

  • 複数フレームで同じASを実行する場合は1フレームにのみアクションを書いておき、他のフレームからはcall()でアクションが書いてあるフレームを呼ぶようにします。
  • できるだけ簡単なコードを書き、説明はコメント内に書きます。コメントはパブリッシュ後のswfファイルに含まれません。
  • 変数名とフレーム名はできるだけ短いものにします。

その他

FlashできれいなアニメGIFを作る

Flashで[ムービーの書き出し]を使用すると、Flashの機能を利用してGIFアニメを作れます。
直接アニメーションGIFを書き出すと減色や微調整がいまひとつなので、
まずFlashでフルカラーの静止画を書き出してからGIFアニメ化します。

まずFlashムービーを静止画+連番で書き出す

(1)[ファイル]→[書き出し]→[ムービーの書き出し]
(2)[ファイルの種類]で[PNG シーケンス(*.png)]を選択
(3)カラーには24ビットを選択し、[OK]を押します。

アニメーションGIFに変換する

◇Fireworksを使う場合(おすすめ)
(4-f)[ファイル]→[開く]で、連番で書き出された画像をすべて選択します。[アニメーションとして開く]にチェックを入れます。
(5-f)[ファイル]→[書き出しウィザード]→[書き出すファイル形式を選択]→[アニメーションGIF]を選択します。
(6-f)[オプション]でアニメGIFの色数や透過色を設定します。
(7-f)[アニメーション]のタブでフレームの表示時間、ループ等を設定します。
(8-f)[書き出し」から出来上がったアニメGIFを保存します。

Giam(フリーソフト)を使う場合
(4-g)画面左下の白い部分に、連番で書き出された画像をドラッグ&ドロップします。
(5-g)画面の右側で表示時間、ループ等を設定します。
(6-g)ファイルサイズの最適化を行う場合は、[編集]→[各コマサイズの最適化]を選択します。
(7-g)[ファイル]→[名前をつけて保存]から保存します。
※Giamで作ったアニメで、絵柄のふちに黒いドットが見えてしまう場合は[オプション]→[その他オプション]で「サイズを最適化するとき透過色を使った最適化を行う」のチェックを外してください。

Photoshopのエラーメッセージ

Photoshop CS2で選択範囲内を移動しようとすると、「選択範囲を移動できません。プログラムエラーです。」と出る時は、動かそうとしているレイヤが文字レイヤ、またはベクトルスマートオブジェクトになっている場合があります。
選択範囲内を移動するためには、レイヤをラスタライズする必要があります。

なんで「レイヤをラスタライズしてください」ではなく「プログラムエラー」なんて言われたんだろ、、、