Chapter 3: Creating content & importing assets. EDOBE Edge Animate CC 2014, XDOM EM
Below you will find brief information for Edge Animate CC. This guide helps you create rich animations faster and easier. It covers importing HTML5 videos, using sprite sheets to add advanced animations, linking to DPS articles, and using the enhanced Actions editor. You can also copy and paste illustrations from Adobe Illustrator and use scrolling hand and zoom tools.
Advertisement
Advertisement
Chapter 3: Creating content & importing assets
7
Creating content for animation
Creating content for animation
Creating a project and importing content (Video)
Creating a project and importing content (Video)
Create assets and import them into your Edge Animate project
Create assets and import them into your Edge Animate project
Use web fonts
You can apply Edge Web Fonts to text directly from within Edge Animate. When you select a font from the Edge Web
Fonts dialog, the corresponding code to fetch the font from the server is automatically incorporated into the code.
Edge Animate also allows you to specify fallback fonts when there is a problem with downloading, or using Edge Web
Fonts on the user's computer.
1 Insert text within the Edge Animate canvas.
2 In the Text option of the Properties panel, click the "+" button next to the font menu.
Last updated 6/15/2014
Creating content & importing assets
8
3 Select the font that you want to use. A preview of the text with the applied font is displayed.
You can filter the fonts in the panel by their type using the buttons to the left of the panel. For example, to view only fonts of the sans serif type, click the Sans Serif button.
4 Click Add Font.
The selected and applied fonts are added to the Font library in Edge Animate. Double-click the font in the Font library to specify fallback fonts.
In cases where there is a problem with downloading web fonts from the server, the fallback fonts are used for display.
The fonts are chosen in the order in which they appear in the list.
Last updated 6/15/2014
Creating content & importing assets
Add audio to animations
Adobe Edge Animate now supports native HTML5 audio with the <audio> element — making it possible to add sounds to your animation projects. Using basic HTML and JavaScript, you can control audio playback in compositions. You can also bind audio elements to touch and mouse events, as well as trigger audio playback on the timeline. The audio capabilities in Adobe Edge Animate are embedded in the HTML DOM. So sounds play on any computer or device without requiring a plug-in.
You can import the following audio types into Edge Animate:
• .mp3
• .ogg/.oga
• .wav
• .m4a
• .aac
For the best cross-browser consistency, include .mp3 and .ogg resources of audio elements in your project. For a detailed description of supported audio types, visit Media formats supported by the HTML audio and video elements .
To create fallback versions of your audio file, you can use an audio conversion application such as Adobe Audition, which is included in your Creative Cloud membership.
Add audio to compositions
Do one of the following:
• Drag-and-drop the audio files into your project from your file system. An 'audio group' with the name of the audio file is created in the Library. This audio group contains the audio file and the fallback files for cross-browser compatibility.
Note : Fallback files get automatically grouped under the audio group when you drop them into the project.
Last updated 6/15/2014
9
Creating content & importing assets
Audio group in Library
• Click Add Audio in your project Library and browse for the audio file. Then, drag the audio group to the stage.
Add Audio option in Library
After you add audio to your project, an 'audio element' appears in the Elements panel. When you select the audio element in the Elements panel, options to control the playback of your audio appear.
Audio in Elements panel
Play back and control audio
You can play back and control audio using any of the following options:
• Properties panel
• AutoPlay: Allows the audio file to automatically play on the timeline.
• Loop: Makes the audio file loop from the beginning after it finishes playing.
Audio control options in the Properties panel
• Timeline
• Play: Plays the audio file from the current playhead position.
Last updated 6/15/2014
10
Creating content & importing assets
• Play From: Allows you to specify the time marker you want to play from.
• Pause: Allows you to pause the audio track. Use a play function to resume play back.
Audio control options in Timeline
• Audio actions: Using code snippets in Actions to control audio playback through events.
More Help topics
Using audio on devices
Audio actions
1 Click {} adjacent to the audio element on the timeline to open the Actions editor.
2 From the list of events that appear, click the required trigger.
3 In the Pick An Action list, click Audio, and then click the required action.
11
Audio actions in Actions editor
4 In the Pick A Target section, click Stage, and then double-click the element to which the action that you selected must apply.
5 If required, modify the code in the code window.
Last updated 6/15/2014
Creating content & importing assets
Important : Sometimes your audio plays perfectly fine locally, but fails to play after you load it to your Web server. In such cases, configure the .htaccess file of your Website to include the MIME types required for audio support. Contact your Website administrator for assistance.
Fine-tune audio
You can set keyframe transitions to control volume transitions in the timeline. Use volume transitions to create unique audio effects, such as, fade in, fade out, and cross-fading multiple tracks.
Note: Volume transitions for audio are not available on most mobile devices. See Using audio on devices for restrictions.
Preload audio
To preload audio files before the composition loads, select “Preload Audio” in the Preloading section of the Properties panel on stage.
Note : Preloading audio is not available on most mobile devices. See Using audio on devices for restrictions.
Enable the default audio player
You can use the browser default Windows Media Player to show controls for your audio. The default audio player is hidden by default. To turn the display of the player on, select the audio element and select “On” in the Properties panel.
12
Enabling the default audio player
The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example, the player you see in Chrome is different than the player you see in Firefox. See Audio actions to learn how to create custom controls that you can use to create your own player.
When the player is viewed on stage, you can add motion and transform properties to the player like you add for other objects. Since <audio> elements are a special type of HTML element, only a subset of properties is available for you to apply:
• Opacity
• Clipping
• Position and Size
• Transform
Using audio on devices iOS
In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit, preload, AutoPlay, and play back actions are disabled. No data is loaded until the user plays the audio.
Last updated 6/15/2014
Creating content & importing assets
You can use the Audio Actions to call an audio element triggered by a user event. For more information on audio actions, see Audio Actions .
Volume keyframes and control configured through the volume property are not supported on iOS devices. Users can adjust the volume using the volume control of the device itself.
Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later on all devices.
Android
Android generally has the same audio element limitations as iOS.
Tips and cross-browser considerations
13
Audio sync
Audio can be used to choreograph sound to your stage compositions. However, due to the nature of the Web, audio tracks can fall out-of-sync with elements moving on the stage. You may experience playback latency when coordinating movement with sound, especially in longer tracks.
Audio Sprites
Using audio sprites allows you to create a single audio file with separate playable parts. This technique is used to download all your audio in a single file to save download time.
To use an audio sprite, convert your audio element to a symbol and use play back markers to call the sections of your sprite.
Add video to animations
Edge Animate supports native HTML5 videos making it easier for you to use your favorite video clips within your compositions. You can control the playback of videos using basic playback actions and JavaScript. Also, you can bind video elements to touch and mouse events to create a rich interactive experience.
Video playback capabilities are supported in the HTML DOM. This means, the videos can play on any modern desktop or device browser without requiring a plug-in.
You can import .mp4 and .ogv files into Edge Animate.
For the best cross-browser compatibility, include .mp4 and .ogv resources of video elements in your project. For a detailed description of supported video types, visit Media formats supported by the HTML audio and video elements .
Add video to compositions
Do one of the following:
• Click File > Import or drag-and-drop the video files directly onto the Stage from your file system. A 'video group' with the name of the video file is created in the Library. This video group contains the video file and any fallback files you add for cross-browser compatibility.
Last updated 6/15/2014
Creating content & importing assets
Note : Fallback files get automatically grouped under the video group by name when you import them into the composition.
• Click Add Video in your project Library and browse for the video file. Then, drag the video group from the library to the Stage.
14
Add Video option in Library
After you add a video to your composition, a 'video element' appears in the Elements panel. Options to control the playback of your video appear in the Properties panel when you select the video element in the Elements panel.
Playback and control video
You can play back and control video using any of the following options:
• Properties panel
• Autoplay: Allows the video file to automatically play on the timeline and desktop browsers.
• Loop: Makes the video file loop from the beginning after it finishes playing.
Video controls in Properties panel
• Timeline
• Play: Plays the video file from the current playhead position.
• Play From: Allows you to specify the time marker you want to play the video from.
• Pause: Allows you to pause the video. Use a play function to resume playback.
Last updated 6/15/2014
Creating content & importing assets
Video playback options in Timeline
• Video actions: Using code snippets in the Actions editor to control video playback through events.
Video actions
1 Open the Actions editor by clicking {} adjacent to Stage on the Timeline.
2
3
Click a trigger (event).
From the Pick An Action list, click Video, and then click the required action.
You can also search for an action using the search box in the Pick An Action section.
15
Video actions in Actions editor
4 From the Pick A Target section, click Stage, and then double-click the element or symbol to which you want to assign the selected action.
You can also search for the element or symbol using the search box in the Pick A Target section.
Preload video
To preload video files before the composition loads, select “Preload Video” in the Preloading section of the Properties panel on stage.
Note : Preloading video is not available on most mobile devices. See Using video on devices for restrictions.
Last updated 6/15/2014
Creating content & importing assets
Preload video
Enable the default video player
You can use the browser's default media player to show controls for your video. The default video player is hidden by default. To enable the default player, select the video element and select "Controls" in the Video section of the Properties panel.
Enabling default video player in Properties panel
The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example, the player you see in Chrome is different than the player you see in Firefox.
When the player is viewed on stage, you can add motion, transform, and other properties to the player like you add for other objects.
Using video on devices iOS
In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit, preload, Autoplay, and playback actions are disabled. No data is loaded until the user plays the video.
You can use the video actions to call a video element triggered by a user event. For more information on video actions, see Video actions .
Android
Android generally has the same limitations for videos as iOS.
Last updated 6/15/2014
16
Creating content & importing assets
Import sprite sheets
As designers, you most likely use many other tools or programs such as Adobe Photoshop or Adobe Flash Professional to create complex images and character animations. Edge Animate lets you reuse such creations by supporting the import of sprite sheets generated from such tools.
A sprite sheet is an image file that contains several smaller graphics in a tiled grid arrangement. By compiling several graphics into a single file, you enable Edge Animate and other applications to use the graphics while only needing to load a single file. This loading efficiency can be very helpful in situations such as building animations where performance is especially important.
Most tools let you export sprite sheets only as image files (PNG/JPEG). Adobe Flash Professional CC 2014 and later can generate Edge Animate-specific sprite sheets. You can import both types of sprite sheets - PNG/JPEG as well as the ones that are generated from Flash Professional - into Edge Animate.
Note: You may see performance issues with Edge Animate compositions on devices if you import and use sprite sheets of size greater than 2048 X 2048 pixels.
Import sprite sheets saved as only image files
1 Before importing sprite sheets into Edge Animate, ensure that:
• The images in the sprite sheet are of equal dimensions
• The padding between the images are uniform
2 Open Edge Animate. In the Symbols panel, right-click +, and click Import Sprite Sheets.
You can also click File > Import Sprite Sheets.
17
Import Sprite Sheets from Symbols panel
3 Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.
The Define Sprite Tiles dialog box appears.
Last updated 6/15/2014
Creating content & importing assets
18
Define Sprite Tiles - importing PNG or JPEG sprite sheets
• To preview the animation, click Preview Animation
• Specify the duration and fps. For PNG and JPEG files, the fps is set to 24 by default. You can modify the fps as required.
• Specify the number of rows and columns and the trimming options.
4 Click Import.
The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are saved as separate symbols (named spritesheet_name_n) in the Symbols panel.
5 Drag the required symbols from the Symbols panel onto the Stage.
Import sprite sheets generated from Adobe Flash Professional
1 Ensure that you have generated the sprite sheet by choosing the Edge Animate format in Adobe Flash Professional
CC 2014 (or later).
For information on generating sprite sheets in Adobe Flash Professional CC, see Adobe Flash Professional CC Help .
2 In the Symbols panel, right-click +, and click Import Sprite Sheets.
Last updated 6/15/2014
Creating content & importing assets
You can also click File > Import Sprite Sheets.
Import Sprite Sheets using Symbols panel
3 Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.
The Define Sprite Tiles dialog box appears.
19
Define Sprite Tiles - importing Flash sprite sheets
• To load the EAS file that corresponds to the selected PNG or JPEG, select Load An EAS File.
• To preview the animation, click Preview Animation.
Last updated 6/15/2014
Creating content & importing assets
• Specify the duration and fps. For EAS files, the fps is inherited from the source. You can modify the fps as required.
4 Click Import.
The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are saved as separate symbols (named spritesheet_name_n) in the Symbols panel.
5 Drag the required symbols from the Symbols panel onto the Stage.
20
Hyperlink elements to Adobe DPS articles
e-magazines published through Adobe Digital Publishing Suite (DPS) can be made more engaging and interesting by including Edge Animate compositions in them. Edge Animate lets you publish the compositions as OAM files that can be easily included in Adobe InDesign (part of DPS).
In addition, Edge Animate compositions can be used as navigation aids within an e-magazine. Elements in a composition can be hyperlinked to specific articles in the magazine where the animation will be embedded. Readers can click these hyperlinked elements to quickly jump to the relevant article.
You can set up hyperlinking between the elements of a composition and the required Adobe DPS articles right from within Edge Animate. You can then test the linking by publishing the animation as OAM files and embedding them within the articles.
To hyperlink elements to articles or pages in an Adobe DPS article:
1
2
Click {} adjacent to Stage on Timeline.
Select a trigger from the list that appears in the Actions editor. It is recommended that you choose the compositionReady event for setting up navigation.
Actions editor showing the compositionReady event
Last updated 6/15/2014
Creating content & importing assets
3 In the Pick An Action section, click Adobe DPS, and then click Navigate Article. Specify the Article Name and Page
No you want to link to. You can also edit the code to specify these details as explained in Step 5.
21
Adobe DPS action options in Actions editor
4 In the Pick A Target section, click stage, and then double-click the name of the element that is the target for the action above.
5 (Optional) Edit the code to specify one of the following:
• The name of the article in the required Folio in Adobe InDesign and the page number
Example: sym.$("Rectangle").append('<a style="display:block;width:100%;height:100%;" href="navto://my_article_Name#my_page_number"/>');
• Relative link to articles, such as first, last, next, previous, or current
Example:
To navigate to the last page of the last article in the folio, use navto://relative/last#last sym.$("Rectangle").append('<a style="display:block;width:100%;height:100%;" href="navto://relative/last#last');
For more information on using relative navto hyperlinks, see the Adobe DPS documentation .
Using Flash sprite sheets with Animate (Tutorial)
Using Flash sprite sheets with Animate (Tutorial)
Last updated 6/15/2014

Public link updated
The public link to your chat has been updated.
Advertisement
Key features
- HTML5 video support
- Sprite sheet import
- Article linking for Adobe DPS
- Enhanced Actions editor
- Copy-paste from Adobe Illustrator
- Scrolling hand and zoom tools