--- title: Flash / HTML megjelenítési különbségek #redirect: /lcms/flash_es_a_html5_megjelenitesi_kulonbsegek/az_alapmezo_es_a_tanuloi_felulet_kapcsolata taxonomy: documentType: [docs] label: [flash és a html5 megjelenítési különbségek, az alapmező és a tanulói felület kapcsolata, több videó egy szakaszon, vonalak megjelenítése, a vonalak végeinek megjelenítése, vektoros kép elrendezése, vektoros kép tükrözése, mező láthatóságának kezelése relatív mezőben, egy mező drag’n’dropolása egy külső mezővel, egy mező dragndropolása egy külső mezővel, szöveg megjelenítése, fade out effekt, mély mezőstruktúrák, árnyék megjelenítése, keret és mező méretének hatása relatív mezőkre, navigáció esemény blokk azonosítóval, a középre igazított relatív mezők gyermekeinek elhelyezése] project: [LCMS] role: [editor] --- Kinek szól ez a rész? Annak… - aki nem első tananyagát készíti, - aki tisztában van a Nexius LCMS-ben történő szerkesztéssel, - aki többféle különböző platformon szeretné megjeleníteni tananyagát, - aki a jövőre gondolva szeretné még több környezettel kompatibilisebbé tenni tananyagát. A modul elolvasása után tudni fogod: - milyen különbségek vannak a két megjelenítő (renderelő) motor között, - milyen áthidaló megoldásokat javaslunk a felmerülő problémák kikerülésére, Kb. 1 órára van szükséged az elvégzéséhez. [TOC] ## Az alapmező és a tanulói felület kapcsolata ![](file265.png?lightbox&classes=inline) **HTML5:** Az alapmező 0;0 koordinátáját a tanulói felület bal felső sarkához igazítja. **FLASH:** Az alapmezőt a tanulói felület felső széléhez, közepre igazítja. **Szerkesztési javaslat:** Ha az alapmezőnk méretét ugyanakkorára vesszük fel, mint a felhasználói felület méretét, akkor nincs különbség. ## Több videó egy szakaszon **HTML5**: Ebben a lejátszóban egyszerre csak egy videót tudunk lejátszani. **FLASH:** Ebben képesek vagyunk irányítani egyszerre több videó lejátszását is. **Szerkesztési javaslat:** Egyelőre kerüljük több videó egyidejű lejátszását. ## Vonalak megjelenítése ![](file266.png?lightbox&classes=inline) **HTML5**: Ez a lejátszó a vonalakat megbízhatóan maszkolja. **FLASH:** Ezen megjelenítési mód, nem jól kezeli a vonalak maszkolását. **Szerkesztési javaslat:** Kerüljük a vonalak maszkolását. Mindig nézzünk oldalainkra HTML előnézeben. ## A vonalak végeinek megjelenítése ![](file267.png?lightbox&classes=inline) ## Vektoros kép elrendezése ![](file268.png?lightbox&classes=inline) **HTML5**: Amennyiben egy vektoros objektum egy mezőn belül relatívan van elrendezve a HTML5 lejátszó helyesen jeleníti meg, relatívan elrendezve. **FLASH:** Míg a flashes lejátszó a vektoros objektumot a 0;0 ponttól kezdi el kirajzolni. **Szerkesztési javaslat:** Abszolút pozicionás javasolt. ## Vektoros kép tükrözése ![](file269.png?lightbox&classes=inline) **HTML5**: Ebben a lejátszóban a vektorgrafikus objektumokat nem tudjuk vertikálisan sem és horizontálisan sem tükrözni. **FLASH:** A Flashes lejátszóban ez a művelet sikeresen végrehajtódik. **Szerkesztési javaslat:** Ne tükrözzük a vektorgrafikus objektumokat. ## Mező láthatóságának kezelése relatív mezőben A mező tulajdonságok: visible és in\_layout kombinációi közül a (visible:true; `+` in layout:false) elkerülése. ![](file270.png?lightbox&classes=inline) **HTML5**: Kiemeli a mezőt a környezetéből, de az átfedések (overflow) érvényben maradnak. **FLASH:** Részben emeli ki a mezőt a környezetéből. A szerkesztett mező a rendezés és az átfedés (overlflow) szempontjából is meg különböztetett. **Szerkesztési javaslat:** Kerüljük el ezt a kombinációt. (A szerkesztői felületen ezt nem lehet már megvalósítani.) ## Egy mező drag’n’dropolása egy külső mezővel ![](file273.png?lightbox&classes=inline) **HTML5**: Külső mező draggelése esetén ez a lejátszó, nem működik, helyette magát a mezőt lehet vonszolni. **FLASH:** Ebben a lejátszóban jól működik a külső mező draggelése. **Szerkesztési javaslat:** Külső mezővel ne vonszoljunk egy másik mezőt. ## Szöveg megjelenítése A szöveg áttördelődik, megváltozhat a sorok száma, a különböző megjelenítők betűtípus kerning beállításai miatt. ![](file274.png?lightbox&classes=inline) **Szerkesztési javaslat:** Használjunk a szövegdoboznál extra területet (Legalább +30% extra magasság, mint amennyit a szöveg Flash szerkesztőben mutat.). Amikor szöveget írunk ki az oldalra, tudnunk kell, hogy HTML nézetben a különbözik a szöveg renderelése. - az abszolút, fix méretű mezők mérete megnövekszik - szövegvesztés történhet, mert nem látszik a szöveg túllógó vége. - módosulhat az oldal elrendezése, mert eltolhat más mezőket, így az auto méretezett mezők mérete is módosulhat. - az auto-height-os szövegmezők mérete (magassága) nagyobb lehet - szövegvesztés történhet, mert a szülőmező beállított mérete maszkolhatja a szöveget. - Több szöveg (több sor) is megjelenhet, ha a szövegmezőben több a szöveg, és mások a beállított szövegstílusok - lásd.: \[Nexius.ScormEditor.TestCases/Objects/Text/Text styles\] ## Fade out effekt **HTML5**: Működik. **FLASH:** Nem működik. **Szerkesztési javaslat:** Egyelőre kerüljük a használatát. ## Mély mezőstruktúrák **HTML5**: Könnyedén megbírkózik vele. **FLASH:** A megjelenítő sokszor megfagyasztja a böngészőablakot. **Szerkesztési javaslat:** Kerüljük a sok mező egymásba ágyazását. Lekerekített mezők színnel kitöltve ![](file275.png?lightbox&classes=inline) **HTML5**: Ez a megjelenítő jól kezeli. **FLASH:** A lekerekítést figyelmen kívül hagyja. **Szerkesztési javaslat:** Körültekintően használjuk. ## Árnyék megjelenítése ![](file276.png?lightbox&classes=inline) ## Keret és mező méretének hatása relatív mezőkre ![](file281.png?lightbox&classes=inline) **HTML5**: A keret méretét nem veszi figyelembe relatívan megadott mező méreteknél. **FLASH:** A keret méretét figyelembe veszi a megjelenítő. ## Navigáció esemény blokk azonosíóvonalak **HTML5**: Navigációs eseménynek paraméterként, ha megadunk egy inner deep link block\_id-t, akkor a blokk első oldalára navigál. **FLASH:** Ez ebben a lejátszóban még nem működik. **Szerkesztési javaslat:** Használjuk az oldal azonosítóját. ## A középre igazított relatív mezők gyermekeinek elhelyezése ![](file282.png?lightbox&classes=inline) **FLASH**: Egy relatívan pozicionált mező (vert. / hor.) gyermekei, ha nagyobbak, mint a szülőjük, akkor a felső, vagy baloldalhoz ragadnak. **HTML5:** Nem ragad egyik oldalhoz sem, marad középre rendezve minden.