effect tilelist

[StevenW]

Ik heb een tileList gemaakt die je kan vergroten en verkleinen. In de tilelist staan foto's van 120x120. Als ik de tilelist verklein verdwijnt er een kolom. Als ik het vergroot dan komt er een kolom bij. Maar kan dit ook met een soort effect? Zoals bij dit voorbeeld:

http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html

[TheDutch]

Steve, kijk even naar de effecten van de TileList in de LiveDocs. Wellicht dat je wat hebt aan het "moveEffect" :).

[StevenW]

Maar moveEffect is toch het effect voor het bewegen van de TileList en niet de inhoud van de TileList?

Ik kan het niet vinden. Ik weet namelijk niet waarnaar ik op zoek ben. Is dit makkelijk in te stellen? Of moet er een heel script gemaakt worden?

[TheDutch]

Ik heb het even geprobeerd voor je en je kan daarvoor inderdaad niet het moveEffect voor gebruiken op een item renderer. Dit is geen standaard effect binnen Flex 2 dus zou je die zelf moeten programmeren. Zie de source code (ProductList.mxml) van de Flex Store hoe dit gedaan is :).

// EDIT: In het kort kan ik je vertellen dat dit niet gedaan is met een TileList maar met een Canvas. In dat Canvas stoppen ze met ActionScript de producten en positioneren ze die met een animatie door middel van ActionScript.

[Waldo]

Dit is overigens iets dat onze engineers bestuderen voor een volgende release van Flex ;-)

[TheDutch]

Good to know! :D.

@SteveW: In de tussentijd is het misschien een idee om een item renderer te gebruiken in je TileList en die een addedEffect="Fade" en removedEffect="Fade" mee te geven zodat het er enigzins fancy uit ziet zonder al te veel moeite van jouw kant. Speel er eens mee!

[StevenW]

Ik ga dat nu proberen :)
Komt zoiets wel in Flex 3?

[TheDutch]

Zoals Waldo (Sales Engineer bij Adobe Benelux) al aangaf zijn de engineers bij Adobe dat aan het bestuderen om het wellicht in een toekomstige Flex versie standaard erin te hebben :).

[StevenW]

wanneer wordt addedEffect toegepast? Want als de tilelist vergroot of verkleint wordt 'verdwijnen de items uit beeld' en worden ze niet echt verwijderd. Heb ik het dan verkeerd uitgelegd?

[Thomaz]

Waar heb je het "addedEffect" aan gekoppelt? Aan de TileList of aan elke foto?

[StevenW]

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="122" height="120">
<mx:Image id="image" width="120" height="120" source="{data.image}" bottom="0" toolTip="0" left="1" moveEffect="FadeIn" addedEffect="FadeIn" removedEffect="FadeOut"/>
</mx:Canvas>


Aan de itemrenderer denk ik.

[Thomaz]

Zo te zien heb je het effect aan de Image gekoppeld.
Maar het is denk ik verstandig om het effect aan de Canvas te koppelen.
Misschien kan je wat meer van je code posten, want het is niet helemaal duidelijk wat je nu doet. Wat zorgt er bijvoorbeeld voor dat deze Canvas+Image getoond wordt?

[StevenW]

<mx:TileList dataProvider="{buildings_provider.building}" backgroundAlpha="0.0" rollOverColor="#FF8000" borderThickness="0" itemRenderer="buildings" width="385" height="100%">


Ik heb de effecten nu op de canvas gezet.

en dit staat bovenaan:


<mx:Fade id="FadeIn" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Fade id="FadeOut" duration="500" alphaFrom="1.0" alphaTo="0.0"/>

[TheDutch]

Steve, haal dat moveEffect weg die is helemaal niet meer nodig en dat zal het effect alleen maar in de war gooien tijdens het scrollen. Verder kunnen die <mx:Fade /> dingen ook weg want die zijn ook niet nodig behalve als de standaard duration van Fade je niet bevalt maar dat lossen we dan wel op.

Dit (precies dit!) is alles wat nodig is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="122" height="120">
<mx:Image id="image" width="120" height="120" source="{data.image}" bottom="0" toolTip="0" left="1" addedEffect="Fade" removedEffect="Fade"/>
</mx:Canvas>

Wanneer je toch de <mx:Fade /> tags gaat gebruiken om met de duration te spelen moet je ze niet toevoegen als "Fade" (wat wel goed is voor het standaard effect) maar als "{jouwFade}" (wat goed is voor custom effects).

[StevenW]

Sorry,... maar het werkt niet.
Weet je zeker dat het zo werkt:


wanneer wordt addedEffect toegepast? Want als de tilelist vergroot of verkleint wordt 'verdwijnen de items uit beeld' en worden ze niet echt verwijderd. Heb ik het dan verkeerd uitgelegd?


Ze worden dus niet uit de tilelist verwijderd, maar verplaatsen in de tilelist.

[TheDutch]

Probeer anders nog eens duidelijk (in stappen) uit te leggen wat je precies wilt zodat we het over hetzelfde hebben.

[Thomaz]

Sorry,... maar het werkt niet.
Weet je zeker dat het zo werkt:
Ze worden dus niet uit de tilelist verwijderd, maar verplaatsen in de tilelist.

Wanneer de items in de TileList geplaatst worden, worden ze eerst in de DisplayList geplaatst. Dan zijn ze nog niet te zien, maar ze staan dan klaar om getoond te worden. Op dat moment 'zegt' elke item 'ik ben toegevoegd aan de DisplayList' oftewel het Event "added".
Vandaar dat je in elk item (je foto) een addedEffect kan toevoegen.
Wanneer je de TileList nu vergroot of verkleind, haalt de TileList alle items van de DisplayList af, maar ze blijven nog wel bestaan, je ziet ze alleen niet meer. Daarna worden ze opnieuw gepositioneerd en weer aan de DisplayList toegevoegd.

Wil je niet dat ze steeds verdwijnen, dan zou je een andere oplossing moeten kiezen. Je zou bijvoorbeeld alle foto's in een Canvas kunnen zetten. Met script plaats je ze dan netjes.
Wanneer je ze daarna anders positioneert, geef je alle items de opdracht "MoveTo". Heb je dan in elk item een Move-effect, zullen ze netjes naar hun nieuwe plaats bewegen.

[StevenW]

Wanneer de items in de TileList geplaatst worden, worden ze eerst in de DisplayList geplaatst. Dan zijn ze nog niet te zien, maar ze staan dan klaar om getoond te worden. Op dat moment 'zegt' elke item 'ik ben toegevoegd aan de DisplayList' oftewel het Event "added".
Vandaar dat je in elk item (je foto) een addedEffect kan toevoegen.
Wanneer je de TileList nu vergroot of verkleind, haalt de TileList alle items van de DisplayList af, maar ze blijven nog wel bestaan, je ziet ze alleen niet meer. Daarna worden ze opnieuw gepositioneerd en weer aan de DisplayList toegevoegd.

Dus je bedoelt dat het wel zou moeten werken? De foto's faden namelijk niet mooi in of weg.

[Thomaz]

Dus je bedoelt dat het wel zou moeten werken? De foto's faden namelijk niet mooi in of weg.
Dat zou kunnen. Je koppelt het effect aan de Image. Maar ik vraag me af of deze wel het Event "added" en "removed" krijgt. Zo te zien krijgt de Canvas dit Event. Dus zou je het effect aan je Canvas kunnen koppelen.

[TheDutch]

Inderdaad de effecten moeten op de Canvas zitten (de hoofdtag van de renderer) :).

ps. Zie ook post #12

[StevenW]

Ik had het al aan de canvas gedaan meteen toen u dat zei. Maar het werkt nog steeds niet.

[TheDutch]

Laat dan eens zien wat je nu hebt :).

