E bros webinar adobe edge presentation

Building Learning Interactions in Adobe Edge
Animate
Jeff Batt
eLearning Brothers
Product Development Manager
Wednesday, July 31, 13
Contact Info:
jeff@elearningbrothers.com

Files to download:
elearningtemplates.com
Download Files
The 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
There is a chance not everything may be covered during the session. Check out www.kinetic-media.com for future
tutorials.

What is Edge Animate?
What does Edge Animate have to do with eLearning? Think of the application of Flash in eLearning.

What does Edge make?

Advanced Interactions
You can build complex interactive content just like you can in Flash or hand coded HTML.

www.html.adobe.com
Where to Get Adobe Edge?
Adobe Edge Animate is part of the Creative Cloud license plan. Prior to June 2013 it was
free.

Getting Started - In App Tutorials
The 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
Two 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
Auto 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
PIN 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
Easing 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
Labels:
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
Triggers:
- 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
Code 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
Possible 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>
Add 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 Complete
EC.centerStage(sym);

GreenSock Javascript
//Get all button variables
var tab1 = sym.$("Tab_1");
//Animate in each button one after the other
TweenLite.from(tab1, 1, {css:{y:567}, ease:Expo.easeOut});
http://www.greensock.com/gsap-js/
http://api.greensock.com/js/
Example Code:
//Get all button variables
var box1 = sym.$("Box_1");
//Animate in each button one after the other
TweenLite.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
Sound using Edge Commons
http://www.edgedocks.com
http://cdn.edgecommons.org
//Establish variable for path to all audio
var assetsPath = "sounds/";
//Load in all audio files
EC.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
Using 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 variable
var videoBox = sym.$("videoBox");
//Establish HTML content in an iFrame... In this case the HTML is an iFrame
var 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 clip
videoBox.html(youtube);

Web publish
Animate package
iBooks widget
Deployment
Publishing 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

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

E bros webinar adobe edge presentation