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

Im Kreis angeordnetes, animiertes Menu

Explorer ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

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

 

Views

827

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

Community Expert , Nov 17, 2022 Nov 17, 2022

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.

Votes

Translate

Translate
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

yes, it doable.

 

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

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
Explorer ,
Nov 13, 2022 Nov 13, 2022

Copy link to clipboard

Copied

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

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 ,
Nov 13, 2022 Nov 13, 2022

Copy link to clipboard

Copied

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.

}

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
Explorer ,
Nov 14, 2022 Nov 14, 2022

Copy link to clipboard

Copied

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

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 ,
Nov 14, 2022 Nov 14, 2022

Copy link to clipboard

Copied

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.

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
Explorer ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

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

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 ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

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

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
Explorer ,
Nov 16, 2022 Nov 16, 2022

Copy link to clipboard

Copied

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

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 ,
Nov 16, 2022 Nov 16, 2022

Copy link to clipboard

Copied

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.

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
Explorer ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

hi kglad

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

 

3states_01.png

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

3states_02.png

 

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

best regards
christoph

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 ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

good explanation.

 

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

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
Explorer ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

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

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 ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

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.

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
Explorer ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

Hi kglad

thank you. this is perfect ...

regards

christoph

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 ,
Nov 17, 2022 Nov 17, 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