Cube Rotator

How to change font

1. Open .an file
2. In Library Panel > Symbols double click on icon of “box” symbol
3. Select two layers “Text” and “TextNew” (hold Ctrl or Command key)
4. in Properties Panel > Text click on list of fonts (“icon-font, Arial, sans-serif” now selected) and select “Add Font”, choose from “Edge Web Fonts” and confirm by clicking “Add Font”
5. Save the file

How to change colors

Colors of the cube elements are set with variables:

1. Open .an file
2. Open Code window from main menu: Window > Code
3. Look for Stage > document.compositionReady on the left sidebar
4. Look for variables after comment /* SET COLORS */

Other variables

1. Open .an file.
2. Open Code window from main menu: Window > Code.
3. Look for Stage > document.compositionReady on the left sidebar.
4. Look for variables after comment /* SET ORDER */

Order of counting

First digit

i = 99

Last digit

last_i = 1

Step

step = 1

If the First digit i is bigger than Last digit last_i, the counting will go in descending order

For example, if variables are set like this i = 99; last_i = 1; step = 1 the numbers will go descending: '99', '98', '97' etc. until '1'. If you set step to '2', the numbers will go '99', '97', '95' etc. until '1'.

If the First digit i is smaller than Last digit last_i, the counting will go in ascending order

For example, if variables are set like this i = 1; last_i = 99; step = 1 the numbers will go ascending: '1', '2', '3' etc. until '99'. If you set step to '2', the numbers will go '1', '3', '5' etc. until '99'.

Projects with icons and how to change them

1. Open .an file.
2. Open Code window from main menu: Window > Code.
3. Look for Stage > document.compositionReady on the left sidebar.
4. Look for variables after comment /* SET ORDER */

Icon-font icons mapped to these characters/

icons = ["a","b","c","d","e","f"];

How many time animation goes through the loop (all 'icons' array characters). Infinite if set to zero (0)

loop_total = 10;

How to change the icons

Project files with icons 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:

1. Create your free “Fontastic” account.
2. Login into http://app.fontastic.me/.
3. Step SELECT: Select the icons you'd like to use.
4. Click “Modify Font” menu link and change “Font Name” to icon-font.
5. Step CUSTOMIZE: Map the icons to characters you'll use in Edge Animate project. Use characters “a”, “b”, “c”, “d”, etc. – these characters are used in the projects. You may use any amount of icons you wish.
6. Step PUBLISH: click DOWNLOAD button to get your icon font.

Replace the icon font:

1. Unzip the file.
2. Copy the folder “fonts” and “styles.css” to project folder “icons” – replace the files.
3. Refresh the .html file and you'll see the new icons.

Note: If you've mapped other characters than “a”, “b”, “c”, “d”, etc. you'll need to change the code in .an file:

1. Open .an file.
2. Open Code window from main menu: Window > Code.
3. Look for Stage > document.compositionReady on the left sidebar.
4. “icons” array contains all the characters – these should be the characters you've mapped the icons to. Change them to the ones your icon font is using.

Publishing from Edge Animate

After you've done editing in Edge Animate, publish the project files:

1. From main menu: File > Publish
2. 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.

Embedding an Edge Animate composition into an existing page

1. Publish from Edge Animate. This creates the necessary files to run the animation.
2. Inside page's <body> add a <div> that has the “ID” of Stage and the correct “class” name for your stage (the "Composition ID" for your project in Animate). For example:

   <div id="Stage" class="EDGE-XXXXXXXX"></div>

3. Inside page's <head> include the Preload .js file and the default style, within Edge Runtime HTML comments. For example:

   <!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="example_edgePreload.js"></script>
<style>
   .edgeLoad-EDGE-XXXXXXXX { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->

4. Make sure to upload all of the include files to your server in the appropriate relative locations. This includes these files/folders:
   • _edge.js
     
   • _edgeActions.js
     
   • _edgePreload.js
     
   • edge_includes folder and its contents
     
   • any other files/folders created inside the publish/web folder when you publish from Edge Animate, for example images folder, etc.

Note that the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.

Notes

Icons from “Font Awesome” set made by Dave Gandy (The MIT License).

Icon fonts generated with “Fontastic” – free online icon font generator.

The projects were produced using Adobe Edge Animate CC version 3.0.