Loading JSON in Edge issues animate

Similar Questions

• Length Variable TEXT of JSON in edge Animation animate [v 2014.1.1]

  Hi all..

  I am currently conversion HTML & CSS & JAVASCRIPT code in Edge animate so I can have more fun with my little project, essentially the re-design it in Adobe Edge

  Part Composition edge information displays on the screen that is seized with a JSON encoded a PHP file, these recovered data is variable in length... It could be 10 characters in length or width of 30 characters. According to the total length of the characters I choose the time to animate the text from left to right (as a framing box)...

  It is important for me to explain here what to expect from this animation.

  Example:

  We have a wide rectangle of 100PX. If the json data is less than the width of the rectangle, then then the text should be left justified and stationary.

  If the json data is greater than the width of the rectangle then the animation should proceed as follows.

  START: justify text on the left and hide the text to the right which goes beyond the edge of the right side of the rectange.

  ANIMATE: move text to the left until the end of the text reaches the right side of the rectangle, then move to the position of starting with the loop.

  At the time I had the project in HTML & CSS & JAVASCRIPT format I lower the JSON data encoded in DIVs, then switch the DIV class according to the then the length of the data. If the width of parents ("outerDiv") has been less then data then the CSS .animate class would take over, otherwise, it would default to CSS .noAnimate

  
  

  This is how it was done.

  1: JavaScript

  
  

  It's my JavaScript that traverses the coded the data PHP JSON results. (I've omitted many of the results in the code below to make it easier to read)
  

  function playlistupdate (list)
  {
  for (var i = 0 ; i != list.dbdata.length ; i++)
      {
          var song = list.dbdata[i];
     
      }
  {
      $("#list0title").html(list.dbdata[0].title);
  
  
  
  
  

  This part should check the width of the PARENT ("outer div") and see if it is LESS than the width of the JSON data. If it was it would use the .animate instead of .noAnimate class

  $('.noAnimate').each(function() {
      $(this).toggleClass('animate', $(this).parent().width() < $(this).width());
  });
  
  
  
  
  

  
  

  2: the CSS

  
  

  No animation
  

  Here's the CSS if the data is less than the parent DIV width...
  

  .noAnimate {
      position:absolute;
      white-space:nowrap;
      overflow: hidden;
  }
  
  
  
  
  

  Animation

  Here's the CSS if the data is greater than the width of the parent DIV ... (I omitted the other browser compatibility to make it easier to read)

  .animate {
      position:absolute;
      white-space:nowrap;
      overflow: hidden;
      -moz-animation: slidein 3s infinite linear alternate 1s;
      -webkit-animation: slidein 3s infinite linear alternate 1s;
      -o-animation: slidein 3s infinite linear alternate 1s;
      animation: slidein 3s infinite linear alternate 1s;
  }
  
  @-moz-keyframes slidein {
      from {
          -moz-transform:translateX(0);
      }
      to {
          -moz-transform:translateX(-100%) translateX(254px);  /* -100% + parent width */
      }
  }
  
  
  
  
  

  Stuff pretty basic and useful if someone wants to use it...

  3: the problem

  
  

  Now I face on the issues to the JSON data alive in my Composition of edge.

  As I understand it, animate Dashboard will not allow animations out of JQuery so the foregoing CSS is basically usless.

  
  

  While I have no problem taking a simple fade in for my JSON like data below (stored in the symbol "nowPlay" where I put an opacity of the keyframe to 0% at zero seconds at 100% to 2 seconds im stumped as how to start to be converted to usable JQUERY )

  
  

  for (var i = 0 ; i != list.dbdata.length ; i++)
      {
          var song = list.dbdata[i];
      }
  {
      sym.getSymbol("nowPlay").$("list0TitleContainer").html(list.dbdata[0].title);
      sym.getSymbol("nowPlay").play();
  ...continued
  
  
  
  
  

  
  

  It is now well above my skill level and please im extremly clued coders out there can help me make the transition.

  
  

  The final result if not completely understood is that if the width of the text is less than outside container then animate not from left to right... Otherwise, if the text is larger, then the width of the outer div then animate from left to right.
  

  
  

  It is a personal project.
  

  
  

  I know its been a long read... If anyone can help shed some light please do... If not I hope that some of the above CSS could be useful to people.

  
  

  
  

  Thank you very much... Justin.
  

  Now, I apply the effect of text to symbols: Symbols.zip - Box effect

  That it would be easier to sym.createChildSymbol ();

• Edge issues animate CC (3.0.0.322.27519)

  Hello

  I've recently updated onboard animate CC (3.0.0.322.27519) and I am now face several questions.

  First of all, many of my projects are no longer works. Some of the values of my symbols were changed to extreme low values (-7000 something for the width and height as well as x, y coordinates). When I try to remedy, I get this error message:

  "An error has occurred. Please save you work and restart Adobe Edge animate. »

  Second, and more important again, I recreated a project in its entirety to work around this problem, it downloaded on my site, and now some items on page 1 of 2 problems:

  1. The order of z-index changes when the size of the window hits a certain browser width. This causes the content hidden or obscured.
  2. Some visible elements are now invisible. I guess that this related to the opacity settings, but not on all the items that use this property, only a handful of selection. The strangest thing about it is that it is only when looking at the site published online. When I have preview locally, or loaded content locally, it loads correctly.

  I would appreciate a quick response to my question, I am slot from pistol to complete my project.

  Thank you!

  I was able to solve the main problems here on my own.

• Effect of mixing on the edge Modes animate

  Hello

  I was wondering if it is possible to apply the blending in edge mode animate.

  Like having 2 divs mixture, a green and red light on a black background.

  Something like color Dodge effect and operation of the lights in a dark room.

  Too much?

  Can I import plug-ins?

  
  

  
  

  Thank you.

  Hello

  You can load an external stylesheet using yepnope. But there is a constraint, you must add ! important.

  As you said, you can use c for the style, but you can also use code.

• When I insert my file "adobe" edge oam animate in must I get a rectangular white flash at the head of the animation

  When I insert my file "adobe" edge oam animate in must get a rectangular white flash at the head of the animation?

  Hello

  I would appreciate if you could share the screenshots of the Design view and mode of preview for better understanding of the issue.

  You can also create a temp BC to us URL.

  Concerning

  Vivek

• Control edge file animate OAM with the buttons play/pause of Captivate on the skin.

  Hello world

  I worked on a project where I mix a variety of objects and animations.  I do animations animate on board.  The problem I have is that when the user clicks the button pause on the Captivate playback controls, the oam file do not pause.  I found descriptions of how I can make an animation to play/pause the Captivate timeline button on board, but I can't find anything on the use of the Captivate pause button to control the Edge file animate.  Discussions only that I managed to find on that seem to be the answer.  Someone had a bit of luck with this question?

  Any advice would be appreciated.

  Thank you

  Randy

  OK, it's a bit hacky, but it works quite to control the main timeline object in a file of edge of Cape Town, where the Edge file has been imported to Cap 9 as a Web (oam) object. I went seeking answers same like you and came from vacuum, then start to tinker myself and came across the following method.

  Let's use window.postMessage to send a string between Cape document window and document edge iframe window then react accordingly. You can learn more about postMessage accepted battery answer here: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy

  In your dashboard file click the support of Actions for the stage object in the timeline and select the compositionReady event. Paste this code into the text window:

  addEventListener for Chrome, attachEvent for IE

  window.addEventListener ('message', receivedFromCaptivate, false);

  window.attachEvent ('onmessage', receivedFromCaptivate);

  function receivedFromCaptivate (event) {}

  switch (event.data) {}

  case "play":

  SYM. Play();

  break;

  case "pause":

  SYM. Stop();

  break;

  }

  }

  Save the file and publish it as an oam, then import the OLS in a slide of Cap, as you normally would. Now, to put in place things of the CAP. Here is a visual aid for the rest of the explanation...

  

  In the PAC file select the control that you use to start playing the chronology of the edge (in the example above the "slide4Play"), select the checkbox 'Use as button' in the properties on the right, select the "Actions" tab, then to the drop-down list for 'Success' choose "Execute advanced Actions." Click the folder next to the selection of Script control and advanced Actions dialog box should appear. Name your action something (for example, "playEdgeSlide4"), then click the 'Add' in the grey bar to add a new action in the queue. In the drop down "Select Action"... ", choose"execute Javascript. "In the drop down menu"select the window... ". ", choose"current ". Then click on the 'Script_Window' button to bring up a window of text Javascript crap. In this window, you can paste this:

  try {}

  $("iframe") [0].contentWindow.postMessage ("play", "*");

  } catch (e) {}

  Console.log (e.message);

  }

  Select 'OK' to close the window of text Javascript crap, then click the 'Update Action' button to save your new action. Now let's do the same for break action - select the control that you use to pause, go through the steps above, the name of the action, implement advanced action in the same way and in the Javascript crap text window, paste the following text:

  try {}

  $("iframe") [0].contentWindow.postMessage ("break", "*");

  } catch (e) {}

  Console.log (e.message);

  }

  Cap incorporates the Edge file in an iframe on the page that has its own document window. In order to communicate between base ceiling windows and the iframe, we use the postMessage call. So when you hit your button Pause/Play in Cape Town, he publishes an event to the function that gets recorded in the iframe on board. And in the event.data is the string we send above the Cap base window in the function postMessage ('play' or 'pause'). We use a simple switch to react to the data string, stop or have fun with the main symbol of the scene at the edge (sym.play(1000) (), sym.stop ()).

  I hope this helps!

