Pages

Wednesday, February 23, 2011

Drupal 7 Tutorials | Video Training Course with Demos

Drupal is one of the most well-known and widely-used open source content management systems out there today, and it powers millions of sites and applications throughout the web. As of this posting, the latest version is Drupal 7, which was released on January 5, 2011. For those interested in learning its new features, lynda.com online tutorials has released a series of Drupal 7 tutorials. In Drupal 7 Essential Training, computer journalist Tom Geller presents a series of video tutorials that will show you how to get the most out of this powerful and robust content management system (CMS). By the end of the course, you will have learned the necessary skills that will enable you to build a website using Drupal. The course will go through the basics of how to download and install Drupal, add content and graphics to a site, change the layout and design elements, control visitor interactions, and expand the site's capabilities beyond what’s available in Drupal core. You'll also learn about established best practices to ensure that your site remains streamlined, secure, and up-to-date.

Watch these selected videos to get a good idea of the pace and flow of this course:

Drupal 7 Essential Training - Welcome




Drupal 7 Essential Training - Getting a Drupal site up fast



Drupal 7 Essential Training - Deciding whether to use Drupal



Drupal 7 Essential Training - Investigating Drupal's inner workings



Drupal 7 Essential Training - Understanding nodes



Drupal 7 Essential Training - Adding fields to content types



Drupal 7 Essential Training - Modifying image styles



Drupal 7 Essential Training - Selecting and installing downloaded themes



Drupal 7 Essential Training - Enabling styled text with a WYSIWYG editor



Drupal 7 Essential Training - Launching a Drupal site



If you liked these videos, then go ahead and sign up for a lynda.com online tutorials membership. For $25, you get 1-month unlimited access to not just this training course, but all of Lynda.com's 900+ training courses. No long-term commitment required. You can cancel your membership at any time. And as a special promotion for visitors of this site, you can get a FREE 7-day trial pass to lynda.com. This free trial gives you access to all of their 900+ training titles so that you can see for yourself what a great learning resource this website is.


The course is 7 hours and 25 minutes in total length, and the tutorials are divided into 17 chapters. Here is a more detailed outline of the course:

Title: Drupal 7 Essential Training
Author: Tom Geller
Level: Beginner
Duration: 7hrs 25mins
Date of Release: 14 January 2011

Chapter 1: Defining Drupal
Managing content with Drupal 7
Comparing Drupal with other content management systems
Deciding whether to use Drupal
Looking at Drupal-built sites
Exploring the Drupal universe
Getting help with Drupal issues

Chapter 2: Understanding How Drupal Works
Checking Drupal's requirements
Investigating Drupal's inner workings
Learning Drupal's basic workflow
Understanding key terms in Drupal
Touring Drupal's interface

Chapter 3: Installing Drupal on Mac OS X or Windows
Installing the Acquia Drupal stack installer (DAMP)
Importing core Drupal into DAMP
Running Drupal's installer on top of DAMP

Chapter 4: Installing Drupal on a Server
Uploading Drupal with SFTP
Uploading Drupal with SSH
Creating Drupal's MySQL database
Running Drupal's installer
Installing Drupal using Acquia's Debian/Ubuntu package

Chapter 5: Controlling Drupal 7
Using the toolbar
Using the shortcut bar
Touring the administrative controls
Customizing the Dashboard
Differentiating administrator and visitor views

Chapter 6: Building a Drupal Site
Understanding nodes
Creating basic content
Changing site information, graphics, and interface
Giving visitors a way to contact you

Chapter 7: Controlling Content
Creating content summaries
Revising content
Categorizing content with tags
Going further with content categories
Publishing content via RSS
Using text formats to prevent content damage
Setting the comment policy
Managing comments

Chapter 8: Enabling Other Content Types
Adding blogs
Adding discussion groups
Adding polls
Subscribing to RSS feeds
Categorizing RSS feeds

Chapter 9: Extending Content
Creating new content types
Adding fields to content types
Exploring field types and options
Adjusting field display
Customizing field display by context
Modifying image styles

Chapter 10: Managing Users
Defining new user policies
Creating user accounts
Setting up user profiles
Defining user roles
Controlling access permissions
Canceling user accounts

Chapter 11: Changing a Site's Interface
Understanding Drupal 7 page layout
Taking advantage of block regions
Creating and modifying blocks
Selecting and installing downloaded themes
Building themes the traditional way

Chapter 12: Helping Users Find Their Way Around
Understanding Drupal 7 default menus
Creating multilevel menus
Creating easy-to-navigate books

Chapter 13: Expanding a Site's Capabilities with Modules
Installing and uninstalling modules
Configuring modules
Surveying popular modules
Enabling styled text with a WYSIWYG editor

