CodeBlog.ch » Flash http://www.codeblog.ch Coding and more - Concrete5, Flex, JavaScript Mon, 05 Dec 2011 16:10:29 +0000 de hourly 1 http://wordpress.org/?v=3.2.1 WYSIWYG Editor mit Flex http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/ http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/#comments Fri, 24 Oct 2008 08:04:09 +0000 Remo Laubacher http://www.codeblog.ch/?p=72 Adobe liefert Flex mit einem RichTextEditor aus. Dieser lässt sich sehr einfach einbinden und passt vom Layout her auch wunderbar zu den restlichen Flex Controls. 

Dieser Editor hat aber leider eine ziemlich begrenzte Funktionalität. Bereits beim Einfügen eines Bildes scheitern wir! Dazu kommt, dass der generierte Code nicht HTML konform ist, ein direktes verwenden in einer HTML Ausgabe ist deswegen zum Beispiel nicht möglich.

Alternative Lösungsmöglichkeit

Die einzige flash-basierte Lösung die ich finden konnte, ist diese hier: http://flashtexteditor.com/flexdemo/full Sieht auf den ersten Blick nett aus, eingefügte Bilder verhalten sich aber nicht wie gewohnt und fliessen mit dem Text mit und zudem ist dieses Control inzwischen nur noch kommerziell verfügbar. 

Wer sich mit HTML und JavaScript beschäftigt hat, wird sicherlich den einen oder anderen WYSIWYG HTML Editor gefunden haben. Um nur ein paar zu nennen:

Wäre es nicht schön, wir könnten diese Editoren in Flex verwenden? Können wir!

Flex mit Adobe AIR vs. Flex im Browser

Es gibt einen Unterschied in der Art wie wir unsere Flex Anwendung starten bzw. ausführen lassen.

Es besteht die Möglichkeit mittels NPRuntime den Browser einzubinden, der das Flash aufgerufen hat. Details dazu findet man zum Beispiel bei Adobe: http://livedocs.adobe.com/flex/gumbo/langref/flash/external/ExternalInterface.html

Auf derselben Seite findet man auch den Hinweis, dass diese Funktionalität mit Adobe AIR nicht funktioniert.

Note: Adobe AIR currently does not support the ExternalInterface class.

In diesem Artikel wird nur eine mögliche Lösung beim Einsatz von Adobe AIR präsentiert. Der Lösungsweg über ExternalInterface dürfte aber ähnlich verlaufen.

http://osflash.org/projects/wrapper

HTML Code einbinden

Bei einem AIR Projekt, haben wir ein zusätzliches Control zu Verfügung: mx:HTML. Dieses lässt sich wie jedes andere Control in Flex mit MXML verwenden.

1

<mx:HTML id="html" location="http://www.codeblog.ch"/>

Wir können damit auch lokale HTML Files einbinden. Wir installieren als erstes die aktuelle TinyMCE Version. http://tinymce.moxiecode.com/download.php

Wir kopieren anschliessend sämtliche Files in unser Flex Projekt und erhalten diese Struktur:

editor.html ist nicht Teil von TinyMCE und TinyMCE.mxml ist unser Flex Control – mehr dazu später.

Der HTML Code

Wir könnten den ganzen HTML Code für den TinyMCE Aufruf in unserem Flex Code speichern, ich hab mich jedoch entschieden den Code in einer HTML Datei abzulegen. Der Code ist fast 1:1 aus dem TinyMCE Beispiel entnommen.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 
<style type="text/css">
html, body {
	margin: 0px;
}
</style>
 
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>
<!-- /TinyMCE -->
 
</head>
<body>
	<textarea id="elm" name="elm" rows="15" cols="80" style="width: 100%;"></textarea>
</body>
</html>

Ich habe versucht den Code in ein neues MXML Control zu packen. Gleich zu Beginn der vollständige Code – sind ja nur ein paar Zeilen:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:HTML xmlns:mx="http://www.adobe.com/2006/mxml" location="tinymce/editor.html" initialize="init()">
	<mx:Script>
	<![CDATA[
	private var htmlComplete:Boolean = false;
	private var localHtmlCode:String = null;
 
	public function init(): void
	{
		addEventListener(Event.COMPLETE, onHTMLLoadComplete);
	}
	public function set htmlCode (value:String):void
	{
		// in case the html file hasn't been loaded yet, delay the call..
		if (htmlComplete)
			setHtml(value);
		else
			localHtmlCode = value;
	}
	public function get htmlCode():String
	{
		this.htmlLoader.window.tinyMCE.triggerSave();
		return this.htmlLoader.window.elm1.value;
	}
	private function setHtml(value:String): void
	{
		this.htmlLoader.window.tinyMCE.get('elm').setContent(value);
		this.htmlLoader.window.document.getElementById('elm').value = value;
	}
	private function onHTMLLoadComplete(e:Event):void
	{
		htmlComplete = true;
 
		if (localHtmlCode != null)
			callLater(setHtml,[localHtmlCode]);
	}
	]]>
	</mx:Script>
</mx:HTML>

Als Basis für unser Control dient mx:HTML. Wir fügen lediglich die Eigenschaft htmlCode hinzu, um den Inhalt von TinyMCE zu ändern und auslesen.

Dazu müssen wir lediglich eine Methode mit dem Zusatz “get” ausstatten und eine mit “set”.

Nun hatte ich jedoch das Problem, dass TinyMCE noch nicht komplett geladen war, als ich versucht habe die Eigenschaft htmlCode zu verändern. Ich hab deswegen, eine noch nicht vollständig getestete, Lösung versucht umzusetzen – durch das abfangen des Events “COMPLETE”, wird uns mitgeteilt wann das HTML Control geladen ist, wurde die Eigenschaft htmlCode von vorher gesetzt (htmlComplete == false), so wird nachdem das Control geladen ist, der Code mittels callLater gesetzt. callLater sollte eigentlich schon selber erst ausgeführt werden, wenn das Control fertig geladen ist. In meinem Fall hat dies jedoch nicht gereicht. (bin für jeden Hinweis dankbar).

Alles speichern und schon haben wir im Flex Builder ein neues Control in der Rubrik “Custom” zur Verfügung. Per Drag’n'Drop einfügen, Projekt starten!

]]> http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/feed/ 4 Flash CS4 – Inverse Kinematics (IK) http://www.codeblog.ch/de/2008/10/flash-cs4-inverse-kinematics-ik/ http://www.codeblog.ch/de/2008/10/flash-cs4-inverse-kinematics-ik/#comments Thu, 02 Oct 2008 11:28:34 +0000 Remo Laubacher http://www.codeblog.ch/?p=59

Ich bin zufällig über Flash CS4 gestoplert. Nicht wirklich mein liebstes Tool, ich musste aber trotzdem ein paar Dinge ausprobieren – hat man doch im Vorfeld schon einiges darüber gelesen.

Adobe hat zahlreiche Dinge geändert die mir sehr schnell aufgefallen sind. Ein paar Neuigkeiten auf einen Blick:

  • Keyframes werden automatisch gesetzt. Ein Objekt bei Frame 1 erstellen, zu Frame 30 wechseln, das Objekt verschieben und schon hat man ein Keyframe. Macht das Animieren wesentlich einfacher
  • 3D – Es gibt in der Toolbar zwei neue Werkzeuge um Objekte 3-Dimensional zu manipulieren. Positionieren und Drehen auf der X, Y und Z Achse.
  • Das “Knochen-Werkzeug” (Bone-Tool) mit welchem man die Skelette für die inverse Kinematik erstellen kann. Dieses Tool möchte ich in diesem Artikel kurz erklären
Was ist inverse Kinematik
Bei der inversen Kinematik geht es darum, dass man starre Objekte mittels Gelenken verbindet. Dadurch erstellt man ein “Skelett” welches den physikalischen Gesetzen gehorcht. Mit IK können wir also sicherstellen dass unser Strichmännchen den Kopf nicht verliert.

 

Dies kann alles auch mathematisch abgebildet werden. Flash ist aber ein grafisches Werkzeug, weswegen ich es bei dieser stark vereinfachten Erklärung belassen.

Flash CS4

Wir erstellen im Flash ein paar “starre Objekte”. Es spielt dabei keine Rolle ob es sich um ein Movie Clip, eine simple Form oder einen Text handelt.

In meinem Fall hab ich 5 Kreise erstellt. Wenn wir diese nun alle zusammen markieren, können wir das “Bone Tool” (siehe Screenshot) aktivieren.

Wir erstellen von Objekt zu Objekt einen “Knochen”. Wenn wir nun ein einzelnes Objekt aus unserer kinetischen Kette bewegen, so “hängen” die weitern Objekte an dem Objekt das wir verschieben:

Flash CS4 hat für IK einen eigenen Layer Typ erstellt “Armature”, wenn wir ihn markieren, erscheinen gewisse Optionen die wir verändern können. So ist es zum Beispiel möglich den Typ von “Authortime” auf “Runtime” umzustellen. Damit erstellt uns Flash für jedes Objekt einige Events, so dass wir zur Laufzeit (Runtime) die Objekte verschieben können.

Ideal um die eigene Mutter zu beeindrucken!

]]> http://www.codeblog.ch/de/2008/10/flash-cs4-inverse-kinematics-ik/feed/ 0