e bros webinar adobe edge presentation

Building Learning Interactions in Adobe Edge Animate

Jeff BatteLearning Brothers

Product Development Manager

Wednesday, July 31, 13Contact Info: [email protected]

Files to download: elearningtemplates.com

Download Files

Wednesday, July 31, 13The location of the sample files will be announced during the session.

• Getting started with Adobe Edge

• Exploring the Edge Animate UI

• Using external assets

• Flexible layouts

• Animating using keyframes

• Using the pin tool to animate

• Easing your animations

• Symbols and nested symbols

• Scripting in Edge Animate using the code panel

• Timeline labels

• Timeline triggers

• Playing audio in Javascript

• Downlevel stage

• Deployment

• Using iFrames

Session Objectives

Wednesday, July 31, 13There is a chance not everything may be covered during the session. Check out www.kinetic-media.com for future tutorials.

What is Edge Animate?

Wednesday, July 31, 13What does Edge Animate have to do with eLearning? Think of the application of Flash in eLearning.

What does Edge make?

Wednesday, July 31, 13

Advanced Interactions

Wednesday, July 31, 13You can build complex interactive content just like you can in Flash or hand coded HTML.

www.html.adobe.com

Where to Get Adobe Edge?

Wednesday, July 31, 13Adobe Edge Animate is part of the Creative Cloud license plan. Prior to June 2013 it was free.

http://www.html.adobe.com


Getting Started - In App Tutorials

Wednesday, July 31, 13The In-App tutorials can be a beneficial way to learn Adobe Edge Animate.

Create New

Creates project files

Starting a New Project


Project Files:

These are the files that get created when you create a simple project. You have 1 folder called “edge_includes”. This has the jQuery files and other necessary files. Other JS files are specifically for Adobe Edge. You also get the Adobe Edge project file with the extension of .an. This is similar to a .fla file in Flash. This is not viewable by anyone but is only meant to open up the project file in Edge. If you download any project files from our template library, you will need to open up this .an file.



Stage Area


Stage Options:

• Rulers - Rulers work the same as they do in any other Adobe product. This gives you an indication of location on the stage as well as height and width of stage area. If you are using a Flexible layout the width on the stage becomes adjustable so you can see objects move right within the tool even before preview.

• Guides - Guides work the same as they do in any other Adobe product. This helps you align objects and position objects.

• Maximize frame in the drop-down box. Quick ways to zoom in and out of the stage area.

Toolbar


Tool Bar:

• Selection tool - The selection tool allows you to move any object on the stage or select an object so you can see/change properties in the properties panel.• Transform tool - The transform tool works just like it does in other Adobe tools. You can transform, resize and distort any selected object with the transform tool. • Clipping tool - The clipping tool will allow you to adjust the clip area of any object. You can extend out the clip area or make the clip area smaller.• Rectangle tool - This allows you to create a simple rectangle.• Rounded rectangle tool - This allows you to create a rectangle that has rounded curves. You can transform any rectangle into a rounded rectangle later in the properties section.• Ellipse tool - This will allow you to create a simple ellipse object on the stage. • Text tool - This tool is what you would use to insert text onto the stage. This does not allow HTML text input. You would have to do that through the code. • Color tool - The color tool is where you can select and adjust different colors. You can also do this from the properties panel. • Stroke tool - The stroke tool is where you can select and adjust different stroke colors for any selected object. You can also do this from the properties panel.• Layout defaults - The layout defaults allows you to adjust some of the default layout settings. You can adjust where the main anchor point is as well as if the left, top, width and height use pixels or percentages. You can also select to use “auto” for image width and image height which will allow the image to resize automatically on different screen resolutions.

Properties


Properties Panel:The properties panel will change depending on what you have selected. It will show what the properties of that selected object is.

• Width and height - You can adjust the width and height of any selected object. If no object is selected it will show the properties for the stage itself.• Stage color - This allows you to change the stage color. This will be the color for the entire stage size. If the stage size is percentage base the stage size/color will adjust to that percentage. • Min and Max width - You can determine the min width and the max width of how far your stage will go. Min Width means your content will not adjust below this width. Max Width means that no matter the stage area it will not go beyond that width. There is not Min Height and Max Height.• OverFlow - Overflow means anything beyond the object that is selected. This could be on any object or stage. By default the stage is selected as hidden. Meaning anything placed off the stage will be hidden to the end user. This could be adjusted on objects and movie clips to allow for some type of masking feature. • Autoplay - This will auto play the stage. You can adjust this to not automatically play the main timeline or any timelines within movie clips.• Composition ID - This is used mainly for the code within edge. You can change this here but in most cases you can just leave this as is.• Down-level Stage - Not all browsers will be compatible with the content you produce here so instead of showing messed up content or just a blank screen the down-level stage allows you to control what the end user see when they come to this interaction from a non-compatible browser.• Poster image - Typically just a screen shot of your interaction the poster is used for the default image when used in other applications such as iBooks.• Preloader - If you want a preloader on your interaction it is simple to make and use. Select which one you want or click edit to add more of a custom preloader.

Elements and Library Panels

Wednesday, July 31, 13Two other panels that you will use during your interaction building

Elements Panel:• Object order - Object order determines what is placed on top of what. You can not rearrange object order from the timeline. You must do this from the Elements panel. • Group objects - You can also group objects right in the elements panel.• Scripts per object - From the elements panel you can access and add code on each element on your stage.

Library Panel:• External images - The library will show you all the images you are using in your project as well as any objects in your images folder. If you delete something form the stage it is still in your images folder until you delete it from your images folder on your desktop.• Project symbols - Anytime you create a symbol in Edge it will place that symbol in your library. This way you can drag and drop any new instances of that symbol right onto the stage. • Embedded fonts - Anytime you embed a custom font or use a font from the Adobe Fonts it will show up under the fonts section.

Timeline


Timeline Controls:

• Play controls - Simple play skip and rewind buttons to help you navigate and preview your animations.• Auto keyframe mode - Auto key frame mode will create keyframes automatically when you move the timeline and object in the different spots you want your object to move. • Auto transition mode - The difference here is auto transition will automatically create a transition between the two keyframes that you create. • Auto toggle pin - This will toggle off/on the PIN animation for better more precise animations. • Easing options - You can choose which easing in/out you want for any object selected. The preview gives you an indication of how that easing will work.• Timeline bar - The timeline bar gives you an indication of when and what is happening on your stage. Unlike Flash it does not use frames for animation it uses milliseconds which is what HTML uses. • Object layers - Each object has to have it’s own layer in Edge. If you group elements into a movie clip then only the movie clip will show and not all the objects in the movie clip will show until you go into the movie clip. • Timeline triggers - Triggers are when some piece of code will fire. You can do this based on the timeline so when your timeline happens it will fire any code you want. You can insert the timeline trigger right on the timeline.• Timeline labels - Labels are extremely useful when creating interactions. We do not have different scenes to work with so you have to set up your interaction all on the same timeline so instead of jumping to certain miliseconds you can insert a label at a certain point in your timeline and then it can jump to that point in your timeline. • Manual keyframe - Manual keyframes allow you to determine when a key frame is inserted and what it is. • Animated property - This just shows what elements are being animated.• Zoom controls - Allows you to zoom up our zoom out on the timeline.• Show grid - This will show a grid on the timeline for better alignment.• Timeline snapping - This will snap other objects together for better alignment.• Show only animated - This will hide all objects that are not animated for better animating.

Manual and Auto Keyframing

Wednesday, July 31, 13Auto keyframe:- Turn on auto-keyframe and move the object where you want it to start. Then move the timeline scrubber to where you want the animation to end and then move the object. This will create the animation within the timeline. - You can also right click and add on a keyframe manually. - You can animate different objects like position, width, height, shadows and more- With auto key-framing you can move through the timeline and move your objects how you want. - If auto transition is not on it will not animate the object but instead just jump to that spot. May be good if you don't want an object to animate to a location and just want it to appear or disappear at a certain time. - You can grab the transitions and resize speed- You can also grab the transition and move it to any location in the timeline. - Use the off/on options to show/hide elements on the stage

Pin Animating

Wednesday, July 31, 13PIN is a new way to animate within Edge:

- Two ways to enable PIN animating. 1 - Double click on the playhead 2 - Click on the pin icon in the timeline.

- Blue dot represents locations and values of where the object is currently. If you want the object to end up in the location it is at then drag the yellow part behind the blue pin. If you want the current location to be the starting point then you drag the yellow part in front of the blue pin. Takes some getting use to but is a really nice feature.

- Double click on the play head to disable pin mode or click on the button in the timeline.

- Activate it when you need to move an object.

Easing Your Animations

Wednesday, July 31, 13Easing options in Edge:

- Easing needs to be applied to a transition- Select the transition and then select the easing button- You can choose standard easing. This would be a code thing in Flash so Edge makes this sooooo much easier. - Ease in (Start - Think of it as the slow part is at the start)- Ease out (End - Think of it as the slow part is at the end)- Ease out and in (Slow part is at the start and the end)- Choose what type of easing you want

Timeline Labels

Wednesday, July 31, 13Labels:

