God praxis – riktlinjer för utveckling av SWF-program

  1. Användarhandbok för Adobe Animate
  2. Introduktion till Animate
    1. Nyheter i Animate
    2. Visuell ordlista
    3. Systemkrav för Animate
    4. Tangentbordsgenvägar för Animate
    5. Arbeta med flera filtyper i Animate
  3. Animering
    1. Grunderna vid animering i Animate
    2. Så här använder du bildrutor och nyckelbildrutor i Animate
    3. Animering bildruta för bildruta i Animate
    4. Arbeta med klassiska interpolerade animeringar i Animate
    5. Pensel
    6. Rörelseguide
    7. Rörelseinterpoleringar och ActionScript 3.0
    8. Om animeringar med rörelseinterpolering
    9. Animeringar med rörelseinterpolering
    10. Skapa en animering med rörelseinterpolering
    11. Använda nyckelbildrutor för egenskaper
    12. Animera placering med en interpolering
    13. Så här redigerar du rörelseinterpoleringar med rörelseredigeraren
    14. Redigera rörelsebanan för en interpolerad animering
    15. Ändra rörelseinterpoleringar
    16. Lägga till anpassade övergångar
    17. Skapa och använda förinställda rörelser
    18. Konfigurera interpoleringsintervall för animeringar
    19. Arbeta med rörelseinterpoleringar sparade som XML-filer
    20. Rörelseinterpoleringar jämfört med klassiska interpoleringar
    21. Forminterpolering
    22. Använda animeringar med benverktyget i Animate
    23. Arbeta med figurriggning i Animate
    24. Så här använder du maskeringslager i Adobe Animate
    25. Så här arbetar du med scener i Animate
  4. Interaktivitet
    1. Så här skapar du knappar med Animate
    2. Konvertera Animate-projekt till andra dokumenttypsformat
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Lägga till interaktivitet med kodfragment i Animate
    5. Skapa anpassade HTML5-komponenter
    6. Använda komponenter i HTML5 Canvas
    7. Skapa anpassade komponenter: Exempel
    8. Kodfragment för anpassade komponenter
    9. God praxis - annonsera med Animate
    10. Redigera och publicera VR
  5. Arbetsyta och arbetsflöde
    1. Skapa och hantera målarpenslar
    2. Använda Google Fonts i HTML5 Canvas-dokument
    3. Använda Creative Cloud Libraries och Adobe Animate
    4. Använda scen- och verktygspanelerna i Animate
    5. Arbetsflöde och arbetsyta i Animate
    6. Använda webbteckensnitt i HTML5 Canvas-dokument
    7. Tidslinjer och ActionScript
    8. Arbeta med flera tidslinjer
    9. Ange inställningar
    10. Använda redigeringspanelerna i Animate
    11. Skapa tidslinjelager med Animate
    12. Exportera animeringar för mobilprogram och spelplattformar
    13. Flytta och kopiera objekt
    14. Mallar
    15. Söka och ersätta i Animate
    16. Ångra, gör om och panelen Historik
    17. Kortkommandon
    18. Så här använder du tidslinjen i Animate
    19. Skapa HTML-tillägg
    20. Optimeringsalternativ för bilder och animerade GIF-filer
    21. Exportinställningar för bilder och GIF-filer
    22. Panelen Resurser i Animate
  6. Multimedia och video
    1. Omforma och kombinera grafikobjekt i Animate
    2. Skapa och arbeta med symbolinstanser i Animate
    3. Bildkalkering
    4. Så här använder du ljud i Adobe Animate
    5. Exportera SVG-filer
    6. Skapa videofiler för användning i Animate
    7. Så här lägger du till en video i Animate
    8. Arbeta med videoreferenspunkter
    9. Rita och skapa objekt med Animate
    10. Omforma linjer och former
    11. Linjer, fyllningar och övertoningar med Animate CC
    12. Arbeta med Adobe Premiere Pro och After Effects
    13. Färgpaneler i Animate CC
    14. Öppna Flash CS6-filer i Animate
    15. Arbeta med klassisk text i Animate
    16. Placera grafik i Animate
    17. Importerade bitmappar i Animate
    18. 3D-grafik
    19. Arbeta med symboler i Animate
    20. Rita linjer och former med Adobe Animate
    21. Arbeta med bibliotek i Animate
    22. Exportera ljud
    23. Markera objekt i Animate CC
    24. Arbeta med Illustrator AI-filer i Animate
    25. Tillämpa mönster med sprejpenseln
    26. Använda blandningslägen
    27. Ordna objekt
    28. Automatisera uppgifter med kommandomenyn
    29. Flerspråkig text
    30. Använda kameran i Animate
    31. Använda Animate med Adobe Scout
    32. Arbeta med Fireworks-filer
    33. Grafikfilter
    34. Ljud och ActionScript
    35. Ritinställningar
    36. Rita med ritstift
  7. Plattformar
    1. Konvertera Animate-projekt till andra dokumenttypsformat
    2. Stöd för anpassade plattformar
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Skapa och publicera ett WebGL-dokument
    5. Så här paketerar du AIR för iOS-program
    6. Publicera AIR for Android-program
    7. Publicera för Adobe AIR för datorprogram
    8. Inställningar för ActionScript-publicering
    9. God praxis – organisera ActionScript i ett program
    10. Så här använder du ActionScript med Animate
    11. God praxis – riktlinjer för hjälpmedel
    12. Hjälpmedel på arbetsytan i Animate
    13. Skriva och hantera skript
    14. Aktivera stöd för anpassade plattformar
    15. Översikt över stöd för anpassade plattformar
    16. Skapa hjälpmedelsanpassat innehåll
    17. Arbeta med plugin-program för anpassade plattformar
    18. Felsöka ActionScript 3.0
    19. Aktivera stöd för anpassade plattformar
  8. Exportera och publicera
    1. Så här exporterar du filer från Animate CC
    2. OAM-publicering
    3. Exportera SVG-filer
    4. Exportera bilder och video med Animate
    5. Publicera AS3-dokument
    6. Exportera animeringar för mobilprogram och spelplattformar
    7. Exportera ljud
    8. Exportera QuickTime-videofiler
    9. Styra extern videouppspelning med ActionScript
    10. God praxis – tips för att skapa innehåll på mobila enheter
    11. God praxis – videokonventioner
    12. God praxis – riktlinjer för utveckling av SWF-program
    13. God praxis – strukturera FLA-filer
    14. De bästa sätten att optimera FLA-filer för Animate
    15. Inställningar för ActionScript-publicering
    16. Ange publiceringsinställningar för Animate
    17. Exportera projektorfiler
    18. Exportera bilder och animerade GIF-filer
    19. Publiceringsmallar för HTML
    20. Arbeta med Adobe Premiere Pro och After Effects
    21. Dela och publicera animeringar snabbt

