Create prototypes to test the UX
Prototyping
General
-
add basic loading screen with a button to start the experience -
hide the button when the experience starts -
hide the loading screen when the experience starts -
create a ‘timeline’ section -
create a ‘subtitle/caption’ section -
create button labels -
Prepare the prototype versions to with # to access them
Audio
-
add audio API -
load the audios -
connect the audio to the timeline - clicking on different timeline sections starts playing the corresponding audio file (and stops the previous one if it hadn’t finished playing) -
create a GSAP ‘audio timeline’ which controls when each audio starts to play - will probably just use a timeline class to control everything ! - check whether this capability is available in any other library
- or combine this timeline (which is the general ‘main’ timeline to affect howler.js ‘timeline’)
UI
-
add a subtitle section and update it based on the voice -
when there is no voice, make opacity zero and visibility hidden
Visuals
-
try camera animations - tweening between camera positions, whilst looking at an object
Visuals options
- multiple scenes and as you go through the timeline, the scenes change
- one scene that you fly around as you go through the story → camera tweening
- one scene that has a set animation that you cannot affect, but can just see where you are on the timeline
Edited by Zala Sesko