Moving the Blog!

Hey all, I'm going to move the blog over to Wordpress. And also update it more often (not just lesson releases)

Hope you check it out! Click Here to Jump!

Tutorial on File/Image Uploading with Flash

Holy junk! This latest lesson took me forever to create. I started researching this around June 1, finished part 1 around June 10, and now here it is July 10, and I just uploaded parts 2 and 3. But in a weird way, delays are for the better, because usually they indicate a major change in terms of what I planned to teach vs. what actually got taught. And it's always the case that what actually got taught is double or triple what I planned on doing, because midway through I think "well sheesh, it would be great to ALSO show people this".

So anyway, this lesson is now in the can. And lets talk a bit about it. Part 1 of the tutorial teaches how to simply upload a file from a Flash interface (that is, browse your computer for an image file and upload to the server) and then that image gets displayed in Flash. The file doesn't necessary need to be an image file, but if its not a PNG, GIF or JPG then you can't do all the cool stuff to follow.

So Part 2 and 3 of the lesson cover these scenarios for what you MIGHT want to do with this application....

Scenario #1: Upload an image into Flash, and then the image becomes drag-n-droppable AND dressup-able. So the library can hold different items you might want to dress up the image with. The example file just uses a hat, but you can extend this to tons of different images. And once you dress up the image, the user can print out the final composition.

Scenario #2: Upload an image into Flash and a looping motion tween is applied. So the image kind of hovers. Again you can drag and drop the image, but this time a bullseye target appears and if you drag the image over top, a hitTestObject command will call a function to do whatever. In the example file the image kind of shrinks and "sticks" to the bullseye, and calls a URL to open.

Scenario #3: Upload an image into Flash and set a mask for it. So both the mask and image are moveable for fine-tuning, and you can then set / unset a mask for it. The mask can be any shaped-design.

Scenario #4. This time the user can upload two images from Flash which get used in an animation ( jibjab.com has the best examples of these animation ) And instead of using preset masks like the previous example, you can adjust handles (or control points) on the mask to get a better masking effect. And of course one image could be a head, the other could be a mouth, and then you can animate those however. The end example basically leaves you with everything you need to start keyframing a lengthy lipsynced animation. But keep in mind, the jibjab reference is just one possible thing you could do. You could just simply create a canned animation using someone's logo or whatever. Fade in, fade out, whatever.

So thats the tutorial. There's also a demo video on the File Upload with Flash sales page.

Caricatures Mega Course

Blender Basics 3

Character Design using Adobe Illustrator.

This lesson has two first's. A new instructor has stepped up to the mic: Mike MacNerland, AND this is CartoonSmart's first lesson with Adobe Illustrator (more to follow, I'm sure).

Here's the official "sales page" write up which will describe the lesson better than my rambling blog-speak....

This tutorial teaches character design using sweeping curves, unique angles, minimal shapes, and highly stylized, sometimes abstract forms. Cartoons like the Jetsons, and Flinstones are reference points for what this popular modern style grew out of. Ffor example look at the swooping continous line of Wilma Flinstone's hair, Fred and Barney's simple no-necked egg-shaped bodies, or the background art of the Jetson's signature curvilinear universe. A modern reference for this style would be shows like Dexter's Lab or Power Puff Girls that minimalized the classic Hannah Barbera look to the extreme. One major benefit of this simplified design style is that animation can be done much quicker than a more complicated realistic character. Guest instructor Mike Macnerland was brought into teach this lesson because of his background in the animation / illustration industry and his portfolio of character designs embody this re-invention of that classic 1960's cartoon look. The tutorial covers sketching characters for 30 minutes (with paper and pencil or on the computer with a Wacom), then tracing over his designs in Adobe Illustrator. This portion of the tutorial covers some of the basics of drawing with vector art in Illustrator. Mike also shares some personal tips to developing a career as a professional artist.

The total course time is 4 hours. Quicktime or Real Player will play the tutorial movies.


Still here? And interesting in buying. Please click here then.

Flash Components Lesson for Actionscript 3 !

Well this has been a heavily requested lesson, and one that I actually learned quite a bit from by teaching it...

"All About Components" (apt title right) It of course covers all of Flash CS3's User Interface Components. Which includes...

- CS3 Button Component - simple clickable button. This part also teaches how to change the text style of this component (and all others)
- CS3 CheckBox Component - simple checkbox, turns a value on or off
- CS3 ColorPicker Component -gives users a pallette to choose colors from. This part demos how to tint objects / text to that color
- CS3 ComboBox Component -basic pulldown menu
- CS3 DataGrid Component - displays tabular type data, This includes loading an XML file into a data grid (example file included)
- CS3 Label Component -simple label, often used with another component to describe it
- CS3 List Component -scrollable list
- CS3 NumericStepper Component - For clicking to step up or down a number at specified intervals
-CS3 ProgressBar Component - used for showing the loading progress of the current file or externally loaded content (examples for each)
-CS3 RadioButton Component - great for a multiple choice type quiz (includes an example quiz file, great for teachers)
-CS3 ScrollPane Component - scrollable container for content (images, movieclips, swfs, etc)
-CS3 Slider Component - simple slider device, could be used for moving objects onstages or changing values
-CS3 TextArea Component - used for a scrolling dynamic text
-CS3 TextInput Component - used for capturing user input
-CS3 TileList Component - perfect for loading a thumbnail gallery, or any series of full size images. Could be set as a grid or rows/columns
-CS3 UILoader Component - used for loading external image files (includes other swfs)
-CS3 UIScrollBar Component - used for a scrolling dynamic text, the example includes loading text from a .txt file online

During the lesson and in each example file we've demonstrated code for the most common uses of each component.
Trace statements in each file are used to output different example values that could be useful in your project. Of course watching the tutorial videos are your best learning source, but if you're in a hurry for a quick example of each component, these example files will be a handy reference and stepping stone for exploring each component's full uses.

Example files include a component already onstage and a runtime-created version of the component.

All code is written in Actionscript 3

Interested? Check out the sales page here.... All About Components

Awesome XML and Actionscript 3 Image / Swf Gallery

Learn to Progam an Actionscript 3 XML Gallery Compatible with Flash CS3

This 2 hour Quicktime tutorial for Flash will teach you the Actionscript 3 Code to load an XML File, which will bring thumbnails into a scrollable pane. Thumbnails then link to corresponding images or swfs which load into the main area of the Flash file.

Cool Features...

In the XML file you can easily change thumbnail paths, pictures paths, picture titles and descriptions using XML.

You can also swap thumbnail layouts. The example on the site uses a single vertical column and single horizontal row of thumbnails to free up more screen real estate for the main images. You can also create thumbnail areas of any number of rows / columns.

Add links to open other XML files which can load up alternate galleries.

Code taught includes...

Functions
Enter Frame Listeners
Mouse Event Listeners
Scripted Motion Tweens
Tween Finish Listeners
Object Dragging and Release
Scoring and Math logic
If Statements
While Loops
Variables
Positioning and Scaling
General Button Code
ScrollPane Components

Grab it here...XML and Actionscript 3 Image / Swf Gallery

Blender Basics 2: Setting up a scene.

Oops, I forgot to blog this one last month! Well you CartoonSmarter's probably predicted this lesson would be out anyway. Here's a rundown of what's taught...

This lesson teaches

Create a basic rig (a skeleton)
Skin a rig 3 different ways
Lathe using the Spin tool
Use the Screw tool
Use multiple textures
Extrude along 2d and 3d bezier paths
Place an image using UV maps
Use procedural textures on materials
Use boolean modifiers on objects
Use layers
Use groups
Append from other files
Create new screens
and more tips on working with materials, meshes, objects, lights, and rendering

The link you ask? Click here

CartoonSmart 3D?! What's this...

When long-time student, John Nyquist asked if I had plans to teach Blender lessons, I said "huh? Blen-what?". So John explained to me what Blender was (er, an unbeliveably FREE 3D Program) and then showed me some of his samples, I said "John, how 'bout YOU teach this course!".

So CartoonSmart now has a new instructor AND hopefully many more lessons to come with John behind the helm. The first Blender lesson is an obvious one, "Basics of Blender". And slated in the near future will be a few more basic courses in the various aspects of 3D. This first course got as far as Modeling and Shading. (see the pic below)

If anyone wants to visit John's site, and contact him with some lesson suggestions or kudos for stepping up to the plate on this new subject, his web home is http://www.nyquist.net

Also if you haven't yet downloaded and installed Blender, it takes about about 2 minutes. Seriously. Visit http://www.blender.org/ for the details.

And lastly, consider buying his lesson here! CartoonSmart tutorials never really make big fat profits, but we will be donating some percent toward the Blender developers in the not-so-distant future.

Thanks.

Actionscript 3 Darts Tutorial!

Darts anyone??

So I finally got around to creating an Actionscript 3 game. Actually I've got a few more in my secret stash, but this one is now in the "taught" category. So its a pretty typical Flash dart game. Grab a dart, release when the floating target is over a number, and hope you released in time. Some features I added (that I noticed were missing in most Flash dart games), you can control both the speed of the target area, as well as the location of the board. So by adjust some sliders (pic below)....

...you can control how the board moves across or up and down the screen.

Also I figured most people would want to take a shot at creating their own variation of the usual dart scoring. So the second part of the tutorial starts off by demonstrating the scoring for a "Round the Clock" dart game, then with a few slight modifications, I show how to add in a "501" scoring setup. All within the same game / coding framework, so when students want to customize the scoring, they should be well prepared for how and where they need to do that in the Actionscript documents. And speaking of which, this lesson teaches using all external .as files. Little easier to keep up with what code is where.

Anyway, here's a final pic of the game. But why the heck are you still reading this blog. Click anyone of these images to go actually play it, and consider buying the lesson.

Later playa's!

Create Slick Email Forms Using Flash

Just released, 2 Hour video lesson which teaches Actionscript 3 Flash Email Forms (with "Flash Cookies")

Watch Step by Step Instructions for Creating the Form shown on the sales page, with these key features....


- Locally Shared Objects (basically, Flash "cookies") are created to save the form for filling in later.
For example, fill in some of the fields in the sales page. Press TAB or "Save Form", then close the window and come back. Upon return the information filled in previously will appear. This is a good feature for lengthy forms that might extend over multiple swfs.

- Restrict input text to specific characters. Also error messages can prompt users about typing restricted text. You can test this out in the Order # field on the sales page. If you type letters instead of numbers, an error prompt will show up.

- Prior to submitting the form, required fields can be tested for accurate info. For example, if you exclude the @ symbol or a period in the Email field, the form will prompt you to enter a valid email address

- Learn to use four common Components: Checkboxes, Label Buttons, Pulldown Menus, and Scrollbars. Also these components can workhttp://www.blogger.com/img/gl.link.gif together, for example certain pulldown menu's will switch the checkbox to being selected.

- Scripted Motion Tweens can be added to make user messages slide in instead of appearing abruptly. You can test this out in the Order # field. If you type letters instead of numbers, an error prompt will slide / fade in.

- Input and Dynamic Text boxes are taught extensively.
- The PHP file to send the form is also included and can be modified as well

To grab this video tutorial on

Flash Based RSS Reader or XML Parser

Learn How to Use XML to Create a Flash Based RSS Reader - PLUS this tutorial includes a short lesson on exporting the RSS reader to Adobe AIR*!!

So how's this work... The Flash file will parse the RSS/XML files and use your own custom "shells" for displaying the information. You can populate the reader with your own RSS feeds are thousands more from other sites! If you aren't familiar with RSS, it stands for Really Simple Syndication, and in basic terms and RSS reader will display a site's new articles and provides quick ways of reading them without visiting the actual site itself.

The tutorial also teaches how to make the Flash reader display HTML tags, for example the reader (on the sale page) displays pictures because the source feed (Yahoo) includes image tags.

Example Flash files are provided for three readers (essentially templates), but the design possibilities are limitless. You choose how it can look to fit your site's branding.

*This Tutorial also includes a separate movie file which describes how to update your version of Flash CS3 for creating an Adobe AIR application. Ultimately this same RSS reader (or any of your previous Flash files) can be published as an installable application for your desktop

Check out the full example for this RSS Flash Tutorial here.

CartoonSmart Bulk package

We're offering a rare bulk package price for EVERYTHING on the site... Here's the link to grab that offer.

Actionscript 3 Video Player Tutorial (using XML)

Learn to program a Flash based FLV video player using Actionscript 3. The tutorial and features list includes...

-Dynamically load video locations and details from an XML document. Easily update your player without republishing by simply editing file names (like "video1.flv" ) in an XML document

-Create a scrollable playlist with details about each video and preview thumbnails. Your video details aren't limited to those in the preview example above, use as few or many as you choose.

- Use the Fullscreen button in the bottom right of the player to maximize the viewer's experience Viewers can kick back and watch your video take up their entire screen space. Hitting ESCAPE exits this mode.

- You always have the option to change the visual appearance of the player. Tint it, stretch it, brand it, add sparkles and unicorns! Do whatever you want to the player design.

- Use your choice of FLV components to control the video, without relying on preset skins. Components (like the PLAY button, PAUSE button, etc) can be added individually and positioned wherever you choose.

- Cue Points can be embedded in your FLV files to trigger events in your Flash file. Actionscript can listen out for specific points in your video and then trigger an event when that point occurs.

In a Hurry?.... The first hour shows how to create a Flash video file, apply quick playback skins for it, and then program a simple playlist. The next two hours demonstrate how to create the example above, which uses XML and sets up a scrollable playlist.

Check out the full example and tutorial details here

New Animation FX Tutorials!

This latest lesson is a hodge podge of various Flash animation effects. The list includes, how to create (and animate)...

Smoke Ring Explosions
Crazy Frenetic Highlights (think Ren & Stimpy style highlight)
Electricity Beams ( think Ghostbuster beams)
Spiky Explosion Blasts
Spiral Trails (could be used as a gun shot after-effect)
Glamourous Lighting ( think over-exposed twinkly lights )
Impact Smoke Puffs (think piano-dropping after effects)
Club Lights or Police Lights (blazing spiky lights)
Gloomy Mist / Metallic Liquid (could be good for a ghosty look)
Water (check out the image below)




Check out the site for full details and animated versions of each Flash effect.

Flash Lite Basics Tutorial!

Here's what's taught in this Basics of Flash Lite Video Tutorial...

Introduction to Flash Lite and Adobe Device Central
Flash Lite Navigation and Buttons
Changing the Focus Rectangle Color
Key Listener Events for detecting the phone keypad, softkeys, or numeral keys
Static, Input or Dynamic text for Flash Lite
Programming Scrolling Text Boxes
Common FSCommand2 script.
Getting Phone Info
Thumbnail Galleries in Flash Lite
getURL for Connecting to
Websites or Image Downloads.
getURL for Sending SMS, MMS, Mail or Dialing a Number
Dynamically Loading Text or Images from a website.
And Tips on Mobile DevelopmentBest Practices

Everything taught will work with Flash Lite 1.0, 1.1, 2.0, 2.1 & 3.0


And in case you don't know what Flash Lite is...

Using Flash CS3 Professional or Flash 8 Professional, you can publish content for Flash Lite 1, 2, or 3, which can be transferred to a mobile phone as a standalone application, wallpaper, screensaver or viewed online if the phone can run Flash Lite player within it's web browser. Currently the most common use of Flash Lite is as a standalone application on the mobile device. This means your published .swf file would ultimately get transferred to phone either by web download or by connecting the phone to a computer via bluetooth or cable. Each phone might have a different way of transferring files to it but testing your finished .swf on the actual device is not necessary for this tutorial. Flash CS3 Professional includes Adobe's Device Central which emulates hundreds of phones to test on. Flash Professional 8 also has an emulator but not as refined. It is beyond the scope of this lesson, or any Flash tutorial, to include instructions for transferring the .swf to every possible cell phone. So if you are interested in testing the final .swf on your own phone you'll need to consult your phone's included documentation for transferring files to it.

Advanced Shading Techniques in Flash

Learn Advanced Shading Techniques using Flash Professional 8 or Flash CS3 Professional. Watch the 2 Hour videos and practice along using some of the provided unshaded vector art. By the end of the video, you should be able to create exactly the same image seen in the example.

New! Dynamic Scrolling Navigation for Actionscript 3 and 2

One of this month's new Flash lessons is a classic navigation device. Yep, ye ol' scrolling thumbnail nav. This has actually been a past lesson on the site (dating back to Actionscript 1!) Among the improvements, this lesson teaches both Actionscript 2 and Actionscript 3, with a little flip flop back and forth between the two, so you Actionscript old-timers can see some of the noteable differences between the two languages.

Onto the cool features...

-You can dynamically load thumbnails and larger-sized images from external folders. Simply tell the Flash file how many files to load,(like thumbNum = 10), and a base file name (like "universe.jpg") then publish and upload!

-This main Flash file can load images (JPG, PNG, GIF ) or other Flash files (.SWF)

-Thumbnail links can be setup to jump to another frame, another URL, or load larger images (see the example by visiting the site). Each thumbnail link can run a different Action. The example above only loads images, but you can program links to do anything.

-And of course, it's completely customizeable. Easily change thumb sizes, scrolling speed, mouse-over areas, colors, etc.

And as with all CartoonSmart tutorials, remember that you're buying training, not just a template. Granted, you of course get all the example .fla files included with the videos, but the main focus here should be the training. By the end of the videos you'll know exactly how to modify everything.

Here's the link to sales page Dynamic Scrolling Navigation for Actionscript 3 and 2

New! Carousel Navigation for Actionscript 3 and 2...

Isn't the internet cool?! Instead of suffering through a straight left and right navigation, we can now make thumbnails that circle around in an orbit!! Okay, I'm poking fun, but I really do enjoy this navigation technique. Its kinda niche, and probably in 10 years people will say "oh thats so 2007", but screw it, its cool now! And for photo galleries it definitely adds a little spice to just clicking from one image to the next.

Like the other Flash lesson this month, both Actionscript 3 and Actionscript 2 are taught. This time though the languages are separated into two different zip files. So no flip-flopping back and forth in the video. Which as it turns out, I kind of enjoying teaching that way. I feel like the learning sinks in a bit more. But I guess I'll find out what you, "the masses", like most later.

Alrighty so what exactly is so cool about this carousel Flash navigation tutorial...

-Thumbnail links can be setup to jump to another frame, another URL, or load larger images.
-The thumbnail orbit can optionally be tied into the mouse location to create a 3D effect (see the example on the main site)
-You can change the number of thumbnails orbiting (duh) and instead of thumbnails, you can use anything. Vector art, whatever.
-Thumbnails can be faded or blurred out in the background (optional if using Flash 8 or CS3)
-And of course, its completely customizeable. Easily change thumb sizes and orbit, scrolling speed, mouse-over areas, colors, etc


The sales page is here.... How to Program a Flash Rotating Carousel Gallery for Actionscript 2 and Actionscript 3

New Lesson! Logo Design (using Flash)...

This lessons comes on the heels of a good friend of mine getting offered $1500 just to "retool" a logo. Not even create one from scratch, but just to finesse it some. Now don't start salivating yet, and imagining yourself in a pool full of money just from creating a couple logos, but the point here is obvious... logo designers get paid well! As they should be. Corporate "identity" and brand recognition both rely heavily on an effective logo.

Suppose the Deli around the corner offered you $250 to design a logo. Not bad right. Probably it'll take a couple hours and if so, thats a good hourly rate. Now what if some new company specializing in micro-brewed beer was starting up, and wanted a logo. Would $250 be fair. Probably not. You'd be creating something that will be used heavily (on every beer bottle probably) to sell the product. So how a logo is going to be used is fair game in determining a price. And obviously too, a brand's logo will be scrutinized from everyone at the company from the CEO to the janitor. So you could expect plenty of revisions no matter how great your first draft is. So lets change the price tag. Is $2500 fair? You get to decide. I just sell the training.

Part 1 focuses on the basics of flash illustration, while laying out different things that can be done with single letter logos or logos using a company or person's initials.

Part 2 gets a bit more advanced in terms of shading the logo and some other Flash tricks common to this type work.

Part 3 (my fav) deals mostly with abstract shapes, which usually integrate into the logo or just sit beside or near a logo.

And where can you purchase this fine tutorial. Right here.