Shoot Through the Image on Top of an Animated Background

posted on   June 12, 2012

Project: Pirates of the Caribbean – Tour Across the Internet (author Milica Jovanovic)

Request: Shoot the cannon ball through site

Tech: AS3, Flash, Pixel Bender

Problem: Making transparent burning hole in the site so the animations behind it are still visible


Image of the cannon is set to highest layer of the flash file. On mouse movement it can be moved left or right. On the layer beneath the cannon is another movie clip which contains the bitmap that represents the site. On mouse click, animation of the cannon ball is played. Depending of the position of the cannon and the ball, area of the bitmap is selected to be burned through. For each “burn”, bitmap of the site is tested if there is another on selected place. When clean area is found, animation of burning paper is added to its position and played. During the animation, shader filter is added to the bitmap. For this filter, pixel bender file is created. This file accepts three parameters: x and y position and radius of the circle. On selected position this filter adds zero transparency to the image in selected radius.

posted in   Uncategorized | No Replies

Leave a Reply

Your email address will not be published. Required fields are marked *