EDOBE XDOM EM User Manual Page 1

Adobe® Edge Animate CC HelpJune 2014

6Last updated 6/15/2014Chapter 2: Download sample filesDownload samples from AdobeDownload samples from AdobeSample Downloads from Chris Gannon's

96Use motion pathsLast updated 6/15/2014Let your viewers explore your composition and become active participants. Use Adobe Edge Animate’s built-in co

97Use motion pathsLast updated 6/15/2014The project is an interactive photo gallery showing images from Burma. Viewers can watch the short slideshow a

98Use motion pathsLast updated 6/15/2014The file includes all the assets already placed on the Stage and the transitions between each image on the Tim

99Use motion pathsLast updated 6/15/2014In this lesson, you’ll learn to create nonlinear navigation, meaning the animation doesn’t have to play straig

100Use motion pathsLast updated 6/15/2014You can think of JavaScript, jQuery, and the Edge Animate API as different layers of control. The Edge Animat

101Use motion pathsLast updated 6/15/20143 In the Timeline panel, click the Insert Trigger button on the top Actions row. You can also choose Timeline

102Use motion pathsLast updated 6/15/2014New code appears in the panel, replacing the existing comment. The new code comes with its own comments that

103Use motion pathsLast updated 6/15/2014Script panel viewing options: The script panel that opens when you add a trigger has several options to help

104Use motion pathsLast updated 6/15/2014• You can add comments to remind you or others of what you are accomplishing with different parts of the scri

105Use motion pathsLast updated 6/15/20144 Drag the file called button2_gray.jpg from the Library panel to the Stage, and position it just below the f

7Last updated 6/15/2014Chapter 3: Creating content & importing assetsCreating content for animationCreating content for animationCreating a projec

106Use motion pathsLast updated 6/15/2014 Adding the eventsEach element on the Stage can have its own events and actions. Insert code for individual e

107Use motion pathsLast updated 6/15/20142 Select the first option: click.Edge Animate adds a click tab at the top of the panel with an empty script p

108Use motion pathsLast updated 6/15/2014Edge Animate adds the code to stop the playhead at a particular position on the Timeline.2 In between the par

109Use motion pathsLast updated 6/15/20144 Preview your Edge Animate composition in a browser by selecting File > Preview in browser, or pressing C

110Use motion pathsLast updated 6/15/20146 Add similar click events to all the other grayscale thumbnail images, with the Stop at option. Be sure to c

111Use motion pathsLast updated 6/15/2014In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the le

112Use motion pathsLast updated 6/15/20144 If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the

113Use motion pathsLast updated 6/15/2014Click on the arrow icon after the error description to jump directly to the source of the error in the Code p

114Use motion pathsLast updated 6/15/2014The image of the fisherman appears at 0:00 seconds.2 Click the Insert Label button, or press Ctrl+L (Windows)

115Use motion pathsLast updated 6/15/2014 Changing the references to the TimelineNow that the Timeline contains labels, you can change the references

8Creating content & importing assetsLast updated 6/15/20143 Select the font that you want to use. A preview of the text with the applied font is d

116Use motion pathsLast updated 6/15/20145 At any point during the slideshow, click the thumbnail images.The slideshow stops and shows the selected im

117Use motion pathsLast updated 6/15/20144 Drag all four of the other colorized versions of the thumbnails to the Stage, positioning them exactly on t

118Use motion pathsLast updated 6/15/2014 Inserting the mouseover eventEach grayscale thumbnail contains a click event. You’ll have to edit each of th

119Use motion pathsLast updated 6/15/20143 Position your cursor on the second line of the script pane (after the first line of comments), and choose t

120Use motion pathsLast updated 6/15/20145 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressi

121Use motion pathsLast updated 6/15/2014The script panel for button1_color opens.2 In the popup menu that appears, choose mouseout for the event.Edge

122Use motion pathsLast updated 6/15/20144 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain

123Use motion pathsLast updated 6/15/20146 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressi

124Use motion pathsLast updated 6/15/2014 Using the pointerThe Properties panel controls the cursor appearance and allows you to select a custom icon

125Use motion pathsLast updated 6/15/2014Symbols, as you learned in the previous lesson, are independent objects that you create that can have their o

9Creating content & importing assetsLast updated 6/15/2014Add audio to animationsAdobe Edge Animate now supports native HTML5 audio with the <a

126Use motion pathsLast updated 6/15/20144 Click the Stage button at the top of the Stage to exit your symbol.5 Drag the triangle.png image from the L

127Use motion pathsLast updated 6/15/20143 Choose the Get Symbol option.Edge Animate adds the JavaScript code to select a particular symbol on the Sta

