Highlighted

Interactive Canvas Navigation created in Animate, embedded in HTML5 page in Dreamweaver - functions properly in Firefox, but not Safari or Chrome

Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

Are there compatibility issues with Canvas animations (that have interactivity like button links) working in Safari or Chrome?

I'm running:

Apple Safari Version 11.0.2 (12604.4.7.1.6)

Google Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Mozilla Firefox Version 57.0.4 (64-bit)

The responsive HTML5 page is otherwise VERY simple.

Animate generates an HTML page containing the Script in the header, and body onload command, the div containing the animations, and a separate .js file. I've imported these into my Dreamweaver site.

I have not altered the Animate generated .js in any way, or any of the scripts

I'm not using a framework (outside of Flexbox for responsiveness), I'm coding from scratch, trying to build a SIMPLE responsive Holy Grail 3 column design, and all the page has on it is:

layout.css – basic sizing, etc

normalize.min.css – available online and intended to (as the name suggests) normalize positioning display across all browsers

createjs-2015.11.26.min.js

generatedpage.js

The #animation_container style that Animate generates when you output a Canvas file

Flexbox container

1st row div + 3 column divs inside – that includes top level Home nav link, secondary level Page link, and the Brand logo

2nd row div + 3 column divs – just a spacer to prevent overlapping

3rd row div + 3 column divsI have the Canvas element parked inside the middle column The position of that element is controlled by an additional div class="shape_block", and corresponding css in the layout.css file of:

.shape_block {

     position: relative;

     min-height: 760px;

     min-width: 760px;

}

4th row div + 3 column divs – another spacer to prevent overlapping

5th row div + 4 column divs – footer with text nav links in each column (This row lives inside a <div class="navbar-fixed-bottom"></div>)

That's it.

Safari – Canvas element shows up, but interactive buttons don't work (cannot see the hover state of the button, nor does the link to a new page work).

Chrome – Same error.

Firefox – Everything works fine.

IE – I don't use, because screw Micro$soft. I was done fighting with that one in 1999.

Edge – Don't trust it because Micro$soft. Same brand of stupid, different day.

The Canvas element also functions fully in Live Preview within Dreamweaver, button links and hover states working fine.

From what I understand, OAM files (output from Animate as an alternative to Canvas) are being deprecated, so that doesn't seem a solution, as I need this to function for longer than five minutes before some goober changes the WC3 standards yet again. (Please correct me if I'm wrong about this.)

Trying to determine if this is a browser problem that can be resolved with additional code, or if it's a code interaction problem somewhere between Flexbox, HTML5 .js, css, and Canvas, or what?

I've been fighting with this for a while, and can't pinpoint the problem beyond stupid browser issues – which considering that I'm using recent versions of all of them, seems like something Adobe developers would have accounted for.

Need an answer either from the forum or from Adobe Technical Support as my business is counting on this working. And gee, an actual phone number one can find on the website to call a human at some point, would be spiffy too.

Honestly, Flash worked better than all this BS. I really wish you guys had just sorted out the security issues with Apple and left that format intact, because Canvas seems a giant pain in the behind.

Instead of code getting cleaner and easier to use over time, it's just gotten frustratingly overthought where it shouldn't be, and underthought where more thinking should have occurred. Rant complete. Help will be appreciated.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Interactive Canvas Navigation created in Animate, embedded in HTML5 page in Dreamweaver - functions properly in Firefox, but not Safari or Chrome

Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

Are there compatibility issues with Canvas animations (that have interactivity like button links) working in Safari or Chrome?

I'm running:

Apple Safari Version 11.0.2 (12604.4.7.1.6)

Google Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Mozilla Firefox Version 57.0.4 (64-bit)

The responsive HTML5 page is otherwise VERY simple.

Animate generates an HTML page containing the Script in the header, and body onload command, the div containing the animations, and a separate .js file. I've imported these into my Dreamweaver site.

I have not altered the Animate generated .js in any way, or any of the scripts

I'm not using a framework (outside of Flexbox for responsiveness), I'm coding from scratch, trying to build a SIMPLE responsive Holy Grail 3 column design, and all the page has on it is:

layout.css – basic sizing, etc

normalize.min.css – available online and intended to (as the name suggests) normalize positioning display across all browsers

createjs-2015.11.26.min.js

generatedpage.js

The #animation_container style that Animate generates when you output a Canvas file

Flexbox container

1st row div + 3 column divs inside – that includes top level Home nav link, secondary level Page link, and the Brand logo

2nd row div + 3 column divs – just a spacer to prevent overlapping

3rd row div + 3 column divsI have the Canvas element parked inside the middle column The position of that element is controlled by an additional div class="shape_block", and corresponding css in the layout.css file of:

.shape_block {

     position: relative;

     min-height: 760px;

     min-width: 760px;

}

4th row div + 3 column divs – another spacer to prevent overlapping

5th row div + 4 column divs – footer with text nav links in each column (This row lives inside a <div class="navbar-fixed-bottom"></div>)

That's it.

Safari – Canvas element shows up, but interactive buttons don't work (cannot see the hover state of the button, nor does the link to a new page work).

Chrome – Same error.

Firefox – Everything works fine.

IE – I don't use, because screw Micro$soft. I was done fighting with that one in 1999.

Edge – Don't trust it because Micro$soft. Same brand of stupid, different day.

The Canvas element also functions fully in Live Preview within Dreamweaver, button links and hover states working fine.

From what I understand, OAM files (output from Animate as an alternative to Canvas) are being deprecated, so that doesn't seem a solution, as I need this to function for longer than five minutes before some goober changes the WC3 standards yet again. (Please correct me if I'm wrong about this.)

Trying to determine if this is a browser problem that can be resolved with additional code, or if it's a code interaction problem somewhere between Flexbox, HTML5 .js, css, and Canvas, or what?

I've been fighting with this for a while, and can't pinpoint the problem beyond stupid browser issues – which considering that I'm using recent versions of all of them, seems like something Adobe developers would have accounted for.

Need an answer either from the forum or from Adobe Technical Support as my business is counting on this working. And gee, an actual phone number one can find on the website to call a human at some point, would be spiffy too.

Honestly, Flash worked better than all this BS. I really wish you guys had just sorted out the security issues with Apple and left that format intact, because Canvas seems a giant pain in the behind.

Instead of code getting cleaner and easier to use over time, it's just gotten frustratingly overthought where it shouldn't be, and underthought where more thinking should have occurred. Rant complete. Help will be appreciated.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 31, 2018 0
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

Without seeing a live version of your page help is impossible.

For info though -

MS Edge is one of the better browsers for canvas support.

Like ALsp I am also wondering why you are using canvas for this, as css animations are a much better solution, unless of course there is some other reason?

It was not just the security problems with flash that caused browsers to decide to start blocking its use. It was also the fact that it was very heavy on mobile device battery life, the plug-in was excessively large, and that now it is possible to do everything flash was capable of using canvas, (not the code Animate produces though) and css animations.

It may be helpfull if you use the browsers, (safari, chrome) built-in javascript developers tools to monitor what is happening with those browsers, but without a live page no one else can do this for you. The most common problem with canvas is that the unnecessary, (in my opinion) extra js files that Animate uses, (create.js etc) are causing the problems. The reason i think this is that Dw uses an older version of the Chrome engine, (cef) for its live view, so it may be that both Chrome and Safari have compatability problems with the Animate js files.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 1
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

The reason the html5 canvas element does not have interactive content in Chrome, Safari and IE/Edge is that the hitregion api is not supported in those browsers, (hidden behind a flag) see the compatability table at -

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion#Browser_compa...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 2
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

Do you know if there's a code workaround for that?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

Also, does it profit me at all to code the canvas element entirely by hand (something which would be a huge hit to my project time wise) or is the ability to click on a button inside a canvas element simply not function in Chrome or Safari at all?

Because if that's the case, then canvas certainly no replacement for flash, where all that could be done VERY easily.

It means that canvas should be regarded solely as an animation tool, not an interactivity tool. I need something that does both, that is easy for an artist to use. That WAS flash. 🙂

Can I unhide that flag, or input code that allows me to override that, and access the hitregion api?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

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 ).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 1
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

At the risk of being brutally honest, I think using Animate CC (HTML5 Canvas)  for  page navigation is foolish. 

Navigation is essential.  It must work well on ALL devices.  On the other hand, animation is nothing more than eye candy.  It's a nice option for adding visual interest but it's certainly not essential.  

Get a working menu on your page with HTML and CSS first.  Then you can sweat the small stuff.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

Well I'm a designer, so "mere" eye candy is kind of important. Literally the intent of the site. In this instance, design is cake, not frosting.

If you can suggest a better way to accomplish something creative that DOESN'T look like everyone else's site with boring navigation, I'd love to hear it.

Among designers though, we do actually miss the creativity of the early web. I'm so sick of designing into little boxes inside grids, I want to hurl. 🙂

And of course I can just build a boring accordion nav or something on the site (I was going to do that anyways, because of standard nod to UX convention). But I wanted this graphical, unusual navigation option in the middle of the top level pages precisely because it is NOT those boring boxes. And I assure you, on Firefox, this looks awesome.

This was an attempt to do something... wait for it... NEW.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

If you care to post a link to your online site, we'll look at it and make suggestions.   Navigation does not need to be boring.  If you know how to work with CSS transforms and animations, you can do some amazing things. 

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

Just a though, as even though I think whatever it is you are doing could be done using css animations, i also cannot imagine that an interactive canvas element with some form of alternative to hit regions is not available in Animate, you could try asking in the Animate forum 'how others are doing it'.

If they cannot, then Animate has a very serious shortcoming.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 1
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

I also asked the compatibility question on the Animate forum just in case, but no responses yet. To me, this seems such a BASIC level functionality.

I mean, no active state buttons? Really? Then why allow people to create them in the application in the first place, if they aren't going to work in more than half the browsers?

I can't understand why it wasn't automatically built to do this from the jump, and these sort of cross-browser issues (at least with the most recent version of all browsers) worked out before release.

After all, I'm not trying to make anything functionally radical, it just LOOKS non-standard.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

It's not published publicly as yet, because frankly, it DOES look awesome, 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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

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'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 1
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

Lucy5by5  wrote

It's not published publicly as yet, because frankly, it DOES look awesome, 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.

Create a TEST folder on your server and upload your work there.  You can delete the TEST folder after we've had a chance to see it.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

To add to Nancy;s reply, just post the related problem section, no need for the rest of the content or other design/styling features. Even the animation can be cut down to only show the buttons. That way, no one will be seduced to copying your material.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 2
Community Beginner ,
Feb 01, 2018

Copy link to clipboard

Copied

That's lovely, thank you for sharing that code. I'll try and see if any of it is applicable to my project tomorrow. A challenge for me – my shapes are not something "coordinate/drawing simple" like a circle, which makes hand-coding such things harder. This is one reason why I sought to use a drawing app like Animate in the first place. Also, the active state mouseover reveals a sprite image.

And the buttons are located close together, so if the element (svg, png, whatever) regards it's total area is as a box (think a transparent png of a triangle or other polygon in close alignment with another shape), I'm screwed, because the boxes will overlap (even if the visible shape does not) causing mouse collisions. Again, this was another thing made instantly easier by flash.

It might be a case where I have to leave the shapes static for the time being until the other browsers catch up to Firefox and build a second, regular menu of some sort to compensate for that.

Anyhow, I appreciate you taking the time to help troubleshoot this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2018 0
LEGEND ,
Feb 02, 2018

Copy link to clipboard

Copied

svg can be used to provide links with any shape, not just regular shapes. It can also be used with css, (transforms, transition, animations) and javascript.

As everyone says, if it is for the web then using Animate to provide UI elements is not necessary, as everything can now be done, (with the same visual effects) without flash or canvas. The one disadvantage is that they all require coding knowledge.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2018 0
Adobe Community Professional ,
Feb 02, 2018

Copy link to clipboard

Copied

aaaaaaahhhhh.... glad to hear you... I had so much thread in Animate prerelease and on dreamweaver prerelease concerning this particular subject...

what is worth is that user that only focus on animate (read here the one form Flash and not the one from edge)... talk about doing HTML5... when producing in flash

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2018 1
LEGEND ,
Feb 02, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

aaaaaaahhhhh.... glad to hear you... I had so much thread in Animate prerelease and on dreamweaver prerelease concerning this particular subject...

what is worth is that user that only focus on animate (read here the one form Flash and not the one from edge)... talk about doing HTML5... when producing in flash

The problem with words like html5, css3, pre-processor and git, (amongst others) is that Adobe is using them like 'buzz' words without actually supporting or understanding them.

One of the reasons I could no longer support being an acp for, was the way Adobe and many users do not really support web development, or even try to understand just what is possible or required for the modern web. Everything I looked at and comments/posts being posted by many simply said to me that Adobe was still trying to make Flash, (or Animate CC alternatives) the 'future' of web development.

I Apologise to the OP, for posting a none discussion relative reply.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2018 0
Adobe Community Professional ,
Feb 02, 2018

Copy link to clipboard

Copied

I think that we should open a thread about web animation... and why not an other one about the AnimateCC html5 debate...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2018 0
LEGEND ,
Feb 02, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I think that we should open a thread about web animation... and why not an other one about the AnimateCC html5 debate...

Why?

Nothing ever comes of them, and no one in Adobe who can change anything will ever read them

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2018 0
Community Beginner ,
Feb 14, 2018

Copy link to clipboard

Copied

Then Adobe needs to give me my money back for this app, if they're not going to support it, and it can't perform the actions it claims to in its User Guides. I mean really, don't pitch that artists can create interactivity in HTML5 canvas if it only works in 1 browser out of all the majors. The entire point of this application is to allow ARTISTS to create work, not just programmers. If you can't make it intuitive enough for artists, and then output generated code that fracking WORKS, then don't claim you can. So sick of this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2018 0
pziecina LATEST
LEGEND ,
Feb 14, 2018

Copy link to clipboard

Copied

Lucy5by5  wrote

If you can't make it intuitive enough for artists, and then output generated code that fracking WORKS, then don't claim you can. So sick of this.

You are talking to none Adobe people in these forums, so complaints about products are not our problem.

Animate could work, but like all Adobe products intended for the web, experianced web developers are in a very small minority and are more often ignored than not. It should be possible to do what you wish in Animate, but if I or any web developer says how, we are ignored or shouted down by most Adobe dev teams, cab members and pre-release members.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2018 0