Garry Milne: Skating His Way to the Top

































Like his creations, there are many layers to Garry Milne. While some of his images may have dark undertones, Milne is anything but. Here he talks about his inspirations, skateboarding and the importance of being nice to people.

Mark Twain once said, “Clothes make the man.” If such a statement is true then we’re in for a hell of a ride with UK-based Illustrator Garry Milne as he describes his usual outfit as being a skin tight zebra print jumpsuit. That was quickly followed by the obligatory, “I’m kidding,” of course but still…

So do I start with Garry Milne the person or Garry Milne the artist? Both are equally fascinating. Here are some quick facts about him: he enjoys a “super nice” White Russian, can flick his slipper into the air and catch it back on his foot, and chose the 1990s hip hop anthem “Jump” by Kriss Kross as the music to feature on his MySpace page, though on that same page he says his favorite kind of music is “anything with a pan-pipe solo long enough to make me question what I’ve done with my life.” If that alone doesn’t endear you to him then maybe I should mention the fact that his intricate, complicated illustrations have been featured in publications such as 4 Talent Magazine and The Skinny’s Student Guide.


The Secret’s Out

Milne currently resides in a flat in Hertfordshire with his girlfriend Nadine who is pursuing a PhD in Psychology. It makes you wonder if she can read into Milne’s complicated illustrations and discern anything about the inner workings of his mind. He assures me that he never puts any secret images or inside jokes into his client work but “that’s not a bad idea, though…maybe [I] should!” He says he leaves the “strange stuff” for his personal work.

As a child he said he was loud and outgoing, and credits that to having an older brother to look after him. In addition to his older brother Stuart, his family consists of his parents who have always been extremely supportive of his artistic endeavors, allowing him to “make a mess of their living room for many years.” Stuart, who has featured some of his photography work alongside his brother’s in an exhibit titled “Milne vs. Milne”, was a different story in Milne’s early days. According to him, his older sibling taught him his first lesson in perseverance, in a way that only an older sibling can:

"I drew a picture of the Bushwackers- a WWF wrestling tag team back in the day. I was so pleased with it and I was showing everyone. It was sooo bad but everyone was being nice. I showed my brother and he couldn’t keep the laughter in – he cracked up. I got in a strop and tore it up. The next day I did another one which was better than the first. I think that taught me a valuable lesson about not settling on your first attempts."


Lessons Learned

Interesting enough, Milne passes that “big brother torch” to those starting out in design, “Don’t give up. No matter how unlikely it seems – remember why you started art/design – because you love it and things will happen. Also be nice to people. It’s a real cliché, but knowing the right people is a big part of the game.”

Right now Milne has a day job as a Graphic Designer at a local company where he does the typical promotional and corporate work. It’s at night and some weekends when he does his illustrating and creates pieces like Day Dreamer, Head or Heart and Piece Offering. I wouldn’t have been doing my job if I didn’t be a pain and ask him to explain that one, particularly because he describes it on his website as a “Personal comment on how I sometimes avoid explaining my work.” Milne played nice and answered the question for me, but I feel like I’d somehow be taking away some of the mystique if I revealed his answer.

To prepare for his career Milne went to school and then stayed on to 6th form before heading to college to do an art foundation degree. After that he went on to university to study graphic design and Illustration. While at university he chose to specialize in illustration, but also learned a lot about design. About that he says, “That has helped me develop my style and also helps when it comes to commissions – I’m not just providing illustrations.”

After university he started doing some freelance design work and then concentrated on illustration. As is common, it took a while for him to get work and be noticed. This is where his big brother’s earlier lesson in perseverance kicks in again. “Once I was given a few briefs – more seemed to follow. I think it’s just a case of proving you can deliver a job and being in mind when the right job comes up.”


Patience is a Virtue

So far Milne’s been lucky enough to have fairly long deadlines when it comes to his work so it lets him take on more than one project at a time. While he handles those deadlines like the consummate professional that he is, he admits that they can be hard sometimes. "If you get really into a brief sometimes you’d just like to continue working on it, maybe change some things – take it further."

Luckily, though, Milne says he seems to get “fairly open briefs [and] usually the client tell me their loose idea or some aspects they want featured and I get to work.” He always starts with pencil drawings that are then scanned in and colored on the computer. Though he typically has a rough composition in mind when he starts, that often changes while he works using pencils, pens, paintbrushes, a scanner and a Mac. When in the need for some inspiration he turns to his large collection of art books as seeing the work of others makes him want to create something of his own.

Working on that Mac has sped things up when it comes to the amount of time he spends on each illustration and the longest he’s ever spend on a computer-generated one is two weeks. The longest he’s ever spent on one piece was a painting that took him two months. While painting is his favorite artistic activity, it’s something where he finds he lacks the patience he’s mastered with his illustrations. “I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level. I’m a little impatient though – I want to see the end result now.”

One of Milne’s current projects is a series of skateboards for Motive which will be released soon. Skateboarding is another passion of Milne’s. He’s been very active in it since he was a child and even gave up playing football and basketball in school in order to pursue that more. There was a time when he thought about pursuing a professional career in it but that “didn’t really work out.” While participating in skateboarding may not have worked out career wise, it doesn’t mean that it hasn’t still played a big part in the career path he did choose. The Motive project won’t be his first foray into designing boards. He’s also done a series for Discipline, which he features on his website.

I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level.

A Clean Slate

Other than skateboarding, Milne never really set out into the world with a clear idea of what he wanted to pursue. Maybe that’s why his favorite part of any project is the blank page. That page doesn’t stay blank for long, though at the moment his workload is heavy since he’s juggling a full-time job and his freelancing. Eventually, though, he’d like to be able to devote more time to his freelance illustrating, painting and exhibiting.

At 27, though, Milne has learned some hard lessons about the design world. “Don’t take things too literally. You can get promised a lot of things and sadly they rarely come through. That sounds a bit pessimistic but just don’t get too excited about things until they’re definitely happening.” It’s safe to say, though, that things are definitely happening with this brilliant illustrator.


More From Garry Milne


On the Web

Check out Garry Milne on the web.

Psdtuts Presents Exclusive Wallpapers by Jennifer Cirpici

































Another extremely talented designer by the name of Jennifer Cirpici has volunteered to create two exclusive wallpapers for the readers of PsdTuts+. This months exclusive wallpapers feature something for everyone, on one hand we have a beautiful scenery shot with lots of bright colors, and on the other we have something more textured and rough with lots of interesting paint effects. So make sure to check this out, download the wallpaper and then view Jennifer’s other art.


Exclusive Wallpaper – Breaking Canvas

I always wanted to make a Digital Artwork with a lot of bright colors because colors are associated with happiness. This is a promotional poster for my portfolio website. The concept behind this is that the guy you’re seeing doesn’t want to be stuck in a canvas like the animals but wants to jump out of it, into the freedom, not being tied to strict rules. I always work with a concept; I want my work to be more than just something you can see on the screen but also something to think about, to inspire people.


Exclusive Widescreen Wallpaper – What Guys Dream Of

For this illustration, I was inspired by Zach Bush and his matte paintings. The concept about this piece is brought out from books like ”Where is Waldo?” I wanted to create this surreal landscape with a woman in it, to see the woman you really have search for it. I made this with my wacom Intous 3 tablet and Photoshop, using different stocks on sxc, crestock, and cgtextures.


Some of Jennifer’s Other Work


Special Thanks to Jennifer

Once again I’d like to thank Jennifer for participating and giving the readers an awesome new wallpaper for their desktops. Please make sure to visit Jennifer’s portfolio and check out some of her great art.

Also stay tuned for some more exclusive high quality wallpaper projects in the near
future!

Create a Graffiti-Inspired Illustration Using Photoshop and Illustrator

































Photoshop and Illustrator compliment each other in many ways. Today we will demonstrate how you can use them in tandem to draw and color a graffiti-inspired illustration. Let’s get started!


Before You Begin

Before you begin, it’s always good to do a bit of planning. For graffiti art, do some research and keep it in mind when you begin planning out your sketch. Use thicker lines for the outline, thinner lines for the inner details, and wispy lines for more defined creases.


