Nice work on the ohair site. This is the sort of thing that I am looking to create for a client who manufactures alu-clad windows. Scroll down to see windows: https://28bells.com/test-page/
Could you share your workflow and any comments you might have?
Steve
I am Steve owner of 28Bells.com
I am in video marketing using interactive content
England, UK is my home
English is my native language
I have made a series of different hype animations
I am a novice
My favourite design tool is Final Cut X
The first interaction tool used was adobe captivate
My favourite animated film is big hero 6
Image prep is a big deal. As I need to create responsive content, I need the images in various sizes. What I do is set up a bunch of automations in Photoshop. I have a copy of TinyPNG / TinyJPG, which is available as a plug-in and standalone. I will create the automation to pull an image from a source folder, output it as a PNG (in this instance), save it to a destination folder with the size inserted in the filename, then size it down to what will work best for the next stage in the responsive layout, then repeat the above for all sizes, all in one single automation. If I have a bunch of them, all starting with the same size, and I set the automation running, it provides an impressive onscreen display (wait for your boss to drop by before doing this. He’ll think you’re a raving genius).
From that point it is simple timeline animation inside Hype.
One thing that I do is I place the animation in an iFrame and either attach the background image to the iFrame or I create a generic page background image. It is best to leave the animation without a background so there’s less to load.
Beyond this, it is just good old fashioned donkey work. Note that it is important to use an app or plug-in that will slim down your art. TinyPNG (as with other competing products) can knock the file size down to 10% so 15% so this can be a big deal.
Also note that it is a good idea to build in HTML elements (typically text) that can load fast to keep the visitor occupied while other things load.
@Furutan Wonderful. Thank you so much. Did you create this shutter designer too: http://ohair.com/shutterdesigner.html …it’s awesome. Great work!
That is an old item from the company’s computer guy.
The previz I designed had interactive shutters (Hype based) - drag to adjust the shutter angles. Rather than replacing the static images for this, the computer guy though I was stealing his thunder so this particular item remains in the 1990s.