Adobe Edge Animate Tutorial: Create an Interactive Navigation Bar in Less Than 40 Steps

Adobe Edge Animate Tutorial by Jason Hill Page 1 of 26

Contents
Introduction ............................................................................................................................................4
Who are Adobe? .................................................................................................................................4
What is Adobe Edge Animate? ...........................................................................................................4
Result of this tutorial ..........................................................................................................................4
System Requirements.............................................................................................................................4
FAQ’s.......................................................................................................................................................5
How much does Edge Animate cost?..................................................................................................5
What formats does Edge Animate produce?......................................................................................5
How can Edge Animate animations be used?.....................................................................................5
Who can use Edge Animate? ..............................................................................................................5
What can be imported into Edge Animate? .......................................................................................5
Is Edge Animate content interactive?.................................................................................................5
Why does Edge animate create .html and .an files? ..........................................................................6
Is Adobe Edge the same on both Windows and Mac? .......................................................................6
Are new Edge Animate files backwards compatible and vice versa?.................................................6
Are there websites that offer more information about Edge Animate?............................................6
Edge Animate Forums.....................................................................................................................6
Edge Animate Team Blog................................................................................................................6
Online Version.........................................................................................................................................6
Further Help............................................................................................................................................6
Glossary of Terms....................................................................................................................................7
Windows to Mac shortcut comparison...................................................................................................8
Opening Adobe Edge Animate................................................................................................................9
Creating an Edge Animate file.................................................................................................................9
The Edge Animate workflow.................................................................................................................10
The toolbar........................................................................................................................................10
The properties toolbox .....................................................................................................................10
Tools..................................................................................................................................................10
The stage...........................................................................................................................................10
The timeline ......................................................................................................................................10
Preparing the stage...............................................................................................................................11
The stage size....................................................................................................................................11
The stage colour................................................................................................................................11
Adjusting the appearance of the stage.............................................................................................12
Previewing the Animation.....................................................................................................................13
Adding a logo ........................................................................................................................................13
Animating the logo (fade in) .............................................................................................................14

Timing the animation....................................................................................................................14
The timeline toggle .......................................................................................................................15
The fade-in....................................................................................................................................15
Adjusting the fade in length..........................................................................................................16
Adding a navigation button ..................................................................................................................17
Animating the navigation button......................................................................................................17
Fading in........................................................................................................................................17
Flying up........................................................................................................................................18
Adding text to the button .................................................................................................................19
Converting to a symbol.................................................................................................................19
Opening the symbol......................................................................................................................19
Adding text....................................................................................................................................19
Animating the text ............................................................................................................................20
Making the button interactive..........................................................................................................21
Hover over effects.........................................................................................................................21
Linking to other pages...................................................................................................................24
Activating the hover on.................................................................................................................25
Changing the cursor style..............................................................................................................26
Animation complete .............................................................................................................................26

Introduction
Who are Adobe?
Adobe are a global leader in digital media. With a large software catalogue, they offer solutions for
web design, photo manipulation, digital illustration and video production. Their software allows
users to create innovative and future-proof digital content, aimed at multiple device deployment.
What is Adobe Edge Animate?
This tutorial provides an insight into the powerful Adobe Edge Animate software. Edge Animate has
a similar user interface to its 'predecessor', Adobe Flash. Animations are designed on what is called a
‘stage’. Elements can be dragged and dropped onto the stage, and manipulated on the timeline.
Edge Animate uses HTML and CSS to design the animation. This means that Edge Animate projects
can be used for a variety of applications including websites, mobile phone applications and standard
cartoon-like animations.
Anyone who wants to create interactive and web-ready content can use Edge Animate. Edge
Animate is user friendly, and users with different experience levels are encouraged to use the
software.
This tutorial has been created using Adobe Edge Animate CC 2014 on a Windows 8.1 machine.
Result of this tutorial
This tutorial will guide the user step by step in creating an interactive navigation bar. This navigation
bar is specifically for use at the top of websites. The user will have the freedom of selecting what the
navigation bar will look like, and where the links/buttons will be directed.
System Requirements
The system requirements for all versions of Edge Animate are as follows*.
Windows Mac OS
Intel® Pentium® 4 or AMD Athlon® 64 processor
Windows® 7, Windows 8, and Windows 8.1
operating system
1GB of RAM
200MB of available hard-disk space for
installation
1280x800 display with 16-bit video card
Multicore Intel processor
Mac OS X v10.7, v10.8, or v10.9 operating
system
1GB of RAM
200MB of available hard-disk space for
installation
1280x800 display with 16-bit video card
Information available at:
https://helpx.adobe.com/x-productkb/policy-pricing/system-requirements-animate.html
*Subject to change

These requirements are the bare minimum to run the software. For an immersive experience it is
necessary to invest in a computer with much higher specifications. The specifications of the
computer used to create the tutorial are:
Intel Core i7-4770 @ 3.40GHz (8 processors)
Windows 8.1
16GB of RAM
3TB Storage
NVIDIA GeForce GTX 645 (2GB dedicated graphics) – 1920 x 1080 resolution
FAQ’s
How much does Edge Animate cost?
Currently Adobe is offering Edge Animate 1.5 for free, which is downloadable from
https://creative.adobe.com/products/animate. This is an older version however and is not
recommended due to performance and compatibility issues (which are resolved in the newer
version).
The latest Edge Animate (Adobe Edge Animate 2014) is available on Adobe’s Creative Cloud
subscription. Creative Cloud is a monthly subscription, and pricing plans are outlined on the site
https://creative.adobe.com/plans.
What formats does Edge Animate produce?
Edge Animate saves files as HTML. Additional files such as CSS sheets and JavaScript files will also be
generated.
How can Edge Animate animations be used?
Edge Animate generates animated HTML documents, allowing the final product to be used in a
variety of applications. Animations can be placed on websites, in apps, and can be used to design full
websites and apps.
Who can use Edge Animate?
Anyone who wants to create interactive and web-ready content can use Edge Animate. Edge
Animate is user friendly, and users with different experience levels are encouraged to use the
software. Users will need a Creative Cloud subscription for the latest software.
What can be imported into Edge Animate?
SVG, JPG, PNG and GIF file formats are compatible with Edge Animate.
Is Edge Animate content interactive?
Yes, users can create an animation with a linear timeline, or a dynamic animation that can include
loops, hyperlinks and animation controls.

Why does Edge animate create .html and .an files?
Edge Animate creates both file types as they have different purposes. The .html is the ‘final’
animation. Users are unable to edit the .html file. The .an file is what Edge Animate uses to open the
animation. To edit the animation, open the .an file, this will open the project in Edge animate.
Is Adobe Edge the same on both Windows and Mac?
Yes, all Adobe software is designed to look and operate the same on both Windows and Mac.
Are new Edge Animate files backwards compatible and vice versa?
No unfortunately. Edge Animate files can only be opened in the same version that the file was
created. This is because newer versions of Edge Animate work very differently to older versions, and
opening a new file with old software (and vice versa) would result in undesirable outcomes (the
Animation will not work as expected).
Are there websites that offer more information about Edge Animate?
There are lots of different Edge Animate tutorials available online. Adobe has their own websites
dedicated to informing Edge Animate users:
Edge Animate Forums
Available at https://forums.adobe.com/community/edge_animate, the Edge Animate Forums allow
users to ask and reply to questions, providing personalised help quickly.
Edge Animate Team Blog
Adobe are constantly releasing new blog posts regarding Edge Animate on
http://blogs.adobe.com/edge/. The blog provides useful tutorials as well as news regarding the
development of the software.
Online Version
This tutorial is available online at: https://sites.google.com/site/edgenavbar/.
A copy of the final product is also available for download on the website.
Short video screenshots are also available on YouTube, just click Tutorial > Video Steps on the
website. The play symbol throughout the document indicates that it is available as a video.
Further Help
Please visit the Contact section of the website for contact details:
https://sites.google.com/site/edgenavbar/contact

Glossary of Terms
Activate
To Select/ turn on.
Eg. Activate the Toggle Pin - select the pin so that it is turned on.
Animation What is being created using Edge Animate.
Cursor
The position indicator (white arrow), operated by the mouse.
Deactivate
Deselect/turn off
Eg. Deactivate the Toggle Pin – deselect the pin so that it is turned off.
Effects Visual alterations to an object on the stage.
Ruler A sizing indicator, found on the top and on the right of the stage.
Screenshot An image of what is displayed on the computer screen.
Slider
An arrow that can be dragged left or right to control the timeline or object
effects.
Stage The white canvas within Edge Animate where the animation occurs.
Symbol A group of objects.
Timeline
The bar at the bottom of the window which controls when an animation
happens. Animations can be added, manipulated and rearranged within the
timeline.
Toggle Pin
The Toggle Pin records the state of an object at the particular time in which the
pin was activated. Majority of object animations require the use of the pin.

Windows to Mac shortcut comparison
This tutorial has been created using a Windows computer, therefore the shortcuts provided
throughout the document are irrelevant to Mac users. The following table can be used as a
reference for Mac users. Not all shortcuts below are used in the tutorial.
Action Windows Shortcut Mac Shortcut
Copy Ctrl + C Cmd + C
Cut Ctrl + X Cmd + X
Paste Ctrl + V Cmd + V
Redo Ctrl + Shift + Z Cmd + Shift + Z
Undo Ctrl + Z Cmd + Z
Select All Ctrl + A Cmd + A
Preview (in browser) Ctrl + Enter Cmd + Return
Save Ctrl + S Cmd + S
Convert to Symbol Ctrl + Y Cmd + Y
Toggle Pin P P
The + indicates holding multiple buttons at one time.
Apple Command Key Windows Control Key

Opening Adobe Edge Animate
Search for Adobe Edge on a Windows 8.1 computer by pressing Windows Key + S.
Click the program to launch it.
This screen will load:
Creating an Edge Animate file
For this tutorial, a blank stage is required. Press the Create New option on the left sidebar.

The Edge Animate workflow
This is what Edge Animate will look like once a new project is created. A larger image is available
online at: https://sites.google.com/site/edgenavbar/edge-animate-workflow.
The toolbar
The majority of Windows (and Mac) programs have a toolbar. The toolbar allows the user to change
the settings of the project and the window (eg, zoom size and workspace layout). Not often will this
tutorial require the toolbar, except for saving the project.
The properties toolbox
The majority of actions will be performed on the properties toolbox. The toolbox allows users to
change the appearance and behaviour of an object.
Tools
Tools is located underneath the toolbar. Tools allow the user to create and manipulate shapes, and
change the behaviour of the cursor.
The stage
This is where the animation takes place. Like a real stage, the Edge Animate stage allows its audience
(the user) to see what is happening on the stage (the white square), but not what is happening
backstage (the grey area).
The timeline
The timeline controls when an animation happens on the timeline. For example, moving an object
from A to B happens within the timeline.
The stage
The timeline
The
properties
toolbox
The toolbar
Tools

Preparing the stage
The stage size
To make sure that the navigation bar stretches across the entire website header, the stage size
will need to be set. Once the project is open, resize the stage so it is 100% wide X 150px high.
This will allow the animation to be viewed on any size screen. The stage dimensions are at the top of
the properties toolbox.
The stage colour
To make the navigation bar match the website, try experimenting with the stage colour.
To change the stage colour click on the gradient box (as shown in diagram), which will display
the colour chooser.
The stage dimensions
CHANGING FROM PX TO %
To change the unit of measurement, click
the toggle after the px/% symbol.
Gradient
Solid colour
1 – Change where the
gradient starts and stops
2 – Drag the circle to
select a colour

Once the colour chooser is open:
1. Drag the sliders to change where the gradient starts and stops
2. Drag the “colour-picking circle” to select a colour
Adjusting the appearance of the stage
If the user selected a gradient, the stage may look similar to the screenshot below. Otherwise the
stage may have a solid colour. There is no wrong configuration as the stage should match the rest of
the website that it is going to be added to.
The width of the stage may look small; this is because Edge Animate is currently working in
percentages. It is possible to widen the view of the stage without altering the actual stage properties
(100% wide).
To widen the view of the stage, drag the slider on the top ruler (image over page). This allows
the user to position objects on the stage with ease. Working on a small stage (as shown
above) can become too difficult.

Previewing the Animation
It is important to see how the product will actually look when displayed in a web browser. To
preview the animation, press Ctrl + Enter (on your keyboard). A web browser will open and display
the animation.
At the moment the stage will appear blank (besides the background colour chosen earlier).
Adding a logo
As the navigation bar appears at the top of a website, it is important to include a logo. To
import a logo (image file) onto the stage, select File > Import in the toolbar. A dialogue box will
appear. Navigate through your documents and select the desired image file.
Press ‘open’, the image will be placed on the stage.
Drag the slider out to approximately
780px. This will make it easier to work
on the design.

Reposition the logo so that it largely occupies the height of the stage, this is done for aesthetics.
Animating the logo (fade in)
Timing the animation
When the animation is ready (when the webpage first loads), the logo will fade in. To do this, drag
the yellow slider on the timeline to the 1 second position (0:01). This will cause the fade to occur
over a 1 second duration.
Drag the slider to 0:01
The logo size is
proportionate to the
stage.

The timeline toggle
The easiest way to create animations is by using the Toggle Pin. The Toggle Pin is how Edge
Animate remembers the properties of an object at the selected time. To activate the toggle,
simply click it. Make sure that the logo is selected at the 1 second position on the timeline (as the
animation is completed over the duration of 1 second)
Once the toggle is activated, drag the slider back to the start (0:00). Make sure as you drag the slider
that the logo is selected on the timeline.
The timeline should look like the following screenshot:
The fade-in
Now that Edge Animate remembers what the logo looked like at 1 second, the appearance of
the logo at the start (0 seconds) can be altered. In the properties toolbox, drag the opacity
slider of the logo to 0%.
The toggle pin
Logo – selected on the
timeline
Opacity slider

As the logo’s opacity is now at 0%, the stage should appear as follows.
A coloured bar should now appear on the timeline, indicating a change from 0% to 100% opacity.
Deselect/uncheck the Toggle Pin and preview the animation (Ctrl + Enter). The logo should now fade
in.
Adjusting the fade in length
If the logo fades in too quickly, adjust the length on the timeline by dragging the diamond at the
end to the right. The diamond is an easy ‘handle’ for the user to change the length of
animations.
To delay the fade in, drag the first diamond to the right.
Drag the diamond to
change the fade in length

Adding a navigation button
In order for a navigation bar to work, navigation buttons are required.
To begin, make sure that the navigation slider is positioned at the end of the logo’s fade in (the
coloured bar). This is because more animations are going to be added after the logo’s fade in.
The navigation buttons will be created from rounded rectangles. To create a rounded rectangle,
press the Rounded Rectangle Tool in tools (or press the ‘R’ key on the keyboard). Click and drag
to create a shape.
To change the colour of the rectangle, click the colour chooser icon in the properties toolbox (as
shown below) and select a colour.
Copy and paste the shape to create two buttons.
Action Keyboard Shortcut Toolbar
Copy Ctrl + C Edit > Copy
Paste Ctrl + V Edit > Paste
To copy an object, the object must be selected, then either use the keyboard shortcut or the toolbar
action.
Animating the navigation button
Fading in
The buttons will fade in after the logo.
To make the navigation buttons fade in, refer to the previous steps used to fade the logo in.
Hint: Use the Toggle Pin to change the opacity of the buttons from start to finish.
Click the colour icon to
change the colour of the
buttons

Flying up
The buttons are going to fly up as well as fade in, this will provide a floating illusion.
Currently the timeline should look similar to this:
Making the rectangles fly up is fairly simple once the fade in
animation has been applied.
At the end of the buttons fading in, activate the Toggle Pin.
Drag the slider back to the start of the buttons fading in.
Move the buttons to the bottom of the stage, to resemble the following screenshot:
Deactivate the Toggle Pin and preview the animation (Ctrl + Enter).
It should now look as if the buttons float in.
The buttons now move up
as well as fade in
The two buttons fading in

Adding text to the button
In order for the navigation buttons to be user friendly, a label will be added. An easy way to add text
to an already animated shape is to convert it to a symbol.
Converting to a symbol
To convert an animated shape to a symbol right click on the shape and press Convert to Symbol.
Opening the symbol
Simply double click on the rectangle to open the symbol.
Adding text
To add text whilst inside the symbol, press the Text Tool in tools.
Draw a rectangle within the boundaries of the button. Enter some text into the dialogue box
and press enter (eg. Contact us).
Customise the text colour, font and alignment in the properties toolbox.
CONVERTING TO A SYMBOL
When a shape is converted to a symbol, it
is like creating a group in Microsoft Word.
The elements are still accessible; they are
just stored inside of the symbol that was
created.

Do this for both rectangles.
Animating the text
The text within the button will also fade in.
Open the first symbol (double click) and select the text.
Drag the timeline slider forward at least one second (after the float up animation) and activate
the Toggle Pin.
Drag the slider back to the start of the float up animation, as shown in the screenshot:
Set the text opacity slider to 0%.
Deactivate the Toggle Pin.
For added effect, slide the fade in animation along the timeline so it overlaps with the float up
animation. Do not overlap it too much, as the animation may not run smoothly.
Double click outside the stage several times to exit the symbol.
Repeat the same steps for the second button.
SLIDING AN ANIMATION ALONG THE
TIMELINE
To rearrange animations on the timeline,
simply click and hold on an animation
(coloured bar) and move it.
Two animations
overlapping

