Make Edge Animate Button scroll to anchor point on click

Hey everyone,
first: I don't know anything about code...
I am currently setting up a one-page website and want to work with animated buttons made in edge.
So far everythink is working great.
My problem is that if I use the click condition "open URL" this will bring me to the desired location on my page but it will ignore the nice scrolling animation and jump there right away.
What kind of function do I need to solve this?
Thanks for your efforts.
- Toni

Hello, your code just saved me!
I am also looking for something similar to this:http://www.heathrowe.com/edge/scroll_with_page/
I would like to have something like the square but that it just stays in the same position, with out the animation.
The code for that is:
In Stage > compostionReady
$(window).scroll(function(){
var element = sym.$("arroworb");
element.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
Do you know what should I change in that so it skips the animation? I'm gussing is the "slow" has something to do with it but had no luck trying by myself.
Thanks in advance!

Similar Messages

Integrate Edge Animate trigger to Muse anchors?

I've created an 8 second animation in Edge for my home page (Made with Muse). When the animation finishes I want the page to automatically scroll down to an anchor I've placed like it would if I clicked an object with a hyperlink.
I've inserted a Trigger @ 8000 ms with the following code [ window.location.hash = "#about"; ]
When I preview or publish my website the animation works perfectly but at the end of the 8 seconds instead of scrolling down to the anchor, it reloads the entire page instead. It does reload to the anchor which is a start but not what I'm hoping to achieve.
How can I solve this? Am I using the wrong code in the trigger?
Thanks
I have temp. published the animation in html and javascript format and inserted those files into Muse using MuCow script. The automatic scroll to the anchor is now working but the animation for some reason takes a good while to load. So still looking for a solution to above?

You will get better help asking in Edge Animate CC or Help with using Adobe Muse CC
The Cloud forum is not about using individual programs
The Cloud forum is about the Cloud as a delivery & install process
If you will start at the Forums Index https://forums.adobe.com/welcome
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll

How do you open a modal window from an Edge Animate button?

I am trying to create an animated group of buttons that open a Bootstrap 3 modal window when clicked. The animation (OAM file) is placed on the Bootstrap page.
This code is added to Animate "CREATION COMPLETE" for button creation and button click:
// Button 1
var btn1 = sym.createChildSymbol("HomeButton", "menu");
   // Convert/store a reference to the symbol as a string representing the element name of the symbol instance.
var btn1_e = btn1.getSymbolElementNode();
   // Now can use that element string and convert it to a DOM element to use with jQuery to call its css properties
   // and adjust whatever you'd like, including its position property
   sym.$(btn1_e).css({"position":"relative", "margin":"10"});
btn1.getVariable("setLabel")("Print Work");
btn1.getVariable("setDescription")("Examples of Telex advertisement");
btn1.$("MyImageBox").css("background" , "url(images/telexads_full269x151.jpg) no-repeat");
btn1.getSymbolElement().click(function() {
          console.log("button 1 was clicked");
document.getElementById("myModal");
$('#myModal').modal('show');
The div for the modal is on the main HTML page. I want to have the modal open a larger image of the button. Basically a lightbox for the Edge Animate stage, but it has to access the div on the parent HTML document (not the EdgeAnimate.html).
Here is the error from the Chrome Javascript console:
Uncaught TypeError: Object [object Object] has no method 'modal' portfolioButtonStage_edgeActions.js:4
(anonymous function)portfolioButtonStage_edgeActions.js:4
f.event.dispatchjquery-1.7.1.min.js:3
h.handle.i
I've tried Edge Commons Spotlight, but that doesn't open on the page correctly; it puts the image at the bottom of the main page.
Any ideas? Thanks

I am trying to create an animated group of buttons that open a Bootstrap 3 modal window when clicked. The animation (OAM file) is placed on the Bootstrap page.
This code is added to Animate "CREATION COMPLETE" for button creation and button click:
// Button 1
var btn1 = sym.createChildSymbol("HomeButton", "menu");
   // Convert/store a reference to the symbol as a string representing the element name of the symbol instance.
var btn1_e = btn1.getSymbolElementNode();
   // Now can use that element string and convert it to a DOM element to use with jQuery to call its css properties
   // and adjust whatever you'd like, including its position property
   sym.$(btn1_e).css({"position":"relative", "margin":"10"});
btn1.getVariable("setLabel")("Print Work");
btn1.getVariable("setDescription")("Examples of Telex advertisement");
btn1.$("MyImageBox").css("background" , "url(images/telexads_full269x151.jpg) no-repeat");
btn1.getSymbolElement().click(function() {
          console.log("button 1 was clicked");
document.getElementById("myModal");
$('#myModal').modal('show');
The div for the modal is on the main HTML page. I want to have the modal open a larger image of the button. Basically a lightbox for the Edge Animate stage, but it has to access the div on the parent HTML document (not the EdgeAnimate.html).
Here is the error from the Chrome Javascript console:
Uncaught TypeError: Object [object Object] has no method 'modal' portfolioButtonStage_edgeActions.js:4
(anonymous function)portfolioButtonStage_edgeActions.js:4
f.event.dispatchjquery-1.7.1.min.js:3
h.handle.i
I've tried Edge Commons Spotlight, but that doesn't open on the page correctly; it puts the image at the bottom of the main page.
Any ideas? Thanks

Are Adobe EVER going to make Edge Animate scale-to-fit (like Flash)?

I've been following the progress of Edge Animate (formerly Edge) ever since Steve Jobs decided he wasn't having Flash on the iPad.
With each new version I've been desperately looking for the feature that I consider the most important of all: Scale-to-fit
There are a couple of discussions already on this forum where people have requested this feature - but both have been sidetracked by replies from people who haven't understood what 'scale-to-fit' is. So let me explain Scale-to-fit:
I'm talking about the feature in Flash - where if the HTML dimensions are set to 'Percent' - then the resultant movie will scale-to-fit any browser window. Here is an example of what I mean:
http://www.skippingschool.co.uk
- try changing the browser size and you'll see the whole frame (graphics and images) scales without changing its proportions.
When the latest version of Edge Animate came out with its built-in easy-to-follow 'Resize' Lesson, I thought Adobe had finally found an answer. But good though this feature is, it doesn't solve the problem. It's only possible to properly scale-to-fit images - not graphics.
It's now more important than ever that Adobe finds a solution to this problem. The world is going 'Responsive' - its not just a fad. And 'Responsive' is not just about three columns being squeezed into one. All Responsive sites require images, graphics AND animations to scale-to-fit. So Adobe's tutorial showing how Edge Animate can be added to WordPress sites is of limited use because it won't work for Responsive web sites.
So please Adobe, will someone tell me if scale-to-fit is EVER going to happen? I don't mind if it's 3 months, 6 months, 9 months down the line - but I need to know if it's worth me sticking with Edge Animate - or whether I should be looking toward HTML5 Canvas or something else for a solution?
Alternatively, is there some fundamental reason why it can NEVER happen?
Please tell me? Just put me out of my misery!

Hi Sarah,
I hope you don't mind but I played around with your code a bit and managed to get the kind of scale-to-fit behavior that I believe the OP was asking about. I think the trick is to make sure that you also check whether the scaled height of the stage exceeds the height of the browser window and change the scaling so that it is responsive to changes in both the width and height of the window, whichever is the limiting factor. The code I changed in CompositionReady appears in bold below. I hope this helps.
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
function scaleStage() {
    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
    var parentWidth = stage.parent().width(); // Get the parent of the stage width
    var parentHeight = $(window).height(); // Get the browser window height
    var stageWidth = stage.width(); // Get the stage width
    var stageHeight = stage.height(); // Get the stage height
    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
    var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales
    var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
    var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales
    var rescale = rescaleWidth;
    if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window
                    rescale = rescaleHeight;
// Rescale the stage!
           stage.css('transform', 'scale(' + rescale + ')');
     stage.css( '-o-transform', 'scale(' + rescale + ')');
           stage.css('-ms-transform', 'scale(' + rescale + ')');
     stage.css('-webkit-transform', 'scale(' + rescale + ')');
           stage.css('-moz-transform', 'scale(' + rescale + ')');
     stage.css('-o-transform', 'scale(' + rescale + ')');
           parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
// Make it happen when the browser resizes
$(window).on('resize', function(){
           scaleStage();
// Make it happen when the page first loads
$(document).ready(function(){
    scaleStage();

First page next to homepage shifts to the right during scrolling to anchor points.

I made a second page exactly the same as the homepage in a different language, but using the new anchor points at this new page does nog give the same effect. It should only be scrolling down, but it shifts also to the right of the browser. I get a scrollingbar at the bottom of my frame. The homepage does not get all this unwanted extras. This is the URL: http://changer.businesscatalyst.com/english.html#homenews

I had this problem 2 times with 2 different websites. Only could solve it by beginning a new file, copy pasting all elements adding new achors.
You should find this issue on this forum as I posted it before.

Palm tx: how to make five way button scroll down a page at a time

i knew how to do this once, but have forgotten: on my palm tx, how do i make the five way button scroll down a page at a time?
thank you,
kj
Post relates to: Palm TX

Yes, you'll simply need to open up your docs-to-go program and once you've accessed the program, select the document your needing to view. After selecting the document using the stylus tap in the upper left corner of the screen and you'll see a drop down menu populate (from the File option), Next select preferences and lastly, place a check mark next to the page scroll on Five-Way device.
Post relates to: Treo 800w (Sprint)

Muse not translating my edge animate buttons properly

So i created my animated buttons inside of Edge. When i preview in browser all is well. The animation is correct, as are my links. For some reason when I place into Muse Template, I loose the hyperlink. The animation looks good, its just not taking me to the proper page. I would be quick to say that I made an error inside Animate, as I am pretty new to it. However, being that it works properly in the browser, I am believing that the error is within Muse. Thanks in advance for any helpful tips.

responded to your another thread, Muse will not preview Edge Animate File

Simple Edge Animate button

Hi All
I have built a simple button in a Edge animation using three labels, Up - Over - Down all with stop triggers. However, when I try and add a playback command and try and use "Stop at" the label option isnt highlighted to enable me to use it. any ideas what I am doing wrong?
Regards
Gavin

Hi All
I have built a simple button in a Edge animation using three labels, Up - Over - Down all with stop triggers. However, when I try and add a playback command and try and use "Stop at" the label option isnt highlighted to enable me to use it. any ideas what I am doing wrong?
Regards
Gavin

¿Is there any way to link a button from Adobe Edge Animate to an anchor from Adobe Muse?

Hi everyone!
i'm doing an animated menu, a wanna know if it's possible to link an edge animate button to an adobe muse anchor.
Thanks a lot!

As I mentioned in your other post, you may want to describe your problem. There are many users here that can offer excellent help (some who are more knowledgeable than Adobe support staff).

How to adjust bullet points in Adobe Edge Animate?

How to adjust bullet points in Adobe Edge Animate?
when a bullet point is long and does not fit in one line it apears in the next line unaligned.

Hi Elaine,
Yes, the only way I have discovered so far is using HTML and force it on stage based on my text width size, otherwise bullet list won't be align vertically. This is how currently I do it:
sym.$("text1").html("<br>● Lorem ipsum dolor sit amet, consectetur adipisicing elit<br>   Lorem ipsum dolor sit amet, consectetur adipisicing elit <br>● Lorem ipsum dolor sit amet, consectetur adipisicing elit")
Thank you for your help in advance.
Sean

Why when I switch between a centre-aligned stroke and fill do my anchor points move?

Hi there, I've been using Illustrator for many years and never noticed this happen before when I fill a shape - can anyone explain why this is happening?
I'm drawing a logo using a centre-aligned stroke, rounded rectangle and another stroked path merged together to make my logo outline....like this...
....and when I change my centre-aligned stroke from a stroke to a fill and back again (to make the shape solid black), the anchor points of my shape move.....after about 10 time so fswitching between fill and stroke, fill and stroke etc my paths look like this....
Why is this happening??? It doesn't do this when I use a stroke aligned to the outside or inside of the path - just when the storoke is aligned to the centre of the path? CAnanyone explain why this happens? what it going on here?
-thanks in advance!
-Pete Moore

No I don't mean 'outlining' a stroke - all I'm doing is changing a stroke'd box to a fill and back again using the 'Swap fill and stroke" button on the main pallet.
When my (rounded rectangle) path has a stroke applied to it, and it has the stroke aligned to the centre of the path, the anchor points of a rounded rectangle move slightly every time I swap from a filled shape to a stroked shape.
If I apply a stroke to a path (again - a rounded rectangle) that has the stroke aligned to the outside or inside of the path, then the anchor points do not move - however many times I swap between fill and stroke.
I've been wondering why when I re-apply a stroke to a filled object (and that stroke is alinged to the centre of the path) - I get slight movement with the anchor points (do it alot of times and it can really mess with rounded corners).
Draw a rounded square, apply a stroke to it (a center aligned stroke), click the 'swap fill and stroke' button (shift + x) a few times, watch the box move slightly every time you click.
-pete

Button Link to Anchor

I'm creating a website using a map in flash, and I need to
make each region link to an anchored point on the page. The map is
already split into buttons that I can link to the page - but the
'#anchorname' isnt working after the URL to bring it to a lower
portion of the page. Please Help!!

-->dan mode wrote:
>> on(release) {
>> getURL("regionaldata.html#Lenowisco");
>> }
>>
>> The link works fine - it just refeshes the page
instead of taking me to
>> the
>> anchor point.
>
>
> That's what a href anchors do as well. The way you have
is correct and
> should work fine. Nothing else you can do.
html#Lenowisco use to be very problematic few years back.
no browser like it, and even tho you made the browser like
it,
it would stop working in another. We had all kind of work
around, from
javascritp to url encoding.
Perhaps give it a try :
getURL("javascript:top.left.location.href='test.html#anchor';
void(0);");
Keep in mind , the functionality will vary based on browser
version also due to
new security settings, you might not be able test it locally,
might need to upload
to server.
If using URL encoding, replace the # with %23:
getURL ("some.html%23anchor");
Regards
Urami
Happy New Year guys - all the best there is in the 2006 :)
<urami>
http://www.Flashfugitive.com
</urami>
<web junk free>
http://www.firefox.com
</web junk free>

Edge animate navigation in inDesign for iPad

Hello all. I am after creating a animated navigation system using edge animate but would like the buttons to go to selected inDesign pages. Is there a way to have a edge animate button that can take the user to another indesign page/document seamlessly on an iPad?
any help would be great
regards
Martin

Okay, I tried the above and it didn't work. After visiting this page, I made some adjustments to Martin's code:
I made a simple 5-page document in InDesign, with five animated navigation buttons on the document master page (so they appear on every page of the document). The buttons are based on Inspire magazine's "Interactive Banner" Edge tutorial.
The ARTICLE for this document is called Article1 (this is important!!).
In the Edge file, the five animated "buttons" are called Overlay_1, Overlay_2, Overlay_3, Overlay_4 and Overlay_5.
I inserted the following mousedown code into each "Overlay" button:
var myElementVar = sym.lookupSelector('Overlay_1');
$(myElementVar).append($('<a style="display:block;width:100%;height:100%;" href="navto://Article1#0" />'));
NOTE: the code will vary for each button -- the symbol name (sym.lookupSelector) will change based on which button you're coding for (Overlay_1, Overlay_2, etc).
The "navto" link points to the ARTICLE you want to navigate to. The number after the # symbol refers to the page in the Article you want to navigate to.
SUPER IMPORTANT: The first page of a document is 0, so specifying #1 jumps to page 2, #2 jumps to page 3, etc., etc.
** It's a little bit clunky, so I'm experimenting with the various nav actions to find the best one ("Click" doesn't seem to work that well, so I used mousedown instead) **
EDIT: I messed up on my original post. The navto code should point to the ARTICLE in the Folio Builder, not the FOLIO.

Can't see the anchor point or bezier handles when editing an effect

Please help! This may be an easy fix, but when editing an effect I can no longer see the anchor point, keyframes, or bezier handles on the timeline image. Specifically, I am keyframing the Brush Position in the Write-on effect, and while I can move the brush position, there is no visual cross-hair on the image nor bezier handles to adjust the curve... every adjustment is therefore a guess as to where the adjustment handle is.
Is there a button that toggles anchor point and keyframe path display? Obviously, not being able to see what you're working on is very frustrating. I tried to click the icon to the left of the Write-on effect bar (4-point square with the selection tool in the upper right), but nothing happens. The write-on effect bar is selected and the Brush Position is in keyframe mode.
Thank you in advance for your help.

I worked with this the other day. Bezier handles and the hot spots are tough to see and the write-on effect is a bit wierd for me. You may have more success placing keyframes at beginning and end of a clip as I had trouble keyframing only part of a clip and still controlling the writing effect. You can then slide the keyframes later to change the duration.
Also, you may want to disable all the other effects while editing this one, as the others keep getting selected instead for me and I end up e.g. moving the image instead of the brush.

Object's anchor point not "sticking".

I'm using Flash CC and experiencing an issue with anchor points. I have Movie Objects on the stage and I usually can set their anchor point, create my keyframe, and then use classic tweens to rotate and animated based on where I placed my anchor. Upon trying to animate today, my anchor points weren't sticking when I adjusted them. It's been a couple weeks since I last used Flash to animate not sure if anchor points have somehow changed. But it is very frustrating that they aren't staying in place. Please help!
I'm using Win 8.1 on a Surface Pro (1st gen).
Thanks,
Ian

I was only getting it on my SurfacePro - tried it on my desktop (running Win 8.1) and it didn't show up again. I looked like a timeline adjustor that you would find in Premiere or After Effects. But it really wasn't breaking anything so I'll ignore it. I was able to capture my issue on video, and although I thought I had figured it out, it seems that there is still an issue with using anchor points and classic tweens. Take a look at the video if you have a chance:
http://youtu.be/FXCbDRkfinA
-Ian

Make Edge Animate Button scroll to anchor point on click

Similar Messages

Maybe you are looking for