Step 2

Sketch out a drawing and scan it at 300 DPI. When you’re finished, go ahead and make a new document in Illustrator. Go to File > Place and place your image on the canvas.

Step 2


Step 3

Use your favorite brush to do the thick outline of your character and add in the face’s main details such as eyes, mouth, ears and nose. I changed up the eyes and nose for a more flowing appearance. The brushes I used are just the default circles.

Step 3

Step 3


Step 4

To add a more Graffiti look to your piece, you’ll create five brushes of your choice but keep in mind to make sure they have some sort of point at the end, and also make one white. Now use these brushes to trace the lines of your sketch.

Step 4

Step 4

Step 4


Step 5

Once you’ve traced your sketch, it’s now time to start adding in the details. I’ve added speckles to the tongue, eyebrows and neck while adding rough lines to parts of the piece. I also decided to add white highlights to it so it would balance out the dense look. Once you’ve finished with the line art, save this Illustrator file and bring it in to Photoshop to add color. You could do this in Illustrator if you wanted to but for the purposes of this tutorial we will do it in Photoshop.

Step 5


Step 6

Now open up your lovely file in Photoshop. First, I choose where and how I’m going to incorporate my base colors in my piece. I decide to make the outline a darkish brown, while highlights and coloring will be a mix of light brown and blue. I start by holding down Cmd/Ctrl and clicking on my line art layer to make a selection. With the selection still active, delete the line art layer, make a new one and fill it you’re your desired color.

Step 6

Step 6


Step 7

Next, choose your base color. For mine, the face will be colored a light brown. First, make a new layer underneath the line art, then take the Magic Wand Tool and select the whole inside of the face. Go to Select > Modify > Expand and expand the selection by 1 or 2 pixels. This is so we won’t have ugly spaces between the coloring and the outline while keeping a smooth appearance. Repeat until every space of this color is filled in, which should only be the parts you’ve decided will have it.

Step 7

Step 7

Step 7


Step 8

Go ahead and choose a slightly darker version of the base color you used, we will be adding the shadows. Pick places where you think shading would look best and use the pen tool to create fills.

Step 8


Step 9

Take your third color, which will be for filling certain areas of the piece and making it more colorful. As I said, I chose a blue in which I colored places like Eyebrows, tongue, and certain places of the neck. Remember to add a darker shade of blue for shadows in these areas as well.

Step 9


Step 10

I chose to put more highlights in this piece, which usually gives it a more vibrant and detailed look. I decided to put blue highlights under the line art in creases to add to the appearance.

Step 10


Step 11

Color in everything else you’ve missed, but remember to balance the colors evenly throughout the whole piece.

Step 11


Step 12

We can’t just have a plain background, right? Add a gradient to the background. I chose white and blue, the same colors I used for shading.

Step 12


Step 13

To outline the figure, flatten your coloring layers and outline together to form one layer, which you can easily do by just Right Click > Merge Down. Next Cmd/Ctrl + Click on that layer and go to Select > Modify > Expand and expand by 8 pixels. Make a new layer underneath your character and fill it with white.

Step 13


Step 14

Take your pen tool and start drawing the desired shapes underneath both the white outline and figure layers. Then fill it in with a color in sync with the rest of your piece. You can keep adding to this layer until you achieve a desired result. One thing to keep in mind though, background effects for single illustrations always make it look more appealing.

Step 14


Final Image

I’m very pleased you’ve read through the whole tutorial, and hopefully you got some needed tips on how to make a full-blown illustration in the Graffiti style. There are tons of different versions of this style, but I wanted to share my own with all of you and the process I go through. Make sure to keep experimenting and make up your own crazy elements to which you could take to the streets!

Final Image

Quick Tip: Create a Realistic Credit Card in Photoshop

































In today’s quick tip tutorial we will demonstrate how to create a realistic-looking credit card using Photoshop and Illustrator in just a few short steps. Let’s get started!


Step 1

To speed up the process, we will begin by putting together some basic graphics in Illustrator. Make a 3.5in by 1.9in rounded rectangle, then fill the object with a color or gradient of your choice.

Draw some curvy lines as shown using the Pen Tool. Then go to Object > Blend > Blend > Blend Options > Specific Steps, enter 30 and click OK. Make two different lines with different colors.

Select the line art that you just created and apply a clipping mask using the shape of the credit card. Make sure that the credit card shape is placed on top of your line art and that you’ve duplicated your credit card background as well.

Note: if you are using Illustrator CS5, select the credit card and click the Draw Inside option to Paste (Cmd/Ctrl + V) inside the objects.

Use the Pen Tool to draw the ribbon as shown.


Step 2

We are now finished with Illustrator. Let’s get started by opening Photoshop, creating a new canvas that’s a bit larger than your Illustrator document and then by copying and pasting each element that you created in Illustrator individually. At this stage, you should already have some logos and graphics that you would like to place on the card. If not, go ahead and create some. Add your graphics to the card, as shown. Feel free to use the following fonts in your card as well. Download them here and here.


Step 3

Now it’s time to add your text. Choose the Oval Typeface using #f1efed. Type out some random numbers and a name. Then apply the following layer styles.


Step 4

Now it’s starting to look more like a credit card, let’s add some shadows to make it look more realistic. Duplicate each layer, change the font’s color to black and turn off the Layer Styles, this will give us the base shadow. Now move the shadow numbers about 3-5 pixels to the right and 3 pixels down (do the same with the name as well), now go to Filter > Blur > Motion Blur, then type in Angle: -34 and Distance: 10px; set the Layer Blend to Multiply and 50% Opacity. For final touches of the front side, go ahead and look at your reference credit card and add an expiration date wherever you want it placed and you will be done with the front side, make a new folder and drop all the layers inside and name it FRONT.


Step 5

Now, let’s work on the backside of the credit card. Duplicate the credit card base, move the layer to the FRONT folder, then Right Click on the layer and rasterize, make a selection of it and fill it up with a color you used on the front side (I used the bright red on the top left of the credit card’s front side). Note: don’t use gradients for the back.

Go to the FRONT folder, duplicate the text layers that you used Layer Styles (credit card numbers, name and expiration date in my case) on and drag them to the BACK folder, then flip them Horizontally and change the color of the text to the same as the credit card’s back.

Now we need to change the Layer Styles of the text layers to make them look as if they were stamped and look as the reference credit card, Double Click on the layer and change the values as shown below, do the same for the other layers.


Step 6

Now the credit card looks like your reference, go ahead and arrange the rest of the elements you made for the back side of the credit card.

Some elements like the signature rectangle can be done in Photoshop, if you have a logo of your own you can rotate it 45 degrees and duplicate several times and make a pattern, then select each one and change the color of it with Hue and Saturation (Cmd/Ctrl + U), then Merge them all together, in another layer make a rectangle the size you want for the signature and fill it with white, make a selection of rectangle > select the pattern layer and click (Cmd/Ctrl + Shift + I) to inverse the selection and Erase, then merge both layers.

To make the signature make another layer, select a hard black brush and make a random signature. Finally, add the security codes.


Step 7

If you like, you could end the tutorial here but now we are going to add some perspective to the card. Duplicate each folder, then Right Click on the group folder and select Merge Group, do the same for each folder. Now we have 2 layers, one of the front and one for the back of the credit card, select both layers and Click Cmd/Ctrl + T to transform and make them smaller, then rotate a little and Right Click to select Perspective and transform as desired.


Step 8

Select a layer of the credit card (no matter if it’s front or back) and duplicate, make a selection of it and fill it with a light grey, then move it about 2px to the right. To make the shadow of the card, Duplicate the credit card and make a selection of it and fill it with black, then Click Cmd/Ctrl + T to transform > Right click and select Distort and transform as desired; Go to Filter > Blur > Gaussian Blur > 10 px radius; set the Layer Blend to Multiply at 30% Opacity.

To make the Reflection, Duplicate both credit card layers, select both layers and flip them vertically (Cmd + T > Right Click > Flip Vertical) and arrange them on the tip of the credit card; select a Soft Eraser Brush with 30% Opacity and erase each layer to make the reflection.


Step 9

Let’s make some lights and shadows, make a selection of the credit card, then make a new layer, select a white soft brush, Normal Mode at 20% Opacity and on the top left corner add some light, then change color to black and add some shadows on the lower right corner.


Final Image

Make a background and you are done! To make images of each side of the credit card just turn off the front side layer, remember to turn on or off the corresponding reflection layer as well; you can use this tutorial to make a credit card icon; remember that you can make different color credit cards by playing with Hue and Saturation.

Dried Ink Stains: 20 High Resolution Brushes – Premium Psdpack

































Today, we have a new set of Premium Brushes available for Psd Premium Members. This set was crafted by Grant Friedman of Colorburned and includes 20 High Resolution Photoshop Ink Stain Brushes. If your next project calls for a grungy, stained look, then this set is perfect for you. Learn more at the jump!


High Resolution Ink Stain Brushes

This new Premium Psdpack Pack is available for Psd Premium Members today and includes 20 high resolution brushes ranging somewhere in the neighborhood of 2500 by 2500 pixels. Each brush was created using varied mixtures of ink and water. This mixture was applied in layers which allowed the stains to dry and mix together in a wide range of opacities. Members can Log in and Download! Otherwise, Join Now! A preview of the brushes is below.

sample

This new Premium Psdpack Pack was created by Grant Friedman of Colorburned and is available for Psd Premium Members to download today. Grant is also the Editor of Psdtuts+ and creates loads of professional quality Photoshop brushes on a regular basis. We’re excited to partner up with him on this release.

pack

Psd Premium Membership

As you know, we run a Premium membership system that costs $9 a month (or $22 for 3 months!), which gives members access to the Source files for tutorials as well as periodic extra tutorials, and Premium Packs like this one! If you’re a Premium member you can log in and download this set. If you’re not a member, you can of course join today!

Create a Realistic iMac Icon in Photoshop

































There is a lot that you can do in Photoshop with just a few select tools. Today, we will demonstrate how to create a realistic iMac icon in Photoshop that includes a 27-inch screen, a keyboard, and a mouse. Let’s get started!


Tutorial Assets


Step 1

Create new document 2048px x 1400px. This resolution is set according to the approximate dimensions of the reference image. If you want to create a smaller illustration, just adjust dimensions of workspace and reference image to your needs.


Step 2

Before you begin, remember to keep your layers organized into folders. This is very important as this tutorial will require you to create many of them.


Step 3: Screen

Place the reference image onto the workspace and center it if necessary. Then select the Pen Tool (P) and then Freeform Pen Tool in Options panel. Then enable the Magnetic check box in the same panel. This enables Magnetic Freeform Pen tool, which will follow the part of image and create Custom Shapes in seconds.

Image Description
Image Description

Step 4

Create a new folder inside the iMac folder and name it Leg. Select the Magnetic Freeform Pen Tool and start drawing the shape. We are using the freeform tool to create smooth curves. When you are dragging the mouse over the border between the image and white space the anchor points are just copying the shape of it. But as you can see the tool is not so precise on straight lines so it creates too many anchor points there. The solution is to press Alt + Click to start the straight line and then Click to place the ending anchor point and get back to Freeform mode. After closing your path, feel free to remove some of the useless anchor points and simplify your path a bit.

Image Description
Image Description

Double click the layer with new shape to open the layer styles dialog and create a new gradient with following values and positions: #8b8b8b at 0%, #CCCCCC at 7% and 49%, #666666 at 54% #CCCCCC at 58% and #CCCCCC at 100%. This will create shadows and highlights at their place.

Image Description

Create new layer just above the base shape. We need this layer for adding a shadow at the top of leg because this additional one has different direction and shape than the gradient effect.

As the shadow will be inside the base shape the best way to keep it inside the shape is to create a layer mask. As the shape itself has one by default we don’t need to create a new one. Select the base shape’s layer and press Alt + Drag the layer mask to the new layer above. This shortcut will create a copy of the layer mask on new layer.

Select the layer and then select the Brush Tool (B) with 0% – 10% hardness and big diameter and paint the shadow in top right corner of the leg.

Image Description
Image Description

Copy the base shape layer by selecting Cmd/Ctrl + Alt + J and in the upcoming dialog change the name. Move the layer above the shadow layer (#3). Select the Direct Selection Tool (A) and select particular anchor points and edit the shape to create top side of the leg. Create gradient layer effect with values #ced2db at 0% and 38%, and #717073 at 100%. Create two new layers above new shape. Name them Highlight (#1) and Shadow (#2). Copy the layer mask to them (Alt + Drag). With Polygonal Lasso Tool (L) create marquee for the shadow – it can be wider than base shape because the layer mask will hide everything outside. Fill it with #333333. Disable marquee, select Filter > Blur > Gaussian Blur and apply blur according to the shadow. Just play with the value to get most realistic effect of shadow.

Image Description
Image Description

The highlight layer is pretty similar. Copy layer mask. Create marquee with the Polygonal Lasso Tool (L). Fill it with #CCCCCC. Disable marquee, select Filter > Blur > Gaussian Blur. Now apply little blur about 3. Create a selection with the Polygonal Lasso Tool (L) – Top border should be directly on the end of blur and the bottom border should be one height out of the blur. With the marquee select Filter > Blur > Gaussian Blur and apply the same value as for the shadow.

Image Description

Step 5

Start by drawing the basic shape of the display. Select the Magnetic Freeform Pen Tool and start drawing the shape. Try to create as few anchor points as possible by Alt + Clicking for straight lines. When finishing the shape adjust anchor points to fit

Image Description

Add a Gradient Layer style with following values to the shape: #333333 at 0% and 13%, #b5b5b5 at 15%, #666666 at 17%, #999999 at 20% and #CCCCCC at 100%. Set the angle of gradient effect to 77 degrees.

Image Description

Now create a new layer above the shape and copy the layer mask to it. Select Brush Tool (B) with hardness about 5% and color #CCCCCC and paint shadow in the top right corner. Select the display shape and duplicate it by Cmd/Ctrl + Alt + J. Move the layer above the one with shadow. Move and adjust anchor points with Direct Selection Tool (A) to create front side of the display. Create a Gradient Layer Effect with following values: #999999 at 0%, #e3e2e6 at 100% and set angle to 10 degrees.

Image Description

Step 6

Duplicate layer (Cmd/Ctrl + Alt + J) and set up Color Overlay layer style effect to #000000. Select the shape with Path selection Tool (A) and select subtract mode. Select Rectangle tool (U) and cover about 20% of lower part of screen. Press Combine. Rename this layer to Display Glass.

Place your Wallpaper onto the workspace and transform (Edit > Transform > Perspective) it according to the perspective.

Image Description

Create new folder and name it Menu. Create new layer in this folder and name it Menu too. Apply layer mask in shape of transformed wallpaper on it – select the layer and then select Polygonal Lasso Tool (L). Create selection in shape of the transformed wallpaper and select Add layer mask option at the bottom of layers panel.

Select Polygonal Lasso Tool (L) and create selection for menu in top part of the display. Select Gradient Tool (G) and fill that selection with gradient from #d1d0d1 to #ffffff. The darker part of the gradient is the farther one.

Select Ellipse Tool (U) and create small ellipse which will substitute the logo in tray bar. Move it to the position at top left corner and adjust its size (Cmd/Ctrl + T).

Select Horizontal Type Tool (T) and create the menu titles such as Preview File Edit Display Window Help or whatever. Move it next to the logo at top left corner and also adjust its size (Cmd/Ctrl + T). With Horizontal Type Tool (T) selected create new text layer with time as12:15 or whatever and place it in the top right corner of display. As you can see the text doesn’t respect the perspective much. Select Edit > Transform > Skew transform and adjust the shape of this two text layers to fit the perspective.

Image Description

Select Rectangle Tool (U) and create dock shape using #FFFFFF. Set the transparency of the shape layer to 50%. Select Direct Selection Tool (A) and adjust the positions of anchor points to fit the shape of the Dock.

Now we need the Black & Blue Icons (this tutorial works with Add On 1). Place the icons in the row. Merge them (select layers to merge and Cmd/Ctrl + E) for easier and consistent transformation. Name this icon pack layer Icons. Copy the layer mask from menu layer to this layer. Change the size of the icon pack (Edit > Free Transform or Cmd/Ctrl + T) and adjust the perspective (Edit > Transform > Perspective) and use Cmd/Ctrl + T to polish the finish. Duplicate Layer Cmd/Ctrl + Alt + J and name it Icons Ref. Select Edit > Transform > Flip Vertical to mirror the icons vertically and move them below the original ones. Adjust the perspective by Edit > Transform > Skew and set the Opacity of the layer around 45%.

Image Description

Select the Rounded Rectangle Tool (U) and set the radius to 5. Create two thin shapes for devices and place them on the side of the display.

Create a new layer and name it Reflection. Cmd/Ctrl + Click on the black screen layer (Display Glass layer) mask to create selection of display then select Polygonal Lasso Tool (L). Hold Alt and create selection around the reflection to subtract the part that is not needed for the reflection. With reflection selection still active select Gradient Tool (G) and fill the selection with gradient of following values: #FFFFFF at 0% and opacity 100%, #FFFFFF at 100% and opacity 0%. Then to get better result select Eraser Tool (E) with hardness set to 0% and size about 150 and erase the bottom border of the reflection.

Select Ellipse Tool (U) and create base shape for apple. With Ellipse Tool (U) still selected enable Subtract mode and create three new shapes over the base one to subtract holes from it. Switch to Create New Shape Layer mode back from Subtract mode. Create new ellipse for tip of the apple. Select Convert Point Tool and click on top and bottom anchor points of the ellipse to remove curves. Move the tip to the top of the apple. If the color of the apple is other than grey change it to #333333. Now place the finished apple to the bottom center of the display.

Image Description
Image Description

Step 7: Mouse

The mouse will be made from fewer layers than the display. It will contain three shape layers for base parts of the mouse and two layers for top reflection and logo.

Image Description

Select the Ellipse Tool (U) and create an ellipse that mostly fits the shape of the mouse. Select the Direct Selection Tool (A) and adjust its position and shape to completely fit the mouse shape. In this case it is easier to use ellipse tool (U) instead of magnetic freeform pen (P) because the shape is small and contains four almost symmetrical anchor points.

Create a Gradient overlay layer style with following values: #e4e4e4 at 0%, #aaabaf at 46% and 52%, #333333 at 100% and set the angle of gradient to -87.

Image Description

Duplicate the base layer and add anchor points (Add Anchor Point Tool) to the bottom border line. Edit the anchor points to adjust shape by using the Direct Selection Tool (A) and Convert Point Tool.

Image Description

Create a Gradient overlay layer style with following values: #cccae0 at 0%, #d8d8e2 at 100% and set the angle of gradient to 90.

Create a Drop Shadow layer style with the following values: Blend Mode: Multiply and #000000, Opacity 75%, Angle 95 degrees, Distance 2px, Spread 0%, Size 1px.

Duplicate the layer and remove effects. Set the color of this shape layer to #dbdbe7. Adjust the anchor points’ position and curve with Direct Selection Tool (A) and Convert Point Tool to create top reflection of the mouse.

Ctrl+ Click on the layer mask of this reflection shape to create selection of it. Create a new layer for the light reflection. With selection still active select Polygonal Lasso Tool (L) and with Alt pressed reduce the size of the selection to almost fit the light reflection. Select Brush Tool (B) and #FFFFFF color. Set the brush hardness to 0% and paint the light reflection.

To create the logo on top just select Ellipse Tool (U) and create ellipse shape. Add some Anchor points with Add Anchor Point Tool. Select Convert Point Tool and recreate the shape of apple to fit the perspective.

Image Description

Step 8: Keyboard

The last step of creating the realistic iMac icon is to make the keyboard. This part will work with shapes, gradients, Magnetic Freeform Pen Tool and some layer effects. So if you don’t have it yet create folder and name it Keyboard.

Image Description

Select Magnetic Freeform Pen Tool. Create Curves by Clicking + dragging and straight lines by Alt + Clicking. Create as few anchor points as possible but stay focused on the shape.

Image Description

Select the Ellipse Tool (U) and create the side button shape. Apply a Gradient Overlay Effect to it with following values: #c6c6c6 at 0%, #666666 at 5%, #999999 at 15%, #dfdfdf at 30%, #999999 at 45%, #cccccc at 50%, #999999 at 55%, #dfdfdf at 70%, #999999 at 85%, #666666 at 85%, #c6c6c6 at 100%. The gradient is symmetrical so every color on the left side has the equal one on the right. Set the gradient Style to Angle and Angle to 120.

Image Description

Duplicate the shape layer. Transform (Cmd/Ctrl + T) the size to create a small center of the button. Add the Stroke layer effect to it. Set the Size to 2, Position to Inside and Color to #5f5f5f. Set opacity of the shape layer to 28%.

Image Description

Select Pen Tool (P) and create the shape for the keyboard bottom shadow. Adjust the anchor points with Direct Selection Tool (A) and curves with Convert Point Tool. Add Gradient Layer Effect to it with following values: #000000 at 0%, #545559 at 72% and #545559 at 100%. Set the Gradient Angle to 88.

Image Description

Select the Pen Tool (P) or Magnetic Freeform Pen. Create top of the keyboard. I created six anchor points – two anchor points for each curve. Select the Direct Selection Tool (A) and Convert Point Tool and adjust curves to fit the ideal shape. Add the Gradient layer Effect with following values: #9b9b9b at 0%, #747474 at 100%. Set the Gradient Angle to 85.

Image Description

Duplicate the shape layer. Reduce size of the shape a bit (Cmd/Ctrl + T). Select Direct Selection Tool (A) and Convert Point Tool and adjust the position of the anchor points and curves at the corners. Set the shape color to #f2f2f2. Now we have Keyboard ready for curving the keys and add some finishing layers to it.

Image Description
Image Description

Select Pen Tool and enable Subtract From The Shape Area tool option. Look on the reference image  and try to reduce as much of the shape as possible but with keeping the look still in the shape of keyboard and its keys. The most common shape you can subtract is a rectangle so create rectangles to subtract the holes between particular keys. Don’t forget of huge place around the arrows. During the steps or at the end of subtracting, click on Combine.

Create New Layer (Cmd/Ctrl + Alt + J). Copy the layer mask of the keys shape layer to it (Alt + Drag). Select Brush Tool (B) set Hardness to 0% and Size to 20px. Set color to #a7a7a7 and draw the side shadow of the keys.

Image Description

Step 9: Polish

The last part of this tutorial is focused on the reflections and shadows casted by the iMac and its accessories. Duplicate the display folder. Keep it selected and merge it (Cmd/Ctrl + E). Move it to the reflections folder. Flip the layer Vertically (Edit > Transform > Flip Vertical). Move the image to the bottom corner of the original. Select Warp Transform (Edit > Transform > Warp) and transform the reflection image to face the bottom shape of the original image.

Select Eraser Tool (E) and set Hardness to 0% and Size about 250px. Erase about half of the reflection image. Set Opacity of the brush to 50% and erase the remaining reflection. As the opacity is set to 50% the eraser tool will remove only half of it so the image will be transparent and less visible. Adjust the visibility of reflection or even its position.

Image Description

Duplicate the folder of the Mouse. Merge it (Cmd/Ctrl + E). Move it to the reflections folder. Select Warp Transform (Edit > Transform > Warp) and transform the reflection image to face the bottom of the mouse.

Select Eraser Tool (E) and with Hardness set to 0% and size about 250px. Set brush Opacity to 50% and erase the remaining reflection. The effect is the same as for the Display. Also adjust the position and layer opacity.

Image Description

The reflection of the keyboard can be little bit tricky because of its shape so instead of duplicating layers we are going to draw the reflection ourselves.

Select the Pen Tool (P). Create a shape for the keyboard reflection. Just copy the border of the keyboard and make some space at the bottom according to the image to the left.

Select the Shape Layer and apply following Gradient Layer Effect values: #cdcdcd at 0%, #cdcdcd at 56%, #343434 at 60%, #cdcdcd at 63%, #cdcdcd at 74%, #141415 at 79%, #141415 at 100%.

Rasterize shape layer (right click on the layer and select Rasterize). Select Eraser Tool (E) with hardness set to 0% and size to 150. Erase the bottom part of the reflection according to the shape of the keyboard. Set Eraser opacity to 50% and partly erase the remaining parts of reflection.

Image Description

If you don’t have one create folder and name it Shadows. It should be beneath the iMac, Mouse and Keyboard folders and over the reflections folder.

Image Description

Create subfolder in the Shadows folder and name it Magic Mouse. Create two layers inside this folder and name them Lighter and Darker. The darker one should be above the lighter layer.

Select Lighter layer. Select Brush Tool (B). Set size to 20px and hardness to 30%. Set color to #828385. Paint shadow under the mouse and set the layer opacity to 20%.

Select Darker layer. Select Brush Tool (B). Keep the size of 20px and hardness of 30%. Set color to #343435 and paint the darker shadow. Adjust position of both layers.

Image Description

Create new layer in shadows folder beneath the Mouse folder and name it keyboard. Select Brush Tool (B) with Hardness set to 0%. The size should be set according to the part of the shadow. Set Color to #00000. Select Eraser Tool (E) and erase overdrawed parts. The last thing is to adjust position if it doesn’t fit.

Image Description
Image Description

Create a new layer in shadows folder beneath the keyboard layer. Select Brush Tool (B) with hardness set to 0%. The size depends on the part of the shadow as before but keep it small about 15px, paint the shadow at the bottom of the leg. Make it copy the shape of the leg and smoothly disappear at the sides.

Image Description

Final Image

Quick Tip: Lock Your SWF to a Specific Domain Name

Do you want to keep your SWF exclusive to your site? In this Quick Tip, we’ll look at how to use a “site lock” to stop people downloading your SWF and embedding it on a different website.


Final Result Preview

Here is the file running on an incorrect domain:

We’ll build an animated display to be activated when the SWF is on the wrong domain, as in the above example. Saying that, if you just want to learn about the site lock code, skip to Step 5.


Step 1: Tweener

Before you get started writing code and adding designs to the stage, you must first get Tweener. For this project I used open source, which can be used for open and commercial projects. Caurina tweener is available a code.google.com.

After you have downloaded Tweener, just copy and paste it to your project folder. Remember, the folder must be named caurina, inside the folder there must be a folder called transitions, and inside of that a load of Flash .as class files.

With the first step done, we can get on with coding and designing the file.


Step 2: File Size and Layers

The file size is irrelevant. Domain locker’s property is to lockdown your SWF, or component, in case someone has downloaded it from you without your permission.

For this example, I have used a stage size of 540 x 400, you can use whatever size you want.

After you’ve selected the file size, create 3 new layers as in the image below. Always keep your Actions Layer empty. Organised stages are much easier to work with and understand.


Step 3: The Censor System

After you have created the 3 layers, create 2 new simple movieclips. Place them wherever you want, whatever size you want. 40 pixel height by 10 pixel width let’s say, with no stroke. Positioning is not important, because we will be placing these movieclips by actionscript later on.

Now, comes the most important aspect of these movieclips, the registration point. Look at the pictures below, when converting your bitmaps to movieclips, remember to do the following else the file will not run at it’s full potential:

And of course, the instance names:

 

Congratulations! You’ve added the boxes that will shut the page down, in case the domain is wrong. Now, add a dynamic text box to the middle of the stage or anywhere you want it to be. This text box will inform the user who downloaded the file illegally that the file is protected by the script.. Give it an instance name of warning_txt


Step 4: Loading Necessary Classes

Now, once you’ve created the movieclips and the text box, you are ready to code. On the locked actions layer, press F9, and add the following code:

import flash.events.*;
import flash.display.LoaderInfo;
import flash.display.MovieClip;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLVariables;
import caurina.transitions.Tweener
  • flash.events.*; loads all the events we will probably need.
  • flash.display.LoaderInfo; brings up all information we need to load and that will load with the file.
  • flash.flash.display.MovieClip; loads all the events we will come across while using movieclips.
  • import caurina.transitions.Tweener; loads our tween engine, and the animation of the content blocking bars.

The rest of the events loaded are needed so that Flash gets access to the page URL in the bar.


Step 5: Checking for a Specific Page

var url:String = stage.loaderInfo.url;

Let’s suppose the SWF is loaded on the page http://www.domainName.com/siteFolder/sitePage.html. Line 9 retrieves this URL and assigns it to the string called url.


Step 6: Cause and Effect

Now that Flash knows where to get the URL from, it’s time to compare that with our web site’s URL, and take action if they match or don’t

function pageDomainCheckInit(event:Event):void {
	if (url != "http://www.domainName.com/siteFolder/sitePage.html") {

		warning_txt.text="This file is running on the wrong URL. Content Access Restricted!";
		closeBoxTop.x = 0
		closeBoxTop.visible = true;
		closeBoxTop.height= stage.stageHeight/2
		Tweener.addTween(closeBoxTop,{width:stage.stageWidth, alpha: 0.8, time:1, transition:"easeInOutExpo"});

		closeBoxBottom.x = stage.stageWidth
		closeBoxBottom.visible = true;
		closeBoxBottom.height= stage.stageHeight/2
		Tweener.addTween(closeBoxBottom,{width:stage.stageWidth, time:1, alpha: 0.8, transition:"easeInOutExpo"});
	} else {

		warning_txt.text=" ";
		closeBoxTop.visible = false;
		closeBoxBottom.visible = false;
	}
	stage.removeEventListener(Event.ENTER_FRAME, pageDomainCheckInit);
}

stage.addEventListener(Event.ENTER_FRAME, pageDomainCheckInit);

We’ve used an event listener to start the check-up of the previously detected URL string. What this basically does, is tell flash that if the string located in the navigation bar (or the URL where the page is hosted on) is not the correct one, then the page will execute the script of blocking out content and warn the user that the domain is incorrect. Otherwise, if the page is correctly placed, the boxes that close up the page will not be shown, neither will the warning text.

After this section is completed, we remove the event listener so the file does not eat up resources by checking and rechecking and rechecking over and over again. Once the string is successfully pulled, compared, and the script is successfully executed, the pageDomainCheckInit event is removed.

if (url != "http://www.domainName.com/siteFolder/sitePage.html") {

This section of the code, is basically an “IF NOT”, so if the page is not http://www.domainName.com/siteFolder/sitePage.html Flash will start executing functions below the IF, but otherwise – if the SWF is on the correct page – Flash will remove the blocks from stage, and keep everything neat and tidy. You’ll never know it’s there.

Now, let’s see what happens, when the file is not on the right domain.

warning_txt.text="This file is running on the wrong pageDomain. Content Access Restricted!";
closeBoxTop.x = 0
closeBoxTop.visible = true;
closeBoxTop.height= stage.stageHeight/2
Tweener.addTween(closeBoxTop,{width:stage.stageWidth, alpha: 0.8, time:1, transition:"easeInOutExpo"});

closeBoxBottom.x = stage.stageWidth
closeBoxBottom.visible = true;
closeBoxBottom.height= stage.stageHeight/2
Tweener.addTween(closeBoxBottom,{width:stage.stageWidth, time:1, alpha: 0.8, transition:"easeInOutExpo"});

The code you see here, positions the closeBoxes to stage start and stage end (closeBoxTop = 0 , closeBoxBotton = stage.stageWidth), and makes them invisible (closeBoxTop.visible = false, closeBoxBottom.visible = false) this hides them from the stage, keeps them away from view, and does not affect the site’s appearance. Nevertheless, they are there.

If the page, or the component is installed on a different site/domain name which it was not originally intended to be on, they become visible. They expand across the screen, covering it completely and alerting the user that the content is stolen or not where it’s supposed to be.

This measure not only informs the general user that the file is not where it’s supposed to be, but it also blocks out any content from being displayed.


Step 7: Checking for a Specific Domain

What if we only want to check whether the SWF is loaded on a specific domain?

So instead of checking if the SWF is at http://www.domainName.com/siteFolder/sitePage.html, we just check if it’s somewhere on the domainName.com website. So it could be at https://private.domainName.com/secure/secret.html and still work.

We can achieve this by editing the code that gets the URL, like so:

var url:String = stage.loaderInfo.url;		//this line was here before!
var urlBeginning:int = url.indexOf("://") + 3;
var urlTermination:int = url.indexOf("/", urlBeginning);
var pageDomain:String = url.substring(urlBeginning, urlTermination);
var lastDot:int = pageDomain.lastIndexOf(".") - 1;
var CharacterAfterDomain:int = pageDomain.lastIndexOf(".", lastDot) + 1;
pageDomain = pageDomain.substring(CharacterAfterDomain, pageDomain.length);

Code explained

Let’s suppose the SWF is loaded on the page http://www.domainName.com/siteFolder/sitePage.html. Line 9 retrieves this URL and assigns it to the String called url. That’s the same line we had before.

Line 10 of code retrieves the position within the URL of the ://

Line 11 of code retrieves the first / that appears in the URL after the ://. This is actually very important because between these your actual domain name can be found.

Line 12 of code, is just making the connection inside Flash of what’s in between the :// and the first / getting the domain name String ready for checking in the next step. At this point, with our example, pageDomain has been set to www.domainName.com.

The remaining code checks for the domain name string, what is before it (meaning “www” or “http://www.”) and what is after your domain name (meaning the “.”).

All of these are ignored, so that Flash can define the actual domain name. The domainName.com. Instead of checking:

if (url != "http://www.domainName.com/siteFolder/sitePage.html") {

…we check:

if (pageDomain != "domainName.com") {

The main problem with this technique is that it doesn’t work for domains that have three parts. For example, domainName.co.uk – this code will get “.co.uk” as the value of pageDomain. Still, it is my preferred method, as I will explain in the next step.


Step 8: Utility?

You may have several files on your server, on different domains, this method could have been done in such a manner that the file would be locked on one single and unique URL, as above. But if you were to run your file using deep linking for example, or subdomains, the file would stop working, due to the fact that the link would be invalid to the domain reader.

The fact that the code is if (pageDomain != "domainName.com") is very important. It will permit you to add this code to every file on your site, subdomain, deep link location; as long as your link is on that domain, the file will run, and the domain locker will not trigger!

Still, it can be useful to lock to something more specific than a domain name. Suppose you host your web site on a host like Amazon S3. Then your URL will be something like http://yoursitename.s3.amazonaws.com/folder/page.html. But someone else on Amazon S3 could have the URL http://someoneelse.s3.amazonaws.com/. They could upload the SWF to their site, and since the SWF would still be on amazonaws.com the domain locker would not lock.

Tip

Here’s a little tip you might really love. Let’s presume for a moment that you have the same content on several domain names and you don’t want to add a different code for each of your domains. You can make the file check for multiple domains at once really easily.

Meet the OR command: || Using this command inside the first checker you can add as many domains as you wish. Let me show you how! :)

Single domain checker:

(pageDomain!="domainName.com")

Multiple domain checker:

(pageDomain!="domainName.com" || "mydomain.com" || "hisdomain.com") really easy, isn’t it?


Conclusion

Well, this wraps it up. As you all know, full protection of flash files is never guaranteed 100%, but this is just another step, in making your site safer, better, and more secure against file theft. Don’t forget to encrypt your files before adding them to the server! Thanks for reading this tutorial, I hope it was useful to you, if you need any further help, don’t hesitate to leave your questions within the comment section.

Using AS3XLS with the Flex Framework: Data Display Options

This tutorial will cover implementation of the AS3XLS ActionScript 3.0 library for the Flex framework. This time, we’ll demonstrate editable properties of the Flex datagrid and the use of various charting components to display associated data imported from Excel .xls files.


View Screencast

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Flash CS5 for Designers: TLF and Hyperlinks + Sample Chapter!

Every type of TLF text in Flash — Read Only, Selectable, and Editable — supports hyperlinks. All it takes to add a link in a text container is to type in your text, select a few words, and enter the desired URL into the Properties panel. Optionally, you can enter a target as well.

The following is an exercise from Foundation Flash CS5 For Designers by Tom Green & Tiago Dias.
 
Congratulations to our three winners who all won a signed copy! And if you weren’t so lucky this time, help yourself to a sample chapter courtesy of FriendsOfEd. Enjoy!

If you want the whole text container hyperlinked, use the Selection tool to select the container itself, and then use the Link and Target properties in the Advanced Character options area of the Properties panel in the same way.

Applying a hyperlink to text

As easy as this approach is, a downside is the hyperlink underline added to the text. It simply can’t be removed. Still, hyperlinks may be absolute, such as http://www.SuperSite.com/thisPageHere.html, or relative, such as../thisOtherPage.html. For relative paths, it’s important to know that the path will be determined not from the point of view of the SWF, but from the HTML file that contains it.

For example, you may choose to keep all your HTML files in the root of your website. Because you’re an organized developer, you may choose to put all your image files in their own subfolder of the root, and you may just do the same with your Flash content. From a SWF’s point of view, the relative path to all HTML files requires stepping back one folder. So, if a SWF links to one of those pages, you might be tempted to precede the destination’s filename with ../, but don’t! The HTML file that contains the SWF in question is already in the same folder as the destination page, and it’s the containing HTML file’s point of view that matters.


Using ActionScript to Add Hyperlinks to TLF Text

As you saw in the previous example, you can use a piece of text in a container to trigger an event on the Flash stage. It goes without saying that the same piece of text can be used to launch a web page. Rather than rehash everything done previously, open the enclosed TLF_Hyperlink_AS.fla file and let’s see how this is accomplished.


Step 1: Select

Scroll down to line 32 of the Script pane.

Select the word NONE, and change it to UNDERLINE. The result of this change is to actually have the clickable text look like a common HTML hyperlink that uses an underline.


Step 2: LinkElement()

Press the Enter (Windows) or Return (Mac) key twice, and enter the following code block:

var link:LinkElement = new LinkElement();
link.href = "http://www.friendsofed.com";
var linkSpan:SpanElement =new SpanElement();
linkSpan.text = "Click here ";
link.addChild( linkSpan);
var span:SpanElement = new SpanElement();
span.text = " to download the files for this book.";
p.addChild(link);
p.addChild(span);
textFlow.addChild(p);

As you may have gathered, all items in a TLF container are influenced or managed by elements. The first two lines establish that a variable called link will be managed by a LinkElement and will be placed in a LinkElement() object. The next line uses the common href tag from HTML to identify the link.

Now that you have established where the link is going — to the friends of ED website — you create a span for the text that will be clicked, put the text into the span, and use the addChild() method to put the linkSpan on the stage.

The rest of the code adds the remaining text, associates the link to the text in the sentence (p), puts the sentence on the stage, and flows it into the textFlow container.


Step 3: Test

Save the file, and test the movie. The text containing the link, as shown below, is blue and sports a rather spiffy underline. Click the link, and the friends of ED homepage opens.

Using the UNDERLINE constant adds the common HTML underline users are used to.

Import Statements Used for This Exercise

These are the import statements used for this exercise:

import flash.display.Sprite;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.TextAlign;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.edit.EditManager;
import flashx.undo.UndoManager;
import flashx.textLayout.formats.TextDecoration;
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.elements.SpanElement;

Flash CS5 for Designers: Using TLF Text as a Button

It should come as no surprise that you can use TLF text as a button to kick off an event in your movie. For example, you could have a text block on the stage that talks about a visit to Times Square in New York, and when the user clicks the phrase Times Square, a photo appears on the stage. In this example, you are going to click some text, and a yellow star you will create on the stage starts spinning.

The following is an exercise from Foundation Flash CS5 For Designers by Tom Green & Tiago Dias.
 
If you’re feeling lucky, enter the Activetuts+ competition to win 1 of 3 signed copies! (Of course, you can always purchase one from FriendsOfEd..)

Step 1: New Document

Open a new Flash ActionScript 3.0 document, and save it as TLF_eventLink_AS.fla. Change the name of Layer 1 to Star, and add a new layer named actions.


Step 2: Select Polystar Tool

Click once in the first frame of the Star layer. Click and hold on the Rectangle tool on your toolbar, and select the Polystar tool.


Step 3: Mellow Yellow

In the Properties panel, twirl down the Fill and Stroke properties and set the Stroke value to None and the Fill value to Yellow (#FFFF00).


Step 4: Star

Twirl down the Tool Settings, and click the Options button to open the Tool Settings dialog box shown in Figure 6-26. Select Star from the Style drop-down, and enter 5 for the Number of Sides. Click OK to close the dialog box.

Use the PolyStar tool to create stars.


Step 5: MovieClip

Draw a star somewhere in the bottom half of the stage, convert it to a movie clip named Star, set its registration point to Center, and in the Properties panel give the Star movie clip the Instance name of starMC.


Step 6: Actions

Click the first frame of the actions layers, and open the Actions panel. When the panel opens, click once in the Script pane, and enter the following code block:

var containerSprite:Sprite = new Sprite();
this.addChild( containerSprite );
containerSprite.x  = 25
containerSprite.y = 50;

A Sprite is a virtual movie clip with no timeline. We start by creating a Sprite named containerSprite, which will be used to hold the text. The reason we need this is because there is going to be some interactivity involved. This Sprite is placed 25 pixels from the left edge of the stage and 50 pixels from the top.


Step 7: Configuration()

Press the Enter (Windows) or Return (Mac) key twice, and enter the following code:

var container :ContainerController = new ContainerController( containerSprite, 400, 300);</p>var config :Configuration = new Configuration();
var charFormat:TextLayoutFormat= new TextLayoutFormat();
charFormat.fontFamily= "Arial, Helvetica,_sans";
charFormat.fontSize = 14;
charFormat.color = 0X000000;
charFormat.textAlign = TextAlign.LEFT;
config.textFlowInitialFormat = charFormat;

Nothing new here. The container for the text is created along with the Configuration() object, and the formatting for the text to be placed in the container is created.


Step 8: linkHoverFormat

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

var textFlow :TextFlow = new TextFlow();
var p :P aragraphElement  = new ParagraphElement();
p.linkHoverFormat  = { color:0XFF0000 };
p.linkNormalFormat = { color:0x0000FF,textDecoration:TextDecoration.NONE };

The last two lines are new, and their purpose is to let you change the color of a word or group of words when the user rolls over them. The linkHoverFormat property belongs to the TextFormat class and is used to tell Flash what color the text identified as a link will be when the mouse rolls over it. In this case, the color will change to Red.

As you may have guessed, the second line tells Flash what color the link is to be when the mouse rolls off. In this case, it will be blue. Naturally, links are traditionally underlined. The way the underline is removed is to use the NONE constant, which is part of the TextDecoration class. If you want the underline, it would be TextDecoration.UNDERLINE.

The next step in the process is to tell Flash what to do when the colored text is clicked.


Step 9: Click

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

var link:LinkElement = new LinkElement();
link.addEventListener(FlowElementMouseEvent.CLICK, linkClicked);

There is, of course, nothing to click. Let’s deal with that issue.


Step 10: Span

Press the Enter (Windows) or Return (Mac) key a couple of times, and add the following:

var linkSpan:SpanElement = new SpanElement();
linkSpan.text = "Click here" ;
link.addChild(linkSpan);

var span:SpanElement = new SpanElement();
span.text = " to see your star spin on the stage";
p.addChild(link);
p.addChild(span);

The next step is to get the text flowing into the container.


Step 11: Spin

Press the Enter (Windows) or Return (Mac) key, and add the following:

textFlow.addChild(p);
textFlow.flowComposer.addController(container);
textFlow.flowComposer.updateAllControllers();

The final code bit is the function that gets the star spinning when the text is clicked. Enter the following:

function linkClicked(evt:FlowElementMouseEvent) :void{
   evt.preventDefault();
   var tween :Tween = new Tween( starMC, "rotation", Elastic.easeOut, 0, 180, 2, true);
}

The first line of code tells Flash to ignore any default settings there might be in regards to the mouse and the text in the container.

The magic happens in that second line. The parameters tell the Tween class to work with the rotation property of the star (starMC) and to apply an easeOut to the star when it finishes rotating. Naturally, Flash, being stupid, needs to be told that the rotation starts with the star at 0 degrees and to rotate across 180 degrees. It does this two times and uses seconds as the measure of time.


Step 12: Error Checking

Click the Check Syntax button as your first skim through the code looking for errors. If there are none, your computer will ding. If errors are found, they will be shown in the Compiler panel. The most common error will be spelling or a missing import statement.

Here’s a quick tip. If a class doesn’t show up as an import, the Compiler panel will tell you the property is undefined. Select the class in the code where it appears, and delete the text. Type in the first two letters of the class, and press Ctrl+spacebar. The class will appear in the resulting code hint. Double-click the class to add it back into the code. This also creates the missing import statement.


Step 13: Save and Test the Movie

The text is colored. When you click the mouse, the star spins. A completed version of this file is included with the source download.

Import Statements for This Exercise

These are the import statements for this exercise:

import flash.display.Sprite;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.events.FlowElementMouseEvent;
import fl.transitions.Tween;
import flashx.textLayout.formats.TextDecoration;
import fl.transitions.easing.Elastic;
import flashx.textLayout.formats.TextAlign;

Design and Develop a Fantastic Flash Shooting Gallery Game – Active Premium

Plenty has been happening in the world of Tuts+ Premium lately, so let’s keep the ball rolling with another cracking tutorial exclusively available to Premium members. Here’s a brilliantly entertaining AS3 game tut, courtesy of Carlos Yanez.


Take a look at (and play around with) the final result we will be working towards:


This Premium Tutorial is Packed with Design and Development Tips

Using the Flash Tools we’ll create good looking graphics that will be powered by several ActionScript 3 classes like MouseCursor, Tween Nano, Sprite, Timers and other Events.

The user will be able to input a player’s name and destroy a predefined number of dartboards before the game ends.


Professional and Detailed Instructions Inside

Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.


Active Premium Membership

We run a Premium membership system which costs $9 a month (or $22 for 3 months!) which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium and Cg Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @activetuts on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Open Mike: Brackets

Allman or K&R? This is Open Mike, a series of discussion posts to throw the cat amongst the pigeons. These posts are all about you — we want to hear your opinions, ideas, and thoughts. To kick things off, let’s talk about brackets.


1: Do you Cuddle?

“Cuddling” braces means writing them like this:

function showCuddlingExample():void {
	if (example) {
		//do something
	} else {
		//do something else
	}
}

Alternatively, there’s Allman style:

function showAllmanExample():void
{
	if (example)
	{
		//do something
	}
	else
	{
		//do something else
	}
}

This Wikipedia entry lists other common styles. Which do you use?

I like Allman because you can do this:

//if (someCondition)
{
	doSomething();
}

I can easily turn the conditional check off by simply commenting out the ‘if’ statement. If I was cuddling braces, I’d have to either write a new brace to replace the ‘if’, or comment out the corresponding closing brace.


2: Do You Pad Your Parentheses?

Compare all of these:

//tight
function exampleFunction(arg1:int, arg2:String):void
//space before parentheses
function exampleFunction (arg1:int, arg2:String):void
//space between variable and type
function exampleFunction(arg1 : int, arg2 : String) : void
//padded parentheses
function exampleFunction( arg1:int, arg2:String ):void

I’ve seen all of these, in various combinations. I used to use ‘padded parentheses’, as it seemed easier to see the arguments and their types, but now I prefer ‘tight’. What about you?


3: Do You Nest Parentheses in Conditions?

To me, it feels “correct” to write:

if ( (condition1) || (condition2) )

…rather than:

if (condition1 || condition2)

…even though the first takes up a lot more space. The parentheses make it clear where the separation lies. But is that small distinction worth it?

One last thing: thanks to Sergio from www.artua.com for the awesome microphone icon!

Layout for Silverlight User Interfaces

Silverlight lays out user interface elements in Panels with various capabilities ranging from fixed, pixel-based layout through to flexible, fluid designs. You can make use of the existing layout mechanisms or build your own Panels to supplement what’s available. Let’s take a look at what’s involved..

In this video, we’ll examine the Panels available and the various properties around alignment and sizing that come into play when you’re laying out elements for Silverlight UI.


What’s Covered?

Here’s a quick look at some of the subjects covered in this screencast:

  • Element properties
  • Panel types
  • Dragging and dropping
  • Fixed and fluid layouts

View Screencast

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!


Useful Links

Mike Taulty Microsoft (UK): http://mtaulty.com: [email protected]: twitter.com/mtaulty

Franci’s FITC San Francisco Diary: Day Two

By day two at FITC it had become obvious to me that I had underestimated Flash as a tool for deploying all sorts of interactive digital experiences on the desktop as well as in public. It seems you have to see and hear first hand the different logic and technologies that go into creating these experiences to actually realize that you might be able to pull it off yourself..

I’m talking about most of us who have experience with Flash and AS3 and a bit of extra creativity in store. FITC has given me a fresh set of ideas and opened up a new playground I can experiment in.

fitc


Harnessing the Abundance
Mike Creighton

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Flow is the mental state of operation in which a person in an activity is fully immersed in a feeling of energized focus, full involvement, and success in the process of the activity.

The goal of Mike Creighton was to capture the “data” that an artist produces in this Flow state through tracking the motion of analogue painting or drawing, and use that data to create derivative digital work. Flow is the result. It’s a open source project that provides a set of tools for capturing motion data.

It is one of the examples of how Flash has evolved from humble beginnings into a tool which, if properly used and combined with other technologies, allows you to express yourself in ways that were out of the scope of creatives until lately.

The key to being able to create and approach problem solving when working with multiple technologies is defining your goals and setting your parameters, else the abundance can really start working against you. The problem being, that with so many options and interesting steps and results in the process of developing and creating one can be easily distracted from the initial goal. So if you’re not just experimenting or playing around, define your goals and parameters, then stick to them. This was one emphasis of Mike’s presentation.


Space Invading
Seb Lee-Delisle

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

“Space Invading” was all about bringing the playful, creative experience that Flash can deliver, to the people. Seb is a master of presentations; he connects with his audience with the use of interactive technology and has everyone jumping around in no time. You don’t see that every day, although I do think I need to start going to more of these Flash events.

He had a little presentation of the great work of his studio Plugin-Media along with some of his personal experiments in the beginning. He then went on to demonstrate his live audio/video mixer. The idea is that you can sample sounds and capture video at the same time, map them to different keys on the keyboard and then play them back by pressing those keys. The result is impressive. It’s probably useless for any kind serious recording, but has a lot of other possible creative applications and it’s just plain fun.


The Apparat
Joa Ebert

This presentation was more technical and honestly mostly beyond my comprehension. That doesn’t mean that I won’t be able to use the tools presented to optimize my projects.

Apparat is a set of tools that you can use to further compress your SWF, SWC and ABC files. Particularly if you use the [Embed] method to embed large PNGs and use the Reducer which is one of the Apparat tools, you’ll see a big improvement in your SWF file sizes since it will compress the otherwise uncompressed raw PNG files. This will give you a great reduction in file size reaching over 50% of the original file size, depending on the size and number of embedded PNGs as well as the compression level set by the Reducer. You should check this one out , it will definitely help you streamline your files and reduce bandwidth usage, loading times etc., which can only be a good thing.


Eyes Can Hear, 5 Ways
Jared Ficklin

There may or may not be smoke, fire, lasers & non-newtonian fluids

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Everyone probably knows to some degree what sound visualization is, but we don’t really recognize the simple elegance behind it. Seeing Jared do “analog” sound visualizations with smoke, fire and corn starch (yes…corn starch) and then jumping to sound visualization on the screen and in public, you start appreciating the link between the two.

For me it’s easier to understand the workings of a drum shooting smoke rings by sound pressure waves than frequencies, ranges, cutoffs etc.. But mostly it gives me a tangible real world representation of what we’re trying to achieve with sound visualization on the screen and it makes it that more interesting and understandable.

Full video of this presentation available at the FITC web site!


Pulsatile Crackle
André Michelle

If you’re into audio, you should really check out Audiotool. It’s an online Flash application that lets you create and mix music without any installing or registering. Besides it being a great free tool, it’s also testament to Flash’s capabilities as an online runtime environment. It has also been greatly optimized by using the previously mentioned Apparat framework.

There are a lot of interesting creative uses with mixing sound and interactive experience. Using audio in combination with other innovations in Flash like 3D and physics is something that everyone should consider exploring to add that extra edge to their projects.


High Performance Mobile Content with Flash
Mike Chambers

Flash is slowly but surely reaching most of our mobile devices. There is a lot of debate about performance of the Flash player on mobile and even though I’m pretty sure most of us were surprised by how well it performs in general, there are some pretty simple practices that can help you increase performance of your applications without compromising looks or functionality. The following tips apply to both AIR and Flash on mobile devices.

Introducing the Tuts+ Marketplace – Making Premium Accessible to Everyone

We’ve just launched the Tuts+ Marketplace, where Premium quality tutorials – both from our Tuts+ Premium program and from unaffiliated authors – are available to purchase individually. Our Tuts+ Premium program will still stay exactly the same – you’ll get all the same things, for the same price. But now, non-members will be able to purchase selected Premium tutorials on a one-off basis, without a Premium membership.



Hey! Look for this link!

So far we’ve added nearly half our Premium tutorials to the Tuts+ Marketplace, and will be adding more over time. To find out if a Premium tutorial is available for sale on the Tuts+ Marketplace, look for this link:

Item Link

Q + A More Information

Here are answers to some of your likely questions about the Tuts+ Marketplace. Please read through these, and if you have any more questions they may be answered in the special edition podcast Introducing the Tuts+ Marketplace (with me and Sean Hodge as a special guests :) hehe). If not, leave a comment!


QWhat does this mean for Premium members?

That it’s a lot easier to see the value you’re getting as part of Premium. With files on the marketplace priced between $3 and $7, your Premium subscription gives you access to thousands of dollars worth of files for $9 a month. Premium will still work exactly the same and cost the same – so you’ve got nothing to worry about! The marketplace is more for people who aren’t Premium members, and for those who want access to user-submitted tutorials that aren’t available as part of Premium – or anywhere else.


QWhat will be sold on the Tuts+ Marketplace?

We’ve seeded the site with our Tuts+ Premium tutorials, but anyone can submit a tutorial for sale on the Tuts+ Marketplace. If it’s ‘Premium’ quality, it will be accepted. Eventually, the marketplace will be filled with tutorials you can’t find anywhere else.


QWho benefits from the Tuts+ Marketplace?

If you only have time to go through 1 or 2 Premium tutorials a month, or only want to pay for the Premium tutorials you need, the Tuts+ Marketplace is perfect for you. You can purchase tutorials on a one off basis, and files are priced between $3 – $7.

As the marketplace grows, authors will come in from elsewhere to sell their tutorials. There will be high-quality tutorials on the Tuts+ Marketplace that you can’t get anywhere else, so if you love learning from great tutorials, you should keep tabs on the Tuts+ Marketplace.

If you go through lots of Premium tutorials, the Tuts+ Premium subscription is better value for you. The option that’s right for you will depend on your needs.


QWhat categories does the marketplace cover?

We currently host the following categories, and will be expanding our selection over time:



Forums Have your say!

Because the Tuts+ Marketplace is built on our Envato Marketplaces app, we have dedicated Forums. Head on over, sign up for the marketplaces, and tell us what you think of the Tuts+ Marketplace.