忍者ブログ
MASTER →  ADMIN / NEW ENTRY / COMMENT
今日・昨日あったこと、未来予定?をなんか描いています。管理サイトはこちら→「Function5」「ふらくたる - FRACTAL -」
プロフィール
HN:
踊る猫耳
HP:
性別:
非公開
趣味:
日々チョコチョコと絵を描ければいいなぁ・・・と。
カウンター
なにか


カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
前置き
当ブログでの構文の表示崩れがあります。
本家サイトに先行ページを設置してあります。
Function5 [エフェクトアイデア研究_01]

目的
JavaScriptを用いてのランダムな文字列による背景イメージの元素材を作成したい。

原型(プロトタイプ)

・目標としてこのようなイメージを作りたい。

プロトタイプ

作成

文字列入力(半角英数字のみ)、1行の文字数選択、行数選択
文字数が多くなると処理時間が長くなりますので、制限を32文字までにしています。
・文字列(入力)
・文字の長さ(X軸) 文字
・行数(Y軸)
入力内容クリア
内容確認
確認結果
文字列、1行の文字数、行数の確認
・文字列(確認)  文字
・文字の長さ(X軸) 文字
・行数(Y軸)
作成
↑上記「ランダム作成」ボタンを押下すると、
入力文字列を分割後に文字の長さでランダムに連結し、行数分繰り返します。
押下ごとに作成結果が変わります。
作成結果
↑上のテキストエリアにフォーカスを当てると、選択領域になります。
作成結果をテキストファイル等に複数個の作成結果を保存してください。


活用例その1

作成例
○入力・選択情報
・文字列(入力) :「01」
・文字の長さ(X軸) :「32」文字
・行数(Y軸) :「17」行
・作成文字列テキストデータ :「5」
○作成文字列元画像ファイル(データ数:5)
・大きさ(W x H) :360 x 360 px
・文字サイズ :16 px
・フォント名 :MS ゴシック
・その他 :フォントは「ボールド」
★フォントの種類に、
「P」が付く「プロポーショナルフォント」では、
文字間を詰められ、
レイアウトが崩れることがありますので、
均等の文字間を保つフォントを選びます。
・1:
作成文字列元画像ファイル1
・2:
作成文字列元画像ファイル2
・3:
作成文字列元画像ファイル3
・4:
作成文字列元画像ファイル4
・5:
作成文字列元画像ファイル5
○作成文字列結合動画GIFファイル
★作成文字列元画像ファイル1~5を、動画GIFファイルとして結合します。
★動画GIF作成ツールを使用します。
・描画間隔速度 :10 ミリ秒
・その他 :ループ描画
作成文字列結合動画GIFファイル


活用例その2

活用例その1より応用
★DivタグやSpanタグを用いて、レイヤーを重ねて切り抜きのように表示します。
・レイヤー1
上記の「作成文字列結合動画GIFファイル」を用います。
レイヤー1
・レイヤー2
透過イメージファイルを用います。
非透過部分は「白色」にしてあります。
透過部分をわかりやすくするために背景を青色にしてあります。
・大きさ(W x H) :360 x 360 px
レイヤー2
・応用例
<DIV レイヤー1><IMG レイヤー2></DIV>
・<IMG レイヤー2>の大きさ(W x H) :360 x 360 px
・<DIV レイヤー1>の大きさ(W x H) :360 x 360 px
レイヤー2
PR

≪  1347  1346  1345  1344  1343  1342  1341  1340  1339  1338  1337  ≫
HOME
忍者ブログ [PR]