Known Participant

Answered

Im Kreis angeordnetes, animiertes Menu

Forum|Forum|3 years ago
November 9, 2022
2 replies
1350 views

Hallo miteinander

Ich möchte gerne ein HTML5 Menu umsetzen welches wie folgt aussieht:

- 5 Menupunkte werden als Blütenblätter dargestellt, welche im Kreis angeordnet sind.

- Onmouseover über ein Blütenblatt soll das Blat vergrössern lassen.

- Alle anderen Blütenblätter "schrumpfen" bzw. sollen sich verkleinern.

- Onmouseout lässt das Blütenblatt wieder verkleinern bzw. alle Blütenblätter werden wieder auf den Urpsungszustand zurückgesetzt.

Ist dies möglich? Wo muss ich ansetzen?

Vielen Dank und freundliche Grüsse

Christoph

This topic has been closed for replies.

Correct answer kglad

Hi kglad

Wow. This is exactly what i wanted ... Thank you!
One last thing. It's a web menu. After enlarging the petals, i should be able to click to go to a specific URL.

All the best

Regards

Christoph

clear you cache if you want to test the updated rose_test with click events:

https://www.kglad.com/Files/forums/flower/ROSE_Test.html

here's your fla, https://www.kglad.com/Files/forums/flower/flower_v003.fla

be sure to edit urlA so it has the url's you want.

christoph_allerhandAuthor

Known Participant

Hallo. Brilliant. Google! Darauf muss man auch erst mal kommen.
Im Ernst. Ich habe Stunden damit verbracht Tutorials zu schauen, Helpfiles zu studieren und bin einfach nicht weiter gekommen. Als letzte Hoffnung habe ich gedacht, ich probiers mal im Forum wo die Experten sind. Aber danke trotzdem.
Viele Grüsse
Christoph

kglad

Community Expert

what did you expect? do you expect me to do your work for you?

in particular, there is so much ambiguity in your description there's no way to do your work for you without a discussion to determine exactly what you want, or even easier, just download your fla, get more information and then do your work for you.

anyway, pushing aside the bad start, these forums are best used for specific well-defined questions. for example, how do you define a mouseover: answer:

stage.enableMouseOver(10);

this.petal1.addEventListener("mouseOver",petal1F.bind(this));

function petal1F(e){
this.leaf1.scaleX=this.leaf1.scaleY = 2; // if you want to animate this, it's a little more complicated.

}

christoph_allerhandAuthor

Known Participant

Hallo kglad
Danke für Deine Antwort. Für den schlechten Start möchte ich mich entschuldigen. Und ja Du hast recht, meine Anfrage war schon sehr unspezifisch. Bisher habe ich 6 Movieclip Symbole erstellt welche je ein Blütenblatt darstellen. Die Animationen bestehen aus 30 Bildern und enthalten Masken. Keyframe 10 wäre der "Normalzustand". Wenn ein Onmouseover über ein Blütenblatt erfolgt, wäre die Idee, dass die Animation bis Keyframe 30 weiterläuft und dann stoppt. Alle anderen Blütenblätter würden rückwärts bis zu Keyframe 1 animert. Onmouoseout würde alles wieder auf den Normalzustand zurücksetzen (lle Blütenblätter wieder auf Keyframe 10). Vielleicht bin ich die ganze Sache aber auch schon falsch angegangen? Ich schaffe es z.B. nicht, den Symbolen Instanznamen zu vergeben. Und die braucht es ja.
Leider ist Javascript für mich Neuland. Und Nein, es ist nicht die Idee dass hier die Arbeit für mich erledigt wird.
Ich lade trotzdem mal ein FLA File hoch und vielleicht gibt es ja einen Hinweis wo ich anfangen kann, oder wo ich einen Denkfehler begehe.
Herzlichen Dank
und freundliche Grüsse
Christoph

kglad

Community Expert

yes, it doable.

you can start by learning how to code using adobe canvas, javascript and createjs. google tutorials for each.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded