Hogyan készítsünk flash alkalmazást flash szerkesztőben. DIY Flash App Learning AS3 nyelvet

A Flash alkalmazások és multimédiás tartalmak, például szalaghirdetések, animációk és játékok fejlesztésére szolgáló platform. A környezettel való interakcióhoz számos program készült, amelyek lehetővé teszik a fent jelzett anyagok létrehozását. Ebben az áttekintésben ezekről lesz szó.

Ez az Adobe által kifejlesztett program talán a leghíresebb eszköz flash alkalmazások, rajzfilmek és animált webes objektumok létrehozására. Számos funkciót tartalmaz, amelyek közül az egyik a parancsok Action Script nyelven történő programozása.

Adobe Flash Builder

A Flash Builder egy hatékony alkalmazásforráskód-szerkesztő hibakereső funkciókkal. Működhet önálló eszközként programok fejlesztéséhez, illetve segédeszközként az Adobe Flash Professional programban létrehozott projektek szerkesztéséhez.

KoolMoves

A Lucky Monkey Designs amerikai fejlesztők agyszüleménye úgy készült, hogy versenyezzen az Adobe termékeivel. Az azonos alapfunkciókkal - animációkészítés és akcióprogramozás - a program barátságosabb felülettel rendelkezik, és kevésbé nehéz megtanulni.

Áttekintettük a multimédiás alkalmazások fejlesztését segítő szoftverek több képviselőjét. Az első két termék kiegészíti egymást, és megfelelő megközelítéssel és szakértelemmel bármilyen feladattal megbirkózik, de nagyon összetettek. A KoolMoves egy kompaktabb és könnyen használható eszköz.

Az ActionScript 3.0 nyelv számos alkalmazásfejlesztő környezetben használható, beleértve a Flash Professional és a Flash Builder eszközöket, valamint bármilyen szövegszerkesztőt.

Ez a példa végigvezeti az egyszerű ActionScript 3.0 alkalmazás létrehozásának és modernizálásának lépésein a Flash Professional vagy a Flash Builder segítségével. Az Ön által létrehozott alkalmazás egy egyszerű modell külső ActionScript 3.0 osztályú fájlok használatához a Flash Professional és Flex eszközökben.

ActionScript alkalmazás tervezése

Ez a példa egy "Hello World" nevű szabványos ActionScript alkalmazást mutat be, amelynek egyszerű szerkezete van.

Az alkalmazás neve HelloWorld.

Egyetlen szövegmezőt jelenít meg a "Hello World!"

Az alkalmazás egy Greeter objektumorientált osztályt használ. Ez a struktúra lehetővé teszi az osztály használatát Flash Professional vagy Flex projektekben.

Ez a példa először létrehozza az alkalmazás alapverzióját. Ezután a rendszer hozzáadja a funkciókat, így a felhasználó megadhatja a nevét, és az alkalmazás ellenőrzi, hogy a név szerepel-e az ismert felhasználók listájában.

E rövid meghatározás után megkezdheti az alkalmazás létrehozását.

A HelloWorld Project és a Greeter osztály létrehozása

A Hello World alkalmazás tervezési leírása szerint a kódjának könnyen újrafelhasználhatónak kell lennie. E cél elérése érdekében az alkalmazás egyetlen Greeter objektumorientált osztályt használ. Ezt az osztályt a Flash Builderben vagy a Flash Professionalban létrehozott alkalmazásokban használják.

HelloWorld projekt és Greeter osztály létrehozása Flexben

A Flash Builder eszközben válassza a Fájl > Új > Flex projekt lehetőséget.

Írja be a HelloWorld nevet a Projekt neve mezőbe. Győződjön meg arról, hogy az Alkalmazás típusa Web értékre van állítva (Fut az Adobe Flash Playerben), majd kattintson a Befejezés gombra.

A Flash Builder létrehozza a projektet, és megjeleníti azt a csomagkezelő ablakban. Alapértelmezés szerint a projekt tartalmaz egy HelloWorld.mxml nevű fájlt, amely megnyílik a szerkesztőben.

Most egy egyéni ActionScript-osztályfájl létrehozásához a Flash Builderben válassza a Fájl > Új > ActionScript-osztály parancsot.

Az Új ActionScript-osztály párbeszédpanel Név mezőjébe írja be: Greeter osztálynévként, majd kattintson a Befejezés gombra.

Ha Greeter osztályt szeretne létrehozni a Flash Professional eszközben, tegye a következőket:

A Flash Professional eszközben válassza a Fájl > Új menüpontot.

Az Új dokumentum párbeszédpanelen válassza ki az ActionScript fájlt, és kattintson az OK gombra.

Ekkor megjelenik az új ActionScript-fájl szerkesztésére szolgáló ablak.

A Greeter osztály egy Greeter objektumot határoz meg, amelyet a HelloWorld alkalmazás használ.

Kód hozzáadása a Greeter osztályhoz

Írja be a következő kódot egy új fájlba (a kód egy része már hozzáadva lehet):

Csomag ( public class Greeter ( nyilvános függvény sayHello():String ( var greeting:String; greeting = "Hello World!"; return greeter; ) ) )

A Greeter osztály tartalmaz egy metódust, a sayHello() , amely a "Hello World!" kifejezést tartalmazó karakterláncot ad vissza.

Az ActionScript-fájl mentéséhez válassza a Fájl > Mentés parancsot.

A Greeter osztály készen áll az alkalmazásban való használatra.

Hozzon létre egy alkalmazást ActionScript kóddal

A most létrehozott Greeter osztály a programfüggvények önálló halmazát határozza meg, de nem reprezentál teljes alkalmazást. Az osztály használatához létre kell hoznia egy Flash Professional dokumentumot vagy egy Flex projektet.

A kód generálásakor a Greeter osztály egy példányát kell használnia. Az alábbiakban ismertetjük a Greeter osztály alkalmazásban való használatának eljárását.

A Flash Professional eszközzel ActionScript alkalmazás létrehozásához kövesse az alábbi lépéseket:

Válassza a Fájl > Új lehetőséget.

Az Új dokumentum párbeszédpanelen válassza a Flash File (ActionScript 3.0) lehetőséget, majd kattintson az OK gombra.

Megnyílik a Dokumentum létrehozása ablak.

A Flash Professional eszközpalettán válassza a Szöveg eszközt. Húzza a színpadra egy körülbelül 300 pixel széles és 100 pixel magas új szövegmező meghatározásához.

A Tulajdonságok panelen, miközben a Stage szövegmező továbbra is ki van jelölve, állítsa a szövegtípust Dinamikus szövegre, és írja be mainText mint a szövegmezőpéldány neve.

Kattintson az idővonal első képkockájára. Nyissa meg a Műveletek panelt az Ablak > Műveletek kiválasztásával.

A Műveletek panelen írja be a következő szkriptet:

Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello();

Mentse el a fájlt.

Ha ActionScript alkalmazást szeretne létrehozni a Flash Builder eszközzel, kövesse az alábbi lépéseket.

Nyissa meg a HelloWorl.mxml fájlt, és adja hozzá a kódot a következő nyomtatásnak megfelelően:

Ez a Flex projekt négy MXML címkét tartalmaz:

• Címke meghatározza az alkalmazástárolót.

  Címke meghatározza az Alkalmazás címke elrendezési stílusát (függőleges elrendezését).

  Címke tartalmaz néhány ActionScript kódot.

  Címke meghatároz egy mezőt, amely szöveges üzeneteket jelenít meg a felhasználó számára.

Címkekód definiálja az initApp() metódust, amely az alkalmazás betöltésekor kerül meghívásra. Az initApp() metódus a mainTxt szövegterület szöveges értékét az újonnan létrehozott Greeter osztály sayHello() metódusa által visszaadott „Hello World!” karakterláncra állítja be.

Az alkalmazás mentéséhez válassza a Fájl > Mentés parancsot.

ActionScript-alkalmazások közzététele és érvényesítése

A szoftverfejlesztés egy interaktív folyamat. A kód megírása után le kell fordítani és addig kell szerkeszteni, amíg az teljesen konzisztens lesz a feladatokkal. Futtassa az összeállított alkalmazást, és ellenőrizze, hogy végrehajtja-e a feladatban leírt feladatokat. Ha nem, akkor módosítania kell a kódot, amíg el nem éri a kívánt eredményt. A Flash Professional és a Flash Builder fejlesztői környezet számos lehetőséget kínál az alkalmazások közzétételére, tesztelésére és hibakeresésére.

Az alábbiakban bemutatjuk a HelloWorld alkalmazás érvényesítésének fő lépéseit ezekben a környezetekben.

Egy ActionScript-alkalmazás Flash Professional eszközzel való közzétételéhez és teszteléséhez kövesse az alábbi lépéseket:

Tegye közzé az alkalmazást, és ellenőrizze a fordítási hibákat. A Flash Professional alkalmazásban válassza a Kezelés > Film tesztelése menüpontot az ActionScript kód lefordításához és a HelloWorld alkalmazás futtatásához.

Ha az alkalmazás tesztelésekor hibákat vagy figyelmeztetéseket lát a Kimenet ablakban, javítsa ki ezeket a hibákat a HelloWorld.fla vagy HelloWorld.as fájlban. Ezután ellenőrizze újra az alkalmazást.

Ha nincs fordítási hiba, a Hello World alkalmazás megjelenik a Flash Player ablakában.

Miután sikeresen létrehozott egy egyszerű, de teljes ActionScript 3.0 objektumorientált alkalmazást, készen áll a kezdésre.

Egy ActionScript-alkalmazás Flash Builder eszközzel való közzétételéhez és teszteléséhez kövesse az alábbi lépéseket.

Válassza a Futtatás > HelloWorld futtatása lehetőséget.

Elindul a HelloWorld alkalmazás.

• Ha az alkalmazás tesztelése közben hibákat vagy figyelmeztetéseket lát a Kimenet ablakban, javítsa ki ezeket a hibákat a HelloWorld.mxml vagy a Greeter.as fájlban. Ezután ellenőrizze újra az alkalmazást.

  Ha nincs fordítási hiba, akkor a megnyíló böngészőablakban megjelenik a Hello World alkalmazás. A képernyőn a „Hello World!” szövegnek kell megjelennie.

Miután sikeresen létrehozott egy egyszerű, de teljes objektumorientált ActionScript 3.0 alkalmazást, folytathatja a HelloWorld alkalmazás modernizálását.

HelloWorld App modernizáció

Az alkalmazás érdekesebbé tétele érdekében megadhat egy felhasználónév-visszaigazolást, miután ellenőrizte a megadott névlistát.

Először is frissítenünk kell a Greeter osztályt annak funkcionalitásának bővítésével. Ezután frissítenie kell az alkalmazást, hogy az használni tudja az új funkciókat.

Frissítse a Greeter.as fájlt

Nyissa meg a Greeter.as fájlt.

Módosítsa a fájl tartalmát az alábbiak szerint (az új és a módosított sorok félkövérrel vannak szedve):

Package(public class Greeter( /** * Meghatározza azokat a neveket, amelyek megfelelő üdvözlést kapnak. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * A megadott név felhasználásával üdvözlő karakterláncot épít. */ nyilvános funkció mondd Hello( userName:String = ""):String ( var greeting:String; if (felhasználónév == "") { greeting = "Üdvözöljük. Kérjük, írja be felhasználónevét, majd nyomja meg az Enter billentyűt."; } else if (validName(felhasználónév)) { greeting = "Üdvözöljük, " + felhasználónév + "."; } más { greeting = "Sajnos " + userName + ", Ön nem szerepel a listán."; } viszonzó üdvözlet; ) /** * Ellenőrzi, hogy egy név szerepel-e a validNames listában. */ publikus statikus függvény érvényesName(bemenetNév:String = ""): Logikai { if (validNames.indexOf(inputName) > -1) { return true; } más { return false; } } } }

A Greeter osztály új tulajdonságokkal rendelkezik:

A validNames tömb az engedélyezett felhasználónevek listáját tartalmazza. A Greeter osztály betöltésekor a tömb három névből álló listára kerül.

A sayHello() metódus felvesz egy felhasználónevet, és bizonyos feltételektől függően megváltoztatja az üdvözlést. Ha a userName felhasználónév üres karakterláncra van állítva (""), akkor az üdvözlő tulajdonság a felhasználónév megadását kéri. Ha a felhasználónév elfogadásra kerül, az üdvözlés így néz ki: "Hello! felhasználónév." És végül, ha az előző két feltétel nem teljesül, az üdvözlő változó a következőképpen lesz beállítva: "Sajnos felhasználónév, Ön nem szerepel a listán." ("Sajnos [felhasználónév], Ön nem szerepel a listán").

A validName() metódus true true értékkel tér vissza, ha a megadott bemeneti név megtalálható a validNames tömbben, és false false értéket ad vissza, ha a név nem található. A validNames.indexOf(inputName) utasítás a validNames tömb minden sorát ellenőrzi a bemenetNév inputName karakterláncával. Az Array.indexOf() metódus a tömb első objektumpéldányának mutatópozícióját adja vissza. -1-et ad vissza, ha az objektum nem található a tömbben.

Ezután módosítania kell az ActionScript-osztályra hivatkozó alkalmazásfájlt.

Egy alkalmazás Flash Professional eszközzel történő módosításához kövesse az alábbi lépéseket:

Nyissa meg a HelloWorl.fla fájlt.

Módosítsa a szkriptet az 1. keretben úgy, hogy az üres karakterlánc ("") a Greeter osztály sayHello() metódusához kerüljön:

Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("");

Válassza ki a Szöveg eszközt az eszközpalettáról. Hozzon létre két új szövegmezőt a munkaterületen. Helyezze őket egymás mellé a meglévő mainText szövegmező alá.

Az első új szövegmezőbe, amely a címke, írjon be szöveget Felhasználónév:.

Válasszon ki egy másik szövegmezőt, és állítsa be a típusát a Tulajdonságvizsgálóban Szövegbevitelre. Vonaltípusként válassza az Egysoros lehetőséget. Belép textIn mint a példány neve.

Kattintson az idővonal első képkockájára.

A Műveletek panelen adja hozzá a következő sorokat a meglévő szkript végéhez:

MainText.border = igaz; textIn.border = igaz; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); függvénybillentyűNyomott(esemény:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Az új kód a következő funkciókkal egészíti ki:

• Az első két sor egyszerűen beállítja a két szövegmező szegélyét.

  Egy beviteli szövegmező, például a textIn , olyan eseményeket tartalmaz, amelyeket elküldhet. Az addEventListener() metódus lehetővé teszi egy függvény megadását, amely akkor fut le, amikor egy bizonyos típusú esemény bekövetkezik. Ebben az esetben az esemény egy billentyűleütés lesz a billentyűzeten.

  Az egyéni keyPressed() függvény ellenőrzi, hogy az Enter billentyűt lenyomják-e. Ha a kívánt billentyűt lenyomjuk, a myGreeter objektum sayHello() metódusa paraméterként adja át a szöveget a textIn szövegmezőből. Ez a metódus egy üdvözlő karakterláncot ad vissza a neki átadott érték alapján. A visszaadott karakterlánc ezután hozzá van rendelve a mainText szövegmező szövegtulajdonságához.

A Frame 1 teljes szkriptje így néz ki:

Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello(""); mainText.border = igaz; textIn.border = igaz; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); függvénybillentyűNyomott(esemény:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Mentse el a fájlt.

Az alkalmazás elindításához válassza a Kezelés > Film tesztelése menüpontot.

Az alkalmazás futtatásakor a rendszer felkéri a felhasználónév megadására. Ha a program elfogadja a nevet, megjelenik egy "hello" megerősítő üzenet.

Egy alkalmazás Flash Builder eszközzel történő módosításához kövesse az alábbi lépéseket:

Nyissa meg a HelloWorld.mxml fájlt.

Ezután változtassa meg a címkét jelezni a felhasználónak, hogy a szöveg csak megjelenítési célokat szolgál. Módosítsa a háttérszínt világosszürkére, és állítsa a szerkeszthető attribútumot false értékre:

Most adja hozzá a következő sorokat közvetlenül a záró címke után . Ezek a sorok egy TextInput összetevőt hoznak létre, amely lehetővé teszi a felhasználó számára, hogy megadja a felhasználónév értékét:

Az enter attribútum határozza meg azokat a műveleteket, amelyek akkor hajthatók végre, amikor a felhasználó megnyomja az Enter billentyűt a userNameTxt mezőben. Ebben a példában a kód átadja a mezőbe beírt szöveget a Greeter.sayHello() metódusnak. A mainTxt mezőben lévő üdvözlet ennek megfelelően változik.

A HelloWorld.mxml fájl így néz ki:

Mentse el a szerkesztett HelloWorld.mxml fájlt. Az alkalmazás futtatásához válassza a Futtatás > HelloWorld futtatása lehetőséget.

Az alkalmazás futtatásakor a rendszer felkéri a felhasználónév megadására. Ha a nevet (Sammy, Frank vagy Dean) elfogadja a program, egy megerősítő üzenet: „Hello, felhasználónév».

03.12.2009

A cikk a Flash alkalmazások gyors fejlesztésével és az Adobe Flex Builder 3 csúcstermék használatával foglalkozik. Megjegyzendő, hogy a Flash hagyományos környezete az Adobe Flash, de elsősorban rajzolásra és animációk készítésére szolgál. A programozás sokkal egyszerűbb a Flex Builder segítségével.

Ez a cikk bemutatja, hogyan hozhat létre egy meglehetősen egyszerű és ugyanakkor tipikus alkalmazást - egy termékkatalógust, amely képes kiszámítani a megrendelés költségeit, és figyelembe veszi a további lehetőségeket. Egy ilyen programot éttermek számára terveztek: a felhasználó hozzáférhet a kategóriákra bontott ételek katalógusához, valamint a „szállítási” lehetőséghez és a megrendelt adagok számának jelzéséhez.

El kell ismerni, hogy egy egyszerű webáruház-támogatási rendszer telepítése is megoldaná ezt és más problémákat is (különösen a kosár létrehozása vagy e-mailben történő elküldése). Nem szabad azonban megfeledkeznünk arról, hogy ez csak a következő funkciók bemutatója lesz:

Költség újraszámítása menet közben, az oldal újratöltése nélkül. A HTML használatakor a JavaScript segítségét kell igénybe venni, ami nem mindig egyszerű. Ezenkívül szükséges lenne a felhasználó által kiválasztott opciók végleges mentése.

Animációs effektusok használata fényképek feltöltésekor.

A termékkatalógus megvalósítása 40 soros programkódon keresztül.

Természetesen az alkalmazással kapcsolatos további munkához fogalma kell legyen arról, hogy mi az XML (ez egy strukturális adatábrázolási nyelv, további információért lásd: http://ru.wikipedia.org/wiki/XML részletek), és legalább egy kis tapasztalattal kell rendelkeznie az asztali alkalmazások fejlesztésében (Delphiben vagy Visual Studioban).

Szóval, kezdjük. A munkához telepíteni kell az Adobe Flex Builder 3 programot.

Közvetlenül az indítás után megjelenik egy üdvözlő ablak, amelyben meg kell ismerkednie az alkalmazások létrehozásával kapcsolatos leckékre mutató hivatkozásokkal. Ezt később is meg lehet tenni – kezdőknek hasznos tanulni. Egy szoftverprojekt megvalósításának megkezdéséhez először a Fájl Új Flex Projekt menüparancsot kell meghívnia. A megjelenő új projekt létrehozására szolgáló ablakban adja meg a projekt nevét és helyét, ahol el fog helyezkedni. A további lehetőségek közül válassza a Webalkalmazás és az Alkalmazáskiszolgáló: Nincs lehetőséget (mert még nem tervezünk bonyolult interakciót a szerverrel), majd kattintson a Befejezés gombra.

A teljes Flex Builder munkaterület négy részre oszlik, amelyek a következőket tartalmazzák:

Projektnavigátor ablak (Flex Navigator), amely tükrözi a fájlok szerkezetét;

Vázlatos ablak, amely a program felépítését vagy az elérhető komponenseket mutatja (tervezési módba váltáskor);

A fő programablak két lappal - Forrás (kódszerkesztő) és Tervezés (vizuális tervezési mód);

A Problémák ablak, amely a fordítóüzeneteket, a hibakeresési információkat és egyéb szolgáltatási üzeneteket jeleníti meg.

Ha megváltoztatja az alkalmazás kialakítását, azt tapasztalja, hogy a kódja is megváltozott. Ez helyes, mert valójában MXML kóddal dolgozik. Az MXML nyelvet úgy tervezték, hogy XML formátumban írja le az alkalmazások felületét (több komponens, esetleg egymásba ágyazva). A Microsoft egy hasonló XAML technológiát használ Silverlight alkalmazások fejlesztésére.

Most egy kicsit a készülő alkalmazás sajátosságairól:

Az elkészített katalógusban szereplő ételek kategóriákra vannak osztva (előételek, főételek, desszertek, italok);

Minden ételhez fénykép, név, leírás és ár tartozik;

Több adag rendelése és kiszállítás is lehetséges.

Szükséged lesz képekre és információkra az ételekről strukturált módon.

A képekhez hozzon létre egy img almappát a projekt src mappájában (a fő mappájában), és adja hozzá a szükséges objektumokat. Minden edényhez tartozik egy azonosító (például 53), és egy nagy edényfotó a sablon szerint 53big.jpg, egy kicsi pedig 53mini.jpg.

Az adatokat a config.xml fájlba kell helyezni, és az src mappába kell helyezni. Egy ilyen fájl az 1. listában látható.

Az XML fájl meghatározza az ételek csoportjait (csoportjait). Mindegyik tartalmazhat több ételt (tételt), amelyekhez képazonosító (img), név (név), rubelben kifejezett ár (price) és többsoros leírás (desc) tartozik. A konfigurációs fájl végén külön elem a szállítási költség rubelben (dostavka).

Most lépjen közvetlenül az alkalmazás felületére, és először határozza meg az ablak méretét: 800 × 500 pixel. Lehetne olyan "nyújtós" alkalmazást készíteni, ami a teljes képernyőt kitölti, de egyelőre érdemesebb egy fix szélességű és magasságúra korlátozni magunkat.

Ezután helyezzen el két statikus szöveget a színpadra (Címke komponens), egy kategória legördülő listát (ComboBox komponens), egy ételválasztó galériát (HorizontalList komponens), három változó szövegelemet - név, ár és végső költség (a címke összetevők is), az adagok számának módosítására szolgáló komponens (NumericStepper), szállítási kiválasztás jelölőnégyzet (CheckBox). Ezenkívül minden összetevőnek adjon meg egy azonosítót (azonosítót az összetevő tulajdonságai paneljén).

És most elkezdődik a Flash alkalmazás viselkedésének programozása. Ehhez két fogalmat kell megértenie: az adatforrást (adatszolgáltató) és az adat-összerendelést (adat-összerendelés).

Adatforrások

Vegyünk például egy legördülő listát, ahol kiválaszthatja az étel típusát ("Snacks", "Drinks" stb.). Ennek adatforrása a legelején leírt XML fájl.

A Flex programozási környezet automatikus eszközöket biztosít az adat-összerendelési forrásokkal való munkavégzéshez. Először is, a listákkal, táblákkal, fákkal dolgozó összetevők többsége rendelkezik egy dataProvider tulajdonsággal, amely hivatkozhat a szükséges adatokra. Másodszor, vannak speciális konstrukciók, amelyek lehetővé teszik az XML dokumentumon belüli listákra való hivatkozást, például a dokumentumon belüli címkék által leírt élelmiszercsoportok listáját.

A koncepció megvalósításához tegye a következőket (lásd a 2. listát).

Állítsa be az adatforrást. Ebben az esetben töltse be az adatokat a config.xml fájlból, és adjon neki egy configXML azonosítót.

Adja meg a legördülő menü adatforrását - dataProvider=?© (configXML.group)?©.

Adja meg, hogy az XML-tulajdonságok közül melyiket kell használni a legördülő listán belüli szövegek beállításához. Tegyük fel, hogy szeretné (az Ön által létrehozott XML-fájl alapján), hogy a megfelelő csoportcímke névattribútumai (azaz nevek - "Snacks", "Desszertek" stb.) a lista elemeivé váljanak. Ehhez állítsa be a labelField=?©@name?© tulajdonságot (a @ szimbólum azt jelenti, hogy attribútummal van dolgunk, nem alcímkével), és ekkor a csoportjai a megfelelő lista elemeivé válnak.

Kötelező adatok

Tegyük fel, hogy megváltoztatta a kiválasztott ételek kategóriáját a legördülő listában. Nyilván akkor a készletüknek is változnia kell. Erre szolgál egy speciális direktíva, amelyet göndör kapcsos zárójelek (() jelölnek. Ez a következőket jelenti: "Ha az adatforrás megváltozott, akkor az aktuális komponensben lévő adatok megjelenítését is módosítani kell."

Hogyan kell átültetni a gyakorlatba? Van egy HorizontalList komponense, amely az aktuális kategóriába tartozó ételek fotóit jeleníti meg (snackek vagy italok), valamint egy ComboBox komponens, ahol XML adatok alapján választhat kategóriát. És ami nagyszerű, az az, hogy a ComboBox (valamint a Flex legtöbb lista típusú összetevője) rendelkezik egy selectItem tulajdonsággal. Értéke attól függően változik, hogy a listaelemek közül melyiket választotta ki a felhasználó, és tartalmazza-e az adatforrás megfelelő részét. A vizsgált esetben, amikor az adatforrás XML, ez a tulajdonság tartalmazza a kiválasztott tányércsoport XML részfáját.

Fontolja meg, hogyan valósul meg egy ilyen koncepció a gyakorlatban, és sorolja fel az alábbiakban, mit kell telepíteni ehhez:

Legördülő menü azonosítója: id=?©cmbGroup?©;

Az ételek listájának adatforrása: dataProvider=?©(cmbGroup.selectedItem.item)?©.

Mellesleg ezt a viselkedést az egyes ételek kiválasztásakor is alkalmazni kell - módosítsa annak képét, nevét, árát és leírását. Ehhez telepítse a következőket:

Ételek kiválasztási lista azonosítója: id=?©lstProduct?©;

A képek címének adatforrása: source=?©img/(lstProduct.selectedItem.img).big.jpg?© (A Flex az ilyen összetett struktúrákat is támogatja az adat-összerendeléshez); adatforrások minden szövegelemhez, például az árhoz (text=?©Price: (lstProduct.selectedItem.price) p.?©).

Ezen lépések elvégzése után egy teljesen működőképes termékkatalógust kap, amely megváltoztatja a termékek listáját egy másik kategória kiválasztásakor, a leírás pedig a termék megváltoztatásakor. Vegye figyelembe, hogy egyetlen kódsort sem írt! Már ez a tény is mutatja, hogy a Flex eszközök segítségével Flash-re programozás rendkívül izgalmas élmény.

Csak a programkódra van szüksége a rendelési összeg kiszámításához. A kód speciális címkékbe van írva (lásd a 2. listát). Meg kell határoznia egy onChange() eljárást, amely minden alkalommal meghívódik, amikor a felhasználó végrehajtja a három művelet egyikét:

Más terméket választ. Kivétel esetén minden egyes összetevőhöz egy esemény jön létre, amely programozottan kezelhető. Ebben az esetben be kell állítani a változási esemény kezelését (a kiválasztott étel megváltoztatása) az ételek listájához: change=?©onChange();?©

Módosítja a „Kézbesítés engedélyezése” jelölőnégyzet állapotát. Hasonló a change=?©onChange();?© a "Kézbesítés" jelölőnégyzethez. 3. Megváltoztatja a megrendelt adagok számát. Hasonlóképpen, change=?©onChange();?© az adagok számának beviteli mezőjéhez.

Ezzel befejeződik az alkalmazás fő része. És most valamit a megjelenése "polírozásának" lehetőségeiről:

Annak érdekében, hogy a főkép ne tűnjön magányosnak, érdemes egy szürke kiemelő effektust hozzáadni a filters=?©()?©; ezen kívül más grafikai effektusokat is alkalmazhat;

Hogy edényváltáskor ne változzon azonnal a kép, hanem szépen lebegjen, egy megjelenési effektus került hozzá: completeEffect=?©(Fade)?©. Egy kis plusz ráfordítással egyébként lehetne állítani az időtartamát, illetve megvalósítani a Flex-en belül támogatott zoom- és mozgáseffektusokat (Move). Itt van a legegyszerűbb lehetőség.

A cikk korlátozott terjedelme miatt egy fontos tulajdonságot kellett "elrejtenem" - az ételek képlistájának rendszerezését a HorizontalList komponensben. Ehhez létre kellene hoznunk egy kis kiegészítő ItemImg komponenst (még három sornyi kód, de egy ilyen folyamat leírása sok helyet foglalna) és be kell állítani az itemRenderer=?©ItemImg?© tulajdonságot.

Ezen kívül szándékosan mellőztem az XML konfigurációs fájl betöltését (az aktuális kóddal "bevarrják" a programba), a kiválasztott ételek elküldését és a kosár létrehozását, mivel mindez növelné az esedékes cikk mennyiségét. a nem túl érdekes technikai részletekre.

Ebben a cikkben egy példa segítségével próbáltam bemutatni a Flash (és a Flex) használatának hatékonyságát, általánosságban véve nem a termékkatalógus létrehozásának legegyszerűbb feladata. Az így létrejött megoldás (a felülettel együtt) 40 kódsorba illeszkedik, és közvetlenül a magazin oldalain publikálható. Véleményem szerint ez a legjobb bizonyítéka a Flash-alkalmazások létrehozásának hatékonyságának a HTML- és JavaScript-alkalmazásokhoz képest. Természetesen az itt levont következtetés nem mindig helyes. Remélem azonban elvezettelek benneteket arra a gondolatra, hogy bizonyos feladatok egyszerűen és szépen megoldhatók Flash segítségével.

Az itt példaként használt működő alkalmazás kisebb fejlesztésekkel látható a "PC lemez világában"

Amikor alkalmazást hoz létre a Flex Builderben, választhat a webalkalmazás és az asztali alkalmazás beállításai között. A második esetben a létrehozott alkalmazás az úgynevezett AIR (Adobe Integrated Runtime) virtuális gépen fog futni, aminek köszönhetően hozzáférhet a fájlokhoz, az automatikus futtatáshoz és a számítógép egyéb tulajdonságaihoz. Az AIR virtuális gép már elérhető Windows, Macintosh és néhány Linux rendszerre, lehetővé téve, hogy hatékonyan hozzon létre többplatformos asztali alkalmazásokat a szabványos Flash képességekkel. Én személy szerint régóta jobban szeretem ezt a funkciót a Delphi alkalmazásfejlesztéssel szemben.

Mivel a Flex neve megtévesztő volt egyes ügyfelek számára, a fejlesztők bejelentették, hogy a program következő verziója az Adobe Flash Builder 4 lesz. Jelenleg béta tesztelés alatt áll.

Az Adobe Flex Builder egyébként hivatalosan is ingyenesen elérhető minden korosztály számára, az egyetemistáktól a végzős hallgatókig. Ennek részletesebb megismeréséhez látogasson el a http://habrahabr.ru/blogs/flex/41597/ oldalra,

Elkezdeni

Flash-alkalmazás létrehozásához konkrét elképzeléssel kell rendelkeznie róla. Ez az, hogy legalább egy durva alkalmazási forgatókönyvet végig kell gondolnia. Ezt követően közvetlenül a flash szerkesztőben kezdheti el a munkát.

Először meg kell határoznia a jövőbeli alkalmazás méreteit. Például, ha ez egy szabványos szalaghirdetés, akkor a mérete 468 mm x 60 mm lesz. Adja meg ezeket a paramétereket a Film tulajdonságai szakaszban a Szélesség és a Magasság mezőben – ezek a szélességet és magasságot jelzik. Ezután válassza ki a flash alkalmazás fő hátterének színét. A beállítások befejezéséhez írja be a képkocka másodpercenkénti számát a Frame Rate mezőbe.

Egy speciális program segít a flash alkalmazás létrehozásában

Közvetlenül a beállítások elvégzése után kattintson a bal egérgombbal az OK gombra. Most maga a flash szerkesztő lép játékba, amely segít egy flash alkalmazás létrehozásában.

Elkezdünk létrehozni egy animált alkalmazást - például egy mozgó feliratot. Ehhez válassza a Szöveg eszközt, és nyissa meg a beállítások panelt - Ablakpanelek Karakterek. A megjelenő Font menüben kattintson a Karakterek panelre, és válasszon betűtípust, például Times New Roman. Állítsa be a színét és a kívánt méretet, például 26., írjon rá bármilyen vagy javaslatot. Elkészült a flash-alkalmazásod alapja!

Flash alkalmazást készíthet animált formában

Ezt követően megteheti és. Ehhez a leírtakat karakterré kell konvertálni. Ehhez használja az Insert Convert to Symbol parancsot. Adjon nevet is neki, hogy később a merevlemezére mentse.

Ezt követően válasszuk ki az Idővonalon a 20. számú keretet, és az Insert Keyframe paranccsal illesszük be a legelső, úgynevezett kulcskockát. Ugyanakkor az új keret bal oldalán egy szürke csík látható a kulcskeret irányába.

Most aktiválnia kell a flash alkalmazást. Ehhez térjen vissza ismét az első kerethez, és helyezze át a keretén kívülre készített feliratot a jobb szélen túli tetszőleges helyre. Ezután az első keret kijelölésének megszüntetése nélkül nyissa meg a Window Panels Frame panelt, és azonnal váltson át a Keret fülre.

Csak annyit kell tennie, hogy kiválasztja a kívánt animáció típusát a Tweening menüből. Közvetlenül ezután a kulcskockákat elválasztó szürke sáv kékre vált. Ez minden, egy egyszerű flash alkalmazás készen áll!

Mielőtt belekezdeném a bejegyzésbe, olvasok egy kis felelősséget kizáró nyilatkozatot:
Új alkalmazás létrehozása előtt át kell gondolnod, hogy neked mi való, másoknak mire, hasznos lesz másoknak, sőt jó pénzt is kereshetsz az alkalmazáson! További információ - pályázat elhelyezésének szabályai. Ha mindenről meggyőződött - kezdhetjük!

Bevezetés

• Nem először dolgozom rajta, így bátran állíthatom, könnyű alapozni
• Nem határoz meg küszöböt a funkcionalitás és a dizájn között
• Akár telefonokra is készíthet alkalmazásokat

Hol kezdjem? Összekötő keretek.

Az "Idővonal" ablakban hozzon létre "rétegeket", mentse el a nevüket és sorrendjét:


5 képkockánként megnyomjuk az "F6" gombot, az "F5" végén. Olyannak kell lennie, mint a képernyőn.

Szerintem itt nincs mit magyarázni:
"ActionScript" réteg - benne lesz a kód.
Layer "Marks" - annak érdekében, hogy ne veszítsék szem elől a kereteket, számozásra kerülnek, de szinte extra rétegként.
"Gombok" réteg - olyan gombokat tartalmaz, amelyek a projekt során ugyanabban a helyzetben lesznek, valamint a "Háttér" és az "Anyagok" rétegeket. Most sorszámozzuk a képkockákat, nem hiába készült el a „Marks” réteg. Kattintson a "Címkék" rétegen létrehozott keretekre, nézze meg a "Keret" típust, adjon nevet a keretnek.


A "Marks" rétegnek nincs speciális célja, csak segítségként jön létre. Tehát megtanultuk, hogyan kell kereteket készíteni!

Szimbólumok és források

Oldal aktiválása

Import flash.events.MouseEvent;
állj meg();
btn1.addEventListener(MouseEvent.CLICK,OnClickTwo);

Funkció OnClickTwo(e:MouseEvent):void
{
gotoAndStop("Két");
}

Szerintem meg fogod érteni, hogy mi az! Megjegyzés: az alkalmazás indításakor először az "Adyn" keret indul el

A pályázat kitöltése anyagokkal

Megkapjuk a végső fájlt, és betöltjük a VKontakte-t