FLASH備忘６｜ActionScriptやらWordPressやらを楽しむ会

クリスマスカードなるものが世間では流行っているそうで、WEBレターと言ってメールでクリスマスカードを送る人も多いそうです。

WEBの制作会社では自社のデザイン力をアピールするために、総力を結集して、WEB年賀状を作成するという話も聞いたとこがあります。そこで、自分でもActionScript 3.0を使ってクリスマスカードを作ってみました。

2009 FLASHクリスマスカード（右クリックで保存）

すぐできると思いきや、予想を大きく上回り、3時間以上かかっていました。

上手くいかなくて時間がかかった点。

1. 雪の動きにリアル度を上げること
2. 変数を配列に割り当てて、あとで取り出す

 1番は何度もプレビューを繰り返して再現。さらに本来の雪と同様につもるように工夫しました。

2番は単純に知識と経験不足。変数を配列に割り当てている部分でミスに気がつかず苦戦。

ちなみに、雪に関しては少しこっています。工夫した点は次です。

1. 雪はランダムに上から落ちてくる
2. 雪は左右にランダムに揺れながら落下
3. それぞれの雪に透過性と大きさを設定
4. 下まで落ちた雪はその場に積もる
5. 時間がたつごとにどんどん上に積もっていく

どんどん雪が積もっていくということで初期では、ブラウザ画面を起動していればずっとつもよるようにしていました。

自分でも公開した画面を確認し、しばらく放置。しらばくするとなんかパソコン動作がおかしい。異常に重い。

ということで、デバイスマネージャーを見てみると、どうやらIEが動作が原因とのこと。そしてIEを改めて立ち上げてみると、さきほど公開したばかりのクリスマスカードの画面がとんでもないことになっていました。

つもった雪はパソコンのメモリとCPUをどんどん圧迫し、IEの応答しない、終了もできない。最近購入した自慢の高性能パソコンも苦しんでいます。（下の画像）あわてて修正して再度公開まで至りました。 

ちなみに↓がパソコン泣かせのクリスマスカードです。数分開いているとブラウザの動きが鈍くなります。

（パソコン泣かせの）初期クリスマスカード（クリスマスツリー）

再度、アップロードしたクリスマスカードははじめの数分は つもっていく動作をみせますが、しばらくすると積もらなくなります。これでメモリとCPUの以上の問題は解決。クリスマスカードとしてはこれで十分。ついでに文字も加えておきました。

一日遅れのハッピーメリークリスマス。次は年賀状だ。

  var yukis:Array = new Array();
var rads:Array = new Array();
var angles:Array = new Array();
var tumo:Sprite = new Sprite();
var i:int = 0;
var yuki_num:int = 200;
var tumoh:Number = -2;
var angle:Number = 0;

for(i=0; i<yuki_num; i++){
 var yuki:Sprite = new Sprite();
 var size:Number = Math.random();
 yuki.graphics.beginFill(0xffffff, size * 0.3 + 0.7);
 yuki.graphics.drawCircle(0,0,size*2+3);
 yuki.x = stage.stageWidth * Math.random();
 yuki.y = stage.stageHeight * Math.random();
 angle = 30 * size + 30;
 angles.push(angle);
 rads.push(0);
 addChild(yuki);
 yukis.push(yuki)
}
addChild(tumo);

addEventListener(Event.ENTER_FRAME,onEF);

function onEF(e:Event):void {
 //trace(tumoh);trace(5 * Math.sin(rads[10]));
 tumoh += 0.005;
 for(i=0; i<yuki_num; i++){
  yuki = yukis[i];
  rads[i] += Math.PI / angles[i];
  yuki.x += 1 * Math.sin(rads[i]);
  yuki.y += 2;
  
  if(stage.stageHeight - tumoh < yuki.y){
   tumo.graphics.beginFill(0xffffff);
   tumo.graphics.drawCircle(yuki.x,yuki.y-Math.random()*2,5);
   yuki.y = - 10;
   yuki.x = Math.random() * stage.stageWidth;
  }
 }
}