Making the button interactive
Hover over effects
A hover over effect makes buttons more user friendly. To create a hover over effect, make sure that
Edge is editing the main timeline, and not a timeline within a symbol. If Edge is within a symbol,
double click on the area outside of the stage.
Creating a label
Hover over effects are created on the timeline. To make the process easier
to navigate and organise, a label will created on the timeline.
Drag the slider to a few seconds after the float in animation.
Press the insert label icon on the timeline.
Call the label ‘homehoveron’.
Drag the slider forwards one second and add a second label, ‘homehoveroff’.
The timeline should look similar to this:
Insert label (down arrow
icon)
The end of an animation

Designing the hover on
Drag the slider to the beginning of the homehoveron label.
Activate the Toggle Pin.
Drag the slider one half of a second past the homehoveron label, like so:
Add an invert filter to the first rectangle of 85%, in the properties toolbox.
Deactivate the Toggle Pin.
Designing the hover off
Drag the slider to the beginning of the homehoveroff label.
Activate the Toggle Pin.
Drag the slider one half of a second past the homehoveroff label (as done with the hover on label).
Set the invert filter to 0%, in the properties toolbox.
Repeat the hover on and hover off steps for both buttons.
EXPANDING THE FILTERS TAB
The filters tab may be collapsed, hiding
the options as shown in the screenshot.
To expand the tab, click the word ‘Filters’

Inserting a stop trigger
So the timeline doesn’t play the hover off animation when the user is still hovering, a stop trigger is
required.
Drag the slider to the end of the homehoveron animation, and click Insert Trigger (found
underneath the Toggle Pin button).
Type in the following code:
sym.stop();
Press the close button on the code editor.
Inserting a second stop trigger
Drag the slider to the end of the float in animation, and click Insert Trigger
sym.stop();
Press the close button on the code editor.
The close button in the
code editor

Inserting a stop at
Drag the slider to the end of the homehoveroff animation, and click Insert Trigger.
sym.stop(xxxx);
Instead of typing xxxx, insert the time at which the float up animation stops.
In this screenshot, the animation finishes at 0:05.250 (five seconds). So instead of xxxx it would be
5250.
Linking to other pages
The buttons in the navigation bar will need to link to a web page.
Select the first button and right click.
Chose the bottom option, ‘Open Actions for ____’.
CONVERTING THE TIME
MEASUREMENTS
0:05.250 (five seconds and 250
milliseconds)
=
5250

Select the first option, ‘click’.
window.open("http://www.adobe.com", "_self");
Change http://www.adobe.com to a relevant URL.
Activating the hover on
Whilst still in the actions window, press the plus button at the top of the window.
Select mouseover and type in the following code:
sym.play("homehoveron");
Then select mouseout from the plus button menu, and enter this code:
sym.play("homehoveroff");
SELECTING AN ACTION
If the list shown in the screenshot did not
appear, click the plus button at the top of
the actions window.
MAKING OTHER BUTTONS INTERACTIVE
To make the other buttons interactive,
follow the same steps. Change the labels
to suit the button (eg About Us –
‘abouthoveron’ and ‘abouthoveroff’)

Changing the cursor style
So users know that the buttons are clickable, it is important to change the style of the cursor.
Simply change the cursor value in the properties toolbox to pointer.
Make sure that the home button is selected, and do this for all buttons.
Animation complete
A screenshot of the completed animation.
View a video screenshot here: https://sites.google.com/site/edgenavbar/final-animation
A copy of the final product is also available for download on the website.
THE ANIMATION IS NOW COMPLETE
Preview the animation to make sure that
it works as expected. If not, review the
previous steps. Don’t forget to save the
document.

Adobe Edge Animate Tutorial: Create an Interactive Navigation Bar in Less Than 40 Steps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Adobe Edge Animate Tutorial: Create an Interactive Navigation Bar in Less Than 40 Steps

Similar to Adobe Edge Animate Tutorial: Create an Interactive Navigation Bar in Less Than 40 Steps (20)

Recently uploaded

Recently uploaded (20)

Adobe Edge Animate Tutorial: Create an Interactive Navigation Bar in Less Than 40 Steps