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.
Course info
Level
Advanced
Updated
Nov 6, 2015
Duration
1h 50m
Table of contents
Introduction and Project Overview
Prototyping Interactive Infographics and Maps in Edge Animate
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
Description
Course info
Level
Advanced
Updated
Nov 6, 2015
Duration
1h 50m
Description

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.

About the author
About the author

Mario Macari is an award winning illustrator, animator and graphic designer that fell in love with writing code. He develops and codes for major corporations and teaches coding classes at a couple of colleges in Southeastern Wisconsin. Mario Macari holds a BFA in Illustration and certificates galore from software companies.

More from the author
Creating a Site with CSS Grid and Bootstrap 4
Intermediate
2h 14m
Feb 19, 2019
Bootstrap 4 for the Developer
Intermediate
4h 6m
Jun 20, 2018
Making Games in Scratch 2.0
Beginner
3h 15m
Dec 11, 2017
More courses by Mario Duilio Macari
Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi everyone, my name is Mario Macari. I am a front-end developer, designer, artist, cartoonist, freelancer, and college adjunct professor. I have been working with computers a long, long time and have been creating interactive projects for my entire career. In this course, we are going to build a somewhat complex interactive piece using Adobe Edge Animate. We will be doing a campus map but really you can use the same techniques for exploded views of machinery, group photos, signaling out individuals, or portfolios. I am going to assume you are familiar with the basics of Adobe Edge Animate for this course. If not, please take a look at the beginner Adobe Edge Animate courses on Digital-Tutors first. Our goal here is to put together a pretty involved interaction and go outside of the box by adding our own variable. Some of the key takeaways from watching this course include learning how to create a modern and cutting edge interactive piece without knowing how to code and without hiring a developer; learn how Adobe Edge Animate can help you create interactive art for your website; create nested symbols and use them in an outside-of-the-box way; add labels, actions, and a custom font; make the piece accessible and responsive; plus a whole lot more. By the end of this training you will have completed a full interactive campus map that is responsive and ready to use on your website. You can also use it as a prototype for hand coding the interactive piece if you need to. I am excited to share these tips and techniques with you, so let's get started with the first lesson.