Edge Animated Logo

Learn how to update your Adobe Edge Animated Logo.

Instructions

Animated Landing Page

In this tutorial, we’ll demonstrate how to update the animated logo. The animated logo is created with Adobe’s ( Edge Animate CC ) which is a wonderful program for animating HTML via CSS and JavaScript. NO FLASH player plugins, or flash code, just pure HTML, CSS and JavaScript so the animated content will play on all devices and resolutions. The source ( .an ) animate file is included in the component folder, so if you want to edit the file directly in Edge Animate CC, you can do that as well.

Animated Logo – Edit the text ‘Website Name’ & ‘Taglines’

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=bA1dfbmGDDg

To update the ‘Website name and taglines’, you’ll be editing a JavaScript file, not a regular .htm web page, but the changes are pretty much the same in both, find the text, replace with your own, save and you’re done.

First thing to do, is open the following JavaScript file:

Library / shared / animated-logo / logo_edge.js

The ‘Website name’ and ‘Taglines’ are loaded into the animated logo via javascript, and the javascript loads the text from a ‘text object’ .. a simple bit of editable text. To ‘locate’ the text object you can use the ‘Find’ tool in your editor, or just scroll down the page until you locate the

text: “Website Name”,

or

text: “PRIMARY TAGLINE GOES HERE”,

or any other the text in your animated logo.

In our Portico Template example, scroll down to line #221 and you’ll find the ‘Website Name’ text object, then the taglines will follow directly after.

You can also use the find tool in your editor, I usually look at my web page first

See what text I want to change, in this case the ‘Website name’.

Then I open the ( Library / shared / animated-logo / logo_edge.js ) page.

Open the ‘Find’ tool ( Ctrl+F ) and enter:

‘Website Name’ into the ( Find what: ) window

Change the settings to ( Current page )

Then press the [ Find Next ] button

This is a very fast and effective method for finding information in a web page, or JavaScript file:

Once we press the [ Find Next ] button, the editor will find and select the ‘Website Name’ text within the ‘text’ object for you.

To edit the ‘Website Name’ text:

  1. Locate the ‘text:’ object in the page, each bit of text in your animation, has a matching ‘text’ object with the text displayed in double quotes as in
  2. text: “Website Name”,
  3. Change the text in the double quotes, and save .. example
  4. text: “Mywebsite”,
  5. Preview the intro page in your web browser to see the changes.

You may find that your new text doesn’t fit as well as the default text. No problem, you can adjust the font size, family, and position via a style sheet which we’ll demonstrate next.

Animated Logo – Font Properties

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=RWVs4Njo6pQ

Open the ( Site/styles/landing.css ) or refer to the included ‘style guide’ within your ( Site / styles ) folder.

The font properties for each text element of the logo is located at the top of the ‘landing.css’. If you don’t have a ‘landing.css’ then refer to the ‘Site / styles / style-guide / style-guide.htm ) for the location of your CSS.

You can edit the font size, family, and positioning for each text element in the logo.

Animated Logo – Enter Link

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=6ZkK2z708ZA

You can change the default ‘Enter’ page, open the

Library / shared / animated-logo / logo_edgeActions.js page.

You’ll see the welcome.htm page ( or other ) listed here:

Change the link to your page, and save, test.

Animated Landing Page

In this tutorial, we’ll demonstrate how to update the animated logo. The animated logo is created with Adobe’s ( Edge Animate CC ) which is a wonderful program for animating HTML via CSS and JavaScript. NO FLASH player plugins, or flash code, just pure HTML, CSS and JavaScript so the animated content will play on all devices and resolutions. The source ( .an ) animate file is included in the component folder, so if you want to edit the file directly in Edge Animate CC, you can do that as well.

Animated Logo – Edit the text ‘Website Name’ & ‘Taglines’

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=bA1dfbmGDDg

To update the ‘Website name and taglines’, you’ll be editing a JavaScript file, not a regular .htm web page, but the changes are pretty much the same in both, find the text, replace with your own, save and you’re done.

First thing to do, is open the following JavaScript file:

Library / shared / animated-logo / logo_edge.js

The ‘Website name’ and ‘Taglines’ are loaded into the animated logo via javascript, and the javascript loads the text from a ‘text object’ .. a simple bit of editable text. To ‘locate’ the text object you can use the ‘Find’ tool in your editor, or just scroll down the page until you locate the

text: “Website Name”,

or

text: “PRIMARY TAGLINE GOES HERE”,

or any other the text in your animated logo.

In our Portico Template example, scroll down to line #221 and you’ll find the ‘Website Name’ text object, then the taglines will follow directly after.

You can also use the find tool in your editor, I usually look at my web page first

See what text I want to change, in this case the ‘Website name’.

Then I open the ( Library / shared / animated-logo / logo_edge.js ) page.

Right click on the open document, and select ‘Find and Replace’

Type ‘Website Name’ into the ( Find: ) window.

Make sure the ‘Replace’ window is blank.

Click the ‘Find Next’ button:

This is a very fast and effective method for finding information in a web page, or JavaScript file:

Once we press the [ Find Next ] button, the editor will find and select the ‘Website Name’ text within the ‘text’ object for you.

To edit the ‘Website Name’ text:

  1. Locate the ‘text:’ object in the page, each bit of text in your animation, has a matching ‘text’ object with the text displayed in double quotes as in
  2. text: “Website Name”,
  3. Change the text in the double quotes, and save .. example
  4. text: “Mywebsite”,
  5. Preview the intro page in your web browser to see the changes.

You may find that your new text doesn’t fit as well as the default text. No problem, you can adjust the font size, family, and position via a style sheet which we’ll demonstrate next.

Animated Logo – Font Properties

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=RWVs4Njo6pQ

Open the ( Site/styles/landing.css ) or refer to the included ‘style guide’ within your ( Site / styles ) folder.

The font properties for each text element of the logo is located at the top of the ‘landing.css’. If you don’t have a ‘landing.css’ then refer to the ‘Site / styles / style-guide / style-guide.htm ) for the location of your CSS.

You can edit the font size, family, and positioning for each text element in the logo.

Animated Logo – Enter Link

Skip the reading and go straight to video:

http://www.youtube.com/watch?v=6ZkK2z708ZA

You can change the default ‘Enter’ page, open the

Library / shared / animated-logo / logo_edgeActions.js page.

You’ll see the welcome.htm page ( or other ) listed here:

Change the link to your page, and save, test.