Edge Animate CC :: Multiple Compositions On A Page / First Comp Stops Playing
Dec 13, 2013
I have two compositions on a page and I identify them within the AdobeEdge.bootstrapCallback. As soon as the user scrolls to the first animation I want to start it with an external call (compId.play()). If this is the only composition on the page it does work correctly. But as soon as the second one is added to the page it doesn't play at all. If I trigger the first animation via the console (e.g. compId.play(1000)) the animation jumps to the 1000 ms mark but then it stops immediately and doesn't play on.
i am using this code for rotate multiple compositions, :
[URL]
my questions is is there any way to start my first comp, when it finish , in the same div play vimeo with autoplay and when it finish , start a third composition ?
Say there are 4 compositions in an html file. Is it possible to create a few navigation buttons in the html file, so that when a 3rd button is clicked, the animation jumps to the 3rd animation. Something like JQuery slideshow, but the difference is, each composition is animated instead of a static image.
I'm trying to make the same artwork run on both iOS and Android devices. Each project needs to be 165% bigger for Android how would I go about doing this. I'm using InDesign to DPS for iOS and a bespoke app for Android.
I start with several items on the stage, each an iteration of the same symbol. When I click on one, it performs an opening animation, then pauses. When I click on another, the first symbol un-pauses on its timeline, animating back to original position, while the second one I clicked plays its opening animation till its pause. Each of the symbols can tell the already deployed symbol to "play itself off."I'm sure this was done in Flash all the time, and there's a Javascript solution.
var a = new Audio(); a.src = "xxx.mp3"; //.ogg if IE a.play();
It works on different browsers including IE, firefox and chrome, but have no sound on Safari. I tried Safari 5.1 on PC and on iPod 4.3.3. I tried .wav, .ogg, .mp3.
I have created an animation where the objects move left to right.Is there a simple way of 'flipping' the timeline so that the animation effectively plays in reverse, rather than redoing the animation altogether?
I have multiple pieces on animation elements on my site. I'd like the animations to play when the user has scrolled to that position on the page and not beforehand. Right now, page loads, user is at the top of the page and all animations load and start playing. By the time I scroll down, the animations have ended.
I have two symbols nested. On mouse over, the first symbol saturates the image, and moves it down. The second symbol makes the image cycle through three pictures. On mouse off, the slideshow stops, the image desaturates and moves up. This works really good!
I have a button below it, that when pressed, starts the timeline of the first symbol (saturates the image, and moves it down). This works great...but when I hover over the image, (after clicking the button), it snaps back up, and is desaturated. I'm not sure why it does that...I want the image to stay where it is!
I have started to work on an animation which will work as a splash-screen before the users see the actual site. (Yes I know... but the client wants it like this...)
The problem I have now is that the animation plays after a few seconds and that during these seconds it shows the content of the website. Besides that I still find it pretty difficult to actually position the animation the way I want.
I am using a plug-in for wordpress.
I tried fixing this with a pre-loader but this is also too slow. Is there any way I can force the animation to play sooner or to make sure they can't see the content before the animation has played?
I created this website for a client and it can be viewed at Uscantravel.com. However being in the SEO phase of the site, the publish for Static HTML to make the website search friendly turns off the animated pop-ups and links that are layered within symbols with additional animations. It works fine when I save the .html file and upload that, but the published file for static alters the website animations when uploaded.
Can I somehow use the copy and paste the Div tags into the workable .html file to make search friendly, or am I missing something?
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).
1. crolling like where you have buttons for example or press on a navigation bar tab, then it goes to that specific pace of the page, for a one page website, for example some sites you press on contacts and gose down to the bottom of the page where the contacts place is located, not opening a new link.
2.Second, navigation bar, where it fallows the scroll as it gose down, like for example when it is html the object is fixed to the top, and when you scroll down it will fallow it it,
3.I need Parallex scrolling where you can have the timeline or animations run while you scroll in the meantime and have animation running all the time, for example the infographic site where the bees are fluying but still have seperate animations while you scroll
4.I would also like to ask if like looping each animations sperately, not looping the whole timeline, can it be possible to loop an animation while you have all the interactivity witht he site like looping seperately all the time, without interfeering with all the other animation
5.I also are wondering if you can create multiple pages on one animate project, like multiple pages with html
I just moved on to edge animate from html, and html was also beirf learn for me and mostly i was doing design work, and i thought getting out of graphic river and moving on the theme forest.
I want also all the five things to work on one aimate project.
play "SYMBOL_2" - "DIV_ANIMATION_1" - "ANIMATION_1_START" from within "SYMBOL1" - "DIV_PLAY" with the mouseup command
URL....I know that i can sym.getComposition().getStage().getSymbol("div_animation_1").play(); from within "div_play" but how do i access a point on the timeline and play from there...
From the image above you can see that "jquery" loaded twice @ 91kb = 181kbedge 1.5 loaded twice @ 102kb = 204kb aswell as the edge and edge actions files loaded twice and if i boot strap comps together the images are loaded multiple times aswell
I am animating comps in After Effects CS6, and I'm quickly moving objects across the screen using positioning keyframes and changing size using scaling keyframes. Most of the time it works great; but sometimes the motion blur effect keeps appearing *after* the object has stopped moving. Not just for a second -- but forever. It appears correct when scrubbing on the timeline, but when I render the final output movie, a non-moving object sometimes has motion blur all over it.
Sometimes I can fix it by un-parenting some layers inside the comp... other times it doesn't fix it. Sometimes I just delete it and start over and it works. Seems more like a bug then something I'm doing wrong.
I also tried on my Mac Pro tower and Macbook Pro laptop in case it was a graphics card issue; it isn't, the exact same problem manifests itself in both areas. I did just discover that turning continuous raster OFF does seem to fix the problem--but then my vector images are blurry when I zoom in... and that again sounds more like a bug, not like an incorrect setting.
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.
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.
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" -->
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.
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 ?
he problem im having is that the google map will not start at the target address when I place the code for it in creationcomplete. It only loads properly when I place the code in a trigger on the timeline . Although it loads slow when in a trigger.This is the code im using in the creationcomplete and in the trigger.
this is what it looks like when I place the code in creation complete..you see the map is thier but it doesnt start at the target. It doesnt start at the right address..This is what the map looks like when I place it in a trigger on the timeline.you see it loads correctly on the target address.
This is a tricky one, but it may just be that I don't understand the syntax,
Situation:I have an Edge Animate composition that is acting as an interface and container into which other content is embedded using an iFrame. I have several functions in Stage > creationComplete, and for one of the embedded content pieces, I want to include a button that calls one of the Edge functions.
Challenge: I have read about referencing elements within Edge when it is the Edge file that is embedded on an HTML page, but I cannot figure out how to reference Edge in the reverse.
I have tried these options where headerselect(page) is my function:
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]....
I am trying to create a page in Adobe Edge that loads a video without any controls (play, slider bar, volume, full screen) and then displays a replay button after the video finishes which will start it from the beginning.
Currently I am able to load the video file and have it play to the end and stop, but I can't seem to get a replay button working. I also can't find a way to disable controls on the video so they do not show.
Here is the code I am using to load the video:
// insert code to be run when the composition is fully loaded here $("#Stage").css("margin","auto") sym.stop();
[Code]....
As you can see, I tried a few ways of disabling the controls, and I also tried adding the replay function to the button itself, but neither of those worked. controlling the video control display and replay function in Adobe Edge would be very useful.
I have create a small Edge Animate animation that I'm trying to add to our home page. After getting everything running and working properly in IE9+, Chrome, Firefox and Safari I moved it from the development environment to our live site. Then I viewed it on an older machine running IE8 and the down level stage worked great, but it disabled a jquery image slider and a little custom jquery script I wrote to polite load an embedded youtube video. The only cusomization I did to the edge files was to remove the loader for the included version of JQuery so that it would run the on I call from Google instead. This prevent intial conflicts between already existing jquery elements on the page.
