Drehen und gleichzeitiges Formatieren eines Textfeldes

  • Einen wunderschönen guten Tag an alle Flasher!

    Ich habe ein Problem und hoffe mir kann jemand helfen.
    Lösungen oder Anregungen sind herzlich Willkommen. Also Ich schilder euch erstmal mein Problem und zeige euch dann Stück für Stück wie Ich versucht habe das Problem zu lösen. Zwischendurch werde ich durchnummeriert Fragen stellen.

    Ziel:
    Ziel ist es Text in ein Eingabefeld zu tippen welcher dann in einem Ausgabefeld angezeigt wird. Den Text in dem Ausgabefeld soll man nun durch aktivieren von Checkboxen unterstreichen bzw. schräg stellen können. Des weiteren soll man das Textfeld samt Inhalt mit Hilfe eines Sliders drehen können. Was von beidem man nun zuerst macht ist egal.

    Zuerst mein Lösungsansatz für das Unterstreichen bzw. schräg stellen des Textes.

    import fl.controls.CheckBox;

    //Erstellen des Textformates
    var outputFormat:TextFormat = new TextFormat();

    //Erstellen des Textfeldes zur Eingabe
    var tfInput:TextField = new TextField();
    tfInput.x = 200;
    tfInput.y = 10;
    tfInput.width = 100;
    tfInput.height = 25;
    tfInput.border = true;
    tfInput.visible = true;
    tfInput.type = "input";
    addChild(tfInput);

    //Erstellen des Textfeldes zur Ausgabe
    var tfOutput:TextField = new TextField();
    tfOutput.x = 10;
    tfOutput.y = 10;
    tfOutput.width = 100;
    tfOutput.height = 25;
    tfOutput.border = true;
    tfOutput.visible = true;
    addChild(tfOutput);

    //Erstellen der CheckBox zum Unterstreichen
    var underlineCb:CheckBox = new CheckBox();
    underlineCb.move(300, 300);
    underlineCb.label = "Unterstreichen";
    addChild(underlineCb);

    //Erstellen der CheckBox zum Schrägstellen
    var italicCb:CheckBox = new CheckBox();
    italicCb.move(300, 320);
    italicCb.label = "Kursiv";
    addChild(italicCb);

    function inputHandler(event:KeyboardEvent):void {
    tfOutput.text = tfInput.text;
    }

    function underlineHandler(event:MouseEvent):void {
    underlineCb.selected == true ? outputFormat.underline = true : outputFormat.underline = false;
    tfOutput.setTextFormat(outputFormat);
    }

    function italicHandler(event:MouseEvent):void {
    italicCb.selected == true ? outputFormat.italic = true : outputFormat.italic = false;
    tfOutput.setTextFormat(outputFormat);
    }

    italicCb.addEventListener(MouseEvent.CLICK, italicHandler);
    underlineCb.addEventListener(MouseEvent.CLICK, underlineHandler);
    tfInput.addEventListener(KeyboardEvent.KEY_UP, inputHandler);


    Damit dies funktioniert müssen wir natürlich noch die Checkbox-Komponente in die Bibliothek ziehen. So nun funktioniert alles einwandfrei. Unterstreichen kann man und Kursiv stellen.

    So nun kommen wir zum Drehen. Um ein Textfeld drehen zu können müssen wir ja in das Ausgabetextfeld Zeichen einbetten. Hierfür muss ich nun ein dynamisches Textfeld auf die Bühne ziehen, diesem den Instanznamen tfOutput geben und dann im Eigenschaftenfenster unter einbetten alle Zeichen einbetten.

    FRAGE
    1. kann ich auch über AS3 dem Textfeld tfOutput alle Zeichen einbetten? Wenn ja, wie?
    2. Was genau passiert denn bei diesem „Einbetten“ und warum verschwindet das Feld beim Drehen wenn ich dies nicht mache?

    Aber machen wir erstmal so weiter wie Ich es getan habe. Also Textfeld auf die Bühne gezogen, Instanznamen vergeben und Zeichen eingebettet (vielleicht auch noch Rand). Da wir schon mal auf der Bühne sind ziehen wir direkt noch die Slider-Komponente in die Bibliothek.

    Weiterer Quelltext:

    import fl.controls.Slider;
    import fl.events.SliderEvent;
    import fl.controls.CheckBox;

    //Erstellen des Textformates
    var outputFormat:TextFormat = new TextFormat();

    //Erstellen des Textfeldes zur Eingabe
    var tfInput:TextField = new TextField();
    tfInput.x = 200;
    tfInput.y = 10;
    tfInput.width = 100;
    tfInput.height = 25;
    tfInput.border = true;
    tfInput.visible = true;
    tfInput.type = "input";
    addChild(tfInput);

    //Erstellen des Sliders zum Drehen
    var rotateSl:Slider = new Slider();
    rotateSl.width = 200;
    rotateSl.snapInterval = 1;
    rotateSl.tickInterval = 10;
    rotateSl.maximum = 359;
    rotateSl.value = 0;
    rotateSl.move(200, 200);
    rotateSl.visible = true;
    addChild(rotateSl);

    function inputHandler(event:KeyboardEvent):void {
    tfOutput.text = tfInput.text;
    }

    function rotateHandler(event:SliderEvent):void {
    tfOutput.rotation = event.value;
    }

    rotateSl.addEventListener(SliderEvent.CHANGE, rotateHandler);
    tfInput.addEventListener(KeyboardEvent.KEY_UP, inputHandler);

    Funktioniert alles doch wie Ihr seht unterscheidet sich die Ausgabe (Formatierung des Textes) schon zu dem von Bsp: „nur Formatieren“. Das kommt ja sicherlich durch das Einbetten.

    FRAGE
    3. Warum? Ich hätte die Ausgabe gerne so wie im 1. Bsp. !
    4. Wie kann ich per AS3 den „Rotationspunkt“ verändern?


    So und nun mal alles beides zusammen. Also erstmal so vorgehen wie im 2. Bsp (nur Drehen). Nur halt zusätzlich zur Slider-Komponente noch die Checkbox-Komponente in die Bibliothek ziehen und dann folgenden Quelltext:

    import fl.controls.Slider;
    import fl.events.SliderEvent;
    import fl.controls.CheckBox;

    //Erstellen des Textformates
    var outputFormat:TextFormat = new TextFormat();

    //Erstellen des Textfeldes zur Eingabe
    var tfInput:TextField = new TextField();
    tfInput.x = 200;
    tfInput.y = 10;
    tfInput.width = 100;
    tfInput.height = 25;
    tfInput.border = true;
    tfInput.visible = true;
    tfInput.type = "input";
    addChild(tfInput);

    var rotateSl:Slider = new Slider();
    rotateSl.width = 200;
    rotateSl.snapInterval = 1;
    rotateSl.tickInterval = 10;
    rotateSl.maximum = 359;
    rotateSl.value = 0;
    rotateSl.move(200, 200);
    rotateSl.visible = true;
    addChild(rotateSl);

    //Erstellen der CheckBox zum unterstreichen
    var underlineCb:CheckBox = new CheckBox();
    underlineCb.move(300, 300);
    underlineCb.label = "Unterstreichen";
    addChild(underlineCb);

    //Erstellen der CheckBox zum schräg stellen
    var italicCb:CheckBox = new CheckBox();
    italicCb.move(300, 320);
    italicCb.label = "Kursiv";
    addChild(italicCb);

    function inputHandler(event:KeyboardEvent):void {
    tfOutput.text = tfInput.text;
    }

    function rotateHandler(event:SliderEvent):void {
    tfOutput.rotation = event.value;
    }

    function italicHandler(event:MouseEvent):void {
    italicCb.selected == true ? outputFormat.italic = true : outputFormat.italic = false;
    tfOutput.setTextFormat(outputFormat);
    }

    function underlineHandler(event:MouseEvent):void {
    underlineCb.selected == true ? outputFormat.underline = true : outputFormat.underline = false;
    tfOutput.setTextFormat(outputFormat);
    }

    italicCb.addEventListener(MouseEvent.CLICK, italicHandler);
    underlineCb.addEventListener(MouseEvent.CLICK, underlineHandler);
    rotateSl.addEventListener(SliderEvent.CHANGE, rotateHandler);
    tfInput.addEventListener(KeyboardEvent.KEY_UP, inputHandler);

    FRAGE
    5. Warum kann ich den gedrehten Text unterstreichen jedoch nicht kursiv stellen? Das Gleich Problem würde bestehen wenn ich den Text Fett bzw. Normal darstellen möchte. Mach ich irgendwas falsch? Habe ich etwas vergessen?


    Ich bedanke mich jetzt schon mal für eure Zeit und Mühe.

    Mit freundlichen Grüßen
    André