Ming Apps

Posts Tagged ‘tutorial


HTML5 Powered with CSS3 / Styling

如何利用CSS3讓不同的DOM加入影子效果呢?

Step 1: 在head的style中加入以下code:

註: 0px 0px 30px #ccc

第一個數值為影子的x-coordinate,

第二個則是y-coordinate,

第三個是影子長度,

第四個為影子的顏色。


.box_shadow {
-moz-box-shadow: 0px 0px 30px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 30px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 30px #ccc; /* Opera 10.5, IE9, Chrome 10+ */
}

Step 2: 在body中的DOM加入你的class name

<div class="box_shadow">Ming Apps!</div>

Step 3: 完成!

示範網頁: ming-apps-css3-tutorial-box-shadow-demo.htm

廣告


HTML5 Powered with CSS3 / Styling

示範 Demostration:
ming-apps-css3-round-corner.htm

Step 1: 加入以下Source code於Header中:


.box_round {
  -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}
.box_round_2 {
  -moz-border-radius: 12px 0px 36px 24px; /* FF1+ */
  -webkit-border-radius: 12px 0px 36px 24px; /* Saf3-4, iOS 1+, Android 1.5+ */
  border-radius: 12px 0px 36px 24px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
  background-color: #ccc;
}

Step 2: 在div等tag name中加入class name box_round or box_round_2:

<div>Ming Apps HTML5!</div>
<div>CSS3 Round corner!</div>

Step3: 完成!

Ming Apps CSS3 tutorial round corner demo

大家可以嘗試改變Color值以及round corner四個corner的radius值改變四角的彎度!

標籤: , ,

Cocos2d for iPhone Logo

Ming Apps再黎一個Cocos2d Tutorial!

今次教大家砌Menu,

應用一下CCMenu和CCMenuItem呢一個Class吧!

註: 本人會以Xcode 4作示範,和xcode3可能會不相同。

我會源用之前的cocos2d教學 -layer transition with touch event 的方式,

一開始便會用兩張cclayer,

然後就是利用menu 方式 call scene transition,

不再是利用double tap / double touch的方式罷了。

好! 請大家下載先前教學source code, 開始!

Step 1: 加入CCMenuItem以及 CCMenu:

在HelloWorldLayer.m當中, 將function init入面的source code改成:


if( (self=[super init])) {
CCMenuItem *menuItem1 = [CCMenuItemFont itemFromString:@"Play Ming Apps" target:self selector:@selector(onClickPlay:)];
CCMenuItem *menuItem2 = [CCMenuItemFont itemFromString:@"Testing" target:self selector:@selector(onClickTesting:)];
CCMenuItem *menuItem3 = [CCMenuItemFont itemFromString:@"About" target:self selector:@selector(onClickAbout:)];
CCMenu *menu = [CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];
[menu setColor:ccc3(255, 255, 255)];
[menu alignItemsVerticallyWithPadding:10.0];
[self addChild:menu];
	}
	return self;

大家可以看到CCMenuitem 可以利用文字作為Menu選單的選項,

並加上selector:@selector(onClickPlay:)的attribute,

將select event function加入每個CCMenuItem中。

[CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];

共會將menuItem1,2,3加入CCMenu* menu中,

然後利用alignItemsVerticallyWithPadding直向排列你的Menu,

alignItemsHorizontallyWithPadding就是橫向排列!

然後就是addChild在介面中加入menu。

Step 2: add menu click event functions

在HelloWorldLayer.m中,function dealloc前的空位,加入:


- (void)onClickPlay:(id)sender{
NSLog(@"on play ming apps");
[[CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

- (void)onClickTesting:(id)sender{
NSLog(@"on click testing");
[[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

- (void)onClickAbout:(id)sender{
NSLog(@"on click about");
[[CCDirector sharedDirector] replaceScene:[CCTransitionSplitRows transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

大家可以看到每個selector event都以進行CCTransition的不同方式,

來進行scene transition.

Step 3: 完成!

大家可以到以下網址下載示範程式: cocos2dmenu-ming-apps-source-code.zip!

Ming Apps CCMenu Cocos2d Tutorial Screen shot


%d 位部落客按了讚: