Photo Gallery Overview

Intrebari despre Actionscript 3.0

Photo Gallery Overview

Mesajde Loopul » Lun Iun 14, 2010 6:59 pm

Buna lume! :)

Astazi mi s-a pus la dispozitie o oferta pentru un 100% flash image gallery. Am vorbit si planuit ceva timp cu clientul si mi-am facut un plan de lucru. Cum acesta este primul meu "freelance-job" m-am gandit sa imi postez progresul pe acest forum ca atunci cand dau de belele sa ma ajutati un pic sa o scot la capat.

Clientul doreste sa fac ceva genul : http://www.ciprian-lupan.ro/
One-page, XML, 100%Flash, Album-oriented si desigur Photo Gallery.

Overview:
Ce am hotarat noi sa facem.

1. Schema de culori.
a) Folosim primele 2 culori pentru background si foreground si a 4-a culoare pentru scris din tema : http://kuler.adobe.com/#themes/search?term=old%20photo%20green

sau

b)Folosim clasicul monocromatic cu nuante de negru ( eventual un verde-galbui pentru scris/highlight )

2. Trebuie sa fie usor de navigat si de utilizat ( daca reuseste si mama atunci a trecut testul )
a)Fara butoane - doar click in zone in care apare un indicator in loc de sageata ( gen "+" , "-", ">", "<' ) pentru zoom, next, previous.

b)Interfata sa fie minimalista

3. O sa am obiectul Album ( care la CLICK deschide pozele din albumul respectiv ) si obiectul PhotoItem ( care o sa fie poza propiu zisa ce la CLICK o mareste pe tot ecranul ) ce o sa stea toate pozele in PhotoArray.

4. Totul o sa fie importat dintr-un fisier .xml
Obiectul Album o sa aiba importat din album.xml
- calea catre folderul unde sa afla pozele
-numarul de poze ( deoarece pozele o sa fie denumite 1.jpeg,2.jpeg... ) // sa imi spuneti daca fac bine
-poza reprezentativa pentru album
-titlul albumului
-data albumului
-descrierea albumului
O sa am si AlbumArray pentru a tine albumele frumos.

5. PhotoItem o sa fie compusa din poza propriu zisa ( cu MouseEvent.CLICK pentru marirea pozei pe toata scena ) si taguri. Toate PhotoItem dintr-un album vor fi afisate una dupa alta la deschiderea albumului respectiv.

6. O sa fac toata aplicatia scalabila cu browerul. Stage.StageResize ca event ce apeleaza o functie care seteaza marimea tuturor obiectelor relativ cu stage.stageWidth si stage.stageHeight.

7. O sa am un obiect Header care o sa aiba logo/poza sus, apoi bara de navigare ( Acasa, Despre Mine, Contact )

8.Totul o sa fie integrat intr-un scrollBox facut de mine. ( sau mai bine folosesc scrollBar-ul browserului facand .swf-ul cu height mare? ) -help me-

9.Vreau cu ocazia asta sa folosesc niste clase cunoscute pentru Tween si TextField, deoarece am dat de mari belele cu cele din flash. Daca stiti niste clase free cunoscute ( gen Tweener pentru tween ) sa imi ziceti va rog.

10. Se poate ca atunci cand incarc o poza, cu rezolutie 1800x1200 de ex, si o afisez pe scena intr-un MovieClip de 200x200 se poate sa o maresc la maxim ( 1800x1200 ) scaland MovieClip-ul. Ca asa as vrea si niste butoane sa fac. Daca este vre-o clasa care sa o faca mai eficient pastrand rezolutia sa imi spuneti. Ar fi foarte nasol sa fac copii la poze doar pentru niste thumbnail-uri.

11. Oare merge sa fac functie de FadeIn( x:MovieClip ) si FadeOut ( x:MovieClip ) ca sa afisez totul mai frumos. (ex. pentru afisarea myMC cu fadeIn fac FadeIn(myMc, [timp]) )

12. Vreau sa invat sa folosesc SWFObject ca sa memorez in istoria browser-ului pe unde am fost in flash( ca sa pot da Back < )

13. O sa fac un meniu de tag-uri( ca sa pot afisa toate pozele dupa categorii ) ex. "alb negru", "peisaj", "portret"

