Shrink your SVG Button Code (BlackBerry Themes Builder & Composer)

ORIGINAL BY Jizzomaru 
Hai.. BZT dondoters and BZoners,
Kali ini kami dari BZThemers ingin berbagi tips cara menshrink koding SVG yang notabene hasil export dari composer amat sangat banyak baris yang tidak perlu dan bisa di buang, dengan menshrink kode dalam SVG selain meminimalisasi size dari SVG tersebut, dapat memudahkan kita untuk memanage setiap baris kode pada SVG kita.

Banyak sekali developer themes yang membuat/mencoding SVG nya secara manual dari nol, tanpa menggunakan bantuan dari Composer, hal ini tentu sangat memberikan keuntungan tersediri bagi developer themes tersebut, okey tanpa banyak bicara mari kita mulai proses shrinking SVG.

Perhatikan baris kode dari SVG yang saya buat dari hasil export BlackBerry Composer, yang isinya hanya satu tombol….

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->
<g id="tabImage">
<image id="img_1_1_11" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png"/>
<image id="img_11_1_12" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_13" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_14"  x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="tabFocusImage">
<image id="img_1_1_15" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_16" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_17" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_18" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_11" id="_anim_3" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_11" id="_anim_4" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_11" id="_anim_5" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_6" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_7" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_8" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_9" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_10" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_11" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_12" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_13" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_14" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_15" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_16" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_17" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_18" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_19" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_20" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_21" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_22" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_23" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_24" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_25" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_26" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wkwkw.. sesu anu banget kan,,, satu tombol bisa menghasil kan baris kode sebanyak itu, bayangkan apabila kita membuat 6 atau 12 tombol pada composer…(dalam pikiran kalian pasti bilang WOOGH!!) 

Okay selanjutnya, tetap tegakkan kepala kalian…hehe (boleh siapin panadol) :

Code:

<g id="tabImage">
* kode awal tab image ketika normal state (biasanya full transparent)

Code:

<g id="tabFocusImage">
* kode awal tab image ketika focus state (background biru)

Code:

<g id="normalImage">
* kode awal icon image ketika normal state

Code:

<g id="focusImage">
* kode awal image ketika focus state

Pada tutorial ini saya hanya ingin menampilkan tombol icon saja, dan tidak membutuhkan tab image, jadi saya akan meghilangkan, memangkas, memotong, menghapus, mendelete dan men men lainnya….so perhatikan perubahan kode dibawah ini

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->


<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wkwk… lumenyan kan sekarang agag lebih ramping kodenya…. Sekarang mari kita shrink lagi kodenya karena masih ada beberapa baris yang menurut saya tidak perlu dan mubazir….sekali lagi perhatikan perubahan kode dibawah ini..lihat baris yang di cetak tebal…

Quote:<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version: 6.0.0.21 - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlnsz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g id="Layer_1">
<!-- pz:tag type="layer" -->
<g id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->


<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages" begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate” values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate” values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
</svg> 

Mari kita delete yang dicetak tebal tersebut….

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->
<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wow….wow….wow…. amazing…..sekarang kode nya mulai terlihat sangat sexy…. (tidak buncit lagi )…..tapi tunggu dulu jangan girang dulu, belum selesai masih ada lagi, kode diatas belum selesai, kenapa…???? Karena jika kalian import SVG nya pada TB (Themes Builder) saya jamin tombolnya tidak sido muncul…., kok bisa sih..??? hehe… karena jika kalian perhatikan pada baris animate nilai valuesnya masih hidden;hidden, nah kita harus perbaiki baris tersebut….so mari nengok ke bawah lagi yuk..

Code:

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />

Img_1_1_19 adalah id referensi untuk normal button state icon dan Img_1_1_19 untuk focus button state icon, dari kode di atas nilai values nya masih hidden, oleh karena itu kita harus menyesuaikan nilai valuesnya supaya sesuai sebagaimana mestinya… lets cekidot perubahannya…

Code:

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values=" visible;visible "
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values=" visible;visible "  keyTimes="0;1"  dur="0.45s" fill="freeze" />

Nah wis rampung sekarang , untuk kode keseluruhannya lihat baris berikut.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents" id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
  <g  id="Theme_Button_1" transform="translate(-204 23)">
  <!-- pz:tag type="button" -->
     <g  id="Theme_Button_1-Contents">
     <!-- pz:tag type="layer" -->
     <g id="normalImage">
           <image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
     </g>
     <g id="focusImage">
           <image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
     </g>
    </g>
  </g>
</g>

<!-- pz:tag output="anim" -->
<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden” keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values=" visible;visible " keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values=" visible;visible "  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Eeeng iiiiing eeeeng….. sekian sodara sodara BZoners dan BZT dondoters kode nya sudah ramping sexy dan siap diproduksi…#eh dimasupin ke TB…haha sekian dulu Tips dan Tricks or Tutorial gendeng dari kami….


Mmwuach….