Design quality WordPress themes in a minute with Artisteer

Having a nice and original blog theme is very important if you want to distinguish from the crowd.

Unfortunately, designing a theme from scratch can be difficult due to a lot of variables to consider: header, sidebars, buttons, css and more.

There are a lot of free and not free themes available on the web, but the best ones are downloaded a thousand times every day… not exactly what I would call “unique”…

So I am going to introduce you a software able to create a quality WordPress theme in a matter of minutes, without any knowledge of HTML, Php, Css and so on.

It’s Artisteer and I am going to review it.

The most interesting idea about Artisteer is the “Suggest” button… you can let Artisteer suggest the whole theme, playing with more than 100 variables, or make it suggest only some features, such as typography, color schemes, buttons, menu and so on.

These are three randomly generated themes.

It’s important to know each theme was created in a click. In a review, some pictures are worth a thousand words. Read more

Box2D: tutorial for the absolute beginners – step 2

After understanding the meaning of the first lines in Box2D: tutorial for the absolute beginners, it’s time to explain the rest of the script.

Lines 19-27: These lines handle the debug draw. Remember Box2D does not draw anything, it just calculates position, rotation and motion of every object in the world. So it’s up to you to attach real graphic assets to worl objects. Anyway, with some lines you can enable a debug draw mode that will help you during the creation of your script. For more information about debug draw read Understanding Box2D debug draw.

Line 28 declaring final_body, b2Body type. b2Body is the object used to represent one rigid body. A rigid body is a chunk of matter that is so strong that the distance between any two bits of matter on the chunk is completely constant. They are hard like a diamond. Box2D only handles rigid bodies.

Line 29 and 31 declare and create the_body variable, b2BodyDef type. b2BodyDef handles the body definition. With the body definition we can specify the initial position of the body.

Line 30 and 33 declare and create the_box variable, b2PolygonDef type. b2PolygonDef is a polygon definition.

Line 32: setting the initial position of the body. Remember values are in meters and refer to the center of the body.

Line 34: SetAsBox function takes the_box and turns it into a box, passing the half-width and half-height as parameters. Read carefully… half-width and half-height. In meters.

Line 35: defining the friction of the box

Line 36: defining the density of the box. Setting the density of a body to zero, like in this case, will make the body static. A static body is not affected by gravity, collisions and so on. It’s just fixed in the stage. This will represent the ground.

Line 37: CreateBody creates the body previously defined

Line 38: I am creating the polygon shape previously defined with CreateShape on the body previously created with CreateBody

Line 39: Once the shape is attached, we instruct the body to compute its mass properties from the attached shapes using the method SetMassFromShapes. This is when the objects really exists.

Lines 40-42: Adding some listeners

Lines 45-58: This function, to be executed at every second, creates a box in the same way I created the ground, with the only exception at line 54 I am setting a density different than zero, meaning the body is not a static one. Every body with a density will react to collisions, gravity, forces and so on.

Lines 60: We must update the world at every frame. We can do it with Step function. Step has two parameters: the first is the time interval, in seconds. It means at every frame I am going to update the world as if 1/30s passed. The second is the constraint solver. The constraint solver solves all the constraints in the simulation, one at a time. A single constraint can be solved perfectly. However, when we solve one constraint, we slightly disrupt other constraints. To get a good solution, we need to iterate over all constraints a number of times. The suggested iteration count for Box2D is 10.

And now the entire script has been explained.

If you manage to turn this script into something interesting, send me at once and I’ll publish it on the blog.

Box2D: tutorial for the absolute beginners

This is a tutorial about Box2D dedicated to the absolute beginners.

I received a lot of request asking for this, so here we go.

What is Box2D

Box2D is a feature rich 2d rigid body physics engine, written in C++ by Erin Catto.

There is a Flash version called Box2DFlashAS3, but among Flash developers it’s called Box2D as well, that you can download from this link.

Being a Flash porting, we will use AS3 to make our project, instead of C++ as required by the original library.

Once you downloaded and unpacked the zip file in a folder, this is what you will get:

You are now ready to begin

