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

Animation durch Schaltflächen interaktiv steuern

New Here ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Hallo Forum,
vielleicht denke ich zu kompliziert - vielleicht hat ja jemand einen Tipp - oder einen Vorschlag, wie ich dies lösen kann. Oder vielleicht gibt es schon so eine ähnliche Problematik, die man vielleicht abwandeln kann.

Ich möchte gerne eine Grafik mit mehreren Kreisen interaktiv animieren.
(s. Bild im Anhang)

 

- Die Kreise sollen sich fortlaufend drehen
- die Geschwindigkeit der Kreise soll mit Eingabewerten innerhalb der Ansicht (siehe links im Bild) oder alternativ durch Buttons (z.B. feste Buttons mit Geschwindigkeitswerten: 60, 80, 100, 120) verändert werden können
- es wäre klasse, wenn sich die Kreise in Abhängigkeit zu einander drehen können
(wenn z.B. bei Kreis B die Geschwindigkeit 100 eingegeben wird, ändert sich die Geschwindigkeit bei Kreis B aber auch bei den anderen Kreisen wird die Geschwindigkeit um einen vorgegebenen Wert verringert oder beschleunigt)

So dann man unterschiedliche Szenarien bei den Kreisen darstellen kann.

Ich würde mich über Rückmeldungen und Hilfen zu dem Thema sehr freuen.

Views

229

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
Community Expert ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

if you're creating an html5 animation, use javascript/createjs to do that, EaselJS v1.0.0 API Documentation : EaselJS (createjs.com)

 

if you're creating an as3 animation, use actionscript 3.

Votes

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
New Here ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Hello kglad, Thanks for the hint.
It's supposed to be an animation that's going to be added to a presentation later. e.g. PowerPoint. With the buttons I could assign different speeds to the circles. But how could I create dependencies between the circles? So if one circle has speed 1, the other has speed proportionally 20% faster ? and that I could change the speeds with buttons? Do you have a tip or an idea? thank you very much. David

Votes

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
Community Expert ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

i don't know how you're adding an animation to powerpoint unless it's a video (which precludes interactivity).

 

is there a way to add an interactive animation to powerpoint?  if so, what format is needed?

Votes

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
New Here ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Hello kglad,
thank you very much for the reply.

It would be enough if you can create a link to an HTML document in PowerPoint where the interactive animation is running.
Or am I thinking too complicated?

Votes

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
Community Expert ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

no, that would work, and in that case you would be creating an html5/canvas document and using createjs/javascript.

 

to rotate your circles you would need a loop (eg, "ticker" or setInterval) where you update each circles rotation and you indicated you want the user to input different rotation speeds (with buttons).  it might be better to use an input component to allow the user to input rotation speeds. eg, if ti is a textinput component (for the user to input rotation speed), and c1 and c2 were two of the circles:

 

this.ti.addEventListener("attached",ti_readyF.bind(this));
createjs.Ticker.addEventListener("tick", tickF.bind(this));

function tickF(){
if(!isNaN(this.r)){
this.c1.rotation += this.r;
this.c2.rotation += this.r*2;
}
}

 


function ti_readyF(){
$("#ti")[0].addEventListener("change",ti_changeF.bind(this));
}
function ti_changeF(e){
if(isNaN(Number(e.target.value))){
this.r = 0;
} else {
this.r = Number(e.target.value);
}
}

Votes

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
New Here ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Thanks very much ...
I'll try that and report back.
Best regards

Votes

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
New Here ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

Hello and good evening,
Thanks very much.
I added the script and tried it.
But unfortunately I get a warning message and the value from the
Text entry field is not applied to rotation.
Could you maybe send an example "animate" file with script included.
I must have made a mistake somewhere.
That would be great - they would help me a lot.
Thank you once again
Best regards
David

Votes

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
Community Expert ,
Feb 28, 2022 Feb 28, 2022

Copy link to clipboard

Copied

circles (kglad.com) for a working example

 

to download the fla, http://www.kglad.com/Files/forums/circles.fla

Votes

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
New Here ,
Mar 01, 2022 Mar 01, 2022

Copy link to clipboard

Copied

Hello kglad,
Thanks very much. that works great.
I added another object and this can rotate by a certain factor.
thanks for the quick support and best regards
David

Votes

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
Community Expert ,
Mar 01, 2022 Mar 01, 2022

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

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