Edge Animate CC :: How To Control Playback Of Animation Based On An Anchor In Web Page
Jul 12, 2013
Need to control playback of the animation based on an anchor in the web page. When the anchor comes into the browser viewport, it would trigger play, pause or stop.
And ... to control the flow/direction of the animation playback based on scroll direction.
The setup:
I would like to have the playback direction for Edge animations placed in a web page, to follow the web Surfer's scrolling direction.
Scrolling down or right, Animation plays forward.
Scrolling up or left, Animation direction plays backwards,
But, that's not all ... I would like to combine the scroll direction sync with ... Anchors
Image if you will:
Multiple Edge animations are placed at various positions on a web page.
Autoplay for each is turned off.
Wish to individually control the playback functions for each animation. - Start - Stop - Pause.
Wish to trigger their playback relative to when an associated anchor (becomes visible / invisible) is inside or outside, of the browser view port.
Sounding complicated?
I put up a web page diagram to illustrate the functions. [URL]....
View 1 Replies
ADVERTISEMENT
Dec 10, 2013
i have a character, i want to control the animation to use left arrow key and right arrow key.
When i press left arrow key the character run animation call. When i press right arrow key character back run animation call. when user don't press any key the character stop animation call.
View 1 Replies
View Related
Jan 9, 2014
how I can control another Edge animation and/or html element of a single page from a custom Edge animated button? For example, I created an animated tabbed buttons in Edge, then I want to animate a different Edge animate once I clicked on a button in the other Edge animation. I want to add multiple Edge animation in one page instead of one big Edge animation. This is partly because the design of the page is done is Muse with the parallax effect.
View 2 Replies
View Related
Jul 23, 2013
I have made an animation in edge, which I have then added into my Muse site. Is there anyway I can make the animation start when I scroll to it within the page.
View 35 Replies
View Related
Apr 13, 2013
I have a main page with a container (named BoxPlay) and a button. And I have an other page (page2) with severals animations on it : animation 1, animation2...
I would like to load the page2 but directly with one of his animations.
Code of the button :
var container = sym.$("BoxPlay");
container.append('<iframe id="currentPageHolder" width="'+container.width()+'" height="'+container.height()+'" src="pages/GallerieHomePage/GallerieHomePage.html" frameborder="0" scrolling="no"></iframe>');
How can I specify to load also animation 1 or animation 2 ?
View 3 Replies
View Related
Jan 20, 2011
I'm trying to animate a moving rope based on simulation data. I know how to import my motion data for individual objects.I've seen lots of tutorials where one uses simulations or soft bodies with IK in order to create a rope. how to use all these features and I want the rope to follow my coordinates exactly. I was hoping I could do something like the following:
1. create points in Maya which correspond to my data points
2. connect the points with a curve
3. loft a circle using the curve as a path in order to make a rope
4. move the points. due to History, the rope position is updated
Is there a way to do something like this in Maya? I've tried, and it looks like ep points do not have key-able channel data, so I can't create animations for them separately. I'm using .mov data file imports to generate x, y, and z motion keys for the points.
View 4 Replies
View Related
Jan 9, 2013
I have come across about a dozen similar discussions, but most have presented solutions that worked in earlier versions of Edge and no longer work.
I am trying to use Edge to build animations that can then be integrated into larger non-Edge projects. I would like to then be able to control the Edge timeline or Edge symbols from elements OUTSIDE of Edge, such as another link or button in the page.
I cannot seem to figure out how to properly reference the Edge stage or symbols.
I have come across several proposed solutions for referencing Edge stage, such as:
var comp = AdobeEdge.getComposition("EDGE-966604542");
var stage = comp.getStage();
var comp = $.Edge.getComposition("EDGE-966604542");
var stage = comp.getStage();
var comp = Edge.getComposition("EDGE-966604542");
var stage = comp.getStage();
and these either DO NOTHING or throw errors about either AdobeEdge or Edge or comp being undefined.
View 7 Replies
View Related
Aug 7, 2013
I'm somewhat new to Edge Animate and I'm trying to incorporate simple animation into a DPS piece that my company has been publishing for the past year. A few questions:
1) Is there a "trick" to getting transparencies to work? I've had zero luck so far and I'm beginning to resign myself to just putting the entire design into the Edge composition as a work around. There must be an easier way? I'm hoping I'm missing something simple and obvious. From my research, I've gleaned that the poster image feature is a major player in all the headaches. Speaking of which, do you have to start over and rebuild a comp everytime you need to publish without a poster?
2) I've noticed that playback is really inconsistant. Most of the time, when I first swipe on a page, the animation won't play at all. Subsequent swipes, and it begins playing fairly consistency.
3) Finally, is there any guidelines for SVG settings used in Edge? I found that many of the vector files I was using in comps were messing w/playback, so I ended up subbing them out for pngs.
View 7 Replies
View Related
Jul 17, 2013
In trying to learn Edge, is there a way to return playback (play from) once an animation is complete within a symbol?
For instance, I have the main timeline that shows a symbol animation on creationcomplete, but when the animation is finished in the symbol and I hide the symbol, the main timeline is no longer playing. What would I need to do to return playback control to resume playback of the main timeline? I have a label I would like to play from on the main timeline, but I have not found a way to call the main timeline from within the symbol.
View 3 Replies
View Related
Apr 4, 2013
I followed the adobe tutorial to manually create an html page in order to have two edge animations on a page but it doesn't work well. The second animation starts but not the first one (I can see the first frame only).
View 1 Replies
View Related
Jul 28, 2013
My Stage is set to 100% w/h. I'd like to center a div, and have it scale based on a percentage of the Stage's size. The div contains animated text and images.
I've seen some similar examples but the Stage always seems to be set to pixels.
View 12 Replies
View Related
Jul 21, 2013
I believe ScrollTop jquery works for scrolling certain number of pixels but how to use it in edge?
View 1 Replies
View Related
Feb 11, 2013
How to do image moving based on mouse movement in adobe edge animate 1.0?Just like drag and drop option in flash
View 3 Replies
View Related
Mar 11, 2014
how could i control audio in edge animate
View 4 Replies
View Related
Jan 24, 2014
I've been experimenting with different ways to control the appearance of my symbols and elements.
I've seen multiple examples where people would add custom styles to the head of the html document created by edge. I've tried this, but no matter how I tweak it, I can't seem to get it to work. I've tried adding it to the existing edge runtime <style> tag, creating my own <style> tag (both before and after the edge runtime) and then adding the CSS into that, but to no avail. I have tried adding the class to both symbols and elements on the stage using both jQuery and that class form field next to the element name. I've also made sure to close out of the project before I add my styles, just in case that was the problem.
I feel like there might be some edge animate terminology/notation thing that I'm missing, because it seems like it should be a pretty straightforward process.
View 1 Replies
View Related
Feb 14, 2013
I am wondering how I could control multiple symbols using classes.
So lets say I have 10 symbols on the Stage - each symbol has a class of 'box'
Using this:
sym.getSymbol('.box').play('lower');
only the first box will animate, not the other 9.
View 9 Replies
View Related
Mar 13, 2014
I have a composition which has two pieces of VO. Each has an associated text block.I want to play the first VO when the first text is clicked. Then, when the VO ends, I want the first text block to fade out, the second to fade in and play the second VO when tapped.
I have the timeline set up with labels to play through the transitions at the end of the first VO. No issues there.I have the audio playing when I click on the text blocks. All good.However, I do not know how to make the timeline wait for the audio clip to end before playing.This is the code for the first text block:
sym.$("RUP01_Nar_1")[0].play();
sym.play('Nar2');
This plays the audio but also plays the timeline instantly (so the text blocks fade from one to the other as soon as the audio starts).
I figure I need some sort of code in between which says, essentially, 'wait until the audio finishes then [play timeline]'. But as much i have searched I cannot find anything to do that.
View 3 Replies
View Related
Jul 28, 2013
I am trying to move a symbol around based on it's x and y coordinates, without using keyframes to actually animate any movement.
Basically what I want to do is have a largish map image inside a symbol, most of which is off stage, with right,left, up and down buttons that slide the map in and out as you mouseover them, thus allowing the user to navigate east, west, north and south, if you see what I mean.
The buttons would move the map symbol around in increments of perhaps 10 or 20 pixels at a time, but it would freeze where it was when you moused out of the button, and begin moving again when you mouseover.
Of course it would be important to fix limits to how far the map symbol could be pushed so that you could only see as far as the edges of the map, and not beyond the limits of the map.
View 2 Replies
View Related
May 12, 2013
I've placed my Edge animation in an iFrame.I would like to be able to trigger the animations in the Edge file, by clicking on links in the parent document.
View 3 Replies
View Related
Aug 30, 2013
if it's possible to control a html5 video in Edge ?For example, I added a html5 video with the video tag and I want the video to play and stop after 20 seconds. Then, plays some animation on my edge timeline. I suppose the video must be controlled with Javascript ?
View 4 Replies
View Related
Jan 23, 2013
I'm trying to use ".createChildSymbol" to bring my symbols from the library to my stage. And in each symbol I have an OUT label, so every time a new symbol is called by a particular button, the last one plays from OUT label and new one appears at the same place. It's all easy for two symbols and I do not need to set any vaiable for them. But I have almost 180 symbols, and a menu of buttons to call them, so every button needs to play the OUT label of the current symbol and also plays the new one and make it as the current one.
sym.test = sym.createChildSymbol("test", "Stage");
sym.getComposition().getStage().setVariable("current", "test");
var current = sym.getComposition().getStage().setVariable("current");
sym.current.getSymbolElement().css({position:'absolute', display:'inline-block', top:167, left:91});
View 14 Replies
View Related
Nov 4, 2013
I have created an animation with Adobe Edge. My site uses Concrete5 and I am pulling in the Edge content into an IFRAME on my home page. I want the animation to play from the start when someone first visits the site, but if during their browser session they navigate back to the home page, I want the animation to only play a shorter segment of frames near the end.
My question is, how do I use cookies to acheive this? I'm new to javascript/jquery.
I've included the following code on compositionReady, (found in another post on this forum) but don't have a clue how to continue...
// insert code to be run when the composition is fully loaded here yepnope( { nope:[ '/js/jquery.cookie.js' ], complete: init } ); function init() { //create your cookie's initial values here } My temp site is here -[URL]
On revisting the homepage, I only want to play from when the green button drops in.
View 3 Replies
View Related
Oct 6, 2013
How to make next page effect with adobe muse or edge animate ? URL...
View 1 Replies
View Related
Jul 7, 2013
There are several elements on the page. When there is one group or element on a page, i find it difficult to select other elements.
i know hiding the element would allow me to select other elements. But I need to see other elements when working on the image.
View 1 Replies
View Related
Oct 12, 2013
I'm trying to centre an image to the centre of the browser using the responsive settings. My problem is that I can centre the image, but as soon as I start to scale upwards or downwards the Logo isn't staying in the middle of the browser.
View 2 Replies
View Related
Feb 28, 2014
how to create awesome landing page in adobe edge animate cc..and awesome circule count town timmer.
View 1 Replies
View Related
Jul 16, 2013
Is there a way to make a menu in Edge Animate so that when you are on a certain page, that page is highlighted on the menu? I want to make it a server side include <!--#include virtual="/menu/included.html" -->
View 1 Replies
View Related
Mar 19, 2013
I have been trying to incorporate a custom cursor on my website. Nothing too exciting, I just want the normal cursor's tip to glow over the page so I designed it and saved it as a png but I am having trouble making it work.
This is an example I have been trying to recreate, but with no luck [URL]....
I can't figure out what I am doing wrong, even when I try to recreate that example, the cursor doesn't show up.
View 6 Replies
View Related
Apr 17, 2014
How do I add animation to Muse? I wish to bring a png file into an existing background.
View 1 Replies
View Related
Oct 20, 2013
I create a child symbol on the stage animate it and store the varible in the window
var infoscreen = sym.createChildSymbol("_01", "stage");
window.infoscreen = infoscreen;
I put a Btn_inside the symbol and want to delete it. But first - I want to fade out the symbol. I dont know how to do this. So the animation has to be complete before delete, but how?
infoscreen.getSymbolElement()
.animate
([code]....
View 4 Replies
View Related
Apr 14, 2013
Is there a way to speed up animation? For example I have 5 sec animation. I want to play it normally (5sec) and play it reverse for 2 sec.
View 5 Replies
View Related
