Introduction

• Get Started If you’re anxious to get started with ActionScript 3 but don’t want to have to learn Flex or MXML, the form of XML Flex uses to design applications, this tutorial is for you.

• Flash Programming Fundamental teach you the fundamentals and then study an example: multiple choice quiz.

• Flash Game Creation 5 series of tutorial to make a simple game.

• Getting Started With ActionScript shows how to make a simple program with ActionScript.

Implementation

• Shoot em Up The game has 3 targets. These targets are placed in an array, and are then selected at random

• Clicking Games The game consists of an object which appears on the screen repeatedly and user has to clicks on the object that appears. There is a total of twenty turns available and the number of hits is counted.

• Side Scrolling Game describes scrolling in two dimensions, that is the screen can be scrolled both horizontally and vertically. Here’s a Demo. Another implementation of this tutorial is in here

• Survival Horror is a video game genre in which the player has to survive against often undead or otherwise supernatural enemies, typically in claustrophobic environments and from a third-person perspective.

• Line Rider is a game where player has the capability to draw the stage (with lines) and the rider will ride the line.

• Snake move the snake and eat as many “food” blocks as possible

• Tile Based Games a series of tutorials about tile based games in Flash. Here’s another Tile Based Tutorial you might find interesting.

• Projectile learn how to shoot a projectile out of the sky

• Tower Defense the concept is : there is a road, and some minions walking that road. You have to kill all minions before they reach the end of the road. You can build several facilities to kill minions and earn money to upgrade weapons as the minions get stronger and faster.

• Deflection game where the objective is to deflect the ball into the goal by creating deflection walls.

• SpaceShooter 5 series of tutorials on how to develop Space Shooter game.

• Beat ‘em Up Tutorial guides you from making sprite to chasing enemy in Final Fight style beat ‘em up game.

Using Engines

• Physix Engine a verlet based physics engine for flash written in Actionscript 3.0.

• APE a free AS3 open source 2D physics engine for use in Flash and Flex.

• Away3D a real time 3D engine for Flash

• Sandy3 is an intuitive and user friendly 3D open source library.

• Glaze is a game and physics engine including rigid body dynamics, scene management, line of sight, and even AI

• FFilmation is an isometric engine written in ActionScript 3

• Alternativa3D create 3D in your browser

• Box2D is an neck breaking open source port physics library Box2D.

• Papervision 3D is an open source 3D engine for Flash.

]]> http://www.surgehead.com/tutorial/adobe-flash-tutorial-part-2/feed http://www.surgehead.com/tutorial/adobe-flash-tutorials-part-1 http://www.surgehead.com/tutorial/adobe-flash-tutorials-part-1#comments Thu, 04 Sep 2008 17:37:16 +0000 admin http://www.surgehead.com/?p=72 If a picture says a thousand words, how about animation? These days Adobe Flash is the standard of animation in the web.  Sometimes text and image aren’t enough to express your idea. Sure, Flash has it’s drawback such as more loading time and may encourages design abuse, but it has a nice interactivity element and you can even make a game with it.  We’ll cover some tutorials related to Adobe Flash that may make you to be a better designer / programmer.

If you don’t have any experience with Flash before, please take a look at this tutorial for newbie.

DRAWING

• Flash Vector Illustration shows you how to draw characters in Flash.

• Coloring Tutorial learn how to color in Flash.

• Guide Shading Flash shading with simple 3 tone shading, using solid color.

• Flash tutorial animation a funny animation that teach us the fundamental of Flash. here’s the sequel.

• Draw for animation A small guide to get you started on drawing characters that can be animated

• Draw Anime Character in Flash.

• Flash Drawing Tutorial demonstrate how to draw in Flash.

EFFECT

• Stop Smoking animation uses blur effect to create a smoke effect.

• Old grain TV effect widely used in movie scenes to indicate a event that have occurred ages ago.

• Bubble animation shows how you can use Motion Guide to draw a path for your bubbles.

• Mouse Trail using ActionScipt only.
• Flowing Water effect in your pool.

• Water effect flowing on the river tutorial.

• Fog  Effect learn how to create a fog effect.

