Flash CMS: The Sequel! And an Intro to Classes Tutorial!

What a week! Star Trek and the Lost finale are to blame for these lessons not coming out yesterday. Sad right. Entertainment first.

Before I get into the details below, here’s the discount link for this month’s tutorials. Just remember, if you are reading this sometime in the not-so-distant future, that discount page probably will have different stuff.

Flash & CMS 2!

This month I taught the followup course to my first Flash & CMS lesson, which was all about client updatable text, so this tutorial teaches the next steps to update images too. Vaguely titled Flash & CMS2. Which good news, is a little easier in some parts, since beside the actual client login part, we don’t need to use a database. The image names aren’t updated each time the client changes an image, just the image data.  So all Flash needs to know is the image location. What’s the point?  This makes the finished files for this lesson VERY easy to duplicate, change slightly and use with new images. For example, you just need to change a few variable names in an array like… picArray = [“startrek.jpg” , “losties.jpg”, “jacob.jpg”];  and then upload some initial jpgs with those names, and from then on your client (or whoever) can choose any file they want to upload, but unbeknownst to them each time they are just replacing files with those same original names.

Hey wait. Why am I explaining this in text, when I uploaded a whole demo video about this lesson?  Well, if you like reading. The tutorial also sets up a few example files. The first one puts a “Replace Image” button overtop every image in the file. See below…

Flash and CMS example of uploading images

The next example, simplifies things a little and just uses one Replace Image button with a number picker component ( see below). The nice thing about this setup is that each time you don’t need to rearrange a bunch of buttons, and in this example all the images are in an animated sequence within one movieclip, so you really need to have a button that lets you choose which image in the sequence is the one to replace. And you can see in the top right, the client is being told which image during the animation is currently being shown.

Flash and CMS tutorial, example image

Finally the last example uses a tile component to display the images instead of just movieclips on the timeline. Using a component is nice because you could do a 1 by 1 image grid (like the one below) or choose to show 4 images per column and 2 rows, or whatever. It can basically become a thumbnail grid. And I’ve provided the code to make the images clickable and open their full size versions.

Flash & CMS 2: example imageAnd hey are you wondering who took all this great images, my friend Vanessa snapped all these. She’s a great photographer but doesn’t have a website, so if you want to contact her for a project, contact me I guess.

Intro to Classes in Actionscript 3…

My French doppleganger, Manu D’Macedo, took the helm on this course. This is his first Flash tutorial for CartoonSmart, but he did a bunch of the After Effects lessons. To put this in Star Trek terms, he’s like my Chekhov…er, or Scotty. He’s definitely not Spock. Anyway, I just got around to screening this tutorial the other night and its excellent.  I really enjoy his teaching style but more importantly, I’m NOT a big classes and packages coder. I like getting greasy with the timeline and making the gears of Flash grind through code and drive in the mud, and using Classes in Flash is like going through the car wash and making the tires shine like new when you’re done.  Its definitely a different way of coding in Flash if you’re used to how I do things, but in the end, its still Actionscript 3 so everything should feel slightly familiar. Like the alternate timeline in Star Tr-,ahhhh, nevermind.

Anyway, check out this course too.  And remember for a limited time (< sales-y sounding), both lessons are just $15!

Intro to Classes in Actionscript 3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s