Your first Box2D experiment

Start Flash and create a new AS3 Flash file and call it (example) demo.fla. Save it in the same folder you used to unzip Box2D package. Also in your properties panel assign the Class name to (example) demo, this way:

Now create a new actionscript file, call id demo.as and save it in the same folder.

Your folder now should look this way:

it’s time to edit demo.as Read more

Designing the structure of a Flash game – AS3 version – Part 4

Here I am with some new features added to the game.

I had to make some gameplay because I am going to show you how to add portals API, and in order to get my game approved there must be something playable.

So I decided to make an easy “click the shape” game, and I will show you how to add a lot of features to a normally flat and boring game.

At the moment you just win a level (any level) if you click more than 100 times in the moving circle before it moves 50 times. You get one point for every click inside the circle, and you lose one point if you click outside it.

And now a couple of things about the graphics.

First, I used a stripe pattern designed with Stripe Generator. It’s an interesting free online tool to generate stripes on the fly.

Then, I am going to make a Valentine theme, but I won’t use the “Valentine” word in the name, because I don’t want to give the game an old feel when Valentine is over.

Download the source code, meanwhile I submitted the game to MochiAds, so next time I will be able to show you the complete splash page and comment it line by line.

In-game banners: a winning idea

As you know, I released two Flash games with banners inside.

The first one was Red Flowers with a banner placed in the level selection screen, and the second one was SamePhysics, with a banner placed directly in the game screen.

It seems obvious people pay less attention to banners while playing, so the click-through rate of an in-game banner should be lower than the one on a banner placed in the level selection screen.

Let’s see some numbers, when both games had about 75k views:

Red Flowers: 76,257 views / 6,250 clicks = 8.2%

SamePhysics: 79,192 views / 9,687 clicks = 12.2%

I am really amazed of SamePhysics results… maybe people are more concentrated on what’s happening on screen during the game, so they can easily spot the banner even if they’re playing… anyway a 10% average click through is really interesting.

Probably I wasn’t the one thinking about in-game banners, because Girl Games sponsored a custom version of the game showing its banner… this one:

And now let me say one more thing: with MochiAds version control I can change my banners in the whole network (excluding the ones sponsored by Girl Games) in a couple of clicks… so virtually I am able to sell ad spaces anytime with interesting formulas like pay per click or pay per time.

Try to imagine advertisers buying weekly in-game ad spaces in a blockbuster like Bloons… with version control this is possible.

If you want to test it by yourself, I am selling one and only one LIFETIME banner in SamePhysics at a very interesting price. If you’re interested, prepare a 468×60 banner and contact me.

** edit **

Sold out…

Trying to solve a Sokoban level with brute force

Before you even think this script will solve a Sokoban level, I must warn you: this script won’t solve a sokoban level, it won’t even recognize whether a level is solved or not.

This script, part of an old project I am going to bring to life again, will just make Sokoban wander around the maze eventually pushing crates here and there, according to Sokoban’s rules.

Feel free to add some backtracking to make it more interesting, but I have to say coding a Sokoban solver could be a nightmare.

If you want to see another Sokoban script (this time to play the game), read Javascript Sokoban game script.

Sokoban levels are shown and created this way:

# = wall
$ = crate
. = place
* = crate in place
@ = man
+ = man in place

And now the script… Read more

How to lose a kidney with your website

Enough is enough. I am really tired of reading about computer guys building websites and getting rich.

On the other side, I’m bored of reading about so-called web 2.0 companies collapsing because they thought they could pay 20,000 employees to keep their blog updated.

It’s time to read something fresh and new: how to lose a kidney with your website.

This is the story of Luca Armani, owner of a rubber stamp store.

In 1997, during Italian internet stone-age (not over yet) he decided to buy a domain name.

You may wonder which one.

armanirubberstamps.com? No…

lucaarmani.com? No…

He bought armani.it that now belongs to Giorgio Armani S.P.A. – the famous Italian fashion company.

