2015
Digital Tutors
Mario Macari
1:57
English

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.

1 Introduction and project overview
2 About the resources
3 Cropping and prepping the map in Photoshop
4 Setting up the Adobe Edge Animate file
5 Version control for our project
6 Importing the responsive building photos and adding accessibility
7 Animating the buildings photos across the timeline
8 Drawing the background box for our informational text
9 Animate the background box and add an easing setting
10 Creating and styling the text information for the buildings
11 Changing the text information for each building and adding animation
12 Making a hide/show button symbol
13 Using stop triggers and labels to our hide/show symbol
14 Animating the hide/show button symbol
15 Nesting a timeline and adding labels and triggers
16 Coding our hide/show button
17 Adding the camps map, making it accessible, and animating a fade-in
18 Drawing the buttons for our buildings on the main timeline
19 Writing the code to get our interactivity working
20 Placing an arrow svg graphic on our return button
21 Numbering our building buttons
22 Adding the title box and interface animation
23 Labeling the timeline for our buttons
24 Title creation and animation
25 Drawing a rectangle graphic and animating it
26 Duplicating boxes for interface animation
27 Show and hide the hotspots and boxes on our timeline with CSS
28 Adding a Google map widget
29 Finalizing the interface animation for the buildings
30 Animating our hot-spots for rollover events
31 Moving the hot-spot animations to the correct labels
32 Coding triggers to the timeline to control the rollovers
33 Making the building 1 hot-spot button work with actions
34 Adding the mouse-over and mouse-out actions
35 Naming all of the building hotspots
36 Tweaking the position of the titles and adding an arrow glyph
37 Adjusting the hotspots to fit the title and the arrow graphic
38 Animating the titles and arrows on the rollovers
39 Taking care of hotspot stuttering
40 Animating the interface building titles
41 Publishing the Adobe Edge Animate project
42 Wrapping up

Download File Size:740.26 MB

---