In this Video tutorial I’ll show, that even with an early version of Google Web Designer you are able to create great 3d content.
This is the first screencast I’ve published about Google Web Designer on Youtube.
Unfortunately I don’t have a voiceover recorded yet, as I usually show this video and comment it live on events, where I’m invited as speaker about HTML5 development, but I’m thinking on re-recording this video again.
However, I’ve done some notes about what is happening in each scene, so that – even without my angelic voice you should be able to understand, what I’m doing here.
In addition to that, please find the urls of the project files, so that you can rebuild the creative and investigate deeper into my project of a fake 3d Nexus5 Android Smartphone ad with some cool features, e. g.
- turning the device 360° with mouse / finger
- swiping through the home screen
- using Chrome browser
- using Google Maps app
- using Youtube App
Download assets.
Download project files.
Download naked project files with only containing 3d model of Nexus5.
The video contains two parts: One is creating the 3d environment and how to make it flexible for better interactive usage. This chapter is only using native GWD functions.
The 2nd chapter is about adding some lines of code in the Code view to enhance the interactivity and make it rotate 360°.
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
