Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E bros webinar adobe edge presentation


Published on

Slide for the eLearning Brothers Webinar on 7/31/13. The webinar was Building Learning Interactions in Adobe Edge Animate.

In this webinar Brother Jeff walks you through how to get started with Adobe Edge Animate and how to start building learning interactions inside of it to use on the web or any other took like iBooks Author or any eLearning Authoring tool.

  • Be the first to comment

E bros webinar adobe edge presentation

  1. 1. Building Learning Interactions in Adobe Edge Animate Jeff Batt eLearning Brothers Product Development Manager Wednesday, July 31, 13 Contact Info:
  2. 2. Files to download: Download Files Wednesday, July 31, 13 The location of the sample files will be announced during the session.
  3. 3. • 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, 13 There is a chance not everything may be covered during the session. Check out for future tutorials.
  4. 4. What is Edge Animate? Wednesday, July 31, 13 What does Edge Animate have to do with eLearning? Think of the application of Flash in eLearning.
  5. 5. What does Edge make? Wednesday, July 31, 13
  6. 6. Advanced Interactions Wednesday, July 31, 13 You can build complex interactive content just like you can in Flash or hand coded HTML.
  7. 7. Where to Get Adobe Edge? Wednesday, July 31, 13 Adobe Edge Animate is part of the Creative Cloud license plan. Prior to June 2013 it was free.
  8. 8. Getting Started - In App Tutorials Wednesday, July 31, 13 The In-App tutorials can be a beneficial way to learn Adobe Edge Animate.
  9. 9. Create New Creates project files Starting a New Project Wednesday, July 31, 13 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.
  10. 10. Stage Area Wednesday, July 31, 13 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.
  11. 11. Toolbar Wednesday, July 31, 13 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.
  12. 12. Properties Wednesday, July 31, 13 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.
  13. 13. Elements and Library Panels Wednesday, July 31, 13 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.
  14. 14. Timeline Wednesday, July 31, 13 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.
  15. 15. Manual and Auto Keyframing Wednesday, July 31, 13 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
  16. 16. Pin Animating Wednesday, July 31, 13 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.
  17. 17. Easing Your Animations Wednesday, July 31, 13 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
  18. 18. Timeline Labels Wednesday, July 31, 13 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.
  19. 19. Timeline Triggers Wednesday, July 31, 13 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.
  20. 20. Scripting in Edge Animate using the Code Panel Wednesday, July 31, 13 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
  21. 21. Audio Stream audio via code Video iFrame Image Using External Assets Wednesday, July 31, 13 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.
  22. 22. Using other Javascript Plugins <!-- EdgeCommons All-in-one --> <script src="js/libs/EdgeCommons.js" type="text/javascript"></script> <!-- EdgeCommons Spotlight CSS --> <link href="js/libs/style.css" rel="stylesheet"> <!-- Greensock Animations Library --> <script src="js/minified/TweenMax.min.js"></script> Wednesday, July 31, 13 Add the following code within the <Head> tags in the main html file: <!-- EdgeCommons All-in-one --> <script src="js/libs/EdgeCommons.js" type="text/javascript"></script> <!-- EdgeCommons Spotlight CSS --> <link href="js/libs/style.css" rel="stylesheet"> <!-- Greensock Animations Library --> <script src="js/minified/TweenMax.min.js"></script> //Test on Creation Complete EC.centerStage(sym);
  23. 23. 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}); Wednesday, July 31, 13 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:
  24. 24. Establish the path to audio Load audio files Working with Audio Call audio file later by ID Wednesday, July 31, 13 Sound using Edge Commons //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.“click”);
  25. 25. YouTube Video Other web content iFrame & Video Wednesday, July 31, 13 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="" frameborder="0" allowfullscreen></ iframe>'; //Add the established HTML within the box movie clip videoBox.html(youtube);
  26. 26. Web publish Animate package iBooks widget Deployment Wednesday, July 31, 13 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.