14. 3 pagini:
-home ( pe care vor fi afisate albumele de sus pana jos; albumele o sa aiba ce are obiectul Album; vezi punctul 4)
-despre mine ( o sa aiba o poza cu clientul si descrierea lui; tot .xml trebuie sa o pun )
-contact (mail, telefon, etc.)

Cam asta e planul meu de batalie :D . O sa il am aici si o sa spun ce mai fac ca sa am un overview. Plus ca pot beneficia de sfatul unor oameni cu experienta ;) .

Urati-mi noroc si daca ati zarit un "flaw" in planul meu malefic sa imi spuneti ca sa nu imi fie mai greu mai incolo.

Merci!
Lup.
Indiferent daca tu crezi ca poti sau ca nu, ai dreptate.
Imagine
Avatar utilizator
Loopul
 
Mesaje: 130
Membru din: Mie Iun 24, 2009 1:41 pm
Localitate: Piatra-Neamt

Re: Photo Gallery Overview

Mesajde Loopul » Lun Iun 14, 2010 7:07 pm

Pentru schema de culori cred ca ar merge si asta facuta de mine http://kuler.adobe.com/#themes/search?term=retinal

si inca ceva..

15.Este posibil in flash sa deschizi un fisier sa zicem .xml si apoi sa il salvezi pe server cu acelasi nume dupa ce a fost modificat.
Ceva gen
-request file.xml
-myXML:XML = request
-modificare myXML
-salvare pe server a myXML in file.xml ?
Indiferent daca tu crezi ca poti sau ca nu, ai dreptate.
Imagine
Avatar utilizator
Loopul
 
Mesaje: 130
Membru din: Mie Iun 24, 2009 1:41 pm
Localitate: Piatra-Neamt

Re: Photo Gallery Overview

Mesajde alexxcz » Lun Iun 14, 2010 9:46 pm

Sa incep de la coada...

Nu, nu ai cum sa salvezi din Flash direct pe server, dar poti trimite XML-ul in PHP, de exemplu, si sa il salvezi de acolo.

Cred ca te referi la SWFAddress, nu SWFObject daca vrei sa folosesti navigatia din browser si history list. Daca da iti sugerez sa il folosesti doar pentru cele trei pagini. Galeriile foto tind catre schimbare frecventa deci o poza la care cineva are un bookmark e putin probabil sa ramana pentru o perioada lunga de timp aceeasi. Dar ramane la alegerea ta. Inca ceva, daca vrei sa implementezi Deep linking e bine sa o faci inca de la inceput deoarece mai tarziu devine cam greu.

Pentru tween-uri ai o gramada de engine-uri la dispozitie. Cel mai bun ar fi TweenMax, dar necesita licenta pentru proiecte comerciale. Unul mai bun si liber de folosit in orice proiect ar fi GTween. In rest mai sunt destule: BetweenAS3, ByteTween, Tweener etc. Majoritatea sunt si pentru AS2 si pentru AS3.

Se poate sa afisezi poze de rezolutie mare mai mici dar nu prea e indicat. Cel mai bine e sa incarci pentru thumbnail-uri versiuni mai mici ale pozei respective. Motivul e simplu, nu toata lumea are broadband si daca o poza are in medie 500kb, sa spunem (desi la 1800x1200 ar avea peste 2mb) gandeste-te cat ar dura pana sa apara macar 3 thumbnail-uri la o viteza de 128kb/s. Si daca te gandesti ca ar fi mai multa munca sau ceva de genu atunci cand adaugi poze noi... din contra, poti face un mic script in PHP care sa-ti genereze thumbnail-uri automat din pozele uploadate.

Fa un scrollbar custom si swf-ul il embed-uiesti la 100%. Nu numai ca ar arata mai bine, dar e putin probabil sa functioneze exact cum vrei tu cu scrollbar-ul din browser.

E recomandat sa folosesti layout lichid la o aplicatie de genu, deci da... foloseste-te de resize.

La partea cu PhotoItem si Album nu inteleg cum vrei sa o abordezi... Daca vrei Object Oriented atunci e destul de buna ideea, dar poti pleca de la o clasa de baza ImageComponent, sa zicem, si din ea pot mostenii doua clase Photo si Album care la baza au aceleasi caracteristici. Un fel de structura arbore. Ti-ar usura munca destul daca ai folosi o implementare a Composite Pattern, mai ales daca ai de gand sa pui albume in albume.

Pentru client ar fi mai usor sa faci un mini CMS pentru toata aplicatia si sa folosesti o baza de date sau pur si simplu foldere pe server in care sa stochezi imaginile. Iar cu PHP, de exemplu, sa generezi un fisier XML care sa-l trimiti in Flash pentru prelucrare.

Cat despre navigatia pe tastatura nu iti sugerez sa te complici. E de ajuns sa folosesti mouse-ul, eventual sa utilizezi niste tool tip-uri sau simboluri care sa inlocuiasca cursorul la anumite comenzi.

Cat despre culori cel mai bine ar fi sa lasi clientul sa aleaga. :)
“First, solve the problem. Then, write the code.”
(John Johnson)
Avatar utilizator
alexxcz
 
Mesaje: 620
Membru din: Lun Iul 21, 2008 9:12 pm
Localitate: Braila

Re: Photo Gallery Overview

Mesajde Loopul » Lun Iun 14, 2010 9:59 pm

Aha, merci imi va fi de folos.

Desi nush prea sigur partea cu PHP. Clientul m-a intrebat sa ii fac si un modul de administrare. As primi un bonus. Stiu ca se poate face un modul in PHP.

PHP stiu putin. Se merita sa invat? Clientul este un prieten de-al meu deci nu este mare graba. Intr-o luna-doua ar trebui sa termin.

Am vazut ca nu este greu. Am xampp si o carte de PHP for absolute beginers care am citit-o pana la jumate. Stiti unde gasesc un library cu toate clasele frumos organizat ca AdobeHelp? M-ar ajuta mult. Daca stiti un modul de administrare ceva pe net free sa imi spuneti.

Deci am acuma in obiectiv: php thumb generator, modul admin php (integrat cu .xml), OOP totul, SWFAddress (merci de corectie)-poate folosesc deep linking, folosesc TweenMax.

Acuma stit si ceva custom TextField? ;)
Indiferent daca tu crezi ca poti sau ca nu, ai dreptate.
Imagine
Avatar utilizator
Loopul
 
Mesaje: 130
Membru din: Mie Iun 24, 2009 1:41 pm
Localitate: Piatra-Neamt

Re: Photo Gallery Overview

Mesajde alexxcz » Lun Iun 14, 2010 10:27 pm

PHP e usor de invatat, cel putin asa mi se pare mie, desi nu e un limbaj foarte frumos. Pentru toate functiile, sintaxa si orice alta documentatie poti sa te uiti pe php.net. Acum, daca se merita sau nu ramane la opinia ta, eu zic ca se merita sa stii macar un limbaj de server-side scripting, fie PHP, fie ASP/ASP .NET, fie ColdFusion, Perl, Java si care mai sunt. Nu neaparat sa te specializezi pe el, dar Flash-ul integrat cu server-ul devine mai interesat, din punctul meu de vedere.

Oricum, dupa cum ti-am zis pentru client e mult mai comod, si chiar si pentru tine, sa faci un CMS(modul de administrare). Daca vrei sa incerci pe PHP e destul de usor si poti gasi mii de exemple pe net.

In fine, nu inteleg ce te referi prin custom TextField... cum adica custom? TextField-ul e nativ din Flash pentru afisarea unui text pe ecran/manipularea lui/introducerea textului in el. Ce anume ai nevoie in plus pentru text? Sau te referi la efecte de tranzitie/afisare a textului?
“First, solve the problem. Then, write the code.”
(John Johnson)
Avatar utilizator
alexxcz
 
Mesaje: 620
Membru din: Lun Iul 21, 2008 9:12 pm
Localitate: Braila

Re: Photo Gallery Overview

Mesajde Loopul » Mie Iun 30, 2010 6:06 pm

Am inceput de 3 zile sa fac galeria foto pentru client si merge bine, numai ca nu imi dau seama cum sa adaug duntionalitate pentru MouseWheel la scrollBar-ul meu custom.
Scroll-ul merge bine si sunt multumit numai ca rotitza e la putere :)
3 clase care compun sb.
ScrollBar
Cod: Selectaţi tot
package {
   
   import flash.display.*;
   import flash.events.*;
   
   public class ScrollBar extends MovieClip{
      
      private var yOffset:Number;
      private var yMin:Number;
      private var yMax:Number;
      
      public function ScrollBar(){
         
         this.addEventListener(Event.ADDED_TO_STAGE, addListeners);
      }

      
      private function addListeners(e:Event){
         stage.addEventListener(MouseEvent.MOUSE_UP, thumbUp);
         thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDown);
      }
      
      private function thumbDown(e:MouseEvent) {
         
         yMin = 0;
         yMax = track.height - thumb.height;
         
         stage.addEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
         yOffset = mouseY -  thumb.y ;
      }
      
      private function thumbUp(e:MouseEvent) {
         e.target.stage.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
      }
      
      private function thumbMove(e:MouseEvent){
         thumb.y = mouseY - yOffset;
         
         if(thumb.y <= yMin)
            thumb.y = yMin;
         if(thumb.y >= yMax)
            thumb.y = yMax;
         
         dispatchEvent(new ScrollBarEvent(thumb.y / yMax));
         
         e.updateAfterEvent();
      }
      
   }
   
}



ScrollBarEvent
Cod: Selectaţi tot
package {
   
   import flash.events.*;
   
   public class ScrollBarEvent extends Event{
      
      public static const VALUE_CHANGED = "valueChanged";
      public var scrollPercent:Number;
      
      public function ScrollBarEvent(sp:Number){
         super(VALUE_CHANGED);
         scrollPercent = sp;
      }
      
      
      
   }
   
}


ScrollBox ( continutul va fi in ScrollBox.content )
Cod: Selectaţi tot
package {
   
   import caurina.transitions.*;
   import flash.display.*;
   import flash.events.*;
   
   public class ScrollBox extends MovieClip{
      
      public function ScrollBox(){
         
         sb.addEventListener(ScrollBarEvent.VALUE_CHANGED, sbChange);
         
      }
      
      private function sbChange(e:ScrollBarEvent){
         Tweener.addTween(content, {y:(-e.scrollPercent*(content.height - masker.height)),time:1});
      }
      
      public function resize(widthBox:Number, heightBox:Number):void{
         
         masker.width = widthBox - sb.width * 2;
         masker.height = heightBox;
         
         sb.x = widthBox - sb.width;
         sb.track.height = heightBox;
         sb.thumb.height = 30;
         
         
      }
   }
   
}



Am incercat sa fac ceva la event, numai ca ma cam incurca modul de functionare al eventurilor. Pana acuma le-am folosit binisor dar nu prea ma pricep sa le creezi ( nu vad logica unui event custom ). Pana acuma am facut dupa tut. Daca stiti o solutie sa imi spuneti va rog. ;)

Lup.
Indiferent daca tu crezi ca poti sau ca nu, ai dreptate.
Imagine
Avatar utilizator
Loopul
 
Mesaje: 130
Membru din: Mie Iun 24, 2009 1:41 pm
Localitate: Piatra-Neamt

Re: Photo Gallery Overview

Mesajde bocco » Joi Iul 01, 2010 12:02 pm

Nu vad de ce ar fi cazul aici sa creezi un event.Ai putea pur si simplu sa arunci un event de tip "MouseEvent.MOUSE_WHEEL" si in functie de proprietatea "delta"(din care imi amintesc :p ) a eventului misti continutul. ....Scuzama daca gresesc sunt cam somnoros la ora asta si e posibil sa nu fi inteles prea bine ce vrei tu sa faci.
bocco
 
Mesaje: 58
Membru din: Mar Sep 22, 2009 2:34 pm
Localitate: Suceava

Re: Photo Gallery Overview

Mesajde alexxcz » Joi Iul 01, 2010 6:30 pm

