Lige nu på Jubii Shopping
Så, nu fik jeg endelig lejlighed til at bruge de Actionscript Tween classes som jeg skrev om tidligere….og hvor må jeg altså tilstå at de kan gøre livet ufatteligt meget nemmere.
Baggrunden for dette projekt var behovet for en fælles måde at promovere vores produkter fra Jubii Shopping rundt omkring på Jubii, og helst på en måde der på samme tid kunne fange brugerens opmærksomhed, uden at virke alt for anmasende og påklistret.
Resultatet blev dette lille “rullebånd” der automatisk indlæser produkter fra shoppen fra relevante kategorier, for eksempel så viser den de nyeste musik cd’er på Jubii Musik, mens den viser navigation gadgets m.m. på Jubii Biler.
Der hvor tween classes var rigtigt gode, var især i forbindelse med at lave den effekt der kommer når brugeren bevæger musen over et bestemt produkt, da der her sker en hel masse ting samtidig:
- Pris kører ud
- Produktbillede forstørres
- Produkttekst vises
- Køb knap kommer ind
- …og alle elementer centreres
Den samlede kombination af effekter ville have været stort set umulig at lave med manuelle animerede movieclips, og hvis jeg selv skulle have været henne og lave forskellige funktioner til alle de forskellige måde tingene kommer ud og ind på (zoom, gennemsigtighed, positionering….og kombinationer af alle tre), så ville det have taget en krig, i stedet ligger den samlede mængde af effekter gemt i disse få liniers kode (som er taget ud af en større samlet funktion jeg lavede):
//Produktbillede
var at1 = new mx.transitions.Tween(this.Img, "_xscale", mx.transitions.easing.Strong.easeOut, this.Img._xscale, 100, 0.8, true);
var at2 = new mx.transitions.Tween(this.Img, "_yscale", mx.transitions.easing.Strong.easeOut, this.Img._yscale, 100, 0.8, true);
var at3 = new mx.transitions.Tween(this.Img, "_x", mx.transitions.easing.Strong.easeOut, this.Img._x, gtl.x, 0.8, true);
//Pris
var at4 = new mx.transitions.Tween(this.Price, "_y", mx.transitions.easing.Strong.easeOut, this.Price._y, this.Price._y + 50, 0.8, true);
//Produkt tekst
var at6 = new mx.transitions.Tween(ProductTxt, "_xscale", mx.transitions.easing.Strong.easeOut, 0, 100, 0.8, true);
var at7 = new mx.transitions.Tween(ProductTxt, "_yscale", mx.transitions.easing.Strong.easeOut, 0, 100, 0.8, true);
var at8 = new mx.transitions.Tween(ProductTxt, "_x", mx.transitions.easing.Strong.easeOut, ProductTxt.startX, ProductTxt.endX, 0.8, true);
//Køb knap
var at20 = new mx.transitions.Tween(BuyBtn, "_xscale", mx.transitions.easing.Strong.easeOut, 0, 100, 0.8, true);
var at21 = new mx.transitions.Tween(BuyBtn, "_yscale", mx.transitions.easing.Strong.easeOut, 0, 100, 0.8, true);
var at22 = new mx.transitions.Tween(BuyBtn, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, 0.8, true);
Tilgivet, det ser måske en anelse uoverskueligt ud når man sådan maser det hel sammen, men sådan føles det ikke når du arbejder med det, så lad mig komme med opfordringen endnu engang til at læse denne artikel:
Actionscript Tween classes
God fornøjelse 
[…] Tag for eksempel dette site for Maya Albana eller kig på det rullenende banner for Jubii Shopping der kører i bunden på Jubii Musik, og som jeg tidligere har skrevet lidt om. […]