Embedding Images σε iPhone Εφαρμογές ActionScript 3.0

Το εν λόγω άρθρο έχει ως στόχο να σας καθοδηγήσει στην ανάπτυξη iPhone εφαρμογών με ενσωματωμένες εικόνες (embed Images) που θα αλλάζουν κατά τη διάρκεια λειτουργίας (on run-time) της εφαρμογής. Για τη δημιουργία αυτής της εφαρμογής χρησιμοποιήθηκε ActionScript 3.0 και το εργαλείο Flash Builder 4.5 της Adobe.

(Για να ενημερωθείτε σχετικά με τις ρυθμίσεις που πρέπει να κάνετε, για να μπορείτε να αναπτύξετε εφαρμογές για iPhone, δείτε το άρθρο «Ανάπτυξη iPhone Εφαρμογών σε ActionScript 3.0«).

Ενδεικτικά, λοιπόν, θα αναπτύξουμε μία εφαρμογή παρουσίασης φωτογραφιών που παράλληλα επιτρέπει τη μορφοποίηση της εμφάνισής της (skinable).

Η εφαρμογή περιλαμβάνει τις παρακάτω περιοχές:

  • Κεφαλίδα: εμφάνιση πληροφοριών σχετικά με την εφαρμογή
  • Περιοχή παρουσίασης φωτογραφιών: περιοχή, στην οποία θα εναλλάσσονται οι φωτογραφίες
  • Περιοχή κουμπιών: για τη διαχείριση των φωτογραφιών και της εμφάνισης
  • Υποσέλιδο: εμφάνιση λογότυπου και πληροφοριών δικαιωμάτων χρήσης

Ανοίξτε τον Flash Builder 4.5, δημιουργήστε ένα νέο Mobile Project (File > New > Flex Mobile Project) με τίτλο «StylesheetTutorial» (στην περίπτωσή μας).

Για κάθε μία από τις παραπάνω περιοχές πρέπει να δημιουργήσετε ένα νέο MXML Component μορφής View με ονόματα Header, ImgHolder, ButtonsHolder, Footer αντίστοιχα και ένα νέο MXML Component μορφής View με όνομα MainCanvas, το οποίο θα είναι και το κύριο View, μέσα στο οποίο θα φορτώνονται όλα τα προηγούμενα. Υποστηρικτικά χρησιμοποιείτε ένα Μοντέλο και ένα Stylesheet, μέσω των οποίων γίνεται όλη η λειτουργία της εφαρμογής.

Αυτό που αξίζει να σημειωθεί είναι οι διαφορετικοί τρόποι ενσωμάτωσης εικόνων και φωτογραφιών στην εφαρμογή και χρήση του Μοντέλου.

Για παράδειγμα, στην περιοχή του Footer η εικόνα ενσωματώνεται στο αντίστοιχο αντικείμενο Image με id footerlogo χρησιμοποιώντας μια κλάση ‘DigimagixLogo’ όπως φαίνεται παρακάτω (Footer.mxml).

Footer.mxml

footerlogo» styleName=»imgs» source=»{DigimagixLogo}» scaleX=»0.5″ scaleY=»0.5″ verticalAlign=»bottom»/>

Από την άλλη, στην περιοχή εμφάνισης των Φωτογραφιών, το Περιεχόμενο του Αντικειμένου Image (ImgHolder.mxml) προσδιορίζεται μέσω του Stylesheet που έχει ενσωματωθεί στην εφαρμογή συνολικά (StylesheetTutorial.mxml).

Πιο αναλυτικά, δηλώνουμε ότι το αντικείμενο Image με id ImageHolder έχει styleName την κλάση imgs, η οποία έχει οριστεί μέσα στο Stylesheet style.css, και το source του αντικειμένου ImageHolder αρχικοποιείται με την εικόνα που έχει οριστεί στο attribute bg της κλάσης imgs του Stylesheet style.css – part1.

ImgHolder.mxml

ImageHolder» width=»300″ height=»200″ creationComplete=»{Model.model.img = ImageHolder}» styleName=»imgs» source=»{ImageHolder.getStyle(«bg»)}« alpha=»0.3″ x=»0″ y=»0″ />

StylesheetTutorial.mxml

style.css – part1


.imgs
{

bg:                Embed(source=»assets/images/header.png»);
img1:            Embed(source=»assets/images/img1.jpg»);
img2:            Embed(source=»assets/images/img2.jpg»);
img3:            Embed(source=»assets/images/img3.jpg»);
img4:            Embed(source=»assets/images/img4.jpg»);

}

