Weekend Wrap! — 05.30 Goodbye May!
May 30, 2009
-Contest
It’s that time again! Time for the Tutivd.com Photoshop contest! This month I am actually hosting two contests, the normal Photoshop contest and a contest just for you Twitter followers, so if you are not yet following me @tutvid on Twitter go ahead and follow right here: http://www.twitter.com/tutvid
Sadly we are not going to have a flash or Illustrator contest this month, maybe next, but I still want the contest to grow a little more before branching out into multiple contests.
-Newsletter
My hope is to get the end-of-the-month deals and steals newsletter out today. It is actually going to be the same set of deals as last month largely because last month was sort of a dry first-run type thing. Both a $10 an $20 tutorial package one for Photoshop the other for Flash. We need something for Dreamweaver as well! I am going to look into that. June’s middle of the month newsletter is coming along fine with some great new tutorials!
-Tutorials
This week I only managed to get one video released which is not that, that great, but I do hope to get one of Simon Plant’s videos released at some point soon! I also do have some great tutorials coming up which will be coming out very, very soon! Also keep your eyes peeled for video tutorials versions of what we had in the newsletter last month!
-Courses
You have probably heard me mention courses before and how excited I am about them. You are also probably wondering what the heck courses are? Basically I am working to get whole sets of videos (10-20 videos a total of 1-3 hours) released and only sell them through my site, so it would basically be a downloadable DVD. Yep, I do plan on putting these courses onto DVDs and selling them as hard copies through the site as well.
-WordPress
This blog is brought to you courtesy of WordPress, but WordPress can be so much more than just a blogging platform! WordPress can be your site’s backend, your content management system (CMS) and it is easy to install, work with, and design for. I am pretty well 100% sure I am going to re-design Tutvid.com-to a certain extent I want to keep it looking a lot of the way it looks now- and incorporate a WordPress CMS for everything from uniformity and clean code, to a reliable backend and ease of updates.
My Blogging Challenge: The Beginner Blogger
May 29, 2009
Well those of you that follow the site and read my blogs have noticed that recently that I really have not been posting anything on a regular basis, so in an effort to become more regular and force myself to write I am challenging myself and you, the Tutvid user, watcher, and general great person (Hey! You like the site right?) to write two paragraphs a day. These paragraphs (3-5 sentences) I will try to keep relevant with the site, but my challenge extends beyond me as I also would love you to begin blogging as well!
Your two paragraphs can be about anything you like and feel free to post links to your blog here. I would prefer blogs articles on anything Creative: Photographic, Web, Graphic, Audio, Video, or anything at all design related. Also for any bloggers, new and old please leave a comment with maybe a little tip or trick you would use to spark your creative writing juices!
I have heard of designers-block, but never really suffered much of that, but this writers-block is nasty stuff.
Happy Blogging!
N.
In this video we will create a complete, yet simple XML gallery. This tutorial is somewhere between Intermediate and Advanced level so if you know a little bit about actionscript you should be just fine, but if you are adventurous you should be able be fine no matter your skill level. We will create nice click-through gallery using XML and actionscript 3.0.
Twitter! http://www.twitter.com/tutvid
Be sure to check out http://www.tutvid.com
5 Paper-ish Website Designs an Overview
May 22, 2009
5 Paper-ish Website Designs
Well for today I have a micro-list I just pieced together and found an excuse to write on. We have 5 examples of paper or paper-like textures being used in web design, I will tell you some of the things I like about these sites (both the paper part and the non-paper part as well). My plan is also to start doing some tutorials on achieving some of the effects in my lists in both Photoshop and Illustrator and then later on working with that material in Flash or Dreamweaver to complete a web design project. More of that to come later for now let’s focus on what we have here.
Glocal Ventures
This website is a great example of using the paper texture in a few different ways, first we have the nice torn edge on the navigation-which is retained on rollover and when you go to a new page- as well as the body of the website continuing the torn edge effect throughout. Two of the things I love about this website are the use of the subtle background image and the straight-edged, very clean-looking content boxes inside of the body to give the site a nice sharp edge and not forcing a “dirty” grunge look. Very slick.
Stuck in Customs
http://www.stuckincustoms.com/
Stuck in Customs is just a cool blog that I check out pretty much everyday and the guy runs a top-notch site. On this site the header image with the paper-like texture speaks for itself, being a travel blog it definitely gives it a “world” feel while remaining very casual and worn looking. I really like the header portion above the right-hand information column as well as the drop shadow edge running between both columns to set them apart. I also really like the red and olive green text/link colors great work here.
Josef Petr Antonin
http://strzibny.name/strzibny/
Sadly this site is in a different language so I really do not know what is going on as far as textual content goes, but this one was referred to me by somebody and I really liked the simplicity and straight-forward look of the site. On this site I really like the taped down idea and the large footer that is attached to the site instead of locked to the base of the browse. Also notice the copyright notice on a piece of tape… sharp I like it.
AJ Miles Contemporary Artist
AJ Miles has a website that combines the worn paper look with a splatter effect as well as being a sporty clean-looking site with great colors and all of that style mixing leads to a very, very sharp cool looking site/blog for this artist. The simplicity of the header is beautiful as are the muted, de-saturated blue next to the bright vibrant green colors, but further we have the paper effect holding written navigation and then the splatter all of which is tied into the blog portion of the site with the taped edges and splatter of the cleaned content boxes. With the bright colors of the website as well as his artwork sitting in a website as simple as this leads to a stunning design, one I really enjoy.
Luis Alacron Blog
Here we have a very cool blog featuring more of the torn cardboard than torn paper (cardboard is basically thick paper…right?) and a large dose of tans colors sitting on top of a punchy, grungy bright red background. I love the navigation bar in this site, just having those rounded edges does so much for it. I don’t really think I would like it without them. Notice the posting dates are tying the cardboard theme throughout and once you get to the base of the page you are treated to a wonderful footer of torn paper and cardboard goodness! I love the little scissors icon and dotted line as well as the texture on the Facebook, Flickr, and Youtube logos.
Illustrations are all over the web and there are even some interesting ones in print and over the past years there has almost been an obsession with these web illustrations and with good reason! These illustrations popping up all over the place are created by pretty talented and dedicated artists.
Today we will look at some illustration styles, not particularly my absolute favorite illustrations. We will have website artwork, as well as pieces created for print or simple viewing pleasure.
Let’s take a look at these different styles! NOTE: All artwork is linked to the artists site, if you are interested in it, feel free to click and explore!
1. Aurora /Streaking Colors:
The Aurora style is that bright swirling mass of colors that is softly blurred and blended together to create a stunning out-of-this-world look, hence the “Aurora” name, but there is also a lot of that streaking color look, interesting in a wide variety of applications. Windows Vista used an Aurora type color effect in much of the operating systems layout and look, but it has been a pretty popular style for a little while now. We have some great sites that feature an Aurora illustrative style in anything from the actual website to the artwork displayed on the site.
http://www.myonlyworkingeye.co.uk/
This site really uses a photograph, but it demonstrates how flexible this style can be as it fits in nicely with that streaking color effect look, but not really being “spacey” looking at all, really a cool look and something to keep in mind for sure.
http://www.joelinner.net/anunnaki/anunnaki.html
Very, very unique and interesting illustrations here on this site, but beautiful work nonetheless. This site could be classified as grunge style as well and it even has some of that pencil sketched and colored look, very interesting artwork.
Well here it is; what a nice looking header! The Aurora artwork really shows and that combined with the simple site equals a nice design. This particular header is actually easier to make than it looks and hopefully a tutorial will be coming soon! For now just check it out we have some streaking light things, the 3D vector ribs, and some smoky/wispy effects, very cool looking.
Here is a very simple example of this effect, almost a mere motion blur, but notice combined with the brighter flashier effects in the sites header we have a very nice combined effect, nice work.
2. Florals:
Florals are possibly the most asked about visual effect, and for good reason! I personally love floral styled designs which is kind of strange given that I am not really a flower guy, but florals have always held a special part of my heart. Basically the majority of floral designs are created using brushes in Photoshop, or Illustrator, but you can create your own brushes traced from images or anything from actual flowers and vines, to iron railings, and coffee mugs (wow that was random, but quite diverse). Let’s take a look:
Well here we have a gallery full of beautiful, yet not all that complex illustrations, just a wonderful example of not over complicating things and getting a wonderful result! This illustration shown is called Intermediair and I love the photograph, the colors used, the additional ouch of the butterflies as their own images not just brush shapes, and the semi-opaque “bubbles” right on the rainbow which just add so much depth to the image, love it!
http://www.marianrupp.com/
I urge you to check out this illustrator (who happens to go by Marian Rupp) entire portfolio on Behance as it is all very nice work! This illustration in particular caught my attention just the attention to the smaller things, the atmosphere of the image and the fact that most of the illustration you can’t really tell if it is a photograph or a painting. It is also a strange painting, which of course was attractive to me, not like you think but I do enjoy odd works of (non-fine?) art.
3. Grunge Style:
Grunge is SUPER popular and, as you can see, that is not with a capital “S” that is all in caps. Grunge to a certain extent is very cool and you may even see some things that looks like “every other grunge artwork” out there, but we will also have some interesting stuff here. What is grunge? Grunge is splatter, dirt, grime, subdued color, and sometime drama all in one word and design-wise that can mean some very cool artwork!
http://www.shinybinary.com/ (Fresh Science Word)
Well you have got to hand it to this guy his art is amazing and we all look up at him, but here on this portfolio page I want you to look at the piece called Fresh Science Word, great use of 3D and further of the grunge style, simply wonderful!
http://silesti.deviantart.com/gallery/
Here is another gorgeous gallery full of great artwork, really most of it is more abstract-grunge than pure grunge, but here is where I am placing it. Just browse through this artwork it is great stuff! So inspirational! Even if you don’t think you can pull off what you see, just examine what you know, the colors used, simple effects and such. I always try to break complex images down and glean what I can from every part of the illustration, logo, photograph, or website.
Here we have a pretty cool, maybe not so traditional grunge look. This website header uses a texture to achieve a grunge look. Note the multicolor textured background and the way the florals and other visual elements are almost just overlaid above the texture.
Several pieces here in this portfolio show up here as the illustrator has some really great work! This one in particular I really enjoyed you have grunge, 3D, and retro style and color throughout, very nice! This would make a cool poster both for your room, but also for advertising if so wished great job!
Some great-and not so work safe- or under age 18 safe illustrations, but we have a really cool grunge style illustration right here. As you can see great photography angle, but further the use of color is exquisite, the drawn-in elements, and the moving air behind the shoe are phenomenal! Great work here!
4. Glowing/ Sparkling:
Another very popular style of design and illustration at the moment is the Glowing and Sparkling effect(s). This effect tends to have bright colors, high contrast, and glowing lines. Very neat when pulled off correctly, but not nailing it can look pretty bad (this actually happens to be the case with all of these styles J) let’s look at some hits:
This is a great portfolio, but I really love the look of this piece. The high contrast, bright colors, and illusion of depth be it from a particle storm, rain, snow, or some other falling stuffs lends to a very cool look.
http://www.ndesign-studio.com/portfolio/graphic/
Nick La over at NDesign-Studios does a masterful job of a lot of things and his illustrations are no exception. Here we have this Soccer (Sorry I’m American, it’s Football…right?) player and just an excellent job of combining bright flashy color with and illusion of depth etc… Nice job.
Great portfolio again (I feel like I have typed this a million+1 times!) we have some great high contrast and colorful work, actually if you check out the rest of this gallery you will see some great grunge work as well.
http://sk8terpunk101.deviantart.com/gallery/#_featured
We have some more great artwork displayed in this gallery, but my favorites would have to be the Break Dancer Boy, Lustre V.2, and Night Rush. Good stuff.
5. Dark/ Mystical:
The Dark and Mystical style is a very cool style that really is not used as prolifically as let’s say the grunge or floral styles, but there are still a bunch of great examples of this style of artwork and illustration. Here I have a few different examples let’s take a look…
http://donjuki.deviantart.com/gallery/
Some very interesting Dark/Grunge Style Artwork. We could actually argue that this is more grunge than dark, but I initially filed it as dark so I am staying true to my initial feeling of what I saw. Anyway we see a lot for destruction, depression, beat up and wore out stuff, and very little color all of that gives the dark grunge look.
http://www.shinybinary.com/ (Strange & Black Dog)
Hey, here we are again, no surprise though so much great artwork here on this portfolio page. I want you guys to check out two pieces called “Strange” and “Black Dog”. Beautiful and very, very disturbing, but I love them, very nice work.
http://eltonfernandes.deviantart.com/gallery/
We have more of this dark, depressing, colorless artwork, so simple, yet so impactful (if that is even a word…). Take note of the lake of color, vignettes, use of light, and general “abstractness” of almost everything he has here in this gallery. Interesting work.
http://www.flickr.com/photos/marianovillalba/
Wow, what awesome artwork, evil clowns to creepy creatures beating brave stones with stone battle hammers in a surreal horror/mystical environment. Here is some artwork I can really feel and looks really great. I don’t think I would hang it in my foyer, but wow great work. Again here we see little or no color, heavy but sharp contrasting lines, and a depressed or aggressive tone to the artwork. Good stuff.
6. Vectorized:
Well this vectorized style you are going to see is worked into a lot of illustrations and even websites around the web these days, but I still set aside a spot for it, albeit it is not a huge one. Typically a lot of big solid colored shapes give away the vector styled illustration, but it can also have blurred color and all kinds of cool effects, just check out both these sites I have below!
Here we have some gorgeous vector work going on behind anyone of these models or any of the stand alone pieces, just phenomenal work. You can see that this artwork uses a lot of solid colors sometime fading one to the next and using anything from muted color to even allowing the background to form the fill.
http://www.ndesign-studio.com/portfolio/illustration/
I believe I touched on NDesign Studio earlier in this post way up closer to the top, but here you can see Nick uses a different style of artwork, very obviously vectorized. The solid colors and filled shapes with hard edges point toward this, but as you can see it is still a cool look.
7. Photo + Illustration:
This one is pretty self explanatory and again we have seen a large portion of these illustrations already have included photographs, true, but I thought we should make a section devoted to just a select few that I really liked. Enjoy.
http://desk08.customize.org/wallpaper/50
Well here we have a desktop wallpaper, actually there are a ton of very visually interesting wallpapers out there I have run into, but I am not a huge wallpaper guy, however if you have any good ones, please feel free to post a comment and let me know. Well basically this is a composite of several photos plus contrast, brightness, and color edits all of which form a nice final piece.
http://www.henningmoser.de/viewer_post.html
I love this work, so realistic and awesome ideas. This is the kind of work that puts a smile on your face just looking at it!
http://desk08.customize.org/wallpaper/9
Hey! Same wallpaper site, yep I know but this was another one I saw when I was picking up the link to the other image so I though I would throw it in. Just an interesting idea including the artwork and photo gives a very surreal look and interesting look.
http://www.alltelleringet.com/
Wow, some of this work is knock-you-off-your-feet cool and incredible! This is really more of the I-used-a-photo-to-create-this photo manipulation type artwork, but I thought it was both fitting here and quite interesting.
http://stanod.deviantart.com/gallery/
Here, again we have some incredible digital artwork using photographs. I am really running out of words to say, just incredible, really great work.
http://www.nicksaglimbeni.com/
This is some really cool work, really a photography type site, but the inspiration that can be gained both by photographers and designers is there, just some cool images and uses of Photoshop.
Here I am focusing on the piece called “It Wasn’t Me”. This is so cool and just an awesome job by the designer here. I would print this and find a place for it, however some of my family would look at me like I had Octopi coming out of my chest when they saw it… pure awesome.
8. 3D:
More and more people are learning how to create and work with 3D and 3D in Artwork and Illustrations for websites and Flash movies is becoming more and more popular. Some of this stuff is very cool and you really want to learn how to use 3D of some sort to get results like you will see here. 3D can be incredible!
There is actually a pretty decent range of artwork on this site, but the one common thing about all of it, is the fact that it is insane, just really, really good stuff! High quality examples are always a plus on the web as long as you are willing to wait through the loading time, but this stuff is worth it!
http://www.dylancolestudio.com/
Ok, ok, this is not really 3D, but the sketches look pretty 3 dimensional so with that kind of talent I had to find a place here on my list. From the matte paintings (some of which you may have seen before) to the sketches there is a TON of great and inspirational work here… wow.
http://www.juancarlosfederico.com.ar/Restatos.htm
Well here we have some interesting pseudo-3D work. This is stuff that is made out of photographs but has a very 3D-ish look to it. I am not a huge fan of combining a billion + 1 photographs, but some of this work is quite nice, check it out for yourself.
http://www.burdu976.com/?p=177
I love cut-away styled work and that is exactly what this particular piece is, really great detail. Anyone who has done this kind of work knows the kind of time put into something like this, really great job! Check out everything from the placement of lines to the shading to match the body and the shadows “inside” of the body. Nice stuff
9. Fantasy/ Space:
Fantasy and Space related paintings and illustrations are really cool and very versatile as well! You can hang them as wall art, use them in an advertisement, or create a website around one! Fantasy obviously contains the kind of blissful fantasy type setting with bright colors and sparkling this-and-that’s as well as any number of other elements. Let’s go over these and learn a thing of two!
http://iribel.deviantart.com/art/Atlantis-70963206
Here we have a piece that contains both a fantasy and a space theme and notice how nicely they combine! We even have those dolphins in the foreground which fit in quite well and add something to the overall scene. This painting does leave room for improvement, but I am not going to start critiquing everything I see just know that you should not be afraid to throw different elements together and see what comes out.
This is a pretty cool site, again combining the spacey look with relative fantasy stuff. Check out the aurora type lighting around the planet to the right as well as all the silhouettes all which give us a very nice fantasy look.
http://nameless-designer.deviantart.com/art/Pietus-109199965
By now you should know that taking a planet photo or illustration and using a bi of masking you can easily combine it into just about any dark type illustration and that is exactly what happens here. Add a dark starry sky (Note the mixture of brighter, larger stars with the smaller stars) and this surreal landscape artwork which I want to say is probably 3-4 photographs if it is drawn that is some real skill. Again we have some great work here.
http://www.behance.net/Gallery/The-music-nature/51596
This piece is more of a whimsical fantasy kind of artwork and achieving this look usually takes not much more than mixing something with an “island” of land floating where you can see the bottom of it and of course throwing in the guitar just adds to what we see. Add some painterly strokes, and a dramatic sky fading to a nice gradient and you get this piece, nice work!
10. Colorful Retro:
This colorful style artwork is not the 1920s kind of retro so many people think of, more of a bouncing grunge, with a touch of the mid-1900s (Wow, that makes 1960 sound like forever-ago!) and maybe a mix of a few of the other styles we have talked about to this point.
http://www.axiom.ee/axiom.html#/news/18/
The artwork I am focusing on is the initial artwork you see heading into the site which is actually a nice mix of 3D and Brightly colored floral-like artwork, but it strikes me as this retro style artwork which really looks ultra modern, but whatever you want to call it, it certainly is nice stuff. One element I have not mentioned to this point is the ribbon, ribbons can add so much to any artwork it is incredible, but here we also have swirling colors as well as a few photographic elements all of which pull this together and make a great piece of art. Hey be sure to check out the rest of this site, it is in a different language, but great work is to be found in there.
http://www.myshli.com/2009/04/03/eurovision09-concept-2-2/
This is a really nice piece of artwork which is a logo proposal, but check out the shapes and colors! It all works together nicely to create this almost eruption of color and shape. I find that this kind of artwork always contains some kind of looping shapes and in this piece we have some florals as well. Take a look at how well this works on everything from the Tshirt to the bus.
http://www.behance.net/Gallery/Bike-Ride-To-Plutoa/122247
Well here we have the last piece I am going to cover and right off the bat we have another rainbow which is a popular element for retro style artwork, but also check out the UFO thing and the rocket as well, both are done nicely. From the little particles and smoke, to the motion blur behind the rocket and the little individual sharp bits of light shooting around this piece contains some great detail.
Remember all images link to the websites and artwork we are talking about!
If you have any great artwork you would like me to cover send me a link and I will set it aside for you!
What artwork did you like? What didn’t you like? Post a comment and let us all know!
In this video we will take a look at a very special way to remove an element from an image. In case we will be removing a pair of glasses from this young woman’s face and it the process rebuilding parts of her eyes as well as doing some heavy retouch work to the face in general.
Monday Madness, Weekend Catchup, and Updates
May 11, 2009
Well the weekend was one full of craziness; I was pretty sick and typically I work right through it, but this time it had my voice so I could not record! We are, however back on track here rolling into a new week and everything looks good!
I am planning on the first “official” newsletter to come out at the end of the week. Basically my plan is that an info-packed newsletter will go out around the 15th of every month, and a discount-packed newsletter at the end of every month.
Well I gotta get back to working and all that……
Alright! Part 2. of this Flash Actionscript 3.0 tidbits blogging thing! Let’s get going!
Dragging a MovieClip
With this one you need to have a movieclip and that movieclip has to have an instance name. That is pretty well the only way that this will work for us. We have created a movieclip and given it the instance name “iPhone_mc” and here is my base code:
iPhone_mc.startDrag();
We can make our mouse lock to the center of the movieclip and keep the movieclip from being able to be dragged outside of a set area (usually defined by creating a new instance of the Rectangle Class). Here is how you lock the mouse pointer to the center of the movieclip:
iPhone_mc.startDrag(true);
The problem you will quickly see is that right away the movieclip is moving with the mouse, here is the code to make this drag ONLY when you are clicking on it:
iPhone_mc.addEventListener(MouseEvent.MOUSE_DOWN, downF);
stage.addEventListener(MouseEvent.MOUSE_UP, upF);
function downF(event:MouseEvent):void{
event.target.startDrag();
}
function upF(event:MouseEvent):void{
event.target.stopDrag();
}
Picking a Random number
Grabbing a random number can be very useful for doing anything from choosing a random image to playing a random song etc…etc… Here is how you can choose a random number and then simply trace the number:
var randomNumber:Number;
//Math.ceil will round UP to the closest whole number
//The number after the asterisk is the range from which the random number will come
//A random number between 1 and 100
randomNumber = Math.ceil(Math.random()*100);
trace(randomNumber);
Looping Flash Video
Just a little bit of code I use AFTER giving the player that is loading my flash video an instance name of “video_flv”:
import fl.video.VideoEvent;
video_flv.addEventListener(VideoEvent.COMPLETE, videoDoneF);
function videoDoneF(event:Event):void{
event.target.play();
};
Creating a Looping/Repeating Action
Looping a bit of code over and over is just one of the useful things a for loop can do for you. Check it out basically this code defines a variable and then the for statement. The for statement requires a variable to hold the initial value, and then a condition which basically tells flash when to start or stop looping, and finally an expression which is going to change our variable each time this loop is executed, here is the code:
var i:int;
for (i = 3; i < 13; i++){
trace(i+" time(s) this bit of code has looped");
}
Just note you output on that and bear in mind Flash starts counting at zero, so it should output up to 12 in that for loop right there.
Using a Timer
Timers are super useful and there is a huge amount you can do with them, however right here, right now we will simply create one that traces the string “Tutvid.com” every 2 seconds. Here is the code:
var timerVar:Timer = new Timer(2000, 5);
timerVar.addEventListener(TimerEvent.TIMER, traceF);
timerVar.start();
function traceF(event:Event):void{
trace("Tutvid.com");
}
If you want the timer to loop forever simply remove the “5” in that first line of code like so:
var timerVar:Timer = new Timer(2000);
Also not the delay is in milliseconds so 2000 = 2 seconds.
That’s all for now! Hope you guys enjoyed it!
5 Incredibly Useful Bits of Actionscript 3.0 for Beginners: Part 1.
I have been a bit non-Flash-Blogging-istic lately if that makes any sense at all, but to show you guys that I have nothing against Flash at all here we have ten cool and useful bits of Actionscript 3.0 Code that should help you understand AS3 or Actionscript 3.0 a little more and get a little bit of a better grasp of what you can do with Actionscript in Flash CS3 or CS4.
With all that stuff in mind, let’s jump into this…
Adjusting Properties of just about any Symbol:
The first step of this is to convert your artwork, image, or photo to a symbol. I typically use a movieclip, but we will also use a button symbol here as well.
Basically you first need to give your symbol an instance name by first selecting the symbol and then using the Properties panel, refer to the screenshot for a visual on how to do that:
I usually name my symbols with an instance name that ends with the suffix _mc, or _btn depending on whether or not I am working with a movieclip or button symbol. The advantage is that a little tool tip drop down menu appears to show you your options and just saves a little bit of time because it auto fills out as you type which is pretty cool.
Anyway here is the code to change the alpha and the blend mode of these two symbols.
iPhone_mc.alpha = 0.5;
iPhone_btn.blendMode = "multiply";
Note: You can change multiple properties on one symbol, you are not just limited to one thing per symbol.
Tracing… Why even trace at all?
Tracing is a super simple way to debug and check certain areas of your Flash files and really is super easy to do, and if you are just starting out with your Flash coding life can be quite cool to see Flash do SOMETHING you want it to. In all seriousness though Tracing can be a very useful thing and all Flash designer/developers ought to know how to do it. Here are a few simple examples:
Trace a property of a symbol on the stage:
trace(iPhone_mc.width, iPhone_mc.height);
Trace variables:
var age:Number = 26;
var firstName:String = "Jackson";
var interest:Boolean = true;
trace(age, firstName, interest);
You can also add numbers together during a trace statement, or trigger a trace when a button has been pressed or an “if” statement or any number of things, really a very useful tool in the Actionscript arsenal. Tracing is a very helpful tool when working with debugging any of your Flash movies or applications.
trace(5+5);
You can also add your own custom strings (Flash’s way of saying it is just text) to a trace statement link I have below:
var age:Number = 26;
var firstName:String = "Jackson";
trace(firstName, "is", age, "years old !");
Linking to a Website
Well here is something that has changed quite a with Actionscript 3.0 that is Linking to a webpage or website. Some of you may well know that in Actionscript 2.0 is was as easy as getURL and specifying a URL, not quite like that anymore in Actionscript 3.0 let’s take a look.
First we need to listen for a mouse click on our button (we have given our button the instance name “button_mc”) and then launch a function from that listener.
Then basically we need to setup a variable that contains the URL and to get this URL we need to call the URLRequest class. All for that is done in one variable, and we then use a navigateToURL to simply load the URL that the variable contains. In practice it is pretty simple, albeit not as simple at face-value as AS2. Here is the code:
//First we create a new var and new URLRequest
var url:URLRequest = new URLRequest("http://www.tutvid.com");
//Next we create our event listener for the button
button_mc.addEventListener(MouseEvent.CLICK, clickF);
//Lastly we create the function that takes care of the rest
function clickF(event:MouseEvent):void{
navigateToURL(url);
}
By default Flash opens your new pages in a new window or tab, we can fix this by adding the little “_self” to the navigateToURL bit of code as shown below:
//First we create a new var and new URLRequest
var url:URLRequest = new URLRequest("http://www.tutvid.com");
//Next we create our event listener for the button
button_mc.addEventListener(MouseEvent.CLICK, clickF);
//Lastly we create the function that takes care of the rest
function clickF(event:MouseEvent):void{
navigateToURL(url, "_self");
}
Have fun with that one!
Referencing a Symbol within other Symbols (Children)
This was very simple and straight forward in Actionscript 2.0, but really I am saying that because I was so used to it. Here is Actionscript 3.0 we have this thing called the Display List, while I am not going to get into the Display List in any detail here you will soon see some of what it allows us to do.
We will start out with a simple straight forward reference of a child object, which is basically a movieclip within another movieclip in this case.
The first thing you want to do is give both the parent movieclip an instance name as well as the child movieclip (You want these instance names to be different). I have named mine “buttonParent_mc” and then “buttonChild_mc”.
Basically what I want to do is sit here on my main timeline and add an eventlistner to that button which will resize the parent movieclip whenever it is rolled over. Here is the code I used:
buttonParent_mc.buttonChild_mc.addEventListener(MouseEvent.ROLL_OVER, overF);
function overF(event:MouseEvent):void{
buttonParent_mc.width = 55;
}
You could also do a little bit of a reversal on this and say when the parent is rolled over make that child clip shrink in size. Here is the code:
buttonParent_mc.addEventListener(MouseEvent.ROLL_OVER, overF);
function overF(event:MouseEvent):void{
buttonParent_mc.buttonChild_mc.width = 55;
}
We are not going to touch the Display List in in any kind of detail for fear of complicating things more than they already are so with that in mind let’s move on to the next item.
Referencing a Timeline Outside of the current Symbol
If you are going to make Flash web sites you will find yourself in a situation where you need to get back to the main timeline or to the timeline of the movieclip symbol that is containing the clip you are in (The Parent of that symbol). Let’s say you have a button inside of a page of your Flash site that takes you to the home page of the website. You can’t just reference a frame number or frame label as it will take you to that spot on the current timeline.
Here is how you can do it in with Actionscript 3.0. I have a button inside of a movieclip which is sitting on the main timeline, but I want this button to refer to a spot on that main timeline, so instead of referencing this symbol through the parent symbol I will use a little bit of code to just “back out” of this symbol and get back out there. Use this:
button_mc.addEventListener(MouseEvent.CLICK, clickF);
function clickF(event:MouseEvent):void{
MovieClip(parent).gotoAndStop(10);
}
That sends me to the 10th frame on the timeline of the symbol that contains this button_mc, which, in this case is the very root or first level timeline.
Now if you want to get back to that timeline but reference a symbol to get inside of it or change a property of it simply add the instance name of that symbol like I have done below:
button_mc.addEventListener(MouseEvent.CLICK, clickF);
function clickF(event:MouseEvent):void{
MovieClip(parent).myOtherClip_mc.gotoAndStop(10);
}
Heeeehaaaa YIKES that took me a few minutes to write! I actually have 10 of these little tips and actually many more which will get up to more “advanced” tips (gotta start with the basics), so keep your eyes peeled for the next round of 5 “basic” tips.
Hope you guys pick up a thing or two from these bits of code and absolutely DO NOT let this scare you off of Actionscript 3.0! Embrace it because it is going to be what is used everywhere before you know it and it really is easy to use and learn, heck, I am still learning things about it everyday it tons of different ways! I liked Actionscript 2.0, but I really do love Actionscript 3.0!
Hope you guys begin feeling the same way soon! If you learned a thing or two would you be so kind as to drop me a comment here below this blog post and let me know what you think? You guys rock!
Here is a really great Actionscript 2.0 and 3.0 as well as FLEX and Flash in general help stuff: http://help.adobe.com/en_US/Flash/10.0_Welcome/index.html
Nathaniel
10 Websites and how I have used them for design inspiration!
How can I get great design ideas for my website or get inspired to build a website?
This may be an article for you if you are stuck with the famed “designers block”. With no magic blue (or purple, green, or any color for that matter!) pill you can take to cure designers block use this article and the ten sites attached to help you and give the lack of inspiration a boot out the door! Let’s begin!
Whenever I begin designing a website I pour over books and internet website galleries and virtually any inspirational resource I can find and have ever seen. Today I have decided to throw together a few websites I found recently when working on a website that maybe will give you some ideas in your own personal, or maybe not personal, web design projects.
1.
First up we have a site called Level Opacity which is a very cool looking site, let’s take a look at what I like about it and then you can visit it and grab some ideas and all that good stuff.
I really love the semi-opaque body boxes that this site uses as well as the light blue anything on virtually every rollover such as the changing text color and the borders that show up around the images.
I also really like the navigation bar at the top of the body of the site with those rollovers, very smooth and subtle.
There is also an interesting footer which stays attached to the bottom of the page regardless of where you scroll… not sure if I love it or hate it, but I would probably get sick of it eventually, but hey the idea behind these sites is to give you ideas for your own website(s)!
Overall the site is nice a clean and does not use very many colors which works well because there is a lot going on with all of the info being displayed. For future designs I would keep the whole semi-opaque thing in mind (this is made possible by CSS), the simple solid color mini-headers for the info/body boxes, and that navigation attached to the bottom of the site.
2.
Number two on the list of sites is a website called Outline 2 Design. I really like this style of stretching a header across the entire window regardless of the screen size, but not if it is not done well and the designer has done a great job of it and really makes it look nice here. What do I like here?
The Header artwork is very nice and the navigation bar is subtle and I absolutely love stuff that is subtle and simple!
The way images are worked into the header for the homepage is very cool.
The body is extremely light, clean, simple, and easy to read and navigate.
From this site I would take the header going the distance across the page, as well as keeping the whole visually interesting header compared to the extremely simple page body in mind and maybe see if I can incorporate that where it would make sense for a client down the road.
3.
Time for the third site! This one is called Help Me Rent and you will see here we have that header stretching across the screen so let’s look at what I like and what I will file away for future clients websites.
The subtle use of that image in the header behind the logo, just a great way to spruce up an open area of any site without getting too intrusive.
I love love love the navigation bar and the way it runs into the mini-header area and then the way that area runs to the rest of the site.
The colors are great!
I really glean a lot of info from a site like this from the header going 100% across the screen and the navigation bar flowing together with the pages in this site to the way the body is broken into those big chunks and the footer also runs the 100% of the screens width almost mirroring the header areas spreading out across the whole screen. There is a ton you can pack away and consider using in your own client’s site just from this site.
4.
Fourth up we have a great site called Starcatcher which is a catchy site right off the bat just due to the beautiful header rainbow artwork ribbon thing as well as all the bright rich colors which really pop when set onto the dark black background. What can I take from this site?
The semi-opaque navigation bar is interesting.
I really love the RSS icon being tucked up there with the sparkles and clouds.
Framing the site almost like it is a sheet of paper and just sticking the logo above it and kind of just letting it sit out there not really held by anything, really a nice style of site.
The idea of having that artwork further down the page almost in place of a footer (although a small footer is there) is a pretty cool idea as well.
5.
The 5 hole! Here we have a cool site called DavidG.Ro and this is a very cool site. This site looks very cool and when looking at a site such as this you really need to be careful not to go ahead and steal his design (This is the case with all of these sites by the way!) because you can find yourself following the style he uses and end up with a site almost identical. With that in mind let’s look at what we can take from this site.
First of all the small navigation which rests above the logo and is pressed flush with the top of the browser window is a cool design element you can use in all kinds of designs.
The background graphic which is grunged into the regular background is a cool effect, which again, can be done with any number of image types with some simple brushing techniques in Photoshop.
The very subtle gradients in the navigation bar and the large white header area and awesome, as is the rough stone transfer of the bright header to the darker body area for the homepage, very cool.
On the portfolio images we have a neat border CSS rollover happening, we will keep that in mind as well.
6.
This site is awesome, I love it, I really feel it in the heart once I shut the ambient sound/music stuff off after I load this site up. Beautiful site named AntiLimit that I really recommend you check out just because it looks that nice. Perfect example of both smooth and clean and awesome, I just love this site! Well emotion aside, what can we gain from this site?
No much in the way of extra “stuff” that will take away our “clean” look.
Simple header bars, again, stretching all the way across the screen.
The layout of the images on the main page is very cool, also note, they have no border so it is a clean cut, clean edged look which tends toward that clean “look”.
7.
Another very clean site here in the 7 spot. PixelFly is a very simple site, but we can gather some interesting info from it nonetheless.
Simple is good! Not too, too much is being done, yet we have a nice portfolio site!
The navigation does not have to be big fancy buttons to look great!
The background fading into the solid color is always a great way to get a quick background, again you can do this using CSS.
The short, but wide thumbnails on the portfolio page are very cool, maybe we can use thumbnails similar in one of our own designs?
Is that a semi-Opaque edge wrapping around the site? Very sharp.
8.
Here we have yet another very clean site called Chocolat Media, check out the site via the link. Very cool site with a lot of gray and silver which is not a bad thing, I actually quite like it! I immediately grab a few things when I see just the first page of this site…
Simple, very clean navigation, again only a simple text rollover and it still looks good.
The pseudo-metallic background tends to make the site “flash” or “pop” a little more.
Those big, flat, simple rollovers at the bottom of the site and awesome, that is something I can use at some point in the future for sure!
If you click any of the navigation links you will see that the pages have simple clean white body layouts with large bright frameless images at the top all leading to a nice simple, clean, yet very sharp look.
9.
Number 9 already! Here is a cool site called RawNet which is pretty interesting because usually that much red hurts my eyes but they have done a masterful job of harnessing the power and punch of red and deliver a beautiful site. What can we learn here?
Offset heavy or bright colors with a lot of white, you may get a very nice effect.
That semi-Opaque edge again and still looking sharp, it actually almost leads us to believe the site has been coated with contact paper plastic stuff I used to use back in arts and crafts.
Interesting florals, we may want to find some simple Photoshop brushes to help us achieve this effect easily on our own.
Neat Flash headers on each page, very smooth.
That one little ornamental ornament thing at the bottom of the page which divides the page from the lower navigation bar, I love it! It’s all about the little things! Going the extra 10%
10.
Perfect 10! Let’s take a look at the final of my 10 example sites here. This is a web design company called Studio7Designs, which is not my business (I promise!), but they do have a cool site! There are a couple of things I like about their site that I may try to keep in mind when designing for my clients.
Interesting background which is continued at the base of the site… nice work there.
Simple almost metallic navigation bar leading to the frameless header image with simple rollovers is a very clean look. We do not need to get complex to have a great looking and functional website!
Rounded buttons with subtle rollovers are nice.
Dividing portions of the body of the site with simple, subtle lines and gradients is both effective and beautiful.
The footer is awesome, just the perfect shade of gray and the larger phone number with a subtle gradient is a very nice element down there.
Well guys I hope this has helped you all in your quest for better looking designs and great web sites for you and your clients! Thanks for following my though process as I toured these websites and if you have any sites you think would be great, or if you would like to see more of this type of post PLEASE let me know!
Have a great week you guys!
