作品-台北渣打銀行敦南分行開幕互動投影

  • idea
    使用者一進入銀行門口就漸漸浮現渣打的Logo,製作重點主要在於Logo如何浮現
  • skill
    Actionscript+Webcam
  • site
    台北,渣打銀行敦化南路分行

這是09年完成的案子,用於敦南分行開幕會的時候,這次主要的重點是要強調歡迎使用者進入的視覺觀感,視覺感....慢慢進步囉,主要的Logo浮現code我貼在下面囉....

private function AnimationStart(e:MouseEvent):void {
 var tweens:Array = [];
        var xx:int, yy:int, delay:Number;
 randomW = Math.floor(Math.random() * 1024 + 1);
 randomH = Math.floor(Math.random() * 768 + 1);
        var px:Number = SEGMENT * (randomW / IMG_W);
        var py:Number = SEGMENT * (randomH / IMG_H);
        var max:Number = 0;
            for (xx = 0; xx < SEGMENT; xx++) {
                for (yy = 0; yy < SEGMENT; yy++) {
                    //vertexs[xx][yy] = new Point(px * IMG_W / SEGMENT, py * IMG_H / SEGMENT);  //從滑鼠坐標出來
     vertexs[xx][yy] = new Point(randomW, randomH);        //從自訂坐標出來
                    delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py)) ;
                    max = Math.max(max, delay);
                }
            }
            for (xx = 0; xx < SEGMENT; xx++) {
                for (yy = 0; yy < SEGMENT; yy++) {
                    delay = (max - Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))) / 60;
                    tweens.push(
                        BetweenAS3.delay(
                            BetweenAS3.tween(vertexs[xx][yy], {
                                x : xx * IMG_W / SEGMENT + distanceX,
                                y : yy * IMG_H / SEGMENT + distanceY
        //x : 512,
                                //y : 379
        
                            },null, delay + 0.05, Quad.easeOut),
                            delay / 2
                        )
                    )
                }
            }
            var itw:ITween = BetweenAS3.parallelTweens(tweens);
            itw.play();   
 intervalTime = setTimeout(AnimationStop, delayTime);
 stage.removeEventListener(MouseEvent.CLICK, AnimationStart);
} 



點我看線上demo

 

沒有留言: