itemRenderer update niet bij horizontalScrollPosition change

[FredericCox]

Hoi,

Ik heb een <mx:HorizontalList id="ChapterList" dataProvider="{videos}" itemRenderer="components.thumbnail" backgroundAlpha="0" horizontalScrollPolicy="off" borderStyle="none" left="55" rollOverColor="#18121b" selectionColor="#18121b" width="482" height="90" verticalCenter="0" />


die mooi een lijst weergeeft van enkele videos. Juist zoals ik het wil.

Links en rechts van deze lijst heb ik een terug en volgende knop. Die roepen volgende functie aan.


private function navigate(dir:Number):void{
//navigate through chapterlist
if(dir > 0){
if(ChapterList.horizontalScrollPosition < (videos.length-3)){
ChapterList.horizontalScrollPosition += 1;
}
}else if(dir < 0){
if(ChapterList.horizontalScrollPosition > 0){
ChapterList.horizontalScrollPosition -= 1;
}
}

browseLeft.visible = true;
browseRight.visible = true;

if(ChapterList.horizontalScrollPosition == 0){
browseLeft.visible = false;
}
if(ChapterList.horizontalScrollPosition == (videos.length-3)){
browseRight.visible = false;
}

}


standaard worden 3 videos weergegeven dus als ik er 10 heb en ik scroll naar rechts dan scrollt die list mooi mee maar de itemRenderer wordt wel geupdate bij de title maar niet bij de video erin! Dat geeft dan gewoon het videoframe weer van de vorige die op die plaats stond op het scherm

Dit is mijn itemRenderer, de video wordt niet geupdate

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="170" height="90" buttonMode="true" click="showVideo();" mouseOver="onMouseOver()" mouseOut="onMouseOut();" mouseChildren="false">
<mx:Script>
<![CDATA[
import mx.core.Application;
private function onMouseOver():void{
bumper.play();
}
private function onMouseOut():void{
bumper.stop();
}
private function showVideo():void{
Application.application.playVideo(null, data.index);
}
]]>
</mx:Script>
<mx:Canvas left="0" right="5" width="160" height="90" verticalScrollPolicy="off" horizontalScrollPolicy="off">

<mx:VideoDisplay id="bumper" volume="0" source="{data.videoURL}" autoPlay="false" width="160" height="90" />

<mx:Canvas height="25" width="160" backgroundColor="#4d5956" bottom="7" borderStyle="none">
<mx:Canvas height="25" width="{data.progress}" backgroundColor="#ed007f" />
<mx:Label text="{data.title.toString().toUpperCase()}" fontSize="12" fontFamily="ArialNormal" color="#ffffff" y="3" x="11"/>
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>




ChapterList.validateDisplayList()



ChapterList.invalidateDisplayList()


en


ChapterList.validateNow()


hebben allemaal geen effect..

[TheDutch]

Zet een extra Text component in je item renderer met als text {data.videoURL} om te kijken of deze echt veranderd zoals jij verwacht :).

ps. Haal al die validation methods maar weg hoor. Zijn niet van toepassing hier.

[FredericCox]

Dat was uit wanhoop :) data.videoURL veranderd juist alleen wordt de video niet geupdate zo lijkt want als ik met mijn muis erover ga begint wel de juiste video te spelen en de trace toont ook de juiste URL aan

[TheDutch]

Dus als ik je goed begrijp heeft het niets met je item renderer te maken maar met het VideoDisplay component dat niet goed update wanneer de URL gewijzigd is? Heb je dit ook al getest buiten de item renderer? :)

[FredericCox]

Ja en daar gebeurd alles ok. Het is in de update van de HorizontalList alleen dat die video nooit veranderd als ik in die list begin de scrollen

[TheDutch]

Zou je een simpel voorbeeld kunnen maken met wat kleine FLV videotjes dat het probleem laat zien en die zippen als bijlage? Dan kan ik er thuis even kijken :).

[FredericCox]

Ga ik morgen even voor je doen, thanks!

[TheDutch]

Sure, ik ga het afwachten :).

[TheDutch]

Hoi Frederic,

Gebruik de volgende item renderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" dataChange="onDataChange(event)" width="170" height="90" buttonMode="true" click="showVideo();" mouseOver="onMouseOver()" mouseOut="onMouseOut();" mouseChildren="false">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.Application;
private function onMouseOver():void{
bumper.play();
}
private function onMouseOut():void{
bumper.stop();
}
private function showVideo():void{
Application.application.playVideo(null, data.index);
}

private function onDataChange(event:Event):void
{
if(bumper != null)
{
bumper.load();
}
}
]]>
</mx:Script>
<mx:Canvas left="0" right="5" width="160" height="90" verticalScrollPolicy="off" horizontalScrollPolicy="off">

<mx:VideoDisplay id="bumper" volume="0" source="{data.videoURL}" autoRewind="true" autoPlay="false" width="160" height="90" />

<mx:Canvas height="25" horizontalScrollPolicy="off" width="160" backgroundColor="#4d5956" bottom="7" borderStyle="none">
<mx:Canvas height="25" width="{data.progress}" backgroundColor="#ed007f" />
<mx:Label text="{data.title.toString().toUpperCase()}" fontSize="12" fontFamily="ArialNormal" color="#ffffff" y="3" x="11"/>
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>

Het preview plaatje van de FLV blijkt na het veranderen van de source niet te updaten. Dit komt waarschijnlijk omdat dit pas kan wanneer de FLV ingeladen is en het laden niet automatisch gebeurd bij het wijzigen van de source. Om dit te forceren moeten we VideoDisplay.load() aanroepen zodra de data (source) veranderd is :).

[FredericCox]

super! Thanks