ملیساا 5,015 اشتراک گذاری ارسال شده در 30 شهریور، ۱۳۸۹ ترفندهای UI در InstallShield: قبل از شروع به کار موارد مورد نیاز این پروژه را ذکر میکنم: 1. تصویر پس زمینه در هر اندازه ای با پسوند BMP 2. موزیک یا ویدیو با پسوندهای Wav و AVI 3. تصاویر Billboard با فرمت اسمی BbrdN.Bmp كه N شماره تصوير هست. برای ساخت یک برنامه نصب مشتری پسند همواره باید به UI آن توجه بسزایی داشت. در این مقاله کوچک سعی شده است تا نکات مهمی که در زیبایی برنامه نصب مؤثرند، آموزش داده شود. برای شروع، شما باید با مبانی اولیه برنامه نویسی و نرم افزار InstallShield آشنا باشید. مواردی که در بخش UI یک برنامه نصب کاربرد دارند به شرح زیر میباشند: 1. تصویری که قبل از شروع برنامه نصب به مدت چندثانیه نمایش داده میشود (Splash Screen) 2. پس زمینه ای FullScreen که باعث جلب توجه کاربر به برنامه نصب میشود (Background) 3. تصویر ثابتی که به عنوان پس زمینه قرار میگیرد (Bitmap) 4. عنوان برنامه نصب که به صورت بزرگ در قسمت بالایی صفحه مانیتور قرار میگیرد (Title) 5. تصاویر پس زمینه ای که مرتباً در هنگام پیشرفت نصب، تغییر میکنند (Billboards) 6. صدای موزیکی که در هنگام نصب به گوش میرسد (MEDIA_WAVE) 7. کلیپ تصویری که در پس زمینه جریان دارد (MEDIA_AVI) 8. پوسته دلخواه برای دیالوگ ها (Skin Customization Kit) شروع به کار: نوع پروژه ای که در این مقاله در نظر گرفته شده است InstallScript Project می باشد. پس از ایجاد پروژه و تنظیمات لازم آن، در سربرگ Installation Designer گزینه Support Files/Billboard را از منوی درختی سمت چپ انتخاب کنید تا منوی درختی دیگری در مقابل آن ظاهر شود. در این قسمت، گزینه Language Independent را از زیر مجموعه Support Files انتخاب کنید تا قسمت سفید سمت راست ظاهر شود. در این محوطه راست کلیک کرده و گزینه Insert Files را بزنید و تصاویر پس زمینه و کلیپ های صوتی و تصویری خود را وارد کنید. در قسمت BillBoard تصاویری که میخواهید در هنگام پیشرفت (Progress) به صورت اسلاید نمایش داده شوند وارد کنید. دقت کنید که تصاویر باید به فرمت اسمی BbrdN.bmp باشند که در آن به جای N شماره ای دلخواه (شماره تصاویر) قرار میگیرد. در قسمت Splash Screen تصویری که میخواهید در هنگام شروع برنامه نصب، به مدت چند ثانیه نمایش داده شود وارد کنید. دقت كنيد كه در مورد Billboards و Splash Screen نيازي به كد نويسي نداريد و هر دو به صورت خودكار در مكان خود اجرا ميشوند. فقط كافيست دو مورد بالا صحيح انجام گيرد. پس از وارد نمودن تمامی تصاویر و کلیپ های مورد نیاز، به قسمت InstallScript بروید تا محیط کدنویسی ظاهر شود. در اینجا توابع و کدهایی شبیه به زبان C خواهید دید که با کمی تغییرات به عنوان زبان اسکریپتی نرم افزار IS استفاده میشود. در تابع OnFirstUIBefore() عملیاتهای بخش ابتدایی برنامه نصب انجام میگیرد. (از شروع برنامه با Double Click تا شروع نمایش پنجره Progress مشمول این قسمت میشود) برای انجام علمیاتهای مدنظر خود باید بعد از begin توابع و عبارتهای مورد نیاز را وارد کنید. برای پدیدار شدن پس زمینه رنگی، کد زیر را وارد کنید:کد: Enable( BACKGROUND ); تابع Enable همانطور که از نامش پیداست برای فعال سازی عناصر ایجاد شده است. دقت کنید که این زبان Case Sensitive هست. پس حتماً کلماتی که با حروف بزرگ نوشته شده اند را را بزرگ بنویسید. برای تغییر رنگ پس زمینه نیز میتوانید از کد زیر پیروی کنید:کد: SetColor( Object, Color );:SetColor( BACKGROUND, BLACK ); در اینجا لیستی از رنگهایی که در این تابع پشتیبانی میشوند آورده شده است. همچنین از طریق RGB (گزینه آخر) میتونید رنگ دلخواه خود را وارد کنید. برای نمایش یک عنوان یا Title از این کد استفاده کنید:کد: SetTitle( “Your Text”, FontSize, FontColor );:SetTitle( “Sample”, 26, WHITE ); برای نمایش MessageBox نیز میتوانید به روش زیر عمل کنید:کد: MessageBox( “Text To Show”, Type );:MessageBox( “This is sample”, INFORMATION ); برای پخش موزیک یا کلیپ تصویری به این صورت عمل کنید:کد: PlayMMedia( FileType, FileName, PlayMode, 0);Music:PlayMMedia( MMedia_WAVE, SUPPORTDIR ^ “Music.wav”, MMEDIA_PLAYCONTINUOUS, 0);:VideoPlayMMedia( MMedia_AVI, SUPPORTDIR ^ “Video.avi”, MMEDIA_PLAYCONTINUOUS, 0); دقت داشته باشيد كه SUPPORTDIR در واقع آدرس فايل در بخش Support Files مي باشد. برای قراردادن تصویر ثابت در پس زمینه نیز از کد زیر استفاده کنید:کد: PlaceBitmap( FileName, BitmapID, Dx, Dy, DrawOp );:PlaceBitmap( SUPPORTDIR ^ “Wallpaper.bmp”, 1, CENTERED, CENTERED, TILED ); در این تابع BitmapID شماره منحصر به فرد یک تصویر هست زمانی که میخواهید از طریق یک فایل DLL تصویری را وارد کنید. Dx, Dy فاصله های عرضی و طولی تصویر از کناره های مانیتور می باشد که اگه CENTERED انتخاب شود، تصویر در وسط قرار میگیرد. DrawOp هم نوع نمایش تصویر هست که پارامترهای زیر را میپذیرد: اگر هم میخواهید هنگام نمایش عکس از افکتهای خاصی استفاده شود میتوانید از کد زیر بهره بگیرید:کد: SetDisplayEffect( Effect );:SetDisplayEffect( EFF_HORZSTIPE ); در این قسمت لیستی از پارامترهای ورودی این تابع را مشاهده میکنید: • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • سورس به همراه يك نمونه طراحي شده: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام طريقه به دست آوردن موسيقي و تصوير پس زمينه به كار برده شده در اين نمونه: ابتدا برنامه نصب را اجرا كرده و در همين حين مسير زير را پيگيري كرده و در يكي از پوشه هايي كه نام آن به صورت GUID هست فايلها را جستجو كنيد: WinXP کد: \Documents and Settings\\Local Settings\Temp Win Vista and 7 کد: \Users\\App Data\Local\Temp 1 نقل قول لینک به دیدگاه
ملیساا 5,015 مالک اشتراک گذاری ارسال شده در 30 شهریور، ۱۳۸۹ Skin Customization Kit Skin Customization Kit به شما این امکان را میدهد که ظاهر Dialog Box های برنامه نصب خود به دلخواه تغییر دهید. با این برنامه به تمامی عناصر یک Dialog Box دسترسی دارید و میتوانید برای هر عنصر، مشخصات دلخواه خود رو تنظیم کنید. این برنامه مخصوص Windows-Based Projects هست و از طریق Command Prompt اجرا میشود. برای ساخت یک اسکین باید مراحل زیر را طی کنید: 1. ابتدا تمامی عکسهایی که میخواهید به عنوان پس زمینه، دکمه و ... استفاده کنید، با پسوند BMP یا GIF در جایی ذخیره کنید. 2. یک فایل متنی با نام "Skin.ini" برای ثبت تنظیمات ایجاد کنید. 3. تمامی عکسها را به همراه فایل Skin.ini درون یک پوشه به نام دلخواه (Input Folder Name) وارد کنید. 4. از طریق Command Prompt فایل CreateSkinFile.exe را برای ساخت فایل ISN همراه با پارامترهای زیر اجرا کنید. کد: CreateSkinFile.exe (Input Folder Name) (Output File Name.isn):CreateSkinFile.exe C:\MySetupFiles C:\Setup.isn 5. حال فایل ایجاد شده (Setup.isn) را با فایل (Setup.isn) پروژه نصب ساخته شده جایگزین کنید و نتیجه را ببینید. (دقت کنید که فایلهای ISN برای نسخه های InstallShield 11 به بالا هستند و ورژن های پایین تر پسوند SKIN را پشتیبانی میکنند.) نکات: 1. تصاویر Bitmap فقط 24b یا کمتر پشتیبانی میشود. 2. تصاویر شفاف Gif پشتیبانی میشود. (Transparent) 3. Dialog Box ها اندازه ثابتی دارند و مقدار آن 690*497 پیکسل میباشد. 4. شما همچنین قادرید متحویات فایلهای ISN را به صورت زیر اسخراج کنید. (Command Prompt) کد: CreateSkinFile.exe –extract (Input ISN File.isn) (Output Folder Name):CreateSkinFile.exe –extract C:\Setup.isn C:\MySetupFiles نحوه ساختن یک Skin قبل از اینکه وارد موضوع بشید چند مورد از عملیات مخلتف هنگام ساخت Skin رو خوب به خاطر بسپارید: 1. اضافه کردن عکس به یک مکان مشخص 2. مشخص کردن شفاف بودن عکس (زمانی که از یک عکس شفاف استفاده میکنید.) 3. مشخص کردن تغییرات اندازه عکس، زمانی که DialogBox تغییر اندازه دهد. 4. اضافه کردن مستطیلهایی با رنگ مشخص در مکان مشخص 5. اضافه کردن عکس به دکمه ها 6. تعیین رنگ متن دکمه 7. تعیین رنگ متن دکمه های غیرفعال 8. مشخص کردن موقعیت مکانی دکمه SKIN.ini این فایل تمامی پارامترهایی که برای ساخت یک Skin به آنها نیاز می باشد را شامل میشود. فرمت این فایل نیز همانند زیر می باشند. دقت کنید که وجود موارد پررنگ در فایل Skin.ini الزامی میباشد. متون داخل پرانتز هم صرفاً یک توضیح هست. [sKINS] VERSION=1 [ALL] (Entries made here will be applied to all dialog boxes unless specified below) TEXTCOLOR=R value, G value, B value (text color for most controls on dialog box) RECTS=n (number of colored rectangular areas) RECT1=R value, G value, B value (rectangle fill color) RECT1POS=left position,top position (in dialog units) RECT1AREA=right position, bottom position (in dialog units) . . . RECTn=… RECTnPOS=… RECTnAREA=… IMAGES=n (number of images) IMAGE1=file name of image IMAGE1POS=x offset,y offset (in dialog units) IMAGE1OPT=TRANSPARENT, SCALE, VCENTER, HCENTER, UPPER_LEFT, UPPER_RIGHT, LOWER_LEFT, LOWER_RIGHT (pick any) . . . IMAGEn=… IMAGEnPOS=… IMAGEnOPT=… BUTTONSUP=file name of image for the up state of all push-buttons BUTTONSDOWN=file name of image for the down state of all push-buttons BUTTONSOPT=TRANSPARENT, SCALE (pick any) BUTTONSTRNSPRNTCLR=R value, G value, B value (transparent color for bitmap images; TRANSPARENT option has to be specified in BUTTONSOPT) BUTTONSTXTCLR=R value, G value, B value (text color for all push-buttons) BUTTONSDISTXTCLR=R value, G value, B value (text color for disabled push-buttons) BUTTONS=n (number of buttons you want to skin) BUTTON1=resource ID of button BUTTON1UP=file name of image for the up state of button (if not specified, BUTTONSUP value will be used) BUTTON1DOWN= file name of image for the down state of button (if not specified, BUTTONSDOWN value will be used) BUTTON1POS=left position,top position (in dialog units) BUTTON1OPT=TRANSPARENT, SCALE (pick any; if not specified, BUTTONSOPT value will be used) BUTTON1TRNSPRNTCLR=R value, G value, B value (transparent color for bitmap images; TRANSPARENT option has to be specified in BUTTON1OPT) BUTTON1TXTCLR=R value, G value, B value (text color for button; if not specified, BUTTONSTXTCLR value will be used) BUTTON1DISTXTCLR=R value, G value, B value (text color for disabled button; if not specified, BUTTONSDISTXTCLR value will be used) این مشخصات را نیز میتوان برای DialogBox خاص یا زبان های خاصی بکار گرفت. به این صورت: [Dialog Name] (Entries made in this section apply to this dialog box only; for non-existing entries, entries from the ALL section will be used) BUTTONS=… BUTTON1=… BUTTON1POS=… RECTS=… . . . [ALL-Language Code] (entries made here will be applied to all dialog boxes for this language; for non-existing entries, entries from the ALL section will be used) IMAGES=… IMAGE1=… . . . [Dialog Name-Language Code] (entries made here will be applied to this dialog box for this language only; for non-existing entries, entries from the ALL-Language Code section, Dialog Name section, or ALL section will be used, in that order) BUTTONS=… BUTTON1=… BUTTON1TXTCLR=… . . . IMAGES=… IMAGE1=… . . . پیوست: اندازه های یک دیالوگ پوسته دار: • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • نمونه طراحي شده نيز در همان پست اول گنجانده شده است. فايل PDF هر دو پست نيز در زير قابل دانلود هست. 1 نقل قول لینک به دیدگاه
ملیساا 5,015 مالک اشتراک گذاری ارسال شده در 30 شهریور، ۱۳۸۹ فایل pdf برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام 1 نقل قول لینک به دیدگاه
ارسال های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .