Weekend Wrap & 10 tutorials for $10
July 31, 2009
Kelby’s Worldwide Photowalk:
The week kicked off with some serious editing and organizing of my photos taken during Scott Kelby’s 2009 Worldwide Photowalk. I am still waiting to see if my work places in the top 11 contestants (there was about 32,000 of us so my chances are slim to say the least), but even if I don’t it was a blast and I got some great shots!
If you have not seen the 18 I uploaded to Flickr, check them out by clicking here!
Washington D.C. Speaking Presentation
I have a bit of work cut out for myself over the weekend. Tuesday evening I will be in D.C. giving a 2 hour presentation on Composite Backgrounds and Selecting Hair and then combining the Model and the Composite Background to actually make a decent little composite. It ought to be pretty fun and last time I gave a presentation I had an absolute blast so I am looking for more of the same! I wish I had an address I could give you guys, but I don’t even have that yet. All I know is it is an Italian Restaurant and I get dinner, sounds nice!
It is a monthly meeting for the PPA folks down there, but I am pretty sure the public is invited… I’ll post a quick blog and tweet with an address if there is any interest in meeting up down in D.C.
That HDR course feels like it is moving like Molasses!
For everybody waiting for the full HDR course I am sorry it is taking as long as it is! I am pretty well certain I will have it done by the end of August. I actually just ordered the Kodak Zi6 HD mini Camera after narrowing my search down to that and the Flip MinoHD. Because of that I will probably have a segment of two where it is me and my camera in the field setting up the shot(s) we will be stitching later on in Photoshop/Photomatix. It will be a great multipart tutorial course and I will give a couple teasers to the course before it is launched so you guys can get a feel for what is involved, but I have the feeling a whole bunch of folks will really like it.
What!? Kodak Zi6 over the Flip MinoHD!!!???
That’s right, nearly all the same features as the Flip, but the video quality is much sharper and nicer, it is about the same size so I can keep it in my pocket, and the screen appears to be a touch bigger as well, oh and it’s roughly half the price ($125 on Amazon). I may have a better idea of what I am getting into once I actually get the camera and play with it, edit a video, and upload it. (Image Courtesy of Amazon.com)
WordPress.tv
Wow, I didn’t realize WordPress had a bunch of video… I literally ran into this, this morning. I may have a more detailed explanation of what I see later on. For now it’s time to do a little exploring, or check it out yourself: http://wordpress.tv/
Deals N’ Steals Newsletter Saturday or Monday…
As many of you now know on the 15th of each month I put out a newsletter with several sweet tutorials and on the 1st or 2nd of every month I send you guys a great deal. This month I will give you a code you can use when you checkout through my site which will give you tutorials for $1 each when you purchase 10 or more! Normally 10 tutorials would be $35.00, but here 10 is a mere $10. I should also give you this warning because I am getting ready to raise the prices for my videos a little bit, so this is a doubly sweet deal! If you have not subscribed do so here: http://tutvid.com/newsletter/ you will also get some sweet files!
5 Cool Websites I have run into in the last week
July 30, 2009
I have about 3 different web site projects I am working on right this minute and whenever I am working on a graphic related project for a client I am always cruising the web looking for inspiration/procrastinating (I never procrastinate, never!…yea right) and I am always running into websites and bits of design that knock me off my feet. Check out a few of those sites that I have run into this past week.
Enjoy! I hope that brings some great moments of inspiration to your design! Which site do you like the most?
Upcoming Dreamweaver Tutorials Notes
July 29, 2009
With a couple pretty cool Dreamweaver tutorials on there way I wanted to throw a simple blog post with a couple little useful bits of code for you guys. Feel free to share useful bits of code with everyone here!
Button Class:
I like to create my sites and one of the things I always try to do is create a CSS class I can apply to anything that is a standalone button (outside of my main navigation for the most part) and give it a certain look and also a rollover, here is a basic class we could apply to a submit button of a form to make it blue with white text and on rollover the colors basically flip:
.buttonClass {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFF;
background-color: #09C;
height: 25px;
width: 80px;
border: 2px solid #069;
}
.buttonClass:hover {
color: #09C;
background-color: #FFF;
}
Now whenever you apply that class to an element it will automatically be targeted by the next class rule with the pseudo-class selector.
That technique can be used to target images and give them a border or some margin and make them react to a rollover.
Centering a Div:
I have covered centering a div a bunch of different times, but you can never let people know how to do this enough because pretty well everybody needs to know how to do this. Centering your div is very easy, it just maybe is not quite the way you would have thought it is done. All you need to do is give your div an ID, I am using the ID “wrapper”. The rest is CSS:
#wrapper{
width: 200px;
margin-right: auto;
margin-left: auto;
}
You have just centered your div, go ahead and set the width to whatever you like!
Mix it Up!
Don’t be afraid to target different selectors with your CSS and create rules for exactly what you need. For instance:
#wrapper p .specialText
Would target any paragraph text within the “wrapper” div, but only the paragraph text that has the class style “specialText applied to it.
That’s all for today! Remember to use HTML to create “hooks” to “catch” the CSS style you create and as you gain experience using CSS and HTML you will quickly find yourself creating bigger, better, and more visually interesting, and interactive sites.
Tweening with Actionscript 3.0 Flash Tutorial [Written]
July 28, 2009
Here is the first transcribed tutorial, all the and, uhs, and everything else! Hope you find it useful for reference! Leave me a comment or two with your suggestions or ideas, PLEASE!
Tweening with ActionScript 3.0 Flash Tutorial
Uploaded to YouTube on February 12, 2009
http://www.youtube.com/watch?v=98J1H8MqvTg
TRT: 42:31
Transcribed by: Brian (Avocation Design)
0:11
Hello, and welcome to this video tutorial brought to you by tutvid.com. Today we’re going to take a look at doing some basic tweening using ActionScript 3.0. Now, I say basic, but we’re going to get sort of a little in depth. I’m going to show you a couple little cool features and things like that. And basically, by the end of this video, we’re going to have created something similar to this right here, alright, this sort of media player flips in and you see the little reflection fade in and then the text “go way” pops up, and this arrow begins animating, basically pointing and saying “hey, hit go away,” hit “go away,” this stuff kinda fades away and disappears. The arrow however remains because at the end of this entire tutorial, maybe that’s something you yourself can go in with your newfound skills and knowledge and make that guy fade away, disappear out into nothingness. So all of this animating or all of this tweening, I should say, all of it is done using ActionScript, so it’s very cool and uh, let’s take a look at what we need to do to get started.
1:10
The first thing is you’re going to need to go to Tutvid.com and select the resources button at the top and navigate to the project files section of the site and download the files for tweening in ActionScript, or excuse me, tweening using ActionScript 3.0. So that’s what you want and basically all it is is this soundplayer.png. You take that PNG, drag it, just drop it right into Flash, and it will import that file, I believe, yes. It’s importing. There we go. And now that it’s imported, I’m going to place it roughly in the center of the stage. Don’t worry about exact placement, we’ll take care of all of that in a minute.
1:48
But now, I need to convert this to a symbol, so I’m going to go Modify–> Convert to Symbol, and I want to convert this to a movie clip. So, I’m going to set Type–> Movie Clip. I’m going to set the registration point to the center, and I’m just going to call it mcPlayer and hit okay. And there we go. I wanna make sure I select this now and give it an instance name of player_mc. By the way, I like to give my instance names _mc, _txt, _btn, depending on what it is, because all of those are like cues in ActionScript and when you begin scripting using instance names like that, ActionScript actually helps you script by providing you with little tooltip pop-ups, saying “hey, you’re working with a movie clip_mc, so you’re working with a movie clip, so here are some things that maybe you’re looking at doing, so really it gives you a better idea of the things you can do in ActionScript, some of the, you know, the things, Flash is just really going to help you out, so it’s a good thing to do, a good habit to get into.
2:42
Next, I’m going to click to open up my timeline here. If the timeline isn’t open, you can go to Window –> Timeline. Note the hot key, Command or Control, Alt or option + T. And I’m going to create a new layer. I’m going to call the layer “AS” for ActionScript. You can name the first layer if you feel the need to, and I’m gonna come up to the ActionScript layer, and we are now going to begin coding our very first tween.
3:07
So, to code this tween, just select that keyframe, hit F9 to open up your actions panel, F9 is that hot key, and the first thing we need to do, note we’re working in ActionScript 3.0 by the way, I know I have it all over the place but just remember that. So, we’re working in ActionScript 3.0. The first thing we need to type is the word Import and then space fl.- now notice when I the dot, see this little pop-up menu, this is that pop-up menu I mentioned a few moments ago, going to have _mc and all that, so here I can see transitions, I can just hit enter. Yes, I want transitions, fl.transitons.Tween, and that’s tween with a capital T and then just place a semicolon after that.
ActionScript:
import fl.transitions.Tween;
3:45
We also want to import space fl. again, we’re looking for transitions, .easing, see there easing shows up as well- . and we’re just going to put an asterisk, that’s shift and the 8 key, so an asterisk, that’s just like a wild card selector, saying take everything that’s in this easing folder. And then place a semi-colon after that. Next we’re going to create our first very tween now that we’ve imported the classes, these are the classes that we’re going to be using here in our actions. So, I’m going to say var, we need to create a variable that’s going to hold our tween, so var, I’m going to call this playerFadeTween and it is of the tween data, data type, excuse me. That’s tween with a capital T by the way, and it is equal to a new instance of the Tween class, we’re going to say new Tween, open parentheses. And here within the parentheses, the first thing we need to do is place the instance name of the object we wish to tween. In this case, I happen to know it is player_mc. I’m going to place a comma after that.
ActionScript:
Import fl.transitions.easing.*;
var playerFadeTween:Tween = new Tween ();
4:50
The next thing we wanna talk about is what property of this said object do you want to tween. I’m going to put this in parentheses, you need to put it, not parentheses, excuse me, quotation marks, that’s double quotes. I’m going to put inside of these two quotes that I just typed out. I want to tween the alpha, that’s the property I want to tween, comma, and the next thing I want to say is
Strong.easeOut.
5:25
And next we’re going to say comma, and now we’re going to say what’s the starting point, if you’re tweening the X or Y of something, this would be the starting position, but we’re going to, in the case of alpha, we’re talking the starting alpha, and here in ActionScript 3.0, alpha goes from 0 to 1, and all of the decimals in between are all of those, you know, varying levels of alpha. So, I’m going to start at 0, because I want it to fade in. And we want it to start at zero and we want it to go to 1, so we’re going to say 1 comma. And next is the duration, so I’m going to say 3, and typically you would think milliseconds, but I’m going to write true after that, basically just to tell Flash that we’ere working in seconds here. So, I’m going to say true after I say 3, so it’s going to be 3 seconds, close parentheses, semicolon. I’m going to hit enter/return a couple times, and I’m going to hit F9 to close my actions panel and command + return or control + enter to test this, and you can see voila, our very first tween using ActionScript 3.0. Beautiful.
ActionScript:
var playerFadeTween:Twwen = new Tween (player_mc, “alpha”, Strong.easeOut, 0, 1, 3, true);
6:20
So, now that we’ve done a simple tween, let’s add another tween to this tween. How do we do that? Well, select that keyframe, open up your actions panel again, that’s F9 hot key. We’re going to create another variable. Every tween you do has to be contained in its own variable.
So, we’re going to say var and this one we’re going to call playerRotateTween, because we’re going to rotate that player. Again, it’s of the Twen data type, and it’s going to equal a new instance of the Tween class, open parentheses, and you can see here it’s giving me that little tool tip pop-up, basically saying first, name you object, which is player_mc. We want to edit the rotation property. And by the way, you can find out all the properties that are available for you to tween and edit by running a quick search through the help files. So, I’m going to say rotation and again, we’re going to just ease this out, Strong.easeOut.
7:19
And we want this rotation to start, well, where do we want this to start, let’s think. Maybe we want it to start 360 degrees and rotate to zero. We want it to finish at the zero point because that is, you know, the level where it is now. So we’re going to let it flip an entire, a full rotation. So, we’ll start at 360 and we’re going to flip to 0, which is its normal position, and duration 3 seconds, and yes in fact, those are going to be seconds, close parentheses, semicolon. And let’s check this out. Command + return, control + enter, and you can see, rotates right in, and eases to a nice stop.
ActionScript:
var playerRotateTween:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 360, 0, 3, true);
7:55
So, let’s add to this though, let’s make it sort of move, let’s do some X and Y tweening. Let’s bring it in from offstage somewhere. How do we do that? Well, again, creating a new tween, var and we’re gonna say, playerXTween, and this is a tween. It’s gonna equal a new tween, open parentheses, it is the player_mc, comma, and we are going to edit the X, sou you can see that the property we are tweening, I shouldn’t say editing, tweening, is going to be the X property of this object, comma, we again are going to say strong, try to spell strong correctly, easeOut.. By the way, easeOut is with a capital O comma. We’re going to start this guy way over here off stage, let’s say -200 is where we’ll start him or maybe, you know, what, we’ll go -250, push it a little further off stage.
8:53
And we’re going to bring him in and drop him at 200, and this also will go on for 3 seconds, and yes in fact, those are seconds we’re talking about, and place a semicolon right there at the end. Let’s just command + return, control + enter, check this out. You can see it flips right in from offstage, and you can see that it now sort of shifts over to the lefthand side of our stage because it’s going to the 200, you know, it’s going to the 200th pixel essentially on the left instead of wherever we initially had it which was, if I select this guy, we’ll be able to see. Right now, it’s on X 274.5 okay. So, we’re only bringing it to the 200th. As a matter of fact, we may as well just select x there and set that to 200. Or, for the sake of something I’m going to show you later on, I’m going to leave it at approximately 275.
ActionScript:
var playerXTween:Tween = new Tween (player_mc, “x”, Strong.easeOut, -250, 200, 3, true);
9:37
I’m going to select that keyframe on the ActionScript layer to bring up my ActionScript again. I’m going to copy this entire line of code to save a little bit of time, copy. Go down to the next layer, paste it right in, and we’re going to call this playerYTween, and it’s gonna be the player_mc. We’re simply going to change the property that we’re tweening to Y. Now, we want this guy to start at negative, let’s say -150, and maybe we’ll bring him right into 200, too, and make that extend over the course of 3 seconds. So, command + return, Control + enter, and you can see it drops in nicely from that top left corner, seemingly from nowhere. Very nice. So, we’ve just successfully created our first multiple tween tween.
ActionScript:
var playerYTween:Tween = new Tween (player_mc, “y”, strong.easeOut, -150, 200, 3, true);
10:24
So, the next step in tweening is we want this tween, when it’s finished, to trigger another tween or we can simply just say when this tween finishes, something else is going to happen. In this case, I want a nice little reflection to appear underneath this player. So, how do we do that?
Well, there’s a couple ways we can do it. We can either use something called a tweenEvent or the tween event class. I don’t really want to do that. We might play with that a little later on. But for now, we’re going to use a timer. The reason we’re going to use a timer is because the timer, number one, is my preferred method of working. I love working with timers when it comes to things that have to do with time. Very convenient, huh?
11:00
Back on a serious note, timers or a timer is going to be perfect in this instance because all of our tweens are simply three seconds, so we can just set a timer for 3 seconds and say, look, after 3 seconds, do this. So that’s what we’re going to do.
But before we do anymore coding- move the actions panel out of the way- we want to select this player, copy it, we need to make our reflection.
11:24
Create a new layer, I’m going to hit command or control+shift V to paste that guy right in place. Make sure he’s selected, and go to Modify–> Transform –> Flip Vertically. I’m just going to drag him straight down, sort of like that. Gonna move him down a little more, sort of position him roughly where I want him, just sort of like that, perfect. You could also mask it to the stage. For the sake of time, I’m not even going to take the time to mask it. I am, however, going to take the time to name this layer, Reflection. And I want to select this movie clip and make sure I change the instance name to reflect_mc. So, we’re now going to be able to reference this separately using ActionScript. Wonderful.
12:04
I’m going to deselect that, select my actions keyframe, bring my actions panel back into view here, and let’s take a look at what we have to script.
So, as I mentioned before, we want to create a timer. I’m going to come over here, add a couple lines of code or a couple lines here that will allow us to add a couple lines of code. And we need to create another variable.
12:25
I’m going to call this one var playerDone, you know, basically saying the player is done tweening in so, but really these variable names can be anything you want them to be. I’m just choosing name that I think are fitting. So, playerDone, and this is a timer and it’s going to equal a new instance of the timer class, and we’re going to open up the parentheses, and the two things you need to specify with the timer are how many, excuse me, how quickly, do you want this timer to cycle. You know, every how many seconds you want it to cycle and trigger something and how many times do you want it to do that. So, I’m going to say 3,000 because here we’re dealing with milliseconds, so that’s three seconds and comma, and I only want it to cycle once. I only need to know that the player has come in one time. If you want this play- excuse me, if you want this timer to repeat itself, you could do 2, 3, 4, 5, or you can leave it blank, and it will go, you know, an infinite number of times, just as long as the user has this Flash movie open.
ActionScript:
var playerDone:Timer = new Timer (3000,1);
13:19
So, we’ve created our timer. The next thing we want to do is add an event listener to this basically saying, you know, trigger X function everytime this timer cycles, which is only going to be once.
So we’re going to say playerDone.addEventListener- you can see my little drop down menu appears- I’m going to say addEventListener, and we’re looking for a TimerEvent.TIMER, and that’s in all caps, comma, and now we name our function. So, I’m going to call this function, timerDone with a capital D and then F. So, timerDoneF, timerDone Function, and that’s with a capital F, close parentheses, semicolon. And the last thing we need to do is just say hey timer, I want you to start recording time, so I’m going to say playerDone, the name of our timer, .start. Open and close parentheses, semicolon. It’s important that you put those open and close parentheses in there; otherwise, it will not work.
ActionScript:
playerDone.addEventListener (TimerEvent.TIMER, timerDoneF);
playerDone.start();
14:11
So, we’ve just created our first timer using ActionScript. Great. That’s awesome. It’s going to run after three seconds, it’s going to wait three seconds, and it’s going to run one time, essentially executing this function here once. Perfect. That’s exactly what I want.
14:24
And the next thing we want to do is create that function that’s going to tween in our reflection. So we say function timerDoneF with a capital DR, open parentheses, I’m just going to use the letter e and colon, and we’re going to say TimerEvent, close parentheses, colon and the word void, open curly bracket, enter/return twice, close curly bracket and the up arrow key. Now here, we’re going to say var, and this is going to be the other tween or another tween, so I’m going to say playerReflectTween:, it’s of the tween data type, so you’ve got to put a colon between your tween and the data type. Space equals space, new Tween, open parentheses, now the object we’re working with here is reflect_mc, comma, space, and the property is going to be the alpha, so alpha, and comma again. We want this to ease out as well and again, spell strong correctly, Strong. easeOut, and we don’t want anything after that, so I’m going to say comma, and after that, as in that little parentheses that showed up, I don’t want that. I want it to start at zero and I only want it to go to maybe about half, 50 percent alpha, so 50 percent alpha is about 0.5, so I’m going to say, comma, 0.5, comma. And we want this to take let’s say 3 seconds, we’ll say 3 seconds, and uh, true, goes there on the end again, close parentheses, semicolon.
ActionScript:
function timerDoneF(e:TimerEvent):void {
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
}
16:02
And we’re going to add another line of code beneath this. This essentially is just going to say playerDone.removeEventListener, and we just want to say TimerEvent.TIMER, wup, get it all caps, TimerEvent.TIMER, timerDoneF is the function, close parentheses, semicolon. So we removed that event lister so we don’t have extra actionscript code running just eating up overhead CPU, which you know, one little event listener no big deal, but it’s just good to get in the habit of doing that, so your bigger projects don’t end up killing users’ computers.
ActionScript:
function timerDoneF(e:TimerEvent):void {
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
playerDone.removeEventListener(TimerEvent.TIMER, timerDoneF);
}
16:41
So now that we’ve done all this coding handywork, let’s take a look at what happens. Command + return, control + enter, and you can see right off the bat, we have a problem. The reflection does not line up with the player, and the reflection is there, then it disappears and fades in. So, this is a good thing. This is a good thing.
And this is, remember earlier when I mentioned I wasn’t going to change the X of our player, well, it’s because I didn’t really need to then. But really because I want you to see, you know, the difference here, how our reflection is offset, and how we really need to make sure that we shift this reflection over and keep these things in mind while we’re designing our Flash animations. But also, how do we get rid of that initial, well, let’s take a look at it again, see, the reflection is there, and it’s not even half alpha, that’s messed up. So, we need to make that not show up. How do we make that? Well, let’s first just select these guys and set their X to 200 excuse me, and 200. That fixes the one problem of our reflection and our player being offset incorrectly. So now that’s fixed, let’s go back to the ActionScript panel, and take a look at how we can fix this reflection showing up early.
17:44
I’m going to come back up to the top, right beneath the import bit of code. I’m just going to type reflect_mc., now you see, because I have _mc, I get this whole drop down menu, I can basically scroll through here and find what I’m looking for. I’m looking for visible. So, there’s visible, double click it, and then hit space equals space false;
ActionScript:
reflect_mc.visible = false;
18:06
Now when I do this, I make this reflect movie clip invisible. It’s not going to be there. The problem is now when this function executes, it still is not going to be there. So, I need to come inside this function and say look, when you go to execute this function, that reflect_mc.visible, well, just the reflect_mc., the reflect_mc, excuse me, is the move clip that we’re targeting, the visibility of it is what we are, you know, talking about. So, we’re going to say visible and at this point, it will become visible, so true. So, it equals true. The visibility of reflect_mc is true when this function is executed and only then.
ActionScript:
function timerDoneF(e:TimerEvent):void {
reflect_mc.visible = true;
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
playerDone.removeEventListener(TimerEvent.TIMER, timerDoneF);
}
18:50
Now that we’ve done that, let me close up the actions panel, let’s check it out and see if we’ve rectified our problems. In fact, it looks likes everything is working. Wonderful.
So now that we’ve done that, let’s create a button. We’re just going to create a simple text-based button, basically that says “go away, get all of this junk off of my screen, take it away, toss it, I don’t want to see it anymore.” But don’t just make it blink go away, I want you to fade it out nicely because I, I still care about it a little bit.
19:17
So, we’re going to create that text. I’m going to create a new layer to place the text on. I’m just going to name that layer Txt, and I’m going to grab the text tool and we have the text tool, there we go. I’m going to type the words “Go Away” and throw an exclamation mark on there to really prove a point. And I’m just using a Verdana bold, 24 point font face, light blue, no big deal. Matter of fact, I sampled this light blue right from the screen of this little music player. So now that I’ve done that, I just want to select this guy, hit F8, which is the hot key to convert it to a symbol. We’re going to convert it to a move clip symbol, so we’re going to say mcbtn, so movie clip button, and we’re going to hit okay. And that’s gonna sit right there. We want to give it an instance name now that we’ve converted it to a movie clip, so I’m going to call it fadeOut, that’s out with a capital O, fadeOut_mc. And now that we’ve done that, we’re going to attach an event listener to this button, so everytime I click it, it executes a function.
20:15
Come up to the ActionScript layer, choose that keyframe right there, that guy, hit F9 to open up your actions panel, and I’m going to move down a couple. And we’re going to keep moving along, a nice 20 lines into our coding project here. So I’m going to say fadeOut_mc and watch this, dot, I can just move right down, just double click addEventListener , so I don’t have to worry about typing all that long, uh, series of words out. And what we are listening for is a MouseEvent, specifically a CLICK, and click has to be in all caps, comma, and what function do you want me to execute. We’re going to create a function called fadeOutF, close parentheses, semicolon.
ActionScript:
fadeOut_mc.addEventListener(MouseEvent.CLICK, fadeOutF);
20:58
Move down a couple more lines, let’s create that function. We’re actually not going to put anything in that function right now, so I’m just going to type function, open parentheses, and this is a mouse event, remember before we had a timerEvent, close parentheses, colon, void, open curly bracket enter/return twice, close curly bracket, up arrow key. Now, in here, I’m just gonna basically just place a simple trace statement so, you know, we can see that it works. I’m going to say, “yep an empty Function!” And there we go. Just make sure you place a semicolon at the end of that line of code. Let me close out my actions panel, hit command + return, control + enter. Let’s test this out.
ActionScript:
fadeOut_mc.addEventListener(MouseEvent.CLICK, fadeOutF);
function fadeOutF(e:MouseEvent):void{
trace(“Yep an empty Function!”);
}
21:34
It’s telling me that I have an error. Let’s go back in and check it out. Go back to the timeline, select that ActionScript layer, select that keyframe, and something’s going wrong here. Ah, yes, a very important thing. It helps to have the name of the function in there, so just throw that in there, fadeOutF, and now let’s just check our code. Now it contains no errors, lovely. Command + return, control + enter. And you can see we’re not fading in the “Go Away” text or anything right now. We may do that later.
22:05
And, uh, when I click “Go Away,” my output panel right here, “Yep an empty function.” Alright, uh great. One thing you may notice when I rollover “Go Away,” I don’t get that finger that basically says “this a button, you can click it, click away.” So, I want to change that and, uh, let’s take a look at what we need to do next. Go back to the timeline here.
And two of the things we’re going to do right off the bat are, number one, make the button invisible. So, right here with reflect_mc.visible, I’m going to copy that, enter/return once. I’m going to paste it right in beneath that. And I’m going to say fadeOut_mc, remember that’s our text- .visible, equals false. Come back in to this- excuse me- this function here, and the function I’m referring to by the way is timerDoneF, and I want to say not only make the reflection visible, but I also want that fadeOut_mc – wup, make sure out has one capital- _mc.visible,, space equals space, true.
ActionScript:
fadeOut_mc.visible = false;
function timerDoneF(e:TimerEvent):void {
fadeOut_mc.visible = true;
reflect_mc.visible = true;
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
playerDone.removeEventListener(TimerEvent.TIMER, timerDoneF);
}
23:10
So, when the reflection comes in, I also want you to bring in that fadeout text. As a matter of fact, why not just tween it in real quickly. Let’s just duplicate this line of code here, command or control + C to copy that. Command or control + V to paste it. I’ll go back, home key, delete, get rid of that extra indentation there. And we’re gonna call this fadeOutTween. Now, it’s gonna be a new tween, and it is going to attach itself to the fadeOut_mc. We’re going to fade the alpha and in this case, we do want to start a 0, but we want to go full alpha, so we’ll say 1, just like so.
ActionScript:
fadeOut_mc.visible = false;
function timerDoneF(e:TimerEvent):void {
fadeOut_mc.visible = true;
reflect_mc.visible = true;
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
var fadeOutTween:Tween = new Tween (fadeOut_mc, “alpha”, Strong.easeOut, 0, 1, 3, true);
playerDone.removeEventListener(TimerEvent.TIMER, timerDoneF);
}
23:50
Now, remember I mentioned a minute ago, when we roll over the button, we don’t get that little finger that says this is a button. The reason is because we’re dealing with a movie clip; however, we can change that. Let’s come back up to the top.
Right here where we’re basically setting the reflection and that button to not be visible until we tween them in, let’s add fadeOut_mc- again, make sure you only have one capital there in Out- .buttonMode with a capital M, space, equals, space, true. So, we’re basically saying take this movie clip and treat it like a button. So, command + return, control + enter, let’s check out what we’ve got so far. Notice, the fadeout, excuse me the “Go Away” does not show up until it fades in. When we rollover, we have the little finger. Great.
ActionScript:
fadeOut_mc.buttonMode = true;
24:33
Let’s hit F9, make that actions panel go away, and move on.
So the next thing we need to do is a little repetitious, because basically, we want to take this function- and by that function, I mean this function here- fadeOutF,
And fill it with a bunch of tweens that are going to make our player disappear. So, I’m going to get rid of this trace function, and we’re going to get to work right away. I’m going to type var player- wup, spell it correctly, playerFadeOut:, it is a tween, and it equals a new instance of the tween class, open parentheses, and we want to fadeout the player_mc. We want to fade the alpha, close parentheses, comma, and again we’re gonna say Strong.easeOut, comma, space, and in this case, we’re starting at one, and we are going to go to 0. And we will do this over the course of, oh, I don’t know, let’s do this over the course of 2 seconds, and comma, and type the word true, close parentheses, semicolon. Let’s go on to the next line.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween 9player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
}
25:38
So, now when we click that, out player will fade out. Wonderful. Let’s go var playerRotateOut, we’ll just say playerRotateOut:, it is a tween, it is of the tween data type, new- it is equal, excuse me, to a new tween class, or a new instance of the tween class. This is player_mc, as well. We are going to edit or tween rotation of this said object, and we do want to ease it out, as well. And the rotation here, we’re going to start at 0, basically undoing everything we did before, start at 0 and go to 360. And we will do this, as well, over the course of 2 seconds and yes, in fact, I want them to be real seconds.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
}
26:25
Now, for the sake of time, I’m going to hold down my shift key and hit the home key, copy that line of code, hit the end key to go all the way to the end of the line of code, hit enter/return once, paste that in, hit the home key again. See, there is an extra indentation because we copied the initial indentation. Hit the delete key to get rid of that. Now, we’re gonna call this playerXOut, so I’m gonna replace the word rotate here with a capital X, and we do want to edit the player_mc. However, we want to edit the X, not rotation. And, if I recall correctly, we had this guy starting at -250 and going to 200. We’re going to have it start at 200 and go to -250. Sound simple enough. So, we’re going to start at 200 and have it go to -250 over the course of 2 seconds just like we’ve been doing.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
var playerXOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -250, 2, true);
}
27:13
Add another line of code and we have to tween the Y. Go home, get rid of that extra indentation, select “rotate,” place a capital “Y” in there, playerYOut, and we are going to edit the Y, so replace rotation with Y. Come over here, and if I recall correctly, we have this guy coming into the 200, as well, and we’ll have it go to the -150. I’m going to double check that, however. Uh, yes, I am correct. So, starting at the 200, going to the -150, over the course of 2 seconds, and yes, in fact, we are dealing with seconds.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
var playerXOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -250, 2, true);
var playerYOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -150, 2, true);
}
27:48
Now, we want to make this reflection go away, and we also want this button to go away. So, let’s take of that. I’m going to paste this in, get rid of that extra indentation, and here we’re going to say, oh, reflectionFadeOut. It is new, it is a new tween, and this is going to be affecting the reflect_mc, we’re going back to working on the alpha of the object, and yes, we want to ease it out. We, however, are going to start at 0.5, because if you remember, it’s at 50 percent alpha, we’re going to start at 0.5, and we’re going to bring it down to 0, fade it out completely over the course of 2 seconds. Yes, in fact, we’re dealing with seconds.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
var playerXOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -250, 2, true);
var playerYOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -150, 2, true);
var reflectionFadeOut:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0.5, 0, 2, true);
}
28:28
Paste that line of code in again, and we want the text to fade out. So, you can see it’s a lot of writing code. So, I’m going to say, ooh, I’m going to call this button, I’m going to say buttonFadeOut, and I’m going to call this fadeOut_mc, again the alpha. I probably should have just duplicated that line of text right above here. I didn’t think about that. And we want to start this at 1, because we alphaed this all the way into 1, And we want this to go to 0 over the course of 2 seconds, as well.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
var playerXOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -250, 2, true);
var playerYOut:Tween = new Tween (player_mc, “y”, Strong.easeOut, 200, -150, 2, true);
var reflectionFadeOut:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0.5, 0, 2, true);
var buttonFadeOut:Tween = new Tween (fadeOut_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
}
28:58
And last but not least, we can talk to fadeout_mc and basically say go ahead and remove the eventListener, which is that mouseEvent.CLICK, and that fadeOutF function. So, just get rid of that eventListener while you’re at it, while we’re writing out all these longer lines of code. So, now that we’ve done that, let’s hit F9 to make that actions panel go away, command + control, enter+ return if everything works, which it looks like it will. This will fade and flip out of the picture when I click this button. Look at that. Wonderful. I love it. I’m gonna close this now.
ActionScript:
Function fadeOutF(e:MouseEvent):void{
var playerFadeOut:Tween = new Tween player_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
var playerRotateOut:Tween = new Tween (player_mc, “rotation”, Strong.easeOut, 0, 360, 2, true);
var playerXOut:Tween = new Tween (player_mc, “x”, Strong.easeOut, 200, -250, 2, true);
var playerYOut:Tween = new Tween (player_mc, “y”, Strong.easeOut, 200, -150, 2, true);
var reflectionFadeOut:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0.5, 0, 2, true);
var buttonFadeOut:Tween = new Tween (fadeOut_mc, “alpha”, Strong.easeOut, 1, 0, 2, true);
}
29:40
And we’re going to take a look at basically creating an arrow that draws attention to this button saying, “hey, click this go away button. It might not make sense to you. Just click it and see what happens.” I’m going to create a new layer, and I’m just going to name it arrow. Arrow, and I’m going to grab a rectangle, the rectangle tool, excuse me. Select my stroke, and I’m not going to select it there. I’m going to select it over here, and I‘m just going to choose the “kill the stroke” button. And I’m going to just draw a blue rectangle like so. Gonna set it right there, hold down my alt or option key, and drag a copy of that out, and I’m basically going to chop it in half.
30:12
Just select, you know, over the top of it. Hit the delete key to get rid of it. Next, I’m going to move my mouse over, select the top corner of that square, just like so. There we go, we have half of our arrowhead. Hold down my alt or option key and just drag that straight over, go Modify –> Free Transform –> Flip Horizontal. Slide this guy right back over, he’s going to click into place. There we go. We have a nice little arrowhead. Hit the Q key, which is your free transform tool. Hold down the shift key and move your mouse up to the top right corner, rotate it around so it’s pointing downward. And let’s- well, let me just hit the V key to go back to my normal selection tool, so I can really get a decent bead on my arrow. There we go. And I’m going to make this arrow a little stubbier, just like that.
30:53
So there we go, we have a nice little blue arrow here, maybe I’ll make it a little bit smaller than it is now. There we go. I love it. I’m going to select it now and hit F8, which will convert it to a symbol, and we’ll just call this mcArrow. Nothing fancy. And I’m going to give it an instance name of arrow_mc, doesn’t get much simpler than that. Arrow_mc, pretty easy to remember.
31:15
Let’s go back into ActionScript now. The first thing we want to do is make this arrow invisible. We don’t want this arrow to be there the whole time, so I’m going to hit the F9 key to bring up the actions panel. Come all the way back up top where we’re setting visibility of objects. I like to kinds group my stuff together. I’m going to say arrow_mc. Visible, space equals space, false- wup, false, not flase. And semicolon. So, now that we’ve done that, our arrow will be gone. I’m going to hit F9, command + return, control + enter, test it. See, the arrow’s not there. Great.
ActionScript:
arrow_mc.visible = false;
31:48
Now before when we began tweening all this additional stuff, I mentioned to you that we could use what’s called a tweenEvent to make something appear when an animation finished. Let’s do that right here with this arrow, just for the sake of showing you how to do it. It’s actually kinda cool.
So, I’m going to hit F9 to bring up my, uh, actions panel. That’s the word I’m searching for. Actions panel. And I’m going to come all the way down here, beneath all of my code, hit enter/return a couple times, and I’m going to type, oh, button. No, not button. Let me check this real quick.
32:22
We named this tween fadeOutTween, that’s the tween that I’m looking for. So, I’m going to name it fadeOutTween, that’s why I messed myself up there. Say fadeOutTween.addEventListener, and we are going to listen for a TweenEvent.MOTION_FINISH. And when the motion of that tween finishes, essentially when that tween is done, when that tween stops, we want it to showBtnF. And the button we’re going to show, uh, is the arrow button, or just the arrow. I’m just going to call it showBtnF, and place a semicolon after that, so now, let’s write the function.
ActionScript:
fadeOutTween.addEventListener (TweenEvent.MOTION_FINISH, showBtnF);
33:03
The function is going to be function. And by the way, for those of you who know what is happening here, I know that we’re going to trigger an error, but don’t worry. I’m going to call this showBtnF, bearing in mind this time, we do in fact have to give the function a name, open parentheses, e:, and this is a TweenEevnt, close parentheses, colon, and the word void. Open curly bracket, enter/return twice, close curly bracket, and the up arrow key. And here we’re going to say arrow_mc.visible, space equals space, true.
ActionScript:
fadeOutTween.addEventListener (TweenEvent.MOTION_FINISH, showBtnF);
function showBtnF(e:TweenEvent):void{
arrow_mc.visible = true;
}
33:38
So, essentially, when all that other animating finishes- specifically, the fadeOut tweening, or specifically, the fadeOutTween, which that fadeOutTween, just as a refresher, that’s the tween right here, that’s the fadeOutTween, which is going to fade in the fadeOut_mc. So that’s why I’m calling it fadeOutTween. It might be a little bit misleading, and I’ve tripped myself up on that before, so just be careful of that. And uh, we’re here in this function showBtnF, and when all of that finishes, that arrow button should become visible. So, I’m going to command + return, that would be control + enter on a PC, and you can see we, in fact, get an error as I mentioned earlier. Basically, this error is saying, you know, I don’t know what you’re talking about here, tweenEvent.
34:22
What we have to do is go back up to the top and import another package of classes, so just say import, and uh, this one, I believe it’s fl.transitions.TweenEvent, yes, I am correct. TweenEvent and place a semicolon at the end of that. Hit F9 to close up the actions panel, command + return, control + enter, and we should get no errors.
ActionScript:
import fl.transitions.TweenEvent;
34:47
However, we do get an error, Access of undefined property fadeOutTween. I must have misspelled something, so let’s just check on that real quick. Or actually, I may not have misspelled something, I believe fadeOutTween here, this guy should be inside of, I’m going to hit command or control X to cut it. This guy should be inside of this timeDoneF function, because that’s where that fadeOutTween is. Let me place him inside of there, and uh, let’s check and see what happens now. Command + return, control + enter. No errors, so far so good. Fades in, spins into place. The reflection shows up. As soon as this finishes, you can see the arrow appears. When I click that, everything fades out, the arrow, however, does not go away. The arrow, excuse me, not error, the arrow.
ActionScript:
function timerDoneF(e:TimerEvent):void {
fadeOut_mc.visible = true;
reflect_mc.visible = true;
var playerReflectTween:Tween = new Tween (reflect_mc, “alpha”, Strong.easeOut, 0, 0.5, 3 true);
var fadeOutTween:Tween = new Tween (fadeOut_mc, “alpha”, Strong.easeOut, 0, 1, 3, true);
playerDone.removeEventListener(TimerEvent.TIMER, timerDoneF);
fadeOutTween.addEventListener (TweenEvent.MOTION_FINISH, showBtnF);
}
35:30
So there we go, we have successfully tweened up to this point. We want to do a little bit more though. And basically what I want to happen, that arrow, after it shows up, I want it to, you know, start moving up and down. Now tweening this in ActionScript is actually pretty easy.
So, we need to create one more timer and one more function, and then that’s it.
What we’re going to do is we’re going to create that timer real quick. I’m going to say var Arrow, whoa, I don’t want to start that wit a cap. I like to start all of my, the first word of my bits of code with a lowercase, and everything after that with an uppercase. It’s called camelcoding, it’s the way, uh, ActionScript works. So, you don’t have to with your names, I just highly recommend that you do.
So, we’re going to call this arrowLoopTimer:, it is a timer. It is of the timer data type. Equals a new instance of the timer class, open parentheses, and I want this to be called one time after one second, so I’m going to say 1000 for 1000 milliseconds, and I want it to only be called once. And place a semicolon after that.
36:30
And here I’m going to say arrowLoopTimer.addEventListener, and this is a TimerEvent.TIMER. Again, all caps. .TIMER, comma, and the function we’re going to call is called moveUpF. Now we haven’t written that function yet, but that’s what we’re going to name it. So, close that off with a closed parentheses and a semicolon. Hit enter or return a few times to give us a little bit of space here.
So we just wrote that eventListener for our arrowLoopTimer. We now want to say arrowLoopTimer, go ahead .start. Go ahead start, open and close parentheses, semicolon. So, we’ve just written our timer.
ActionScript:
var arrowLoopTimer:Timer = new Timer (1000, 1);
arrowLoopTimer.addEventListener(Timerevent.TIMER, moveupF);
arrowLoopTimer.start();
37:09
Now let’s write that moveUp function. Function, again moveUpF, opene parentheses, just the letter e:TimerEvent, close parentheses, and the word void. Open curly bracket, enter/return twice, close curly bracket, and the up arrow key.
Now we need to create a new tween, so I’m going to say var arrow, let’s just var arrowMoveUp, ‘cause that’s all we need it to do. arrowMoveUp, and it is a tween. It’s equal to a new instance of the tween class, and we are going to be affecting or tweening, the arrow_mc. We want to edit the Y, because we want it to move up an down. And we want to give it that easing, so strong.easOut, comma, space. We want it to start at, well, let me look at the stage real quick.
38:05
We want it to start about right where it is. So, let’s set the Y to 210, so it’s something easy to remember. Let’s do 220 so it moves a little closer to the text. You know what? For the heck of it, 225. So we’re going to do 225, and we want it to move up about that high. Okay, so we’re going to say to 190. So we will go 225 to 190.
Alright, let’s bring this guy back in here. Current selection cannot have actions applied to it. That’s because we’ve selected a symbol. We’re going to go to the ActionScript keyframe, and we’re going to start this guy out at 225, and we want him to go up to 190 and maybe over the course of, ooh, I don’t know, 1 second. Comma, yes, and in fact, we are dealing with seconds. Close parentheses, semicolon.
ActionScript:
function moveUpF(e:TimerEvent):void {
var arrowMoveUp:Tween = new Tween (arrow_mc, “y”, Strong.easeOut, 225, 190, 1, true);
}
38:51
And now in the next layer, we are going to add an eventListener that, to this variable. So we’re going to say, or this tween, excuse me. arrowMoveup.addEventListener, and this is a tweenEvent, as well. TweenEevnt.MOTION_FINISH, and I want you to execute the downF function. Close parentheses, semicolon.
ActionScript:
function moveUpF(e:TimerEvent):void {
var arrowMoveUp:Tween = new Tween (arrow_mc, “y”, Strong.easeOut, 225, 190, 1, true);
arrowMoveUp.addEventListener (TweenEvent.MOTION_FINISH, downF);
}
39:18
Now that downF function we’re going to put right here within the moveUp function. So we’re going to say function- make sure you spell function correctly- function downF, open parentheses, the letter e:, and this is, yes, this is a tween event. Lost my train of though there for a split second. TweenEvent, close parentheses, colon, the word void. Open curly bracket, enter/return twice, close curly bracket.
Now, I’ve got this curly bracket here which is part of this function. And this curly bracket all the way down here is part of this overarching function. So we’re working within the downF function, this guy right here.
And all I want to type is arrowMoveUp- this is the name of that tween- .yoyo, open and close parentheses, and semicolon.
ActionScript:
function moveUpF(e:TimerEvent):void {
var arrowMoveUp:Tween = new Tween (arrow_mc, “y”, Strong.easeOut, 225, 190, 1, true);
arrowMoveUp.addEventListener (TweenEvent.MOTION_FINISH, downF);
function downF(e:TweenEvent):void{
arrow.MoveUp.yoyo();
}
}
40:08
So now, think about what we just did. We just created a tween that’s going to move our arrow up. Never a tween that’s going to move it back down. Just keep that in mind. Well, it doesn’t look like we created a tween that’s gonna move it back down. But we did add this strange line of code that says .yoyo. And if I think about what a yoyo does, it starts to get me excited. Not like that. But it starts to get me excited in a Flash sense, in a Adobe Flash sense.
40:36
So let’s take a look at what this does. Command + return/control + enter. Here we go. Everything’s fading in, and as long as this works out, this arrow will go up and come back down. And then go up and come back down. And then go up, and it just keeps repeating. When I hit “go away,” you can see it all goes away, and the arrow just sits there doing its little arrow thing, and that’s it.
So we have successfully created a variety of tweens in ActionScript 3.0 using this 50+ lines of code to do it. Now because this is such a long tutorial and because it got so complicated, if you’ve never done this before, don’t freak out. You don’t have to leave the video in anger and disgust at me because I’ve flown through it so quickly.
41:22
I will post a little screen shot of all the code I used, so if you want, you can come right to the end, and you can cheat off of my code. Well, not cheat. Learn off of my code. I’ve got no problem with doing that. So, go ahead, take a look at my code, which you will see right after I finish closing this thing out. Which I’m going to start doing right now.
So thank you for watching this video tutorial. I certainly hoped you’ve learned something. It’s been a blast bringing it to you. Tweening with ActionScript is awesome. And it’s definitely something that you ought to consider doing and working into your projects. And it really opens up avenues, uh, when you’re working with Flash that are really much more difficult to do if you don’t learn how to tween using ActionScript.
42:00
So I highly recommend you really learn it, you really practice it, you try to implement it in some of your work. And uh, that’s it for this one. Thank you so much for watching it. Please check out the web site, that’s ww.tutvid.com.
42:10
And now, on to the screen shot of all the code that I’ve used.
Tweening with ActionScript 3.0 Flash Tutorial
http://www.youtube.com/watch?v=98J1H8MqvTg
TRT: 42:31
Transcribed by: Brian (Avocation Design)
Remember to drop a comment on what you think would make this better! Is it too much? Should I include screenshots? Should it be more of a tutorial rather than transcription? Let me what you guys think!
Make a Shattered Dagger Poster: Photoshop Tutorial [HD]
July 25, 2009
Dagger: http://www.sxc.hu/photo/1033113
Old Fella: http://www.sxc.hu/photo/1187974
Beautiful Girl: http://www.sxc.hu/photo/1064031
Blue Eyes Girl: http://www.sxc.hu/photo/797762
In this tutorial we will be creating a movie-style shattered dagger poster effect. Learn about Layer and Clipping Masks as well as combining images to create a simple composite!
This tutorial comes to us from the June/July issue of the Tutvid newsletter.
You can view that newsletter right here: http://tutvid.com/newsletter/issues/j…
If you would like to subscribe to the newsletter (it literally takes 10 seconds) check out this page: http://tutvid.com/newsletter/
A Couple Suite CS4 Tips
July 24, 2009
Happy Friday all, as the rest of the working world gets ready to party and breathes a sign of relief that the work week is over I remain hard at work for you all. Don’t feel bad about it I get my time off and I work by choice (well I guess the necessity is there too) and enjoy it, heck, what could be better than to get to do something you love?
Anyway I totally stole the “Suite Tips” thing from I believe it is Layer Magazine, so I ought to plug them, check em’ out guys! Layer’s Magazine!
Let’s get rolling with a couple cool little tips from five of my favorite pieces of software ever!
-Photoshop
Add “Alt/Opt” to a hotkey when opening a dialog boxes to get to the exact settings last used in that dialog!
Go Edit>Preferences>General and then Un-Check “Use Shift key for Tool Switch” to make selecting other tools a breeze! (on a Mac go Photoshop>Preferences>General).
-Dreamweaver
Use an image as your submit button by using this code instead of placing a submit button: <input id=”searchsubmit” src=”yourSource/someFolder/yourFileGoesHere.gif” />
Go View>Color Icons if your sick of plain ole’ mono Icons!
-Flash
Use your Timeline hotkeys! F5 to Add Frames, F6 to Add a Keyframe, F7 to Add a Blank Keyframe.
Go Edit Customize Tools Panel to get rid of stuff you never use! (You can always revert to Default later if you really mess things up.)
-Illustrator
Go Object>Expand to break up those tough pieces of Artwork created by Illustrator so you can change colors and paths etc…
When using certain Line and Shape Tools (Other than the basic Rectangle, Circle, etc…) try using the Up/Down Arrow Keys or holding Ctrl/Cmd, or Alt/Opt, the Shift Key, or combos of two or three and depending on the tool you will see different shapes and results. Check it out!
-Bridge
Shift + Double Click RAW images to open directly in Photoshop and bypass the Camera RAW dialog altogether.
Stack Similar Images by Selecting them all and hitting Ctrl/Cmd + G and then Open/Close those stacks by hitting Ctrl/Cmd +Left/Right Arrow
-Photomatix
Photomatix is possibly the best HDR creating and Tone Mapping software I have ever used. Flat-out awesome, create HDR images from one or multiple images and create anything from the surreal and wacky HDR look, to a more realistic looking photograph.
Go check out Photomatix and download the full, never ending demo program (which has no limitations it just places a watermark on your photos when it finishes processing them), download that free version right here!
If you purchase the program ($99) be sure to get 15% off by using the coupon code “tutvid15” when you checkout!
The Photos throughout this blog post were all processed with Photomatix.
Have a great weekend all!
My Love in Photoshop CS4: The Rotate Tool
July 22, 2009
One of the first things you will notice about CS4, or noticed about CS4 for those of you that already have the program, is the updated UI (User Interface) and all of the new ways you can organize your open windows, the updated hand tool, the smoother zooming, and the fact that images are not all jagged at 33.3% and 66.6% etc… etc…
For many of these features you will need a graphics card that supports open GL, so be aware of that if you go out and pick up Photoshop CS4 thinking no matter what make, model, or age your computer is this stuff will work, you make be in for a rude awakening. Not super expensive to get an OpenGL supporting graphics card, but just know that if your computer does not have one you will need one to take advantage of these features (Photoshop will still run for you, it’s just these viewing features that will not be available to you).
Anyway the point of this blog post is to share with you maybe the most overlooked “little” feature of CS4, well, in my mind at least. Enter the Rotate View Tool, default hotkey (R), or you can find it hiding beneath the Hand Tool (Click and hold on the Hand and you will see it).
Basically the point of this tool is to grab your canvas, psd, image, document, or whatever it is you have open in Photoshop and rotate it! It may not sound like a big deal, but I find when retouching a model, or in this case a child, it is much easier to brush up and down strokes and maybe even on a slight angle. Before the rotate tool I would either have to go Image>Image Rotation and then go and rotate back or I would export a crooked shot not to mention the additional white space it would add all over the place!
The Rotate Tool allows you to click and drag your image to rotate only here in Photoshop so you can save out an image you have rotated, but it is really still straight, but it does not matter either way because Photoshop gives us a groovy Compass overlay while we drag and a super sweet “Reset View” button which gets us back to normal in a split second. I would have had a screenshot of the compass, but because of what it does all I get is a screen full of black…
You can also punch in an exact angle to rotate to, or just click and drag the little rotation icon up in the control bar. Another thing to note about this tool is that-like other rotation tools- holding “Shift” constrains the rotation to 22.5 degree increments. To recap, The Rotate View Tool is great because:
It allows for super easy painting and retouching in what used to be difficult angles.
It is super easy to rotate and then get back to where you were.
It is a small thing, but I know this tool has saved me a HUGE amount of time! Check it out today and get hooked J This little guy also says to check it out, because, according to him, it’s less of a headache… just sayin’
Seriously, if you have used CS4 have you ever even used the Rotate View Tool? If you have do you like it? Let me know your thoughts! Drop a Comment and let me know!
Philadelphia Photowalk, LightRoom, and Title Mag.
July 21, 2009
-Scott Kelby’s PhotoWalk 2009
This past Saturday Scott Kelby’s Worldwide Photowalk was “officially” underway all around the world. I went down to Phildelphia and joined a great group of photographers and spent the early afternoon walking through center city and talking, sharing information, and shooting.
Overall I had a great time and hopefully I will lead my own photowalk next year, but we’ll see.
Through the rest of this blog post I will have a couple of the images I got that afternoon during the photowalk. While your at it check out the Flickr group for our walk by clicking here. Check out the photos by “uniment1” and be sure to comment them, yep every single one!
Long story short it was a great afternoon, met some pretty cool photographers and really did not even meet everyone in our group!
Did you go on a Photowalk? If so how was it?
-Lightroom
Purely as a segue from the previous part of this blog post, I did use Lightroom to process all of the non-HDR images from the shoot, and actually, after I processed those HDR photos using Photomatix they even saw Lightroom for a little bit of correction. Lightroom is a great, great application for processing Photography of all kinds, the workflow and time saving aspects of Lightroom are great, combine that with the Bridge and you are in Photographers second heaven and we have not even touched Photoshop yet!
The one an only gripe I have with Lightroom is that it is not included with the Creative Suite! I hope Adobe changes this, or at least tell us what the reasoning is behind this. Maybe there is a marketing advantage… who knows? Try out Lightroom for 30 Days FREE!
-Title Magazine
I got an email the other day from the creator of Title Magazine, a lovely young lady working out of California and long story short she presented her magazine to me and let me know that she is looking to get a website made for the magazine.
Check out the magazine by clicking here! Go ahead and subscribe to it as well! If you are interested in building a website for the magazine leave a comment here and I will be sure to direct her to your comment where you can then (somehow) get in touch and get a site made. The current website is: http://www.titlemagazine.net/ Check it out guys!
-Flip UltraHD
I am looking to get one of these inexpensive (just a fancy way of saying “cheap”) HD video recorders for personal use and maybe even do a few videos on Photography and general fun stuff for the Tutvid YouTube channel as I really have never strayed from Screen Capture presentation type stuff.
Does anyone have one of these? Do you like it? Let me know what you think about it, I would love to know! Flip UltraHD
Have a great week guys!
Photoshop CS4 Tutorial: The Lomo Effect + More!
July 21, 2009
Here again we have a video of one of the tutorials in the June-July 09 newsletter! Using Photoshop we will create a very editable Lomography effect also known as the “Lomo Effect”. Using Blend Modes and Adjustments Layers we achieve a pretty cool effect that can be used on all kinds of Photography! After creating the effect we will take a quick minute and create a simple action so we can test this effect out on a photo by simply clicking a button!
Really cool effect, check it out guys!
Bevel and Emboss Horrors
July 17, 2009
Bevel and Emboss Horrors
That’s right Bevel and Emboss HORROR, not with a capital “H” that’s all caps baby. Virtually all of us, the Developers, Designers, Artists, Animators, Photographers, and General Photoshop user, have been at that point in Photoshop where we have felt this un-yielding urge to bust out the –in my mind- infamous Bevel and Emboss Layer Style.
The absolute misuse (or in most cases use at all) of this Layer Style is like taking a needle in the eye (not quite that bad, but you get the point), it is serious “Eye-Vegetable” (you know the opposite of “Eye-Candy”). I see this Bevel and Emboss misused in virtually every application I can think of; on the Web, TV, Billboards, Print Advertisements, and more.
I like to think of it as a rookie mistake, but it is probably somewhat condescending for me to think of it that way, but I know myself personally stopped using Bevel and Emboss on EVERYTHING about 6 months after I started using Photoshop. I am not sure what it is about that “bump” looking shape that attracts us… maybe one of you can enlighten me? I would love to have you thoughts on that one.
Don’t get me wrong Bevel and Emboss it useful for some things, but please, to anyone who thought it was a good idea to emboss that 10px border, to anyone who thought the rectangle would look better with a highlight on top and a shadowed edge on the bottom, to anyone who thinks the default settings of Bevel and Emboss are great and it requires no tweaking, NO! Don’t do it! Spare us the moment of time we use to notice the bad use of Bevel and Emboss. To all who had the dis-pleasure of reviewing my work when I first started using Photoshop, consider this a public apology and big thank you for the comments that ripped, tore up, and spit out my work and ultimately helped shed the wretched Bevel and Emboss disease.
Now I did not write this blog post to trash the Bevel and Emboss filter to you all and embarrass Adobe, like I mentioned a moment ago Bevel and Emboss has its time and place, matter of fact I will even show you my all-time favorite settings, check em’out!
My advice to you the Novice to Pro Photoshop User is to simply stop using the Bevel and Emboss. Force yourself to break-away for 3-6 months and just do not use it. I, however, will be the first to dump some temptation on you because I don’t just want to trash Bevel and Emboss, I will show you a couple of interesting things you can do with it.
-Adjust the Shadow and Highlights to create a different look:
-Use those Blend Modes, both for the Highlight and Shadow.
-Use the Size and Depth sliders
-Work with the Depth while changing the other stuff
-Do not only use the Bevel and Emboss Blend Mode, add a subtle Drop Shadow
Ultimately try never to use the Bevel and Emboss, if you are good enough to know when using it provides an attractive look then all is well and good, but using a few other Layer Styles you can get much nicer looking… anythings! (check out the screenshot again) and remember, if you have questions or are not sure, stay safe and stay away from the Bevel and Emboss.
What are your thoughts on Bevel and Emboss? Love it? Hate it? Is it useful? Should rookies never touch it? Let me know what you think about Bevel and Emboss.
