Shulou(Shulou.com)06/01 Report--

This article is about how to easily make flash browsers with cool skin. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

On the evening of April 14, Flash browser 0.9 was released, which not only optimizes the opening speed, but also adds personalized skin switching support this time.

First, the skin structure of flash browser

The skin of the flash browser is a zip document with a .sks extension, which can be opened directly with software such as WinRar, Winzip or 7-Zip, or you can directly change the extension to .zip and double-click to open it. The zip package with a .ks extension consists of many images and a descriptive text file. Flash browser recommends the use of .PNG image format to support the transparency of interface elements, text files that define skins must use the .ini extension, and files with the file name "SaaYaa_skin.ini" will be used as the default style definition files for the skin.

Second, the skin installation and use of flash browser

1. Download the official sample skin and double-click to install:

You can download a sample skin from the official skin page (official sample skin download: http://www.saayaa.com/skin/download.aspx?skinid=1), download the skin file named Metal.sks, double-click the skin file Metal.sks, it will automatically open the flash browser and apply the skin, if your flash browser is running, it will also be immediately replaced and refreshed to the skin you specify.

There will be many kinds of skins that can be downloaded officially by Flash browser. We will add them from time to time. Please feel free to follow http://www.saayaa.com/skin or the official skin forum: http://bbs.ruanmei.com/forum-54-1.html.

Note: if double-clicking the downloaded skin file brings up a dialog box indicating that the skin file is not correctly associated, run the latest version of the Flash browser, or specify to open it with the Flash browser in that pop-up dialog box. Or, you can drag the skin file directly to the flash browser.

The skin will be installed in a folder called skin under the installation directory where the flash browser is located. For example, the skin above, Metal.sks, will be under skin\ Metal. You can take a look under this folder, which contains the text settings file defined by SaaYaa_skin.ini, and also generates two folders, metal/control and metal/toolbar, which are all image resource files used by the new skin.

2. Switch skin

Click the personality setting button in the upper right corner of the flash browser to easily switch the skin (the default skin also supports skin color changes), or you can click to enter the official skin download page.

Third, the skin production of flash browser:

If you want to modify the installed skin, then directly modify the settings of the ini file and replace the images under the control and toolbar folders. If you want to create a new one, first create a new folder in the skin folder under the flash installation folder and name it with the English name and pinyin of the skin (if you like to use Chinese).

Then copy the SaaYaa_skin.ini inside the official sample skin (if it is read-only, right-click the property to remove its read-only properties), facilitate us to modify it later, and create a new control and toolbar folder to store our skin images, the names of these two folders can be modified in the ini file.

Of course, our advice is that instead of creating a new folder, you'd better copy the official sample skin folder and rename it. For example, you can copy the metal folder and rename it to your own. Then modify the settings file and replace the picture. In this way, you can see the preview effect more intuitively at any time.

1. Make the background for the toolbar of the skin

The background image of the toolbar at the top of the flash browser is divided into three parts: left, middle and right. On the left and right, we can put a fixed iconic picture of the skin, a picture of cats, dogs, flowers and plants, or a picture of ourselves. The middle part is used for tiling when the browser changes size. In the example, there is only the middle picture, whose name is defined in ini.

; toolbar background

Background_Image=control\ title_bg.png can also add the left and right pictures below if necessary

The background on the left side of the toolbar

Background_Image_Left = control\ back_left.png

; the background on the right side of the toolbar

Background_Image_Right = control\ back_right.png

2. Add toolbar buttons

Each button on the flash skin has three states, usually the default state, the disabled state (disable) and the mouse move-up (hover).

We can define the name and size of the picture.

From left to right is

; New button because the new button has the drop-down button in the drop-down box, so its width = 30 + 14

NewBtn_Size = 445.32

NewBtn_Normal = toolbar\ new.png

NewBtn_Hover = toolbar\ new_hover.png

; back button

BackBtn_Size = 30,032

BackBtn_Normal = toolbar\ back.png

BackBtn_Hover = toolbar\ back_hover.png

BackBtn_Disable= toolbar\ back.disable.png

; forward button

NextBtn_Size = 30,032

NextBtn_Normal = toolbar\ forward.png

NextBtn_Hover = toolbar\ forward_hover.png

NextBtn_Disable= toolbar\ forward.disable.png

; more (More) button

MoreBtn_Size = 16 and 18

MoreBtn_Normal = toolbar\ split.png

MoreBtn_Hover = toolbar\ split.png

MoreBtn_Disable= toolbar\ split.disable.png

; refresh button

; Space_Width is used to specify that the interval width between this button and the previous button is 0 by default, that is, there is no interval.

RefreshBtn_Size = 30,032

RefreshBtn_Normal = toolbar\ refresh.png

RefreshBtn_Hover = toolbar\ refresh_hover.png

RefreshBtn_Space_Width = 9

; stop button

StopBtn_Size = 30,032

StopBtn_Normal = toolbar\ stop.png

StopBtn_Hover = toolbar\ stop_hover.png

; home button

HomeBtn_Size = 30,032

HomeBtn_Normal = toolbar\ home.png

HomeBtn_Hover = toolbar\ home_hover.png

; undo button

RestoreBtn_Size = 455.32

RestoreBtn_Normal = toolbar\ undo.png

RestoreBtn_Hover = toolbar\ undo_hover.png

RestoreBtn_Disable = toolbar\ undo.disable.png

; Go button

GoBtn_Size = 455.32

GoBtn_Normal = toolbar\ go.png

GoBtn_Hover = toolbar\ go_hover.png

GoBtn_Space_Width = 5

; find button

SearchBtn_Size = 30,032

SearchBtn_Normal = toolbar\ 24_search.png

SearchBtn_Hover = toolbar\ 24_search_hover.png

SearchBtn_Space_Width = 5

; highlight button

HighLightBtn_Size = 30,032

HighLightBtn_Normal = toolbar\ highlight.png

HighLightBtn_Hover = toolbar\ highlight_hover.png

The default size of the following Btn: 16x16, and the picture in Hover status does not need to be specified.

Add favorites button on the favorites bar

FavBtn_Normal = toolbar\ 16_favorites.png

; sidebar on the Tab bar, add, full screen button

Tab_Slider_Normal = control\ tab_sidebar.png

Tab_Slider_Favorite = toolbar\ 16_favorites.png

Tab_Slider_History = toolbar\ 16_history.png

Tab_Slider_Active = control\ sidebar_tab_active.png

Tab_Slider_BK_Left = control\ panetab_bg.png

Tab_Slider_BK_Right = control\ panetab_right.png

Tab_Slider_BK_Top = control\ panetab_top.png

Tab_New_Normal = control\ tab_new.png

Tab_FullScreen_Normal = control\ TabBar_FullScreen.png

Tab_Close_Normal = control\ tab_close.png

Tab_Close_Hover = control\ tab_close_hover.png

The four buttons on the title bar change the skin, minimize, maximize, and close

[Buttons]

Windows system button size is equal to picture size

Windows system button picture, normal state and highlighted state

Win_System_Btn = control\ skin_selector.png

Win_System_Btn_Hover = control\ skin_selector_hover.png

Win_Min_Btn = control\ win_minimize.png

Win_Min_Btn_Hover = control\ win_minimize_hover.png

Win_Max_Btn = control\ win_maximum.png

Win_Max_Btn_Hover = control\ win_maximum_hover.png

Win_Close_Btn = control\ win_close.png

Win_Close_Btn_Hover = control\ win_close_hover.png

Win_Restore_Btn = control\ win_restore.png

Win_Restore_Btn_Hover = control\ win_restore_hover.png

3. Address bar and search bar input box

The two input boxes (the term textbox) use the same picture, which is also divided into left, middle and right, and each picture has two states, the default state and the state displayed after hover.

Edit_Height=23

Edit_Left = control\ combo_left.png

Edit_Left_Hover = control\ combo_left_hover.png

Edit_Center = control\ combo.png

Edit_Center_hover = control\ combo_hover.png

Edit_Thumb_Width = 16

Edit_Thumb_Normal = control\ combo_dropdown.png

Edit_Thumb_Hover = control\ combo_dropdown_hover.png

4. Label bar

Define the current label

Tab_Active_Left = control\ tab_active_left.png

Tab_Active_Center = control\ tab_active_center.png

Tab_Active_Right = control\ tab_active_right.png

Inactive label

Tab_InActive_Left = control\ tab_inactive_left.png

Tab_InActive_Center = control\ tab_inactive_center.png

Tab_InActive_Right = control\ tab_inactive_right.png

Label bar background

Tab_BK = control\ tab_bg.png

5. Menu font, color, border

; Windows outer border color

Frame_Border_Color1 = # DADADA

; Windows inner border color

Frame_Border_Color2 = # DADADA

; toolbar font color

ToolBar_Text_Color = # 335f91

; Menu background color

Menu_BK_Color = # EFEFEF

; Menu border color

Menu_Border_Color=#666666

; Menu separator color

Menu_Separator_Color=#BDBDBD

; Menu font color

Menu_Text_Color = # 333333

Highlight font color

HighLight_Text_Color = # 333333

; disable font color

Disable_Text_Color = # BDBDBD

; edit box (Edit) color

Edit_Text_Color = # 333333

IV. Release of skin

Wow, finally made their own "copyright" skin, come to http://bbs.ruanmei.com/forum-54-1.html to share it! What do you need to do before sharing? Yeah, pack up.

Using your usual compression software, compress the folder you just made into a .Zip format (don't compress it into other formats such as rar or 7z), and then rename the file to a file ending with .sks. All right, upload it to the forum and share it with you. Soft media will hold competitions and prize competitions from time to time to see whose skin is cooler and more popular!

5. Supplementary explanation

It's not that hard to make your own personalized skin, is it? If you want to see the effect while making it, it will involve refreshing. In version 0.9 of Flash browser, to see the effect you have made, you need to click the drop-down arrow in the upper right corner (personality setting button). Then switch to other skin and switch back. This may be inconvenient, we will release a 0.91 version before April 17, you can directly click on the name of your skin for instant refresh, so while making, while refreshing, will be more convenient!

The above is how to easily make flash browser personality cool skin, the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.