There are two ways to add labels. 1. You can add a label you can click on the icon about the triggers button. This will add label to the location of your playhead. 2. You can also add a label through the timeline menu or command+L

Note: Labels are helpful to jump to different parts of your timeline.

Timeline Triggers

Wednesday, July 31, 13Triggers:

- You can insert a trigger at any point in your timeline. - Triggers will fire when that part of the timeline is played. - You can have any type of code fire when the timeline trigger plays.

Scripting in Edge Animate using the Code Panel

Wednesday, July 31, 13Code Panel:

- You can access the code panel at anytime in the window menu or command+E- This brings up code you can edit or add to objects, the stage area or even the preloader.- You can even switch to full code to see Adobes Javascript. (Adobe Cautions to edit in full code with caution. Probably best to stick with normal code)- Code hints are on the right hand side. These are the same code hints that you will find in all the code editors. This view allows you to see any code that was added to any object as well- Clicking on the + icon shows you what type of events you can add your code to. - In the properties panel you can also get to a simplified version of the code panel that just has to do with that object. Going straight to the code panel allows you to see code across elements- You can even see the code within the symbol- You can change font size in the code panel menu option

Audio

Stream audio via code

Video

iFrame

Image

Using External Assets

Wednesday, July 31, 13Possible External Media

Images:- You can bring in images like PNG, JPG, GIF and SVG which is vector- Images get placed inside your images folder in the tool and behind the scenes so it is all together when you are ready to publish. Any images you bring in but end up not using make sure you delete them from your images folder to make your publish files smaller.- Always a good idea to optimize your images before you bring them into the tool. You can do this in Illustrator or Photoshop. Standard image prep works.

Audio: - Audio cannot be directly imported into Edge. Other plugins can be used for better audio production.

Video:- You can embed YouTube videos or other external video into Edge but have to do this through the code.

Using other Javascript Plugins

<script src="js/libs/EdgeCommons.js" type="text/javascript"></script> <link href="js/libs/style.css" rel="stylesheet">

<script src="js/minified/TweenMax.min.js"></script>

Wednesday, July 31, 13Add the following code within the <Head> tags in the main html file:

<script src="js/libs/EdgeCommons.js" type="text/javascript"></script> <link href="js/libs/style.css" rel="stylesheet">

<script src="js/minified/TweenMax.min.js"></script>

//Test on Creation CompleteEC.centerStage(sym);

GreenSock Javascript

//Get all button variablesvar tab1 = sym.$("Tab_1");

//Animate in each button one after the otherTweenLite.from(tab1, 1, {css:{y:567}, ease:Expo.easeOut});

http://www.greensock.com/gsap-js/

http://api.greensock.com/js/

Wednesday, July 31, 13Example Code://Get all button variablesvar box1 = sym.$("Box_1");

//Animate in each button one after the otherTweenLite.from(box1, 1, {css:{y:567}, ease:Expo.easeOut});

Documentation and Tutorials:http://www.greensock.com/gsap-js/http://api.greensock.com/js/



Establish the path to audio

Load audio files

Working with Audio

Call audio file later by ID

Wednesday, July 31, 13Sound using Edge Commonshttp://www.edgedocks.comhttp://cdn.edgecommons.org

//Establish variable for path to all audiovar assetsPath = "sounds/";

//Load in all audio filesEC.Sound.setup( [ {src: assetsPath + "click.mp3|" + assetsPath + "click.ogg", id: "click"}, {src: assetsPath + "hover.mp3|" + assetsPath + "hover.ogg", id: "hover"} ]);

//Within a click, hover or any other trigger you call the sound to play using the ID established.EC.Sound.play(“click”);

YouTube Video

Other web content

iFrame & Video

Wednesday, July 31, 13Using Video:

Step 1: Create a movieclip you can add use as a place holder. For this example call it “box2”

Step 2: Add the following code on a creation complete of your interaction. Replace the YouTube URL with the YouTube video you want or the location of the video in your project.

Code://Establish the name of a movie clip in a variablevar videoBox = sym.$("videoBox");

//Establish HTML content in an iFrame... In this case the HTML is an iFramevar youtube = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xNsGNlDb6xY" frameborder="0" allowfullscreen></iframe>';

//Add the established HTML within the box movie clipvideoBox.html(youtube);

Web publish

Animate package

iBooks widget

Deployment

Wednesday, July 31, 13Publishing Your Project:

Publish will just create a folder stripped of the project file that you can upload. You can either do this or just upload the current folder anyways minus the project file.

- In publish settings you can define iBooks and in design settings. - Choose to prompt IE6, IE7 users to install a google plugin to view content.- Choose to use CDN.

e bros webinar adobe edge presentation

Education