Interactive animations for website.

Enthusiast ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

Hello!

 

So I can create animations with CH and put it on a video.  

 

Is there a way that I can create an interactive animation triggers and host it in a website?  If so, how do I go about to do this?

 

I would like to have my drawings which I create in Illustrator show up in a web page with trigger buttons on the side.  When the visitor clicks a trigger button I want the drawing to do a set of animations in relation to the drawings. 

 

I know this is beyond of what CH is made for, but I suppose it can be done.   Would anybody have any advise on how to accomplish this? 

 

 

TOPICS
How to

Views

72

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
LEGEND ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

There was some library around in beta many years back, but nothing else I know of. So I don't think any magic integration is available for interactivity etc.

 

I tried to create a Google Assitant app with Ch characters (for fun). I was trying to do a q & a game where someone interacted with a character. The approach I ended up with was just to pre-record various video clips and play the correct clip at the right time. Just use Ch to create the video clips. So on your website, buttons just make a different video clip play. Then your website does not need any ch integration at all, making life much easier.

 

But as soon as the character has to interact specifically with something based on user input, life gets much harder. I gave up. You need more like something in JavaScript or CSS animations etc. There is no special Ch support for that that i can think of.

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
Enthusiast ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

Yes, I was thinking if I could interact a "play button" to play different videos for animation it would work.  Still may required some sort of code integration to a website... and the hosting of the videos which will need to increase to a bigger hosting package.

 

I know Adobe Flash was an app (Now dead I think) that was used to play games.  I never used it and I am not familiar with it. 

 

Now, if coding is needed to play the videos.. then that is a good excuse to be further interested on how to animate stuff directly in the website.  Bisides, I am also interested in learning a bit more of coding.. 

 

 

 

 

 

 

 

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
LEGEND ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

It depends on how fancy you want to get. One easy approach for example is upload videos to YouTube with a static thumbnail image of the diagram (I think you can mark the video as to not include in search indexes.), then drop the video links into a WordPress site. I think it will show the static image. They just click play on the video.

 

Depends how fancy you want to get. But WordPress and similar has lots of widgets you can just use if you don't want to write your own. (Or Wix or Squarespace or ...)

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
Enthusiast ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

This is cool...  using Illustrator SVG files... wanna learn to code?

 

https://www.youtube.com/watch?v=Ca3ZkTV4RdM

 

 

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
LEGEND ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

My warning with that sort of approach is to understand the most complex animation you want to perform and make sure you can achieve it. If you wanted animated characters describing something about the contents of your diagram then i don't think it will help. If you want simple move and fade transforms that is a very different question and messing with svg may be an option.

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 ,
Aug 19, 2021 Aug 19, 2021

Copy link to clipboard

Copied

LATEST

Perhaps the easiest approach is something like the "Choose Your Own Adventure" books where certain branches of the story are selected based on the player's choices. The extremely popular "Dragon's Lair" game did something like that way back in the 80's where clips were loaded specifically based on the user's actions. In that videogame, there usually was only one correct choice and all other choices resulted in a nasty death scene. I believe something simple like that could be set up using JavaScript and HTML5. W3 Schools and Linked-In Learning (available for free from your local library as Lynda.com) offer a lot of online tutorials for a great many subjects.

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