Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all 9897 articles
Browse latest View live

Loading different banners into html file depending on screen width? (Responsive)

$
0
0

I have a html file that has my banner in it. I call my banner into the html file with this script in the head section: <script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

 

I also have a second banner called banner2. So all I have to do to switch the banners in my html file is put a 2 after the word banner in the script above ^ because they use the same resources.

 

Now im trying to get it to change from banner to banner2 when screen width is 1200 or less.

 

I was using this code but it doesn't seem to be working:

 

<script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

   

<script type="text/javascript" charset="utf-8" media="screen and (max-device-width: 1200px)" src="banner2_edgePreload.js"></script>

 

Any ideas on how I can get this to work?

 

Thanks!


How to create and call custom functions on symbols?

$
0
0

It is pretty clear how to assign mouse and timeline events on symbols, but I can't find any examples of creating a custom function on a symbol, and then calling it from the stage or another symbol. I can make this work wth time-based triggers, but I'd like to just call a function like... sym.getSymbol('manager').doSomethingCustom();

 

Putting stuff in the onCreationComplete for the symbol like:

 

function doSomethingCustom(){

     console.log('Custom stuff happening');

}

 

And then calling in from the stage like:

sym.getSymbol('manager').doSomethingCustom();

 

... just nets a "Timeline error" (these are a b*tch to debug, BTW.)

 

So how is this done in Edge compatible syntax?

Monthly report switcher. Help needed.

$
0
0

I'm building a content switcher with 3 buttons. Each button corresponds to 5 objects which change in size upon click of the button. When I click the buttons in order it works fine, however if I click on "3" and then click on "2" the animation resets and plays button "1" animation then stops at button "2" animation.  How can i keep it from resetting? and smoothly go back to button "2" and "1"

 

Hello and thanks for helping me out.

 

please view the link and let me know what you think.

 

Interactive UI Problem - YouTube

 

Im an html,  css coder  but not very good at java yet.

i tried building this using css  animation and transition property but i haven't figured it out yet.

 

mario salazar

 

 

mario salazar (to Devendar_kumar)2 days ago

 

 

<html><head><style></style>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <title>Untitled</title>

<!--Adobe Edge Runtime-->

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <script src="edge_includes/jquery-2.0.3.min.js"></script><script src="edge_includes/edge.4.0.1.min.js"></script><script src="switcher_edge.js"></script><script src="switcher_edgeActions.js"></script><script type="text/javascript" charset="utf-8" src="switcher_edgePreload.js"></script>

    <style>

        .edgeLoad-EDGE-692306837 { visibility:hidden; }

    </style>

<!--Adobe Edge Runtime End-->

 

 

</head>

<body style="margin: 0px; padding: 0px;">

  <div id="Stage" class="EDGE-692306837" style="position: relative; -webkit-transform: translateZ(0px); width: 600px; height: 400px; overflow: hidden; background-color: rgb(255, 255, 255);">

  <div id="Stage_designer1" class="Stage_designer1_id" style="position: absolute; margin: 0px; left: 32px; top: 37px; width: 101px; height: 57px; right: auto; bottom: auto; cursor: pointer; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_designer2" class="Stage_designer2_id" style="position: absolute; margin: 0px; left: 32px; top: 109px; width: 101px; height: 57px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_designer3" class="Stage_designer3_id" style="position: absolute; margin: 0px; left: 32px; top: 186px; width: 101px; height: 57px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy2" class="Stage_RectangleCopy2_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(188px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(188px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy3" class="Stage_RectangleCopy3_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(227px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(227px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy4" class="Stage_RectangleCopy4_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(270px, 247px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(270px, 247px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div></div>

 

 

</body></html>

 

--------------------------------------------EDGE CODE BELOW---------------------------------------------

/***********************

* Adobe Edge Animate Composition Actions

*

* Edit this file with caution, being careful to preserve

* function signatures and comments starting with 'Edge' to maintain the

* ability to interact with these actions from within Adobe Edge Animate

*

***********************/

(function($, Edge, compId){

var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

 

 

   //Edge symbol: 'stage'

   (function(symbolName) {

    

    

      Symbol.bindElementAction(compId, symbolName, "${_designer1}", "click", function(sym, e) {

         // insert code for mouse click here

         sym.play("designer1")

 

 

      });

      //Edge binding end

 

 

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1250, function(sym, e) {

         // insert code here

         sym.stop();

 

 

      });

      //Edge binding end

 

 

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {

         // insert code here

         sym.stop();

 

 

      });

      //Edge binding end

 

 

      Symbol.bindElementAction(compId, symbolName, "${_designer2}", "click", function(sym, e) {

         // insert code for mouse click here

         sym.play("designer2")

 

 

      });

      //Edge binding end

 

 

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1750, function(sym, e) {

         // insert code here

         sym.stop();

 

 

      });

      //Edge binding end

 

 

      Symbol.bindElementAction(compId, symbolName, "${_designer3}", "click", function(sym, e) {

         // insert code for mouse click here

         sym.play("designer3")

 

 

      });

      //Edge binding end

 

 

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2250, function(sym, e) {

         // insert code here

         sym.stop();

 

 

      });

      //Edge binding end

 

 

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) {

         // insert code here

      });

      //Edge binding end

 

 

   })("stage");

   //Edge symbol end:'stage'

 

 

})(jQuery, AdobeEdge, "EDGE-692306837");

 

 

THANKS! once again.

 

Reply

My animation will not show up, only the preloader... why?

Text on artboard ends up different in preview

$
0
0

Often when I write a text in a textbox on the artboard it doesn´t show correct in preview. If I have for example five words on the first line in a textbox, it might end up with the fifth word jumping down one line in preview, resulting in a domino effect with other words jumping up or down as well.

 

Have I missed something?

Edge Animate & Captivate 8 Javascript /HTML5

$
0
0

I am trying to control a Captivate timeline using Javascript called from an Edge Animate .OAM, Does anyone have any clue as to what I would need to call to access the Captivate timeline?

 

Just as an example, I have tried using the following code on a click function in Edge Animate to bring back the current time with no luck...

 

varcp = document.Captivate;

alert(cp.cpEIGetValue("m_VarHandle.cpInfoCurrentTime"));

 

So just to clarify, I added this code to a click function in Animate, published it as a .OAM, added it into Captivate 8 as a HTML5 animation, then tested in HTML5 browser.

 

Any help or information would be greatly appreciated!

 

John.

How to fix text size while rescaling in browser

$
0
0

Hi everyone !

 

As the title says, I have a problem with the text size.

My project is "responsive" with scaling option, and except the blurry effect in diferent browsers while the size changes, it's good.

 

But, the text size in paragraphs increase/decrease too. I'd like to know if it possible to fix the size of a text element in these responsive layout ?

I would say it isn't, because it seems that the responsive effect works on the whole project.

 

Am I right or there's a solution ?

 

Thanks !

Animation fluent in IE and Firefox but not in google Chrome

$
0
0

Hey, I built a simple animation just for testing purposes. Here you have the files: http://workupload.com/file/G5D7oc2V

Tried to rebuild this effect: Professor Cloud

 

I think I'm on the right way but this animation is very slow in chrome. So I don't need that... ;-(

Any idea what is wrong with my file?


How to include an external jQuery together with the HTML code in my Edge composition?

$
0
0

Hi! I'm trying to include an external jQuery (cube caousel) script into my Adobe Edge composition. I think I know how to call the jQuery files by yepnope but I'm unsure how to "translate/convert" the HTML parts on the sample page into my Edge composition. The sample page is pretty straight forward (please find the code below). I want to build up the same application but within my Edge composition i.e.affect the images in the comp in the very same 3D manner. Could you please give me a hint how to make the jQuery script affect my images within the comp instead of having them outside Edge as HTML code on the HTML-page.

 

Here is the code on sample page;

------------------------------------------------------------------------

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>

  <meta content="charset=utf-8">

  <title>ImpulseSlider Demo</title>

  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

  <link rel="stylesheet" href="css/impulseslider.css" type="text/css" media="screen" />

</head>

<body>

 

<div id="cubeCarousel">

    <div id="cubeSpinner">

        <div class="face one">

             <img class="img_slider active" src="img/black.jpg">

        </div>

        <div class="face two">

            <img class="img_slider" src="img/blue.jpg">

        </div>

        <div class="face three">

            <img class="img_slider" src="img/purple.jpg">

        </div>

        <div class="face four">

            <img class="img_slider" src="img/red.jpg">

        </div>

    </div>

        <div class="nav">

            <div class="left arrow"></div>

            <div class="right arrow"></div>

        </div>

</div>

 

<script src="../jquery-1.8.2.min.js"></script>

<script src="../jquery.impulse.slider-0.3.js"></script>

<script type="text/javascript">

    $(window).load(function(){

      $('#cubeSpinner').impulseslider({

            height: 400,

            width: 400,

          depth:200,

          perspective:800

      });

    });

  </script>

 

</body>

</html>

 

-----------------------------------------

 

Very much appriciate if I could have your advice. Best regards,

Bengt Melin

Covert/save/export Adobe Edge animation as an animated gif?

$
0
0

Does anyone know a way to convert/save/export an Adobe Edge animation file into an animated gif. I've created a simple logo animation and the client now wants it as a animated gif to add to there email signature. Is this possible or an I going to have to recreate it in another programme

How do you tag enabling an Edge Animate file?

$
0
0

I have created a number of animations in Edge Animate, which the client is happy with. They now want me to make it tag enabled so they can track the number of people that click on the animations. In Flash I've been given a piece of code that seems to work fine, but Edge Animate generates the html files as well as the .js files. What code do I put where?

simple sortable jquery list

$
0
0

I have a symbol called list_1, inside the symbol are three groups, each group contains a rectangle and a text box labelling them item 1, item 2, item 3. I want these rectangles to be sortable like the default function on the jquery page Sortable | jQuery UI using the code below I am able to drag them but not sort them. Any help or if anyone has made a simple example already I would very much appreciate it.

 

yepnope(
     {
       nope:['js/jquery-ui.min.js'],
       complete: init
     }
);

 

function init() {
     sym.$('list_1').sortable();
}

JavaScript syntax error preventing animation [Mismatched braces]

$
0
0

I am creating a webpage in Animate, and everything was going fine until the animation quit working.  I even had code for the page to center, and it all just came undone.  I took a look at the code and noticed:

 

Syntax error at line 132:  Mismatched braces,

 

This is what is at line 132:

 

})(jQuery, AdobeEdge, "EDGE-16966832");

 

