Im Kreis angeordnetes, animiertes Menu

[christoph_allerhand]

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

[kglad]

yes, it doable.

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

[christoph_allerhand]

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]

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_allerhand]

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]

actually, your start will makes it easier to encode.

each petal being a movieclip that has a "normal" state is helpful.  now assign that frame a label, eg "normal".

each petal has an animation from normal to frame 30 where you should have this.stop() AND a frame label, eg "end";

at this point, you should "secure" your work:  save your fla with with a version number appended to the name.  eg, if you've been calling your project flower.fla, save as flower_v000.fla.  close and reopen flower_v000.fla to ensure it's not corrupted. 

now, if your petals are all in the same layer, click their keyframe (to select all the petals) > right click over the on-stage petals > click distribute to layers.  you can group those layers into a folder to keep things tidy.  save as flower_v001.fla.

if each petal is already all on its own layer with no other object, you don't have to do anything in the above paragraph.

now, select each petal and in the properties panel assign each an instance name, eg, petal_1, petal_2,..., petal_6.

once that is done, we can encode the entire project in ~ 30 lines of code.  but before doing that, i want to make sure you get the above done correctly.  let me know.

[christoph_allerhand]

Hallo kglad

Herzlichen Dank für Deine Hilfe! Ich habe nun weiter am File gearbeitet. Ich hoffe ich habe alles richtig gemacht.
Zusätzlich habe ich auch das Label "start" bei Frame 1 vergeben. Etwas anderes ist mir noch aufgefallen. Die vergrösserten Blütenblätter ragen teilweise aus der Leinwand heraus. Kann ich einfach die Leinwand vergrössern oder gibt es ein andere Lösung?
Freundliche Grüsse
Christoph

[kglad]

stage.enableMouseOver(10);
var i;
var last_e;
createjs.Ticker.addEventListener("tick", tickF.bind(this));

for(i=1;i<=6;i++){
this["petal_"+i].addEventListener("mouseover",petalOverF.bind(this));
this["petal_"+i].addEventListener("mouseout",petalOutF.bind(this));
}

function petalOverF(e){
last_e = e;
}
function petalOutF(e){
last_e = null;
}
function tickF(){
petalF.bind(this)();
}
function petalF(){
for(i=1;i<=6;i++){
if(last_e!=null){
if(last_e.currentTarget.name.indexOf(i)>-1){
// this is the moused-over petal, if there is one
if(last_e.currentTarget.currentLabel!="end"){
last_e.currentTarget.gotoAndStop(last_e.currentTarget.currentFrame+1);
}
} else {
if(this["petal_"+i].currentFrame>0){
this["petal_"+i].gotoAndStop(this["petal_"+i].currentFrame-1);
}
}
} else {
// this is not moused over
if(last_e!=null){
console.log(last_e);
}
if(this["petal_"+i].currentFrame!=0){
this["petal_"+i].gotoAndStop(this["petal_"+i].currentFrame-1);
}
}
}
}

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

https://www.kglad.com/Files/forums/flower.fla

[christoph_allerhand]

hi kglad

thank you so much for helping me! i tried to make it work with your code. I'm not sure if my fla file was uploaded at all? If yes, can you access it?

If no, i have a link to Google Drive here:

flower_v002.fla 

Something still seems wrong.

Best regards

Christoph

[kglad]

what are "start" and "normal" frames?

or download my fla and see how those frames differ from what i thought you had on the petals' timelines.

[christoph_allerhand]

hi kglad

thank you. the idea is, at the beginning all etals ar in "normal" state.

onmouseover brings the choosen petal to the "end" state. all other petals are getting smaller and are now in "start" status.

i downloaded your fla file and i changed a lot. but I'm still groping in the dark.

best regards
christoph

[kglad]

good explanation.

is this working the way you want: https://www.kglad.com/Files/forums/flower/ROSE_Test.html

[christoph_allerhand]

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

[kglad · Accepted solution]

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_allerhand]

Hi kglad

thank you. this is perfect ...

regards

christoph

[kglad]

you're welcome.