LED Lightbulb is an Adobe Edge Animate demonstration project that presents a basic overview of how a typical LED lightbulb is constructed. The minimalist interface keeps a strong focus on the lightbulb visuals and navigation. The component initially goes through a startup logo animation before the home panel is displayed and activated. Once displayed, the home panel allows the user to manually move through various informative factoids about the LED flashlight. Selecting the Look Inside button changes the interface to the “exploded view” parts panel. The parts panel expands the lightbulb graphic to reveal it’s parts which can be isolated individual for quick reference.

The graphics are created in SVG image format and have been optimized. The component is responsive, adjusting itself (dynamically) to the size of it’s parent element. The component’s interactivity and motion graphics provide for an enjoyable informative experience.

LED Lightbulb was built with Adobe Edge Animate, Adobe Illustrator and Greensock's javascript animation library. This project is a demonstration of using web standards to create visually rich, gracefully interactive applications.

VIEW DEMO

Type: Entertainment
Skills: Edge Animate | Illustrator
Deliverables: HTML5


Toolset:
Creative Cloud Logo SVG Logo HTML5 Logo Javascript Logo