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

Tags: Edge Animate

Similar Questions

  • Edge using animate with Captivate

    I would use Edge lead to perform a work of animation and then it to Captivate. Is it possible to do this?

    I'm very new to all this, so not sure the best methodology to use to add interactive elements in Captivate. Right now I use custom illustrations designed in Illustrator I want to make it interactive and animated in Captivate.

    Woohoo! Understood how do. Watch this video http://www.youtube.com/watch?v=yq3z9YWZvkk. What you need to do is to export the Adobe Edge animate like an OAM, which you can join under FILE > PUBLISHING SETTINGS. For the target of the publication, select the "animate Deployment Package" and you're ready to go!

  • With the help of event with edge to animate and to Captivate listeners

    I just finished to design and develop a custom table of contents on board animate and connected to "get/set" information of Captivate 9.0.2. When you click on a button of Captivate within the project, it will trigger the animation of the table of contents to play, information display you. However, the narrow closure of TOC button is edge animate. When you click the close button in the animation animate dashboard, the animation of the table of contents will reverse play. I also nicely put in place so that the audio/video on the Captivate slide will pause when the table of contents is visible and continue to play when the table of contents are hidden.

    Here's my problem: when you reach the end of the slide and open the edge animate TOC everything behaves as it should. When you then close the border lead the table of contents, the Captivate project continues to play to advance to the next slide. I need that remains in pause/stop until the learner clicks on the button "Next" to move forward. I'll have a hard time integrating event listeners CPAPI_MOVIEPAUSE, CPAPI_MOVIERESUME and CPAPI_MOVIESTOP while maintaining a successful communication between Captivate and animate dashboard. Does anyone know how to get there? Thank you!

    As I do this is to add a variable to the cpInfoCurrentFrame change event listener at the same time the listener to slides of entry. You check if you have reached the end of the slide and to set a variable. If you put this in the head of the index.html:

    var interfaceObj, eventEmitterObj, CSTO = 0; endSlide = false;

    window.addEventListener ("moduleReadyEvent", function (e)
    {
    interfaceObj = e.Data;
    eventEmitterObj = interfaceObj.getEventEmitter ();
    initializeEventListeners();
    });

    function initializeEventListeners()
    {
    If (interfaceObj)
    {
    If (eventEmitterObj)
    {
    eventEmitterObj.addEventListener ("CPAPI_SLIDEENTER", function (e)
    {
    endSlide = false;
    CSTO = e.Data.to;
       
    window.cpAPIEventEmitter.addEventListener ("CPAPI_VARIABLEVALUECHANGED", function (e)
    {
    If (e.Data.newVal > CSTO - 5)
    {
    endSlide = true;
    }}, "cpInfoCurrentFrame".
    );
    });
    }
    }
    }

    Then in the dashboard check file the value of endSlide (window.parent.window.endSlide), if it is true not to resume.

  • 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!

  • Loading preloader code of action ever performed with edge animate (2014.1.1).  Is this a bug?

    Some code I put in the P ofreloader action of loading does not work with edge animate (2014.1.1).  He used to work in previous versions.  How can I make it work?

    Hi Phildsb

    We have fixed this bug. This hotfix will be available with the next version of edge animate - ETA possibly 1-2 months on this version.

    Thank you

    Dieudonné

  • JS error on export with edge animate?

    Ive just started messing around with edge animate and Muse.  The first time or two that I exported it worked.  But I'm not sure what I did, but now whenever I export I ge TThe:

    http://i.imgur.com/gtqQDiH.PNG

    It works FINE in the preview, but when I export, I get this error every time.

    Even with a new website and a new animation.

    Hello

    Large. I must tell you that the most common cause of JavaScript errors on a page of Muse is missing from server or .js files or other files on the server, not all human beings of the backup of files .js version of Muse. If you use an external FTP client, you must re - download all the files and folders every time that a site is implemented using an updated version of Muse (since the code generated by changes of the Muse of liberation to free to improve page load performance, support new features, new versions of browsers or devices (, etc. of the address, etc.).

    The second most often the cause of errors JavaScript on a page Muse is bug embed code and/or include code that is in conflict with the JavaScript code used by Muse.

    Kind regards

    Rohit Nair

  • How to build a page using combo of Muse and edge to animate that updates the tables and charts of data from the Web site as Google Analytics tracking data?

    Is it possible to build a statistics page of back-end bit as a catalyst for business where information is collected in real time and updates of maps or charts which I can build in edge animate?  I want data analytics google for updating a cat that shows the clicks of visitors/page etc, but I want to design my own user interface for this.

    I know some coding etc may be involved, but can someone point me in the right direction?  Is this possible with edge animate?

    Screen Shot 2015-12-15 at 6.50.02 AM.png

    Edge will be animated plays the associated file for real time function, you can look for other solutions spare or better is to contact some experienced web developer who can build these tools for you.

    Thank you

    Sanjit

  • "Jump" to a specific slide in adobe captivate with edge animate.

    I want to "jump" to a specific slide in adobe captivate using interactions created in a file hosted from edge. Is someone able to help me with the javascript code needed to do this?

    So I don't know what was going on in April which did not possible but now 9 Captivate at least you can below to communicate a slide jump in Cape Town from the edge.

    I have an Edge file with a unique symbol to this topic called edgeButton which is just a simple rectangle with text on the subject. On the click to edgeButton event, I added the following script:

    window.parent.postMessage ('2', ' * ');

    Where the '2' is the second slide in a Captivate project. Here's a visual aid on board for the game to the top:

    On the side of the course of things, I set up a simple empty project with two slides on it and have disabled the PlayBar. On the first slide, I imported the OAM Edge file from above and on the second slide are just a simple text caption so that you know you have arrived at this slide after clicking on the "Click me" button in the animation of embedded edge. Here is a visual aid for the CAP put in place:

    Notice that there is a progress of the Actions run on the onEnter of the master slide. This is what looks like this Action:

    First, we add a Pause action so that the project does not automatically. Then we add a Javascript action to perform on the window 'active'. The script in the window Javascript crap is:

    window.addEventListener ("message", slideJump);

    function slideJump (event) {}

    Console.log (Event.Data);

    window.cpAPIInterface.gotoSlide (event.data);

    }

    If you use IE, change the first line of window.attachEvent ("onmessage", slideJump);

    What we have done here is connect Edge (that Cap incorporates in an iframe) with Cap using the postMessage function that allows document windows communicate with each other. Since the Edge object is inside the DOM of the CAP, the script of edge must publish its message to its parent window, which is the Cap document window. Add the listener for the event message to Cap on its current context of window and after receiving the message that we call the function slideJump and suss out the string that was sent to the wire using event.data, which in this case will be "2."

    We record the value in the console

    Console.log (Event.Data);

    just for sanity check our channel, then pass the string to the common JS Cape API interface

    window.cpAPIInterface.gotoSlide (event.data);

    the Cap project going to slide #2.

    If you're curious, here's a Stack Overflow write to postMessage . Communication between edge and Cap can work in two ways via postMessage, btw. Here is an example where we do something similar, except that we control an animation of edge of assets to Captivate with postMessage.

    I know that this response is a few months late to the party, but if all goes well it helps or helps someone else who might be looking for a response to a similar problem.

    Jord-

  • 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

  • In collaboration with edge animate, how can we change layer colors and and the names of the layers?

    For many years, I worked with Adobe Photoshop, and the ability of change the color of the layer or the layer name is pretty easy. I have been reading around on how to do this with Edge, but can not find any information on how I might be able to do this. Can you help me?

    Thank you!

    LainKennedy

    Layer of colors is not an option on board animate; but to change the layer name is the same as in Ps: double-click directly on the layer title.

    Darrell

  • The links I created a page that I built with edge animate are no longer works.

    I created a Web page with edge lead a month ago. The links worked then. I just checked and the links are no longer working. I have no idea why.

    Thank you. I fixed and the links work now. I refine them, but the links are back. I never would have found on my own. Thank you for your help.

  • HTML convert a project with edge animation in a video format

    Hello everyone should be noted that I'm not a specialist of great graphics. I wanted to ask you if you can convert an html project done with edge animation in a video format, type mpg4.  concerning

    Not directly from edge host. You will need to use a screen recorder.

  • Creating apps for iPhone by PhoneGap using animate CC Possible?

    Hello

    What is Adobe animate CC appropriate to create apps for iPhone by PhoneGap.  There are some tutorials to facilitate dashboard but not for Flash Pro CC or CC animate.

    Thank you.

    PhoneGap acts as a wrapper app for web content. With Animate, you can do the same thing by using a StageWebView, so in a sense PhoneGap and Animate are competitors.

    But, if you had another reason to use PhoneGap, I guess that web content can include HTML5 Canvas files you did using Animate.

    Normally when you make mobile applications in Animate you would in an AIR, using ActionScript 3 application.

  • Semicircle with edge of sharpness

    Hello

    How can I draw a semi-circle with edge of sharpness?

    Thank you

    Display > rules

    Add a blank layer over a base coat white

    Draw the circle with the elliptical marquee also. Hold the SHIFT key to create a circle.

    Edit > stroke the selection with a color

    Edit > free Transform. He will put a marker in the center of the circle.

    Take on a baseline of the rule more than the Center marker and then cancel the free transform.

    Add a rectangular mask with the top line to the reference line and fill it black

    or

    Do not mask. Simply fill out the white rectangle

    Use the move tool to return the reference to its leader line

  • Need help with SVG onboard animate!

    Hello

    I'm trying to put a .svg file in Edge animate.  I built it outside the edge animate and wonder if I can build the same functionality using this program.

    Basically, it's a map of the USA and I would have every glimmer of State* when it is hovered over.  In the .svg file, the < path > tag allows me to create the coordinates that are based within the card States.  These are not based on elements such as < div > block.  I suspect the Edge to animate important .svg together as a single image in a block.  Otherwise, I could break up the map .svg file and create a .svg for every State, but I think Edge animate will transform files .svg from each State in block elements and bring them to overlap when they are implemented.

    My question is: should I put the card linked .svg below beachfront animate without having to worry about blocks to overlap each other and preventing a layer to be clickable?  Please let me know if I need to specify anything.  You can provide all the help is appreciated.  Thank you!!!

    http://sample.charlesjoyner.com/20150121-USA-map.svg

    * I have actually decrease the opacity of each State to create the glow effect

    I recommend the common edge (common Edge - Extension Library to animate Edge and Edge reflow |) EdgeDocks.com) to do this, it makes it really simple! There is a description of how to use the site, but to give you a rough idea of what's required:

    Add onmouseover/onmouseout events to each State in your svg by using the SVG interactivity palette in Illustrator, for example onmouseover = notify (Thi, "over"); onmouseout = Notify (This, "out");

    Import of svg in edge animate and then use the following code to pick up the notify() value and perform the duties of your mouseover and mouseout/mouseouthandler():

    EC. (. Done) SVG.accessSVG (sym.$("map"))

    {function (svgDocument)}

    svgDocument.addEventListener ("over", {function (event)}

    sym.setVariable ("overPart", event.target);

    var stateOver = sym.getVariable ("overPart");

    stateOver.style.opacity = 0.2;

    });

    svgDocument.addEventListener ("out", {function (event)}

    sym.setVariable ("outPart", event.target);

    var stateOut = sym.getVariable ("outPart");

    stateOut.style.opacity = 1.0;

    });

    }

    You can also select by ID svg elements of your composition of edge, for example $("#florida", svgDocument).css({'opacity':'0.2'});)

Maybe you are looking for