Nothing on this line has ever changed, and this is put in by Animate, not me.  Has anyone run in to this error before?

 

Same deal in another section, Stage:

 

Syntax error at line 101 on "Stage""Mismatched braces

 

This is what is at line 101:

 

});

 

The thing is, this is the same code written on other Animate files.  I looked to compare, and it is all the same.  So what is causing the error here?

 

Thanks

Infinite swiper slider

Link to page, not open new window

$
0
0

Hi there

 

in Edge, how do I code to link to a page, without opening a new browser window (but also without using _self which caused problems by trying to open the link in the animation window).

 

Thanks

Simon


Responsive animation with background color that spans 100%

$
0
0

I've create a responsive animation with simple background colors. I'd loe for the background colors to bleed 100%, but can not seem to find a way to do it easily. I've actually had to layer two animations on top of each other and just js. (this site is in development: http://newsite.insightpd.com/what-we-do/ ) I'd love for the red and gray to go 100% while still being centered and staying responsive. What am I missing? Any advice would be greatly appreciated.


PS, I'm using the edge plugin for wordpress and am just uploading the aom file.

 

Thanks in advance for your help!

"Uncompressed" .js file for *._edgePreload.js

$
0
0

Is there a way to get “uncompressed” .js file (javascript) for *_edgePreload.js?


And how would one export it from Adobe Edge Animate?


Need urgent help...this is stopping the launch of our website.


Thanks!


Ibrahim

HELP! Edge Animate: Mismatched Braces error syntax

$
0
0

Please someone help. I'm having a horrible time with this and it's driving me insane. This error has the timeline just play everything through and ignores all the triggers and commands I've put into it.

 

I've gone through other forums and it seems this error is not an easy "here you go" fix. If there is someone I could upload the files to check out that'd be great.  My project is due tomorrow and this error has totally f*cked up my deadline.

 

Screen Shot 2014-09-15 at 11.19.55 AM.png

OT: Blog article on the new Actions panel in Edge Animate

Resizing sprite sheets/editing number of rows and columns

$
0
0

Hi,

 

I've got a question: Is there any way to resize sprite sheets already being used in symbols without having to go back into those symbols and edit their Background Image width and height?  Is there a way to work with sprite sheets in AE that allows you to change the size of those sprite sheets without it messing up the appearance of the symbols where those sprite sheets are the source image?

 

Similarly, is there a way to edit the number of rows and columns in a sprite sheet that's already been imported as a symbol? Basically, my question is that I'm creating a large number of animations and I want to know if I'll be able to add additional cells to the sprite sheets later on, if need be. Seems that having that kind of flexibility would be very useful to have, but I haven't found any indication that this is possible.

 

Thanks,

 

Adam

Viewing all 9897 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>