Nu e nevoie sa folosesti un event custom. Petru a transmite schimbarea din scrollbar poti dispatch-ui un Event de tip CHANGE si ar fi indicat sa folosesti o proprietate (position sau value de exemplu) in care sa stochezi pozitia scrollbar-ului ca un numar de la 0.0 la 1.0. Cat pentru rotita poti folosi MouseEvent.MOUSE_WHEEL, dupa cum a spus si bocco iar de acolo sa folosesti proprietatea delta. Daca tot nu te descurci mai posteaza si iti modific eu codul cam cum ar trebui sa arate.
“First, solve the problem. Then, write the code.”
(John Johnson)
Avatar utilizator
alexxcz
 
Mesaje: 620
Membru din: Lun Iul 21, 2008 9:12 pm
Localitate: Braila

Re: Photo Gallery Overview

Mesajde Loopul » Joi Iul 01, 2010 8:07 pm

Inca o intrebare. Am folosit un pattern generator ca sa imi fac fundalul website-ului cu dungi. Am luat o bucatzica de 10X10px care trebuie sa o pictez pe tot ecranul. Aveti vreo idee mai simpla pentru asa ceva? Eu m-am gandit sa pun intr-un array totul si merg cu un for() pana umplu scena si apoi transform toate obiectele .png in bitmapData. E bine asa sau ma complic?
Link:http://www.stripegenerator.com/#Zm9yZT0yNDIzMWY7aD0yMDA7dz0xMDtwPTEwO2JhY2sxPTE0MTQxNDtiYWNrMj0wMDAwMDA7Z3Q9MDtkPTA7c2hhZG93PTA7
Indiferent daca tu crezi ca poti sau ca nu, ai dreptate.
Imagine
Avatar utilizator
Loopul
 
Mesaje: 130
Membru din: Mie Iun 24, 2009 1:41 pm
Localitate: Piatra-Neamt

Re: Photo Gallery Overview

Mesajde alexxcz » Vin Iul 02, 2010 12:05 am

Pai daca vrei ca fundalul sa-ti blocheze playerul poti si asa, dar crede-ma... pentru un ecran de 1920x1080 ar insemna un volum imens de calcule. Cel mai usor poti face cu Drawing API-ul din flash. Pe scurt cam asta ar trebui sa faci
Cod: Selectaţi tot
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var bg:Sprite = new Sprite();       // Sprite-ul ce va contine background-ul.
var pat:BitmapData = Bitmap(tile).bitmapData;     // Pattern-ul folosit la desenare.
bg.x = bg.y = 0;      // Pozitionam background-ul in coltul din sus stanga.
addChildAt(bg, 0);      // Adaugam background-ul in display list pe pozita cea mai de jos (sa fie sub alte obiecte de pe scena)
drawBg(bg, stage.stageWidth, stage.stageHeight);    // Chemam functia ce deseneaza background-ul

stage.addEventListener(Event.RESIZE, onResize);    // Adaugam un event listener la redimensionarea scenei
function onResize(e:Event):void
{
    // Alt cod de pozitionare elemente etc
    drawBg(bg, stage.stageWidth, stage.stageHeight);   // Redesenam background-ul la redimensionarea scenei
}
/**
  * Functia ce deseneaza background-ul
  *
  * @param    container   Containerul pentru background.
  * @param     width        Latimea background-ului
  * @param     height       Inaltimea background-ului
function drawBg(container:Sprite, width:Number, height:Number):void
{
    with(container.graphics)
    {
         clear();
         beginBitmapFill(pat);
         drawRect(0, 0, width, height);
         endFill();
     }
}


Nu stiu daca am scris totul 100% corect, dar cam asa ar trebui sa arate. In linia
Cod: Selectaţi tot
var pat:BitmapData = Bitmap(tile).bitmapData;

tile este imaginea (obiect de tip Bitmap) ce contine pattern-ul care vrei sa-l desenezi.

EDIT: Am gasit si un exemplu mai vechi facut in alt topic. Mai poate fi imbunatatit, dar cred ca e suficent sa intelegi cam ce trebuie sa faci. :) Salutare!
“First, solve the problem. Then, write the code.”
(John Johnson)
Avatar utilizator
alexxcz
 
Mesaje: 620
Membru din: Lun Iul 21, 2008 9:12 pm
Localitate: Braila

Următorul

Înapoi la ActionScript 3.0

Cine este conectat

Utilizatorii ce navighează pe acest forum: Niciun utilizator înregistrat şi 1 vizitator

cron