Custom scroll bar in edge animate?

Hello everyone!
I have been test edge animate for a while now playing with all it's buttons and gadets and I recently came across a java script code which allows the timeline to be controled by the scrollbar, which you can download for youself below. To my understanding it is an early preview of edge commons 9.0 which is being worked on by simonwidjaja and his team.
http://labs.edgedocks.com/content/gimmick/parallax.zip
I love the ability to be able to control the timeline by the scrollbar. However this type of effect only looks smooth on browsers with smooth scrolling. And because very few browsers ship with smooth scrolling by default (I believe Firefox is the only one) and very few internet users have the knowedge to turn smooth scrolling on it kind of ruins the parallax effect when it is viewed on a browser that skips 150 px (or in our case many frames of the animation) every time you scroll down.
Does anyone know either how build a custom scrollbar in edge animate that would be triggered by the mousewheel and keyboard that would control the animation? If so please please please let me know, I have tried doing this myself for about a week and have gotten nowhere.
Thank you so much for your help!

I'm desperate for a solution to this, too.
I've been frying my poor noodle of a brain for days now, researching, reading and experimenting with all sorts of things, but I'm getting absolutely nowhere. I'd love to be able to reproduce something like the smooth mouse wheel scroll which can be seen at www.boycoy.com but using the superb Edge Commons Parallax feature (or something similar?) to run Edge content.
Any ideas anyone? Not looking for easy fixes, I'm very happy to learn and develop stuff that I can feedback into the mix for all. I just need pointing in the right direction

Similar Messages

Custom Scroll Bar

Hi,
I want to implement a custom scroll bar which functions like the one in StartMenu->Programs option. Instead of a vertical scroll bar I want buttons at the top and botton of the frame and on mouse over of it I want to implement the vertical scroll bar functionality. Is there any way to do it in Java. Basically I have a panel where in I have added a JTree component. I want to implement these scroll bars in this panel.
Thanks in advance.

dynamic is the easiest go with that

Is it possible to design an animated navigation bar in Edge Animate CC for use in a Dreamweaver CC site to act as the site's internal navigation? I have my own example for review.

Hi all,
I'm hoping one of you good people can help me with this. I usually try and work out things by myself and is my first time posting as this one really has me stumped. A solution would be fantastic but if I could be given a definitive answer if it can be done or not then at least I can stop wasting my time.
I'm loving Edge Animate as a cross browser alternative to Flash and the complete control I can now have building HTML5 and CSS animations from scratch. I build websites using Dreamweaver CC and wanted to create a bespoke drop down navigation for one of my sites in Edge animate CC to take into Dreamweaver. This I have done and is where I am having problems. The link to the test homepage in question is below with the nag bar made in Edge CC top right.
http://www.elastic-canvas.co.uk/Nick_Scott_Media%202014_Website/index.html
The problem is when setting the link attribute in Edge animate. You have the options of 'link in same window' or 'link in new window'. As it's for an internal navigation system neither seem to be appropriate. If I set it to open in a new window and set the live website address as follows it opens up the new page in a new window where as I want to replace the page. This is an example of the code I used to test if clicking 'sports advertising' would take you beck to the homepage:
// Navigate to a new URL in a new window
// (replace "_blank" with appropriate target attribute)
window.open("http://www.elastic-canvas.co.uk/Nick_Scott_Media%202014_Website/index.html", "_blank");
I ideally want to get into the code and just wrap each nav element with a <a href=""><a> tag. Can this be done and can it be done directly in Edge Animate CC?
Cheers, Matt

Hi,
According to your description, my understanding is that use CMAK to configure split tunneling on VPN clients, traffic to specified devices can be routed via their own default gateway.
If the manually added route entries all have default metric and interface, clients will select one by the default routing rule, can’t select one of them according to clients’ own conditions. So, I am afraid that CMAK can’t implement the function which you need.
A blog described about How to configure split tunneling on VPN clients using CMAK, for your reference:
http://blogs.technet.com/b/rrasblog/archive/2007/06/11/split-tunnelling-using-cmak.aspx
Best Regards,
Eve Wang
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Support, contact [email protected]

Custom Scroll Bar (value before mouse buttonrelease)

