Hello everyone make sure to stop by and introduce yourself and do check out our design and programming sections.
Visit the Den and get some free stuff!

You are not connected. Please login or register

Stage Control Codes for Adobe Edge (Intended for Parallax Effects with Sprites) - With Tutorial

View previous topic View next topic Go down  Message [Page 1 of 1]

Bricyn

avatar

Forum Programmer
Forum Programmer
These codes are geared towards scrolling parallaxes which require user input. This is useful for stories, product demonstrations, animations and a variety of other animations. In this tutorial I will assume you are using a sprite, but the code designated for a sprite could be used to control the timeline of any symbol on the stage.


WARNING: THIS IS EXTREMELY RESOURCE INTENSIVE! USING TOO MANY ELEMENTS WILL CAUSE LAG AND POSSIBLE BROWSER CRASHES.

To start gather your resources, to make a parallax style effect in edge you will need both background and foreground elements. Set up your stage, and position your elements over you background. Set key-frames to move the background, and key-frames to move your elements. It's important for the effect that the foreground and background are moving at different speeds, and it can be enhanced by moving various elements at different speeds as well.

Next add your sprite (or other element with a timeline to be controlled) inside a symbol. If you want the element to move about the page or do anything else set it up like you would if it were to run at start.

It's time to add the scripts! Disable auto-play on EVERYTHING

Add the scripts to the creation complete section of the code interface, put the code labeled for your stage onto the stage, and the code labeled for sprites onto your sprite (or other controlled element).

Before you test it, check the variables at the top of the script, they are all commented so I won't go into great detail here, but pay attention to which inputs are enabled, and the speed which is set.

-Note- The speed variable is in MS as is the timeline. Speed is applied as one click of the scroll-wheel or keyboard button.

-Note- If run simple is enabled for the mouse wheel it may not trigger "instant" elements like triggers, or code on the timeline. This is because with run simple enabled it doesn't play every MS of the timeline, instead it skips according to the set speed.




Stage
Code:


/******************************************************************************
*******************************************************************************
 Parallax Scroll Code
*******************************************************************************
 Edit the options below to modify functionality.
*******************************************************************************
******************************************************************************/
var speed = 70; // Change the speed and smoothness of the movement.
var playForward = true; // Allow scrolling forwards, in most cases this should be true.
var playReverse = true; // Allow scrolling backwards.
var mouseWheel = true; // Allow scrolling with the mouse wheel.

// Uses a more efficient, simplified version of the code.
// Use this if your parallax has issues with jagged play or input delay.
// Events that only occupy one frame of the time-line
// may not activate if this is on.
var runSimple = false;

// In most cases Arrow Keys will run the best with this on.
// Only turn off runSimpleKey if you have few elements
// and need more control over the speed of the parallax.
var runSimpleKey = true;

// Arrow Key movement is not yet well implemented.
// Using this may have unexpected results.
// Works best with fewer than three elements.
var arrowKeys = true; // Allow scrolling with the keyboard arrow keys.
var keyStep = 70; // Set the speed of the arrow keys scroll. WARNING: Setting this too high could cause browser crashes.
/******************************************************************************
*******************************************************************************
 DO NOT TOUCH THE CODE BELOW THIS LINE!
*******************************************************************************
******************************************************************************/

function stageForward(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 var i = speed;
 while (i > 0) {
 position = position + 1;
 sym.stop(position);
 i = i - 1;
 }
 }
 }
}
function stageForwardSimple(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 position = position + speed;
 sym.stop(position);
 }
 }
}

function stageReverse(sym) {
 if (playReverse == true) {
 var position = sym.getPosition();
 if (position > 0) {
 var i = speed;
 while (i > 0) {
 position = position - 1;
 sym.stop(position);
 i = i - 1;
 }
 }
 }
}

function stageReverseSimple(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 position = position - speed;
 sym.stop(position);
 }
 }
}

function stageForwardKey(sym) {
 if (playForward == true && !(running == true)) {
 var running = true;
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 var i = keyStep;
 while (i > 0) {
 position = position + 1;
 sym.stop(position);
 i = i - 1;
 console.log(position);
 }
 }
 var running = false
 }
}

function stageReverseKey(sym) {
 if (playReverse == true) {
 var position = sym.getPosition();
 if (position > 0) {
 var i = keyStep;
 while (i > 0) {
 position = position - 1;
 sym.stop(position);
 i = i - 1;
 console.log(position);
 }
 }
 }
}

if (mouseWheel == true) {
 $(document).bind('mousewheel wheel', function(event) {
 if (event.originalEvent.wheelDelta >= 0) {
 if (runSimple) {
 stageForwardSimple(sym);
 }
 else {
 stageForward(sym);
 }
 }
 else {
 if (runSimple) {
 stageReverseSimple(sym);
 }
 else {
 stageReverse(sym);
 }
 }
 });
}
if (arrowKeys == true) {
 if (!runSimpleKey) {
 $(window).bind("keyup", function (e) {
 if (e.which == 39) {
 sym.stop();
 }
 if (e.which == 37) {
 sym.stop();
 }
 });

 $(window).bind("keydown", function (e) {
 if (e.which == 39) {
 stageForwardKey(sym);
 }
 if (e.which == 37) {
 stageReverseKey(sym);
 }
 });
 }
 else {
 $(window).bind("keyup", function (e) {
 if (e.which == 39) {
 sym.stop();
 }
 if (e.which == 37) {
 sym.stop();
 }
 });

 $(window).bind("keydown", function (e) {
 if (e.which == 39) {
 sym.play();
 }
 if (e.which == 37) {
 sym.playReverse();
 }
 });
 }
}

Sprite
Code:


/******************************************************************************
*******************************************************************************
 Parallax Sprite Scroll Code
*******************************************************************************
 Edit the options below to modify functionality.
*******************************************************************************
******************************************************************************/
var speed = 70; // Change the speed and smoothness of the movement.
var playForward = true; // Allow scrolling forwards, in most cases this should be true.
var playReverse = true; // Allow scrolling backwards.
var mouseWheel = true; // Allow scrolling with the mouse wheel.
var arrowKeys = true; // Allow scrolling with the keyboard arrow keys.

// Uses a more efficient, simplified version of the code.
// Use this if your parallax has issues with jagged play or input delay.
// Events that only occupy one frame of the time-line
// may not activate if this is on.
var runSimple = false;
/******************************************************************************
*******************************************************************************
 DO NOT TOUCH THE CODE BELOW THIS LINE!
*******************************************************************************
******************************************************************************/

function spriteForward(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 var i = speed;
 while (i > 0) {
 position = position + 1;
 sym.stop(position);
 i = i - 1;
 }
 if (position >= sym.getDuration()) { // Loop sprite animation
                sym.stop(0)
        }
 }
 }
}
function spriteForwardSimple(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 position = position + speed;
 sym.stop(position);
 }
 if (position >= sym.getDuration()) { // Loop sprite animation
                sym.stop(0)
      }
 }
}

function spriteReverse(sym) {
 if (playReverse == true) {
 var position = sym.getPosition();
 if (position > 0) {
 var i = speed;
 while (i > 0) {
 position = position - 1;
 sym.stop(position);
 i = i - 1;
 }
 }
 if (position < 0) {
       sym.stop(sym.getDuration())
     }
 }
}

function spriteReverseSimple(sym) {
 if (playForward == true) {
 var position = sym.getPosition();
 if (position < sym.getDuration()) {
 position = position - speed;
 sym.stop(position);
 }
 if (position < 0) {
       sym.stop(sym.getDuration())
     }
 }
}

if (mouseWheel == true) {
 $(document).bind('mousewheel wheel', function(event) {
 if (event.originalEvent.wheelDelta >= 0) {
 if (runSimple) {
 spriteForwardSimple(sym);
 }
 else {
 spriteForward(sym);
 }
 }
 else {
 if (runSimple) {
 spriteReverseSimple(sym);
 }
 else {
 spriteReverse(sym);
 }
 }
 });
}

if (arrowKeys == true) {
 $(window).bind("keyup", function (e) {
 if (e.which == 39) {
 sym.stop();
 }
 if (e.which == 37) {
 sym.stop();
 }
 });
 $(window).bind("keydown", function (e) {
 if (e.which == 39) {
 sym.play();
 }
 if (e.which == 37) {
 sym.playReverse();
 }
 });
}

View user profile http://abelnet.net

actes2

avatar

Admin
Admin
Helpful.

View user profile http://www.gareygraphics.com/

View previous topic View next topic Back to top  Message [Page 1 of 1]

Share this topic!

URL Direct
BBcode
HTML
Stage Control Codes for Adobe Edge (Intended for Parallax Effects with Sprites) - With Tutorial

Permissions in this forum:
You cannot reply to topics in this forum