Hi!
I have officially moved this blog to http://blog.griffinsdesigns.com and will not be updating this blog here.
Thank you!
Ready to start making the next social game? Well this tutorial will give you a starting point.
One of the hit things online is social gaming. I thought it would be fun and cool to get something going in the multiplayer area of gaming. In Flash Player 10.1, there was a feature called Cirrus was added, it’s a peer-to-peer feature that allows developers to create multiplayer games. Cirrus is free to use, you just need to go to the Adobe site and register to get the Developer key and server.
I ran across a source that had a list of open source codes libraries that have chat rooms, messaging, and etc. The resource is at the end of this posting. I tried a few of them, but couldn’t get any of them to work. I ran across one called Cocoon P2P. This one is open source and is really easy to implement. It doesn’t use Cirrus, but from what it looks like you can use it. For the purpose of this posting, I wanted to do something quick, but gets the point across.
Using Cocoon, I created a really small Flash application that counts the number of users. I know, I should’ve done something wicked cool, like a small game or something. In under 26 lines of code, I achieved what I wanted to do. I am excited I got it to work. I hope to explore this more and implement it in a game or application in the near future.
Here is a snippet of my code:
import com.projectcocoon.p2p.LocalNetworkDiscovery;
import com.projectcocoon.p2p.events.ClientEvent;
var channel = new LocalNetworkDiscovery();
var users:Number =0;
channel.connect();
channel.addEventListener(ClientEvent.CLIENT_ADDED, onClientAdded);
function onClientAdded(event:ClientEvent):void{
users++;
numUsersTextField.text = String(users);
}
Resources
http://www.as3gamegears.com/category/multiplayer/
http://www.as3gamegears.com/multiplayer/cocoon-p2p/
I was not paid to endorse any products or services that were mentioned in this post.
Many of my other posts are about a experiment of a new technology or me learning a new framework. Well, today I’m going to do something a little different. This is going to be about some useful Javascript and JQuery snippets that may be helpful for those of you who are learning Javascript or JQuery or are working a project and not sure about the syntax.
Javascript
//Changing a style
_name.style.border= "double thin #b4b4b4";
//Adding a click event using by id (in this example, the id is 'meet')
document.getElementById("meet").addEventListener('click', meetHandler, false);
//For IE (this is the same as the line above, but this syntax works in Internet Explorer. The above code won't work in Internet Explorer)
document.getElementById("meet").attachEvent('onclick', meetHandler);
// To check if the browser supports addEventListner and using attachEvent as a fallback option
if(document.addEventListener){
}else if(document.attachEvent){
}
JQuery
//Add class addAnimation to id 'meet'
$("meet").addClass("addAnimation");
//Add class to a class
$(".meet").addClass("addAnimation");
One of the neat things about CSS3, is keyframes. If you are or used to be a Flash Designer, you’ll know what a keyframe is. In CSS3, it is the same thing, except you won’t need to open Flash and you can view it mobile devices. For those of you who don’t know what keyframes are, keyframes are the beginning and ending point of a section/whole of an animation. The only bad part about using keyframes is that it doesn’t work with Internet Explorer.
Anyways, after finding out about keyframes, I wanted to see if I could make a simple animation using keyframes. My goal was to make a arrow fade in and animation from left to right with no javascript. In a few minutes, using CSS3, I succeeded! Below is a snippet of how I made this happen.
Code:
<div>
<img src=”images/Arrow.png” alt=”css3 arrow”/>
</div>
.ship{
margin-top:10px;
position:absolute;
animation:Move 1s infinite;
-moz-animation:Move 1s infinite; /* Firefox */
-webkit-animation:Move 1s infinite; /* Safari and Chrome */
-o-animation:Move 1s infinite; /* Opera */
}
@keyframes Move{
from {
left:0px;
opacity:0;
}
to {
left:200px;
opacity:0.9;
}
}
@-moz-keyframes Move /* Firefox */{
from {
left:0px;
opacity:0;
}
to {
left:200px;
opacity:0.9;
}
}
Which Code Does What?
animation:Move 1s infinite;
The CSS above, in the ship class is going to call the Move class to complete the animation in one second. The infinite is how many times we want the animation to play. For the purpose of this example, I set it to infinite, so it will keep playing over and over.
from {
left:0px;
opacity:0;
}
This code is where we want the object to be placed and how we want it to look. I wanted the image to fade in, from the left, so we set left to 0 and make the image invisible, by setting opacity to 0.
to {
left:200px;
opacity:0.9;
}
The above code is going to tell the image how far to go and what to do. We would like the image to move, so we are going to tell the image to move left 200. Our image is currently invisible, so to make visible at the end, we need to make it visible by setting opacity to any number between 0.5 to 1. I just used 0.9.
For some reason I can only get mine to work offline. Once I figure out why, I’ll post a live example. I saw it working on a live website, so I know it works online.
Resource:
W3Schools.com
http://www.w3schools.com/cssref/css3_pr_keyframes.asp
One of the things that have become increasing popular in Website Design is making responsive designed websites. For those of you who haven’t heard about this, it basically is what it sounds like. The site reacts to the user’s screen size.
Responsive design is is becoming popular because of mobile devices. There is a lot of talk about mobile devices being the future and soon, if not already for some users, the most convenient way for surfing the internet. When designing a website and making is user friendly for all of these screen sizes, it can get overwhelming to target all of these screen sizes to create a user friendly site, well I hope you intend to create a user friendly website. Designing a responsive designed website will help ease any worries you may have about targeting all the different screen sizes.
You can target a certain screen size, such as 480px by using media queries. An example of that is below.
@media screen and (max-device-width: 480px) {
}
Essentially what that says is, any device that has a screen size of 480 px and below, use the the follow CSS.
If you want to have a separate style sheet, you would use something similar to this:
*Wordpress kept deleting the above code, so I had to make it into a picture.
That not all, making a responsive designed website requires making the website fluid. You would do this by converting pixels to percentages. The resources below explains in more detail.
I was hoping to convert my portfolio site to be responsive before writing this, but I reached a spot in my development that I would be comfortable sharing.
I wanted to at least write this so anyone looking to find more information about responsive design could use this as one resource and could be used to point them to other resources.
Resources
One of the resources that I have been using is Responsive Web Design by Ethan Marcotte. (http://www.amazon.com/Responsive-Web-Design-Ethan-Marcotte/dp/B005SYWGXW/ref=sr_1_2?ie=UTF8&qid=1342594633&sr=8-2&keywords=responsive+design).
A second resource that may be helpful, is an article written by the same author as book listed above, http://www.alistapart.com/articles/responsive-web-design/.
Testing Resources
I found some great resources for testing different screen sizes.
http://www.labnol.org/internet/test-responsive-design/21348/
I like the responsinator.com resource the best because you can get the list of different sizes at one time. I know another resource on the list does that, but seemed easier to use responsinator.com.
Like always, I am not affiliated with the author and the websites listed in the resources. I do not receive any compensation for mentioning them in this post.
Source : griffinsdesigns[dot]wordpress[dot]com
0 comments:
Post a Comment