Adobe Edge: HTML5 Canvas alapú multimédiafejlesztő-alkalmazás

Az Adobe ma jelentette be az Edge nevű termékét, mellyel Canvas alapon lehet rajzolni, animálni. Letöltöttem az előzetes verziót és kipróbáltam.

Az Edge kezelőfelülete mindenki számára ismerős lesz aki használt már Flash szerkesztőt, ugyanaz a felület, csak egyelőre még egyszerűbb, mivel még nem zsúfoltak bele annyi funkciót mint a Flash-be. A szoftver nekem kicsit lassúnak tűnt, pedig 4 Gb memória van a laptopomban – oké, tudom ez ma már nem egy nagy durranás, de akkoris… 🙂 Az Edge ezen verziója csak 2 féle alakzatot tud rajzolni (négyzetet és lekerekített sarkú négyzetet) és lehet vele szövegeket elhelyezni a vásznunkon.

Az animálás és a rajzolás már most eléggé bő eszköztárral rendelkezik, tudunk forgatni, átlátszóságot állítani, színezni és animálni, erről többet nem is írnék, szerintem ezt mindenki ki tudja próbálni, aki már használt ilyen eszközt.

Ami engem leginkább érdekelt az az, hogy milyen kimenetet készít az Edge. A generált kód az Adobe saját Edge JavaScript motorját használja, ezen kívül pedig a JQuery 1.4.2-őt és a JQuery Easing 1.3-at, tehát valódi Canvas-t használ és nem trükközik. A Canvas tartalmát szépen felépíti:

    dom: [  
{
id:'Text1',
type:'text',
rect:[150,98,0,0],
text:"TEST",
font:["Arial Black, Gadget, sans-serif",[24,""],"rgba(0,0,0,1)","normal","none",""],
},
{
id:'Rectangle1',
type:'rect',
rect:[154,165,216,184],
fill:['rgba(192,192,192,1)'],
stroke:[0,"rgba(0,0,0,1)","none"],
},
{
id:'RoundRect1',
type:'rect',
rect:[284,71,96,93],
borderRadius:[10,10,10,10],
fill:['rgba(192,192,192,1)'],
stroke:[0,"rgb(0, 0, 0)","none"],
},
],

Majd a saját könyvtárát és a JQuery-t használva szépen elvégzi a művleteket, érdekes ahogyan például a Timeline-t tárolja:

   timelines: {  
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 750,
timeline: [
{ id: "eid3", tween: [ "transform", "#RoundRect1", "translateX", '-231px', { valueTemplate: undefined, fromValue: '-22px'}], position: 140, duration: 610, easing: "easeInCubic" },
{ id: "eid4", tween: [ "transform", "#RoundRect1", "translateY", '64px', { valueTemplate: undefined, fromValue: '-11px'}], position: 140, duration: 610, easing: "easeInCubic" }]
}

“Igazi” véleményem 🙂 nem alakult ki az Adobe Edge-ről, viszont úgy érzem, hogy ez az első komolyan vehető HTML5-re készült multimédia fejlesztő eszköz, most nem számítom ide a kismillió JavaScript animációs, 2D-s, 3Ds könyvtárakat, mert azokkal kódolni kell és közel sem olyan hatékonyak mint egy ilyen szerkesztő – kivéve persze azoknak akik szeretnek szenvedni 🙂

Mindenkinek ajánlom kipróbálásra, tényleg érdekes lesz ha az Edge-t az Adobe komolyan fogja venni és gőzerővel továbbfejleszti. Ami nagyon nagy durranás lenne az a beviteli mezők megjelenése lenne…

A próba verzió innen tölthető le: http://labs.adobe.com/technologies/edge/

This entry was posted in Adobe Edge, Canvas, HTML5. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s