Advance Interactive Design

August 02, 2024

Advance Interactive Design - Final

Justin Averill Prasetya / 0355048
Adv Interactive / BDCM / The Design School
Task 3 - Final

INSTRUCTIONS

Proposal

Content: Paul Partohap - Lover’s Atlas

Pop/Jazz

Album concept: Sketch and Pop but also neat

Web design: Pop using sketch/paint stroke transition

Flowchart:
Transition Sequence -> Overview and background of the album -> Artist background -> Full album list -> Previous work -> Footer

1. Overview and Background of the Album
Visual: Large album cover image
Description: Brief overview and background text

2. Artist Background

Visual: Artist's portrait
Description: Biography and key achievements

3. Full Album List

Visual: Grid of album covers with titles
Description: List of all songs with preview options

4. Previous Work

Visual: Timeline or carousel of previous albums
Description: Highlights of past albums and major hits

5. Footer: Visual: Clean and simple footer with navigation links
Description: Contact information, social media links, and legal notices

Fig 1.1.0

Adobe Animate:

For the home menu, I want to implement a video background. I made the background using After Effects, only playing with the trim path and keyframe I finished my animation for the home screen. 

Fig 1.2.0

Fig 1.2.1

For the implementation, i followed Mr Razif's tutorial, by lowering the z-index on the css script i managed to make it my background. 
Fig 1.2.2
While the scrolling effect is the same, the difference is i put the scrolling video beside the background video with the same layer and instance so it appears at the back and i link it with a button to play the video when it slides or tween.

Fig 1.2.3

Fig 1.2.4

For the main screen, i put 1 navbar and 1 cta button, and all they did was slide to the desired location, i also added ease from gsap and the slide code I got from the wizard.

Fig 1.2.5
Fig 1.2.6


I do for all of it, all i need is just to set the time out to make the object appear at a certain time. also i added a song for the preview sections, i link it using register sound and link it to my button. Also, i make a credit when the music plays and the titles of songs go up. 