Spiderman on Broadway Flash takeover.

Inception

To kick off their launch on broadway the folks over at Spiderman were very interested in creating a takeover that would show green goblin destroying the site then jolt into a devilish laugh after. I built this takeover in flash and the only video component used was their green goblin laughing at the end. I built it in ths fashion because we were not looking do crazy special effects so I felt I could have a more granular control over elements and time if build it out in flash. Click here to view it in action

Assets

These are the only assets that were used in this piece.

• Impact hole – appears once a pumkin smashes the site.
• A regular pumpkin
• A smashed pumpkin (animated break – broken up in photoshop)
• A fire flying pumpkin
• A vector shape (used as a mask reveal – more on this later)
• Our NYPost website screen shot.

Getting started

First we start with main component, which is a screen grab of the New York Post web site. We put this into a movie clip and build all other assets within this movie clip as well.

Animation

Next we animate our pumpkins into range as if they are being tossed at the page. These were animated in their own individual move clip containers. I always like to animate in reverse so I know where the ending frame will be then I start building how the animation will react with easing, filters and placement. A simple motion tween was used and that is really all you have to do as far animating the pumpkins are involved.

Pumpkins animate from different directions

Throwing pumpkin timeline

Here you can see the timeline for all animated pumpkins. None of them stay on the screen for a long time – I only have 5 seconds to play this sequence, so the pumpkins fly in quick and disappear even quicker. To limit resource hogging I made sure that not to many pumpkins are being displayed at once on stage, only because you never know what bandwidth or settings a different user have — so it is always better to play it safe.

Impact visuals

Once our pumpkins make impact we have to show an impact mark, we have to create a visual illusion for imapact, TADA presenting our impact holes.

When it is all said and done we are left with these impact holes on our page. Our final animation will not show all at once, but for the sake of this tutorial I will just show you how impact wholes were placed on a page.

Just for further representation you can see all pumpkins and their impact positions The impact position is key-framed at the frame where the pumpkin disappears ( you can refer to Pumpkin flying timeline to see how the pumpkin tweens are layed out.)

Impact Timeline.

Nothing special going here, just place the impact image frame rite where its corresponding pumpkin stops it tween motion. So then what happens is our pumpkin will disappear and what will be left in its remnant will be our impact image for that particular pumpkin strike. Of course all impact images should be layered below all pumpkin timelines.

Pumpkin breakage

Having pumpkins fly into our site with debris looks very unnatural – so to make things a bit more interesting I adding a pumpkin breaking apart to strengthen the illusion of impact.

Here is an image showing where I placed the breaking pumpkins, you can see that they happen at the same frame that our pumpkins disappear and our impact holes appear. Again this is just shown here to give you an overall idea of placement the original swift does not animate like this.

Pumpkin break Timeline

In this timeline you can see that the smashing pumpkins are lined up with the rest of the frames where our flying pumpkins disappear. Also on each one of these frames I am running a piece of action script "parent.gotoAndPlay(2);" which is calling its parent timeline to play. The reason for this is because if you look at the original live takeover you will see that with every impact the screen shakes with it – I will explain more in the next image.

The previous call from the breaking pumpkins to "parent.gotoAndPlay(2);" is calling this timeline below. This timeline is our main timeline and basically what I did was duplicated our main movie on 5 different frames and on each one I nudged the movieclip a bit to the left or to the right, up and down. The basic idea here was the sell the illusion that post page is being rattled by the pumpkin impacts and since in each frame we moved the movie clip a bit to the left and the right -- when the call to "parent.gotoAndPlay(2);" from the breaking pumpkins frames is called the play head will go to the parent movie clip of the breaking pumpkins and play those 5 different frames.

Impact Masks

Our impact marks need another component to sell the illusion that the site is breaking and that something is to reveal a layer when the pumpkin strikes. As you can see in the image below we are revealing a video element that is playing. This is an easy task but require some time to get it right.

I created vector shapes in flash that took the size of the of the inner portion the impact image because our impact image is suppose reveal what is beneath the NYPOST skin. I went to every frame where our impact image appears and beneath that I created vector shapes that will eventually even MASKS that will reveal the goblin video.

OK here is how we do the mask. MASK cannot work with a multi – layered animations so what we have to do is created our mask vector objects beneath the impact images then copy and paste all of them including all frames into a movie clip and then use that movie clip as our MASK for the goblin video.

In copying the fames that contain the areas I wanted mask I also copied the actual frame length of the entire movie this is because I wanted to work interactively with the elements outside this movie clip while they were visible on the screen, this the reason in the beginning of this timeline you see a lot of empty space. In a nutshell this movie clip will run in sequence with the rest of movie; placing masking holes rite where our pumpkins make impact holes.

Finally we make the mask animate a little bit hence the tweens at the end of the mask movie clip. In the next image see that the masks have grown a bit in size, I did this for 2 reasons 1. We were very limited on time only 5 secs of footage and 2 I had to be sure to mask a large enough are so the Goblin would show fully.