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.
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.
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.
Prototyping Interactive Infographics and Maps in Edge Animate In this lesson we will take a look at the resources we'll be using to create our interactive piece. The campus map is from an 1893 Columbian Exhibition that took place in Chicago from May to October of that year. For you Tesla fans, his company had an exhibit in the Electricity Building. The fair also introduced the Ferris Wheel to the world and was the exhibition's most popular attraction. But more on the fair later. The campus map is from a beautiful Rand McNally map you can find easily online. The building descriptions are from a book I found on Google Books named "The World's Columbian Exposition, Chicago 1893" by Colonel Davis. But there are many more free books there for your amusement and edification. The photos are from another book on Google Books called "The World's Fair Album. " All this stuff is in the public domain, and it's lots of fun, especially if you like history. So, that's a look at the resources we'll be using to create our interactive piece.