3 Replies Latest reply on Nov 7, 2013 9:04 AM by resdesign

    Custom CSS Is Crashing Adobe Edge Animate

    neohtom Level 1

      Below is the HTML and CSS for a basic page, with one style. When I open it in Adobe Edge Animate and then create a shape, and set the class of that shape to "mystyle" it displays fine in the Edge Animate window (except the border style appears missing). However, as soon as I try to move the shape, Edge crashes - consistently every time. If I create a DIV on the page outside of Edge Animate first, and apply the CSS to it, then open the page in Edge, I can move the shape around - but I lose several style options in the Properties panel such as Filters and a couple others.

       

      I'm trying to get a better understanding of what would be the best workflow when trying to use Edge to animate existing web page layouts - creating the animations and DIVs entirely in Edge first then placing the animation into an existing layout, or creating a page layout in something like Dreamweaver (along with all my other custom CSS), then opening it in Edge to animate it. 

       

      I saw elsewhere where someone explained how to attach an external style sheet instead. This seems to work without crashing, however  I cannot see the rendered style on the stage itself, only when I preview the animation in a browser.

       

       

      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>Untitled Document</title>

      <style type="text/css">

      .mystyle {

                width: 248px;

                height: 200px;

                margin-right: 10px;

                margin-top: 10px;

                float: left;

                border: 1px solid #b6b6b6;

                -moz-border-radius: 20px;

                -webkit-border-radius: 20px;

                border-radius: 20px;

                -moz-background-clip: padding;

                -webkit-background-clip: padding-box;

                background-clip: padding-box;

                background-color: #ebebeb;

                -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);

                -webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);

                box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);

                background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiI HByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0 ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwM mUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+Cjx zdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZ XQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNTElIiB zdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9I iNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDY iIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9I jEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);

                background-image: -moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);

                background-image: -o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);

                background-image: -webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);

                background-image: linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);

                overflow: hidden;

      }

      </style>

      </head>

       

       

      <body>

      </body>

      </html>

        • 1. Re: Custom CSS Is Crashing Adobe Edge Animate
          resdesign Adobe Community Professional & MVP

          You could use the styles inside Edge Animate directly in compositionReady. If you have an earlier version of edge for the gradient do:

          For example:

          sym.$('Stage').css({

           

            'background-image': '-moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',

                    'background-image': '-o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',

                   ' background-image': '-webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',

                    'background-image': 'linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)'

          });

           

           

          You can add the other properties  between the {} with the same format:

            'propertyName':'value',

           

          Newer versions of Animate have gradient from color panel.

          1 person found this helpful
          • 2. Re: Custom CSS Is Crashing Adobe Edge Animate
            neohtom Level 1

            Thank you, for some reason I hadn't even noticed that there was a gradient tool right next to the color selection tool, lol. I thought that was an option to make the background color of a shape transparent or something. Previously I had been buidling more complex CSS gradients and other styles in Photoshop, then exporting the CSS markup into Dreamweaver, but it is simple enought to just do it here right within Edge Animat

            • 3. Re: Custom CSS Is Crashing Adobe Edge Animate
              resdesign Adobe Community Professional & MVP

              Glad that my mentioning of the gradient in the color panel was helpful to you and maybe it will be for some users that were also used to the older version and did not notice the gradient addition!

              1 person found this helpful