• Creating Particle Effect This concept can be used to create randomized raindrops, snowfall, fire, smoke, bouncing balls, and even some more abstract effects.

• Shine Effect on your phone.

• FadeGrid fade image from left to right and from top to bottom with grid style.

• Zoom Motion Blur may appear to be hand-held video footage or perhaps manipulation of z space coupled with some motion blur done in After Effects.

Advanced

• Elasticity How to give an object an effect of elasticity.
  
• Gravity Physics explore various aspects of physics and how they can be represented in your flash applications.
• Advanced Preloader Learn how to properly preload Flash movies that use components.
• Advanced animation with drawing API teaches you how to combine basic animation with the drawing API
• Build Flash Portfolio Use your Illustrator and Photoshop files within the Flash environment to create a stunning and interactive online portfolio that showcases your best work.

PHOTOS, MUSICS & VIDEOS

• AOL Top 100 Music Video gives you the top 100 most watched music videos. You can also bookmark them and watch them later.
• RichFLV is an application that used to edit FLV files.
• Finetune lets you discover new music, create playlist and organize them.
• Pandora is a music discovery service designed to help you enjoy music you already know, and to help you discover new music you’ll love. It is restricted to US only.
• UVLayer is a client with cool interface that lets you to find videos on YouTube-alikes websites and share them with your friends.
• DestroyFlickr allows you to browse all those picture on Flickr within your desktop. Mouse over the image and you get a larger view. Click on it and you get the actual image.
• Flick Flipper allows you to browse through those photos in Flickr.
• FotoBooth get your picture with your webcam instantly. You can put some filters and upload it to Flickr.

WEB TOOLS

• Google Analytics Reporting Suite brings your Google Analytics straight to your desktop. It’s still has some bug but it is a nice app you should try.
• Em Calculator do all the trouble creating CSS code so that you can scale up or down your typography and still don’t mess the spacing and layout.
• WebKut lets you to capture page of websites. It provide some simple web snapshot options: capturing entire page, current view, or only a selection.
• WebSnapShot is another way to capture thumbnails, full page , and the browser’s contents of live websites.
• Shrink O Matic ease your job on resizing images.
• Kuler Desktop imports colors to Adobe apps such as Photoshop, Illustrator and inDesign.
• Color Browser organizes your favorite colour pallete.
• COLOURlovers Desktop Color finder is there for you when you need inspiration for colour schemes and pallete.
• Color Picker shows you the hexadecimal of your chosen color.
• Pixus measures object on your screen. It has browser skins so that you can view how the object looks like in web browser.
• Air Icon Generator generates a CS3 or Web 2.0 style badge for you.

ONLINE READER

• ReadAir is another Google related app. You can read your Google Reader feeds in an OSX themed desktop client.
• Apprise is a feed reader with Twitter and AIM integration. You can share your links or stories to  Twitter or AIM.
• DiggRSS Reader is a more spesific RSS Reader. View Digg Top Stories on your desktop.
• Snackr is a RSS ticker that pulls random items from your feeds and scrolls them across your desktop.

SOCIAL SOFTWARE

• TWhirl allows you to update your twitter account. Not only Twitter, it can also connect to multiple  Twitter, identi.ca, Friendfeed and seesmic accounts.
• TweetDeck saves your Twitter to your local database and breaking it down into more manageable bite sized pieces.
• TumbleWeed is like Thwirl. The difference is that TumbleWeed connects you to Tumblr.
• Pownce can send messages, links, files and events to your friend.
• UserPlane Desktop is another community application that enables you to send messages, IM, and friend requests.

NOTES & TASK MANAGEMENT

• Agile Agenda is a project scheduling application.
• Klok allows you to track time of your project.
• MiniTask is a dead simple to-do list software for those who are tired of complex task management apps. You may want to try Doomi that do the same thing as MiniTask.
• Snippely is a tool that can organize all your quick notes, memos or codes you frequently use in your hard disk in one location.
• Shifd from NY Times stores your memos, quick notes or links to your account. You can read it later and even update your content from your mobile phone or your computer.

OTHER