Hi Forte Users,
Has anyone been able to modify the scroll bar so that the value was
continually updated?
Basically I want to be able to change a value in a DataField while the
scroll is moved, not after the mouse button is released.
The AfterValueChanged event will only be posted once the mouse button is
released therefore I used a Timer.Tick event to continually poll the scroll
bar for its value but found that this value also only changed when the
mouse button was released.
Any help would be appreciated,
Douglas Reith
PricewaterhouseCoopers
Australia
e-mail: [email protected]
The information transmitted is intended only for the person or entity to
which it is addressed and may contain confidential and/or privileged
material. Any review, retransmission, dissemination or other use of, or
taking of any action in reliance upon, this information by persons or
entities other than the intended recipient is prohibited. If you received
this in error, please contact the sender and delete the material from any
computer.

jQuery Custom Scrollbars
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Nancy O.

Problème de scroll avec animation edge animate

Voila j'ai un petit problème avec une animation en edge.
Sur la page de ce lien se trouve une bannière faite avec edge animate : la bleue
http://www.malaga-brand.com/agence.html
Le petit hic c'est que le scroll n'a de cesse de fonctionne quand on scroll vers le bas mais uniquement dans la banniere même quand l'anime est censé être fini.
le code js dans edge utilisé est le suivant :
var positionScrollVertical = $(e.target).scrollTop();
var pas = Math.floor(positionScrollVertical / 1920 * 1000);
sym.getSymbol("malagaaa").stop(pas);
sym.$("malagaaa").css({"top": positionScrollVertical+"px"});
j'aimerais que lorsque l'animation de la bannière soit terminée, le scroll dans la bannière prenne fin et que cela soit celui de la page qui prenne le relais.
Merci à vous par avance

Ah et j'ai du effacer les barres de scroll car elles apparaissent sous chrome et ff alors que sous safari non comment faire pour qu'elles n'apparaissent pas? merci

Recreating super slick iPhone 6 video scroll effect in Edge Animate

On the iPhone 6 marketing page page, there are several HTML5 video elements (MP4) that react to scrolling in realtime. This is a super slick effect and I'm curious how it's working. Wondering if there's a way to do this in Edge Animate since frames are in absolute time and Edge Animate uses time as only a guide (no exact frames). Also working in Adobe Muse, so if there's a way to use that, great!
This would be a great alternative to using 100+ JPEGs as the file size with an MP4 for tons of the same data is MUCH lower.
Here's the page: http://www.apple.com/iphone-6/
Screenshot for reference: http://i.imgur.com/pCHkstw.png
You'll have to scroll down to the shot right above "iPhone at its largest. And thinnest." heading.
NOTE: This seems to work for MP4 only (not OGG-only browsers like FF for OSX). Tested in Chrome and Safari.

Custom scroll bar and image window

Hi Guys!
Im having trouble finding content on this, basically i want to create a window on my webpage that will scroll horizontally through a series of images, im guessing this may be done via javascript, does anyone know of any tutorials that may help me out. I wouldn't mind having a scrollable div on the page but i can seem to change the css of the scroll bar and feel thsi may cause problems when using various browsers..
please see the layout attached with the small white line below the image, which will be the knob with a black bar in the background.
thanks, any help will be greatly appreciated, have a nice day
Rus

http://www.solutoire.com/experiments/scrollbar/index.html
http://www.hesido.com/web.php?page=customscrollbar
http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html
You also may want to google "scroll javascript" for more options.

Scroll bar moves when clicked on

Hello. I have a custom scroll bar that was made using AS2. It works fine except that when you click on the bar and move it, the image shifts slightly and then doesn't line up correctly. I don't know what's causing it to shift. All registration points are in the upper left hand corner. I was really hoping someone could help me with this. Here is the code:
txt.setMask(mask)
scrollbar.onMouseDown = function() {
    if (this.hitTest(_root._xmouse, _root._ymouse) && txt._height>mask._height) {
        this.startDrag(false, scrollbarBG._x, scrollbarBG._y, scrollbarBG._x, scrollbarBG._height-this._height)
        txt.onEnterFrame = scrollThumbs;
        dragging = true
scrollbar.onMouseUp = function() {
    stopDrag()
    dragging = false
    delete this.onEnterFrame;
function scrollThumbs() {
    var funkyVar = -this._parent.scrollbar._y*(((this._height-this._parent.scrollbar._height)/(this._parent. scrollbarBG._height-this._parent.scrollbar._height))-1)
    this.Y = (funkyVar-this._y)*.2;
    this._y += this.Y;
    if(Math.abs(funkyVar-this._y)<1 && !dragging){
        delete this.onEnterFrame

Thank you very much for the code. After what you said, though, I went to find different code. I used kirupa this time. I just finished testing it out. I typed in the code and it went a lot smoother. However, the scroll bar top is STILL shifting to the side. So it must mean it's not the code that is messing up? All the registration points are in the upper left hand corner. Should the points be somewhere else to stop the shifting? Here's the code:
scrolling = function () {
var scrollHeight:Number = scrollTrack._height;
var contentHeight:Number = contentMain._height;
var scrollFaceHeight:Number = scrollFace._height;
var maskHeight:Number = maskedView._height;
var initPosition:Number = scrollFace._y=scrollTrack._y;
var initContentPos:Number = contentMain._y;
var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
var left:Number = scrollTrack._x;
var top:Number = scrollTrack._y;
var right:Number = scrollTrack._x;
var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);
scrollFace.onPress = function() {
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._y);
contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
scrollFace.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speed<maskedView._y) {
if (scrollFace._y<=top) {
scrollFace._y = top;
} else {
scrollFace._y -= speed/moveVal;
contentMain._y += speed;
} else {
scrollFace._y = top;
contentMain._y = maskedView._y;
delete this.onEnterFrame;
btnUp.onDragOut = function() {
delete this.onEnterFrame;
btnUp.onRollOut = function() {
delete this.onEnterFrame;
btnDown.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y-speed>finalContentPos) {
if (scrollFace._y>=bottom) {
scrollFace._y = bottom;
} else {
scrollFace._y += speed/moveVal;
contentMain._y -= speed;
} else {
scrollFace._y = bottom;
contentMain._y = finalContentPos;
delete this.onEnterFrame;
btnDown.onRelease = function() {
delete this.onEnterFrame;
btnDown.onDragOut = function() {
delete this.onEnterFrame;
if (contentHeight<maskHeight) {
scrollFace._visible = false;
btnUp.enabled = false;
btnDown.enabled = false;
} else {
scrollFace._visible = true;
btnUp.enabled = true;
btnDown.enabled = true;
scrolling();

Scrolling Flash Content With Mouse Scroll Bar

I created a custom scroll bar in AS2.0 and it works great.
But now I would like the content to scroll with the mouse scroll
wheel. Any ideas?

Anyone know how to fix this on Mac Osx, it works in preview
but not in safari. Any pointers?
var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
//contentMain._y += delta;
scrollFace._y -= delta;
if (scrollFace._y >= bottom)
scrollFace._y = bottom;
if (scrollFace._y <= top)
scrollFace._y = top;
updateContentPos ();
Mouse.addListener (mouseListener);
function updateContentPos ()
var onePercent = (bottom - top) / 100;
var scrollPerc = Math.floor ((scrollFace._y / onePercent) -
37);
var contentNewY = (contentMain._height * scrollPerc) / 100;
//trace (scrollPerc + " " + contentNewY)
contentMain._y = -contentNewY;
}

Web fonts from Edge Animate and DPS

I've read all of the existing threads on this matter and I'm still a bit confused.
I get that typekit web fonts won't render offline. But if that is the case, how can you ever use a custom web font from Edge Animate in a DPS publication? Considering you can only use web fonts in Animate...
We have a desktop license for this font as well. So is there a way to get my animate project to call the desktop font rather than the web font?
Any help or clarification would be greatly appreciated.
- Dylan

I haven’t tried it so this may be a shot in the dark but you might be able to hack into the CSS and use @font-face to call a local font.
Check the license of the font to be sure it allows this.

Help with a scroll bar

I am designing a website and I would like to include a
customized scroll bar, I know there is components but I don't like
the way they look, so I want a scroll bar that I can custumized so
el have consistency with my webpage design.
I know that you can do it with actionscript, so there is
anybody that can help me with the script or give me a like for a
tutorial.
Thank you!!!

I am having trouble getting my website to scroll down in "live" view.
Try disabling JavaScript in View > Live View Options. I had snags in Live View caused by Widgets that linked to scripts on external servers (i.e. FaceBook badges or ADD THIS). When I disable JavaScript, Live View performs normally.
Nancy O.

Edge Animate Program missing scroll bars

Hello!
I've been having a issue with some Edge files for awhile now, and I havn't been able to fix it.
We use Edge for animations in apps, so we use over a dozen indivusal files for the diffrent pages in the app. The issue I'm having is that a few of these files, when I open up the Edge program, don't have scroll bars. I can still move around dragging the mouse around, but some screens are full of objects so it's not always practical. This makes it very awkward when I need to zoom in and have to deal with the aniamtion timeline.
We started building many of these pages early last year, but I'm not sure what version of the beta we were using. So each time a new verison came out, we updated those files to the new ones. I always assumed that some early bug in the program, mixed in with the complexity of some of these files and constantly updating to new verisons, accidently broke something.
Is there a way to get these scroll bars back? I searched all over the options, but no luck,
Thanks!

Hi, LFrog-
If you could send us the files, we can take a look at why you're not getting scrollbars. If you want to send them as a link in a personal message, that would be fine as well.
Thanks,
-Elaine

How to create scroll controlled svg animations in Edge animate cc

Since I am a beginner in Edge animate, I am very confused about svg animations in Edge animate. I want to create an effect like this http://tympanus.net/Development/SVGDrawingAnimation/index.html. In this page the animation is set to autoplay, I will controll my animation using scroller bar in adobe muse cc. Please tell me how to animate svg images like this.
Thanks in advance

Hi bhardwajaralhul517,
Found something that could help you get started
Using parallax scrolling in Animate with a single line of code | EdgeDocks.com
How To Create A Parallax Scrolling Website | Web Design Principles
Thanks,
Preran

Scroll bar visible but not able to scroll in custom screen for IW21

Hi,
We are using custom tab (screen exit) in transaction for creating notifications (TCode IW21). Two subscreens are configured to be embedded in the tab, combined area of which is exceeding screen size vertically. The scroll bar is visible in the tab but is not able to scroll using mouse scroll, but can be dragged up and down.
Does anyone know how to make it scrollable or make the scroll bar visible at application level (not in tab) and make it working?
Thank you,
Deepak

Hello,
Would you please implement the Methods GET_DATA to get th data from Databas to screen fields and SET_dATA to update thedata from custom screen fields to Data base table in u r case LFB1.
Regards,

Scroll bar, buttons and a Custom Component - help

Thanks to another forum I was able to create a scroll panel and add a scroll bar to it. That works fine. Inside the scroll panel I have thumbnails of the product that I'm highlighting. I want to be able to click on the thumbnail and have a full size photo of the product come up in the window next to the scroll panel. I created a custom component that has a stage showing each full size product individually. This worked fine when I simply had buttons and no scroll bar. I could convert the thumbnail to a button and then add interaction so that it would go to the proper state of the custom component. Where I'm having problems is now that I've imbedded the buttons in a scroll panel I'm no longer given the custom component as an option to pick from. I can add interaction, but it only gives me the option of picking one of the pages, and not a component.
I've attached a screen grab to help show what I'm describing.
Any ideas?
Doug

Doug, thanks for asking this question.
Hi ADAM...
It seems that a lot of us are asking the same question: Scrollbar Navigation-Make Actionable
(I created a low-fidelity proof-of-concept to test—using a datalist as you suggested. See link in my posting).
I have reviewed the video you refer to here, but you example still does not allow for individual items in the datalist (scrollbar) to be assigned individual actionable events.
Can you expain your thinking in Option 1, as a workaround? Do you have any other suggestions?
BOTTOM LINE
We are all looking to do the same thing... something we are going to see A LOT MORE of after Uncle Steve's TABLET presentation next week:
A scrolling menu, with selected items in the menu causing "navigation" to a certain point in a scroll panel. (imitating the flick or slide effect of iPhone).
Suggestion: Can you add a field to thedatalist so that when the "repeated item" (in edit mode) is configuredto do an action (i.e., On-Click, Transition to State), we can then assign the state you'd like for each item in thetable itself?
Now the issue is making it change the "State" within another component (i.e. scrolling panel). Can that be done?
Thanks,
- Rick

Custom scroll bar in edge animate?

Similar Messages

Maybe you are looking for