IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hello! Joe Lowery here, happy to welcome
you to HTML5 Projects: Photo Card Titles.
| | 00:09 | In this short project course, I'm
going to show you how you can allow your
| | 00:13 | website visitors to add titles
to their own photo card mashups--
| | 00:17 | and not just any titles, but titles
that can be interactively, resized,
| | 00:21 | repositioning, and colored with
multicolored gradients and complete shadow control.
| | 00:26 | All of this power comes courtesy
of the HTML5 tag Canvas and its
| | 00:30 | controlling JavaScript API.
| | 00:32 | You can apply the lessons in this
course to any project where you want to give
| | 00:36 | your user the ability to add
creative text to any image.
| | 00:40 | Okay, that's it. Let's get started
with HTML5 Projects: Photo Card Titles.
| | Collapse this transcript |
| About the exercise files| 00:00 | I'm very happy to announce that any
member of lynda.com has free access to the
| | 00:05 | exercise files used throughout this title.
| | 00:08 | Naturally, the information in this
course is ultimately intended to be applied
| | 00:12 | to your own webpages.
| | 00:13 | However, you may find it helpful to
work with the supplied exercise files to
| | 00:18 | practice the steps to safely and
without creating your own examples.
| | 00:22 | To begin using the files from the site,
download them, extract them, and then
| | 00:25 | store those files in the proper
convenient location. Because one part of the
| | 00:30 | overall photo card project uses PHP,
| | 00:34 | you'll need to store your
files in a web server root folder.
| | 00:37 | I am on using MAMP, so my files are
found in the htdocs folder that's located
| | 00:42 | within the MAMP application folder.
| | 00:44 | I've created a shortcut here so I can
go right to that, and there you see the
| | 00:49 | Exercise Files folder.
| | 00:50 | Now the Exercise Files folder is
organized by chapter, and the chapters are
| | 00:54 | broken down into the various lessons.
| | 00:57 | Within the lesson chapters, there are
a series of items--typically HTML, CSS,
| | 01:02 | images, and so forth--that all
together make up the practice file.
| | 01:06 | For most lessons you'll also find a
folder named final, which contains the
| | 01:11 | completed lesson file.
| | 01:12 | You can of course open it up
and explore it your leisure.
| | 01:16 | You can either follow the whole course
chapter by chapter or jump in at any point.
| | 01:21 | If you'd rather not use the exercise
files, you can definitely follow along
| | 01:24 | with your own assets.
| | Collapse this transcript |
| Course and browser requirements| 00:00 | To follow along with this course the
requirements are pretty straightforward.
| | 00:04 | From a tool's perspective, you'll need a code
editor and a number of browsers for testing.
| | 00:08 | You can use which ever code editor you prefer.
| | 00:11 | I am going to be working with Aptana on the
Mac, a free editor for both Mac and Windows.
| | 00:16 | Most of our browser demonstration and
testing will be done using pretty current
| | 00:21 | versions of standard-based
browsers like Google chrome.
| | 00:23 | As the focus in this course is on
some of the more recently released
| | 00:27 | technologies, you probably shouldn't
depend on the techniques demonstrated if
| | 00:30 | your client needs to support legacy browsers
like Internet Explorer 6. That's it for tools.
| | 00:36 | From a knowledge perspective, you
should be pretty familiar with both HTML and
| | 00:39 | CSS, with a general understanding of JavaScript.
| | 00:42 | I'll walk through any advanced
JavaScript we use block by block so you can
| | 00:47 | understand what's going on under the hood.
| | 00:49 | One last thought: the absolute
best thing you can bring to this course
| | 00:53 | is your imagination.
| | 00:54 | Although I'm going to be going
through all the details of applying HTML5
| | 00:58 | technologies to a specific project,
you'll get the most benefit if you keep your
| | 01:02 | mind open for other ways you can
apply the same lessons to your own work.
| | Collapse this transcript |
|
|
1. Understanding the ProjectWhat we're going to build| 00:00 | Let's take a tour of the completed
photo card titles project so you can see
| | 00:04 | what we'll be building.
| | 00:05 | If you're the type who likes to dive
right into the code, you'll find the
| | 00:09 | completed project in the Chapter 1/01_01 folder.
| | 00:13 | This course builds upon an earlier
course--HTML5 Projects Customized Photo Cards--
| | 00:19 | but you don't have to have taken
that course to benefit from this one.
| | 00:22 | Our app is set in the fictional
Trans Planet Airlines site, where folks can
| | 00:26 | create their own space souvenir.
| | 00:28 | Before we can get to the CAPTION section,
where we bring in our title, we'll need
| | 00:33 | to step through the basics of
setting up the photo card souvenir.
| | 00:36 | The first step is to select a
photo background to work with.
| | 00:40 | I have three to choose from. There is
In Space, Weightlessness, and Moonwalk.
| | 00:47 | Let's go with Moonwalk, and then I'll
click Select Background and proceed.
| | 00:51 | Next, the user gets to
upload a file in one of two ways.
| | 00:54 | They can just click the Browse
button or they can use drag and drop.
| | 00:58 | I'm going to go ahead and just quickly
click the Browse button and then navigate
| | 01:02 | to an image here. I have a couple to choose
from. Let's select george.png. I'll click Open.
| | 01:08 | The file uploads, which you can see as
we scroll down, and now we're already to
| | 01:12 | move on to the modify phase.
| | 01:15 | Here, the two images are combined, and
the user gets a chance to integrate them
| | 01:19 | by resizing, reshaping, and
repositioning the uploaded photo.
| | 01:23 | Now we're ready to move into the
main focus for this course, the title.
| | 01:27 | I'll click CAPTION and here you see the
step has changed so now it says, "Add a
| | 01:31 | caption to your photo and drag it into place."
| | 01:34 | And if I scroll down, you'll see that a
variety of form controls have now appeared.
| | 01:39 | Let's scroll back up a bit so we can
see the image as we enter our text. I'll
| | 01:43 | enter Moonwalk, by George and then
press Tab, and there is my caption using
| | 01:48 | its default settings.
| | 01:49 | So let's change a couple of the options.
| | 01:51 | I'll choose a different font. I have
a few to choose from, so let's go with
| | 01:56 | fantasy, and that will let me resize it using
the Text Size slider. And I'll bring it up
| | 01:59 | a little bit. That looks good.
| | 02:01 | So let me scroll down to
the next set of options.
| | 02:05 | Now, let's go for a different base color.
| | 02:08 | So I'll click right into the text-color
color picker here and choose a bright green.
| | 02:14 | That looks pretty good. We can also
change the color Fill Type. Let's choose
| | 02:19 | Linear Gradient, and there you see the
gradient going from bright green to black,
| | 02:23 | which is my second color. Let's change
that second color to something that works
| | 02:27 | a little bit better here, like an orange.
| | 02:30 | Okay, that's looking pretty good.
| | 02:31 | I am going to drag down my text a little
bit so that we can see it as we add shadows.
| | 02:37 | In order to see the shadow better
against this background, I am going to change
| | 02:41 | the shadow color to a dark black, and
now let me switch the offset, and I'll go
| | 02:46 | so that it's coming from the upper-left, and
I'll increase the blur a little bit to soften it.
| | 02:51 | Okay, let's scroll back up, and let
me make a few last-minute adjustments
| | 02:56 | position-wise by dragging it. Perfect.
| | 02:58 | Now, when we're done we can save the layered
graphic as one image just by clicking Save.
| | 03:03 | Now it's ready to be emailed,
printed, or posted online.
| | 03:08 | So that's a brief overview of the
project, and now you're ready to peek under
| | 03:11 | the hood, so you can get a better
understanding of the various technologies
| | 03:15 | that are driving this app.
| | Collapse this transcript |
| Highlighted HTML5, CSS3, and JavaScript technologies| 00:00 | Before we start the actual creation of
the project, let's talk about each of the
| | 00:04 | key technologies being used.
| | 00:06 | There are three main technologies
brought into play in this project:
| | 00:09 | Canvas, the Range Form control,
and some advanced JavaScript.
| | 00:14 | Let's take a look at Canvas first.
| | 00:16 | Canvas brings runtime graphics to the
web, with a terrific degree of control.
| | 00:21 | Stroke and fill are independently handled.
| | 00:24 | It can work with all primitive
shapes like line, circle, and rectangle, as
| | 00:28 | well as text and images.
| | 00:31 | Perhaps Canvas's best feature--to
my mind anyway--is that it enables
| | 00:34 | interactive graphics.
| | 00:36 | You can, as we will in this project,
combine layers of graphic elements.
| | 00:40 | You can also apply graphic filters and
animate any graphic element by moving,
| | 00:45 | resizing, and even rotating.
| | 00:47 | Happily, Canvas has great support, which
you can see by going to caniuse.com and
| | 00:53 | searching for the Canvas feature.
| | 00:55 | To make the most of canvas, we're going to
be using a dedicated library called KineticJS.
| | 01:00 | KineticJS was developed by Eric
Rowell and really brings a lot of advanced
| | 01:05 | functionality within easy reach.
| | 01:07 | You can learn more about
KineticJS by going to its site.
| | 01:11 | Next is the form element Range.
| | 01:14 | The basic code is pretty straightforward.
As you can see, it's an input type with
| | 01:18 | a few additional attributes like min and max.
| | 01:22 | Value serves as the default setting
when the form element is first displayed.
| | 01:26 | There is also an optional attribute,
step, which determines the increments
| | 01:30 | that the slider moves.
| | 01:31 | Overall, browser support is pretty
good, with the exception of Firefox.
| | 01:36 | You can get a very specific picture by
going to caniuse.com and searching for Range.
| | 01:41 | As I said, Firefox is a problem, but as
you can see, they do have it slated for
| | 01:46 | implementation a little further down the road.
| | 01:48 | However, for right now, there is a
JavaScript helper file available that I'll
| | 01:52 | introduce you to during the course
which brings Firefox into the slider camp.
| | 01:57 | Finally, let's take a closer look at
the advanced JavaScript that we'll employ.
| | 02:02 | The primary function we'll be
incorporating is addEventListener.
| | 02:04 | As you might suspect from the name, it
makes it possible to trigger a function
| | 02:10 | when a particular event occurs.
| | 02:12 | It was introduced prior to HTML5 and
enjoys widespread browser compatibility,
| | 02:18 | with many different events supported,
everything from mouse clicks and
| | 02:21 | double-clicks, mouse over, mouse out,
key up, key down, form element change,
| | 02:25 | form submit, and more.
| | 02:28 | addEventListener takes three arguments:
| | 02:30 | the name of the event entered as a
string in quotes, the function to be
| | 02:33 | called, and a Boolean--
| | 02:35 | true or false--to set the
useCapture functionality.
| | 02:39 | If you're working with multiple
functions for the same event, you can determine
| | 02:42 | their firing order via useCapture.
The default setting is false.
| | 02:47 | Here is some sample code for
addEventListener that we'll be using in our project.
| | 02:51 | In this example, the form element is
a text field, the event is change, the
| | 02:56 | function is textBoxChanged,
and useCapture is set to false.
| | 03:01 | As you'll see in the remaining
lessons, the technologies involved in this
| | 03:04 | project are full-featured and
pretty well supported across all major
| | 03:09 | modern browsers.
| | Collapse this transcript |
|
|
2. Setting Up the FormCreating the basic fields| 00:00 | Let's start off the project by
properly setting up the form.
| | 00:03 | We'll be working with the
modify.php page that holds the core image
| | 00:07 | manipulation, and using a bit of
JavaScript magic to display the form fields
| | 00:12 | when the user clicks the
caption link in the main navigation.
| | 00:15 | So I have modify.php from the
Chapter 2/02_01 folder open.
| | 00:21 | You can see the JavaScript function
that I mentioned if I scroll down a bit.
| | 00:27 | That starts on line 35.
| | 00:29 | After the captionNav link is clicked,
a standard called to stop the browser from
| | 00:34 | looking for a link is given.
| | 00:36 | Next, the form is shown by
changing the CSS to display block.
| | 00:41 | Then the h1 tag that holds the steps
is updated with the new relevant text.
| | 00:46 | Let's move on to the form.
| | 00:47 | I am going to scroll down towards the
bottom of the page, and I want to put my
| | 00:52 | form right after line 74,
where the container div is placed.
| | 00:57 | This is the div that holds the canvas tag
which is inserted at runtime by our JavaScript.
| | 01:03 | So, we want our form to be right below that.
| | 01:08 | Let's start with the basic form tag.
| | 01:10 | I'll give it an ID of textForm and
then set the action to the same page.
| | 01:27 | Now, let's make some room for that form content.
| | 01:29 | Next, we'll isolate this section of the form--
| | 01:33 | there will be three different sections
in all--with a fieldset and legend combo.
| | 01:44 | I'll enter "Create your text" as the legend here.
| | 01:47 | Now I am going to put the first of
three form controls, a simple text box
| | 01:51 | for entering a caption.
| | 01:53 | We'll use an HTML5 attribute
placeholder to provide a hint for the user and
| | 01:59 | leave the value blank.
| | 02:00 | I am going to put each of these form
controls on their own line, so I'll start
| | 02:04 | the coding with a paragraph tag.
| | 02:07 | We'll enter in our label first, and I'll
use the for attribute and set it equal
| | 02:14 | to the ID of the text box, which happens
to be called textBox, and then enter my
| | 02:19 | actual label, text with a semicolon,
| | 02:22 | and then after the closing label tag,
which Aptana has so nicely provided for us,
| | 02:27 | we'll put in our input tag.
| | 02:30 | And this will be a basic text input type,
with, as I said, an id of textBox, a placeholder.
| | 02:39 | This is an HTML5 attribute that puts a
little bit of a hinting text into the
| | 02:43 | middle of the text field.
| | 02:46 | We'll suggest to them that they
enter a caption, and I'm going to set the
| | 02:50 | value to an empty string.
| | 02:53 | Okay, let's close the input tag, and
that's the first of our three, but let me go
| | 02:59 | below it. And in fact, I am going to
scroll down somewhat so we're not right at
| | 03:04 | the bottom of the page anymore. There we are.
| | 03:05 | Now let's make it possible
for the user to change the font.
| | 03:08 | Of course, you don't leave
it completely up to the user.
| | 03:12 | That would open the door to errors galore;
we're going to use a select list.
| | 03:15 | I'll limit the options to the basic fonts
and then add a nonbasic one, just for fun.
| | 03:20 | So we'll start with our paragraph tag,
and next comes the label. Again, I'll use
| | 03:27 | the for attribute, and the id of this
select field is textFont, and the label is
| | 03:38 | Text Font in two words with a colon.
| | 03:43 | Okay, after the label, I'll enter in
my opening select tag, give it my id of
| | 03:51 | textFont, and then we are going
to enter in a series of options.
| | 03:56 | As I said, we're going to use the
basic font names. Of course you can
| | 04:00 | substitute other font families, but I just
want to use the basics to illustrate the concept.
| | 04:07 | So option value = serif,
and we'll enter in serif as the font.
| | 04:16 | Next option is going to be sans-serif.
Following sans-serif will be cursive. Fantasy.
| | 04:33 | Finally, we'll enter the last
of our generic fonts: monospace.
| | 04:43 | Now, for a nongeneric one I am going to
use Impact, a very big bold font which
| | 04:49 | works really well with certain types
of effects that we'll be implementing.
| | 04:55 | Okay, our second form field is now done.
| | 04:57 | Again, I'll scroll down, and let's add our
third paragraph tag for our third field,
| | 05:04 | which will be one that will allow
the user to change the font size.
| | 05:09 | We'll enter in the label, with the for
attribute set to textSize, and the text
| | 05:18 | label itself will be Text Size:.
| | 05:22 | And now we'll put in a new input tag.
And initially, we're going to start it out
| | 05:27 | as a standard text field, so it will
be type="text" and give it an id of
| | 05:34 | textSize and an initial value of 50.
| | 05:40 | This last entry, as a standard text
input field, is not too exciting or
| | 05:44 | particularly user-friendly.
| | 05:46 | However, in the next lesson, we'll
convert it and other fields to an HTML5 slider
| | 05:52 | and really boost the user experience.
| | Collapse this transcript |
| Adding range sliders| 00:00 | Right now we're using a standard input text
field to determine the font size of our caption.
| | 00:05 | Not only is that pretty mundane,
it's also fairly user-hostile.
| | 00:10 | If your website visitor is web savvy,
they may enter 48 pixels, but do they
| | 00:14 | spell out pixels or do they
enter the abbreviation, px?
| | 00:18 | And if he or she is from the print
world, they may think in terms of points.
| | 00:22 | Most others however, would probably enter a
measurement in either inches or centimeters.
| | 00:27 | All in all, we're looking at the
possibility of entry errors galore.
| | 00:31 | Luckily, HTML5 provides a much more
intuitive visual method for selecting a
| | 00:36 | font size: the input type range, which is
displayed in compliant browsers as a slider.
| | 00:42 | In this lesson, I'll show you how to
change a text input field to a slider and
| | 00:48 | clue you in to a way to avoid a
massive cross-browser failure.
| | 00:52 | We'll start by going to the
modify.php page from the Chapter 2/02_02 folder
| | 00:59 | and then scroll down.
| | 01:00 | I am going to go down to around line 95, which
is where my current font size text field lives.
| | 01:07 | Now, I am going to change the type from
text to range, and now that it's a range,
| | 01:15 | I can add a number of slider-relevant
attributes such minimum and maximum.
| | 01:21 | Those go in as min, which I am going to
set to 0 and max, which I'll set to 200.
| | 01:30 | Now, if I save the page and then head
over to a modern browser like Chrome, there
| | 01:35 | is our standard text field.
| | 01:37 | But let me refresh the
page, and now it's a slider.
| | 01:41 | Now, that's very cool.
Very clean and easy to use.
| | 01:44 | Browser support for the range input
type is, as I said earlier, pretty solid
| | 01:49 | across the current browser
board, with one major exception.
| | 01:53 | Let's take a look at what happens in Firefox.
| | 01:56 | Now here we are in Firefox, and as you
can see, the Text Size field is still a
| | 02:01 | text box. Let me refresh the page. No change.
| | 02:05 | So we're back to a standard text
field, which is what happens when a browser
| | 02:09 | doesn't understand the range input type.
| | 02:12 | Luckily, while we're waiting for the
Firefox team to correct this oversight,
| | 02:16 | there is a developer named Frank
Yan who has come to the rescue with a
| | 02:20 | JavaScript helper file.
| | 02:21 | You can find out more about Frank's work
and download the current implementation
| | 02:26 | of HTML5 slider.js from
the GitHub URL shown here.
| | 02:31 | I've already downloaded my copy of
HTML5 slider.js and placed it in my Scripts
| | 02:36 | folder, so all I need to do is link to it.
| | 02:39 | Let me scroll back up to the head of
the document, and I'll put a script tag
| | 02:44 | right after the script tag that calls
for one of our support files imageinfo.js.
| | 02:49 | Let me just quickly copy that one tag
here, paste it in, and then I'll change
| | 02:56 | imageinfo to html5slider.js.
| | 03:03 | Here we'll get rid of that extra line
I introduced, and with that done, let's
| | 03:07 | save the page again and go back to
Firefox and refresh the page. Excellent!
| | 03:12 | Our slider now works as expected in
the full slate of modern browsers.
| | 03:18 | In the next lesson, you'll see how to
add another advanced form control, a
| | 03:22 | color picker.
| | Collapse this transcript |
| Integrating color pickers| 00:00 | Along with allowing users to specify
the caption text, the font, and the font
| | 00:05 | size, we want to give them a lot of
control over color, not only because it's fun,
| | 00:10 | but also to make the captions stand out--
or blend in, if that's the preference--
| | 00:15 | against a wide array of backgrounds.
To that end, let's take advantage of
| | 00:20 | Canvas's flexibility when it comes to
text fill and provide an option for two
| | 00:25 | different types of gradients,
as well as a solid color fill.
| | 00:30 | For that degree of functionality, we are
going to need a select list to choose
| | 00:35 | the type of fill and two
different color pickers.
| | 00:39 | Let's get started. I have modify.php from
the chapter 2/02_03 folder open now, and
| | 00:46 | first I'm going to set up my field set
and legend to hold all my color options.
| | 00:51 | So let's scroll down to the bottom of
the page, and we'll put this field set
| | 00:55 | right after the previous one.
And within the fieldset tags, we'll enter in our
| | 01:02 | legend, and for a legend I'm going to
use "Choose a solid color or gradient."
| | 01:10 | After the legend tag we'll put
in the fill type selector first.
| | 01:15 | So this goes on its own paragraph
tag, and we enter the label with the for
| | 01:21 | attribute and set that equal to fillType,
and the text we'll enter for the label
| | 01:29 | itself is of course fieldType with a colon.
| | 01:34 | And let's start our select tag, give
it an id of fillType, and there'll be
| | 01:41 | three options here.
| | 01:42 | The first option will be for a
solid-color fill, so the value I'm going to
| | 01:47 | give it is just colorFill, and the
text I'll enter is Solid Color, to
| | 01:54 | distinguish it from the gradients.
| | 01:56 | The next option will be a linear
gradient, and the value will give it is
| | 02:05 | linearGradient. See if you can guess
what the actual text will be. Let's enter
| | 02:12 | an option for a radialGradient.
| | 02:15 | Now, after this paragraph tag we'll
put in the first of two color pickers.
| | 02:20 | To get the color picker functionality
we'll rely on a JavaScript library, but we
| | 02:25 | need to get the HTML right first.
| | 02:27 | So paragraph tag and then our label for
textFillColor, and we'll call this one Text Color.
| | 02:41 | The input tag here we're going to
give a class of color--this is for our
| | 02:46 | JavaScript color picker
utility--and an id=textFillColor.
| | 02:56 | If we don't give a type, browsers will assume
that it's a text field, and that's just fine.
| | 03:00 | Now let's give it an initial value.
| | 03:03 | We're going to enter in a kind of a
darker red that is the same red that's used
| | 03:07 | in our logo, so that's B20000.
Notice I do not put in an opening hash tag,
| | 03:16 | and that's as per our JavaScript functionality.
| | 03:19 | Okay, let's close off the input tag.
The second color picker control
| | 03:24 | is basically the same. So I'll just copy paste
and then, make a few changes.
| | 03:28 | I'm going to copy everything within
the paragraph tag, paste that in, and then
| | 03:34 | let's change the id to textFillColor2,
so I'll change the for attribute there,
| | 03:42 | and I'll change that id as well.
And let's change the label to gradient,
| | 03:48 | Gradient Color instead of text color, and
finally, let's go with black as an initial value.
| | 03:53 | Again, we don't put in the hash
sign in front of a color value because
| | 03:57 | that's the way our particular
JavaScript library likes it.
| | 04:01 | Speaking of which, time to
bring it onto the scene.
| | 04:04 | The library we're going to be using is
by a check coder named Jan Odvarko.
| | 04:09 | You can learn more about his project and
download a copy at jscolor.com.
| | 04:15 | It's extremely efficient and flexible and
amazingly doesn't require a framework like
| | 04:21 | jQuery or MooTools, although
it works fine with any of them.
| | 04:25 | Now, I've already downloaded a copy and
I have it in my local folder, so we're
| | 04:29 | going to include it with a script tag.
| | 04:31 | I'll scroll back up to the head
section. So, let's copy our last script tag
| | 04:36 | that we have here and then paste it in
and change the source to its own folder,
| | 04:44 | jscolor/jscolor.js.
| | 04:51 | Now let's save. Let's go
browse the page to see how it worked.
| | 04:55 | Let me refresh my browser page. There is
my new form editions, here is Fill Type
| | 05:03 | showing my three options, and
hear are my Text Color fields.
| | 05:06 | So if I click on one, there is my color picker.
| | 05:09 | Now I can choose a hue from the main
area on the left and then select a value or
| | 05:16 | brightness from the smaller area on the right.
| | 05:18 | Let's make that a really bright green,
and let's double-check and make sure the
| | 05:23 | gradient color works as well. It seems to.
Let's make that purple just for fun and
| | 05:27 | give it a medium value.
| | 05:29 | Pretty cool, don't you think?
| | 05:31 | So now we have a variety of user-
friendly form controls for our caption, and
| | 05:36 | in the next chapter we'll start
bringing our app to live with the Canvas and
| | 05:40 | JavaScript.
| | Collapse this transcript |
|
|
3. Crafting the CaptionSetting up the JavaScript| 00:00 | Time to enter the belly of the beast.
| | 00:02 | In this chapter, we're going to be
diving deep into the JavaScript that
| | 00:05 | powers the Canvas tag.
| | 00:07 | We'll start off in this lesson by
laying a fair amount of the foundation, as we
| | 00:11 | begin to make our text
caption form field active.
| | 00:15 | As I mentioned in an earlier chapter,
the library we're using is called
| | 00:20 | KineticJS. You can see the link to it
on line 9. Right below that is a link to
| | 00:26 | our custom Canvas JavaScript file
canvas_custom.js, which is located in the
| | 00:32 | chapter 3>03_01 scripts folder.
That's where we'll be doing the vast majority of
| | 00:37 | the rest of our work in this course.
| | 00:39 | Let's head over to that file.
| | 00:42 | Now, there is a fair amount of code
already in place here. It's used to drive the
| | 00:47 | application thus far, and you can get
all the details on it in my lynda.com
| | 00:52 | course HTML5 Projects: Photo Cards.
| | 00:55 | We're going to begin to blend in the
text oriented code, and the first thing we
| | 01:00 | need to do is to set up a text
layer and a slew of default variables.
| | 01:05 | Let's go to line 119 and
create a new Kinetic layer object.
| | 01:12 | So I'll enter in var, and I'm going to
call this textLayer and set that equal to
| | 01:19 | new Kinetic.Layer,
parentheses, open and close semicolon.
| | 01:25 | Next we'll get the context of that object.
| | 01:28 | Now, the getContext function that we're
going to use is a basic canvas API call,
| | 01:33 | and for most functions
KineticJS has that all built in.
| | 01:37 | However, there are a few things that are
not yet covered by the library and I'll
| | 01:42 | show you in a later lesson, chapter four's
Crafting Linear Gradients, to be precise
| | 01:47 | just how to get and set canvas
properties in a basic non-KineticJS way.
| | 01:53 | So we'll set up another variable, and
I'm going to call this textContext and set
| | 01:59 | that textLayer.getContext, and I'm
going to specify this as a 2d context.
| | 02:11 | Canvas, although it's not extremely
robust as of yet, Canvas will eventually be
| | 02:16 | able to handle 3D objects as well,
and we're working in a 2D context.
| | 02:22 | Put in my closing semicolon
and we're ready to move on.
| | 02:26 | So next we're going to
define our default settings.
| | 02:29 | These will take effect until the user
makes a change through the form elements.
| | 02:34 | But first I'm going to set up a
variable for the caption, which I'm calling here
| | 02:38 | the message, and we're going
to set that to an empty string.
| | 02:43 | Because when the user first opens the
captions control, we don't want to have a
| | 02:48 | default caption sitting there;
| | 02:50 | we want the user to enter that themselves.
| | 02:53 | Next, let's set up the default
textFill color, and we'll make this equal to
| | 02:59 | hash sign B20000.
| | 03:04 | Next, our default fontSize,
and I'll set that equal to 50.
| | 03:10 | Now we'll put in a fontFace, and
we'll choose serif for our default there.
| | 03:18 | We need to set the default fillType,
and we want a solid-color fill. The option
| | 03:25 | for that is colorFill.
| | 03:28 | Next, we want to set the value for our
second color picker, which is called
| | 03:33 | textFillColor2, and I'm going to
set that to black, which is #000000.
| | 03:44 | Next up is the shadowColor, and we'll
make that #707070, which is kind of a
| | 03:53 | grayish color, then the default
shadowBlur which I'll set equal to 2, and finally
| | 04:01 | the shadowOffset, which I'll make equal to 4.
| | 04:07 | We're going to create the text object
and set a couple of default values for it.
| | 04:12 | I have a little placeholder comment here.
I'll put my code right there, and we'll
| | 04:17 | set the var equal to theText. And we're
creating a new text object, so that's new
| | 04:24 | Kinetic.Text. And after the text we
enter in an open and closed parenthesis.
| | 04:31 | The properties we're setting here
will be within an array, so within the
| | 04:34 | parentheses are a pair of curly
braces, and I'll open that up to put in the
| | 04:39 | first of my three properties, which will be x:.
| | 04:43 | And we want this to be centered,
| | 04:46 | so I'm going to get the value of
the stage width, and we'll do that by
| | 04:51 | referencing the stage object.
| | 04:52 | This is a KineticJS concept and use
the function called getWidth and then
| | 05:00 | divide that by 2. Follow that with a
comma for our second parameter, which
| | 05:05 | is y, and very similarly, we go to
stage.getHeight, also divided by 2, another
| | 05:14 | comma, and then the text parameter
will be set to whatever the content is,
| | 05:19 | which is theMessage.
| | 05:20 | The x and y values will place the text
initially in the center of the stage as I
| | 05:26 | said, or rather, it will start the text at
the center and then the letters will be
| | 05:32 | drawn out to the right.
| | 05:34 | Now, to keep the text centered, we'll
need to take the width of the text into
| | 05:38 | account and offset the x value by half of that.
| | 05:42 | The text object has a
function just for that purpose.
| | 05:47 | So I'm going to put this code right
under my center text comment, and we'll
| | 05:51 | reference our new text object,
.setOffset, open and close paren, and again open
| | 06:00 | and close curly braces within
that. And here it will set the x to
| | 06:03 | theText.getWidth () divided by 2.
| | 06:09 | Okay, we're ready to integrate the new
text object and layer into the stage.
| | 06:15 | Placement of the code is critical here
because it determines the z index of the
| | 06:20 | layers and what's on top of what.
| | 06:22 | So in the section with the comment Add
objects to layers and layers to stage, on
| | 06:27 | line 145, I'm going to bring in the
text object first and add that to the text
| | 06:33 | layer, and I'm going to do that after
the two additions to the general layer,
| | 06:40 | textLayer.add (theText).
| | 06:45 | So textLayer is the layer, theText is
the object that we just added to it, and
| | 06:50 | then after the basic layer, the
graphics layer, has been added to the stage,
| | 06:55 | we'll add the text layer to stage.
| | 06:57 | This will make sure that the text
layer is always on top of the graphics.
| | 07:02 | So stage.add (textLayer). Lastly, we
need to add a key function that will
| | 07:09 | initially draw our text.
| | 07:11 | This will apply our default settings.
| | 07:13 | To do this we're going to skip down to
where the stage draw function is found,
| | 07:20 | which you can see on line 185.
| | 07:24 | The custom function we're going to call
I've named drawText.
| | 07:27 | All right, our core text
JavaScript code is in place.
| | 07:32 | Next, we'll set up the functions we need
to make the text input field active.
| | Collapse this transcript |
| Entering custom text| 00:00 | To bring the text field to life so
users can import their own caption, we need
| | 00:05 | just three more steps.
| | 00:06 | We're going to need to take similar
steps for all of our form elements, so we're
| | 00:10 | really starting to lay
down the functionality now.
| | 00:13 | The first step brings in an
advanced JavaScript function
| | 00:17 | called addEventListener.
| | 00:18 | As described in chapter 2, this
function waits for an event to be fired on a
| | 00:24 | specific form element and when
it does, executes a function.
| | 00:28 | The text field where the user inputs
the caption is the only form element where
| | 00:33 | we'll use two different events to
cover all of our update scenarios.
| | 00:38 | So I'm going to scroll down to the
bottom of my canvas_custom.js file. Under line 188,
| | 00:46 | I'm going to enter in the first
of my addEventListener blocks.
| | 00:50 | So first we'll set up a variable
called formElement and set that equal to
| | 00:58 | document.getElementById, and the ID
we're looking for here is textBox.
| | 01:09 | Now once we have that, we can
add the event listener to it.
| | 01:15 | So formElement.addEventListener, and
you'll recall this takes three arguments, and
| | 01:22 | the first event is the change event,
| | 01:24 | very useful when you're working with
formElements. And we'll be using that one
| | 01:29 | quite a bit throughout the rest of the
course. Follow that with a comma and
| | 01:33 | then the name of the
function that we're going to call.
| | 01:37 | This is called textBoxChanged, another
comma, and finally, we'll enter in the
| | 01:43 | Boolean for use capture
and we'll set that to false.
| | 01:48 | Okay, at the end of the line
I'll put in my semicolon.
| | 01:51 | Now we want to add another one of
these. It's pretty much the same,
| | 01:54 | so I'm just going to copy this code
block here and then paste it in. And the only
| | 02:02 | thing I want to change is the event,
and I'm going to set that to blur.
| | 02:07 | If the user just puts their cursor
into the text field and doesn't change it,
| | 02:12 | which happens sometimes when you do a
page refresh--it doesn't totally refresh
| | 02:16 | everything--the caption will still appear.
| | 02:19 | Okay, we referenced textBoxChanged.
| | 02:23 | Let's go create that function now.
| | 02:27 | So function textBoxChanged and then in
parentheses e for error, open and close
| | 02:37 | curly brace, target = e.target, and the
variable we previously defined, theMessage,
| | 02:46 | we'll set equal to the target value.
| | 02:52 | And after that's all done, we're
going to call our drawText function.
| | 02:58 | Okay, all that's left is to create the
function we just referenced, drawText.
| | 03:04 | This will eventually hold all of our
update functionality, but for now we just
| | 03:09 | need to set the text to whatever
the message is that the user enters,
| | 03:14 | define the font size using the default
font size value, and put in a set fill
| | 03:22 | method that will use the default
color and finally draw our text layer.
| | 03:27 | You need to specifically draw the layer that
the text is on for any changes to take place.
| | 03:33 | So let's scroll down a tad. And under
the comment on line 203, this is where our
| | 03:40 | function drawText will live. And as I
said, the first one will be referencing the
| | 03:47 | text object we created called theText,
and we'll set the text to the message.
| | 03:57 | We'll set the font size, and we'll
set that to the variable fontSize.
| | 04:09 | Then we want to set the fill--that's
the color of the object--and we want a set
| | 04:17 | that to the variable textFillColor.
| | 04:20 | Finally, I'm going to make a little
room for this because this should be the
| | 04:24 | last item within the function, we
want a specifically draw the text layer,
| | 04:29 | so the textLayer.draw. Okay, I don't
know about you, but I am ready for some gratification.
| | 04:38 | Let's save the page and I'm going to
went over to my browser where I have it set
| | 04:43 | up. I'll hit refresh. There is my photo card.
| | 04:48 | If you're not familiar with the previous
application that we're building on, the
| | 04:52 | photo card options--the two images--
were saved using an HTML5 feature called
| | 04:58 | local storage that saves the values
specifically for the browser that's used.
| | 05:03 | So all you have to do, once you've gone
through those initial steps, is just go to
| | 05:08 | the modify page and hit refresh.
| | 05:11 | Now though, we want to see if
we can get some text on the page.
| | 05:16 | So let's enter Moonwalk with Me!
Press tab and there's our text.
| | 05:22 | You'll notice that the text is not
centered and in fact is partly off-screen.
| | 05:26 | We'll take care of that issue in
the lesson called "Setting text size."
| | Collapse this transcript |
| Selecting the font| 00:00 | The choice of a fontface can
really make a statement about a caption,
| | 00:05 | whether it's a serious, whimsical, or evocative.
| | 00:08 | In this lesson, we'll add the
necessary JavaScript code so the users can
| | 00:13 | decide which font they would
like to use for themselves.
| | 00:16 | I have a canvas_custom.js from the
chapter 3/03_03 scripts folder open, and I'm
| | 00:23 | going to scroll down to where my
form element listeners are defined,
| | 00:29 | which is almost all the way down towards
the bottom there, starting on line 188, and
| | 00:36 | we'll add in the first of our code chunks.
| | 00:39 | For this one we're going to be
listening to the text font form element that you
| | 00:44 | may recall is a select list
with a variety of fonts as options.
| | 00:48 | Now I'm just going to go ahead and
copy the first one here and then paste it
| | 00:54 | down below it, and let's change the element
ID from textBox to textFont, and likewise,
| | 01:03 | the function that is called from
textBoxChanged to textFontChanged.
| | 01:08 | Next, we'll need to define
the textFontChanged function.
| | 01:12 | This code is quite similar to
what we use for the textBoxChanged.
| | 01:16 | So again, I can do a copy-paste, saving
a little bit of time, and we want to make
| | 01:22 | it textFontChanged and then change the variable.
| | 01:27 | Instead of theMessage,
it's going to be fontFace.
| | 01:34 | Finally, let's put that fontFace
variable to use in our drawText function.
| | 01:39 | I'll put this bit of code between
setText and setFontSize so that it will
| | 01:45 | mirror our form layout.
| | 01:51 | So we'll invoke the text object and
enter setFontFamily and set that to fontFace.
| | 02:01 | Okay, let's check it out. I'll save the
file and then switch to the browser, hit
| | 02:07 | refresh, and let's scroll down.
Now, I'll enter in a simple caption, and let's try
| | 02:16 | changing our text font.
Let's try sans-serif. It seems to wor. Let's go to
| | 02:21 | cursive, looking good, fantasy,
monospace, and then impact.
| | 02:29 | All right, we're cooking with gas now.
| | 02:32 | In the next lesson, we'll make it
possible for the user to quickly change the
| | 02:36 | caption size by using the slider control.
| | Collapse this transcript |
| Setting text size| 00:00 | In this lesson we're going to power up
the font size slider so that our users
| | 00:05 | can quickly and easily adjust
their caption size as needed.
| | 00:09 | Part of the code that we'll insert will
ensure that the text is nicely centered
| | 00:14 | when it first comes on the page,
because, well, neatness counts.
| | 00:18 | Let's begin by adding our event listener
code to the canvas_custom.js file found
| | 00:24 | in the Chapter 3/03_04 scripts folder.
| | 00:27 | We'll need to scroll down to around
line 197. And again, this is very similar to
| | 00:35 | what we've done before, so we can do
our copy-paste operation, change the ID
| | 00:42 | that we're looking for from textFont to
textSize, and then change that function
| | 00:48 | name from textFontChanged to textSizeChanged.
| | 00:56 | Now, let's copy previously done
function, paste that in, change the name of the
| | 01:04 | function to textSizeChanged, and then
the variable from fontFace to fontSize.
| | 01:12 | At this point, we'd normally add in the
fontSize variable code to the drawText
| | 01:18 | routine, but we've already
done that. That's on line 224.
| | 01:23 | We did it because it was
necessary to demo the text display.
| | 01:26 | However, what we don't have yet is a
way of accurately centering the text that
| | 01:31 | takes its width into account.
| | 01:34 | So let's add that code
just below where fontSize is defined.
| | 01:38 | Let's being that up to the center of
the page there, and we'll in theText.setOff,
| | 01:47 | open and close paren, open and close
curly brace. And we want to set the x value
| | 01:54 | to theText.getWidth, open
and close paren, divided by 3.
| | 02:02 | Now you saw, all this code before
when we set up the default values,
| | 02:06 | basically the same syntax.
| | 02:08 | Okay let's check our work.
| | 02:10 | I'll save the JavaScript file
and then head over to the browser.
| | 02:14 | Let me click refresh, make sure we've
got the most current code, and I'll enter
| | 02:21 | in an appropriate caption, and
now our text is nicely centered.
| | 02:28 | So let's try the slider now, and
that seems to be working really well.
| | 02:34 | Now the user can easily and very visually
adjust the size of the caption via the range control.
| | 02:40 | You may be thinking, that's nice, but could
we maybe have a different color than the red?
| | 02:45 | You bet. Implementing color
choice is coming up next.
| | Collapse this transcript |
| Choosing a color| 00:00 | For me, color choice is pretty critical,
especially when you're dealing with a
| | 00:05 | variety of backgrounds.
| | 00:06 | So we want to make this operation
particularly smooth and of course visual.
| | 00:11 | Let's put our snazzy color pickers to work.
| | 00:13 | To pull this off, we only need to add
our two basic code blocks: one for the
| | 00:18 | event listener and the other for the function.
| | 00:21 | So I'll start with the event
listener and put it below the others at the
| | 00:24 | bottom of the page.
| | 00:26 | I'll scroll down towards that.
Let's grab the last one and copy it, paste it in,
| | 00:33 | change the element id from textSize
to textFillColor, and then change the
| | 00:40 | function called from
textSizeChanged to textFillColorChanged.
| | 00:49 | Next, we'll do another copy-paste
and change name with a function to
| | 00:54 | textFillColorChanged and
fontSize to textFillColor.
| | 01:01 | Now I need to make one other
change here, as we're writing out the
| | 01:05 | textFillColorChanged function.
| | 01:08 | When it comes time to define the
variable, we're going to need to do a little
| | 01:12 | string manipulation.
| | 01:13 | The JavaScript color picker wants the
color value without the leading hash
| | 01:18 | sign, but KineticJS on the
other hand needs the hash sign.
| | 01:22 | So I'm going to add that in as a character in
quotes and then concatenate the target value.
| | 01:29 | So we'll enter in quote, hash sign,
quote and then a plus sign to
| | 01:34 | concatenate or bring together the
two strings, and now that's done.
| | 01:38 | Because we already have our setFill
color drawText, as you can see on line to 237,
| | 01:44 | we're ready to rock and roll.
| | 01:46 | I'll save the page,
switch to the browser, refresh.
| | 01:49 | Let move my little head in here, just
for a little variety, and let's enter in a
| | 01:55 | new caption. I'm going to
call this one Head Space.
| | 01:58 | Let's scroll down to where our color
pickers are, and we'll click on the red
| | 02:04 | color picker here and then choose a
yellow, and that's showing up really well.
| | 02:09 | Let's go make it a little bit darker.
| | 02:11 | So the color functionality is working
quite well, both on the hue and value side,
| | 02:16 | and the color picker gives us immediate
feedback. It's actually kind of fun to
| | 02:21 | play around with, as we try
to find just the right color.
| | Collapse this transcript |
| Dragging the text| 00:00 | Given how difficult it is to enable
drag-and-drop in HTML5, not to mention
| | 00:06 | how cool it is to be able to move page
elements at will, it's going to be kind
| | 00:10 | of anticlimactic when you see how easy it
is to implement drag and drop with canvas.
| | 00:15 | Would you believe one line of code--and
a small one at that? Let's get to it.
| | 00:19 | So basically, as step four says, add a
caption to your photo card and drag it into place.
| | 00:27 | So we want to make the text
object, a.k.a. the caption, draggable.
| | 00:31 | And for that we're going to need to
revisit our definition of the text
| | 00:35 | object, which starts on line 134 of
canvas_custom.js, found in the Chapter
| | 00:43 | 3/03_06 scripts folder.
| | 00:45 | So I'm going to add a comma after text:
| | 00:48 | theMessage, on line 137 so I can add another
property and enter our one line of code: draggable:
| | 00:57 | true, and that's it.
| | 00:59 | So let's save the page and
take our text for a drive.
| | 01:03 | Back to the browser, hit refresh,
enter some code, and move it around.
| | 01:10 | The great thing about the drag-and-
drop is that you can move it literally
| | 01:14 | anywhere on your canvas.
| | 01:15 | You can even move it partly off-screen, if
there's some reason you would need to do that.
| | 01:20 | In the next chapter, I'll show you how
to further enhance your caption with drop
| | 01:24 | shadows and gradients.
| | Collapse this transcript |
|
|
4. Adding Text EffectsCreating shadows| 00:00 | One of the problems that stems from
laying a caption over an image is contrast.
| | 00:05 | Unless the photo background is in
black and white, no matter what color you
| | 00:09 | choose for your text, you are not always
assured there will be a location on the
| | 00:14 | image that doesn't blend in with your caption.
| | 00:17 | This issue is made worse when we add
the option of gradient-colored text, which
| | 00:22 | we'll do in the next two lessons.
| | 00:24 | So, how do you solve such a contrast issue?
| | 00:27 | Well, one elegant solution is to give
your text its own background via the
| | 00:32 | Canvas text shadow options.
| | 00:34 | In this lesson, we'll add everything
you need, from HTML to JavaScript, so that
| | 00:39 | you can incorporate a shadow for your text
with user control over offset, blur, and color.
| | 00:45 | Let's begin with the HTML.
| | 00:47 | I have the modify.php file from the
Chapter 4/04_01 folder open in my code editor.
| | 00:54 | I am going to scroll down to the end of the
form and add another field set and legend.
| | 01:01 | So we'll go right after the last field
set. And then after we have that, we'll add
| | 01:08 | in our legend, and here the
legend will read Add a shadow.
| | 01:14 | Let's add the first of three form
elements so we can control the shadow's
| | 01:18 | offset from the text.
| | 01:19 | To simplify the concept I'll insert a
single range input type to handle both
| | 01:24 | the X and Y offsets.
| | 01:26 | This will position the shadow anywhere from
the upper-left to the lower-right of the text.
| | 01:31 | Of course, you could add another
slider control for separate X and Y values,
| | 01:36 | so I'll put my cursor at the end of
legend here and hit Return and start
| | 01:40 | entering my paragraph tag.
| | 01:42 | Within that, I'll put in a label tag
with a for attribute and set that equal to
| | 01:49 | shadowOffset, which is the id of my
slider control for the shadow offset.
| | 01:56 | Now, let's give it a label text Shadow Offset:,
| | 02:00 | and after label we'll insert the input tag.
I am going to set the type equal to range.
| | 02:09 | The id we'll make equal to shadowOffset.
| | 02:12 | I am going to set a minimum equal to -10.
| | 02:18 | This will allow the offset to move
from the center position to the upper-
| | 02:24 | left. And we'll set a max to 10. This will
allow the offset to go down to the lower-right.
| | 02:31 | I am going to start in the
lower-right position with a value of 4.
| | 02:38 | Okay, we'll close that input tag and
move our cursor down below the paragraph.
| | 02:43 | Next, let's add a control for the shadowsBlur.
| | 02:48 | I don't want this to get too fuzzy, so
I'm going to limit the range from 1 to 10
| | 02:53 | and start out with a value of 1. Since
this is very similar to what we coded for
| | 02:59 | Shadow Offset, I'll just copy-paste.
| | 03:03 | Copy my selection, paste it in,
and now let's make some alterations.
| | 03:07 | Instead of shadowOffset, it's going to be
shadowBlur. We'll change Offset to Blur here too.
| | 03:15 | Okay, our input type is still range, but we
want to make the input type shadowBlur,
| | 03:21 | and we'll set the minimum to 1 and not -10.
| | 03:25 | The max we'll keep at 10, and I am
going to set the initial value to 1.
| | 03:31 | For our final shadow-related control,
we'll insert another color picker and give
| | 03:36 | it a grayish value as the default.
| | 03:38 | I am just going to go up to line 114 and
copy one of the existing color pickers.
| | 03:44 | Now let's go down and paste it in.
We'll get rid of that extraneous line. And now
| | 03:49 | let's change the for attribute to shadowColor.
| | 03:54 | We'll change the label itself to be,
similarly, Shadow Color, two words, and let me
| | 04:02 | just copy this for attribute
and then paste it in as the id.
| | 04:06 | All right, let's change the value
to a lightish gray as I said. 707070.
| | 04:10 | Okay, the HTML is done, so let me save
the page, and then we'll switch over to
| | 04:17 | the canvas_custom.js file that is found
in the Chapter 4/04_01 scripts folder.
| | 04:24 | The code we'll insert here will
follow the same pattern as for the other
| | 04:29 | functionality in our app.
| | 04:30 | First, let's set up the event listeners,
| | 04:33 | so I'll scroll down to that section.
And I am just going to copy the last one
| | 04:38 | here, paste that in, and the element
we're targeting here is the shadowOffset, so
| | 04:43 | shadowOffset. Just copy that little
text there so I can change this function
| | 04:51 | called shadowOffsetChanged, and that one is done.
| | 04:56 | Now let's copy that, paste it in.
| | 04:59 | Next, let's add an event listener to shadowBlur.
| | 05:03 | So I'll change Offset to Blur, both in
the getElementById argument and as part
| | 05:11 | of the function name that we're
calling, so it's shadowBlurChanged.
| | 05:13 | And one last time, we'll copy both of
those statements, paste it in. Let's change
| | 05:21 | shadowBlur to shadowColor and
change the function name as well.
| | 05:29 | Okay, now we'll define the
three functions we referenced.
| | 05:34 | So there is my text event function, so
I am going to move down towards the end
| | 05:38 | of them, copy this one, paste it in
once, and now we want to change the function
| | 05:44 | name to shadowOffsetChanged. And the variable,
instead of fontSize, we'll change to shadowOffset.
| | 05:54 | Okay, let's do a copy of that and paste it in.
| | 05:58 | Now I only need to change one word.
Instead of shadowOffsetChanged, it's going to
| | 06:04 | be shadowBlurChanged, and of course,
the variable then would be shadowBlur.
| | 06:09 | One last one to paste it. We still have that
shadowOffsetChanged function in our clipboard.
| | 06:15 | Now I can change Offset to Color.
| | 06:18 | shadowColorChanged and
shadowOffset becomes shadowColor.
| | 06:23 | Now, you'll recall with the color pickers
we need to do a little bit more work
| | 06:28 | because we're adding in the hash sign,
| | 06:31 | so I'll put that in in quotes and then add a
plus sign to concatenate the two strings.
| | 06:38 | Finally, let's add the executable
statements to the draw text function.
| | 06:43 | We'll scroll down. And I'm going to
isolate these a little bit, since they
| | 06:47 | are their own group.
| | 06:49 | And first, we'll set the shadowColor so
theText.setShadowColor, and we'll set it
| | 06:56 | to the variable shadowColor.
| | 06:58 | I bet you know what's coming next.
| | 07:01 | Yes, it's true, a little copy paste.
| | 07:04 | This time instead of shadowColor, it
will be Blur, so change both the property
| | 07:10 | and the value to shadowBlur, paste
that again. Let's do shadowOffset,
| | 07:15 | setShadowOffset, and we set it to shadowOffset.
| | 07:22 | Okay, now just to throw you a complete
curve, I am going to add in one of the
| | 07:26 | property we haven't
worked with, and that's opacity.
| | 07:31 | Now we could have set up another
slider to control opacity; that's true.
| | 07:35 | But I didn't want to overwhelm
the user with a series of options,
| | 07:38 | so we're going to set this to a specific value.
| | 07:42 | ShadowOpacity would be set between 0
and 1. I am going to make this 0.75. Okay,
| | 07:50 | time to save and test.
| | 07:52 | In the browser you see I have the page
from Chapter/04_01 open, and I don't have
| | 07:57 | the shadow HTML showing yet, so let me
click refresh. There is my ADD A SHADOW.
| | 08:02 | Now before we go into there, let's add
some text, and there is my text there.
| | 08:10 | Now, if I pull it over the white,
you can see there already is a drop shadow
| | 08:15 | defined. That's looking
pretty good. That isolates it some.
| | 08:18 | Let me scroll down now to my shadow controls.
So that we can see it a little bit better,
| | 08:24 | I am going to change the Shadow Color to black.
| | 08:26 | Yes, it's showing up a lot better now.
| | 08:29 | Now watch what happens when I too move
the Offset, you can see that my Shadow
| | 08:33 | Offset has disappeared.
| | 08:35 | So that indicates that there is a problem.
| | 08:37 | Let's go back to the code, and I want
to go to where my shadowOffsetChanged
| | 08:43 | function is defined.
| | 08:44 | And you can see it's just like all the
others, where it picks the target value
| | 08:50 | and sets it to the variable.
| | 08:52 | Now I know from experimentation that
sometimes this Offset control seems to
| | 08:57 | be a little finicky.
| | 08:58 | So, even though you shouldn't have to
do this, because you don't have to do it
| | 09:02 | for any of the other slider controls,
I'm going to expressly make sure that
| | 09:06 | target value is a number, and I'll do
that by adding in a parse int function.
| | 09:12 | This will change any string to a number.
It's a standard JavaScript function.
| | 09:20 | Okay we'll save that change.
Now let's try it out back in the browser.
| | 09:24 | again I'll Refresh. I am going to
have to bring in my text again, so I've
| | 09:29 | already got that text there. I'll just
hit Return, and I should see it up here.
| | 09:33 | There it is. Let's bring it down.
| | 09:37 | Again, let's change the
color to black to see it.
| | 09:41 | Now let's try out that Offset again.
| | 09:43 | So I am going to go to the left.
It's working beautifully now. Excellent!
| | 09:47 | Let's go a little bit up to the
left here just to show it off.
| | 09:51 | You can see that if I move in my
blur, it gets a little bit softer;
| | 09:55 | if I move it all the way, it really
fades away and becomes quite natural.
| | 10:00 | So our shadow enhancement
seems to be working just fine now.
| | 10:03 | There are a good number of
further additions you could add.
| | 10:07 | You could, for example, create separate
offset controls for the X and Y axes or as
| | 10:12 | I said, add another slider for opacity.
| | 10:15 | I'll leave that as an exercise
for you to do at your discretion.
| | Collapse this transcript |
| Crafting linear gradients| 00:00 | Maybe I just have a low threshold for
excitement, but the first time I saw
| | 00:04 | gradient-styled text--I think
it was in a Photoshop tutorial--I
| | 00:09 | distinctly remember going "Ooh!"
| | 00:12 | In this lesson we're going to put that
functionality into your site visitors'
| | 00:16 | hands, with a lot more interactivity
and a lot fewer steps than that old PS2, I
| | 00:22 | can guarantee you that.
| | 00:24 | Any HTML we need is already in
place, so let's go directly to the
| | 00:28 | canvas_custom.js file found in the
Chapter 4/04_02 folder and bring in the
| | 00:34 | necessary event listeners.
| | 00:36 | I'll scroll down to that section, which is
getting pretty lengthy at this point, and
| | 00:40 | I am going to copy the textFillColor
one here and I am actually going to put it
| | 00:46 | right below it, because all I need to
change here is I am activating the second
| | 00:50 | color picker, which is called
textFillColor2, so, similarly, we have to change the
| | 00:56 | function name to textFillColor2Changed,
and then we need to add one more, so we
| | 01:03 | can listen for the fill type.
| | 01:07 | So I'll change the ID from my pasted in
code to fillType and change the function
| | 01:14 | name as well to fillType changed.
| | 01:18 | Two new event listeners mean two new
functions, so we're going to code those next.
| | 01:25 | Again, I'll take the shortcut of
copying the textFillColorChanged routine and
| | 01:31 | then paste that in, and let's change the name of
that to textFillColor2Changed and the variable.
| | 01:41 | Okay, that's all we need for that one.
| | 01:42 | I am going to paste what I have on my
clipboard again, and this time we'll
| | 01:47 | change the function name to
fillTypeChanged, and the variable will become
| | 01:54 | fillType as well, and I can lose the
additional string and concatenation.
| | 02:00 | So it's fillType = target.value.
| | 02:04 | Now comes the fun part.
| | 02:05 | Here we need to specify what happens
if someone chooses linear gradient from
| | 02:10 | the fill type select list.
| | 02:13 | So let me scroll down to our drawText code.
| | 02:16 | Right now the fill is
controlled by the code on line 283,
| | 02:20 | theText.setFill (textFillColor).
| | 02:23 | So what we need to do now is to set
up an if-else clause to take care of
| | 02:28 | the condition that happens when
somebody chooses a linear gradient from the
| | 02:33 | fill type select list.
| | 02:34 | I am going to temporarily remove our
setFill line here, as that will become
| | 02:41 | integrated into our new code.
| | 02:43 | Let's put this right after the shadow
block. And we'll need to set up a couple of
| | 02:47 | variables first, because we
need to position the gradient fill.
| | 02:51 | So, the first is var textMiddle, and I am
going to set that equal to theText.getY--
| | 03:03 | that's Y the coordinate--plus
theText.getHeight function divided by 2.
| | 03:08 | So what this line will do is it will
get the top Y coordinate and then add half
| | 03:15 | the line height to it, so that the Y
value, the text middle, will be right in
| | 03:20 | the middle of the text. All right, a semicolon
| | 03:22 | to close that linem and let's do
something similar for text center. This is a
| | 03:27 | lot simpler actually.
| | 03:28 | So var textCenter, this is
going to be the horizontal center.
| | 03:33 | This we can do with just
theText.getWidth divided by 2.
| | 03:39 | Okay, now that we have that,
let's set up our if-else clause.
| | 03:43 | If, open parenthesis, the fillType ==
linearGradient--make sure you put the
| | 03:54 | capital G in the middle there in
camel case and we'll put and we'll put an
| | 03:58 | opening curly brace afterwards
and put our conditions within that--
| | 04:01 | if that's true, we want to set up a
variable called gradient that will contain
| | 04:07 | the linear gradient object.
| | 04:09 | Well, this particular function is
not one that's included in KineticJS.
| | 04:13 | So for this, we're going to have to do
it old school, go back to the actual
| | 04:18 | Canvas built-in functionality and
apply the create linear gradient method.
| | 04:24 | That requires the context of the
text, not the text object itself.
| | 04:30 | So you may recall that much earlier in
the course, we defined the text context
| | 04:36 | for exactly this reason.
| | 04:37 | I am going to enter in textContext.
createLinearGradient, open and close parentheses.
| | 04:47 | This takes two pairs of two arguments,
basically the coordinates. So the first XY
| | 04:54 | coordinate is where you want to start
the gradient, and first we'll start it at 0,
| | 04:59 | and then the Y coordinate
is going to be textMiddle.
| | 05:03 | Now, for the next set of coordinates,
we want to position it at the end of the text.
| | 05:07 | So how do we get the end of the text?
| | 05:10 | Well, that's the width.
| | 05:11 | So I'll enter theText.getWidth, open
and close parentheses, comma, and again the Y
| | 05:17 | coordinate will be textMiddle.
| | 05:18 | Okay, let's close that
line with a semicolon.
| | 05:21 | Now we need to add the color stops.
| | 05:24 | We'll add one for each of the colors
we're using, and we'll pull the values for
| | 05:29 | those colors from the color pickers
| | 05:31 | textFillColor and textFillColor2.
| | 05:34 | So I'll use the gradient object I just created;
| | 05:37 | gradient.addColorStop, open parenthesis.
addColorStop takes two arguments.
| | 05:44 | The first is the position
expressed in a value from 0 to 1.
| | 05:48 | So I want this to start at the
beginning, enter a 0, and then we'll specify as
| | 05:53 | the color whatever value is in textFillColor.
| | 05:57 | Okay, now we do the second one, and I am
going to just do a quick copy-paste there.
| | 06:02 | Now we want this color stop to be at
the other end, so we'll enter a 1 here and
| | 06:08 | make textFillColor textFillColor2.
| | 06:11 | After we've set that all up,
we're ready to set the fill.
| | 06:14 | So again, we can go back to theText.
setFill, and we'll fill it with gradient.
| | 06:23 | So that takes care of the if condition.
| | 06:25 | If it's not a linear gradient, I am
going to put in an else statement, followed
| | 06:30 | by open and close curly brace, and
this is where we'll bring back in our
| | 06:36 | setFill to textFillColor, our solid color fill.
| | 06:41 | Okay, that's all we need for that one.
| | 06:43 | Let's save it and then try it out.
| | 06:45 | Let me hit Refresh. I'll enter
some text here. Let's try smooth move.
| | 06:52 | Press Tab. We scroll up a bit to see
if it's there, there is it, maybe bring
| | 06:59 | the size up somewhat.
| | 07:00 | Now I found that a big thickish font
works best for gradient color text.
| | 07:05 | So I am going to choose
Impact from my Text Font options.
| | 07:08 | Now let me select Linear Gradient from
the Fill Type list, and there it is, a
| | 07:14 | smooth transition from our
first color to the second.
| | 07:17 | Of course, any color changes you make
are instantly reflected in the text.
| | 07:21 | Let's change this black to
something more, let's go with green here.
| | 07:26 | Make it bright green.
| | 07:28 | That's pretty obnoxious, but there you are.
| | 07:30 | It's working well, and now you're
ready to add the next enhancements:
| | 07:35 | radial gradients.
| | Collapse this transcript |
| Incorporating radial gradients| 00:00 | A linear gradient, one that follows
along a line from one color to another,
| | 00:04 | doesn't require much explanation.
| | 00:07 | But what's a radial gradient?
| | 00:09 | As the name implies--not
too clearly, but it's there--
| | 00:12 | with a radial gradient we transition
from one color to another along a radius.
| | 00:18 | In this lesson, we'll insert our code
so that the color in the first color
| | 00:23 | picker, text color, is in the center ring
of the text and the gradient color fills
| | 00:28 | the outer ring. And of course there's
a smooth transition between the two.
| | 00:33 | Okay let's get to it.
| | 00:34 | Now all of our infrastructure is
already in place, thanks to adding the code for
| | 00:39 | the linear gradient in the previous lesson.
| | 00:42 | We only need to add the code to
handle the condition if radial gradient is
| | 00:47 | chosen from the fill type list.
| | 00:48 | We can put all that code
we need in an else-if block.
| | 00:52 | I'm going to scroll down to where we
have our linear gradient code, which starts
| | 00:59 | on line 288 with a couple of variables,
and I'm just going to inject this else-
| | 01:04 | if clause right in front of the else clause.
| | 01:12 | Now I have a matching set of curly braces so I'm
good, and I'm ready to put in my if condition.
| | 01:19 | So after the if statement, open and
close parentheses, and if the fillType ==
| | 01:28 | radialGradient, then we're going to need
to change the definition of textMiddle.
| | 01:36 | So I'm going to enter var textMiddle
and set this to the center of the text by
| | 01:44 | getting the height of the
text and then dividing it by 2.
| | 01:47 | So theText.getHeight divided by 2.
| | 01:53 | Next, we want to set up our gradient
object in a similar fashion to what we did
| | 01:57 | in the linear gradient lesson previously,
| | 02:00 | so var gradient = textContext.
| | 02:06 | Again, this is not a function
that KineticJS currently supports,
| | 02:10 | so we're having to use the standard
canvas operation which requires the
| | 02:15 | textContext and not a text object.
| | 02:18 | textContext.createRadialGradient, open
and close parentheses. createRadialGradient
| | 02:27 | takes two pairs of three arguments each:
| | 02:30 | the x and y coordinates, followed by the x
and y coordinates and a value for the radius.
| | 02:37 | One set of argument will be applied to one
color and the second set to the second color.
| | 02:44 | So our XY coordinates for the first
color are textCenter textMiddle--that will be
| | 02:52 | dead-center in the text--and then
I'll give it a radial value of 3. That's
| | 02:56 | fairly small but noticeable.
| | 02:58 | I don't want to make it too obvious.
| | 03:01 | Next we'll keep the same x and y
coordinates, so it's all coming from the same
| | 03:06 | center area, textCenter, textMiddle, and
the value we're going to enter in here
| | 03:13 | will be the textCenter value -3.
| | 03:16 | So it will be outside the radius of
the other color. Okay, a semicolon
| | 03:24 | to close this line. And now the next three
lines are exactly the same as we use before,
| | 03:30 | so I'm just going to go up to the
linearGradient section and copy those.
| | 03:36 | Well I spoke too quickly;
they're not exactly the same.
| | 03:39 | I could use one here, but it
results in kind of a harsh transition.
| | 03:44 | So I'm going to just put in .6 here to
make it a little bit smoother. And with
| | 03:49 | that one little bit of code, we're done.
| | 03:51 | I'll save the file and head on
over to the browser for a quick test.
| | 03:56 | So here's my browser page. Let me
hit refresh, enter in some new text.
| | 04:05 | Again, I'll switch it to impact, and then
let's size it up. And let's change Solid
| | 04:11 | Color to Radial Gradient.
| | 04:13 | Well, now it looks like all three of my
color fill options are working just fine,
| | 04:18 | and the user has a nice set of
alternative for his or her caption coloring.
| | 04:22 | We can of course change the colors
to make them look a little bit nicer.
| | 04:26 | This time let's change the first color,
which is the center, and I'm going to go
| | 04:31 | with something a little more yellowish.
| | 04:35 | And now let's change the second color as well, and this
time I'm going to go for more red to get
| | 04:42 | more of a sunset effect.
| | 04:44 | Now the project is basically done, but I have
one final bit of code cleanup to take care of.
| | 04:50 | In order to facilitate testing, I had
commented out the bit of CSS that hid the
| | 04:55 | caption controls until the user-clicked caption.
| | 04:58 | So now I want to remove that.
| | 05:00 | I'm going to go back to my code editor
and open up styles main.css, scroll down
| | 05:09 | to around line 165--there it is--and
remove this comment line here and its
| | 05:17 | companion, and now the text
form will be hidden initially.
| | 05:21 | I'll save the CSS file, and let's go
verify that it's working correctly.
| | 05:25 | One more refresh and as expected, I'm
on the modify page and I only see my two
| | 05:34 | figures here, so let's adjust those,
properly. And now I'm ready to add a
| | 05:39 | caption, and there are all my
caption controls. Let's change the text to
| | 05:51 | something meaningful. I'll change the font to
fantasy and let's size it up a little bit here.
| | 05:58 | I think I'll go with a linear
gradient and a red-to-yellow effect, and let's
| | 06:08 | change the shadow color, and maybe drag
it down just as tad here so I can take a
| | 06:15 | look. That looks pretty good. Just
tighten it up a little bit, and that's the
| | 06:22 | completed HTML5 Project Photo Card Titles.
| | 06:25 | Congratulations!
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | I hope you've got a lot out of HTML5 Projects:
| | 00:03 | Photo Card Titles and had as much
fun as I did in putting it together.
| | 00:08 | If you haven't checked out the
companion HTML5 project, Customized Photo Cards,
| | 00:12 | give it a look-see right here on lynda.com.
| | 00:16 | You have a great day.
| | Collapse this transcript |
|
|