• EBay Desktop lets you search,browse, bid and watch items on EBay without browser. If you win the auction, you can pay for it using the app too. But if you have used Auction Sentry before, you may be dissapointed because the Ebay Desktop can’t “snipe”.
• XDrive Desktop Lite allows you to store your local files to XDrive online storage up to 5GB.
• NASDAQ gives you an insight of trading activity.
• StockQ streams stock to your desktop. You can adjust it’s refresh rate from 1 sec to 5 minutes. No brokerage account login/authentication.
• NetBook browses and retrieves books from the Project Gutenberg Library, an online book library.
• JoomEdit manage your Joomla content straight from your desktop.

You may want to check out their samples too. If you have any other Adobe AIR apps that you find useful, write it in the comment section.

osCommerce

“osCommerce Online Merchant is a complete online store solution that contains both a catalog frontend and an administration tool backend which can be easily installed and configured over a web-based installation procedure.”With over 8 years of operation, osCommerce has built a showcase of over 14,000 online shops that have been voluntarily added to the live shops section, and powers many thousands of more online shops worldwide.” You can see the full feature in here.

Digistore is based on the osCommerce engine. It features WYSIWYG editor that allows a user to see what the end result will look like while the interface or document is being created. You can use the WYSIWYG editor to create HTML code in a graphical interface. No programming knowledge is required.The store template, layout and colours can be modified from the administration control panel. No programming knowledge is required for basic customization of your store.View the full feature here.

Digistore demo

Prestashop

PrestaShop is great alternative to osCommerce. There are even an php applet to import product and categories from oscommerce database to prestashop database. Look at the feature offered by Prestashop.

Front Office Demo

BackOffice Demo

Magento

Magento is a robust e-commerce platform that can provide you many control over your store. Key features:

• Control multiple websites and stores from one Administration Panel with ability to share as much or as little information as needed.
• Web Services API for easy integration between Magento and any third-party application.
• flexible Coupons (pricing rules) with ability to restrict stores, customer groups, time period, products, and categories.
• One Click upgrade
• and many more

Front Office Demo

BackOffice Demo

Übercart

Ubercart can fully integrates your online store with Drupal, a popular CMS. Ubercart was designed to take advantage of Drupal’s major core and contributed systems, providing users with shopping cart functionality that seamlessly integrates with other parts of your company or community website. One of the key strengths of Ubercart is its design that allows official and third party developers to add to or alter its features to accommodate virtually any e-commerce need. This means you’ll never have to change the source code to add new features, so you’ll have an easy upgrade path when the core gets improved or bugfixes are released.
Current online stores are leveraging Ubercart to meet the following e-commerce needs:

• Selling physical goods from various sized product catalogs.

• Selling file downloads (i.e. music, videos, software).

• Selling site access for members only websites, including automatic renewals and expiration of user access.

dashCommerce

If you are more familiar with ASP.NET than PHP, you can look at dashCommerce. It was developed with ASP.Net and use SQL Server for storing data. Check out their feature matrix.

Live Demo

FINAL WORD

I am sure there are many more e-commerce solution out there. If you want to add your choice, feel free to write about them in the comment section.

But remember folks, these icons maybe free but some of them is under license. You may use it as personal use but not for commercial use. Look in the Creative Commons license, General Public License , and the Lesser General Public License for further information. And now here we present you the icons.

Web Development Icon by kurumizawa

Mini pixel Icon by n-design studio

Microformat from factorycity

Cool ASP.Net Icon by aspneticons

Archaic Web Icon by digiboy

Xiao Icon by ineversay

Blue-ish Fast Icon user

Vaga Iconset from tenbytwenty

Social Bookmark Icon by Vikiwork

Another Social bookmark icon brought to you by fasticon

Social web button by webfruits

Kito gives us a great icon package

Web Application Set by YingJunjiu

vector icon by monofactor

Developer Icon by sekkyumu

JonasRaskDesign share some good icon

Web icon by icojoy

Web Icons by umeshkashyap

movid web icon by sevenova

Stylized Icon by pho3nix-bf

Icon goodies in csi.nfshost

Bright Icon set from frexy

