Tilt Phone or Shake Phone code tutorial

[Jenny Graves]

Hello,

I was approached by my supervisor to find out how to make a banner ad for mobile that responds to shake or tilt. So like, I have my first frame that says something like, "Hungry?" Shake phone.

Then all the cheese puffs go away to reveal the product.

I have NO IDEA how to do this, what code to ad and where!!

Does anyone have an idea of where I look to start this?

Thanks!!

[San Khong]

Hi Jenny,

I just want to let you know that while this is possible to implement in Google Web Designer, there was a recent change in the latest iOS version that will make this not work on the latest iOS.

Commit: https://github.com/WebKit/webkit/commit/39e01391cb78acacf1ee8cf61e894f5d6e890f4a:
>  There are reports that gyroscope and accelerometer information can be used to detect keyboard entry. One initial step to reduce the
risk is to forbid device motion and orientation events from being fired in frames that are a different security origin from the main page.

Ticket for the change: https://bugs.webkit.org/show_bug.cgi?id=150072
Ticket requesting that the feature be restored in some form: https://bugs.webkit.org/show_bug.cgi?id=152299

We are working with the Studio team to allow this to work on the DoubleClick platform for inApp ads, ETA July release.

If you want to get a head start and try it out now on an Android device, you can have the animation of the cheese puffs dropping away set up, then add a timeline event to pause the animation (right click in first events layer in the first keyframe the timeline advanced mode and select Add event... and add the pause action, then use the shake event to play the timeline animation (click on stage to deselect any element, click on the Plus button in the Events panel to add an event for page1 > Page Shake > Timeline > Play.  I attach the test file for you to check out.

You can also check out a template in Google Web Designer called "App Promo Default Assets App Install Shake to Reveal".

Thanks,

San

Google Web Designer team

[Jenny Graves]

Where do I find the "shake" event?

I'm looking all over!!

[San Khong]

Hi Jenny,

It's under Page.

Click on an empty area on stage to deselect all elements.

Click on the add button in the Events panel to add an event.

Select the page id as the target.

For event, select Page > Shake.

[Jenny Graves]

Found it!! Thank you! :)

[Amulya Kumar Mishra]

Hi San

My shake banner add does not play on Iphone and android5.1 . i use gwd.actions.deviceShake.SHAKE_THRESHOLD_ code any idea  

the banner source is in below link

https://drive.google.com/open?id=1Q-SS01iVLcqY_rFdfm0RC2mwRtcvJgZF