128Use motion pathsLast updated 6/15/2014The next statement appears as follows:mySymbolObject.play();Note: You can combine the two statements into one

129Use motion pathsLast updated 6/15/2014The next statement appears as follows:mySymbolObject.stop(0);6 Preview your Edge Animate composition in a bro

130Use motion pathsLast updated 6/15/20142 In the Timeline or the Elements panel, click the Open Actions button for the Rectangle element.3 Choose cli

131Use motion pathsLast updated 6/15/2014Review questions1 What's the difference between actions, triggers, and events, and how are they used to

132Use motion pathsLast updated 6/15/2014Create your first Edge Animate projectCreate your first Edge Animate projectUse Edge Animate file in InDesign

133Last updated 6/15/2014Chapter 6: Layout and designCreating a flexible layoutCreating a flexible layoutCreate fluid responsive web page layoutsCreat

134Last updated 6/15/2014Chapter 7: Integration and publishingEdge Animate API guideEdge Animate API guideEdge Animate and the Twitter API (Video)Edge

10Creating content & importing assetsLast updated 6/15/2014Audio group in Library• Click Add Audio in your project Library and browse for the audi

11Creating content & importing assetsLast updated 6/15/2014• Play From: Allows you to specify the time marker you want to play from.• Pause: Allow

12Creating content & importing assetsLast updated 6/15/2014Important: Sometimes your audio plays perfectly fine locally, but fails to play after y

13Creating content & importing assetsLast updated 6/15/2014You can use the Audio Actions to call an audio element triggered by a user event. For m

14Creating content & importing assetsLast updated 6/15/2014Note: Fallback files get automatically grouped under the video group by name when you i

15Creating content & importing assetsLast updated 6/15/2014Video playback options in Timeline• Video actions: Using code snippets in the Actions e

Last updated 6/15/2014Legal noticesLegal noticesFor legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

16Creating content & importing assetsLast updated 6/15/2014Preload videoEnable the default video playerYou can use the browser's default medi

17Creating content & importing assetsLast updated 6/15/2014Import sprite sheetsAs designers, you most likely use many other tools or programs such

18Creating content & importing assetsLast updated 6/15/2014Define Sprite Tiles - importing PNG or JPEG sprite sheets• To preview the animation, cl

19Creating content & importing assetsLast updated 6/15/2014You can also click File > Import Sprite Sheets.Import Sprite Sheets using Symbols pa

20Creating content & importing assetsLast updated 6/15/2014• Specify the duration and fps. For EAS files, the fps is inherited from the source. Yo

21Creating content & importing assetsLast updated 6/15/20143 In the Pick An Action section, click Adobe DPS, and then click Navigate Article. Spec

22Last updated 6/15/2014Chapter 4: Create animations using the TimelineThe Edge Animate timelineThe Edge Animate timelineCreating Animations in Edge A

23Create animations using the TimelineLast updated 6/15/20144 With the initial properties pinned, change the values of the element properties.Because

24Create animations using the TimelineLast updated 6/15/20142 Press Ctrl+C (Windows) or Cmd+C (Macintosh) to copy the transition to the Clipboard.You

25Create animations using the TimelineLast updated 6/15/2014 Changing Text-Specific PropertiesOnce you have text in your Animate project, there are se

iiiLast updated 6/15/2014ContentsChapter 1: What's newNew features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26Create animations using the TimelineLast updated 6/15/2014• word-spacing. Varies the distance between words. Use carefully or you may end up with aw

27Create animations using the TimelineLast updated 6/15/20148 Click the Standard tab and then select and copy the code displayed. With the code stored

28Create animations using the TimelineLast updated 6/15/2014Changing Other Text PropertiesLike any other element in Animate, you probably don’t expect

29Create animations using the TimelineLast updated 6/15/2014 Making That Headline Drop In In most cases, the purpose of text is to communicate a messa

30Create animations using the TimelineLast updated 6/15/20146 Set the text box’s size and location to match the colored rectangle, with the size to 55

31Create animations using the TimelineLast updated 6/15/201411 Select OnEdgeTemplateCopy and press Ctrl+D (c-D) twice. This creates two more copies o

32Create animations using the TimelineLast updated 6/15/201418 Select “ON” and set the Rotate property back to 0, and move “ON” over the same word in

33Create animations using the TimelineLast updated 6/15/2014• For a drop shadow, set the text to a mid-gray tone and then adjust the opacity to taste.

34Create animations using the TimelineLast updated 6/15/2014Click “Add Keyframe for Y” to add new location keyframes. Drag the playhead to 1.75 and th

