前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、２つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「本来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり
前回の記事の続きです flashで簡単に作れるので、制作方法をご紹介します。 (1) 1pxの高さの矩形を1pxごとに配置していきます。 (2) 配置した矩形で図形の上にかぶせるマスクを作ります (3) 新規で"グラフィックシンボル"を生成し、その中で２コマのアニメーションを作ります。 (4) 手順3で作ったシンボルをステージに配置、コピーした後同じ位置にペーストし、 さらに重なった二つの同じシンボルを選択し、レイヤーに配分します。 どちらか一方のグラフィックシンボルを選択し、 プロパティパネル＞ループ＞オプション で 単一フレームを選択して開始フレームを2にします。 (5) それぞれのシンボルに対して手順2で作ったマスクを被せ、 ２コマ目のマスクを1コマ目のマスクより1pxずらします。 (6) このような図形が出来きます。 この図形に対して手順2で作ったマスクを上に載せれば完成です。 ■
以前出演した「Yahoo! JAPAN × ロクナナワークショップ クリエイティブカレッジ」で カヤックサイトで使用している動く背景の作り方を説明しましたが、 動画だと今いち作り方が分からないという指摘をいただいたので補足の説明いたします。 まず実際に説明で使っていたflashで試してみてください。 右側の図形を掴んで動かすと文字が動きます。 動いて見える仕組みはすごく単純です 今日はここまで。 次回flashで効率的に作る方法を説明します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