Om riktlinjer för SWF-program

Vilket som är det bästa sättet att skapa Animate-program beror på programmet du skapar och vilken teknik du använder för att konstruera programmet.

I ett onlineprogram kan en användare påverka en webbplats genom att interagera med den. Programmet kanske samlar in information från användaren (till exempel ett användarnamn och ett lösenord för registrering), information kan läggas till på webbplatsen (som på ett forum) eller så kan användaren interagera med andra webbplatsbesökare i realtid (som i ett chattrum eller på en interaktiv anslagstavla). Resultat från servern visas ofta i SWF-filen, beroende på interaktionen. Följande exempel är program som involverar användaren och olika typer av serverinteraktion. En webbplats som inte använder besökarinformation eller besökardata är inte ett program (till exempel en webbplats med en portfolio, en tecknad animering eller statisk information). Animate-program innehåller en interaktiv process mellan användaren, ett webbprogram och en server. Grundprocessen är följande:

  1. En användare matar in information i en SWF-fil.

  2. Informationen konverteras till data.

  3. Data formateras och skickas till en webbserver.

  4. Data samlas in av webbservern och skickas till en programserver (till exempel ColdFusion, PHP eller ASP).

  5. Data behandlas och skickas tillbaka till webbservern.

  6. Webbservern skickar resultatet till SWF-filen.

  7. SWF-filen tar emot formaterade data.

  8. Din ActionScript-kod behandlar data så att programmet kan använda dem.

När du skapar ett program måste du välja ett protokoll som ska användas för att överföra data. Protokollet meddelar programmet när data skickas och tas emot, i vilket format data överförs och hur serverns svar ska hanteras. När data har tagits emot i SWF-filen måste de ändras och formateras. Om du använder ett protokoll behöver du inte oroa dig för att data kan vara i ett oväntat format. När du överför data med namnvärdespar kan du kontrollera hur data är formaterade. Kontrollera att dina data har rätt format så att du inte får XML-formaterade data och så att SWF-filen vet vilket dataformat den ska arbeta med.

Samla in och formatera data

Program kräver att användaren interagerar med en SWF-fil. Detta sker ofta genom att användaren skriver in data i formulär. Det finns många sätt att ange och formatera data i Animate-program. Denna flexibilitet beror på möjligheten till animeringar, kreativ kontroll över gränssnittet och felsökning och validering med ActionScript.

Fördelarna med att skapa formulär för datainsamling med Animate är bland annat:

  • ökad designkontroll

  • minskat eller inget behov av att uppdatera sidan

  • återanvändning av vanliga resurser.

    Tips! Spara information från användaren i ett delat objekt på användarens dator. Delade objekt gör att du kan spara data på användarens dator på ungefär samma sätt som med en cookie. Mer information om delade objekt finns under klassen SharedObject i Språkreferens för ActionScript 2.0 eller Referenshandbok för ActionScript 3.0.

Skicka och behandla data

Oftast måste du behandla informationen innan den skickas till servern så att den har ett format som servern förstår. När servern tar emot dina data kan de manipuleras på ett antal sätt och skickas tillbaka till SWF-filen i ett format den kan ta emot, vilket kan vara allt från namnvärdespar till komplexa objekt.

Obs!

Din programserver måste ha MIME-typen för utdata inställd på application/x-www-urlform-encoded. Om MIME-typen saknas kommer resultatet oftast att vara oanvändbart när det kommer fram till Animate.

I följande tabell visas flera alternativ för att skicka data till en server och ta emot data med Animate:

Sänd data

Beskrivning

LoadVars.send och LoadVars.sendAndLoad

Skickar namnvärdespar till ett skript på servern för behandling. LoadVars.send skickar variabler till ett skript på en fjärrplats och ignorerar eventuella svar. LoadVar.sendAndLoad skickar namnvärdespar till en server och läser in eller tolkar svaret till ett LoadVars-målobjekt.

XML.send och XML.sendAndLoad

Liknar LoadVars, men XML.send och XML.sendAndLoad skickar XML-paket i stället för namnvärdespar.

getUrl

Med funktionen getURL() eller metoden MovieClip.getURL kan du skicka variabler från Animate till en bildruta eller ett popup-fönster.

Fjärrstyrning

Gör att du enkelt kan utväxla komplicerad information mellan Animate och ColdFusion, ASP.NET, Java med mera. Du kan även använda Animate Remoting för att använda webbtjänster.

Webbtjänster

Adobe Animate har en WebServiceConnector-komponent som du kan använda för att ansluta till fjärrwebbtjänster, skicka och ta emot data och binda resultat till komponenter. Det gör att Animate-utvecklare snabbt kan skapa Rich Internet Applications (RIA) utan att behöva skriva en enda rad ActionScript.

Du kan använda fjärrwebbtjänster med WebServiceClasses, vilket kan kräva att du skriver komplicerad ActionScript.

Lägga till datainläsning och validering

Validera all information du hämtar innan du skickar några data till en server. Det minskar belastningen på fjärrservern eftersom den inte behöver hantera lika många svar om användaren inte fyller i obligatoriska fält. Förlita dig aldrig på enbart validering på klienten i något program. Validering måste även göras på servern.

Även om du skapar ett enkelt formulär för registrering eller inloggning måste du kontrollera att användaren har angett namn och lösenord. Gör valideringen innan du skickar begäran till skriptet på fjärrservern och vänta på resultatet. Förlita dig inte enbart på validering på servern. Om användaren bara anger användarnamn måste skriptet på servern ta emot begäran, validera skickade data och returnera ett felmeddelande till Animate-programmet som säger att både användarnamn och lösenord krävs. Liknande problem uppstår om valideringen bara görs på klientsidan (i SWF-filen). Användaren kan hacka SWF-filen, förbigå valideringen och försöka skicka felaktiga data till servern.

Validering på klientsidan kan vara något så enkelt som att se till att ett formulärfält är minst ett tecken långt eller att användaren anger ett numeriskt värde och inte en sträng. Du kan till exempel validera en e-postadress genom att kontrollera att textfältet i Animate inte är tomt och innehåller ett snabel-a (@) och en punkt (.). För validering på serversidan lägger du till mer komplicerad validering och kontrollerar att e-postadressen tillhör en giltig domän.

Du måste skriva ActionScript-kod som hanterar de data som läses in i SWF-filen från servern. När alla data lästs in i en SWF-fil kan de användas från den platsen. Kontrollera om alla data har lästs in med ActionScript. Du kan använda återkopplingsfunktioner eller avlyssnare för att skicka en signal om att data har lästs in i dokumentet.

När du läser in data kan de formateras på flera sätt:

  • Om du läser in XML använder du metoderna och egenskaperna i klassen XML för att tolka och använda data. Om du använder namnvärdespar blir paren variabler och du kan manipulera dem som variabler.

  • Du kan hämta data från en webbtjänst eller från Animate Remoting.

I båda dessa fall kan du hämta komplicerade datastrukturer, till exempel arrayer, objekt eller registeruppsättningar, som du måste tolka och binda på lämpligt sätt.

Använda felhantering och felsökning

Programmet måste vara stabilt nog för att kunna förutse vissa fel och hantera dem på lämpligt sätt.

Ett av de bästa sätten att hantera fel i ActionScript 2.0 är att använda try-catch-finally-blocken som du kan använda för att skapa och hantera anpassade fel. Om du skapar anpassade felklasser kan du återanvända kod i hela programmet utan att behöva skriva om felhanteringskoden. Mer information om hur du skapar anpassade fel finns i Error-klassen i Språkreferens för ActionScript 2.0. Mer information om try-catch-finally-blocken finns i try..catch..finally i Språkreferens för ActionScript 2.0.

Använd flash.errors-klassen för att fånga upp fel i ActionScript 3.0.

Mer information finns under "Hantera synkrona fel i ett program" i Programmering med ActionScript 3.0.

Organisera filer och spara kod

Tänk på följande innan du börjar organisera filer och spara kod:

  • Ska du dela upp SWF-filen i flera SWF-filer och hur ska de i så fall interagera?

  • Vilka resurser kan delas av SWF-filer?

  • Vilka filer ska du läsa in dynamiskt?

  • Hur och var ska du spara ActionScript?

    När du utvecklar ett program sparar du kod och filer på servern i en logisk katalogstruktur som liknar den i ett ActionScript-paket. Om du ordnar koden på det här sättet kan du hålla den välorganiserad och minska risken för att koden skrivs över.

    För större program kapslar du in kommunikation och tjänster mellan klient och server i klasser. Att använda klasser har följande fördelar:

  • Du kan återanvända koden i mer än en SWF-fil.

  • Du kan redigera koden på en central plats och uppdatera alla SWF-filer genom att publicera om dem.

  • Du kan skapa ett enda API som kan manipulera olika gränssnittselement och andra resurser som har liknande funktion.

Använda designmönstret MVC

Designmönstret MVC används för att separera information, utdata och databehandling i programmet. Programmet är uppdelat i tre delar: modell, vy och kontrollenhet. Varje element hanterar en separat del av processen.

Modellen

Modellen innehåller programmets data och regler. En stor del av programmets behandling sker i den här delen av designmönstret. Modellen innehåller också eventuella komponenter (CFC:er, EJB:er och webbtjänster) och databasen. Data som returneras är inte formaterade för programmets gränssnitt (den synliga delen) i den här delen av processen. Returnerade data kan användas i olika gränssnitt (eller vyer).

Vyn

I vyn hanteras den synliga delen av programmet (gränssnittet som användaren interagerar med) och modellens innehåll visas. Gränssnittet specificerar hur modellens data presenteras och visar vyn för användaren så att användaren kan använda och ändra programmets data. Om modellen ändras uppdateras vyn så att ändringarna reflekteras genom att data antingen skickas eller begärs. Om du skapar ett hybridwebbprogram (till exempel ett där Animate interagerar med andra program på sidan) utgör de olika gränssnitten en del av vyn i designmönstret. Designmönstret MVC stöder hantering av ett antal vyer.

Kontrollenheten

Kontrollenheten hanterar modellens och vyns krav på behandling och visning av data. Den innehåller oftast mycket kod. Den anropar någon del av modellen, beroende på vad användaren gör i gränssnittet (eller vyn) och innehåller kod som är specifik för programmet. Eftersom koden är programspecifik går den oftast inte att återanvända. Designmönstrets andra delar kan däremot återanvändas. Kontrollenheten behandlar inga data och ger inga utdata, men den tar emot användarens begäran och avgör vilken del av modellen eller vyn som ska anropas, var data ska skickas och vilken formatering som ska utföras på de data som returneras. Kontrollenheten ser till att vyer kan komma åt de delar av modellens data som ska visas. Kontrollenheten överför och svarar vanligen på ändringar som har att göra med modellen och vyn.

Varje del av modellen är skapad som en fristående komponent i den övergripande processen. Om du ändrar en del av modellen (du kanske till exempel omarbetar gränssnittet) behöver processens andra delar oftast inte ändras, vilket minskar eventuella problem. Om designmönstret är skapat på rätt sätt kan du ändra vyn utan att omarbeta modellen eller kontrollenheten. Om designmönstret MVC inte används i programmet kan ändringar var som helst få spridda effekter överallt i koden så att du måste göra mycket fler ändringar än om du hade använt ett specifikt designmönster.

En viktig anledning att använda mönstret MVC är att separera data och logik från användargränssnittet. Genom att separera dessa delar kan du ha flera olika grafiska gränssnitt som använder samma modell och oformaterade data. Det innebär att du kan använda programmet med olika Animate-gränssnitt, till exempel ett gränssnitt för Internet, ett för Pocket PC, ett för mobiltelefoner och kanske en HTML-version där Animate inte används alls. Att separera data från resten av programmet kan avsevärt minska tiden det tar att utveckla, testa och till och med uppdatera mer än ett klientgränssnitt. På samma sätt blir det lättare att lägga till nya synliga komponenter för samma program om det finns en befintlig modell att använda.

Använd bara MVC om du bygger ett stort och komplicerat program, till exempel en e-handelswebbplats eller ett e-utbildningsprogram. Arkitekturen kräver planering och förståelse för hur Animate och designmönstret fungerar. Tänk noga igenom hur de olika delarna interagerar med varandra. Detta inbegriper vanligtvis testning och felsökning. När du använder MVC är testning och felsökning svårare än med vanliga Animate-program. Om du skriver ett program där du behöver den extra komplexiteten kan det vara bra att organisera arbetet med MVC.

Skapa säkra program

Oärliga användare kan försöka hacka programmet, oavsett om du bygger en liten portalwebbplats där användare kan logga in och läsa artiklar eller en stor webbutik. Därför bör du göra följande för att programmet ska bli säkert:

  • Använd HTTPS för data som behöver vara säkra. Kryptera värdena i Animate innan du skickar dem till en fjärrserver för behandling.

    Obs!Spara aldrig information eller kod i en SWF-fil som du inte vill att användarna ska se. Det är lätt att demontera SWF-filer och visa deras innehåll med program från andra tillverkare.

  • Lägg till en korsdomänsprincip som förhindrar att obehöriga domäner får åtkomst till dina resurser.

 

Adobes logotyp

Logga in på ditt konto