task[3]
0344034.
BDCM
.Advanced Interactive Design
::task[3]
task[3]: Site
todo:
- Create a site prototype in Adobe Animate
process:
Before even starting this project, I'd already hit a snag — my Spark AR filter was unrelated from the project. This was due to miscommunication, where Mr. Razif mentioned initially that the filter could be unrelated, but omitted the fact that this would entail the requirement of creating a new filter for this project. However, with a little consultation, we were both sorta at a standstill of "what to do", since the timeframe left to finish this project before the end of semester was tight. Thus, a compromise of integrating the filter any way possible into the site, was put into motion.
Well, yeah, have I mentioned the tight timeframe?
Combination concept
To combine them both, was a little awkward, due to the fact that my brand for this project & the first was a luxury ring merchant, whilst my filter was a throwback Y2K emulation of MS Paint. However, with a little brainstorming, I thought that luminance could host a sorta art contest, where the winners using DRAWR XD most creatively would get discounts or other perks, to promote their new "nostalgia" line of rings.
Ring assets
The first thing then, that I needed to prepare for the project was a few renders of the rings, with the theme of "nostalgia". I first started with a pixel-art-ish ring, in the shape of a 8x8 & 16x16 circle.
 |
Figure 1.1.1, Ring modelled off a 16x16 circle, 9/12/2022 |
From there, I just went ham trying to come up with any cool designs I could use, including abusing tools & fixing their traumas on the mesh. My favourite one turned out to be a 8x8 ring, with a concaved edges all the way. It may look deceivingly simple to model, but Blender's bevel modifier really required a lot more manual labour to clean up its messes. Not to mention the journey to properly merge smooth & flat faces.
 |
Figure 1.1.2, All the rings designed. 10/12/2022 |
However, when throwing it into a proper rendering scene, the creamy reflections helped justify the preparation a lot more.
 |
Figure 1.1.3, Render preview in Blender Eevee, 10/12/2022 |
 |
Figure 1.1.4, Rendered ring inside Magic Bullet Looks, 10/12/2022 |
Setting up
After the main few assets were there, I jumped into Adobe Animate to start. Aaaaand I already found a blocking bug/issue/very bad design. Whatever it is, if I'd create a new project, & import the libraries of another project, but modify them in the new project, the resulting publish would emit nothing. After a lot of debugging & whatnot, I just gave up & just copied + pasted my project[1] .fla so I could get its libraries. The main thing I changed though, was the document framerate to 60fps. When making the first project, the one thing I didn't realise was that the actual framerate of the canvas rendered onto the screen would follow the Adobe Animate one. Being a person more familiar with lottie-web animations, which has sub-frames (basically frame interpolation, but at an attribute level), this behaviour was both jarring, & basically irreversible after the amount of work already done following 24fps (the framerate of project[1]).
Carousel
Once I was set up, I already knew I wanted to have a full page carousel experience on the home screen, thus I immediately yanked the implementation I had from the previous project & continued my work on it. Due to the fact I was also quite time constrained then, there was a bug that I'd never managed to fix — incrementing/decrementing slides too quickly would cause the viewing state to not update. However, basically on my first skim this time, I figured out a fix — a next variable to schedule a tween to run after the current one, when incrementing/decrementing was locked. Huzzah!
There's still however, one quirk about it that I'm still leaving unfixed — rolling over from the 1st to the last slide, or vice versa, looks wonky, due to how it would replay every animation one by one with their original eases, but faster, instead of smoothly transitioning using one motion. This could be fixed by reimplementing eases using a custom solution, similarly to what I'd normally do in After Effects expressions. Next time, I guess 🤷.
Text animation
At this point (the second thing I had to do), I was kinda fed up with how things were done in Adobe Animate, so I just, went ahead & added some procedural animation, using ye olde requestAnimationFrame().
Since I had the library from the previous project to work from, I was able to get it up & running quite quickly. Store was already available, as well as MovieClipExtensions.package, which enables cross-movie-clip reactive communication. I thus exported the index store from the carousel movie clip, & had the text animate + change based on it.
Using this same method, I also managed to make progress dots to know which index the user was at, on the carousel. It's a little bit of a hack, as it uses the characters, ○ & ●, just in text, like an icon font.
Bopping
The contest page looked quite boring static, & I felt like it really needed a little ambient motion. What if its background elements would just bop, ever so slightly?
Here comes Math.sin() to the rescue!
No yeah that's it, the code was only 50 lines, mostly to wrap requestAnimationFrame(), to coerce some radian math, & to accommodate custom offsets, amplitudes, & frequencies.
final:
Figure 1.2.1, Final site prototype, 11/12/2022
reflection:
This was a big doozy. On one hand, I'm definitely more familiar with Adobe Animate, & its quirks. On the other hand, the fact that its bearable at all is because of the 756 lines & countless development hours towards library code. Including just shimming it onto MovieClip itself, noted more in project[1]. I really can't imagine using Adobe Animate without my .go(), .brake(), .isolate() helper methods, plus the MovieClipExtensions.package/Store combo. It's almost like this app isn't designed to be used as a prototyping tool!
Rant aside, I did still learn more about Adobe Animate. I also managed to really get into the Blender side of things. This was the first time I used linked files, which I now know that I won't be doing again unless extremely required. Cleaning up the bevel tool though, especially under time pressure, got me to explore time savers such as more of Mirror & Solidify modifiers, as well as the Edge Split modifier, which I'll definitely be using more in the future.
All in all, it was definitely one of the experiences of all time. Whilst I'm definitely not going to touch Adobe Animate, for hopefully a long, long time, I know the lessons & sharpening of the soul, gotten from it will stay eternal.
Comments