35Create animations using the TimelineLast updated 6/15/20145 Click outside of the Easing panel. The panel closes and your easing method is applied to

ivEDGE ANIMATEContentsLast updated 6/15/2014Using Animate files in InDesign or Muse (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36Create animations using the TimelineLast updated 6/15/20144 When the color picker appears, choose a dark blue color to represent deep space. If in d

37Create animations using the TimelineLast updated 6/15/201410 In the timeline, make sure that the Auto-Keyframe Mode button is pressed. When the Auto

38Create animations using the TimelineLast updated 6/15/201417 Move the playhead back to 0:00, and then in the toolbar, click the letter T. The text t

39Create animations using the TimelineLast updated 6/15/2014 Setting the StageAs the Bard said a few hundred years ago, “All the world’s a stage.” Tha

40Create animations using the TimelineLast updated 6/15/2014• Use Min W and Max W to set the minimum and maximum width for the stage. Web pages aren’t

41Create animations using the TimelineLast updated 6/15/2014 Rectangles: Building a Basic BoxUsing the Rectangle tool (M), you can add blocks of color

42Create animations using the TimelineLast updated 6/15/2014 Aligning, Distributing, and Arranging ElementsThe maxim that “everything has its place” i

43Create animations using the TimelineLast updated 6/15/2014 Rulers and Manual GuidesThe stage includes rulers that help you place elements with preci

44Create animations using the TimelineLast updated 6/15/20143 In the timeline (Figure 23) make sure that the Auto Keyframe Mode and Auto Transition Mo

45Create animations using the TimelineLast updated 6/15/201411 Create two more skewed rectangles, naming and coloring them Blue and Yellow. Position

1Last updated 6/15/2014Chapter 1: What's newNew features summaryThe 2014 release of Edge Animate CC includes several new features and enhancement

46Create animations using the TimelineLast updated 6/15/20145 Drag each of the rectangles across the stage until the tail end of the skewed rectangle

47Create animations using the TimelineLast updated 6/15/2014 Rounded Rectangles: More than Meets the EyeOK, Animate pulls a fast one when it comes to

48Create animations using the TimelineLast updated 6/15/2014 It’s possible to drag the number so that the corner radii pass one another at the center,

49Create animations using the TimelineLast updated 6/15/20145 Click the vertical offset and type 4.6 Click the Blur radius and type 14.7 Click Spread

50Create animations using the TimelineLast updated 6/15/2014The strengths and weaknesses of each format are important when you’re working with images.

51Create animations using the TimelineLast updated 6/15/2014For a lesson on animating with symbols:1 Select Window > Lessons in Edge Animate.2 Clic

52Create animations using the TimelineLast updated 6/15/2014Learn more• Leveraging independent symbol timelinesAnimate existing HTMLYou can animate an

53Create animations using the TimelineLast updated 6/15/2014You can also click the Open Actions button on the left side of an element or symbol name i

54Create animations using the TimelineLast updated 6/15/2014Add triggers to the TimelineYou can place triggers on the Timeline to execute JavaScript c

55Last updated 6/15/2014Chapter 5: Use motion pathsAnimating over a curved pathNew features summaryNew features overviewSarah Hunt, the Product Manage

2What's newLast updated 6/15/2014Import sprite sheetsFor more information on importing sprite sheets into Edge Animate, see Import sprite sheets

56Use motion pathsLast updated 6/15/2014Using Motion Paths as the default for new elements2 Create a transition as you normally do using keyframes or

57Use motion pathsLast updated 6/15/2014Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the

58Use motion pathsLast updated 6/15/2014Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path

59Use motion pathsLast updated 6/15/2014Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the tem

60Use motion pathsLast updated 6/15/2014 Eyedropper toolThe new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper ic

61Use motion pathsLast updated 6/15/2014New features summaryNew features overviewSarah Hunt, the Product Manager for Edge Animate provides a brief ove

62Use motion pathsLast updated 6/15/2014Motion Path defined using Bezier curve• To add an anchor point, hover your mouse on the path and click. • To d

63Use motion pathsLast updated 6/15/2014Create From Template option in File menuTemplate files have .antmpl extension and can be freely distributed an

64Use motion pathsLast updated 6/15/2014New features overviewSarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animat

65Use motion pathsLast updated 6/15/2014• To unlink the two handles on either side of an anchor point so that you can move one independently of the ot

3What's newLast updated 6/15/2014Actions pop-up window prior to Edge Animate CC 2014Actions editor in Edge Animate CC 2014A Step 1: Pick an actio

66Use motion pathsLast updated 6/15/2014Swipe gesturesYou can now bind elements with left and right swiping actions for mobile-focused experiences. Yo

67Use motion pathsLast updated 6/15/20144 Set the Frameworks Via CDN preference. Select this option to download the composition's associated jQue

68Use motion pathsLast updated 6/15/2014Applying colors and gradients in Edge AnimateYou can do the following in the gradients panel:• Use color stops

69Use motion pathsLast updated 6/15/2014• Save the custom colors as swatches for reuse.• Specify a value for color in any of the three formats (RGBa,

70Use motion pathsLast updated 6/15/2014Leverage Edge web fonts for better typographyEdge Animate helps leverage the power of the @font-face CSS prope

71Use motion pathsLast updated 6/15/2014Iframe friendly preloadersPreloading is now optimized to work within Iframes for coordinated resource loading.

72Use motion pathsLast updated 6/15/2014Lessons panelYou can access the Lessons panel from the Getting Started tab on the Welcome Screen, or from the

73Use motion pathsLast updated 6/15/2014Support older browsers with poster imagesDefine a fallback state of your project in the form of a poster image

74Use motion pathsLast updated 6/15/2014Release NotesEdge Animate CC 4.0 (June 2014) Release Notes Edge Animate CC 3.0 (January 2014) Release Notes Ed

75Use motion pathsLast updated 6/15/2014SaveThis option will either save the current document if it has been previously saved to the file system, or i

4What's newLast updated 6/15/2014If you find portions of code that are reused often, you can save them as snippets and insert them with a single

76Use motion pathsLast updated 6/15/2014Layout and guidance toolsWhen working with any element on Stage, it is useful to have some tools which assist

77Use motion pathsLast updated 6/15/2014Rulers also serve with the generation and positioning of manual Guides, which we will examine in the next sect

78Use motion pathsLast updated 6/15/2014Once Guide has been placed, it can remain a pixel-based Guide or transformed into a percentage-based Guide to

79Use motion pathsLast updated 6/15/2014• GIF: Graphics Interchange FormatImporting bitmap imagesOnce an image file is imported into an Edge Animate p

80Use motion pathsLast updated 6/15/2014Animation within Edge AnimateThere are many applications which enable the user to compose animated sequences.

81Use motion pathsLast updated 6/15/2014Note that the time controls in Edge Animate are actually grouped along with the Stage and are accessible from

82Use motion pathsLast updated 6/15/2014Timeline controlsThere are basically only four controls within the Timeline that we need to be concerned with:

83Use motion pathsLast updated 6/15/2014KeyframesSimilar to their representation in After Effects, keyframes in Edge Animate appear along the Timeline

84Use motion pathsLast updated 6/15/2014Adding keyframes through the application menuWith any element selected, we can position the Playhead upon the

85Use motion pathsLast updated 6/15/2014Using right-click for Keyframe insertionWith any element selected, we can position the Playhead upon the Timel

5What's newLast updated 6/15/2014Adobe Illustrator illustrations imported as SVG filesScrolling hand and zoom toolsEdge Animate CC 2014 includes

86Use motion pathsLast updated 6/15/2014• Background Color: #000000• Overflow: hidden3 Using the Rectangle tool, draw out an element upon the Stage. W

87Use motion pathsLast updated 6/15/201410 Notice that we now have transition bars appear on the Timeline with another set of keyframes at the end of

88Use motion pathsLast updated 6/15/2014• Location Y: 230 px• Size W: 100 px• Size H: 100 px• Background Color: #c0c0c05 Drag the Playhead to 0:04 in

89Use motion pathsLast updated 6/15/2014Note: Note that transitions can be adjusted on a per-object or per-property basis, allowing for a great amount

90Use motion pathsLast updated 6/15/2014Transition easing controlsYou may have noticed that the motion achieved through the examples presented so far

91Use motion pathsLast updated 6/15/2014The cursor will adjust to look like two lines with arrows pointing to the left or right when hovering over a t

92Use motion pathsLast updated 6/15/2014Animating a website headerOne of the basic use cases for Adobe Edge Animate is the creation of a simply animat

93Use motion pathsLast updated 6/15/2014• Location X: 16 px• Location Y: 11 px• Font Name: Arial Black, Gadget, sans-serif• Font Size: 40 px• Font Col

94Use motion pathsLast updated 6/15/20143 Using the Properties panel, make the following adjustment:• Location X: 986 px4 In the Timeline, click on th

95Use motion pathsLast updated 6/15/2014SummaryIn this chapter, we've examined how to create motion in Adobe Edge Animate by making use of the Ti