Chapter 14: Displaying Information with Views
Understanding views
Creating views
Modifying views

Chapter 15: Administrating Drupal
Launching a Drupal site
Troubleshooting a Drupal 7 installation
Backing up and restoring a Drupal site
Updating Drupal
Deleting Drupal

Chapter 16: Going Further with Drupal
Monitoring performance
Improving administration skills
Reviewing security and permissions
Adopting best practices

Chapter 17: Developing for Drupal
Programming modules
Joining the Drupal community


So if you're ready to start with Drupal 7 Essential Training, sign-up for a lynda.com online tutorials membership today.

Monday, February 21, 2011

Android Game Development - Creating Android Games Using Flash CS5

If you're interested in creating Android games using Flash CS5, then check out Lynda.com's Flash Professional CS5: Creating a Simple Game for Android Devices video training course. This course on creating Android games will show you how to translate your existing Flash skills so that you can use them to design a game in Flash and publish it as an AIR for Android app. By the end of the course, you will have learned the following game concepts: collision detection, random enemy creation and movement, shooting capabilities, creating multiple levels, and displaying high scores.

Want to try out the entire Lynda training library of 900+ courses for FREE?

This course also goes beyond game functionality and shows you how to incorporate the use of mobile device capabilities such as the accelerometer and gestures to control graphics, and the hardware keys to activate menus. You'll also learn how to optimize your game so that it plays well on mobile devices. Once you've designed and created your own Android game using the skills you've learned from this course, you'll probably want to distribute it through the Android Market; this course will teach you that as well.

This training course consists of a total of 3 hours and 35 minutes worth of video divided into different chapters. You'll be viewing clearly presented video recordings of the author showing you how to create the Android game. No need to go through long pages of text, and best of all, you'll see exactly what's happening on the author's screen so that you can easily follow along.

Here are a couple of sample videos from the course that will give you a better idea of the kind of game that you will be creating:

Introduction - Flash Professional CS5: Creating a Simple Game for Android Devices



Adding code snippets - Flash CS5: Creating a Simple Game for Android Devices

This video talks about Flash CS5's handy feature known as code snippets. Code snippets are pre-made customizable code that you can easily add to your project.


Adding elements of randomness and chance to your game - Flash Professional CS5: Creating a Simple Game for Android Devices

This video will show you how to create an element of chance when generating the number of enemies that come up in your game. You'll also learn how to randomize the movement of these enemy characters.


Using the accelerometer to enable the user to move the game character by tilting the device - Flash Professional CS5: Creating a Simple Game for Android Devices

This video will show you how to use the AS3 Accelerometer class in order to take advantage of an Android device's accelerometer sensor, which detects if the device is being tilted by the user, so that it can be used to make the character move.


If you liked the sample videos, then go ahead and sign up for a Lynda.com membership to view the entire course. For $25, you get 1-month unlimited access to not just this training course, but all of Lynda.com's 900+ training courses. No long-term commitment required. You can cancel your membership at any time. And as a special promotion for visitors of this site, you can get a Free 10 day pass to lynda.com. Go ahead and see for yourself what a great learning resource this website is.


Here's a more detailed outline of the course:

Title: Flash Professional CS5: Creating a Simple Game for Android Devices
Author: Paul Trani
Duration: 3hrs 35mins
Date of Release: 15 February 2011

Chapter 1: Introduction to Mobile
Understanding the user
Flash content on Android devices

Chapter 2: Mobile Game Setup
Reviewing the game
Creating a file in Device Central
Reviewing the game structure
Adding code snippets

Chapter 3: Basic Game Movement
Animating the intro screen
Moving the player
Adding enemies
Adding movement
Adding chance and randomness

Chapter 4: Advanced Interactivity
Adding lasers
Detecting collisions
Adding explosions
Removing assets from the stage
Adding audio

Chapter 5: Scoring
Adding scoring and levels
Subtracting lives and ending the game
Creating a results screen
Displaying the score
Saving and loading game results

Chapter 6: Mobile-Specific Functionality
Detecting movement with the Accelerometer
Using the swipe gesture
Using hardware keys

Chapter 7: Optimizing for Mobile Devices
Handling exits and idle mode
Handling activation and deactivation
Optimizing graphics
Optimizing ActionScript

Chapter 8: Publishing
Creating the application files
Creating the app (Mac)
Creating the app (PC)
Publishing to an Android device (Mac)
Publishing to an Android device (PC)

Chapter 9: Uploading to the Android Market
Uploading to the Android market
Downloading from the Android market



