Creating widgets with Adobe Edge Animate

The base art for my book, "Balloon ABC" was rendered in Adobe Illustrator, sound effects processed in Adobe Audition and animations created with Adobe Flash. From Flash, the animations were output with "export movie" as a sequence of png's and the sound track output with "export video" to Adobe Media Encoder and saved as an mp3 sound file. The iBook app does not support mp3 sound files, so the mp3 was then opened in Adobe Audition and exported as Apple MPEG-4 Audio, AAC. Even though Apple MPEG-4 Audio files can be saved in different modes, I found that AAC is the only one that plays correctly in iBooks.

Once you have a sequence of animation images and an iBooks-compatible soundtrack, by whatever means they were created, you can assemble these assets in Adobe Edge Animate and publish an ibooks compatible widget that can then be placed in an iBooks Author project.

Here are the steps required to create an HTML5 widget:


Page Setup



Start by opening Edge Animate and setting up the page.



For "Balloon ABC,"  I determined the dimensions of the widget should be 768 pixels x 984 pixels. (see the "Placing widgets in iBooks Author" page to understand why these dimensions were chosen) Input the width and height values in the "stage" section to the left of the canvas. 

I also wanted the background to be a solid color with a hex setting of #30807c. Click the little box to the right of the W and H inputs. This will bring up a color picker. In my case, I selected the hex button and input the desired values. You can, of course, go full-blown Disney by placing a complex illustrated background at the bottom of the "actions" stack and leave it turned on as the animation frames are successively turned on and off above it.

This is a good time to save the project.


Importing an Image Sequence



Now import your image assets into Edge Animate. In the case of my book, I had a sequence of png images which were exported from Adobe Flash. They were designed to be the full 768 x 984 size and output as a numbered sequence. I saved the sequence with the background set to transparent so only the character imagery was saved and could be overlaid on the solid background created in Edge Animate. Click the plus sign on the images section of the library tab, navigate to the sequence, select all the images and click "open."




If you click the arrow on the images section, the section will open up and you can see the list of images. Now select the sequence in reverse order, that is, select the last image first, then hold the shift key and select the first image. Move the cursor over the selected images and drag them onto the canvas. You will see a position indicator next to the cursor. Keep holding the mouse down and move it until you reach the (0, 0) position. Now let go. The images will populate the canvas area and be listed in the "elements" tab and also in the "actions" column in proper numerical order. At this point, all the images are still selected. Double-check to make sure that the x and y settings are at "0" in the "position and size" tab. If they are not, set them both to "0." It's a good idea to save the project periodically.







Controlling Animation on the Timeline


By default, all the images are set to "always on". I wanted the images to play one at a time in succession. To begin, turn on the "show grid" icon at the bottom left of the Edge Animate window. It looks like 4 tiny columns. You will be using the tick marks made visible by the grid to determine the location of frames. You will also want to set the "grid size" (the tiny arrow to the right of the grid icon). What you are actually doing here is setting the frames per second. I use 10 frames per second because it's a good compromise between avoiding jerky motion and keeping the file size down. Naturally, the same frame rate should be used when creating the animation so there are no surprises about the speed of playback. Move the play head to the 00:00.000 position and select all the animation images. In the case of my example, I had a text image that I wanted to stay visible throughout the animation so I left it to "always on" by not including it in the selection. At the top of the properties tab select "off." This turns all the images off.




Deselect all the images, then select just the first image, go to the top of the properties tab and turn it "on." Move the play head to the second frame in the timeline and turn the image "off."  The first image is now set to display on the first frame and not display on the second frame in the timeline. You will see two diamonds to the right of the first image name. Click the cursor on the left diamond, hold the shift key and click on the right diamond. Save the on/off sequence (command c) so you can use it for subsequent images. Now select the second image and paste (command v).  You will see that two diamond shapes have been added to the timeline of the second image and the play head has moved one frame to the right.



Now it's simply a matter of moving to the next image, pasting, then moving to the next image, pasting and so on until you reach the last image. In the case of my animation, I wanted the last image to remain "on" at the end of the animation so I didn't paste the on/off sequence on that image but rather just turned it "on" in the properties tab.

Importing and Controlling the Soundtrack


Next, load the soundtrack by clicking the plus sign on the audio section of the library tab, navigate to the m4a file and open it. Click the arrow on the audio section to reveal the audio file. I like to have the audio file at the top of the "actions" column in the timeline so I select the top-most image, then click on the audio file and drag it anywhere on the canvas. The audio file should now appear near the top of the "actions" column. Set the play head to the first frame (00:00.000). Click the arrow on the audio listing to open it if it's not open. To the right of the word "playback" click the plus sign and select "play." Assuming you designed the audio to start at the first frame, it should play back more or less in sync. Sync is not perfect with a widget but if it's a relatively small file it should align fairly well with the action.






Creating the HTML5 Widget


Before publishing the widget, a poster image needs to be created. This is the image that will become the Default.png - the first, static image you see when a page is opened. The project must have been saved before you can create the poster image. Set the play head to the first frame (00:00.000) Click anywhere in the work area outside the canvas. That will bring up the properties panel on the left. Down at the bottom find the word "poster" and click the camera icon. This will take a picture of the first frame which will be saved as the "poster image."

Now go to file/publish settings. By default "web" is selected. Deselect this and select "iBooks/OSX" then hit the "publish" button. The iBooks compatible HTML5 widget will be saved in the "publish" folder associated with the project.

Modifying the Widget


One anomaly, caused I believe by the iBooks app, is that the Default.png renders at a higher gamma than the animation. This causes the art to appear to darken when the animation starts. This problem can be reduced by opening the widget (remove the .wdgt suffix and the file becomes a folder), find the Default.png, open it in Photoshop and lower the gamma (I created a curve layer - input 134, output 117), then overwrite it as the Default.png. I also removed the poster.png which Adobe Edge unnecessarily includes in the" images" folder. It's good to keep the file size down! Add the .wdgt suffix and the folder becomes an HTML5 widget again, ready to be placed in an iBooks Author document.

One remaining issue - when the animation starts there is an annoying white flash. I believe a bit of javascript code, which would delay the animation until it's ready to play, might resolve this issue. But I'm not a programmer. If anyone has a solution for this flash problem I would love to hear about it. Apple mentions a bit of code to reduce the white flash for Apple-produced widgets but I was not able to get it to work with Adobe Edge widgets. In my opinion, Adobe should include this code as a matter of course when the widget is created.


No comments:

Post a Comment