Menünachbau

[1manni1]

Hallo alle zusammen.
Als nächstes Projekt will ich nun dieses Menü nachbauen.
http://images.templatemonster.com/screenshots/14100/14123.html

Nun ich hab nun eine Animation gemacht, die bei hover ausgeführt werden soll.
Nun jetzt 2 Fragen wie schaffe ich es das bei Bewegungstween keine dieser Tweens in der Bibilothek entstehen. Kann man sowas auch mit AS machen?
So und dann noch eine Frage. Bleiben Masken erhalten, wenn man sie in eine mc nutzt und diesen dann in einem anderen mc nutzt?

Vielleicht könntet ihr mir noch einen Tipp geben wie dies auch vielleicht ohne Masken zu lösen ist. Ich habe die derzeitige fla im Anhang

 

[umlart]

Kann man sowas auch mit AS machen?

ja kommt darauf an als was du es veröffentlichen willst (Flashversion), dann kann man auch sagen wie.

 

[1manni1]

ohh wusste nicht das es da Unterschiede gibt. Ja als Flashversion

 

[umlart]

ohh wusste nicht das es da Unterschiede gibt. Ja als Flashversion

welche Version..?
wenn 8 AS2 gibt es die Tween Klasse zb.
ansonsten via enterFrame oder setInterval die _x odr _y Pos. verändern..

 

[1manni1]

ok Danke hab mich mal informiert.
Nun habe ich das geschafft allerdings klappt es nur wenn man zum erstenmal RollOver macht.
Es ist schwer zum erklären deswegen habe ich die datei nun angehängt.

 

[1manni1]

sonst gibt es noch eine andere Möglichkeit dies zu realisieren.
Da ich ja jetzt bei RollOut wieder ein Tween erstellt habe.
Und muss ich das irgendwie in eine Schleife packen, damit es geht und wie kann ich es machen das wenn bei onRealease das Tween stehenbleibt.

Wie man sieht Fragen über Fragen

 

[Tobias Menzel]

Hi,

wenn Du bis morgen warten kannst, kann ich Dir ein kleines Beispiel fertig machen.

Gruß
.

 

[1manni1]

Ok ich habe es nun rausgefunden wie es geht und geschaft nun habe ich ein weiteres Problem:

import mx.transitions.Tween;
var tl:MovieClip = this;

for (var i = 1; i <= 5; i++) {
    this["button" + i + "_mc"].id = i;
	
    this["button" + i + "_mc"].onRollOver = function() {
        this.button_hover_tween.stop();
		this.button_hover_bg1_tween.stop();
		this.button_hover_bg2_tween.stop();
        this.button_text_tween.stop();
		
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_mc"], "_y", easeNone, tl["button" + this.id + "_hover_mc"]._y, 43, 5, false);
		this.button_hover_bg1_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_y", easeNone, tl["button" + this.id + "_hover_bg_mc"]._y, 43, 5, false);		
		this.button_hover_bg1_tween.onMotionFinished = function () {
			this.button_hover_bg2_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_xscale", tl["button" + this.id + "_hover_bg_mc"], -5000, 5, false);
		};
        this.button_text_tween = new Tween(tl["button" + this.id + "_text_mc"], "_y", mx.transitions.easing.Back.easeOut, tl["button" + this.id + "_text_mc"]._y, 72, 15, false);
    };
    this["button"+i+"_mc"].onRollOut = function() {
        this.button_hover_tween.stop();
        this.button_text_tween.stop();
        this.button_hover_tween = new Tween(tl["button"+this.id+"_hover_mc"], "_y", easeNone,tl["button"+this.id+"_hover_mc"]._y, 0, 10, false);
		this.button_hover_tween = new Tween(tl["button"+this.id+"_hover_bg_mc"], "_y", easeNone,tl["button"+this.id+"_hover_bg_mc"]._y, 0, 10, false);
        this.button_text_tween = new Tween(tl["button"+this.id+"_text_mc"], "_y", easeNone, tl["button"+this.id+"_text_mc"]._y, 0, 10, false);
    };
}

