How to add more symbol instances
How to remove symbol instances
How to turn off initial “Stage” animation
How to change links or Javascript function after click
Description
28 Edge Animate projects with hover effect animations for content (icons) in circles.
- Uses icon fonts to display the icons
- Resolution independent graphics - pure CSS shapes, icon fonts or SVG
- Easy to customize colors, opacity of elements (with or without Edge Animate software), add new ones or just remove them
- Included:
- Edge Animate files (.an, JS, HTML)
- Icon fonts (for preview purpose)
- Documentation
How to add more symbol instances
- Open .an file
- Select “Group” layer, right click, choose “Ungroup Elements”
- From Library Panel drag the “box” symbol on the Stage. Increase the number in symbol instance's name (for example “box6”)
- Edit array “elements” below. Remove
//
in the commented line - Change character in icon font that contains new icon
- Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).
Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center them horizontally.
How to remove symbol instances
- Open .an file
- Select “Group” layer, right click, choose “Ungroup Elements”
- Delete symbol's instance from the Stage (for example “box3”)
- Remove “elements” array's line that contains “box3” (for example)
- Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).
Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center them horizontally.
How to change the icons
All project files use icon fonts generated with “Fontastic” – free online icon font generator. To change the icons you need to make your own icon font – the process is simple with “Fontastic”.
Create the icon font:
- Create your free “Fontastic” account.
- Login into http://app.fontastic.me/.
- Step SELECT: Select the icons you'd like to use.
- Click “Modify Font” menu link and change “Font Name” to icon-font.
- Step CUSTOMIZE: Map the icons to characters you'll use in Edge Animate project. Use characters “1”, “2”, “3”, “4”, “5” – these characters are used in all projects.
- Step PUBLISH: click DOWNLOAD button to get your icon font.
Replace the icon font:
- Unzip the file.
- Copy the folder “fonts” and “styles.css” to project folder “icons” – replace the files.
- Refresh the .html file and you'll see the new icons.
Note: If you've mapped other characters than “1”, “2”, “3”, “4”, “5”, you'll need to change the code in .an
file:
- Open
.an
file. - Open Code window from main menu: Window > Code.
- Look for
Stage
>document.compositionReady
on the left sidebar. - In “elements” array look for values in “character” properties – these should be the characters you've mapped the icons to. Change them to the ones your icon font is using.
How to change icons' color
Colors of the icons (icon font characters) are set with variables:
- Open
.an
file - Open Code window from main menu: Window > Code
- Look for
Stage
>document.compositionReady
on the left sidebar - Look for variables clr and clr_over
Icon color
clr = "#d3f0ea";
Icon color on hover
clr_over = "#ffffff";
In some cases clr or clr_over might be set to use the color of the Stage:
clr_over = stage_clr;
How to turn off initial “Stage” animation
By default, all “box” elements are animated to appear on the Stage one by one (not instantly) with their opacities fade in. However there might be situations when you don't desire such animation. To remove it:
- Open .an file
- Open Code window from main menu: Window > Code
- Look for
Stage
>document.compositionReady
on the left sidebar - Find the line
/* opacity animation after Stage loads */
that's located almost in the end - Remove (or comment) the line that starts like this
box.element.css({'transition'
How to change links or Javascript function after click
Change links:
- Open
.an
file - Open Code window from main menu: Window > Code
- Look for
Stage
>document.compositionReady
on the left sidebar elements
array contains the links you can change – look for values in “url” properties:http://www.example.com?link1
wrapped in apostrophes'
Change Javascript funtion:
- Open
.an
file - Open Code window from main menu: Window > Code
- Look for
box
>hotspot.click
on the left sidebar - Code that opens the links:
window.open(url, "_self");
- You might replace it to call other Javascript funtion
Publishing from Edge Animate
After you've done editing in Edge Animate, publish the project files:
- From main menu: File > Publish
- Project files are published into
publish
folder
Projects in the package use Adobe Content Distribution Network (CDN) Hosting to speed up Animate composition delivery.
CDN Hosting
Compositions using the Adobe CDN all share a single URL for jQuery and the Edge Runtime. The browser caches the runtime, so the user only downloads the library once no matter how may Animate compositions they view, even if compositions are on different sites and produced by different authors.
Don't use the CDN if your composition needs to run without an Internet connection or if you want to use your own hosting exclusively.
SVG files require proper web server MIME-type configuration
If SVG files don't show up on web, the server doesn't serve MIME types for SVG files correctly. You should configure server appropriately. There are several ways to do it, depending upon the server type, and your access to server settings.
For example, in Apache server it's done by editing .htaccess
configuration file that is hidden - make sure your FTP client shows hidden files. If your server does not have such a file, create a file and name it “.htaccess”, and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular line you should add are:
AddType image/svg+xml svg
The .htaccess file should be placed in the directory that contains the SVG file, or any parent directory.
More on this subject: http://www.w3.org/services/svg-server/
Notes
Icons from “Foundation Icons” set made by ZURB (Public Domain CC3 license).
Icon fonts generated with “Fontastic” – free online icon font generator.
The projects were produced using Adobe Edge Animate CC version 3.0.