Movie frame turns black
Scrubbing bar that controls many timelines
Hi all,
Is it possible for a scrubbing bar on the main stage to control the time lines of many symbols?
I'm using this code from Sarah Justine
Create Click and Touch Draggable Scrubbers with Edge Animate CC | sarahjustine.com
var symDur = sym.getSymbol("timelinePlay").getDuration(); // Get the timeline length of timelinePlay. We'll reference this later in the code.
var mySymbol = sym.getSymbol("timelinePlayl"); // Get the symbol timelinePlay. We'll reference this later in the code.
var scrubber = sym.$("scrubber"); // Touch this to scrub the timeline of timelinePlay
var bar = sym.$("bar"); // Bar the scrubber follows
sym.$("mobileHit").hide(); // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise)
var dragme = false; // Set the initial dragme function to false
// Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
sym.$("mobileHit").show(); // Show the extra invisible div to increase the hit region for mobile (hard to grab otherwise)
$(function () {
scrubber.bind("touchstart", function (e) { // Enable the scrib on touchstart
e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired
dragme = true;
});
scrubber.bind("touchend", function () { // Disable the scrubber on touchend
e.preventDefault();
dragme = false;
});
scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove
if (dragme) {
var touch = e.originalEvent.touches[0];
var possibleX = touch.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) - scrubber.width();
var scrubWidth = rightX - leftX;
// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}
if (possibleX > rightX) {
possibleX = rightX;
}
scrubber.offset({
left: possibleX
});
var relativeX = possibleX - leftX;
var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
}
});
})
}
else $(function () {
scrubber.mousedown(function () { // Enable the scrubber on mousedown
dragme = true
})
$(document).mouseup(function () { // Disable the scrubber on mouseup
dragme = false
})
$(document).mousemove(function (e) { // Make the magic happen on mousemove
if (dragme) {
var possibleX = e.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) - scrubber.width();
var scrubWidth = rightX - leftX;
// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}
if (possibleX > rightX) {
possibleX = rightX;
}
scrubber.offset({
left: possibleX
});
var relativeX = possibleX - leftX;
var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
}
})
})
What would be the best way to edit it so the scrubbers effected a few symbols?
At the moment that scrubber is specifically linked to timeLinePlay - but what if we had a few symbols with timelines we could scrub through?
In my scene there are a few buttons that createChildSymbols in a content box, and I would like the user to scrub through the timeline of each symbol with a scrubber bar.
I watched a tutorial on variables so attempted writing a few myself but they didn't seem to work, so I just copied the code a few times on the main stage actions and changed the names of the symbols and scrubbers etc - which unfortunately didn't work either.
I'm sure there is a simple way with variables that this could be achieved
Does anyone have any ideas??
Thank you very much in advance for any advice.
How to make my animation loop 3 times ?
Hi Adobe,
I have made a animation and want to loop it 3 times!
Can you help my with that ? ;-)
Best,
Jesper
Movie will not load! Preloader just keeps going.
I'm working on a new homepage and I am having trouble getting the movie banner to play. I've used Animate since it's inception and I'm inserting the preloaded as I've always done. Has something changed in the latest version? The preloader just keeps playing and the animation never loads. If I hit refresh the page will load.
I'd appreciate an help I can get here if someone could take a look at the page.
Here is the page:
http://bvcdesign.com/norris/index.html
I've tried it on a few different servers to see if the server was the problem but it acts the same on all. Very frustrated.
Thanks so much!
Edge Animate is not clickable after adding preloader!
Even when I start a new project from scratch with nothing in it and add a preloader. Freeze, it wont even let me click the x button. I reinstalled Edge Animate 2 times. Ive added preloaders to projects before, no clue what the issue could be. I've rebooted my system ran antivirus, diagnostic test and closed all other programs. Any help? I know I can't be the only person on earth with this issue.
Animation not previewing correctly...
When I hit the play button on my animation withing Edge Animate, it plays as desired, however if I preview in browser, objects are in incorrect positions and playback does not occur. It does not function at all. I've tried it in all browsers. The odd thing is that in new projects when I first start out and preview them it is ok. The more I work on a project the less it works in the browser. I'm on Win 8.1 64bit - Chome 64 latest.
Lost mouse parallax with center stage or responsive scaling
I have a simple composition that uses mousemove event to control its timeline and give a parallax effect.
However, it does not work anymore when using either the center stage option or the responsive layout one.
Mouse move event detection area remains the one without options enabled, i.e. 960px wide beginning top-left of browser window.
Could someone help?
The JavaScript is as simple as that:
For Stage.documentReady:
var step = Math.floor(sym.getDuration()/sym.$('Stage').width()); sym.onMove = function(posX){ timelineControl = Number(posX)*step; sym.stop(timelineControl); }
And Stage.mousemove:
sym.onMove( e.pageX );
I am running Edge Animate 2014.1 either with or without jQuery included.
Reverse Playback needs to stop where a playback trigger exists... starts playback again instead of stopping...
So, I have an animation play, and when it finished a button appears. A click of that button reverses the timeline to start it off where it begins. The problem is that where it begins is a playback trigger. There is no way (that I know of) to stop the reverse playback at the start without hitting the playback trigger. I can't for the life of me figure out how to deal with this. Any help would be great! I do not know java script fyi.
screenshot:
controlling the timeline with mouse scrolling
Hello all,
i need to control the timeline animation with the mouse wheel.
how is it possible
i've tried this code but I've could only make it work with mouse move, unfortunatly the scroll does not work -
composition ready:
this.onMove=function(posX, posY){
timelinecontrol = Number(posX)*30;
console.log(timelinecontrol);
sym.stop(timelinecontrol);
}
mousemove:
this.onMove(e.pageX, e.pageY);
I've also tried this one - http://forums.adobe.com/thread/1149792
but didnt worked either
many tnx!!!!
Edge Animate Scroll Effect in Muse in not working in latest version
I am using the latest October version of Adobe Edge Animate CC 2014. The published .OAM package is not usable properly in Adobe Muse (Latest version as well).
The animations start playing as soon as the page is loaded regardless of applying any scroll effect let it be automatic at certain point or relative to scrolling.
I wasted my whole one day searching for a solution , but finally figured out it is an issue with latest Edge animate release , coz if I use an earlier version of edge animate with the latest version of Muse, the problem does not occur.
how to query window height from code in latest version
As the previous version had jquery as dependency we could easily query window properties.
How is the same possible in the latest version when the animation is embedded in another bigger page
Errata in Lessons
This is for the Edge Animate team. I'm following along with the Lessons and in the 'Sprite Sheet' lesson, Step 5, Item 5, the code snippet should be
5. Now, in the code snippet, change the number 1000 to 0 in "sym.play(1000)". This makes the animation loop from beginning.
This is the code in the completed sample. Thank you!
are you asleep ?
The 2014.1 release is crippled with bugs making it almost impossible to deal with complex projects When can we reasonably expect Adobe to iron out the Edge case ? Cheers.
How do I print a specific symbol in Edge Animate?
How do I print a specific symbol in Edge Animate?
scroll box with clickable links
I am trying to make a scroll box with clickable images or text.
unknown C ++ exception
I'm trying understand this!
gosh!
New Update (2014.1) - How to have multiple compositions on same page?
With the latest update, it seems as though Edge now always assumes that the composition has an element ID of "Stage". Previously, I was able to have multiple compositions on the same HTML page by simply altering the default id of "Stage" for each composition to something unique. Any workarounds for having multiple compositions on the same page utilizing the 2014.1 update?
Pause & Play Twice?
Hi,
I have a problem, I am making an interactive web-app but it doesn't quite work the way I want it to.
currently this is happening:
There's a car which is outside of the screen, it drives into the screen then it will pause the animation.
The animation continues when you hover over the animation, it is then supposed to stop with the following code:
code:
// Play the timeline at a label or specific time. For example:
// sym.play(500); or sym.play("myLabel");
sym.getSymbol("auto_animatie").play("open_klep");
// Go to a label or specific time and stop. For example:
// sym.stop(500); or sym.stop("myLabel");
sym.getSymbol("auto_animatie").stop("auto_stop");
issue:
But the car doesn't stop after playing the open_klep animation, is there currently an issue where you can not have two stop's on one timeline?
using css classes
I've been following this tutorial: http://www.edgedocks.com/content/2013/12/using-customized-css-animate-compositions
but I'm running into a few issues. The first one is that any elements styled using classes don't appear as such in the edge environment, only when previewing in browser. The other issue is that Edge keeps stripping the css classes that I've added manually to its html file everytime I save the document from edge.
Am I doing something wrong?
Thanks
Appreciation to the staff for all the help
Some people here, myself included, are somewhat annoyed over bugs etc in Edge. That´s fair considering we´re paying for a product which I believe not all of us knew was "not fully ready".
With that said, I wouldn´t have gotten anywhere without the help from the staff here, and I want to say that I appreciate the help alot. So thank you.