So if you want to start learning about Android game development so you can start creating your own Android games, then sign up for Lynda.com's Flash Professional CS5: Creating a Simple Game for Android Devices training course.

Wednesday, February 16, 2011

Sample code from today's class on AS3 Tweens (2011-02-17)

I talked about the AS3 Tween class today and how it can be used to create motion tweens using AS3 code. For the example discussed in class, I used a for loop to create multiple sprite instances, and multiple tween objects to animate those sprites. The size, color and movement properties of each moving sprite were randomized as well. I also talked about the MOTION_FINISH event related to the AS3 Tween class, and how it can be used with the yoyo() method to make the tweens loop back and forth. Some of my students asked if I could post the sample code from our session today about the AS3 Tween class, so I'm posting it here. I also created another version that has more randomized properties. The AS3 Tween class is great for creating simple motion tween animations using code.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;

var nSprites:Number = 25;
var aSprites:Array = new Array();
var aTweenX:Array = new Array();
var aTweenY:Array = new Array();

for (var i:Number = 0; i < nSprites; i++)
{
     var nRadius:Number = Math.random() * 25 + 10;
     var nColor:Number = Math.random() * 0xFFFFFF;
     var nStartX:Number = Math.random() * stage.stageWidth;
     var nEndX:Number = Math.random() * stage.stageWidth;
     var nStartY:Number = Math.random() * stage.stageHeight;
     var nEndY:Number = Math.random() * stage.stageHeight;

     aSprites[i] = new Sprite();

     aSprites[i].graphics.beginFill(nColor);
     aSprites[i].graphics.drawCircle(0,0,nRadius);
     aSprites[i].graphics.endFill();
     
     addChild(aSprites[i]);

     aTweenX[i] = new Tween(aSprites[i], "x", Elastic.easeInOut, nStartX, nEndX, 3, true);
     aTweenY[i] = new Tween(aSprites[i], "y", Elastic.easeInOut, nStartY, nEndY, 7, true);

     aTweenX[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
     aTweenY[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
}

function onMotionFinish(e:TweenEvent):void
{
 e.target.yoyo();
}
Here's another version with even more randomization. The duration for each tween is randomized. The easing used is also randomized. The different easing functions are placed in an Array. Then we get a random number that's anywhere from 0 to the highest index value in the array, and use that to retrieve an easing type randomly from the easing functions Array:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;

var nSprites:Number = 25;
var aSprites:Array = new Array();
var aTweenX:Array = new Array();
var aTweenY:Array = new Array();
var aEasing:Array = new Array(None.easeNone, Back.easeIn, Back.easeOut, Back.easeInOut, Bounce.easeIn, Bounce.easeOut, Bounce.easeInOut, Elastic.easeIn, Elastic.easeOut, Elastic.easeInOut, Regular.easeIn, Regular.easeOut, Regular.easeInOut, Strong.easeIn, Strong.easeOut, Strong.easeInOut);

for (var i:Number = 0; i < nSprites; i++)
{
     var nRadius:Number = Math.random() * 25 + 10;
     var nColor:Number = Math.random() * 0xFFFFFF;
     var nStartX:Number = Math.random() * stage.stageWidth;
     var nEndX:Number = Math.random() * stage.stageWidth;
     var nStartY:Number = Math.random() * stage.stageHeight;
     var nEndY:Number = Math.random() * stage.stageHeight;
     var nDurationX:Number = Math.random() * 5 + 2;
     var nDurationY:Number = Math.random() * 5 + 2;
     var nEasingX:Number = Math.floor(Math.random() * aEasing.length);
     var nEasingY:Number = Math.floor(Math.random() * aEasing.length);

     aSprites[i] = new Sprite();

     aSprites[i].graphics.beginFill(nColor);
     aSprites[i].graphics.drawCircle(0,0,nRadius);
     aSprites[i].graphics.endFill();

     addChild(aSprites[i]);

     aTweenX[i] = new Tween(aSprites[i], "x", aEasing[nEasingX], nStartX, nEndX, nDurationX, true);
     aTweenY[i] = new Tween(aSprites[i], "y", aEasing[nEasingY], nStartY, nEndY, nDurationY, true);

     aTweenX[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
     aTweenY[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
}

function onMotionFinish(e:TweenEvent):void
{
     e.target.yoyo();
}

Tuesday, February 15, 2011

AS3: Detecting if the Mouse is Idle or Not Moving

In ActionScript 3, you can use MouseEvent.MOUSE_MOVE in order to detect when the user moves the mouse in your Flash movie, but I needed something that could detect the opposite. I needed to check whether the mouse was idle or not moving. I needed to find a way to check if the mouse pointer is being still and is just staying put in the same spot. So I noodled around a bit with some code, and what I came up with was an ENTER_FRAME event listener that would constantly check for the current x and y positions of the mouse pointer to see if the values were changing. To be able to check if the values were changing, I created 2 variables for each of the coordinates - 2 variables for the x coordinates, and 2 variables for the y coordinates. I made 2 sets so that I could compare them to see if the position of the mouse pointer has changed. I had posXa & posXb for the x coordinates, and posYa & posYb for the y coordinates. And then I used stage.mouseX and stage.mouseY to alternately assign the current position of the mouse pointer to the 2 sets of variables every time the ENTER_FRAME event gets triggered. The first time the ENTER_FRAME event listener runs, the location of the mouse pointer is assigned to posXa and posYa. Then the next time it runs, the location is assigned to posXb and posYb instead. And then it just continues to alternate each time the ENTER_FRAME event gets dispatched. I have a switcher variable, which is just an integer that switches back and forth between 0 and 1, and I am using that to tell Flash to alternately assign the values to either set. The idea here is to constantly check whether the values in set A and set B are the same or not. If they are, it means that the mouse is in the same spot, and is therefore not moving. Here's the code:
var switcher:int = 0;
var posXa:Number = stage.mouseX;
var posYa:Number = stage.mouseY;
var posXb:Number = stage.mouseX;
var posYb:Number = stage.mouseY;

this.addEventListener(Event.ENTER_FRAME, checkMovement);

function checkMovement(e:Event):void
{
     if (switcher == 0)
     {
          posXa = stage.mouseX;
          posYa = stage.mouseY;
          switcher = 1;
     }
     else
     {
          posXb = stage.mouseX;
          posYb = stage.mouseY;
          switcher = 0;
     }

     if (posXa == posXb && posYa == posYb)
     {
          trace("not moving");
     }
     else
     {
          trace("moving");
     }
}

Wednesday, February 2, 2011

Simple AS3 Collision Detection Using the AS3 hitTestObject() Method

In this tutorial, we're going to learn how to create basic AS3 collision detection using the AS3 hitTestObject() method of the MovieClip class. Collision detection refers to the process of checking whether 2 or more objects are hitting each other - if parts or the whole of each object are occupying the same space on the stage (i.e. if they are overlapping). For this exercise, we'll put two square shaped MovieClip instances on the stage and make one of them draggable. When the user drags and then drops that instance, Flash will check whether the user moved it to a new location where it is now hitting the other instance.

Let's begin.

  1. Create a new Flash ActionScript 3 document.
  2. Draw a square shape on the stage and convert it into a Movie Clip symbol.
  3. Put a total of 2 instances of this Movie Clip symbol on the stage.
  4. In the Properties Inspector, give one of them an instance name of square1_mc, and give the other one an instance name of square2_mc.
  5. Create a new layer for the ActionScript.
  6. Bring up the Actions panel and add the following code:
square1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(e:MouseEvent):void
{
 e.target.startDrag();
}

function drop(e:MouseEvent):void
{
 stopDrag();
 if (square1_mc.hitTestObject(square2_mc))
 {
  trace("Collision detected!");
 }
 else
 {
  trace("No collision.");
 }
}
When you test the movie, you should be able to drag and drop the square1_mc MovieClip instance. And when you drop it, Flash will check whether it's hitting the other MovieClip instance or not. If they are hitting, you will see a message in the Output window that says: Collision detected! If they are not hitting, the message you will see is: No collision.

Here's the same code for our simple AS3 collision detection using the AS3 hitTestObject() method, but with comments:
/*You can use the AS3 hitTestObject() method of the MovieClip class
to test whether 2 objects are hitting each other. Hitting refers
to whenever objects collide or overlap on the stage.

Example:
mc1.hitTestObject(mc2);

The example above tests whether mc1 and mc2 are overlapping.
This statement returns a boolean value - true if the objects
are hitting and false if they are not. You can use this method
in an if statement condition.

In this example, we should have 2 MovieClip instances on the stage -
square1_mc and square2_mc.
We are going to make the square1_mc MovieClip
draggable. And when the user drops it, Flash will
check whether square1_mc and square2_mc are hitting.*/

/*Add the MOUSE_DOWN event listener to the MovieClip
instance that we would like to make draggable.*/
square1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

/*Add the MOUSE_UP event listener to the stage.*/
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

/*This event listener function will make the first
MovieClip instance draggable.*/
function drag(e:MouseEvent):void
{
 e.target.startDrag();
}

/*This event listener function disables the dragging.
It also checks whether the MovieClip instance being dragged
overlaps with the other MovieClip instance after
it was dropped.*/
function drop(e:MouseEvent):void
{
 /*Drops the MovieClip that's currently being dragged.*/
 stopDrag();
 
 /*This if statement uses the AS3 hitTestObject() method to check
 whether the first MovieClip instance is hitting the 
 second one.*/
 if (square1_mc.hitTestObject(square2_mc))
 {
  /*Flash outputs this message if they are 
  hitting each other.*/
  trace("Collision detected!");
 }
 else
 {
  /*Flash outputs this message if they are 
  NOT hitting each other.*/
  trace("No collision.");
 }
}
And that concludes this tutorial on creating simple AS3 collision detection using the AS3 hitTestObject() method.

AS3 Dragging and Dropping Tutorial - AS3 startDrag() and AS3 stopDrag()

Exercise File:
as3-drag-and-drop.fla - Flash CS4/CS5
as3-drag-and-drop.fla - Flash CS3

In this tutorial, we're going to learn how to create simple AS3 drag and drop functionality using the AS3 startDrag() and AS3 stopDrag() methods. The exercise file can be downloaded from the link above, and the AS3 dragging and dropping code is provided below along with comments that explain the code.


Here is the ActionScript 3 code:
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
square_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(e:MouseEvent):void
{
     e.target.startDrag(false, new Rectangle(75,50,350,250));
}

function drop(e:MouseEvent):void
{
     stopDrag();
}

Here's the same code for ActionScript 3 dragging and dropping, but with comments:
/*Use the AS3 startDrag() method of the MovieClip class in
order to let the user drag MovieClip instances all over the stage.

Example:
myMovieClip.startDrag();

You can call this method whenever the user presses on
a MovieClip instance, so that the user can start
dragging it once he or she presses on the MovieClip.
The event for that would be MouseEvent.MOUSE_DOWN.

To stop the user from being able to drag the MovieClip
instance, you use the AS3 stopDrag() method. You can call 
this whenever the user releases the mouse button so that 
the object being dragged will be released the same time 
the mouse button is released. The event for that would 
be MouseEvent.MOUSE_UP.

To summarize:
Call the AS3 startDrag() method whenever MOUSE_DOWN happens, and call
the AS3 stopDrag() method whenever MOUSE_UP happens. In other words,
enable dragging while the user is pressing on the movie
clip, and disable dragging when the user releases it. */

/*Add the MouseEvent.MOUSE_DOWN listeners to the MovieClip
instances that you'd like the user to be able to drag.*/
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
square_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

/*Add the MouseEvent.MOUSE_UP listener to the stage.*/
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

/*This is the event listener function for the MOUSE_DOWN
event, which enables dragging.*/
function drag(e:MouseEvent):void
{
     e.target.startDrag(false, new Rectangle(75,50,350,250));
     /*This will enable dragging for whichever object is
     currently being pressed.
 
     It accepts 2 parameters (these are optional):
 
     1. lockCenter:Boolean - true or false
     If set to true, the object's registration point locks
     to the mouse pointer. If false, whatever part of the
     object that was clicked on locks to the pointer.
 
     2. Bounds:Rectangle
     Lets you create a rectangular boundary that restricts where
     the object can be dragged. You create a rectangle
     object that will serve as the boundary:

     new Rectangle (x,y,width,height)

     This rectangle will not be seen. The rectangle shape
     that you see on the stage of this exercise file is 
     just a drawing to help illustrate where the 
     boundary is. Also, it's not the shape itself that
     stays inside the boundary, but the MovieClip instance's
     registration point. So parts of the MovieClip instance
     can still move beyond the boundary.*/
}

/*This is the event listener function for the MOUSE_UP
event, which disables dragging.*/
function drop(e:MouseEvent):void
{
     stopDrag();
     /*Simply call the stopDrag() method, and whichever
     object is currently being dragged will then be
     dropped.*/
}

/*Why add the MOUSE_UP event listener to the stage instead
of to the MovieClip instances?

As long as the mouse pointer is within the stage, then
we can be sure that the MOUSE_UP event will be detected.
The problem with adding the MOUSE_UP event listener
to any of the MovieClip instances is that sometimes, 
the MovieClip instance gets left behind when the user
drags too fast. If the user releases the mouse button
and the mouse pointer is NOT on the actual MovieClip
instance, then the MOUSE_UP event won't get dispatched.
This will cause the MovieClip instance to get stuck
to the mouse pointer even though the mouse button has 
already been released. So it would be better to add the 
event listener to the stage instead.*/
And that concludes this basic example on AS3 dragging and dropping using the AS3 startDrag() and the AS3 stopDrag() methods.