Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

name666 · 01-12-2003, 20:38

Beim rumbasteln für einen neuen Entwurf für meine HP ist das hier entstanden und ich hab mir gedacht vielleicht kanns ja jemand brauchen. Es ist ein dynamisches XML-Menü. Ich muss allerdings zugeben dass es tlw.sicher etwas mühsam geskriptet ist. Liegt daran das ichs ned besser kann und außerdem noch keine Zeit zum optimieren hatte. Jegliche Form von Kritik und Verbesserungsvorschlägen sind daher willkommen!

Einfach folgendes Script ins erste Frame:

ActionScript:

stop();
function start() {
    String.prototype.replace = function(sep, ins) {
        return this.split(sep).join(ins);
    };
    news_format = new TextFormat();
    news_format.size = 8;
    news_format.font = "pixelFJ8pt1";
    news_format.align = "left";
    news_xml = new XML();
    news_xml.ignoreWhite = true;
    news_xml.load("news.txt");
    news_xml.onLoad = function(status) {
        if (status) {
            create();
        }
    };
}
function create() {
    news = news_xml.firstChild.childNodes;
    for (i=0; news[i].attributes.title != undefined; i++) {
        this.createEmptyMovieClip("news_box"+i, i+1);
        with (this["news_box"+i]) {
            beginFill(0x7498C8, 50);
            moveTo(14, 15+i*12);
            lineTo(138, 15+i*12);
            lineTo(138, 25+i*12);
            lineTo(14, 25+i*12);
            endFill();
            createTextField("news_root"+i, i+101, 14, 11+i*12, 116, 16);
            set("news_root"+i+".selectable", false);
            set("news_root"+i+".html", true);
            set("news_root"+i+".htmlText", "<b>"+news[i].attributes.title+"</b>");
            with (eval("news_root"+i)) {
                setTextFormat(news_format);
            }
        }
        this["news_box"+i]._y = 0;
        this["news_box"+i].id = i;
        this["news_box"+i].onPress = function() {
            expand(this.id);
        };
    }
}
start();
function expand(active) {
    breite = 124;
    hoehe = 25+active*12;
    q = 0;
    this.onEnterFrame = function() {
        expanding(active);
    };
}
function expanding(active) {
    for (i=0; news[i].attributes.title != undefined; i++) {
        switch (true) {
        case (i<active) :
            this["news_box"+i]._y = this["news_box"+i]._y+(0-this["news_box"+i]._y)/10;
            with (this["news_box"+i]) {
                clear();
                beginFill(0x7498C8, 50);
                moveTo(14, 15+i*12);
                lineTo(138, 15+i*12);
                lineTo(138, 25+i*12);
                lineTo(14, 25+i*12);
                endFill();
                news_root_content.removeTextField();
            }
            break;
        case (i == active) :
            this["news_box"+i]._y = this["news_box"+i]._y+(0-this["news_box"+i]._y)/10;
            with (this["news_box"+i]) {
                createTextField("news_root_content", i+201, 14, 21+i*12, 390, 16);
                news_root_content.selectable = false;
                news_root_content.multiline = true;
                news_root_content.autosize = true;
                news_root_content.wordWrap = true;
                news_root_content.html = true;
                showing = new String(news[i].firstChild);
                showing = showing.replace("[bold]", "<b>");
                showing = showing.replace("[/bold]", "</b>");
                showing = showing.replace("[farbe#", "<font color='#");
                showing = showing.replace("[/farbe]", "</font>");
                showing = showing.replace("]", "'>");
                showing = news[i].attributes.date+"<br>"+showing;
                news_root_content.htmlText = showing.substring(0,q);
                if (showing.length+250 <= q) {
                    delete this.onEnterFrame;
                } else {
                    q = q+5;
                }
                with (news_root_content) {
                    setTextFormat(news_format);
                }
                breite = breite+(406-breite)/10;
                hoehe = hoehe+(( 21+i*12+news_root_content._height)-hoehe)/5;
                clear();
                beginFill(0x7498C8, 50);
                moveTo(14, 15+i*12);
                lineTo(breite, 15+i*12);
                lineTo(breite, hoehe+10);
                lineTo(14, hoehe+10);
                endFill();
            }
            break;
        case (i>active) :
            this["news_box"+i]._y = this["news_box"+i]._y+(this["news_box"+active].news_root_content._height+6-this["news_box"+i]._y)/10;
            with (this["news_box"+i]) {
                clear();
                beginFill(0x7498C8, 50);
                moveTo(14, 15+i*12);
                lineTo(138, 15+i*12);
                lineTo(138, 25+i*12);
                lineTo(14, 25+i*12);
                endFill();
                news_root_content.removeTextField();
            }
            break;
        }
    }
}