Αφού είδαμε δύο διαφορετικούς τρόπους να ενσωματώσουμε μία εικόνα στην εφαρμογή μας, στη συνέχεια μπορούμε να αλλάξουμε την εικόνα αυτή οποιαδήποτε στιγμή θελήσουμε, καθώς επίσης και το style ενός αντικειμένου.

Για τον σκοπό αυτό, με την ολοκλήρωση της δημιουργίας (creationComplete) του αντικειμένου Image με id ImageHolder δηλώνουμε το Use of online versions of probably the most popular land-based casino games on the online casino planet When I pay the cashier with money, we have extinguished our free-credits-report.com /debt relationship. is the kind of premium gaming experience gamers have started to expect from Bet365. αντικείμενο αυτό στο μοντέλο μας, εξισώνοντάς το με τη μεταβλητή img του μοντέλου (ImgHolder.mxml), για να μπορούμε να ελέγξουμε το In contrast to many of the casinos in Atlantic City which have close ties exterior tech and repair companies, Golden Nugget is going to be offering gambling online under its very own brand. source του ανά πάσα στιγμή κατά την περίοδο λειτουργίας της εφαρμογής μας (ButtonHolder.mxml).

Με αντίστοιχο τρόπο έχουμε δηλώσει το styleName του Component Footer, ώστε αλλάζοντας την τιμή της μεταβλητής μας στο μοντέλο να αλλάζει το styleName του Component μας και επομένως και η εμφάνισή του (Footer.mxml).

Για να πετύχουμε, λοιπόν, τόσο την εναλλαγή των φωτογραφιών όσο και την αλλαγή της εμφάνισης της εφαρμογής μας στο Component ButtonHolder έχουμε ορίσει δύο functions, οι οποίες αναλαμβάνουν να εφαρμόσουν αυτές τις αλλαγές κάθε φορά που πατάμε το αντίστοιχο κουμπί της εφαρμογής (ButtonHolder.mxml).

ButtonHolder.mxml

styleName=»{Model.model.btnStyle}» label=»Change Image» click=»ChngImgHandler(event)» width=»155″ buttonMode=»true»/>
styleName=»{Model.model.btnStyle}» icon=»" label=»{sknCnt==0?»Set Skin»:(sknCnt==3?»Skin» sknCnt «-click to reset»:»Skin» sknCnt)}» click=»ChngSkinHandler(event)» width=»155″ buttonMode=»true»/>

Αυτό επιτυγχάνεται μέσω των αντίστοιχων δηλωμένων μεταβλητών στο μοντέλο της εφαρμογής (Model.as).

Model.as

// img used in order to now from every component the object IMAGE which source would like to change.
public var img:Image;

// btn & hfStyle used in order to
public var btnStyle:String = «Button0″ ;
public var hfStyle:String = «hf0″;

Περίπτωση 1η:

Αλλάζουμε την τιμή μίας μεταβλητής στο μοντέλο και για παράδειγμα το Component Footer (Footer.mxml) αποκτά styleName ίσο με την μεταβλητή  Model.model.hfStyle που αντιστοιχεί στο όνομα μίας κλάσης (style.css – part2) στο stylesheet που έχουμε κάνει ήδη embed στην εφαρμογή μας.

Περίπτωση 2η:

Μέσω του δηλωμένου αντικειμένου img στο μοντέλο αλλάζουμε απευθείας την τιμή του source του, που αντιστοιχεί στο επιθυμητό attribute της κλάσης imgs στο stylesheet (style.css – part1) που έχουμε κάνει ήδη embed στην εφαρμογή μας.

style.css – part2


.hf0 {

backgroundAlpha:    0.7;
backgroundColor:    #000000;
color:                          #ffffff;
fontSize:                    14pt;

}

.hf1 {

backgroundAlpha:    0.7;
backgroundColor:    #aaf362;
color:                          #000000;
fontSize:                    14pt;

}

Τον πλήρη κώδικα της συγκεκριμένης εφαρμογής μπορείτε να τον βρείτε στον παρακάτω σύνδεσμο (StylesheetTutorial source files).

Leave a Reply

Η ηλ. διεύθυνσή σας δεν κοινοποιείται. Τα υποχρεωτικά πεδία σημειώνονται με *


επτά × 1 =

Επιτρέπονται τα εξής στοιχεία και ιδιότητες HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>