[StevenW]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Model id="buildings_provider" source="assets/buildings.xml"/>
<mx:Panel>
<mx:HDividedBox liveDragging="true">
<mx:ViewStack>
<mx:Canvas>
<mx:Label text="label - text - text- text- text- text- text- text"/>
</mx:Canvas>
</mx:ViewStack>
<mx:TileList dataProvider="{buildings_provider.building}" itemRenderer="buildings"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>


buildings.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="122" height="120">
<mx:Image id="image" width="120" height="120" source="{data.image}" bottom="0" toolTip="{data.name}" left="1" addedEffect="Fade" removedEffect="Fade"/>
</mx:Canvas>


edit: :D het werkt. Ik heb een nieuw bestand gemaakt en getest. Het zal wel aan de code liggen. Ergens moet een foutje zitten. Ik weet in iedergeval dat hoe jullie het hebben uitgelegd goed is en dat het werkt zoals hierboven.

edit: de removeEffect werkt volgens mij zoals de addedEffect. In één keer weg in plaats van mooi weg faden.

[TheDutch]

Steve, ik zie dat de addedEffect en removedEffect in jouw code (buildings.mxml) nog steeds op de Image staan i.p.v. op de Canvas. Wat bedoelde je verder met je laatste edit?

[StevenW]

Dat klopt. Had ik niet gezien. En ik heb het nu op de Canvas geprobeerd en dan werkt het juist niet :S ...

Wat ik bedoel met de laatste edit is dat de afbeeldingen wel mooi infaden, maar niet mooi outfaden. Als er een rij verdwijnt dan is die meteen weg zonder te faden. Dus ik vraag me af waarom er dan removedEffect op zit.

[TheDutch]

Je moet het niet op de Image zetten maar op de Canvas. Voeg anders even de hele project folder als ZIP file toe aan dit onderwerp. Je doet iets fout dat kan niet anders :).

[StevenW]

Oke hier is de hele map:

[TheDutch]

Ik heb jouw project geimporteerd in mijn Flex Builder 2.0.1, gecompiled, en bij mij werkt het naar behoren: http://flashdevils.erwinverdonk.com/stevenw/

// EDIT: Bij het scrollen werken de effecten prima maar bij het kleiner maken van de divider werkt het niet wanneer de items wegvallen. Ik zal er eens naar kijken.

[TheDutch]

Volgensmij heb ik hem hoe je hem hebben wilt: http://flashdevils.erwinverdonk.com/stevenw/


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="122"
height="120"
hideEffect="Fade"
addedEffect="Fade"
removedEffect="Fade">

<mx:Image id="image"
width="120"
height="120"
source="{data.image}"
toolTip="{data.name}"/>

</mx:Canvas>

Zoals je ziet alle effecten gewoon op het Canvas gezet in plaats van op de Image en verder alleen een "hideEffect" toegevoegd :).

// EDIT: Er zit een bug - in de EffectManager class van Flex 2 (regel 736) - wanneer je de TileList te snel groot en klein maakt krijg je errors en werken de effecten niet meer tot de applicatie weer wordt heladen.

[StevenW]

Bij mij werkt alleen de addedEffect op de image en niet op de canvas :S

[TheDutch]

Gebruik je soms een beta versie van Flex 2? Want anders is het voor mij onbegrijpelijk en kan ik je helaas niet verder helpen.

[StevenW]

Ik heb het van adobe.com gedownload toen het uit kwam, dus ik neem aan van niet. Maar die bug is ook niet prettig. Dus dit is het beste. Ofniet?

[TheDutch]

Die bug (die trouwens specifiek is voor het removedEffect) kan gefixt worden, al is het een lastige. Buiten die bug is dit hoe het werkt en beter kan je het niet krijgen of je moet zelf een eigen Flex Component gaan schrijven met zijn eigen functionaliteiten :).

[StevenW]

Juist. Heel erg bedankt voor het helpen hiermee. :)