Buying the FREE (at that time) armani.it domain put Luca in troubles. When, in 1998, Giorgio Armani s.p.a wanted to buy the same domain and found out Luca already owned the domain, Luca was sued and after some years he lost the cause, the domain and a lot of money… not less than Euro 300,000 according to the judgement.

Anyway money is not everything and Luca decided to sell a kidney to raise funds and continue the battle against the fashion company.

I don’t know whether Luca will sell the kidney or not, but these are my two cents about the whole story:

1) Giorgio Armani company was founded in 1975 according to Wikipedia, so I really can’t understand why someone inside the company did not think “hey… let’s buy our own domain” before 1998. Gianni Versace S.p.A started its journey in 1978 (according to Wikipedia) and registered versace.it in 1996

2) Luca Armani should have bought something like armanirubberstamps.com, knowing that there is already a big fashion company with his same name… Would you ever digit www.armani.it looking for some rubber stamps?

3) Giorgio Armany company made a really cheap action when sued Luca… now it looks like the big multinational company trying to eat the small entrepreneur… something inspiring for next Michael Moore movie… it could just buy another domain name… nike.it hosts a glass bulbs company and as far as I know Nike is not moaning for it.

4) I don’t know the price for a kidney, but a kidney sold to fight for a domain name is priceless. It would be the Holy Grail of this millennium. I want it!

5) Someone registered emanueleferonato.cn and I am about to sell a lung to kick his chinese ass.

Box2D joints: Revolute Joint – Building motors

After seeing how to create a revolute joint, it’s time to use them to create motors.

Box2D already has everything we need to create such motors.

The script is the same as the one I showed you in Box2D joints: Revolute Joint, and you just need to add the lines I am going to show between lines 57 and 58:

58
59
60

the_rev_joint.enableMotor = true;
the_rev_joint.motorSpeed = 2;
the_rev_joint.maxMotorTorque = 1;

enableMotor: A flag to enable the joint motor

motorSpeed: The DESIRED (see below) motor speed, radians per second.

maxMotorTorque: The maximum motor torque (moment) used to achieve the desired motor speed, in joules.

Normally one joule is the amount of energy required by a force of one newton traveling through a distance of one meter, that’s why around the web you can see torque expressed as N*m.

Anyway, it does not matter if I whether I am talking about joules or bananas, if your torque is too weak, the motor won’t have the necessary force to reach the desired speed, and sometimes it won’t even work, like in this case: Read more

New blog header: how did I make it

During the weekend I played with the blog header.

In my opinion bloggers understimate the power of a rich header, and in most cases you will see only the blog title and description.

I am going to show you what I did on my header, why I did it and how can you do it on your own.

Pages first

The first thing included in the header is the navbar with blog pages. Having the pages in the very top of your blog will give it a more “corporate” look.

To list your pages, use wp_list_pages WP function.

You can find a brief explaination about it in Customizing WordPress header or in the official docs.

Logo

Now that I have a logo, it’s time to use it…

Categories

Then I wanted to display categories in the header, and I used Multi Column Category List Plugin for WordPress to split them into three columns.

I also modified a bit the plugin to show how many posts have been written for each category.

Gallery

The last thing I added was a slideshow showing my latest projects. I used SlideShowPro that isn’t free but has a lot of features and is made with Flash, that means no frameworks/complex javascripts required.

It’s also fully XML driven, that means it’s easy to configure.

If you are looking for a good free alternative, check JonDesign’s SmoothGallery, that uses MooTools.

And this is the result…

… an header that’s not the “image-title-description” you are used to see in WP themes.

During the next days I will redesign the rest of the blog, to make its contents as much accessible as I can.

Designing the structure of a Flash game – AS3 version – Part 3

The game structure is getting more and more complete… now, according to the comments to Designing the structure of a Flash game – AS3 version – Part 2, you are able to return to main menu from level selection screen, level passed screen, and level failed screen.

Here it is the new diagram:

Moreover, I made some code optimization and now you can only play levels you already completed and the first uncompleted level, thanks to AS3 shared objects.

This is the game:

Next time, I’ll add sound button and some real graphics.

Download the source.

Next Page →

  

Posts