Flashhilfe.de - Flash Community

Textfeld mit variabler Höhe richtig ausrichten [Flash 9]

 


AntwortenRegistrieren Seite1  

mnemonik#1
Benutzerbild von mnemonik
Beiträge: 33
Registriert: Dec 2008

21.03.2011, 21:01

Guten Abend,

ich plane einen Newsbereich dessen Inhalt ich über eine XML Datei steuere.

Struktur:

-news
    |- date
    |- headline
    |- text (Textlänge Variabel)
    |- imagepath (optional) // Möglichkeit ein Bild zu laden
    |- imagedesc (optional) // Bildbeschreibung
    |- link (optional) // Möglichkeit einen Link einzufügen
    |- linkdesc (optional) // Linkbeschreibung

Die Daten zu laden ist kein Problem - nur das Ausrichten bereitet mir durch die flexible Höhe Probleme:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
...
quantity = news.firstChild.childNodes.length;
   news_array = [];
   for (var i = 0; i < quantity; i++)
   {
        news_array[i] = [];
        news_array[i][0] = news.firstChild.childNodes[i].attributes.date;
        news_array[i][1] = news.firstChild.childNodes[i].attributes.headline;
                  // usw.
   }
...


Genau hier liegt der Fehler:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
...
_root.createEmptyMovieClip("news_mc",1);
height_array = [];

for (var i = 0; i < quantity; i++)
{
     _root.news_mc.createEmptyMovieClip("con" + i + "_mc",i);
     _root.news_mc["con" + i + "_mc"].createTextField("date" + i + "_txt",i,0,0,300,20);
     _root.news_mc["con" + i + "_mc"]["date" + i + "_txt"].text = news_array[i][0];
 
     _root.news_mc["con" + i + "_mc"].createTextField("headline" + i + "_txt",i*2,0,0,300,40);
     _root.news_mc["con" + i + "_mc"]["headline" + i + "_txt"].text = news_array[i][1];
     _root.news_mc["con" + i + "_mc"]["headline" + i + "_txt"]._y = _root.news_mc["con" + i + "_mc"]["date" + i + "_txt"]._y + 20;
     
         // usw

     height_array[i] = _root.news_mc["con" + i + "_mc"]._height;
     
     if(i > 0)
     {
        _root.news_mc["con" + i + "_mc"]._y = ((_root.news_mc["con" +( i-1 )+ "_mc"]._y) + (height_array[(i-1)])) + 30;
     } else {
        _root.news_mc.con0_mc._y = 0;
     }
 
 
}


Hab lange nichts mehr mit Flash gemacht und finde keine Möglichkeit mir das flexibel gestalten zu können. Hätte jedes textfeld die gleiche Höhe kann ich das gut ausrichten - bloss eben nicht mit einem flexiblen Textfeld für den Text (WordWrap, autoSize etc.).

Könnt' Ihr mal drüberschauen und mir mal einen Denkanstoss geben?

Danke im Vorraus. das M
springer#2
Benutzerbild von springer
Beiträge: 4909
Wohnort: zuhaus
Registriert: Apr 2004

22.03.2011, 21:08

hi,
ist vom ansatz her dasselbe. einfach alle texte in ein array pushen und am schluss alles ausrichten ( funktion measure() )


ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var str:String = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

_root.createEmptyMovieClip("news_mc",1);

var allItems:Array = new Array();

for( var i:Number = 0; i < 5; i++ )
{
      var clip:MovieClip = _root.news_mc.createEmptyMovieClip("con" + i + "_mc", i);
     
      var tf:TextField = clip.createTextField("date" + i + "_txt",i,0,0,300,20);
      tf.multiline = true;
      tf.wordWrap = true;
       tf.text = str;
      tf.autoSize = true;
      allItems.push( tf );
}

measure();


function measure():Void
{
     var y:Number = 0;
     var spacer:Number = 5;
     for( var i:Number = 0; i < allItems.length; i++ )
     {
        allItems[ i ]._y = y;
        y += allItems[ i ]._height + spacer;
     }
}
lieber chips essen und danach voller zweifel sein, als voller zweifel chips essen...
mnemonik#3
Benutzerbild von mnemonik
Beiträge: 33
Registriert: Dec 2008

Themenautor/in

23.03.2011, 21:22

Hallo Springer,

erstmal vielen Dank für Deine Mühe. Mit einem einzigen Textfeld funktioniert das wunderbar. Jetzt will ich ja die oben genannte Struktur verfolgen und flexibel bleiben, weil ich ja ggf. ein optionales Bild oder eine Beschreibung hinzufügen will - von der Textlänge des Nachrichtentextes mal ganz abgesehen.

In meiner XML habe ich derzeit folgende Daten stehen (...worin nicht das Problem liegt, nur mal der Vollständigkeit halber):
PHP:
1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>

<newslist>
    <news date="01.01.2011" headline="Head 1" message="Lorem ipsum ...."/>
    <news date="02.01.2011" headline="Head 2" message="Lorem ipsum ...."/>
    <news date="03.01.2011" headline="Head 3" message= Lorem Ipsum ...."/>
</newslist>


Diese lade ich testweise mit:
ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
stop();
var news = new XML();
news.ignoreWhite = true;
news.load("xml/news.xml");
news.onLoad = function(success:Boolean)
{
     quantity = news.firstChild.childNodes.length;
     news_array = [];
     for (var i = 0; i < quantity; i++)
     {
        news_array[i] = [];
        news_array[i][0] = news.firstChild.childNodes[i].attributes.date;
        news_array[i][1] = news.firstChild.childNodes[i].attributes.headline;
        news_array[i][2] = news.firstChild.childNodes[i].attributes.headline;
     }
     gotoAndStop(2);
};


Ich habe Deine Vorschläge berücksichtigt und mein jetziger Ansatz ist folgender:
ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var allClips:Array = new Array();
var allItems:Array = new Array();

_root.createEmptyMovieClip("news_mc",1);

for (var i = 0; i < quantity; i++)
{
     this["clip" + i] = _root.news_mc.createEmptyMovieClip("con" + i + "_mc", i);
     
     this["clip" + i + "_date"] = this["clip" + i].createTextField("date" + i + "_txt", i, 0, 0, 300, 20);
     this["clip" + i + "_date"].text = news_array[i][0];
     this["clip" + i + "_date"].multiline = true;
     this["clip" + i + "_date"].autoSize = true;
     this["clip" + i + "_date"].wordWrap = true;
     
     allItems.push(this["clip" + i + "_date"]);
     /*
     this["clip" + i + "_headline"] = this["clip" + i].createTextField("headline" + i + "_txt", i*20, 0, 0, 300, 20);
     this["clip" + i + "_headline"].text = news_array[i][1];
     this["clip" + i + "_headline"].multiline = true;
     this["clip" + i + "_headline"].autoSize = true;
     this["clip" + i + "_headline"].wordWrap = true;
     
     allItems.push(this["clip" + i + "_headline"]);
     */

     trace(allItems);
     
     allClips.push( _root.news_mc["con" + i + "_mc"]);
}

measureText();
measureClips();


function measureClips():Void
{
     var y:Number = 0;
     var spacer:Number = 25;
     for (var i:Number = 0; i < allClips.length; i++)
     {
        allClips[i]._y = y;
        y += allClips[i]._height + spacer;
     }
}

function measureText():Void
{
     var y:Number = 0;
     var spacer:Number = 5;
     for (var i:Number = 0; i < allItems.length; i++)
     {
        allItems[i]._y = y;
        y += allItems[i]._height + spacer;
     }
}


Ich versuche nämlich, das ich den Abstand zwischen den Movieclips definieren kann und innerhalb der Movieclips die einzelnen Elemente auch noch sauber in der Höhe mit einem Abstand ausrichten kann. Das Prinzip habe ich verstanden, dennoch bekomme ich die einzelnen Textfelder nicht sauber untereinander ausgerichtet:

Datum
Headline

Message


Datum
Headline

Message etc.

Liebe Grüße und Danke.
das [m]
springer#4
Benutzerbild von springer
Beiträge: 4909
Wohnort: zuhaus
Registriert: Apr 2004

24.03.2011, 11:38

ok, also du willst im prinzip movieclips mit texten und bildern drin, welche innerhalb des clips vertikal untereinander liegen. von diesen movieclips hast du dann auch mehrere, welche du dann noch untereinander ausrichten willst. also im sinne von:

- movieclip
    - text
    - bild
    - text
    - text
- movieclip
    - text
    - bild
    - text
...


verstehe ich das richtig?
lieber chips essen und danach voller zweifel sein, als voller zweifel chips essen...
mnemonik#5
Benutzerbild von mnemonik
Beiträge: 33
Registriert: Dec 2008

Themenautor/in

24.03.2011, 13:25

Hallo Springer,

genau. Also quasi so:

28.04.2011
Grosses Eiersuchen mit Rüdiger

Wir treffen uns diese Jahr zum ...

Bild -> Osterhase
Beschreibung: Osterhase am Nachmittag

26.04.2011
Rüdiger freut sich auf das Eiersuchen

Rüdiger hat zum alljährlichen Eiersuchen etwas in seinem Blog gepostet...
Lorem
Lorem

Link-> Rüdis Blog
Hier kommst DU auf Rüdis Seite


Durch die verschiedenen Daten muss ich ja das Ganze in Clips packen. Bildgröße ist kein Ding, da ich die auf die gleiche Größe schneide. Nur die Höhe der Textfelder und das Ausrichten zueinander, sowie die optionalen Möglichkeiten bekomme ich nicht so wirklich hin.

Danke Dir schonmal für Dein Engagement.

Liebe Grüße
mnemonik#6
Benutzerbild von mnemonik
Beiträge: 33
Registriert: Dec 2008

Themenautor/in

28.03.2011, 22:12

Guten Abend zusammen,

jetzt bin ich ein wenig weiter gekommen:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var news_date:Array = new Array();
var news_head:Array = new Array();
var news_items:Array = new Array();
var news_spacer:Number = 20;
var news_quantity:Number;
var news_mc:MovieClip = this.createEmptyMovieClip("news_mc", this.getNextHighestDepth());

var news:XML = new XML();
news.ignoreWhite = true;
news.load("xml/news.xml");

news.onLoad = function(success:Boolean)
{
     var nodes = news.firstChild.childNodes;
     news_quantity = nodes.length;
 
     for (var i:Number = 0; i < news_quantity; i++)
     {
        news_date[i] = nodes[i].attributes.date;
        news_head[i] = nodes[i].attributes.head;
        trace(news_date[i]);
     }
     createNewsList();
};

function createNewsList()
{
     for (var i = 0; i < news_quantity; i++)
     {
        var news_item = news_mc.createEmptyMovieClip("news_" + i + "_mc", i * 103);
        var date_text = news_item.createTextField("date" + i + "_txt", i * 10, 0, 0, 300, 20);
        date_text.text = news_date[i];
        news_item["date" + i + "_txt"]._y = 0;
 
        var head_text = news_item.createTextField("head" + i + "_txt", i * 20, 0, 0, 300, 20);
        head_text.text = news_head[i];
        head_text.multiline = true;
        head_text.wordWrap = true;
        head_text.autoSize = true;
        news_item["head" + i + "_txt"]._y = news_item["date" + i + "_txt"]._height;
 
        news_items.push(news_item);
     }
     alignClips();
}

function alignClips()
{
     var y:Number = 0;
 
     for (var i:Number = 0; i < news_items.length; i++)
     {
        news_items[i]._y = y;
        y += news_items[i]._height + news_spacer;
     }
}


Jetzt schluckt er mir leider das erste Datum bei der Ausgabe (Textfeld).

EDIT: Fehler gefunden Cliptiefe i * 10 bei i = 0 !!!


Alles andere funzt soweit. Kann mir jemand sagen, warum das so ist? Und kann ich evtl. den obigen Code schlanker und ggf. flexibler gestalten?

Vielen Dank schonmal.
Geändert von mnemonik am 28.03.11 um 22:35 Uhr

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Impressum
© 1999-2020 Sebastian Wichmann - Flashhilfe.de