Nun ich habe wie man sieht einfach bei dem tween this.hover_button_bg1_mc diesen runterfahren lassen.
Nun will ich das sich der Movieclip wenn er unten ist scalt.
Die dies habe ich ja auch geschafft mit onMotionFinished. Allerdings wird er dann nicht gescalt... aber wenn ich mit trace("Hallo"); dies überprüfe wird die function ausgeführt.
Woran liegt es nun das es nicht gescalt wird denn einzeln klappt es.
Und wie schaffe ich es das es nicht nur in eine richtung scallt sonder gleichzeitig nach lings und nach rechts?

 

[1manni1]

Ok das habe ich geschafft. Habe es eben ein bisschen vereinfacht.

import mx.transitions.Tween;
var tl:MovieClip = this;

for (var i = 1; i <= 5; i++) {
    this["button" + i + "_mc"].id = i;
    
    this["button" + i + "_mc"].onRollOver = function() {
        this.button_hover_tween.stop();
        this.button_hover_bg_tween.stop();
        this.button_text_tween.stop();
        
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_mc"], "_y", easeNone, tl["button" + this.id + "_hover_mc"]._y, 43, 5, false);
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_xscale", easeNone, tl["button" + this.id + "_hover_bg_mc"]._y, 15000, 8, false);
        this.button_text_tween = new Tween(tl["button" + this.id + "_text_mc"], "_y", mx.transitions.easing.Back.easeOut, tl["button" + this.id + "_text_mc"]._y, 72, 15, false);
    };
    this["button"+i+"_mc"].onRollOut = function() {
        this.button_hover_tween.stop();
        this.button_text_tween.stop();
        this.button_hover_tween = new Tween(tl["button"+this.id+"_hover_mc"], "_y", easeNone,tl["button"+this.id+"_hover_mc"]._y, 0, 10, false);
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_xscale", easeNone, tl["button" + this.id + "_hover_bg_mc"]._y, 43, 5, false);
        this.button_text_tween = new Tween(tl["button"+this.id+"_text_mc"], "_y", easeNone, tl["button"+this.id+"_text_mc"]._y, 0, 10, false);
    };
}

Nun würde ich es aber noch gerne so machen das man wenn man draufdrückt, der Button untenbleibt...bis man auf einen anderen Button klickt, der dann runter gehen soll und der 1. soll dann wieder hochgehen.
Wie schaff ich das?

 

[Tobias Menzel]

Hi,

Du musst den aktiven Button in einer Variable speichern:

import mx.transitions.Tween;
var tl:MovieClip = this;

var currenButton:MovieClip;

for (var i = 1; i <= 5; i++) {
    this["button" + i + "_mc"].id = i;
    
    this["button" + i + "_mc"].onRollOver = function() {
        if (this == currenButton) return;
        this.button_hover_tween.stop();
        this.button_hover_bg_tween.stop();
        this.button_text_tween.stop();
        
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_mc"], "_y", easeNone, tl["button" + this.id + "_hover_mc"]._y, 43, 5, false);
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_xscale", easeNone, tl["button" + this.id + "_hover_bg_mc"]._y, 15000, 8, false);
        this.button_text_tween = new Tween(tl["button" + this.id + "_text_mc"], "_y", mx.transitions.easing.Back.easeOut, tl["button" + this.id + "_text_mc"]._y, 72, 15, false);
    };
    this["button"+i+"_mc"].onRollOut = function() {
        if (this == currenButton) return;
        this.button_hover_tween.stop();
        this.button_text_tween.stop();
        this.button_hover_tween = new Tween(tl["button"+this.id+"_hover_mc"], "_y", easeNone,tl["button"+this.id+"_hover_mc"]._y, 0, 10, false);
        this.button_hover_tween = new Tween(tl["button" + this.id + "_hover_bg_mc"], "_xscale", easeNone, tl["button" + this.id + "_hover_bg_mc"]._y, 43, 5, false);
        this.button_text_tween = new Tween(tl["button"+this.id+"_text_mc"], "_y", easeNone, tl["button"+this.id+"_text_mc"]._y, 0, 10, false);
    };
    this["button"+i+"_mc"].onRelease = function() {
        var cb = currentButton; // aktiven Button merken ...
        currentButton = this; // dies wird der neue aktive Button
        cb.onRollOut(); // vorherigen aktiven Button deaktivieren
    }
}

Gruß
.