Prototyping Interactive Infographics and Maps in Edge Animate
In this Edge Animate tutorial, we'll learn techniques for prototyping interactive infographics. Software required: Edge Animate.
What you'll learn
In this Edge Animate tutorial, we'll learn techniques for prototyping interactive infographics. This is the perfect course for designers and artists who already have some basic knowledge of Adobe Edge Animate and need to create a responsive, interactive map or infographic for placement in a website or as a prototype for hand coding. By the end of this Edge Animate training, you'll have built a campus map while learning techniques you can use on any similar interactive project. Software required: Edge Animate.
Table of contents
- About the Resources 1m
- Cropping and Prepping the Map in Photoshop 2m
- Setting up the Adobe Edge Animate File 2m
- Version Control for Our Project 1m
- Importing the Responsive Building Photos and Adding Accessibility 3m
- Animating the Buildings Photos Across the Timeline 3m
- Drawing the Background Box for Our Informational Text 2m
- Animate the Background Box and Add an Easing Setting 2m
- Creating and Styling the Text Information for the Buildings 2m
- Changing the Text Information for Each Building and Adding Animation 4m
- Making a Hide/Show Button Symbol 2m
- Using Stop Triggers and Labels to Our Hide/Show Symbol 1m
- Animating the Hide/Show Button Symbol 3m
- Nesting a Timeline and Adding Labels and Triggers 4m
- Coding Our Hide/Show Button 5m
- Adding the Camps Map, Making It Accessible, and Animating a Fade-in 2m
- Drawing the Buttons for Our Buildings on the Main Timeline 3m
- Writing the Code to Get Our Interactivity Working 6m
- Placing an Arrow Svg Graphic on Our Return Button 2m
- Numbering Our Building Buttons 3m
- Adding the Title Box and Interface Animation 3m
- Labeling the Timeline for Our Buttons 1m
- Title Creation and Animation 2m
- Drawing a Rectangle Graphic and Animating It 1m
- Duplicating Boxes for Interface Animation 1m
- Show and Hide the Hotspots and Boxes on Our Timeline with CSS 2m
- Adding a Google Map Widget 2m
- Finalizing the Interface Animation for the Buildings 2m
- Animating Our Hot-spots for Rollover Events 2m
- Moving the Hot-spot Animations to the Correct Labels 2m
- Coding Triggers to the Timeline to Control the Rollovers 2m
- Making the Building 1 Hot-spot Button Work with Actions 3m
- Adding the Mouse-over and Mouse-out Actions 4m
- Naming All of the Building Hotspots 3m
- Tweaking the Position of the Titles and Adding an Arrow Glyph 4m
- Adjusting the Hotspots to Fit the Title and the Arrow Graphic 3m
- Animating the Titles and Arrows on the Rollovers 7m
- Taking Care of Hotspot Stuttering 2m
- Animating the Interface Building Titles 7m
- Publishing the Adobe Edge Animate Project 2m
- Wrapping Up 2m
About the author
Mario Macari has spent more than ten plus years as a coder specializing in HTML5, CSS3, Javascript and other client and server side languages. He is also an award-winning artist and holds a BFA in Illustration. He has worked on projects for companies like Disney, Apple Computers, Microsoft and DC Comics. He currently teaches coding, design, UX/UI and Adobe products at two Southeastern Wisconsin colleges. Mario Macari has an "A+" rating with the Better Business Bureau.