INSTRUMENTS, DIAGRAMS, & PRINCIPLES:

Part 6 of 6
Social Sharing Menu
The Social Sharing Menu refers to the three red button symbols sitting on the top left of the information sidebar. When clicked, each button responds by calling the window.open() function, passing in a custom URL...

line 1 We send the project page as a post to Facebook by appending it to the Facebook sharer URL as a variable. The post is customized by reading the Open Graph meta-tags in the app's host page.

line 6 We send the project URL and description to Twitter by appending it to the Twitter URL as the status variable.

line 3 Using the HTML "mailto:" tag, we send an email message with pre-filled subject field by opening the user's email client.

window.open("http://www.facebook.com/sharer/sharer.php?u=http://www.pj-i.com/edge/IDP/demo/", "_self");
window.open("http://twitter.com/home?status=Instruments,+Diagrams,+and+Principles+Demo+App+created+with+Edge+Animate+ +http://www.pj-i.com/edge/IDP/demo/", "_self");
window.open("mailto:paul.johnson@pj-i.com?subject=Hello%20from%20the%20IDP%20demo");
The Sharing Social Menu Posting To Facebook Posting To Twitter Sending An eMail Message
Adding The Audio
I added background sound to the application by using the HTML5 audio tag and some toggling logic and animation. The AudioButton symbol, located in the bottom right of the info sideBar, spins to a red state to indicate the audio is active and playing....

lines 1-4 I created a HTML Audio tag with an id of "audio-bg" and assigned it to local variable named "aud". Notice that inside the aud tag, I have provided two sources for an audio file, a .MP3 filetype and .OGG filetype. To cover all browsers that support HTML5 audio, you need to serve your audio in only these two different formats.

line 6 Add the aud variable to the application DOM.

line 8 Select the audio tag's first child with jQuery, and assign it to a variable named "bgMusic".

line 9 Created a variable named "playing" to track audio state, and assign it a value of false to start.

line 9 Created a variable named "newSound", and assign it a new Audio object.

line 12-15 An if statement checks the host to determine which audio format it can understand and play.

line 16-21 An event listener is set to listen to the audio object for the "ended" event. When this event fires, the audio object's currentTime property is reset to 0 and if it is not currently playing, it begins to play again creating a sound loop.

line 23-24 The audio object's preload property is set to auto and the volume set to 20%.
.
line 26-38 Using the jQuery toogle() function, I select the AudioButton and change three values. The audio is played or paused, the playing variable is set to true or false, and the symbol is animated to the "on" or "off" states on its timeline.

	var aud = "‹audio id=\"audio-bg\"›
						‹source src=\"audio/Safari.mp3\"›‹/source›
    					‹source src=\"audio/Safari.ogg\"›‹/source›
			  		 ‹/audio›";

 	$(aud).appendTo(sym);

 	var bgMusic = sym.$('#audio-bg')[0];
 	var playing = false;
 	var newSound = new Audio();

 	if (newSound.canPlayType("audio/mp3"))
 		newSound.src = "audio/Safari.mp3";
 	else
 		newSound.src = "audio/Safari.ogg";
 	newSound.addEventListener('ended', function() {
 		this.currentTime = 0;
 			if (playing) {
 				this.play();
 			}
 	}, false);

 	newSound.preload = 'auto';
 	newSound.volume = 0.2;

 	sym.$("AudioButton").toggle(
 		function(){
 			newSound.currentTime = 0; //reset sound
 			newSound.play();
 			playing = true;
 			sym.getSymbol("AudioButton").play();
 		},
 		function(){
 			newSound.pause();
 			playing = false;
 			sym.getSymbol("AudioButton").playReverse();
 		});
 	}); //Edge binding end
The Audio Toggle Button
Other Tidbits
Web Font Service - Edge Animate includes the ability to embed and use web fonts. Edge Web Fonts will enable you to access to a vast web font library with contributions from Adobe, Google, etc. The fonts are served by Typekit, so you can be sure of high performance and stability.

Garbage Collection - in a garbage-collected language such as JavaScript, objects that are still referenced by your application are not cleaned up. Manually de-referencing objects is not necessary in most cases. By simply putting the variables where they need to be (ideally, as local as possible, i.e. inside the function where they are used versus an outer scope), things should just work.
Final Thoughts
If you’re a Flash developer looking to expand your skill-set to include HTML, CSS and JavaScript animations, Edge Animate is definitely worth considering. I love the robust performance and the flexibility of publishing options. I definitely plan to continue to expand my Edge Animate skills - look for more tutorials from me in the future...

Comments are loading...

VIEW DEMO


TUTORIAL
Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

EDGE RESOURCES
Edge Animate
Edge Animate Tutorials
Edge Animate on Twitter

LINKS
ImageOptim
Fireworks CS6