Showtime! Using Multimedia for Learning and Retention April 22 & 23, 2015

202 The Unique Multi-device Thinking Behind

Mayra Villar, Consultant

Showtime! Using Multimedia for Learning and Retention — April 22 & 23, 2015

1- Create your First Project

a. Start Adobe Edge Animate. b. Create “New”. c. Save your document: File>Save or Save as. As soon as we save our project, HTML and JavaScript files are created in a new folder. d. Select a shape from the toolbar (upper section) and draw the first element of your composition. e. Assign different CSS properties to this element from the Properties Panel, e.g. color, size, position, etc.

2- The Timeline: Add Animations

We can create motion and add animations to our composition by using a timeline. a. Select an element and click on the Toggle Pin.

Pin indicates a starting point for the animation. You can change the state of the element The properties from one point to another. b. When a property is changed, a keyframe (a small diamond) will appear in the Timeline. c. Determine the time at which the animation should be completed by dragging the Playhead (red line) over the rules marker in the Timeline. `

Session 202 – The Unique Multi-device Thinking behind Page 1 Adobe Edge Animate – Mayra Villar, Consultant Showtime! Using Multimedia for Learning and Retention — April 22 & 23, 2015

3- Actions: Add Interactivity

We can add basic interactivity to our project through different actions. a. Select and element and apply a specific action by first clicking on the small next to the selected item. b. Add a “click” event that will trigger an animation. First, select “click” and then, Play (sym.play) from the Action Panel.

4- Flexible Layouts

5- About formats

a. Graphic files: the latest version of Edge Animate (CC) works with SVG, JPG, PNG, and GIF file formats. b. Ouput format: Edge Animate CC writes HTML, CSS, and JavaScript files. c. Audio and Video: The newest release of Edge Animate CC includes native support for HTML5 audio and video.

Session 202 – The Unique Multi-device Thinking behind Page 2 Adobe Edge Animate – Mayra Villar, Consultant Showtime! Using Multimedia for Learning and Retention — April 22 & 23, 2015

Online Articles “For a Future Friendly Web,” Brad Frost, A List Apart “Multi-Device Development: Adobe Edge Animate,” Mayra A. Villar “Multi-Device Layout Patterns,” Luke Wroblewski

Books Clark, J. in The Mobile Book (2012). Smashing Media GmbH, Freiburg, Germany. Hinman, R. (2012) The Mobile Frontier: A Guide for Designing Mobile Experiences. Rosenfeld Media. Brooklyn, New York. Labrecque, J. (2012) Learning Adobe Edge Animate. Create engaging motion and rich intercativity with Adobe Edge Animate. Birmingham-Mumbai: Packt Publishing. Villar, M.A. (2013) Developing a Mobile Learning Strategy. USA. ASTD

Resources Edge Commons Interactive Design Experiments and Thoughts Blog by Chris Gannon Creative Design of Learning Experiences Blog by Mayra A. Villar

Session 202 – The Unique Multi-device Thinking behind Page 3 Adobe Edge Animate – Mayra Villar, Consultant