Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Adobe Edge Animate Tutorial by Jason Hill Page 1 of 26
Adobe Edge Animate Tutorial by Jason Hill Page 2 of 26
Contents
Introduction ................................................
Adobe Edge Animate Tutorial by Jason Hill Page 3 of 26
Timing the animation..................................................
Adobe Edge Animate Tutorial by Jason Hill Page 4 of 26
Introduction
Who are Adobe?
Adobe are a global leader in digital me...
Adobe Edge Animate Tutorial by Jason Hill Page 5 of 26
These requirements are the bare minimum to run the software. For an...
Adobe Edge Animate Tutorial by Jason Hill Page 6 of 26
Why does Edge animate create .html and .an files?
Edge Animate crea...
Adobe Edge Animate Tutorial by Jason Hill Page 7 of 26
Glossary of Terms
Activate
To Select/ turn on.
Eg. Activate the Tog...
Adobe Edge Animate Tutorial by Jason Hill Page 8 of 26
Windows to Mac shortcut comparison
This tutorial has been created u...
Adobe Edge Animate Tutorial by Jason Hill Page 9 of 26
Opening Adobe Edge Animate
Search for Adobe Edge on a Windows 8.1 c...
Adobe Edge Animate Tutorial by Jason Hill Page 10 of 26
The Edge Animate workflow
This is what Edge Animate will look like...
Adobe Edge Animate Tutorial by Jason Hill Page 11 of 26
Preparing the stage
The stage size
To make sure that the navigatio...
Adobe Edge Animate Tutorial by Jason Hill Page 12 of 26
Once the colour chooser is open:
1. Drag the sliders to change whe...
Adobe Edge Animate Tutorial by Jason Hill Page 13 of 26
Previewing the Animation
It is important to see how the product wi...
Adobe Edge Animate Tutorial by Jason Hill Page 14 of 26
Reposition the logo so that it largely occupies the height of the ...
Adobe Edge Animate Tutorial by Jason Hill Page 15 of 26
The timeline toggle
The easiest way to create animations is by usi...
Adobe Edge Animate Tutorial by Jason Hill Page 16 of 26
As the logo’s opacity is now at 0%, the stage should appear as fol...
Adobe Edge Animate Tutorial by Jason Hill Page 17 of 26
Adding a navigation button
In order for a navigation bar to work, ...
Adobe Edge Animate Tutorial by Jason Hill Page 18 of 26
Flying up
The buttons are going to fly up as well as fade in, this...
Adobe Edge Animate Tutorial by Jason Hill Page 19 of 26
Adding text to the button
In order for the navigation buttons to b...
Adobe Edge Animate Tutorial by Jason Hill Page 20 of 26
Do this for both rectangles.
Animating the text
The text within th...
Adobe Edge Animate Tutorial by Jason Hill Page 21 of 26
Making the button interactive
Hover over effects
A hover over effe...
Adobe Edge Animate Tutorial by Jason Hill Page 22 of 26
Designing the hover on
Drag the slider to the beginning of the hom...
Adobe Edge Animate Tutorial by Jason Hill Page 23 of 26
Inserting a stop trigger
So the timeline doesn’t play the hover of...
Adobe Edge Animate Tutorial by Jason Hill Page 24 of 26
Inserting a stop at
Drag the slider to the end of the homehoveroff...
Adobe Edge Animate Tutorial by Jason Hill Page 25 of 26
Select the first option, ‘click’.
Type in the following code:
wind...
Adobe Edge Animate Tutorial by Jason Hill Page 26 of 26
Changing the cursor style
So users know that the buttons are click...
Upcoming SlideShare
Loading in …5
×

Create an Animated Navigation Bar - Edge Animate Tutorial

This tutorial will guide the user step by step in creating an interactive navigation bar using Edge Animate. 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.

http://sites.google.com/site/edgenavbar/

  • Login to see the comments

Create an Animated Navigation Bar - Edge Animate Tutorial

  1. 1. Adobe Edge Animate Tutorial by Jason Hill Page 1 of 26
  2. 2. Adobe Edge Animate Tutorial by Jason Hill Page 2 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
  3. 3. Adobe Edge Animate Tutorial by Jason Hill Page 3 of 26 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
  4. 4. Adobe Edge Animate Tutorial by Jason Hill Page 4 of 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
  5. 5. Adobe Edge Animate Tutorial by Jason Hill Page 5 of 26 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.
  6. 6. Adobe Edge Animate Tutorial by Jason Hill Page 6 of 26 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
  7. 7. Adobe Edge Animate Tutorial by Jason Hill Page 7 of 26 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.
  8. 8. Adobe Edge Animate Tutorial by Jason Hill Page 8 of 26 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
  9. 9. Adobe Edge Animate Tutorial by Jason Hill Page 9 of 26 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.
  10. 10. Adobe Edge Animate Tutorial by Jason Hill Page 10 of 26 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
  11. 11. Adobe Edge Animate Tutorial by Jason Hill Page 11 of 26 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
  12. 12. Adobe Edge Animate Tutorial by Jason Hill Page 12 of 26 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.
  13. 13. Adobe Edge Animate Tutorial by Jason Hill Page 13 of 26 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.
  14. 14. Adobe Edge Animate Tutorial by Jason Hill Page 14 of 26 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.
  15. 15. Adobe Edge Animate Tutorial by Jason Hill Page 15 of 26 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
  16. 16. Adobe Edge Animate Tutorial by Jason Hill Page 16 of 26 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
  17. 17. Adobe Edge Animate Tutorial by Jason Hill Page 17 of 26 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
  18. 18. Adobe Edge Animate Tutorial by Jason Hill Page 18 of 26 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
  19. 19. Adobe Edge Animate Tutorial by Jason Hill Page 19 of 26 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.
  20. 20. Adobe Edge Animate Tutorial by Jason Hill Page 20 of 26 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
  21. 21. Adobe Edge Animate Tutorial by Jason Hill Page 21 of 26 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
  22. 22. Adobe Edge Animate Tutorial by Jason Hill Page 22 of 26 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’
  23. 23. Adobe Edge Animate Tutorial by Jason Hill Page 23 of 26 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 Type in the following code: sym.stop(); Press the close button on the code editor. The close button in the code editor
  24. 24. Adobe Edge Animate Tutorial by Jason Hill Page 24 of 26 Inserting a stop at Drag the slider to the end of the homehoveroff animation, and click Insert Trigger. Type in the following code: 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
  25. 25. Adobe Edge Animate Tutorial by Jason Hill Page 25 of 26 Select the first option, ‘click’. Type in the following code: 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’)
  26. 26. Adobe Edge Animate Tutorial by Jason Hill Page 26 of 26 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.

×