Parallax Scene Sample for Animate CC

by @designlabIO
www.tourdeanimate.com

Content
Your download includes a working sample project that you can open, modify and reuse in your own
creative work, including all assets. If you want to learn more about this sample, check out our video for
this sample:
https://youtu.be/vrr9HaKm2yk

The artwork of this sample was created by our dear friend Heiko Roehr (@OHeiko). Check out more of his
work if you like it: ​
http://www.heiko-roehr.com/home/

Instructions

1. Preview the sample

Once you have downloaded the sample and unzipped the file, you can preview the sample by opening the
index.html​
file. This will run the project in your default browser.

2. Open and explore the Animate CC project

You can open the project in Animate CC by choosing the index.fla file. This will start the project in
Animate CC for HTML5 Canvas export.
Note that there is only one frame on the main timeline. The actual parallax animation will be created with
script at runtime. In order to do so, the visual elements are placed in several layers (level0 - level8). The
hierarchy is responsible for the visual representation on the z-axis as well as the distance the layer will
move in the parallax. The elements in the background are placed in the bottom layer (level0) and those
closest to the viewer in the top layer (level8). Above that, there is the ACTIONS layer that contains only
script and no visual elements.

Each level layer contains a movieclip in which the visual aspects of this parallax layer are being placed.
You can locate the single movieclips in the library. This makes it easy to replace the visuals and to
change the scenery - you don’t even have to change the code. Just open the appropriate movieclip and
make the modifications. You can also add animations for single layers, as it is the case with the falling
snow (as in level8).
The entire script is located in the first frame of the ACTIONS layer.
Open the code view (window > actions) to reveal the script.

The actual parallax animation of the layers takes place between lines 61 and 73. Here we register the
mousemove event and use the previously defined throttle function to apply the movement to each layer
with a slightly different offset.

You can easily change the duration of the tween or the easing, or add and remove layers. Just make sure
that the instances in the property inspector also show the appropriate name, for instance in this case
level5:
Need help?

Feel free to contact us: We are available for trainings and project support.
Mail to ​
mail@edgedocks.com​ for inquiries.

THANK YOU

We hope you enjoyed this sample. We appreciate feedback and would like to invite you to recommend it
to your friends and colleagues. Make sure to check out the other samples on

www.tourdeanimate.com

created by @SimonWidjaja and @DanielConnerth

@designlabIO

Subscribe to our Youtube channel for videos, tutorials and news: ​

https://www.youtube.com/edgedocks