As I embarked on the creative journey to craft an captivating animation for my "about" section using Rive, I began by bringing Oracio to life - a charming character whose persona would soon captivate audiences!. My artistic exploration commenced with a swift sketches of his face, followed by loose gesture drawings that allowed me to tap into his energy and infuse him with a dash of charisma.
Before sending my design concept to Rive for animation, I knew it was crucial to distill Oracio's features down to their essence, simplifying his visual aesthetic to ensure the final product would be both visually striking and easy on the eyes. After I had a clear image of Oracio , I did couple panels to Ideated what I want him to do in the animation which was easy to do a small storyboard later on.
As I wrap up the design process, I jump into Rive and begin by crafting the fundamental assets, including Oracio and the iconic red button. Next, I meticulously create and separate the animations on distinct layers, laying the groundwork for the state machine that will bring my character to life. With each element carefully isolated, I'm able to build a seamless animation sequence where one movement flows smoothly into the next, without interruption or pause. From combining Oracio's open mouth and his little dance moves.
State Machine
These are the main 2 layers on the state machine, one dictates how fast he dance and the other process the interaction of the button and the flash frame. Some of the struggles that I encounter where more related with its implementation on the website than animation and setting up the state machine. When using the back button of the browser ,it could cause that the animation to get stuck in the last frame, in this case was the flash frame after the red button pressed. the solution was to add an extra state rewinding the flash frame and the returning to the default state.
Final product.
