{"id":58,"date":"2018-05-15T19:13:13","date_gmt":"2018-05-15T19:13:13","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/ebooks\/?post_type=chapter&#038;p=58"},"modified":"2021-07-20T13:38:53","modified_gmt":"2021-07-20T13:38:53","slug":"chapter-4-media-in-ebooks","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/chapter\/chapter-4-media-in-ebooks\/","title":{"raw":"Chapter 4 \u2022 Media in eBooks","rendered":"Chapter 4 \u2022 Media in eBooks"},"content":{"raw":"\u201cMedia\u201d refers to audio, video, and animation files included in eBooks. The appropriateness and ability to include media depends on the eBook file format and anticipated viewing device and audience. Depending upon the intended audience and purpose of the eBook, media may be appropriate in the ePub format and is a strong point of iBooks. It may not be appropriate for Mobi because most B&amp;W eReaders do not have speakers or enough storage space for large video files.\r\n\r\nOf the various media types shown in <span style=\"color: #333399\"><strong>Table 4.1<\/strong><\/span>:\r\n<ul>\r\n \t<li><em>audio<\/em> refers to sound, examples of which could include background music, a voice reading the text in a children's book, or a clip of a musical instrument.<\/li>\r\n \t<li><em>video<\/em> refers to moving bitmapped pictures taken with a cell phone, digital camera, or video camcorder. Videos, like pictures, represent images with microscopic pixels, or squares of light\/dark and colour, which produce large files.<\/li>\r\n \t<li><em>animation<\/em> generally refers to moving images drawn with vector graphics; that is, objects are defined by mathematical equations for points, lines, and arcs. Vector graphic animation files tend to be small because the mathematical modeling is text-based. Animation may play by itself or may include user interaction, such as buttons to start-stop-pause-rewind the scene. Vector-based animations can be exported to bitmapped formats, including animated GIF and QuickTime.<\/li>\r\n<\/ul>\r\n<table style=\"border-collapse: collapse;width: 53.68237217598098%;margin: 0px auto;background-color: azure\"><caption style=\"background: paleturquoise\"><strong>Table 4.1. Media in eBooks<\/strong><\/caption>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 50.83135391923991%\"><strong>eBook Format<\/strong><\/td>\r\n<td style=\"width: 13.77672209026128%\"><strong>Audio<\/strong><\/td>\r\n<td style=\"width: 13.30166270783848%\"><strong>Video<\/strong><\/td>\r\n<td style=\"width: 28.865795724465556%\"><strong>Animation<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50.83135391923991%\"><strong>ePub from InDesign<\/strong><\/td>\r\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\r\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\r\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50.83135391923991%\"><strong>ePub from Pages<\/strong><\/td>\r\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\r\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\r\n<td style=\"width: 28.865795724465556%\">\u2014<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50.83135391923991%\"><strong>iBook from iBooks Author<\/strong><\/td>\r\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\r\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\r\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50.83135391923991%\"><strong>Mobi converted from ePub<\/strong><\/td>\r\n<td style=\"width: 13.77672209026128%\">\u00a0\u2014<\/td>\r\n<td style=\"width: 13.30166270783848%\">\u2014<\/td>\r\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Audio and Video<\/h2>\r\n[caption id=\"attachment_399\" align=\"aligncenter\" width=\"202\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-202x300.png\" alt=\"\" width=\"202\" height=\"300\" class=\"wp-image-399 size-medium\" \/><\/a> <strong>Figure 4-1.<\/strong> Adobe InDesign's Media palette[\/caption]\r\n\r\nAny YouTube fan can attest to the explosion of digital video on the web and how it has revolutionized communication\u2014be it for education, product information, or just sharing personal experiences. Audio and video files can be added to pages using Adobe InDesign and Apple Pages, then exported to ePub. InDesign\u2019s Window &gt; Buttons and Forms palette can be used to add buttons that control an audio or video file\u2019s playback. Audio to be inserted into InDesign must be in MP3 or MP4 format. An online converter may be helpful in getting the correct file type.\r\n\r\nMost digital cameras today can record standard-definition (SD) and high-definition (HD) videos (<strong><span style=\"color: #0000ff\">Table 4-2<\/span><\/strong>). Camera types range from cell phones to point-and-shoot, advanced amateur, and single-lens reflex (DSLR) cameras, along with amateur pocket video cams and shoulder-mounted professional models. Higher-level cameras offer more professional features, such as more control over camera settings and stereo recording from an external microphone.\r\n<table class=\"table-elements\" style=\"border-collapse: collapse;width: 50%;margin: 0 auto;background: azure\"><caption style=\"background: paleturquoise\">Table 4-2. Video Resolutions<\/caption>\r\n<thead>\r\n<tr>\r\n<th>Format<\/th>\r\n<th>Resolution (pixels)<\/th>\r\n<th>Suggested Use<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>Standard Definition (SD)<\/td>\r\n<td>640 x 480<\/td>\r\n<td>iPad, locations where space is limited<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>High Definition (HD 720)<\/td>\r\n<td>1280 x 720<\/td>\r\n<td>small-screen TVs and standard video window on laptops<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>High Definition (HD 1080)<\/td>\r\n<td>1920 x 1080<\/td>\r\n<td>large-screen TVs and full-screen on large monitors<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nSince digital video consists of a series of bitmapped images, file size limits their length and quality. A video is like a series of Photoshop images at 24\u201330 per second. If the length and width of the frame are doubled, then the file size quadruples. File size is a major consideration in the length and quality level of the video.\r\n\r\nFile format is another important consideration (<strong><span style=\"color: #0000ff\">Table 4-3<\/span><\/strong>). Choose a format depending upon whether your movie will be played on a Windows, Apple, or tablet computer.\r\n<table class=\"table-elements\" style=\"border-collapse: collapse;width: 50%;margin: 0 auto;background: azure\"><caption style=\"background: paleturquoise\">Table 4-3. Video Formats<\/caption>\r\n<thead>\r\n<tr>\r\n<th>Format<\/th>\r\n<th>File extension<\/th>\r\n<th>Use<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>Apple QuickTime<\/td>\r\n<td>.mov<\/td>\r\n<td>MacOS and iOS devices<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>MP4<\/td>\r\n<td>.m4v, mp4<\/td>\r\n<td>MacOS, iOS, and Windows<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Windows Movie Player<\/td>\r\n<td>.wmv<\/td>\r\n<td>Windows computers Apple computers with plugin<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Video Programs<\/h2>\r\nA video editing program enables you to edit your video by doing such things as:\r\n<ul>\r\n \t<li>deleting scenes that you don\u2019t want<\/li>\r\n \t<li>splicing scenes you do want into a continuous sequence<\/li>\r\n \t<li>adding transitions between scenes<\/li>\r\n \t<li>adding titles<\/li>\r\n \t<li>creating special effects, such as time-lapse<\/li>\r\n \t<li>deleting sound and adding a voiceover (narration)<\/li>\r\n<\/ul>\r\n<h2>Apple iMovie<\/h2>\r\niMovie is\u00a0an easy-to-use program for basic video editing, provides an appropriate example of a video editing program for a one-semester course in web design.\r\n<h3>Opening a Movie<\/h3>\r\n<ol>\r\n \t<li>Transfer your unedited movie from your camera to your computer.<\/li>\r\n \t<li>Open iMovie and select one of the readymade themes (or No Theme).<\/li>\r\n \t<li>Select Import Media and open your unedited movie, which will come into the Clips window.<\/li>\r\n \t<li>In iMovie, select the entire clip and move to the editing window.<\/li>\r\n<\/ol>\r\n<h3>Deleting Unwanted Footage<\/h3>\r\n<ol>\r\n \t<li>In the editing window, place the play head where you want to cut the clip. Placing a marker (M) is a convenient way to evaluate a starting and stopping point. Then select Split Clip (B).<\/li>\r\n \t<li>After splitting the clip you can select and delete the sections you don\u2019t want.<\/li>\r\n<\/ol>\r\n<h3>Adding Transitions<\/h3>\r\n<ol>\r\n \t<li>From the Content Library, select Transitions.<\/li>\r\n \t<li>Find the transition you want and drag it in between two clips, or at the end of a clip. In the example, a Fade to Black transition was added to the beginning and end of the movie. The length of the transition can be set in seconds and tenths.<\/li>\r\n<\/ol>\r\n<h3>Adding Titles<\/h3>\r\n<ol>\r\n \t<li>From the Content Library, select Titles.<\/li>\r\n \t<li>Find the title you want and drag to the location where you want it to appear\u2014at the beginning or end of the clip, or in the middle. None of these locations add time to the movie. The title can be placed before the start or after the end of the clip, which lengthens the movie.<\/li>\r\n<\/ol>\r\n<h3>Lowering or Deleting Sound and Adding Voiceover<\/h3>\r\n<ol>\r\n \t<li>To lower the volume in a clip, select the clip and, using the Volume Adjust control\u00a0above the play window, reduce the volume 100% to the level you want. The volume can also be faded in and out by dragging the dot above the volume level line in the sound window.<\/li>\r\n \t<li>To delete sound, select the clip and then choose Modify &gt; Detach Audio. The audio will appear below the clip as a green line. Select this line and delete.<\/li>\r\n \t<li>To add a voiceover, select the clip and move the playhead to the location where you want to start the narration.<\/li>\r\n \t<li>Choose Window &gt; Record Voiceover. The microphone icon will appear below the play window.<\/li>\r\n \t<li>Click the start button, speak into the microphone, and click stop when finished. The narration will be added to the clip.<\/li>\r\n<\/ol>\r\n<h3>Exporting<\/h3>\r\n<ol>\r\n \t<li>To export your edited video, click the Share button (or File &gt; Share), then select File.<\/li>\r\n \t<li>\u00a0The dialog box\u00a0offers a choice of resolutions for output, along with an estimate of the file size. Note that file sizes are proportionally larger with HD-720 and HD-1080 than with SD.<\/li>\r\n<\/ol>\r\n<h2>Animation<\/h2>\r\nPossibilities for using vector graphic animations in ePubs are summarized in <span style=\"color: #333399\"><strong>Table 4.1<\/strong><\/span>. Vector graphic animations can be created for ePubs using InDesign, with its Buttons and Forms and Animation palettes. InDesign does not support HTML5 animations made with Tumult Hype, which is compatible with iBooks.\r\n\r\nAnimations can also be created using CSS via the @keyframes rule and associated objects. However CSS animations cannot be linked to control buttons. The animated object itself can serve as a \u201cbutton\u201d using the \u201c:hover\u201d and \u201c:active\u201d pseudoselectors along with the \u201canimation-play-state\u201d style.\r\n\r\nAnimations can also be created with the jQuery JavaScript library\u2019s \u201canimate\u201d and \u201cdraggable\u201d functions, and these can be tied to buttons for user control. The jQuery libraries can be imported into ePubs using an editing program like Sigil.\r\n\r\nAnimations from Tumult Hype can be exported as Apple \u201cWidgets\u201d (file type .wdgt), then dragged-and-dropped into iBooks Author to appear in iBooks.\r\n<table style=\"border-collapse: collapse;width: 69.42043969102792%;margin: 0px auto;background-color: azure\"><caption style=\"background: paleturquoise\"><strong>Table 4.1. Animation in eBooks<\/strong><\/caption>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 37.6425855513308%\"><strong>Animation ty<em>pe<\/em><\/strong><\/td>\r\n<td style=\"width: 27.376425855513308%\"><strong>User Interaction<\/strong><\/td>\r\n<td style=\"width: 38.40304182509505%\"><strong>eBook Formats<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 37.6425855513308%\">CSS @keyframes rule and connected ID\/class<\/td>\r\n<td style=\"width: 27.376425855513308%\">Hover or click states on objects (no buttons)<\/td>\r\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL\r\nePub from PressBooks<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 37.6425855513308%\">JavaScript jQuery library \u201canimate\u201d and \u201cdragable\u201d functions<\/td>\r\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\r\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL, iBook \u201cwidgets\u201d with iAd Producer<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 37.6425855513308%\">Adobe InDesign (Buttons and Forms, Animation)<\/td>\r\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\r\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 37.6425855513308%\">Tumult Hype<\/td>\r\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\r\n<td style=\"width: 38.40304182509505%\">iBooks \u201cwidgets\u201d<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>Animation in CSS<\/h3>\r\nAnimation with CSS can be done with a named @keyframes rule connected to an HTML tag with the \u201canimation-name\u201d style. The @keyframes rule specifies, using \u201cstart\u201d and \u201cstop\u201d points or percentage values, the change points of the tag in the course of the animation. In <span style=\"color: #ff0000\"><strong>Figure 4-2<\/strong><\/span> a car image has been animated using an @keyframes rule named \u201cletsgo\u201d that is connected to the car image using the style, \u201canimation-name: letsgo;.\u201d Additional styles specify the \u201canimation-duration\u201d in seconds (\u201cs\u201d), \u201canimation-fill-mode\u201d (position upon completion, i.e., at the end or at the beginning), and \u201canimation-timing-function\u201d (\u201cease\u201d means to start and end slowly).\r\n\r\nThe @keyframes rule specifies two keyframes, one at the start (\u201c0%\u201d) and one at the end (\u201c100%\u201d). Within the keyframes, the \u201cleft\u201d position style is specified in pixels from the left of the browser window. For the \u201cleft\u201d style to work, the tag must be set to \u201cposition: relative.\u201d\r\n\r\nThe CSS animation function is documented on <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\">W3Schools site <em>[New Window]<\/em><\/a>.\r\n\r\n[caption id=\"attachment_101\" align=\"aligncenter\" width=\"1020\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1.png\"><img style=\"border: 1px solid grey\" src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1.png\" alt=\"\" width=\"1020\" height=\"665\" class=\"wp-image-101 size-full\" \/><\/a> <b>Figure 4-2. <\/b> An example of animation created only with CSS using the @keyframes rule connected to the \u201ccar\u201d image. <em>(Car image courtesy of pngtree.com.)<\/em>[\/caption]\r\n\r\nAnimation created purely with CSS has limited user interaction\/control, which could be introduced by linking the \u201canimation-play-state\u201d to a \u201c:hover\u201d or \u201c:active\u201d pseudoclass. To do so, the designer would write \u201c#car:hover {animation-play-state: running;}. The animation would then start when the reader positions the mouse over (or taps) the car. Using the \u201c:active\u201d pseudoclass would make the car move when clicked.\r\n\r\nAnother way to introduce user interaction into a CSS animation is to add a simple JavaScript button. The button would be written as shown in <span style=\"color: #ff0000\"><strong>Figure 4-3<\/strong><\/span>. For this setup, the animation-play-state is set to \u201cpaused\u201d and then changed to \u201crunning\u201d with the button and code.\r\n\r\n[caption id=\"attachment_103\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode.png\"><img style=\"border: 1px solid grey;padding: 12px\" src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-1024x45.png\" alt=\"\" width=\"1024\" height=\"45\" class=\"wp-image-103 size-large\" \/><\/a> <b>Figure 4-3. <\/b>Code for a simple JavaScript button with statement to start the animation.[\/caption]\r\n<h3>Animation with jQuery<\/h3>\r\njQuery is a curated library of JavaScript functions managed by the jQuery Foundation, which was started by a group of professors at the MIT Media Lab who wrote and contributed JavaScript functions to the library and offered it as an open-source resource to web and eBook developers. The jQuery code consists of a small JavaScript file that can be downloaded and hosted on the developer\u2019s own web site, or linked-to as an external resource.\r\n\r\nIn this example (<span style=\"color: #ff0000\"><strong>Figure 4-4<\/strong><\/span>), the \u201ccar\u201d image was animated by connecting the \u201cStart\u201d button to the &lt;img&gt; tag using the jQuery \u201canimate\u201d function. The button was assigned an ID of \u201cbutton,\u201d while that of the car image is \u201ccar.\u201d The animation moves the car image an additional (\u201c+=\u201d) 850px to the right and takes 3,000 milliseconds (3 sec.) to complete.\r\n\r\n[caption id=\"attachment_107\" align=\"aligncenter\" width=\"794\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery.png\"><img style=\"border: 1px solid grey\" src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery.png\" alt=\"\" width=\"794\" height=\"237\" class=\"wp-image-107 size-full\" \/><\/a> <b>Figure 4-4. <\/b>Animation created with the jQuery JavaScript library.[\/caption]\r\n<h3>Animation with InDesign<\/h3>\r\neBook creators using Adobe InDesign can create animations using InDesign\u2019s Animation palette (Window &gt; Interactive &gt; Animation, <span style=\"color: #ff0000\"><strong>Figure 4-5<\/strong><\/span>). After an object is placed and selected, the Animation palette can be used to assign one of numerous animation presets, along with the triggering event, duration, number of repetitions, and ease functions. The animation\u2019s appearance can be previewed in the ePub Interactivity Preview palette (shown in Figure 4-4). Assigning a motion preset to an object gives it a motion guide (green line in the figure) that can be changed in length and curvature.\r\n\r\n[caption id=\"attachment_113\" align=\"aligncenter\" width=\"707\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996.png\" alt=\"\" width=\"707\" height=\"573\" class=\"wp-image-113 size-full\" \/><\/a> <b>Figure 4-5. <\/b>Animation in Adobe InDesign, created with the Animation palette and previewed with the EPUB Interactivity Preview palette.[\/caption]\r\n<h3>Animation with an Animation Program<\/h3>\r\nSeveral animation programs can be used to create animations in eBooks. These offer the possibility of creating more complex animations than some users may feel up to using CSS, JavaScript, and jQuery. An inexpensive and easy-to-use HTML5-based animation program is Tumult Hype (<span style=\"color: #ff0000\"><strong>Figure 4-6<\/strong><\/span>). Hype animations can be exported directly as \u201cwidgets\u201d for drag-and-drop placement in Apple iBooks. However the company advises that it\u2019s still working on implementation for ePubs.\r\n\r\n[caption id=\"attachment_128\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-1024x544.png\" alt=\"\" width=\"1024\" height=\"544\" class=\"size-large wp-image-128\" \/><\/a> <b>Figure 4-6. <\/b>Animation with Tumult Hype, showing the timeline, layers, and motion guide.[\/caption]","rendered":"<p>\u201cMedia\u201d refers to audio, video, and animation files included in eBooks. The appropriateness and ability to include media depends on the eBook file format and anticipated viewing device and audience. Depending upon the intended audience and purpose of the eBook, media may be appropriate in the ePub format and is a strong point of iBooks. It may not be appropriate for Mobi because most B&amp;W eReaders do not have speakers or enough storage space for large video files.<\/p>\n<p>Of the various media types shown in <span style=\"color: #333399\"><strong>Table 4.1<\/strong><\/span>:<\/p>\n<ul>\n<li><em>audio<\/em> refers to sound, examples of which could include background music, a voice reading the text in a children&#8217;s book, or a clip of a musical instrument.<\/li>\n<li><em>video<\/em> refers to moving bitmapped pictures taken with a cell phone, digital camera, or video camcorder. Videos, like pictures, represent images with microscopic pixels, or squares of light\/dark and colour, which produce large files.<\/li>\n<li><em>animation<\/em> generally refers to moving images drawn with vector graphics; that is, objects are defined by mathematical equations for points, lines, and arcs. Vector graphic animation files tend to be small because the mathematical modeling is text-based. Animation may play by itself or may include user interaction, such as buttons to start-stop-pause-rewind the scene. Vector-based animations can be exported to bitmapped formats, including animated GIF and QuickTime.<\/li>\n<\/ul>\n<table style=\"border-collapse: collapse;width: 53.68237217598098%;margin: 0px auto;background-color: azure\">\n<caption style=\"background: paleturquoise\"><strong>Table 4.1. Media in eBooks<\/strong><\/caption>\n<tbody>\n<tr>\n<td style=\"width: 50.83135391923991%\"><strong>eBook Format<\/strong><\/td>\n<td style=\"width: 13.77672209026128%\"><strong>Audio<\/strong><\/td>\n<td style=\"width: 13.30166270783848%\"><strong>Video<\/strong><\/td>\n<td style=\"width: 28.865795724465556%\"><strong>Animation<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50.83135391923991%\"><strong>ePub from InDesign<\/strong><\/td>\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50.83135391923991%\"><strong>ePub from Pages<\/strong><\/td>\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\n<td style=\"width: 28.865795724465556%\">\u2014<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50.83135391923991%\"><strong>iBook from iBooks Author<\/strong><\/td>\n<td style=\"width: 13.77672209026128%\">\u221a<\/td>\n<td style=\"width: 13.30166270783848%\">\u221a<\/td>\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50.83135391923991%\"><strong>Mobi converted from ePub<\/strong><\/td>\n<td style=\"width: 13.77672209026128%\">\u00a0\u2014<\/td>\n<td style=\"width: 13.30166270783848%\">\u2014<\/td>\n<td style=\"width: 28.865795724465556%\">\u221a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Audio and Video<\/h2>\n<figure id=\"attachment_399\" aria-describedby=\"caption-attachment-399\" style=\"width: 202px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-202x300.png\" alt=\"\" width=\"202\" height=\"300\" class=\"wp-image-399 size-medium\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-202x300.png 202w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-65x96.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-225x333.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media-350x519.png 350w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/ID-P_Media.png 544w\" sizes=\"auto, (max-width: 202px) 100vw, 202px\" \/><\/a><figcaption id=\"caption-attachment-399\" class=\"wp-caption-text\"><strong>Figure 4-1.<\/strong> Adobe InDesign&#8217;s Media palette<\/figcaption><\/figure>\n<p>Any YouTube fan can attest to the explosion of digital video on the web and how it has revolutionized communication\u2014be it for education, product information, or just sharing personal experiences. Audio and video files can be added to pages using Adobe InDesign and Apple Pages, then exported to ePub. InDesign\u2019s Window &gt; Buttons and Forms palette can be used to add buttons that control an audio or video file\u2019s playback. Audio to be inserted into InDesign must be in MP3 or MP4 format. An online converter may be helpful in getting the correct file type.<\/p>\n<p>Most digital cameras today can record standard-definition (SD) and high-definition (HD) videos (<strong><span style=\"color: #0000ff\">Table 4-2<\/span><\/strong>). Camera types range from cell phones to point-and-shoot, advanced amateur, and single-lens reflex (DSLR) cameras, along with amateur pocket video cams and shoulder-mounted professional models. Higher-level cameras offer more professional features, such as more control over camera settings and stereo recording from an external microphone.<\/p>\n<table class=\"table-elements\" style=\"border-collapse: collapse;width: 50%;margin: 0 auto;background: azure\">\n<caption style=\"background: paleturquoise\">Table 4-2. Video Resolutions<\/caption>\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Resolution (pixels)<\/th>\n<th>Suggested Use<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Standard Definition (SD)<\/td>\n<td>640 x 480<\/td>\n<td>iPad, locations where space is limited<\/td>\n<\/tr>\n<tr>\n<td>High Definition (HD 720)<\/td>\n<td>1280 x 720<\/td>\n<td>small-screen TVs and standard video window on laptops<\/td>\n<\/tr>\n<tr>\n<td>High Definition (HD 1080)<\/td>\n<td>1920 x 1080<\/td>\n<td>large-screen TVs and full-screen on large monitors<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Since digital video consists of a series of bitmapped images, file size limits their length and quality. A video is like a series of Photoshop images at 24\u201330 per second. If the length and width of the frame are doubled, then the file size quadruples. File size is a major consideration in the length and quality level of the video.<\/p>\n<p>File format is another important consideration (<strong><span style=\"color: #0000ff\">Table 4-3<\/span><\/strong>). Choose a format depending upon whether your movie will be played on a Windows, Apple, or tablet computer.<\/p>\n<table class=\"table-elements\" style=\"border-collapse: collapse;width: 50%;margin: 0 auto;background: azure\">\n<caption style=\"background: paleturquoise\">Table 4-3. Video Formats<\/caption>\n<thead>\n<tr>\n<th>Format<\/th>\n<th>File extension<\/th>\n<th>Use<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Apple QuickTime<\/td>\n<td>.mov<\/td>\n<td>MacOS and iOS devices<\/td>\n<\/tr>\n<tr>\n<td>MP4<\/td>\n<td>.m4v, mp4<\/td>\n<td>MacOS, iOS, and Windows<\/td>\n<\/tr>\n<tr>\n<td>Windows Movie Player<\/td>\n<td>.wmv<\/td>\n<td>Windows computers Apple computers with plugin<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Video Programs<\/h2>\n<p>A video editing program enables you to edit your video by doing such things as:<\/p>\n<ul>\n<li>deleting scenes that you don\u2019t want<\/li>\n<li>splicing scenes you do want into a continuous sequence<\/li>\n<li>adding transitions between scenes<\/li>\n<li>adding titles<\/li>\n<li>creating special effects, such as time-lapse<\/li>\n<li>deleting sound and adding a voiceover (narration)<\/li>\n<\/ul>\n<h2>Apple iMovie<\/h2>\n<p>iMovie is\u00a0an easy-to-use program for basic video editing, provides an appropriate example of a video editing program for a one-semester course in web design.<\/p>\n<h3>Opening a Movie<\/h3>\n<ol>\n<li>Transfer your unedited movie from your camera to your computer.<\/li>\n<li>Open iMovie and select one of the readymade themes (or No Theme).<\/li>\n<li>Select Import Media and open your unedited movie, which will come into the Clips window.<\/li>\n<li>In iMovie, select the entire clip and move to the editing window.<\/li>\n<\/ol>\n<h3>Deleting Unwanted Footage<\/h3>\n<ol>\n<li>In the editing window, place the play head where you want to cut the clip. Placing a marker (M) is a convenient way to evaluate a starting and stopping point. Then select Split Clip (B).<\/li>\n<li>After splitting the clip you can select and delete the sections you don\u2019t want.<\/li>\n<\/ol>\n<h3>Adding Transitions<\/h3>\n<ol>\n<li>From the Content Library, select Transitions.<\/li>\n<li>Find the transition you want and drag it in between two clips, or at the end of a clip. In the example, a Fade to Black transition was added to the beginning and end of the movie. The length of the transition can be set in seconds and tenths.<\/li>\n<\/ol>\n<h3>Adding Titles<\/h3>\n<ol>\n<li>From the Content Library, select Titles.<\/li>\n<li>Find the title you want and drag to the location where you want it to appear\u2014at the beginning or end of the clip, or in the middle. None of these locations add time to the movie. The title can be placed before the start or after the end of the clip, which lengthens the movie.<\/li>\n<\/ol>\n<h3>Lowering or Deleting Sound and Adding Voiceover<\/h3>\n<ol>\n<li>To lower the volume in a clip, select the clip and, using the Volume Adjust control\u00a0above the play window, reduce the volume 100% to the level you want. The volume can also be faded in and out by dragging the dot above the volume level line in the sound window.<\/li>\n<li>To delete sound, select the clip and then choose Modify &gt; Detach Audio. The audio will appear below the clip as a green line. Select this line and delete.<\/li>\n<li>To add a voiceover, select the clip and move the playhead to the location where you want to start the narration.<\/li>\n<li>Choose Window &gt; Record Voiceover. The microphone icon will appear below the play window.<\/li>\n<li>Click the start button, speak into the microphone, and click stop when finished. The narration will be added to the clip.<\/li>\n<\/ol>\n<h3>Exporting<\/h3>\n<ol>\n<li>To export your edited video, click the Share button (or File &gt; Share), then select File.<\/li>\n<li>\u00a0The dialog box\u00a0offers a choice of resolutions for output, along with an estimate of the file size. Note that file sizes are proportionally larger with HD-720 and HD-1080 than with SD.<\/li>\n<\/ol>\n<h2>Animation<\/h2>\n<p>Possibilities for using vector graphic animations in ePubs are summarized in <span style=\"color: #333399\"><strong>Table 4.1<\/strong><\/span>. Vector graphic animations can be created for ePubs using InDesign, with its Buttons and Forms and Animation palettes. InDesign does not support HTML5 animations made with Tumult Hype, which is compatible with iBooks.<\/p>\n<p>Animations can also be created using CSS via the @keyframes rule and associated objects. However CSS animations cannot be linked to control buttons. The animated object itself can serve as a \u201cbutton\u201d using the \u201c:hover\u201d and \u201c:active\u201d pseudoselectors along with the \u201canimation-play-state\u201d style.<\/p>\n<p>Animations can also be created with the jQuery JavaScript library\u2019s \u201canimate\u201d and \u201cdraggable\u201d functions, and these can be tied to buttons for user control. The jQuery libraries can be imported into ePubs using an editing program like Sigil.<\/p>\n<p>Animations from Tumult Hype can be exported as Apple \u201cWidgets\u201d (file type .wdgt), then dragged-and-dropped into iBooks Author to appear in iBooks.<\/p>\n<table style=\"border-collapse: collapse;width: 69.42043969102792%;margin: 0px auto;background-color: azure\">\n<caption style=\"background: paleturquoise\"><strong>Table 4.1. Animation in eBooks<\/strong><\/caption>\n<tbody>\n<tr>\n<td style=\"width: 37.6425855513308%\"><strong>Animation ty<em>pe<\/em><\/strong><\/td>\n<td style=\"width: 27.376425855513308%\"><strong>User Interaction<\/strong><\/td>\n<td style=\"width: 38.40304182509505%\"><strong>eBook Formats<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 37.6425855513308%\">CSS @keyframes rule and connected ID\/class<\/td>\n<td style=\"width: 27.376425855513308%\">Hover or click states on objects (no buttons)<\/td>\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL<br \/>\nePub from PressBooks<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 37.6425855513308%\">JavaScript jQuery library \u201canimate\u201d and \u201cdragable\u201d functions<\/td>\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL, iBook \u201cwidgets\u201d with iAd Producer<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 37.6425855513308%\">Adobe InDesign (Buttons and Forms, Animation)<\/td>\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\n<td style=\"width: 38.40304182509505%\">ePub RFL and FXL<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 37.6425855513308%\">Tumult Hype<\/td>\n<td style=\"width: 27.376425855513308%\">Buttons, click\/hover states<\/td>\n<td style=\"width: 38.40304182509505%\">iBooks \u201cwidgets\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Animation in CSS<\/h3>\n<p>Animation with CSS can be done with a named @keyframes rule connected to an HTML tag with the \u201canimation-name\u201d style. The @keyframes rule specifies, using \u201cstart\u201d and \u201cstop\u201d points or percentage values, the change points of the tag in the course of the animation. In <span style=\"color: #ff0000\"><strong>Figure 4-2<\/strong><\/span> a car image has been animated using an @keyframes rule named \u201cletsgo\u201d that is connected to the car image using the style, \u201canimation-name: letsgo;.\u201d Additional styles specify the \u201canimation-duration\u201d in seconds (\u201cs\u201d), \u201canimation-fill-mode\u201d (position upon completion, i.e., at the end or at the beginning), and \u201canimation-timing-function\u201d (\u201cease\u201d means to start and end slowly).<\/p>\n<p>The @keyframes rule specifies two keyframes, one at the start (\u201c0%\u201d) and one at the end (\u201c100%\u201d). Within the keyframes, the \u201cleft\u201d position style is specified in pixels from the left of the browser window. For the \u201cleft\u201d style to work, the tag must be set to \u201cposition: relative.\u201d<\/p>\n<p>The CSS animation function is documented on <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\">W3Schools site <em>[New Window]<\/em><\/a>.<\/p>\n<figure id=\"attachment_101\" aria-describedby=\"caption-attachment-101\" style=\"width: 1020px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid grey\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1.png\" alt=\"\" width=\"1020\" height=\"665\" class=\"wp-image-101 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1.png 1020w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1-300x196.png 300w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1-768x501.png 768w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1-65x42.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1-225x147.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-1_DW-W_CSS-animation1-350x228.png 350w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/a><figcaption id=\"caption-attachment-101\" class=\"wp-caption-text\"><b>Figure 4-2. <\/b> An example of animation created only with CSS using the @keyframes rule connected to the \u201ccar\u201d image. <em>(Car image courtesy of pngtree.com.)<\/em><\/figcaption><\/figure>\n<p>Animation created purely with CSS has limited user interaction\/control, which could be introduced by linking the \u201canimation-play-state\u201d to a \u201c:hover\u201d or \u201c:active\u201d pseudoclass. To do so, the designer would write \u201c#car:hover {animation-play-state: running;}. The animation would then start when the reader positions the mouse over (or taps) the car. Using the \u201c:active\u201d pseudoclass would make the car move when clicked.<\/p>\n<p>Another way to introduce user interaction into a CSS animation is to add a simple JavaScript button. The button would be written as shown in <span style=\"color: #ff0000\"><strong>Figure 4-3<\/strong><\/span>. For this setup, the animation-play-state is set to \u201cpaused\u201d and then changed to \u201crunning\u201d with the button and code.<\/p>\n<figure id=\"attachment_103\" aria-describedby=\"caption-attachment-103\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid grey;padding: 12px\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-1024x45.png\" alt=\"\" width=\"1024\" height=\"45\" class=\"wp-image-103 size-large\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-1024x45.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-300x13.png 300w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-768x34.png 768w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-65x3.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-225x10.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode-350x15.png 350w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-2_DW-W_ButtonCode.png 1339w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-103\" class=\"wp-caption-text\"><b>Figure 4-3. <\/b>Code for a simple JavaScript button with statement to start the animation.<\/figcaption><\/figure>\n<h3>Animation with jQuery<\/h3>\n<p>jQuery is a curated library of JavaScript functions managed by the jQuery Foundation, which was started by a group of professors at the MIT Media Lab who wrote and contributed JavaScript functions to the library and offered it as an open-source resource to web and eBook developers. The jQuery code consists of a small JavaScript file that can be downloaded and hosted on the developer\u2019s own web site, or linked-to as an external resource.<\/p>\n<p>In this example (<span style=\"color: #ff0000\"><strong>Figure 4-4<\/strong><\/span>), the \u201ccar\u201d image was animated by connecting the \u201cStart\u201d button to the &lt;img&gt; tag using the jQuery \u201canimate\u201d function. The button was assigned an ID of \u201cbutton,\u201d while that of the car image is \u201ccar.\u201d The animation moves the car image an additional (\u201c+=\u201d) 850px to the right and takes 3,000 milliseconds (3 sec.) to complete.<\/p>\n<figure id=\"attachment_107\" aria-describedby=\"caption-attachment-107\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid grey\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery.png\" alt=\"\" width=\"794\" height=\"237\" class=\"wp-image-107 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery.png 794w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery-300x90.png 300w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery-768x229.png 768w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery-65x19.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery-225x67.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-3_DW-W_jQuery-350x104.png 350w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/a><figcaption id=\"caption-attachment-107\" class=\"wp-caption-text\"><b>Figure 4-4. <\/b>Animation created with the jQuery JavaScript library.<\/figcaption><\/figure>\n<h3>Animation with InDesign<\/h3>\n<p>eBook creators using Adobe InDesign can create animations using InDesign\u2019s Animation palette (Window &gt; Interactive &gt; Animation, <span style=\"color: #ff0000\"><strong>Figure 4-5<\/strong><\/span>). After an object is placed and selected, the Animation palette can be used to assign one of numerous animation presets, along with the triggering event, duration, number of repetitions, and ease functions. The animation\u2019s appearance can be previewed in the ePub Interactivity Preview palette (shown in Figure 4-4). Assigning a motion preset to an object gives it a motion guide (green line in the figure) that can be changed in length and curvature.<\/p>\n<figure id=\"attachment_113\" aria-describedby=\"caption-attachment-113\" style=\"width: 707px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996.png\" alt=\"\" width=\"707\" height=\"573\" class=\"wp-image-113 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996.png 707w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996-300x243.png 300w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996-65x53.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996-225x182.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-4_DW-W_InDesign-e1552155756996-350x284.png 350w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/a><figcaption id=\"caption-attachment-113\" class=\"wp-caption-text\"><b>Figure 4-5. <\/b>Animation in Adobe InDesign, created with the Animation palette and previewed with the EPUB Interactivity Preview palette.<\/figcaption><\/figure>\n<h3>Animation with an Animation Program<\/h3>\n<p>Several animation programs can be used to create animations in eBooks. These offer the possibility of creating more complex animations than some users may feel up to using CSS, JavaScript, and jQuery. An inexpensive and easy-to-use HTML5-based animation program is Tumult Hype (<span style=\"color: #ff0000\"><strong>Figure 4-6<\/strong><\/span>). Hype animations can be exported directly as \u201cwidgets\u201d for drag-and-drop placement in Apple iBooks. However the company advises that it\u2019s still working on implementation for ePubs.<\/p>\n<figure id=\"attachment_128\" aria-describedby=\"caption-attachment-128\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-1024x544.png\" alt=\"\" width=\"1024\" height=\"544\" class=\"size-large wp-image-128\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-1024x544.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-300x159.png 300w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-768x408.png 768w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-65x35.png 65w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-225x120.png 225w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation-350x186.png 350w, https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2018\/05\/4-5_HY-W_HypeAnimation.png 1432w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-128\" class=\"wp-caption-text\"><b>Figure 4-6. <\/b>Animation with Tumult Hype, showing the timeline, layers, and motion guide.<\/figcaption><\/figure>\n","protected":false},"author":6,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["richardadams"],"pb_section_license":""},"chapter-type":[],"contributor":[57],"license":[],"class_list":["post-58","chapter","type-chapter","status-publish","hentry","contributor-richardadams"],"part":178,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":43,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/58\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/58\/revisions\/559"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/parts\/178"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/58\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapter-type?post=58"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/contributor?post=58"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/license?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}