Slideshow .swf mit dynamischer Textausgabe im Content

fashionbiz · 7. Januar 2009

Hallo zusammen,

Ganz neu in diesem Forum, habe ich eine Frage, auf diese ich bis jetzt keine Lösung gefunden habe.

Und zwar bin ich an einer Seite dran, auf dieser alle Mitarbeiter mit einem Portraitfoto in einem Horizontalen Balken (Flash mit Accordion-Effekt) abgebildet werden.

Nun wenn man mit der Maus auf ein Bild fährt, sollte im Content unterhalb des Balkens der Name und die Jobbeschreibung / Funktionsbeschreibung des jeweiligen Mitarbeiters erscheinen (dynamisch).

Eine Seite habe ich im Netz gefunden, aber diese wurde mit "plone" erstellt ( http://www.haeberlinag.ch/de/portraet/team )

Mit dem Accordion v1 XML habe ich das Tool gefunden, was über eine .xml die Bilder einliest, aber nun fehlt die Ausgabe über Typo3 im Content noch.

Weiss mir da jemand einen Ratschlag oder kann mir eine Lösung zeigen? Dankeschön im voraus ...

luke_the_duke · 7. Januar 2009

Hallo und willkommen,

dieses Template scheint ja seinen Inhalt über eine XML-Datei zu beziehen. In Typo3 kannst du die Flash-Datei mit dem SWFObject einbinden, wie und wo du die XML-Datei hinterlegst und anpasst, kann ich dir nicht sagen, dafür müsst ich dein Setting kennen und Typo3 ist nicht sooo mein Ding

.

Gruss

fashionbiz · 7. Januar 2009

Vielen Dank für deine Antwort.

Ich habe Accordion V1 .XML von flashden heruntergeladen. In meiner Seite habe ich die .swf mit der .xml Datei auch eingebunden. Soweit funktioniert die Anzeige der Portraitbilder.

Nur das Problem was ich noch habe, wie bekomme ich das hin: wenn man mit der Maus über ein Portrait-Bild fährt, dass im Content / Inhaltsbereich dynamisch der "Name" und "Funktionsbeschreibung" des Mitarbeiters erscheint. Wenn man auf das Bild klickt, soll die Beschreibung stehen bleiben. Danke.

luke_the_duke · 7. Januar 2009

Hallo,

diese Angaben sollten eigentlich alle in der XML-Datei konfigurierbar sein. Poste doch sonst mal ein Beispiel der Letzteren.

Gruss

fashionbiz · 8. Januar 2009

Guten Morgen, ok werde hier mal die Codes senden:

INHALT XML (zb. nur 1 Datensatz):

Code:

<?xml version="1.0" encoding="utf-8"?>
<options>
<item link="http://www.rwd.ch/index.php?id=52" target="_self" jpg="http://www.rwd.ch/team/kunst.jpg" title="" color="0x000000" alphaColor="0"><![CDATA[]]></item>
</options>

ACTIONSCRIPT:

Code:

Stage.scaleMode = "noScale";
Stage.showMenu = false;
Stage.align = "TL";

this._lockroot = true;

var nrFrames:Number = 30;
var HOME:MovieClip = this;

import flash.display.BitmapData;
import mx.transitions.Tween;
import mx.transitions.easing.*
import mx.transitions.*;


/**

General settings

*/


// Uncomment these values if you want to use the file without the need for flashvars
// make sure to comment the next piece, where these variables are read


/*
var imageWidth:Number = 439;
var imageHeight:Number = 300;

var keepSelected:Boolean = true;

var selectedWindow:Number = 0;

*/


/**/

var sWidth:Number = Number(stageW);
var sHeight:Number = Number(stageH);

if(isNaN(sWidth)) sWidth = Stage.width;
if(isNaN(sHeight)) sHeight = Stage.height;


var imageWidth:Number = Number(imageWidth);
var imageHeight:Number = Number(imageHeight);


if (keepSelected == "t")
{
	var keepSelected:Boolean = true;
}
else
{
	var keepSelected:Boolean = false;
}

selectedWindow = int(selectedWindow);



/**

Variables

*/

var displaySpace:Number;
var colorWidth:Number;

var allSlides:Number;
var slideWidth:Number;

var descriptionArray:Array = new Array();
var titleArray:Array = new Array();
var linkArray:Array = new Array();
var targetArray:Array = new Array();
var imageArray:Array = new Array();
var colorArray:Array = new Array();
var dateArray:Array = new Array();
var alphaColor:Array = new Array;

mcAll.mcWindow._visible = false;
mcMask._x = 0;
mcMask._y = 0;


/**

Movieclip loader

*/

var listnerGallery:Object = new Object();

listnerGallery.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void 
{
	var pct:Number = bytesLoaded / bytesTotal * 100;
	if (pct > 5)
	{
	}
};

listnerGallery.onLoadInit = function(mc:MovieClip)
{
	var alphaImageTween:Tween = new Tween(mc, "_alpha", Strong.easeOut, mc._alpha, 100, 1, true);
};

var objGallery:MovieClipLoader = new MovieClipLoader();
objGallery.addListener(listnerGallery);


/**

Parse XML

*/

var accordionXml:XmlParse;
accordionXml = new XmlParse(xmlPath, HOME.initAccordionItems);

function initAccordionItems():Void
{
	sWidth = Stage.width;
	sHeight = Stage.height;

	var mainNode:XMLNode = HOME.accordionXml.myXml.firstChild;
	var i:Number = 0;
	
	for (var currentNode = mainNode.firstChild; currentNode != null; currentNode = currentNode.nextSibling, i++)
	{
		descriptionArray.push(currentNode.firstChild.nodeValue);
		titleArray.push(currentNode.attributes.title);
		linkArray.push(currentNode.attributes.link);
		targetArray.push(currentNode.attributes.target);
		imageArray.push(currentNode.attributes.jpg);
		colorArray.push(currentNode.attributes.color);
		alphaColor.push(int(currentNode.attributes.alphaColor));
	}
	
	mcMask._xscale = 10*sWidth;
	mcMask._yscale = 10*sHeight;

	mcAll.setMask(mcMask);
	
	displaySpace = sWidth - imageWidth;
	colorWidth = imageWidth;
	
	nrImages = imageArray.length - 1;
	slideWidth = displaySpace / nrImages;
	allSlides = sWidth / (nrImages + 1);
	
	init();
}


/**

Init accordion

*/

function init():Void
{
	for (i = 0; i <= nrImages; i++)
	{
		var mc:MovieClip = mcAll.mcWindow.duplicateMovieClip("mcWindow" + i, i);
		
		//mc.mcBack._visible = false;
		
		mc._visible = false;
		mc._x = sWidth;
		mc.mcMask._xscale = 10 * imageWidth;
		mc.mcMask._yscale = 10 * imageHeight;
		
		mc.mcBack._xscale = 10 * imageWidth;
		mc.mcBack._yscale = 10 * imageHeight;
		
		mc.mcBut._xscale = 10 * imageWidth;
		mc.mcBut._yscale = 10 * imageHeight;
		
		mc.mcColor._xscale = 10 * imageWidth;
		mc.mcColor._yscale = 10 * imageHeight;
		
		mc.mcLine._yscale = 10 * imageHeight;
		mc.mcLine._alpha = 40;
		
		mc.nr = i;
		mc.mcColor.setColor(colorArray[i]);
		mc.mcColor._alpha = alphaColor[i];
		mc.mcColor._x = -colorWidth - 10;
		
		mc.mcHolder._alpha = 0;
		objGallery.loadClip(imageArray[i], mc.mcHolder);
		
		mc.mcTitle.txt.htmlText = titleArray[i];
		
		mc.mcBut.but.onRelease = function():Void 
		{
			getURL(linkArray[this._parent._parent.nr], targetArray[this._parent._parent.nr]);
		};
		
		mc.mcBut.but.onRollOver = function():Void 
		{
			autoSlide = false;
			var a1:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcTitle, "_alpha", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcTitle._alpha, 100, 1, true);
			var a2:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcBack, "_alpha", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcBack._alpha, 100, 1, true);
			
			delete mcAll["mcWindow" + selectedWindow].mcTxt.onEnterFrame;
			mcAll["mcWindow" + selectedWindow].mcTxt.txt.htmlText = "";
			
			
			var x:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcColor, "_x", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcColor._x, -colorWidth - 10, 1, true);
			
			selectedWindow = this._parent._parent.nr;
			displayAccordeon();
		};
		
		mc.mcBut.but.onRollOut = mc.mcBut.but.onReleaseOutside = function ():Void
		{
			autoSlide = true;
			if(keepSelected != true)
			{
				var a1:Tween = new Tween(this._parent._parent.mcBack, "_alpha", Strong.easeOut, this._parent._parent.mcBack._alpha, 100, 1, true);
				var a2:Tween = new Tween(this._parent._parent.mcTitle, "_alpha", Strong.easeOut, this._parent._parent.mcTitle._alpha, 100, 1, true);
				displayAccordeon(true);
			}
		};
	}
	
	if (keepSelected == true)
	{
		mcAll["mcWindow"+selectedWindow].mcBut.but.onRollOver();
		autoSlide = true;
	}
	else
	{
		displayAccordeon(true);
	}
	
	startCounting();
}


/**

Display selected image

*/

function displayAccordeon(noSlide:Boolean):Void
{
	for (i = 0; i <= selectedWindow; i++)
	{
		if (noSlide == true)
		{
			var a:Tween = new Tween(mcAll["mcWindow" + i], "_x", Strong.easeOut, mcAll["mcWindow" + i]._x, Math.round(i * allSlides), 1, true);
		}
		else
		{
			var a:Tween = new Tween(mcAll["mcWindow" + i], "_x", Strong.easeOut, mcAll["mcWindow" + i]._x, Math.round(i * slideWidth), 1, true);
		}
		
		mcAll["mcWindow" + i]._visible = true;
	}
	
	for (i = selectedWindow + 1; i <= nrImages; i++)
	{
		if (noSlide == true)
		{
			var a:Tween = new Tween(mcAll["mcWindow" + i], "_x", Strong.easeOut, mcAll["mcWindow" + i]._x, Math.round(i * allSlides), 1, true);
		}
		else
		{
			var a:Tween = new Tween(mcAll["mcWindow" + i], "_x", Strong.easeOut, mcAll["mcWindow" + i]._x, Math.round(imageWidth + (i - 1) * slideWidth), 1, true);
		}
		
		mcAll["mcWindow" + i]._visible = true;
	}
	
	if (noSlide != true)
	{
		var a1:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcTitle, "_alpha", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcTitle._alpha, 0, 1, true);
		var a2:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcBack, "_alpha", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcBack._alpha, 0, 1, true);
		
		var str:String = descriptionArray[_root.selectedWindow];
		mcAll["mcWindow" + selectedWindow].mcTxt.typewriter(str, "", 2, 4);
		
		var a3:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcColor, "_x", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcColor._x, 0, 1, true);
	}
	else
	{
		var a1:Tween = new Tween(mcAll["mcWindow" + selectedWindow].mcColor, "_x", Strong.easeOut, mcAll["mcWindow" + selectedWindow].mcColor._x, -colorWidth - 10, 1, true);
		
		delete mcAll["mcWindow" + selectedWindow].mcTxt.onEnterFrame;
		mcAll["mcWindow" + selectedWindow].mcTxt.txt.htmlText = "";
	}
}



/**

Display selected image

*/

var slideCount:Number = 0;
var slideTime:Number = 5;
var autoSlide:Boolean = true;

function startCounting():Void
{
	this.onEnterFrame = function():Void
	{
		if(autoSlide == true)
		{
			slideCount++;
		}
		else
		{
			slideCount = 0;
		}
		
		if(Math.round(slideCount/nrFrames) >= slideTime)
		{
			//mcAll["mcWindow" + selectedWindow].mcBut.but.onRollOut();			
			//selectedWindow++;
			slideCount = 0;
			
			if(selectedWindow < nrImages)
			{
				mcAll["mcWindow" + (selectedWindow + 1)].mcBut.but.onRollOver();
			}
			else
			{
				mcAll.mcWindow0.mcBut.but.onRollOver();
				
			}
			
			autoSlide = true;
		}
	}	
}

AS 2ter Teil:

Code:

//************************************************************//
// CHANGE THE COLOR OF A MOVIECLIP
//************************************************************//
MovieClip.prototype.setColor = function(col:String):Void  {
	this.mycol = new Color(this);
	this.mycol.setRGB(col);
};


//************************************************************//
//  A NICE TYPEWRITER TEXT EFFECT
//************************************************************//
MovieClip.prototype.typewriter = function(newtext:String, oldtext:String, lspeed:Number, blinkdelay:Number, f, v):Void  {
	this.charToUse = "";
	//
	if (oldtext == null) {
		oldtext = "";
	}
	this.temptext = oldtext;
	this.counter = 0;
	this.i = oldtext.length;
	if (lspeed == null) {
		lspeed = 1;
	}
	if (blinkdelay == null) {
		blinkdelay = 31;
	}
	this.onEnterFrame = function():Void  {
		for (mylspeed=0; mylspeed<lspeed; mylspeed++) {
			this.temptext = this.temptext+newtext.charAt(this.i);
			if (newtext.charAt(this.i) == "<") {
				htmlend = newtext.indexOf(">", this.i);
				htmladd = htmlend-this.i;
				this.i = this.i+htmladd;
				this.temptext = newtext.substr(0, this.i);
				continue;
			}
			this.i++;
		}
		this.txt.htmlText = this.temptext+this.charToUse;
		if (this.i>=newtext.length) {
			this.mybool = 1;
			this.onEnterFrame = function():Void  {
				this.counter++;
				this.mybool = !this.mybool;
				if (this.mybool == true) {
					this.txt.htmlText = this.temptext+this.charToUse;
				} else {
					this.txt.htmlText = this.temptext;
				}
				if (this.counter>=blinkdelay) {
					this.txt.htmlText = this.temptext;
					this.counter = 0;
					this.blinkremove();
					delete this["onEnterFrame"];
					f(v);
				}
			};
		}
	};
};



//************************************************************//
// REMOVE THE MOVIECLIP USED FOR THE TYPEWRITER EFFECT
//************************************************************//
MovieClip.prototype.blinkremove = function():Void  {
	this.onEnterFrame = function():Void  {
		this._alpha = this._alpha-10;
		this._visible = !this._visible;
		if (this._alpha<=0) {
			this.removeMovieClip();
		}
	};
};

AS für XML:

Code:

class XmlParse {
	private var myXml:XML;
	// Constructor 
	// targetXmlStr contains the path to an XML file 
	function XmlParse(targetXmlStr:String, f:String) {
		/* Create a local reference to the current class. 
		   Even if you are within the XML's onLoad event 
		   handler, you can reference the current class 
		   instead of only the XML packet. */
		var thisObj:XmlParse = this;
		// Create a local variable, which is used to load the XML file.  
		var prodXml:XML = new XML();
		prodXml.ignoreWhite = true;
		prodXml.onLoad = function(success:Boolean) {
			if (success) {
				/* If the XML successfully loads and parses, 
				   set the class's myXml variable to 
				   the parsed XML document and call the init 
				   function. */
				thisObj.myXml = this;
				thisObj.init(f);
			} else {
				/* There was an error loading the XML file. */
				trace("error loading XML");
			}
		};
		// Begin loading the XML document
		prodXml.load(targetXmlStr);
	}
	public function init(functionName:String):Void {
		// Display the XML packet
		//trace(this.myXml);
		if (functionName != undefined) {
			functionName();
		}
	}
}

Die Seite ist unter folgender URL zu finden:
http://rwd.ch/index.php?id=29

Unterhalb des Textes: "persönlich kennenzulernen." soll beim Mouseover über ein Bild im Flash, der Name und die Funktionsbeschreibung im Text erscheinen.

Zur Zeit habe ich einfach eine neue Seite welche beim Klick auf ein Bild geladen wird - aber das ist ja falsch. Es sollte schon beim Mouseover der Name und Beschreibung geladen werden - dynamisch.

Vielen Dank für deine Hilfe.

Gruss

luke_the_duke · 8. Januar 2009

Hallo,

füll doch mal ein paar Zeilen Text in den CDATA-Wrapper

.

Gruss

fashionbiz · 8. Januar 2009

Aber wenn ich den Text in der XML Datei in den CDATA Wrapper einfüge, wird dieser auf dem Foto angezeigt. Wie bringe ich aber diesen Text in den Content?

Danke für deine Hilfe.

luke_the_duke · 8. Januar 2009

Hallo,

beim ersten Bild von links auf deiner Website erscheint ja bereits ein Text. Nun denk ich mal wird das Titel-Attribut für den vertikalen Titel benötigt. Du kannst ja den Text in der CDATA-Sektion auch HTML-formatieren.

Gruss

fashionbiz · 8. Januar 2009

Dieser Text: Test 1234 ... welcher zur Zeit auf dem Bild erscheint, möchte ich an einer anderen Position. Und zwar soll dieser unterhalb des Textes: "freuen sich darauf, Sie persönlich kennenzulernen...." erscheinen.

Im XML kann ich diese Position nicht festlegen, oder schon? Danke. Gruss

luke_the_duke · 8. Januar 2009

Hallo,

nunja, das wird ziemlich kompliziert, weil dieser Content ja HTML ist. Du könntest die onRollOver-Funktion um eine getURL-Anweisung erweitern, die eine Javascript-Funktion aufruft, die dann ebendiesen Content setzt:

Code:

getURL("javascript:irgendeineFunktion("+mcAll["mcWindow" + selectedWindow].mcTxt.txt.htmlText+");");

Gruss

Slideshow .swf mit dynamischer Textausgabe im Content

fashionbiz

Grünschnabel

luke_the_duke

Erfahrenes Mitglied

fashionbiz

Grünschnabel

luke_the_duke

Erfahrenes Mitglied

fashionbiz

Grünschnabel

luke_the_duke

Erfahrenes Mitglied

fashionbiz

Grünschnabel

luke_the_duke

Erfahrenes Mitglied

fashionbiz

Grünschnabel

luke_the_duke

Erfahrenes Mitglied

Neue Beiträge