A spectre is haunting the web – the spectre of Flash. Everybody has heard that this old technology developed by Macromedia (and purchased by Adobe) is no longer alive. There are many factors that have coincided to terminate it, technological and commercial ones. But this is not the purpose of this tutorial.
One of the revolutionary aspects of Flash was the user-friendly interface, and the possibility of building complex interactive animations without a huge knowledge of programming. With its successor, HTML5, it seemed that we were going back to ancient times, when only programmers could develop such complex sites.
But the software developers have answered that question, and have built many platforms for developing HTML5 animations with user-friendly interfaces. The most popular ones are Sencha Animator and Adobe Edge. In this tutorial we’re going to focus on this last one. The capabilities of this software are not fully developed, so sometimes it’s necessary to use some extra code to extend them. Here are some tips that can improve your experience with this developing tool – Adobe Edge Animate CC.
Improve Your Experience with Adobe Edge Animate
How to add custom fonts
Adoge Edge includes a wide range of fonts to be used on your projects. But if you want to use another one you can follow these steps:
Step 1
Convert your font to the following formats: .eot, .ttf, .otf, .woff and .svg. There are many on-line applications that can be used for this conversion, we can recommend to you the webfont generator by Font Squirrel. Save these files in a new folder in your project’s root (we usually name it ‘fonts’).
Step 2
Go to your Fonts menu (on the right of the interface) and click on the + symbol. Choose the Custom tab.
Step 3
Add a name for your font. After embedding it, it will appear as one more font in your text options. Now you must enter the css style tag that will embed your files. A sample for this code would be:
Please, pay attention to the extension of the embedded-opentype (.eot?#iefix). If you don’t write this full extension you could have problems with Internet Explorer.
Step 4
When you have published your animation, you will need to paste manually the ‘fonts’ folder in the root of your exported files.
How to use additional CSS3 with your text
Adobe Edge Animate allows you to include classes and a lot of CSS3 features for text blocks: shadows, position, filters, and many others. But, on the other hand, there are many others that just can’t be programmed with the provided tools. You can add CSS3 code very easily.
Step 1
Create your text frame and define a class for it.
Step 2
Save and close your project. Open the HTML file in you root folder with a code editor. You can write the code for the class inside the tag.
Step 3
Test the style in your browser and, when everything is OK, copy and paste the style in a text file. You will need it in the future, as the program tends to erase all the additional code in the HTML. Once the project is complete, you can publish it and add your saved style to the final document.
How to add sounds
In order to show you how to include a sound on your project, we are going to use a practical case of one object that plays a background sound when the mouse is hovered over it.
Step 1
To start with this process we need to export the sound file in two different formats: .mp3 and .ogg. Remember, we need it to be compatible with most browsers. Place these files in a ‘sounds’ folder in your root.
Step 2
Select the graphic element and click on the actions button. Create a new one with mouse over method.
Step 3
Add this javascript code to activate the sound:
sym.play(); newSound = new Audio(); newSound.innerHTML = "<source src='sounds/XXX.ogg' type='audio/ogg' /> <source src='sounds/XXX.mp3' type='audio/mpeg' />"; newSound.volume = 0.3; newSound.loop = true; newSound.play();
Doing this, we have created an object named newSound that can be placed and paused with a simple javascript action.
Step 4
Create another action for the same element with “Mouse out” method.
Step 5
Add this code to pause the sound:
newSound.pause();
Step 6
As we did with the ‘fonts’ folder, we need to paste manually the ‘sounds’ folder when we publish our animation.
How to customize the loader
One of the limitations in Adobe Edge Animate is that only displays six loading loops. In fact, these are animated gifs, automatically centered in the screen while the animation is loading. But there is one way to change these default animations.
Step 1
Create an animated gif with the same size as your animation performing one continuous loop. Save it to your images folder.
Step 2
Open your Edge Animate project and include one of the default loaders in the project.
Step 3
Import your animated gif to the library.
Step 4
Save the project and close it. The software is always checking for changes in the external files, so it’s better to keep the project closed.
Step 5
Open the JavaScript file with the following name: YourprojectPreload.js.
Step 6
Go to the bottom of the code and change the information as described in the image.
Performing these changes we have mystified the code, changing the coordinates and replacing the source file for the loader.
Conclusion
These are only some tips, some indications of what we can get using this powerful tool… And a little bit of CSS and JavaScript. The good news is that you don’t need to be an expert programmer to develop rich interactive animations in HTML5.