aja und die datei news.txt die im gleichen Ordner liegen muss ist so aufgebaut:

Code:

<menu>
<news title="NEWS 1" date="16.11.2003">[farbe#dddddd]In farbe[/farbe]
[bold]fett[/bold].
oder ganz normal</news>
<news title="NEWS 2" date="22.11.2003">Update 1</news>
<news title="NEWS 3" date="22.11.2003">Update 2</news>
</menu>

warrantmaster · 02-12-2003, 08:38

hat was

xml ist cool, kann man schöne sachen ausbrüten.

einige kleine sachen:

bei klick auf aktiven (ausgefahrenen) button wär ein "wieder-einfahren " gut, um die sektion schließen zu können.
derzeit wird die funktion ausfahren nochmals abgearbeitet, sieht nicht gut aus.

positionierung über variablen, also nicht fest, am besten alles in einen mc, das ist dann wirklich flexibel.

allgemein würde ich die sache dynamischer handeln, also
die paint-funktion z.b ebenfalls mit variablen arbeiten lassen.

leg mal in die xml einen längeren content z.b. in news1,
bei klick auf den button schieben sich die beiden unteren
zu langsam nach unten, der link1 ist schon in voller größe
da, dann erst schieben sich die beiden unteren langsam
über link1 auf position.

sonst eine schöne idee, vor allem mit die textformatierung
ist nice.
bau mal noch ein wenig rum, das kann ein richtig schönes teil werden.

btw, ein link zum anschauen ist bei sowas immer gut

grz

name666 · 06-12-2003, 13:01

Hier mal wieder ein Update. Ich seh nur dass das ganze immer komplizierter wird, aber mir fällt ned wirklich was ein was ich vereinfachen könnte.Vielleicht hat der eine oder andere ne idee wie man das vereinfachen kann weil es is zur zeit glaub ich auch recht rechenintensiv. Ich hoffe es kann wer helfen.

zum anschaun

der code:

ActionScript:

stop();
function start() {
    String.prototype.replace = function(sep, ins) {
        return this.split(sep).join(ins);
    };
    news_format = new TextFormat();
    news_format.size = 8;
    news_format.font = "pixelFJ8pt1";
    news_format.align = "left";
    news_xml = new XML();
    news_xml.ignoreWhite = true;
    news_xml.load("news.txt");
    news_xml.onLoad = function(status) {
        if (status) {
            create();
        }
    };
}
function draw(which, width, height) {
    with (this["news_box"+which]) {
        clear();
        beginFill(0x7498C8, 50);
        moveTo(14, 15+which*12);
        lineTo(14+width, 15+which*12);
        lineTo(14+width, height);
        lineTo(14, height);
        endFill();
    }
}
function create() {
    news = news_xml.firstChild.childNodes;
    for (i=0; news[i].attributes.title != undefined; i++) {
        this.createEmptyMovieClip("news_box"+i, i+1);
        draw(i, 124, (25+i*12));
        with (this["news_box"+i]) {
            createTextField("news_root"+i, i+101, 14, 11+i*12, 116, 16);
            set("news_root"+i+".selectable", false);
            set("news_root"+i+".html", true);
            set("news_root"+i+".htmlText", "<b>"+news[i].attributes.title+"</b>");
            with (eval("news_root"+i)) {
                setTextFormat(news_format);
            }
        }
        this["news_box"+i].id = i;
        this["news_box"+i].q = 0;
        this["news_box"+i].hoehe = 25+i*12;
        this["news_box"+i].breite = 124;
        this["news_box"+i].out = "false";
        this["news_box"+i].onPress = function() {
            if (this.out=="true") {
                this.out = "false";
            } else {
                this.out = "true";
            }
            expand(this.id);
        };
    }
}
start();
function expand(active) {
    delete this.onEnterFrame;
    this.onEnterFrame = function() {
        for (x=0; news[x].attributes.title != undefined; x++) {
            if (x != active) {
                this["news_box"+x].q = 0;
                this["news_box"+x].hoehe = 25+x*12;
                this["news_box"+x].breite = 124;
                this["news_box"+x].out = "false";
            }
        }
        expanding(active);
    };
}
function expanding(active) {
    for (i=0; news[i].attributes.title != undefined; i++) {
        switch (true) {
        case (i<active) :
            this["news_box"+i]._y = this["news_box"+i]._y+(0-this["news_box"+i]._y)/5;
            draw(i, 124, (25+i*12));
            this["news_box"+i].news_root_content.removeTextField();
            break;
        case (i == active) :
            this["news_box"+i]._y = this["news_box"+i]._y+(0-this["news_box"+i]._y)/5;
            with (this["news_box"+i]) {
                createTextField("news_root_content", i+201, 14, 21+i*12, 390, 16);
                news_root_content.selectable = false;
                news_root_content.multiline = true;
                news_root_content.autosize = true;
                news_root_content.wordWrap = true;
                news_root_content.html = true;
                showing = new String(news[i].firstChild);
                showing = showing.replace("[bold]", "<b>");
                showing = showing.replace("[/bold]", "</b>");
                showing = showing.replace("[farbe#", "<font color='#");
                showing = showing.replace("[/farbe]", "</font>");
                showing = showing.replace("]", "'>");
                showing = news[i].attributes.date+"<br>"+showing;
                news_root_content.htmlText = showing.substring(0, this["news_box"+i].q)+"<br><br>";
                with (news_root_content) {
                    setTextFormat(news_format);
                }
                if (this["news_box"+i].out=="true") {
                    if (showing.length+350<=this["news_box"+i].q) {
                        delete this.onEnterFrame;
                    } else {
                        if (this["news_box"+i].q<0) {
                            this["news_box"+i].q = 0;
                        }
                        this["news_box"+i].q = this["news_box"+i].q+5;
                    }
                    this["news_box"+i].breite = this["news_box"+i].breite+(392-this["news_box"+i].breite)/10;
                    this["news_box"+i].hoehe = this["news_box"+i].hoehe+((21+i*12+news_root_content._height)-this["news_box"+i].hoehe)/5;
                    draw(i, this["news_box"+i].breite, this["news_box"+i].hoehe);
                } else {
                    if (0>=this["news_box"+i].q) {
                        this["news_box"+i].news_root_content.removeTextField();
                        createTextField("news_root_content", i+201, 14, 21+i*12, 124,4);
                    }
                    if (-350>=this["news_box"+i].q) {
                        delete this.onEnterFrame;
                    } else {
                        if (this["news_box"+i].q>showing.length) {
                            this["news_box"+i].q = showing.length;
                        }
                        this["news_box"+i].q = this["news_box"+i].q-5;
                    }
                    this["news_box"+i].breite = this["news_box"+i].breite+(news_root_content._width-this["news_box"+i].breite)/10;
                    this["news_box"+i].hoehe = this["news_box"+i].hoehe+((21+i*12+news_root_content._height)-this["news_box"+i].hoehe)/5;
                    draw(i, this["news_box"+i].breite, this["news_box"+i].hoehe);
                }
            }
            break;
        case (i>active) :
            this["news_box"+i]._y = this["news_box"+i]._y+((this["news_box"+active].news_root_content._height-4-this["news_box"+i]._y)/5);
            draw(i, 124, (25+i*12));
            this["news_box"+i].news_root_content.removeTextField();
            break;
        }
    }
}

derdiedas · 08-12-2003, 07:45

*Thumbs up*

sehr schöne idee ein collapsible XML-Menu zum darstellen von News zu verwenden! bin gespannt wie das weitergeht.

p.s. dein textformat wendet nicht an. bei mir wird der default-font displayed.

greets ddd

name666 · 09-12-2003, 21:06

das mit der schrift sollte behoben sein, das kommt davon wenn man nur am eigenen pc testet wo die font natürlich is..

bin immer noch dankbar für hilfe wie ich diese furchtbar CPU-lastigen onEnterFrame 's vermeiden bzw. vereinfachen kann...
erwarte natürlich ned unbedingt kompette lösungen.nur tips und anregungen wie das prinzipiel ginge!

hugeinc · 31-12-2003, 13:45

Hi ho,
sorry, wenn ich erst jetzt antworte.
Habs grad erst gesehen.
Wenn es dir nichts ausmacht, würde ich an dem Teil nochwas "rumbasteln" und es dann ins Forum stellen.
Vorab ein paar Infos:
deine TXT würd ich als UTF-8 abspeichern (nicht Assci).
Wenn du die txt als xml umbenennst, können z.B. deine Zusatzeinträge wie [farbe... nicht gelesen werden.
Ich bastel grad auch noch an einer Geschichte, dass du dann extern über die XML das Aussehen noch bestimmen kannst.
Meld mich dann nächstes Jahr

Greets, Micha

31-12-2003, 13:45	#6 (permalink)
hugeinc #no.991 @ MM Registriert seit: Apr 2003 Ort: München Beiträge: 327	Hi ho, sorry, wenn ich erst jetzt antworte. Habs grad erst gesehen. Wenn es dir nichts ausmacht, würde ich an dem Teil nochwas "rumbasteln" und es dann ins Forum stellen. Vorab ein paar Infos: deine TXT würd ich als UTF-8 abspeichern (nicht Assci). Wenn du die txt als xml umbenennst, können z.B. deine Zusatzeinträge wie [farbe... nicht gelesen werden. Ich bastel grad auch noch an einer Geschichte, dass du dann extern über die XML das Aussehen noch bestimmen kannst. Meld mich dann nächstes Jahr Greets, Micha __________________ Arbeit ist keine Lösung...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

02-12-2003, 08:38	#2 (permalink)
warrantmaster _//\\#//\\_ Registriert seit: Jan 2003 Beiträge: 7.060	hat was xml ist cool, kann man schöne sachen ausbrüten. einige kleine sachen: bei klick auf aktiven (ausgefahrenen) button wär ein "wieder-einfahren " gut, um die sektion schließen zu können. derzeit wird die funktion ausfahren nochmals abgearbeitet, sieht nicht gut aus. positionierung über variablen, also nicht fest, am besten alles in einen mc, das ist dann wirklich flexibel. allgemein würde ich die sache dynamischer handeln, also die paint-funktion z.b ebenfalls mit variablen arbeiten lassen. leg mal in die xml einen längeren content z.b. in news1, bei klick auf den button schieben sich die beiden unteren zu langsam nach unten, der link1 ist schon in voller größe da, dann erst schieben sich die beiden unteren langsam über link1 auf position. sonst eine schöne idee, vor allem mit die textformatierung ist nice. bau mal noch ein wenig rum, das kann ein richtig schönes teil werden. btw, ein link zum anschauen ist bei sowas immer gut grz

08-12-2003, 07:45	#4 (permalink)
derdiedas funkdisziplin Registriert seit: Jul 2003 Beiträge: 2.790	Thumbs up sehr schöne idee ein collapsible XML-Menu zum darstellen von News zu verwenden! bin gespannt wie das weitergeht. p.s. dein textformat wendet nicht an. bei mir wird der default-font displayed. greets ddd

09-12-2003, 21:06	#5 (permalink)
name666 Neuer User Registriert seit: Jan 2002 Ort: Wien / Perchtoldsdorf / Graz Beiträge: 251	das mit der schrift sollte behoben sein, das kommt davon wenn man nur am eigenen pc testet wo die font natürlich is.. bin immer noch dankbar für hilfe wie ich diese furchtbar CPU-lastigen onEnterFrame 's vermeiden bzw. vereinfachen kann... erwarte natürlich ned unbedingt kompette lösungen.nur tips und anregungen wie das prinzipiel ginge!