Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to control y position of multiple movie clips in html5 canvas?

New Here ,
Mar 28, 2020 Mar 28, 2020

Hi Guys

 

I think this should be a very simple question to answer, but try as I might I can't seem to get it to work.

I'm working in HTML5 canvas mode, and I'm pretty new to it so what is simple for you guys is taking me ages to get my head around!

 

I'm creating an interactive map of a building. At the bottom will be four buttons, ground floor, first floor, second floor and third floor, stacked on top of each other just like buttons on an elevator panel in real life.

 

 

The graphic of the building will be a movie clip with all the floors as separate movie clip symbols. I'd like to be able to press a button and animate the 'y' position of each floor up and down, depending which floor the user wants to see, so it will move all the other floors up or down out of the way and reveal the selected one. So I need to be able to 'call' the right floor from the elevator control panel, no matter what other floor is currently open by the user.

 

I've tried using:

 

this.firstfloor.y+=-100;

this.secondfloor.y+=-200;

 

and so on. but of course this just moves the floor(s) up and down in increments, with no tweens or easing of the floor animation. How would I add a tween and easing into that code?

 
or would i need to try using the 'animate vertically ' function? I can't seem to get that to work on a button click either.
 
What would also be nice is a little icon graphic on the control menu that moves up and down by the side of the numbered floor buttons and when you choose a floor, moves to the selected floor button, just like a little animated elevator would. But that is secondary to getting the actual floors on the main map movie clip to move up and down.
 
hope all that makes sense! I'm not even sure the best way to start building it.
 
I'd appreciate any help anyone can offer.

 

David

 

 

218
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 28, 2020 Mar 28, 2020

You just use the built-in tween library.

https://www.createjs.com/docs/tweenjs/modules/TweenJS.html

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 30, 2020 Mar 30, 2020
LATEST

Thanks Clay

 

Just trying to get my head around all these scripts, thanks for pointing me in the right direction..

 

D

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines