Create An Animated Web Banner Using Adobe Edge Animate
- by Mark-Anthony
- in Tutorials
- posted January 19, 2014
[button link=”https://mark-anthony.ca/projects/edge/banner/foodify-banner.html” size=”large” text_size=”beta”]Demo[/button]
Recently, I decided to introduce Adobe Edge Animate to my class as a means of creating simple timeline animations to be used in their web and interactive projects. One project, is a WordPress powered blog theme and the other, is an interactive magazine, using the Adobe Digital Publishing Suite. With Adobe Edge Animate, creating simple javascript animations for web banner ads, article headings and image galleries in your web projects are possible. The creation of animated magazine covers for the Adobe Digital Publishing Suite are also some of the things that Edge Animate can be used to develop.
In this tutorial, I will be going through the creation of an animated web banner that can be used within a web page. If you’re coming from a Flash environment, some of these tools and concepts may be familiar to you.
[button link=”https://mark-anthony.ca/projects/edge/banner/foodify-assets.zip” size=”large” text_size=”beta”]Download Files[/button]
Step 1:
Creating an Adobe Edge Animate Document
Create Edge document. FILE > NEW
To the top-left of the workspace, is the Properties panel. We’ll enter a title for our project in the title field: “Foodify Banner.” The next thing we’ll do before we move on is adjust the size of our canvas. You can either adjust the canvas’ width and height by sliding your cursor over top of the width or height marker or entering in a value manually. We’ll make the canvas: 1024px X 460px.
*Notice the Composition Class aka Edge ID underneath within the properties panel. This is a specific ID generated for your animate project, which has specific instructions associated with your animate project.
Step 2
Saving An Edge Document
Save the document FILE> SAVE AS and create a folder called “Foodify Web Banner.” Save your files in the folder and let’s take a look at the files that Edge has created for the project.
When an Edge Animate project is created, it generates javascript files, html documents and jQuery assets for your project to run on the web or within other applications. I have created my own “images” folder which will host all of my image assets for my project. As you add images to this folder, the assets will be updated within your project library.
Step 3
Saving Assets
Before we move on, make sure that you have moved/copied the exported image assets that you have downloaded for this tutorial into a newly created images folder within the root directory of your Edge animate project. *Edge will automatically add or remove assets in this folder once we have pointed to its location through the library panel.
Step 4
Adding Assets
Let’s go back to Edge Animate and click on the [+] icon beside the assets panel within the Library menu. The Library panel can be found on the right-hand side near the middle of the workspace. After clicking on the [+] icon, you will be prompted to select the images folder from the root directory of your Edge Animate project. You should now see all of your images loaded within the asset window. If this does not work, you can also import your images via the FILE > IMPORT menu.
Step 5
Layout
Drag the image assets from the Library window onto the canvas and arrange them to match the order below: Background, Logo, Button, Macbook and iPhone. We will be creating the type using the text tool in the next step.
Step 6
Text
Create the text area by selecting the type tool from the tool panel, which is located in the top-left corner of the workspace. Edge uses an HTML approach in adding text and CSS model for styling type. This means that you will need to import typefaces into the project instead of using system typefaces on your local machine.
To add fonts to your project, click on the [+] icon on the Fonts panel within the Library panel. Search for Muli and add the font to your project. Use the type tool and type the tagline for the project within typographers quotes: Option + [ = “ Let Foodify decide your what you eat. Option + Shift + [ = ”
Step 7:
Animation
Now it’s time to animate the objects within the project. Create guides along the bounding boxes of the images on the canvas so that you can arrange them in the exact order and layout that you have currently laid out. To animate some of these items, we are going to be moving them off the canvas and dragging them back again to create the animations’ transitions.
First, select the Foodify logo. Now, look to the timeline at the bottom of the workspace. You will see a yellow marker at the beginning of the timeline. This is the playhead, and its position determines where and when we create keyframes and transitions for our animations. You will be initializing the animation at the current point of the playhead and then moving the playhead into another position in order to add an end position for the animation.
With the playhead at the beginning of the sequence, drag the logo off the canvas to the left. Now, drag the playhead to the 1.2-1.5 sec mark. Select the logo and click on the “auto transition pin head.” This is the blue marker that is positioned at the beginning of the timeline. The auto transition will create a transition between keyframes when we drag our image around the canvas. Now drag the logo back to the right and place it into position using the shift key.
Now you can add an animation type by selecting the “Easing” icon to the tope left of the timeline. This icon is located to the right of the Auto transition pin head.
Choose Ease-Out and select Elastic for the animation type.
Do the same as above for the Macbook Pro. This time, place the timeline’s playhead at the beginning of the animation’s timeline. Now, drag the macbook off the canvas to the right. Then, reposition the timeline’s playhead at the 1.2-1.5 sec mark and move the macbook back into position to the left. Add the same animation type as above. Click the Ease icon and choose Ease-Out and select Elastic.
Step 8:
Opacity
To make an object fade in or out, you can use the Opacity keyframe. Select the projects slogan/tagline. Position the playhead right before the logo stops its animation. Click on the “add keyfame for opacity” icon in the properties menu. You will see a small diamond shaped icon to the left of the Opacity slider. This is located right underneath the toolbox in the top-left corner of the workspace.
Move the playhead to the position which you want the opacity or fade to end and click on the add keyframe icon again. Go back to the first keyframe, by selecting the diamond shaped icon on the timeline and move the opacity slider down to 0%. Move back to the end of the opacity transition on the timeline and keep the opacity up at 100%. This will cause the slogan to begin its animation hidden and then slowly transition into a 100% visibility. To make the text fade in faster or slower, you can click on the text’s transition bars in the timeline and hover your cursor over the right edge. You will now be able to make the transition longer/slower or shorter/faster. You can also mover the transition and reposition it by hovering your cursor over top of the timeline animation and dragging it to the left or right of the timeline.
To create the same fade-in effect with the “Try It” button, you can try using the Opacity keyframe.
*Try to add an animation sequence to the iPhone.
Step 9:
Adding a Symbol Action
Select the “Try It” button and go to the MODIFY menu and select CONVERT TO SYMBOL. Now, right click on the button symbol and select “open actions for (button name).” Click on the add action button [+] and choose a “click” action. Then, select “Open URL” from the type of click action. You can now enter any URL destination. Make sure to keep the http:// syntax or else the action will not work. Click on the close icon in the top-right corner of the action panel.
Now that we’ve created an action for the button, we have to let our users know that they are hovering over a clickable button. To change the cursor state, we will look to the left hand side of the workspace and locate our “Cursor” panel within the properties panel. Look closely, you will see a small icon that looks like a switch. Click on the switch icon and the cursor options will be turned on. You can no change your cursor type to “Pointer”.
Step 10:
Publishing your project
You can now save your file: FILE > SAVE. Once you have set up your document you will want to preview it. You can click on the play button at the top of the timeline but you may also want to preview your work in a browser. To do so, go to the FILE menu and choose PREVIEW IN BROWSER. Make any modifications to your file and preview your work until you are satisfied with the animation.
Once your project is complete, you will need to publish it to use on the web or within another application, like Dreamweaver. Go to: FILE > PUBLISH SETTINGS. Choose “web” and select a new folder destination where your web files will be published. If you wish to save your animation as a packaged file so that you can embed it or place it into another application, choose “animated deploy package” and this will save a .oam file so that you can place yoru animation into Dreamweaver or InDesign for use in a Digital Publication. You will also see an option for adding a “poster image”. This is used for displaying the first frame animation of your animation before a user initializes it.