icojoy take us back to pixel

weather icon and a few other by design magus

Several great RSS icons created by Zeusbox

Another Fresh RSS icon shared by smashingmagazine and Fasticon

Delicious looking RSS icon by design-freak

Colorful RSS icon by nysii

RSS icon from kurumizawa

OTHER

The standard Feed icon can be found here.

You can use Favicon Generator to convert your image to 16 x 16 favicon.  What is Favicon? Its the small icon placed next to site name in the browser’s URL bar.  You can also make your favicon in 256Pixels with their palette.

1. Tools for Web Development

• Firebug is a must have extension that can be used to trace bugs. It has many various feature like dynamic console, DOM tree explorer, Javascript debugger,  CSS viewer and editor.
• Web Developer have many option to help you in developing like disable java/ javascript, outline frames, headings, tables, validate CSS and many more.
• IE Tab Testing cross browser compatibility of your code is an important issue and now with this extension you can see how your web page displayed in IE.  
  
• Extended Cookie Manager is a easy cookie manager used to detect whether a website send a cookie and shows if this cookie was blocked, allowed or only allowed for session in your status bar. Warning: May not be compatible with Tab Mix Plus.
  
• ColorZilla is certainly a colorful extension. It can select color on a webpage, adjust it and put it in any other program.
• ScribeFire may not help you building web but it certainly help you writing or editing your blog.
• Server Switcher enable you to switch between your development area and live servers, so that you can instantly see the differences.

2. Transfering Files

• ScrapBook helps you save web pages and manage them.
  
• FlashGot you don’t need to copy your download link and paste it in your downlaod manager anymore. this this extension do the job for you.
  
• DownThemAll “is all you can desire from a download manager: it features an advanced accelerator that increases speed up to 400% and it allows you to pause and resume downloads at any time”. With this, you don’t need to install another download manager software.
  
• Video Download Helper is very handy when you need to download from YouTube-like sites. Maybe for downloading some video tutorials.
• GSpace convert your Gmail space for a file storage.  “It acts as an online drive, so you can upload files from your hard drive and access them from every Internet capable system.”
  
• FireFTP is an alternative FTP client in case you don’t want to use real FTP client like Filezilla.
  

3. Change The Way You Browse

• GreaseMonkey is a powerful script that lets you customize any webpage by adding Javascript code.
  
• FlashBlock Maybe those animation is good to see but sometimes it just take a long time to load or we just don’t want to see it. Grab this extension and you won’t see those Flash again. If you need to block something more than Flash, use adBlock
  
• DownloadStatusBar I don’t know about you, but I hate that download window. This extension allows you to keep those download dialog in status bar.
• TabMixPlus “Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager with crash recovery that can save and restore combinations of opened tabs and windows.” If you don’t need those feature, maybe you can try Colorful Tabs or Chroma Tabs
• Session Manager saves your session after crashes. Don’t be afraid of losing data anymore.
  
• Cache Status give you information about your browser cache usage and can also clear it.

4. Explore the web

• StumbleUpon is a very addictive plugins that may reduce your sleep time. It can discover website based on your interest and bring it to you. You can also connect with people with the same interest and share your discoveries.
• Shareaholic If you like sharing things you found on the web and tired of copying and pasting links. Shareaholic currently supports: digg, del.icio.us, facebook, foxiewire, friendfeed, google bookmarks, google reader, healthranker, kaboodle, magnolia, mixx, myspace, pownce, reddit, simpy, stumbleupon, streakr, truemors, tumblr, twitter, ycombinator, bzzster, etc.
• Sage is a popular extension for managing RSS feed
• Foxmark is a great extension that can synchronize your bookmark. You can access your bookmark from any other computer. Another great option for online bookmark is del.icio.us
• ClipMark saves a portion of website including text, graphic and video.
• FlagFox “Displays a country flag in the status bar depicting the location of the current website’s server, and provides quick access to detailed location and webserver information.”

OTHER

Firefox cheat sheet. This keyboard shortcut list is made for those who often forget to charge their wireless mouse or just lazy to move their arm to mouse.

Problematic extension list most of problematic extension and how to solve them.