Labels

Application Design II / Task 3: Micro Interaction Prototype

22/04/2026 - 12/5/2026 (Week 1 - Week ?)

Chang Wing / 0367807 

Application Design II / Bachelors of Design (Honours) in Creative Media / Taylor's University

Task 3: Individual Task – Micro Interaction Prototype

TABLE OF CONTENTS


(Not updated)


INSTRUCTIONS



Figure 1.1 Task 3 Project Brief


Task 3: Micro Interaction Prototype (20%)



Animation

As for the animation, I tried using Google Gemini to generate an animation from an image, but the output doesn't have a transparent background. Another con is, video generation in Google Gemini consumes a lot of usage quota, far more than text or image generation.

Gemini's animation generation also produces mp4 rather than Lottie (.json) files, so the generated video cannot be used directly in FlutterFlow as a Lottie animation. Converting from mp4 to JSON also doesn't help because the generated mp4 does not have a transparent background. 

I also looked into AI tools that generate Lottie JSON animations directly, but most of them require a premium subscription.


Figure 2.9 Google Gemini generated animation from image


So, I use the traditional way instead, I exported the assets as SVGs from Figma, then grouped related layers in Adobe Illustrator to make easier to animate individually in Adobe After Effects. After importing the Illustrator (.ai) file into After Effects, I added subtle animations to the illustration.


Figure 2.10 Animating with Adobe After Effects


Figure 2.10 Animating with Adobe After Effects




Issues when exporting JSON from Adobe After Effects

To export animations as Lottie (.json) files for use in FlutterFlow, I installed the Bodymovin plugin in Adobe After Effects. However, the exported JSON file contained image assets instead of editable vector data. This occurred because the Illustrator (.ai) layers were imported as footage layers rather than native After Effects Shape Layers.

To ensure proper Lottie export, vector artwork needs to be converted using Create → Create Shapes from Vector Layer before exporting through Bodymovin. This allows Bodymovin to convert the artwork into Lottie-supported vector paths and animations.

However, layers containing animations created using the Puppet Pin Tool could not be converted successfully using Create → Create Shapes from Vector Layer. Attempting to convert these layers caused the composition preview to become black, indicating a failed conversion. This occurs because the Puppet Tool relies on mesh-based deformation, which is not supported by the Lottie format used by Bodymovin. As a result, these deformation-based movements cannot be preserved in the exported JSON file.

To maintain compatibility with FlutterFlow, animations need to rely on Lottie-supported properties such as:

  • Position
  • Scale
  • Rotation
  • Opacity
  • Shape Path animation

Therefore, character or object movements created using the Puppet Tool need to be recreated using transform-based animations before exporting through Bodymovin.

To preserve the Puppet Tool animations, Mr. Miguel suggested an alternative workaround which is to export the animation from Adobe After Effects as a transparent GIF using Adobe Media Encoder, then upload to Flutterflow it as an image (but it will play the GIF). However, this approach sacrifices some quality and flexibility compared to Lottie because GIF files have larger file sizes and FlutterFlow provides minimal playback control for GIFs, meaning animations cannot be easily paused, delayed, restarted, or controlled programmatically as they can with Lottie animations, in Flutterflow.

Figure 2.11 Bodymovin Plugin from aescripts.com (Unable to export puppet tool movements)
 


Error Prevention Feedbacks
  • On the verification screen, use FlutterFlow's Pin Code Field widget set to 6 digits.
  • On the "Continue" button: Action → Custom Action → verifyCode, passing the page parameter email and the Pin Code field's value.
  • Add a Conditional Action: if verifyCode returns true →
    • Action: Firebase Auth > Create Account with Email & Password (you'll need a password — either have the user set one on the signup screen, or generate a random one if you're doing passwordless-style access)
    • Then Navigate To your home page.
  • If false → show an error text/snackbar like "Invalid or expired code."

Figure 2.14 Error text implementation


Figure 2.14 Verification code input error prevention













Final Outcome


Figure 2.10 Fhfgdgd


FEEDBACK

Task 3: Micro Interation Prototype (20%)

Week 1 (23/04/2026)
Feedback: -

Week 2 (??/04/2026)
Feedback: Njjjn






REFLECTION

This prsdfs





Labels:

Comments

Post a Comment