• Adding Adobe Edge animation animate CC 2015 to a Facebook post?

  Where can I find information on how to add an Adobe Edge animation animate CC 2015 to a Facebook post? I tried searching but continue to pour in white. Thanks for any help.

  If you have any interactivity so you can make a recording of the screen and display the video.

• Problemas con archivos edge traidos animate

  Saludos

  Tengo este problema sale me cuando estaba Muse an edge archivo animate

  Now if borro este enlace works normal

  as tengo hacer para Québec h. los archivos made in edge animate... edge en ojo animate public lo para that muse lo can music y en muse use the put option...

  Espero comentarios

  

  Please try the suggestion in this post;

  https://forums.Adobe.com/thread/1394674?TSTART=0

  Thank you

  Sanjit

• How will I know if my edge compositions animate will scale upwards or downwards to adjust the resolution of each mobile phone platform? iPhone 3s, 4, 4, 5 and 5 have all different resolutions. Can I use PNG or svg?

  I want to use Edge animate to create native application in PhoneGap Build. How will I know if my edge compositions animate will scale upwards or downwards to adjust the resolution of each mobile phone platform? iPhone 3s, 4, 4, 5 and 5 have all different resolutions. And I use PNG or svg?

  If you are using the sensitive scale that it will permanently scale.

  To view best practices regarding graphics

  M lively help | Best practices for graphics in Adobe Edge animate

• Greensock SplitText inside the Edge solution animate?

  Anyone who is willing to share their Greensock SplitText inside the Edge solution animate? Thank you

  I tried the following code:

  var only = sym.$("Heart-drawn-ffcc00-31percent");

  TweenMax.to (only, 3, {rotationY: 360, repeat:-1, repeatDelay:1, transformOrigin: "Center 90% - 160"})

  Gets an element. For example,.

  var element = sym.$("Text2");

  Element.Hide ();

  var quote e-quote = sym.$("quote");

  var mySplitText = new SplitText ("quote e-quote", {type: "tanks, the words"});

  TL = new TimelineMax ({repeat:-1, yoyo: true, repeatDelay:2});})

  TweenLite.set ("e-quote quote", {css: {perspective: 500, perspectiveOrigin: '50% 50% ', transformStyle: 'hunt kept-3d'}});

  numChars var = mySplitText.chars.length;

  for (var i = 0; i < numChars; i ++) {}

  TL.from (mySplitText.chars [i], 0.8, {css: {y: getRandomInt(-75, 75) x: getRandomInt (-150, 150), rotation: getRandomInt (0, 720), autoAlpha: 0}, ease:Back.easeOut}, I * 0.02, "dropIn");

  }

  tl.staggerTo (mySplitText.chars, 4, {css: {transformOrigin: "' 50% 50%-30px", rotationY:-360, rotationX:360, rotation: 360 "}, ease:Elastic.easeInOut}, 0.02, ' += 1" ');

  function getRandomInt (min, max) {}

  return Math.floor (Math.random () * (max - min + 1)) + min;

  }

  end of the code I've tried

  The first two lines operate by themselves, & after you have added the rest. Other lines do not work, and they do not work after that I noticed on the 2 first lines. I put all this in a trigger to 0 (zero) on the timeline - it worked for me in the past. I have other items dashboard animate things to do and I have a trigger at the end of the animation that plays the 01 (just after the zero) - I found that the closure and the outbreak of the first two lines code stops the animation. "quote" is the name of a text edge element animate.  In the above code, I changed "#quote" to "quote", other than that of e that is - to a quote, I think it is standard code of Greesock.

  I can miss this css class or the command translate3d:

  {#quote}

  -webkit-transform: translate3d (0, 0, 0);

  font-size: 44px;

  line-height: 50px;

  Color: #000000;

  z-index:-1;

  pointer-events: none;

  }

  Thank you

  Bob

  Yes, I did

  so, if your text block is named text1a...

  var Tween = sym.$("text1a");

  var split = new SplitText (tween, {type: "tanks, the words"});

  TweenMax.staggerFrom (split.chars, 1, {delay: 1, opacity: 0, x: 150, ease:Back.easeOut}, 0.04);

• .Edge file made with Adobe Edge animate 1.0 work and load in Adobe Edge animate 3.0?

  I got the beta version of Adobe Edge animate and when it came out I was able to download free version 1.0, and it is still installed on my computer today.

  The problem is I get a new computer, and I wonder if my old projects I've done with this version of Adobe Edge will work correctly if I buy the edge animate CC?

  Edge animate CC does support backwards compatibility all the way back to 1.0?

  Hello

  Also, sometimes it depends on the functionality as well. It is deprecated in the latest version, then you might get error or warning.

  Please download the trial version of edge animate CC 2014 and test your project.

  https://creative.Adobe.com/products/download/animate

  Kind regards

  Devendra

• Edge OAM animate file is blurred in Muse when seen in the browser

  When I place the animate edge in Muse .oam file, the graphic animated or crispy clear, but when I saw in a browser or image previewed in Muse he he seems 'low resolution' and blurred. I can't find any info on this anywhere.

  Everyone knows about this issue or even have a fix?

  Thank you!

  Adobe animate exports to HTML (5) with the help of the technology of the "Canvas" , which works like a flip book of images - indeed - sequenced pixel, instead of the former Adobe Edge animate, who exported completely differently. Continue to use Adobe Edge or switch to the Tumult of Hype (Mac only) If you need a better approach and more user-friendly in the animation...

• Edge 20141 Animate not backward compatible with the 2014,0 documents

  This is a request for Adobe:

  Minor release revisions should not cause incompatibilities of project in .a in project files.

  The update to animate dashboard 20141 (October 2014) cause of trouble in laboratory parameters. My students using 20141 on their personal computers can't open their work on 2014.0. All our lab computers have installed 2014.0. I can understand the incompatibilities of major revision, but minor revisions should be fixes bugs and updates simple and should not affect the created projects * yesterday *.

  It's always frustrating, because we must appeal to our technical support staff any time that a minor bug fix is put up with CC.

  In addressing this issue, how a person would go to update a project .a file to be backward compatible? Edge animate, no option exists to gain back.

  Thanks for any help on this matter.

  There is a work around. Open the file edge.js and replace the number 18 t0 20 online version

  version: "4.0.0",.

  minimumCompatibleVersion: "4.0.0",.

  build: "4.0.0.359."

• Nicescroll with edge using animate

  Hello

  I am a web designer focusing mainly on graphics and I have knowledge of xhtml and css. However, when it comes to Java, jQuery and other stuff like that included in Edge animate what is very I get very lost.

  I have the symbol on the stage, called the 'content' inside this symbol, there is a field of text called "main_text". This text field has overflow set to auto.

  For this "main_text" I load external html whenever I click the link nested inside another symbol using the

  sym.getComposition () .getStage ().getSymbol("content").$("main_text").load ("test.html");

  Now the text is long I want 'main_text' be scrollable. So I downloaded nicescroll, copied in the directory of my project and I call him as soon as to compositionReady

  yepnope({)

  load: "jquery.nicescroll.js."

  complete: function() {}

  sym.getSymbol("content").$("main_text").niceScroll ();

  }

  });

  The HTML file load fine in 'main_text', but no scroll bar is visible and I can't scroll by using the mouse wheel. Does anyone here have experience with nicescroll and Edge animate that can help? Or maybe just take a look at my syntax and tell me what I'm doing wrong? Thank you.

  Thanks guys for all your help I found the solution myself well. I used slimScroll (http://rocha.la/jQuery-slimScroll) and it works perfectly!

  I loaded the file .js, not through yepnope, but through edge CC library and then I put more code in my menu button onClick action:

  sym.getComposition () .getStage ().getSymbol("stred_obsah").$("main_text").slimScroll ({}

  height: '650px. "

  wheelStep: 1.

  railVisible: true

  });

  Works like a charm

• Cannot use edge animation animate in Magento

  Hello

  I am trying to integrate an animation animate Edge to a site Magento 1.7.0.2 based, but it does not work.

  After you declare the myscript_edgePreload.js and loading the page, I see the following errors in firefox:

  TypeError: A is not a function

  [Cap on a mistake]

  ... Symbol.bindTriggerAction (compId, NomSymbole, "Timeline", 0, function(sym,e)}...

  cardboard... ions.js (line 4)

  TypeError: Symbol is not defined

  [Cap on a mistake]

  ... Symbol.bindTriggerAction (compId, NomSymbole, "Timeline", 0, function(sym,e)}...

  I saw messages from the user having problems similar to the help of Magento, but none of them seem to be resolved.

  Could someone point me in the right direction to solve this please?

  Mathias

  I found the cause of the problem: the images in my myscript_edge.js file is not found. This is because the directory of the image is calculated by the script using base URL of the site that ends with index.php.

  One solution is to replace the image directory in the script with the full path to the images directory.

  You will find the variable directory loaded image of the search for "im var =" in the script.

  If anyone knows how to remove the index.php at the end of the base URL adobe edge is used to calculate the path to the images directory, I'd be interested to hear that.