23
Replies
First, you may unhide the flag, but how do you tell your site visitors that they must enable experimental features, (not recommended)?
Now to your other questions, you can sort of make a 'canvas' button interactive by coding it by hand and using the dom, but quite honestly it is not worth the effort as at some point in the future the hitregion api will be implemented x-browser, and the only time it would be worth coding yourself would I think be when no other alternative exists.
It may even be that the create.js and other files that are currently used simply require updating, or rewriting to offer a 'workable' alternative to the missing hitregion api functions. The only problem I can think of with both the dom and update/rewrite possibilities are that they would probably rely on a co-ordonate system, making the canvas element a fixed size, so no rwd.
Both flash and the canvas suffer(ed) from a none web accessibility problem, which now severely limits/limited the use of them for business/corporate/government sites, as most countries now have accessibility laws for the web, (though even governments fail to fulfill them 
).
Lucy5by5 wrote
... and if I can get this to work somehow, I don't want to have 800 copycat sites out there when I do publish it. But thanks.
That's the exact same reason many people no longer 'advertise' new ideas. Free to everyone may be a great idea, but it does not pay the bills 
.
I have not used Animate for a couple of versions, as I did not like the overhead in the extra files it required for even the simplest of animations. If you look at the specs and a number of examples for using canvas for drawing on, you should see that it is possible to detect the cursor position, even without hit regions.
As i said in a previous post, using a co-ordinate system, (similar to the html image-map) it should be possible for you to program a function using the co-ordinates to check if the mouse pointer is within that region, (i know it is possible). The problem with that is that those co-ordinates are fixed points so no rwd, also such a function would not work on smartphone, tablets or anything that does not support a mouse, though the pointer/touch events api does offer a possible solution to that problem.
I would give it a day or so though before coding your own solution, as hopefully someone in the Animate forum already knows of a 'fix'.
Below a quick demo of what can be achieved with SVG, CSS and a little JavaScript. Sorry for the long code. For expediency, I put everything into one document. Animation tested in FF and Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SVG Circular Menu</title>
<!--Font Awesome Icons-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!--Snap SVG Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<style>
/**DEMO STYLES**/
body {
background: #3D4444;
color: #DADADA;
}
body a { color: #DA7071; }
body a:hover, body a:active, body a:focus { color: #74777b; }
.container {
text-align: center;
padding: 2.5em 0.5em 2em;
min-height: 250px;
margin: 0 auto;
}
/**MENU STYLES**/
.menu {
position: relative;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 7em 0;
}
.trigger {
cursor: pointer;
background: none;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
border: none;
outline: none;
text-align: center;
font-size: 1.5em;
color: #fff;
position: relative;
z-index: 1000;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.trigger span {
opacity: 0;
position: absolute;
}
.menu__items {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 0;
margin: 0;
list-style-type: none;
z-index: 5;
}
.menu__items li {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
line-height: 80px;
font-size: 1.5em;
position: absolute;
z-index: -1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
}
.menu.menu--open .menu__items li:first-child {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, -160px, 0);
transform: scale3d(1, 1, 1) translate3d(0, -160px, 0);
}
.menu.menu--open .menu__items li:nth-child(2) {
-webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(3) {
-webkit-transform: scale3d(1, 1, 1) translate3d(160px, 0, 0);
transform: scale3d(1, 1, 1) translate3d(160px, 0, 0);
}
.menu.menu--open .menu__items li:nth-child(4) {
-webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(5) {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 160px, 0);
transform: scale3d(1, 1, 1) translate3d(0, 160px, 0);
}
.menu.menu--open .menu__items li:nth-child(6) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(7) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0);
transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0);
}
.menu.menu--open .menu__items li:nth-child(8) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0);
}
.menu__items li a {
display: block;
background: #2E3535;
color: #DA7071;
border-radius: 50%;
outline: none;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.menu__items li a:hover, .menu__items li a:focus {
background: #272c2c;
color: #777;
}
.menu__items li a span {
position: absolute;
color: transparent;
top: 100%;
pointer-events: none;
}
.morph-shape {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.morph-shape svg path {
fill: #DA7071;
-webkit-transition: fill 0.3s;
transition: fill 0.3s;
}
.menu--open .morph-shape svg path { fill: #777; }
@media screen and (max-width: 40em) {
.menu__items {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
}
</style>
</head>
<body>
<div class="container">
<nav id="menu" class="menu"> <span class="morph-shape" data-morph-active="M251,150c0,93.5-29.203,143-101,143S49,243.5,49,150C49,52.5,78.203,7,150,7S251,51.5,251,150z">
<svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
<path d="M281,150c0,71.797-59.203,131-131,131S19,221.797,19,150S78.203,19,150,19S281,78.203,281,150z"/>
</svg>
</span>
<button class="trigger"><i class="fa fa-fw fa-share"></i><span>Share This</span></button>
<ul class="menu__items">
<li><a href="#"><i class="fa fa-fw fa-facebook"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-rss"></i><span>RSS Feed</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-google-plus"></i><span>Google+</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-github"></i><span>GitHub</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-pinterest"></i><span>Pinterest</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-tumblr"></i><span>Tumblr</span></a></li>
<li><a href="#"><i class="fa fa-fw fa-envelope"></i><span>RSS as Mail</span></a></li>
</ul>
</nav>
</div>
<!--Classie.js class changer-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
<script>
(function() {
function SVGMenu( el, options ) {
this.el = el;
this.init();
}
SVGMenu.prototype.init = function() {
this.trigger = this.el.querySelector( 'button.trigger' );
this.shapeEl = this.el.querySelector( 'span.morph-shape' );
var s = Snap( this.shapeEl.querySelector( 'svg' ) );
this.pathEl = s.select( 'path' );
this.paths = {
reset : this.pathEl.attr( 'd' ),
active : this.shapeEl.getAttribute( 'data-morph-active' )
};
this.isOpen = false;
this.initEvents();
};
SVGMenu.prototype.initEvents = function() {
this.trigger.addEventListener( 'click', this.toggle.bind(this) );
};
SVGMenu.prototype.toggle = function() {
var self = this;
if( this.isOpen ) {
classie.remove( this.el, 'menu--open' );
}
else {
setTimeout( function() { classie.add( self.el, 'menu--open' ); }, 175 );
}
this.pathEl.stop().animate( { 'path' : this.paths.active }, 150, mina.easein, function() {
self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic );
} );
this.isOpen = !this.isOpen;
};
new SVGMenu( document.getElementById( 'menu' ) );
})();
</script>
</body>
</html>
I think that we should open a thread about web animation... and why not an other one about the AnimateCC html5 debate... 
AdChoices