Can I make Canvas HTML5 Animation of transform Shape into Cube?

Explorer ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

Hi everyone, I want to make Animation of open/ close a box, transform a shape into a cube. Can I do it using HTML5 Canvas in Animate? Below is image sample on internet, I want to transform the shape of right image, into a cube/ shape on top-left. It's may look like 3D but this is entirely 2D transform so I think Animate can do it, just don't know how.open-closed-cubes-2.jpg

Views

361

Likes

Translate

Translate

Report

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

correct answers 1 Correct answer

Explorer , May 25, 2021 May 25, 2021
This work best for me (though there are still many room to upgrade):1. Create 6 squares and choose 1 square to be "origin". Origin square should connect to most of other squares. This origin square will have transformation point in exactly center.2. With each "children" square, set their transformation point to center of their "origin" line.3. Using Classic tween or Motion tween to transform "origin square" first.4. Then move children squares so they match with their "origin" line before transfo...

Likes

Translate

Translate
Adobe Community Professional ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

i would use 6 squares on six layers and use six tweens.  

 

to get 3 lines to tween from solid to dotted i would again use 3 solid lines on 3 additional layers and alpha tween each to a dotted line.

Likes

Translate

Translate

Report

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
Explorer ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

Thank you, I got the idea. However, I currently got trouble when using transform tool to re-shape these squares, hard to transform it to my desired shape. "Free transform" is not realy "free", isn't it? Do you recommend anything I can do to make it easier?

Likes

Translate

Translate

Report

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
Explorer ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

I upload my file here, could anyone help me about this?

https://www.dropbox.com/s/pupm7i6kg8tse9v/box.fla?dl=0

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

all the shapes are rectangles (actually squares) skewed to parallelograms (actually rhombi).  the free transform tool does that without problem

Likes

Translate

Translate

Report

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
Explorer ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

When transform square into parallelogram, the shape rotates and break the cube before reattaching it later. And when I have to flip shape, its refuse to stay at my desired location. Transformation point also make me think a lot, because canvas don't have any way to link layer, and I want my shape to attach to each other.

I would love to have a clear sample, or maybe you can have a look at my sample and tell me what did I go wrong? I am very appreciate.

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

use shape hints (modify>shape>use shape hints) to control shape tweens

Likes

Translate

Translate

Report

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
Explorer ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

Shape hints not working in my case, when I use shape tweens to transform square into rhombi, I add hints to all 4 vertexes but it's still rotate (hint b and d). And without hint, shape tween make it so random. I don't think we should use shape tweens for this type of animation.

Likes

Translate

Translate

Report

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
Explorer ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

This work best for me (though there are still many room to upgrade):

1. Create 6 squares and choose 1 square to be "origin". Origin square should connect to most of other squares. This origin square will have transformation point in exactly center.

2. With each "children" square, set their transformation point to center of their "origin" line.

3. Using Classic tween or Motion tween to transform "origin square" first.

4. Then move children squares so they match with their "origin" line before transform it.

5. Repeat the step till the cube done.

6. After the cube done, we go to the hardest part of adding dot line. We check frame by frame to find out when to add dot line over straight line. Easier said than done but we can do it.

Because free transform tool not allow us to free transform vortexes to make the exact rhombi we want. Setting transformation point make it less hard than do it "free". It's also avoid shape "free" rotate (lol)

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

LATEST

glad you got it sorted.

 

another way to do this if tween hints don't work for you is to place all 19 lines in their own layer and tween each.

Likes

Translate

Translate

Report

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