Welkom gast! Aanmelden Registreren


Waardering:
  • 6 stemmen - gemiddelde waardering is 3.67
  • 1
  • 2
  • 3
  • 4
  • 5
[SWF]Styling[SWF]
#1

Beste RetroNetters,

Basic SWF styling

Inleiding:

Ik heb besloten om wat beginnende SWF stylers te helpen. Ik zal een paar tutorials plaatsen met de basis dingen.

Wat heb je nodig?


HabboUI Editor
Je habbo.swf

Laten we beginnen!

Goed idee!
Download HabboUI Editor onder het kopje Wat heb je nodig?.
Zet alles in dezelfde map en klik dubbel op "HabboUI Editor".
Deze vraagt je nu iets. Klik op "Ok". Blader daarna na je habbo.swf en klik op "Openen".
Je krijgt nu een scherm te zien met Links een lijst en rechts een code.
Links is de lijst met files die in je habbo.swf zitten. Alle schermen, en teksten kunnen hier veranderd worden.
Klik op een van de files om de code te zien.
Veel van de files heb je op dit moment niet nodig, behalve als je beter wordt in SWF styling.

Klik nu linksboven op de zoekbalk en zoek op Navigator.title. 5 Files kom je te zien. In deze 5 files komt "Navigator.title" voor.
Wij hebben alleen habbo-53 nodig. Klik er dus op.
Je krijgt nu bovenaan dit te zien:

PHP-code:
<frame x="0" y="0" width="325" height="474" params="98305" style="0" name="grs_main_window" caption="%24%7Bnavigator.title%7D" color="0xff418db0" height_min="215"

Zoals je kan zien is er een "Style" bij. Deze moet je dan ook gebruiken om de stijl aan te passen.

Welke stijlen heb je?

Stijl "0" is de blauwe, met van die puntjes. Eigenlijk de beetje standaard stijl.
Stijl "1" is een grijze stijl. Eigenlijk de blauwe, maar dan in het grijs.
Stijl "2" is een gouden stijl. Je kan deze bewonderen bij je vriendenlijst en je chat.
Stijl "3" is de stijl die we gaan gebruiken. Deze, wel te verstaan:

[Afbeelding: 33aylx5.png]

Je veranderd dit:
PHP-code:
<frame x="0" y="0" width="325" height="474" params="98305" style="0" name="grs_main_window" caption="%24%7Bnavigator.title%7D" color="0xff418db0" height_min="215"
Naar dit:
PHP-code:
<frame x="0" y="0" width="325" height="474" params="98305" style="3" name="grs_main_window" caption="%24%7Bnavigator.title%7D" color="0xff418db0" height_min="215"

De kleur kan je veranderen door
Code:
0xff418db0
te veranderen naar je eigen kleur. Dit kan je makkelijk doen door aan de bovenkant van de HabboUI Editor op "Color" te klikken. Een kleurpalet komt nu. Mix je eigen kleur en klik op "Ok". Er komt nu een kleurcode te staan naast de knop "Color".
Dit is de code voor de kleur die jij hebt gemaakt. Verander
PHP-code:
ff418db0 
naar bijvoorbeeld: Oranje (EA4D00)

Gefeliciteerd. je hebt nu de header gestyled. Klik op de groene knop "Save". (Niet vergeten!)

N.B.: In de XML van je habbo.swf moeten HEX-kleurcodes ALTIJD beginnen met 0x of 0xff. Dus Oranje (EA4D00) word dan 0xEA4D00 of 0xffEA4D00! Dank je wel voor het melden, !


Je kan nu een beetje gaan expirimenteren met alle schermen. Probeer dingen linksbovenin te zoeken, zoals inventory, of catalog (Alles in het engels.)

Icons/plaatjes toevoegen aan je habbo.swf

Een tijdje geleden vond ik een manier om images aan de habbo.swf toe te voegen. Eerst wilde ik dit als een geheim houden, maar ik heb toch besloten dit met jullie te delen. Dit is een soort van SWF stylen. Als je hier net mee begint, ga deze tutorial dan niet volgen, maar lees eerst de bovenstaande.

Oke, laten we beginnen:

Wat je nodig hebt:

Een habbo.swf
Leensters o zo handige habboUI Editor
Een SWF decompiler. (Ik vind sothink het beste/handigste)

Deel 1:

Open je habbo.swf met de SWF decompiler en exporteer dit plaatje:
[Afbeelding: 9rtwjk.png]
Ik noem dit plaatje even PlaatjeX aangezien we het vaker nodig gaan hebben.

Open het met paint.net of photoshop. Het maakt eigenlijk niet heel veel uit welk programma je gebruikt, zolang je het plaatje maar transparant kan maken.
Zet er een plaatje in. Zorg dat deze niet andere plaatjes overlapt. Ik denk dat dit logisch is, anders moeten jullie het zeggen.

Onthoudt de hoogte en de breedte van het plaatje dat je erin gezet hebt.
Onthoudt ook dit:

De ruimte tussen de linkerzijkant van je plaatje en PlaatjeX, zo dus:
[Afbeelding: 34eydr8.png]
(Bij mij is het 57 pixels.)

Onthoudt ook de ruimte tussen de bovenkant van je plaatje en PlaatjeX zo dus:
[Afbeelding: 246vr4z.png]
Bij mij is het 17 pixels.)

Sla PlaatjeX op en zet hem in de SWF decompiler terug.

Deel 2:

Open HabboUI Editor en zoek linksboven naar:
PHP-code:
icon_19 

Je krijgt 3 files te zien, en wel deze:
PHP-code:
habbo-198
habbo
-312
habbo
-809 

Open eerst habbo-312.

Zoek in deze file naar icon_19. Je vindt deze code:
PHP-code:
<!-- Pixel icon -->
        <template name="icon_19" asset="$asset">
            <entities>
                <entity name="icon" type="bitmap"><region><Rectangle x="34" y="16"  width="23" height="26" /></region></entity>
            </entities>
        </template

Zet hieronder het volgende neer:
PHP-code:
<!-- IMAGE NAME (YOU CAN CHOOSE ONE) -->
        <template name="icon_{A}" asset="$asset">
            <entities>
                <entity name="icon" type="bitmap"><region><Rectangle x="{B}" y="{C}"  width="{D}" height="{E}" /></region></entity>
            </entities>
        </template>  

{A} = Een willekeurig nummer. Zorg er wel voor dat hij nog niet voorkomt.
{B} = De ruimte tussen de linkerzijkant van je plaatje en PlaatjeX.
{C} = De ruimte tussen de bovekant van je plaatje en PlaatjeX.
{D} = De breedte van je plaatje
{E} = De hoogte van je plaatje.

Klik op de groene "Save" knop, dan is dit deel klaar.

Open nu habbo-198.

Zoek in deze file weer naar icon_19. Je krijgt deze code:
PHP-code:
<asset mimeType="image/png" name="fx_icon_19_png" /> 

Zet eronder:

PHP-code:
<asset mimeType="image/png" name="fx_icon_{A}_png" /> 
 

Klik op de groene "Save" knop, dan is dit deel klaar.

Open nu habbo-809.

En opnieuw, zoek in deze file naar icon_19. Je vindt deze code:
PHP-code:
<component type="icon" style="19" renderer="skin" asset="habbo_skin_icon_set_xml" layout="icon16">
        <states><state name="default" layout="icon16" template="icon_19" /></states>
    </component

Zet eronder, voor /skin:
PHP-code:
<component type="icon" style="{A}" renderer="skin" asset="habbo_skin_icon_set_xml" layout="icon16">
        <states><state name="default" layout="icon16" template="icon_{A}" /></states>
    </component

Klik op de groene "Save" knop en eigenlijk ben je dan klaar. Je hebt een image in de habbo.SWF gezet. je wilt hem natuurlijk wel ergens laten zien. Gebruik daarvoor deze code:
PHP-code:
<icon x="0" y="0" width="{D}" height="{E}" params="16" style="{A}" name="THE NAME YOU GAVE THE IMAGE"/>  

Nu kan je het plaatje zien. Je kan zoveel plaatje toevoegen als je wilt.

Met vriendelijke groet,

Galago aka Eran
[Afbeelding: flvm2t.png]

 
Reageer
#2
Mooie tutorial.
Een like is het wel waard ;D
[Afbeelding: Z4IU4vD.png]
 
Reageer
#3

Zeer goede tut! Ik wil meer zienBig Grin

 
Reageer
#4
(03-11-2012, 19:14)Warner. schreef: Zeer goede tut! Ik wil meer zienBig Grin
On his way, boss.
 
Reageer
#5
Ik ga er ook wel aan mee doen.
[Afbeelding: Z4IU4vD.png]
 
Reageer
#6

Zeer netjes, ga zo door Big Grin.

 
Reageer
#7
Heel mooi gemaakt!
Respect.
kippetje
 
Reageer
#8
Mooie TuT.
Ga zo door.
EDM producer, PS3, ICT'er en RetroNetter.
 
Reageer
#9
Mooi gekopieerd van rp
 
Reageer
#10
Mooi maar zet de credits er even bij. Bedankt.
 
Reageer
  




Leden die dit momenteel bekijken: 1 gast(en)