Description

This course will allow you to design interactive content for all types of mobile terminals compatible with iOS and Android systems, as well as for all modern computer browsers. You will implement HTML5, JavaScript and CSS3 functionality without having to manipulate code.

Who is this training for ?

For whom ?

Webmasters, graphic designers, layout designers or anyone responsible for website communication.

Prerequisites

Training objectives

Customize and save your workspace

Add animations to an existing HTML page

Create a responsive layout

Use the timeline to create animations

Manage typography within animations

Training program

• Interface Overview
  • Installing and starting the software.
  • Create a workspace.
  • The toolbar, Elements panel, and Stage.
  • The Properties panel.
  • The Library, Assets, Symbols and Fonts panels.
  • The Scenario and Code panels.
  • The timeline: general overview.
  • Case study Personalize and save your workspace.
• Create and save an Edge document
  • The Rectangle, Rounded Rectangle and Ellipse tools.
  • The Text tool.
  • Place an image.
  • Create content for Edge Animate with Photoshop, Illustrator and FW.
  • Formats and image weights for the Internet.
  • Preview a document.
  • Practical work Create three versions of sites, small, medium and large.
• Modify, enrich and reuse
  • Manipulate objects on the stage.
  • Reorder, align and distribute.
  • Function for prioritization, object groups and overflow.
  • Export/Import symbols.
  • ansym.
  • Practical work r nAdd animation to existing HTML.
• Typography and proportional layout
  • Add Webfonts to an animated composition.
  • Free online fonts.
  • Downloadable, local and CSS fonts.
  • Subscription fonts.
  • Resizing options.
  • Percentage and pixel guides.
  • Symbol scaling.
  • Practical work Creating a responsive layout.
• Animate
  • Use the timeline (basic rules, player).
  • Create an animation (movement, appearance, rhythm, acceleration).
  • Transitions and animation keys .
  • Copy/paste transitions.
  • Lock mark and pop.
  • Use the rotation or tilt function of an object.
  • Displaying symbols, labels, and inserting moving text.
  • Practical work Producing an animation.
• Interactivity
  • Add interactivity.
  • Code on the timeline.
  • Actions on objects.
  • Cursor property.
  • Exercise: Exercise: on interactivity.
• Exporter / diffuser
  • Overview of the anatomy of an Edge Animate project.
  • Export an animation.
  • Bottom level scene (IE 6, 7 and 8).
  • PreLoader, Poster.
  • Publish to the web.
  • Publish to InDesign and Digital Publishing Suite or iBooks Author.
  • Practical work rnExport your project.