Creating an interactive 3d Ad with Google Web Designer
Download assets: http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5-source.zip
Download project files: http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5.zip (due to file version changes, please recreate the animation in the first frame after transofrming to new GWD format and it will work)
Download naked project files with only containing 3d model of Nexus5:
http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5-model.zip
Design view:
—————-
00:00 – 01:10 Intro UI
01:10 – 01:50 Applying a background gradient
01:50 – 02:30 Creating a comfortable 3d area
02:30 – 13:12 creating a 3d model of a mobile device
13:12 – 13:30 adding a new page
13:30 – 14:55 working with the timeline
14:55 – 15:10 preview in external browsers
15:10 – 20:20 finishing the start animation
15:50 – 16:00 introducing the gradients tool
18:02 – 19:00 introducing the tap area component
19:00 – 20:20 introducing the event panel
19:30 – 20:20 introducing transitions between pages
20:20 – 21:58 adding functionality to the 3d model (tap areas)
21:58 – 23:10 building the smartphone menu with the swipeable gallery
23:10 – 24:55 adding a back button
24:55 – 25:10 preparing all necessary pages
25:10 – 26:05 linking to new pages
26:05 – 27:45 simulating the Chrome Browser with the iframe component
27:45 – 29:40 simulating the Youtube Player with the YTPlayer component
29:40 – 32:50 simulating the Google Maps App with the Maps component
32:50 – 33:20 publishing the project
Code view:
—————-
33:20 – 34:40 reading the generated code
34:40 – 43:24 adding custom javascript
34:40 – 36:15 develop an universal transform function
36:15 – 39:05 180° rotating the 3d model with finger
39:05 – 40:15 180° rotating the 3d model with mouse pointer
40:15 – 41:10 testing and fine tuning
41:10 – 41:50 synchronizing 3d models on pages
41:50 – 43:24 adding 360°-rotation