IntroductionWelcome| 00:00 |
(MUSIC).
| | 00:03 |
Well hello there, my name is Tom Green,
I'm a professor of interactive
| | 00:07 |
multimedia, author of well over a dozen
books, hundreds of tutorials, a
| | 00:10 |
half-dozen training DVDs, and a user of
Edge Animate since it's release in mid
| | 00:14 |
2011.
Edge Animate is a great example of a
| | 00:18 |
creative cloud tool that works
beautifully with the other Adobe tools
| | 00:21 |
and services.
Because Animate is an interactive
| | 00:25 |
application doing everything from acting
as a motion graphics application to
| | 00:29 |
performing mobile project assembly.
You are able to use it seamlessly with
| | 00:33 |
the other creative cloud app products.
Here are some examples of the real world
| | 00:38 |
projects we explore in the course.
Using effects in Illustrator, Fireworks
| | 00:42 |
and Photoshop.
Such as Photoshop's new blur technique.
| | 00:46 |
And applying these to both images and
video in your Edge Animate projects.
| | 00:50 |
Building an animation and using it as a
preloader in Animate by taking an After
| | 00:54 |
Effects CSX video to Photoshop to create
the animated GIF.
| | 00:59 |
Running your Animate projects through
phone gap build, to create versions for a
| | 01:03 |
number of mobile operating systems.
Explore dropping an OAM file into dream
| | 01:08 |
weaver to create an app directly in that
program.
| | 01:13 |
Building a mobile site prototype for the
desktop, tablet and phone by creating the
| | 01:17 |
assets in fireworks assembling the
animation and the anime and the quickly
| | 01:20 |
creating the site in Adobe Muse.
These are the projects we will tackle in
| | 01:25 |
this course.
And the only impediment to you getting
| | 01:28 |
creative with Animate is your
imagination.
| | 01:30 |
Let's get busy and create with Animate.
| | 01:33 |
| | Collapse this transcript |
|
|
1. Creating an Application with AnimateExploring the project files| 00:02 |
As you start working through the lessons
in this course, you will be asked to open
| | 00:06 |
a number of files and work with them.
In this video, what I want to do is just
| | 00:10 |
sort of explain what you're going to be
looking at.
| | 00:13 |
When you download the exercise files they
will come in a folder, usually it's
| | 00:16 |
Chapter 3 Exercise folder.
And inside that folder will be a complete
| | 00:21 |
version of the project.
So all the files that are involved in the
| | 00:24 |
project will be there, but there will
also be the exercise files.
| | 00:29 |
So I may ask you to open up a file in
your Exercise folder, so you open the
| | 00:33 |
Exercise folder, and if the chapter is
broken into pieces like this chapter here
| | 00:38 |
has five parts to it, I'll ask you, for
instance, to open the TV.AI file, located
| | 00:42 |
in your Exercise folder.
So you would navigate to your Chapter
| | 00:49 |
folder, the Exercise folder, which you
probably have open, and then just go to
| | 00:53 |
the Illustrator file, and away you go.
The other thing you might want to do, is
| | 01:00 |
inside your Exercise folder, just create
a separate folder for yourself, where you
| | 01:04 |
can actually save your projects as you
move along.
| | 01:09 |
So there you go.
There's how you can use the various
| | 01:12 |
assets that are provided in this course.
| | 01:17 |
| | Collapse this transcript |
| Creating a PhoneGap Build app with Edge Animate| 00:02 |
Edge Animate does a lot more than create
interactive motion graphics for HTML 5
| | 00:06 |
web pages.
In this lesson we take an Animate project
| | 00:09 |
and create a smartphone App using Edge
Phonegap Build.
| | 00:13 |
Which will convert your Animate projects
to native applications for Android, iOS,
| | 00:17 |
Blackberry and a number of other
platforms.
| | 00:21 |
In fact, the workflow from Animate to
testing on your device is relatively
| | 00:24 |
simple.
It takes as long to complete as, well,
| | 00:28 |
the length of this video.
So, let's get started.
| | 00:32 |
To get yourself started, open the
Index.an file located in your exercise
| | 00:36 |
folder.
Here in Animate, I've created a
| | 00:40 |
relatively simple project with
interactivity and a little bit of motion.
| | 00:45 |
And if we look at the project in the
browser just bring it over.
| | 00:48 |
And we load, you can there's a little
motion, a little interactivity.
| | 00:54 |
And if I click on the Interactivity, a
couple of little buttons come up, that
| | 00:58 |
can be tapped.
And what this is is, you know, it's a
| | 01:03 |
very simple home screen.
For what could be an interesting tour of
| | 01:07 |
Paris.
So How do I move from this HTML 5
| | 01:10 |
environment in the browser.
Or this HTML 5 environment in Edge
| | 01:15 |
Animate to the creation of native apps
for smart phones?
| | 01:21 |
The first step is saving the Animate
file.
| | 01:24 |
From that build we'll be looking for an
Index html file.
| | 01:28 |
So it is critical that your project be
named Index.an and that the published
| | 01:34 |
file be Index.html.
Speaking of publishing, that's the next
| | 01:39 |
step.
Once everything works and you've tested
| | 01:42 |
it in the browser.
It's time to get it out, so we go to File
| | 01:45 |
> Publish Settings.
Your publish started as the web, and I'm
| | 01:49 |
going to publish to a separate folder
called Paris.
| | 01:53 |
And I just clicked the Publish button and
it is done.
| | 01:56 |
We are now ready to create a smartphone
App.
| | 01:59 |
Now before we do that, we need to do a
couple of things, so let's head over to
| | 02:03 |
the folder.
Containing the files for this exercise.
| | 02:08 |
First thing I want you to pay attention
to is right here, Paris.zip.
| | 02:13 |
PhoneGap Build will be looking for a .zip
file so this is the published file that
| | 02:17 |
we've created from Animate and we've just
zipped it up.
| | 02:22 |
The next file is App icon.png.
And this is nothing more than a simple
| | 02:29 |
PNG image that can be created in
Fireworks or Photoshop.
| | 02:33 |
It's 114 pixels square.
And this will be used as the App's icon
| | 02:37 |
on the device and you can add it in
PhoneGap Build.
| | 02:42 |
The final file, Keystore may strike you
as a bit different, and it is important.
| | 02:49 |
This file is a signing key created using
the Android Software Developer Kit or
| | 02:53 |
SDK.
And in very simple terms the information
| | 02:57 |
located in this file is what gets your
App into the various App stores.
| | 03:02 |
PhoneGap Build now requires this file and
you will need to use the Android SDK on
| | 03:07 |
your machine to create your key.
Though we are going to be concentrating
| | 03:13 |
on an Android application for this
excersise.
| | 03:16 |
If you are looking to create iOS Apps,
then you will need a sign in key from
| | 03:20 |
Apple.
To do this, go to the developer area of
| | 03:25 |
the apple.com site, sign up as an iOS
developer.
| | 03:28 |
Provide information about your iOS
devices, and you will receive a sign-in
| | 03:33 |
key that will allow you to create iOS
Apps.
| | 03:36 |
When you use your Android sign-in key, in
PhoneGap Built, you will need to have the
| | 03:41 |
following information handy, and you
might just want to write it down.
| | 03:47 |
Because these are all created when you
create a key in the SDK.
| | 03:51 |
The alias name that is used by the
sign-in key.
| | 03:54 |
The Certificate Password and the Key
Store password.
| | 03:58 |
Okay, now that we've got the
administration out of the way, let's go
| | 04:01 |
build an App.
The first step on the process of course,
| | 04:04 |
is to log into your Creative Cloud
account.
| | 04:07 |
And when the account opens, make sure you
go to your Apps.
| | 04:13 |
And PhoneGap Build is right here in the
Edge Tools and Services.
| | 04:16 |
Click the Package Apps link.
And what this will do is log you in to
| | 04:23 |
PhoneGap Build.
That's where we are here.
| | 04:27 |
And the first thing you may want to do is
to register that sign in key.
| | 04:30 |
So you just come over to your login area.
Select Edit Account.
| | 04:36 |
Click Signing Keys and you'll notice that
there are three keys that you can add.
| | 04:40 |
iOS for apple devices, Android, which we
already have and Blackberry.
| | 04:45 |
So we're going to add an android key, so
just click on add key, and the title.
| | 04:51 |
I'm just going to use my name.
You're going to have to add the alias,
| | 04:56 |
which you created in the SDK, and now
what we're going to do is apply our
| | 05:05 |
Keystore file.
And it's located right here.
| | 05:12 |
You just select Open, and then submit the
key.
| | 05:16 |
And you'll notice that it's there and
it's locked, and if you want to unlock
| | 05:21 |
the key, you're going to need those two
passwords.
| | 05:26 |
We'll select "Unlock Key".
And the certificate password is what was
| | 05:33 |
created in the SDK and same thing for the
Keystore password.
| | 05:43 |
You submit the key and you see that it's
unlocked.
| | 05:47 |
Okay, let's go back to Apps.
So how do we get our App built?
| | 05:53 |
Real simple.
You come over to this big old blue button
| | 05:56 |
here that says Plus New App, click it.
And you're going to select Private
| | 06:00 |
because it's just you, you just want to
test it.
| | 06:03 |
And you really don't need to use a GitHub
account, so we're going to upload that
| | 06:06 |
Zip file that we created.
So you just click that big old button
| | 06:09 |
there.
There's the Zip file.
| | 06:11 |
Click Open and it will upload the file to
the PhoneGap Build servers and it's
| | 06:18 |
there.
Now enable debugging.
| | 06:21 |
If you select this it'll allow you to
debug the App right inside PhoneGap and
| | 06:25 |
enable hydration is kind of neat.
Becase as you change the application
| | 06:29 |
anybody that's got it will get the
changes automatically.
| | 06:32 |
We'll just leave these two deselected.
So we're going to name this file, Paris.
| | 06:42 |
And the description of the App is going
to be a Whimsical Tour of Paris.
| | 06:48 |
And once you've added the name of the App
and its little description you're ready
| | 06:54 |
to build and lo' and behold theres a
Ready To Build button, click it.
| | 07:01 |
And PhoneGap will narrowly wear away for
a minute or so creating the various Apps.
| | 07:10 |
As the Apps are created, they turn blue.
That red one for iOS tells me we don't
| | 07:15 |
have a sign-in key for it.
No big deal, we're more concerned about
| | 07:19 |
Android which just popped up.
And we'll just wait now for Blackberry.
| | 07:23 |
And because we don't have a sign-in key
for BlackBerry, it, too, is red.
| | 07:27 |
So, this line of icons are all the native
Apps.
| | 07:30 |
That can be created.
Android, Windows, this is Web OS and the
| | 07:36 |
Nokia system called Symbian.
And what we have just done here is
| | 07:42 |
created all these native Apps from the
Animate file.
| | 07:47 |
Naturally we're going to get that icon in
there so what you do is you come up here,
| | 07:52 |
one click, and you'll see that there are
settings.
| | 07:57 |
So you click the settings.
Scroll down to configuration, and there's
| | 08:02 |
a big Browse button.
You can't miss it Just click Browse, and
| | 08:05 |
let's edit that App icon.
Click Open.
| | 08:09 |
And then click Save, and you'll come back
to the main page and there is our icon.
| | 08:21 |
Now what's going on here is all the other
applications are picking up the icon.
| | 08:26 |
And you'll notice that there's an error
for Blackberry because the icon is a
| | 08:30 |
little bit too big for the Blackberry
system.
| | 08:34 |
That's the problem there, and iOS, well,
we just don't have the key.
| | 08:40 |
And now what we're going to do is apply
our key.
| | 08:47 |
Well, now that the App is created, there
are a couple of ways of getting it into
| | 08:50 |
your smart phone for testing.
The first is to simply scan the QR code
| | 08:54 |
up here if you've got Google goggles Or
other QR reader installed on the smart
| | 08:58 |
phone.
Just basically take a shot of that QR
| | 09:02 |
code, and what will happen is the App
will be downloaded and installed right
| | 09:06 |
onto your device.
The other method is to click this big
| | 09:10 |
blue Install button.
And you will see the installers for
| | 09:13 |
Android, WebOS, Symbian, and Windows
phone.
| | 09:17 |
A(UNKNOWN) of the four that we're we got
and if you to download the Andriod apk
| | 09:21 |
file, you just click this big blue button
here.
| | 09:25 |
It will download the apk to your computer
and from there you can install it on to
| | 09:31 |
your device.
And as you can see the application is on
| | 09:36 |
the device and working away.
So there you have it.
| | 09:40 |
A native smart phone App created by the
edge PhoneGap Build service.
| | 09:46 |
Using nothing more than the HTML 5 CSS
and Javascript created by Edge Animate.
| | 09:54 |
As you also learned you are not limited
to one platform.
| | 09:57 |
The Animate compositions you create can
be easily converted to native Apps for
| | 10:02 |
the Android, WebOS, iOS, Windows,
Blackberry and Symbian platforms.
| | 10:07 |
At what seems to be the click of a mouse.
And best of all, this opens up a huge
| | 10:12 |
number of possibilities, as you can now
create prototypes.
| | 10:16 |
In Animate, and literally in a few
minutes try them out on a variety of
| | 10:22 |
smart phones.
| | 10:26 |
| | Collapse this transcript |
| Workflow: Animate to Dreamweaver to PhoneGap Build| 00:00 |
You might think creating a native smart
phone App from an Animate project placed
| | 00:04 |
in a Dreamweaver page is a time consuming
and convoluted process.
| | 00:10 |
If that describes you, then you are in
for a rather pleasant surprise.
| | 00:15 |
In this lesson we take an Animate
project.
| | 00:17 |
Add it to a Dreamweaver CS6 page.
And create a native smartphone App using
| | 00:21 |
Phone Gap Build.
Which will convert that Dreamweaver page
| | 00:24 |
to a Native Application on Android, IOS,
and a number of other platforms.
| | 00:29 |
Oh yeah, did I mention?
We won't be leaving Dreamweaver.
| | 00:34 |
Now before we start you need to be aware
of a chance to the Phone Gap Build
| | 00:37 |
policy.
Phone Gap Build now requires a signing
| | 00:40 |
key for access to the various App stores.
And this key, if you've used Dreamweaver
| | 00:46 |
and Phone Gap Build in the past is a new
feature of the Phone Gap Build panel in
| | 00:50 |
Dreamweaver.
What is the signing key?
| | 00:54 |
It is a document produced by the
particular platform's SDK or software
| | 00:58 |
development kit, that enables you to
access that platform's App store.
| | 01:04 |
In this particular example, I will be
using a signing key.
| | 01:08 |
Key produced by the Android SDK on my
computer.
| | 01:11 |
When I created the Sign-In key I had to
provide 3 pieces of information.
| | 01:15 |
And you're going to need those pieces of
information as well for Phone Gap Build.
| | 01:20 |
You're going to need to know the name of
the alias for the file.
| | 01:25 |
A certificate password and a key store
password.
| | 01:29 |
These are all created when the key store
doc is created in the software
| | 01:32 |
development kit.
So don't lose them.
| | 01:36 |
Now if you're wondering about IOS Apps,
what you need to do is to head over to
| | 01:40 |
the Developer area of Apple.com to sign
up as an IOS developer.
| | 01:45 |
You will have to provide information
about your IOS device and, once the
| | 01:49 |
process is completed, you will receive a
signing key that allows you to create
| | 01:53 |
Apps for.
A variety of Apple devices.
| | 01:57 |
Now, to add this file to your creative
cloud account.
| | 02:01 |
The first thing we need to do is log in
to your creative cloud account.
| | 02:05 |
And when you do that, click on Apps and
then scroll down to Phone Gap Build and
| | 02:09 |
select Package Apps.
This will open the Phone Gap Bill page.
| | 02:14 |
And you're going to come to your login
area.
| | 02:18 |
And Edit account.
By the way, notice, they're also telling
| | 02:22 |
me that they've changed the sign-in
process as well.
| | 02:26 |
So we're going to Edit the account.
And we're going to click on sign-in key.
| | 02:30 |
This time, you'll notice the 3 required,
IOS, Android, and blackberry.
| | 02:35 |
I'm only concerned about Android, so I'm
going to click the Add Key button.
| | 02:39 |
I'm going to give this key a name.
I 'm going to call it Paris.
| | 02:43 |
And I'm going to use the alias from the
SDK.
| | 02:47 |
And then it's going to ask me where this
key store file is located.
| | 02:51 |
So I'm going to click in this area here.
And I'm going to navigate to where it is.
| | 02:57 |
And there's my key store file.
Click Open, and I'm going to Submit it.
| | 03:02 |
And once it's submitted, I'm going to
Unlock it.
| | 03:06 |
And if I Unlock the key, you notice
there's a certificate password and the
| | 03:13 |
key star password.
Submit the key and we're pretty well
| | 03:22 |
done.
So let's create an App.
| | 03:26 |
So I'm going to come back to Animate.
To get yourself started and to follow
| | 03:33 |
along open up the index.an file located
in your exercise folder.
| | 03:39 |
Here in(UNKNOWN) Animate I've created a
relatively simple project with
| | 03:42 |
interactivity and motion.
And if we look at it in the browser you
| | 03:46 |
can see that it's a fairly simple
project.
| | 03:49 |
I'm just going to.
Reload it.
| | 03:50 |
This comes down.
Got a little bit of motion here.
| | 03:53 |
This comes across.
There's some more motion.
| | 03:56 |
And if I click on that, we get a little,
a couple little buttons that come up
| | 04:00 |
which we can use.
And what you see here is a home screen
| | 04:03 |
for what could be an interesting tour of
Paris.
| | 04:07 |
So how do we move from this HTML 5
environment in Google Chrome.
| | 04:10 |
And this HTML 5 environment in Edge
Animate, to the creation of native Apps
| | 04:14 |
for the smartphone?
In Dreamweaver.
| | 04:18 |
The first step is to publish the project
to a separate folder on your computer.
| | 04:23 |
To do that, I go to File, Publish
Settings, and I select Animate Deployment
| | 04:28 |
Package.
And this is going to create an OAM file.
| | 04:32 |
I click the browse button to navigate to
a folder on my computer.
| | 04:36 |
Give it a name.
And if there's a poster image, I can add
| | 04:40 |
it.
And then, instead of clicking Save, I
| | 04:43 |
click Publish.
And that's all I need to do.
| | 04:47 |
So let's now head over to Dreamweaver.
Now, one of the key things that you're
| | 04:52 |
going to have to do with Dreamweaver is
to actually create a site definition for
| | 04:56 |
your Phone Gap project.
Because Phone Gap is right there in the
| | 05:02 |
site menu.
So I've created a little site called
| | 05:05 |
Phone Gap DW.
I've got an index page, that's 480 by
| | 05:10 |
800, that's the window size.
And now what I'm going to do is just give
| | 05:15 |
it a little title.
I'll just call it Phone Gap App.
| | 05:20 |
And I guess I'll Save that.
And now what I'm going to do is import
| | 05:25 |
that OEM file, and that's in Insert,
Media, Edge Animate Composition.
| | 05:33 |
This is new to Dreamweaver CS 6.
So I select that, and I'm just going to
| | 05:38 |
navigate to the folder where the OAM file
is located, which is the publish folder
| | 05:43 |
that I went to, there it is, Paris OAM.
Click open, and the file comes in, gets
| | 05:51 |
read, and you will see that once I Save
this, it will actually open up the OAM
| | 05:55 |
file.
And all the assets that are located in
| | 06:00 |
the Paris folder are basically just like
publishing a web document out of
| | 06:04 |
Aniimate.
So now that I've got all that in place.
| | 06:08 |
I can now concentrate on publishing the
App.
| | 06:11 |
And we're going to Cite Phone Gap Bill
Service.
| | 06:14 |
You don't choose settings.
That will open the.
| | 06:16 |
SDK.
You go to Fun Gap Build Service.
| | 06:19 |
When you open the Phone Gap Build
Service, you're going to create as a new
| | 06:23 |
project then you're going to click
Continue.
| | 06:27 |
It's going to look for the signing keys
and the one we've got entered of course
| | 06:32 |
is Paris so I'm going to enter the
certificate password.
| | 06:37 |
And in the key store password, and click
Continue.
| | 06:44 |
Once the builds are queued, it will start
building the App.
| | 06:51 |
So right off the bat, I'm being told that
IOS is requiring a sign in key.
| | 07:01 |
And we'll pick this up in a minute once
the builds are qued.
| | 07:05 |
Okay, so the builds are complete, you'll
notice that Android has a build.
| | 07:11 |
Blackberry, which didn't have a key Give
me an error.
| | 07:15 |
Web OS which is the HP system and of
course Symbion from Nokia so I could do
| | 07:21 |
that.
But what I want is the Android.
| | 07:25 |
Now I've got three choices on getting
this onto my device.
| | 07:28 |
The first here, click that I can go to
the emulator in the SDK.
| | 07:32 |
But actually there are two quicker
methods.
| | 07:35 |
The first one here is just to click the
View QR code.
| | 07:38 |
If you click it.
You'll see that the QR code opens up and
| | 07:43 |
what you do is hold your device up to the
QR code.
| | 07:47 |
And if you have a QR reader like Google,
Goggles you'll read it and this will
| | 07:51 |
download the App to the device and
install it.
| | 07:57 |
And you can test it right then and there.
The other thing you can do is just click
| | 08:01 |
the Download the Application.
And what this will do is download the APK
| | 08:05 |
file which you can then manually install
onto your device.
| | 08:10 |
So there you have it.
A native smartphone App created by the
| | 08:13 |
Edge Fun Gap Build Service using nothing
more than the HDML5 CSS and Java Script
| | 08:17 |
created by Edge Animate and Dream Weaver
CS6.
| | 08:22 |
As you also learned, you're not limited
to just one platform.
| | 08:26 |
You can go to symbian, Web OS, if you
have sign in keys for blackberry, and IOS
| | 08:30 |
you can Add those.
Or you can create your own use in the
| | 08:35 |
Android SDK.
The Animate compositions and Dreamweaver
| | 08:39 |
pages you create can then be easily
coverted to Native Apps.
| | 08:43 |
For Android, web OS, IOS, Windows,
Blackberry and Symbian platforms at what
| | 08:48 |
seems like the click of a mouse.
Now this opens up a huge number of
| | 08:53 |
possibilities.
As you can now create the Protoype and
| | 08:57 |
Animate.
Add it to a page in Dreamweaver and a few
| | 09:01 |
minutes later, try it out on a smartphone
that you're holding in your hand.
| | 09:07 |
| | Collapse this transcript |
|
|
2. Creating an Animate Video ProjectPlanning the workflow for your video project| 00:02 |
In this chapter, what we're going to
create is an Animate composition that
| | 00:05 |
plays an MP4 video.
The plan is really simple, when the movie
| | 00:08 |
starts, click a button, and the viewer is
taken to a frame, on the Animate timeline
| | 00:12 |
where the video starts playing.
And if we take a look at it in the
| | 00:16 |
browser you can see there's that frame.
There's the video, and if I click the
| | 00:20 |
play button, we gotta video playing in an
Animate composition.
| | 00:25 |
Now the key considerations behind this
project are, using Edge Animate to play a
| | 00:29 |
video in an Animate composition, and
keeping the imaging and video size small
| | 00:34 |
to ensure speedy load and playback times.
After playing through my media library, I
| | 00:42 |
decided to use a cable car video I had
shot a couple of years ago in
| | 00:46 |
Switzerland.
The next question of course was, how
| | 00:52 |
would all this look if I started working
with it inside of Animate?
| | 00:58 |
That's when I broke out my sketch book.
Like all projects, the creation process
| | 01:05 |
starts on a piece of paper.
I decided to go with a default state size
| | 01:10 |
of around 550 by 400.
In Animate, I needed a button that would
| | 01:15 |
get me to the video, two images for the
stage, one for the backgrounds for each
| | 01:19 |
of the frames, and the button that starts
everything off.
| | 01:25 |
I'm not a huge fan of simply laying a
video into a screen, and decided to
| | 01:30 |
create a holder, right in here,
specifically for the video in Fireworks.
| | 01:37 |
The images were chosen from a couple of
stills I'd taken on the day I went up a
| | 01:40 |
mountain in a cable car.
I also wanted something a little bit more
| | 01:44 |
jazzier then the usual Nav button.
So I settled on a stylized TV created in
| | 01:49 |
Illustrator several years ago.
Next I needed to figure out the size of
| | 01:55 |
the video.
The original size of 1280 by 720 wasn't
| | 01:59 |
going to work.
Next I needed to figure out the size of
| | 02:03 |
the video, the original size of 1280 by
720 wasn't going to work.
| | 02:08 |
But knowing the ratio was 16:9, I did a
little math and settled on 400 by 255 for
| | 02:13 |
the video.
From there the video clip was opened in
| | 02:18 |
Premier Pro CS6 and trimmed down to 33
seconds.
| | 02:22 |
I also added an audio clip from a defunct
Adobe product, Sound Booth, and faded out
| | 02:28 |
video over a couple of seconds at the
end.
| | 02:32 |
I then output the video as an mp4 and was
ready to create in Animate.
| | 02:39 |
By the end of this chapter you will have
learned a couple of important lessons.
| | 02:42 |
How Firework CS6 is a key tool when it
comes to making things small, really
| | 02:47 |
small, for the web.
A use for Photoshop CS6 that has
| | 02:53 |
absolutely nothing to do with imaging,
and, how to stream and play an mp4 video
| | 02:58 |
in an Edge composition.
We're going to have some fun with this
| | 03:04 |
project, so let's roll up our sleeves and
create a video composition in Animate.
| | 03:11 |
| | Collapse this transcript |
| Creating an SVG file for your project in Illustrator| 00:02 |
In this exercise what we're going to do
is take a look at how Illustrator fits
| | 00:05 |
into creating assets for Edge Animate.
Now we're not going to get into drawing
| | 00:10 |
with Illustrator and all the features of
that.
| | 00:13 |
But what I want to do is show you how
your Illustrator documents, especially
| | 00:16 |
documents from Illustrator CS6.
Have to be exported in the SVG format.
| | 00:21 |
I don't know if people quite get this
one.
| | 00:23 |
So to get yourself started up on it, the
TV.AI file located in your exercise
| | 00:27 |
folder.
And when it opens, you're going to see a
| | 00:31 |
little version of this.
I've got this sitting right here at 500%.
| | 00:36 |
If I take it down to 100%.
You can see Text and a little button.
| | 00:40 |
Now just to give you a quick explanation
of what I did here.
| | 00:44 |
I found an old TV set that I'd drawn
years and years ago in an earlier version
| | 00:48 |
of Illustrator, and saved as an AI
document and thought I'd use that.
| | 00:53 |
And having it just sit by itself just
didn't work for me, so I've put it behind
| | 00:57 |
a little bit of a gradient to sort of
make it look like a button.
| | 01:01 |
Now that I've got it done, I need to
export this out, or get it out of here,
| | 01:05 |
in a format that animate can read, and
that is the SVG format.
| | 01:09 |
SVG, Scalable Vector Graphics, basically
xml that describes how to draw objects
| | 01:13 |
and fill them with color on a web page.
I'ts kind of neat.
| | 01:18 |
So here we go.
Now, the first thing I want you to pay
| | 01:21 |
attention to is that there are two layers
here.
| | 01:24 |
There's a text layer, TV Button for Edge
Animate, and then there's the actual
| | 01:27 |
button.
And if I turn off the button layer, you
| | 01:30 |
can see that the button disappears but
the TV is inside the text layer.
| | 01:35 |
So what I'm going to do is that I'm going
to move the TV down into the button
| | 01:38 |
group.
Right there.
| | 01:43 |
See these are the things you want to
check because when you get working you
| | 01:46 |
sometimes move things around and you just
don't pay attention to where things are.
| | 01:50 |
They all look proper but they're not.
Not if I turn off the text it disappears.
| | 01:53 |
Now what I don't need here is the text.
I'm going to to hide the text and just
| | 01:57 |
have the button layer selected.
So we just select the button layer, File,
| | 02:02 |
Export.
And if you go to export, the format we
| | 02:04 |
need is not there, so don't think that
you're going to be exporting, in actual
| | 02:08 |
fact, you're going to Save.
So you're going to Save As, and we'll
| | 02:14 |
call this one TV1, and we'll save it as
an SVG, not SVG compressed, SVG.
| | 02:21 |
Click Save and this will open up the SVG
dialogue box.
| | 02:25 |
The proof value you want is SVG 1.1,
that's the latest standard.
| | 02:30 |
If there's any type, you can convert it
to outlines or actually embed the fonts
| | 02:34 |
in there or do whatever, not a good idea,
convert to outline.
| | 02:38 |
If there are images you can either link
to them or embed them and if you're
| | 02:42 |
really into beating yourself up you can
open up the SVG code.
| | 02:46 |
And if you click that button this is what
the document looks like.
| | 02:50 |
So if you're into working with code, this
is a great little feature.
| | 02:54 |
And you click okay, and you've created
your SVG.
| | 02:58 |
See, it's a TV1 SVG.
But you'll notice that there's this text
| | 03:02 |
layer still.
Now I want you to pay attention to this
| | 03:06 |
because layers that are hidden also get
exported.
| | 03:09 |
So there's the TV1 SVG that we just
created.
| | 03:12 |
And if I go to the file size, you can see
that it's sitting about 16k on the desk.
| | 03:17 |
And I think there's a little extra weight
there, simply because of the fact that
| | 03:21 |
we've got this text.
Now watch what happens when I get rid of
| | 03:24 |
the text.
So if I just Delete the selection.
| | 03:28 |
Text contains artwork, do you want to
delete it, yes I do.
| | 03:31 |
And then Save the SVG image.
Let's come back to the TV1 SVG.
| | 03:36 |
Remember it was 16k.
Get info, it's now half that size.
| | 03:40 |
It's going to load.
Really fast.
| | 03:42 |
So there you go, there's working with a
SVG.
| | 03:45 |
It's not that difficult to do, just
remember that there are sometimes layers
| | 03:48 |
that are in a layer that will also still
move along.
| | 03:52 |
So get rid of the ones that aren't used,
they will be saved in the SVG image and
| | 03:56 |
they will reduce the file size.
The other thing to be aware of is where
| | 04:01 |
all of your content is located in the
Illustrator document itself.
| | 04:06 |
It may not just all be in the same layer,
so make sure that you've got everything
| | 04:10 |
properly lined up.
And then export as SVG.
| | 04:17 |
| | Collapse this transcript |
| Optimizing and sizing your image in Fireworks| 00:00 |
Fireworks CS6 has been called a web
designers toolbox.
| | 00:03 |
And in many respects that is a true
statement.
| | 00:06 |
It works with vectors, it works with
pixels.
| | 00:09 |
And in this exercise, you're going to
discover that not only does it work with
| | 00:13 |
vectors and pixels, but it also deals
with a key component of working with
| | 00:16 |
images on the web.
Small equals fast.
| | 00:21 |
And you can create very small and
efficient images very quickly in
| | 00:26 |
Fireworks.
Now to get yourself started, open up the
| | 00:31 |
DSC_33.jpg image located in your exercise
folder.
| | 00:36 |
And when it opens you're looking from the
side of Mount Stockhorn in Switzerland.
| | 00:40 |
Now if we come into the interface here
and we just take a look at the size of
| | 00:44 |
the image, it's 3,800 by 2,500.
This is not going to work in animate,
| | 00:48 |
especially when we're dealing with an
image that needs to be 550 by 400 pixels
| | 00:52 |
high.
So how do we do that quickly?
| | 00:55 |
Well, what you do is select the image,
and you come to modify canvas, image
| | 00:59 |
size.
And you notice that these are links, so
| | 01:02 |
that means they're proportional, so if I
change this to 550, I'm a little short
| | 01:06 |
ont he height, so I'm going to change the
height to 400.
| | 01:11 |
And now I know I can just trim off a
little bit here, this is good, click
| | 01:15 |
okay.
And if I take it up to 100 percent, I'm
| | 01:18 |
now looking at 100 percent of the image.
Now the other thing to keep in mind here
| | 01:23 |
is, we may think smaller, the file size
drops.
| | 01:27 |
So by Pphysically making it smaller.
We've still got the same number of pixels
| | 01:31 |
but physically it's smaller and not as
much to draw, so the font size is going
| | 01:34 |
to come down.
Keep in mind that this image originally
| | 01:38 |
started at 3.4 megabytes in size.
Okay, we've got that done, let's crop the
| | 01:42 |
image.
To crop out those extra pixels, what you
| | 01:45 |
do is you come over here to the tool bar
and right in the select area click crop
| | 01:49 |
tool.
Right there.
| | 01:52 |
Select it.
Just draw our a small crop area and
| | 01:55 |
instead of trying to do it by eyeball,
what you're going to do is you're
| | 01:58 |
going to set the width to 550 pixels and
you're going to set the height to 400.
| | 02:04 |
And you can see that the, crop, is,
there.
| | 02:07 |
And, you can also, determine where it is
on the screen, so 'm going to set it at
| | 02:11 |
zero, zero, I'm just going to take off a
little bit of the edge here.
| | 02:16 |
And now that I'm happy with it, I press
the Return key and it's cropped.
| | 02:21 |
So now that we've got the image down to
550 by 400, I think what we need to do
| | 02:25 |
now is make it really small.
Now there are a couple of ways of doing
| | 02:30 |
it.
The first way you can do it is right here
| | 02:32 |
with the Optimize panel, so you just
click on the optimize icon.
| | 02:36 |
And you choose a JPEG image, and you can
choose the JPEG quality.
| | 02:40 |
The other way you can do it is you can do
a two wrap.
| | 02:44 |
So if you click the Two Wrap.
There's the original.
| | 02:47 |
There's the one that we just cropped out.
It's now down to 125k.
| | 02:52 |
I think we can get it a lot smaller.
So if I choose optimize.
| | 02:56 |
And we'll say jpeg smaller file.
And the quality goes to 60 percent,
| | 03:01 |
notice it drops to 22k.
And it gets a little bit on the fuzzy
| | 03:05 |
side, so let's take the quality up to
about 70 percent and we can close that
| | 03:09 |
and you can do a side by side comparison.
Now, another thing that you can do here,
| | 03:16 |
we're just going to go back to the
original, is not even work with this, you
| | 03:20 |
can go to File > Export wizard.
Now, the wizard that's built in is kind
| | 03:25 |
of interesting.
It will help you select a format,
| | 03:28 |
minimize the file, and reduce the file to
target size.
| | 03:32 |
So, let's just say the target export file
size is about 50k.
| | 03:36 |
So, we want around 50.
Click continue, and it's going to the web
| | 03:40 |
and they're going to recommend a gif or
jpeg which is fine, and that opens the
| | 03:45 |
image preview window now this is kind of
neat because we can export right outta
| | 03:49 |
this and you can see that the image is
currently sitting at 49 and a half K.
| | 03:58 |
Which is not bad for the quality of 77
percent, and if you want to jam it down
| | 04:03 |
even further, you can take the target
size down, say, we'll say to 45 percent,
| | 04:08 |
and the file size drops to 44 K.
So you can do a lot of work here, just in
| | 04:16 |
this one little area, we're going to take
it up to 60 and you can create your
| | 04:20 |
images right here just by jamming it
down.
| | 04:26 |
You can also choose the various formats
you want.
| | 04:30 |
Click export and we're going to export
this as background.
| | 04:36 |
And we're going to save it to our
exercise folder.
| | 04:42 |
And I'm going to put in fireworks part 2,
and I've already got it there, so I'm
| | 04:45 |
just going to cancel it out.
But, if you do click export, it's just
| | 04:49 |
going to ask you to replace it and it
will give you the background image.
| | 04:53 |
I'm just going to cancel that.
And the image as you saw, shrank, from
| | 04:58 |
3.4 megabytes down to just under 50k.
That's a pretty substantial saving.
| | 05:03 |
So in this exercise, what we've done is
we've taken a great big image, taken with
| | 05:08 |
a DSR camera.
And taken it down to the size that we
| | 05:11 |
need the animate interface.
We've optimized the image, compressed it
| | 05:15 |
down so that it fits and managed to keep
the quality somehwat acceptable.
| | 05:19 |
Remember the more you jam down, the less
quality there is.
| | 05:22 |
So you're going to have to make some
judgement calls.
| | 05:25 |
But Fireworks is just ideal for it and we
did the whole thing in under five
| | 05:30 |
minutes.
| | 05:33 |
| | Collapse this transcript |
| Creating and exporting a video holder in Fireworks| 00:02 |
If there's one thing that I really have
problems with when people work with video
| | 00:05 |
it is that they just slap it on.
It just sits there flat on the interface
| | 00:10 |
and video can be treated as a design
element and given it's own little space
| | 00:14 |
and its own little visual appeal.
And people will even pay more attention
| | 00:19 |
to it.
And that's what we're going to do in this
| | 00:21 |
exercise.
We're going to create a little space to
| | 00:24 |
hold the video and the animate project,
plus at the same time I'm also going to
| | 00:27 |
show you how to export a multi-layer
fireworks document ready for placement in
| | 00:31 |
animate.
So let's get started.
| | 00:35 |
And to get yourself started open the
background.jpg image located in your
| | 00:39 |
exercise folder.
And when it opens there's that image from
| | 00:42 |
Mount Stockhorn and what we're going to
do is just put a video holder in here
| | 00:46 |
somewhere.
Now if you come to the Layers panel which
| | 00:50 |
is right here.
It's this little button that says panels,
| | 00:52 |
click it.
You can see you've already got a
| | 00:54 |
background layer with the word bitmap in
it, so I want you to lock that just so
| | 00:57 |
you don't accidentally select the
background tier.
| | 01:00 |
First step in the process is double-click
the words layer one and you're going to
| | 01:05 |
name this Video Holder.
Now that we've got that done we can now
| | 01:10 |
select the rectangle tool right over here
, and just draw in a rectangle and we'll
| | 01:15 |
make it 400 by 225, which is the size of
the video.
| | 01:21 |
And see there are the dimensions and
we're going to change the background
| | 01:25 |
color to white, so we just know that
that's the video.
| | 01:30 |
Now that we've got the video area
identified, let's create the holder that
| | 01:35 |
the video slides into.
So you select your object and copy and
| | 01:39 |
paste it.
So it's Cmd or CTRL + C and then Cmd or
| | 01:42 |
CTRL + V.
We now have a copy of it.
| | 01:44 |
You can see rectangle, rectangle.
And with one that's selected, we're
| | 01:50 |
going to change it to 425, wide, 425
pixels wide, by 245 pixels high, so we're
| | 01:55 |
adding 20 pixels on ither side.
And we're going to change the color to
| | 02:02 |
black.
Now we've got the rectangle sitting over
| | 02:05 |
the video, so we're really not too sure
what's where.
| | 02:09 |
So you select the width rectangle and
just slide it above the black rectangle
| | 02:13 |
and there we go.
Now let's make sure that we've got both
| | 02:17 |
selected so marquee both objects.
And what we want to do is sort of get
| | 02:21 |
them aligned with each other.
And there's an align panelright here on
| | 02:25 |
the tools or the panels.
And you select the align and we're going
| | 02:29 |
to align horizontal center.
We're going to align the vertical center
| | 02:33 |
and we are done so we can close the align
panel.
| | 02:36 |
Now what we're going to do is select the
black rectangle and we're going to come
| | 02:40 |
down to the filters, bevel and emboss,
enter bevel.
| | 02:44 |
Now these are rather neat because these
are live effects so that means you can
| | 02:48 |
change them and it will change as you do
it.
| | 02:52 |
And what we're going to do, is go with a
ring effect.
| | 02:55 |
And you can see we've immediately got a
little frame for our video, which is
| | 02:59 |
exactly what we're looking for.
So, we can close that and we can take the
| | 03:04 |
white box out of here because we are
going to create our own in anime.
| | 03:08 |
So now we've got the video holder right
here, and we've got the background image.
| | 03:13 |
How do we export them out?
Well, we want to make this as small as
| | 03:17 |
possible.
One of the problems with fireworks is
| | 03:19 |
that trying to individually export images
in various formats is just not going to
| | 03:23 |
work.
So I'm going to show you a
| | 03:26 |
little(INAUDIBLE) here.
So I'm going to come to the Layers panel,
| | 03:30 |
we're going to unlock the background
layer, we're going to close the layers
| | 03:33 |
panel, and then we're going to, just
going to come to the optimize panel here,
| | 03:36 |
and we're going to change it to a png 8,
we're going to change it to a png image,
| | 03:40 |
and reduce down the number of colors in
it, which makes it really small.
| | 03:47 |
And then we can close that, and then what
we can do here is go to File > Export and
| | 03:51 |
when you get the export menu, you select
Export > Layers to files.
| | 03:56 |
Now what this will do is take the
individual layers, the background layer,
| | 04:00 |
and the video holder layer.
And export them out.
| | 04:04 |
Not only that, the Video Holder Layer
will be trimmed down to just the exact
| | 04:08 |
size that it needs.
So you just click Export.
| | 04:12 |
And it's done.
And if you want to see what they look
| | 04:15 |
like there we are.
We've got a png image and we've got a
| | 04:19 |
background jpg.
Now here's where you've got to make some
| | 04:23 |
decisions.
If I get some info on this background
| | 04:26 |
image you'll see that it's 37 k.
And the background PNG image is a little
| | 04:31 |
bit larger, it's sitting in 102k, so we
don't need that.
| | 04:36 |
We're going to throw the PNG image out.
And we're going to keep the video holder,
| | 04:41 |
and the video holder is really tiny.
It's only four k.
| | 04:45 |
So it's not going to take up a lot of
space, and it's going to load up real
| | 04:48 |
fast in Anime.
So there you go.
| | 04:51 |
There's how you can create an interface
very quickly in Fireworks.
| | 04:55 |
Basically, just use the Layers panel to
build up the layers and build up the
| | 04:59 |
objects.
For the interface, I'm going to export
| | 05:03 |
the whole thing, layers as images.
Other things that you can do is use the
| | 05:08 |
live effects to quickly make objects that
will work inside the interfaces, and this
| | 05:13 |
one here, it shows you how to turn a
square into the background for an HTML5
| | 05:17 |
video.
| | 05:20 |
| | Collapse this transcript |
| Adding Smart Filters and blurs to your video in Photoshop| 00:02 |
If you are a Creative Cloud subscriber,
you have got a really cool addition to
| | 00:05 |
Photoshop.
And that's what we're going to do in this
| | 00:08 |
exercise.
We're going to actually take a look at
| | 00:11 |
with one of the new features that came
out, Smart filters and Blurs for not only
| | 00:15 |
images but also video in Photoshop.
And we're going to apply a smart blur to
| | 00:20 |
a video.
And then use that video in an animate
| | 00:23 |
project.
So let's get started.
| | 00:25 |
And to get yourself started, open up the
stockhorn.mp4 file that's located in your
| | 00:30 |
exercise folder.
And when it opens you'll see that there's
| | 00:34 |
a video in here.
If you want to take a look at it, just
| | 00:37 |
press the spacebar, and it will play
(MUSIC).
| | 00:41 |
One of the first steps in the process is
to right-click on the Layer one here and
| | 00:46 |
convert it to a smart object.
And now that it's a smart object, we can
| | 00:52 |
go to Filter Blur and apply an Iris Blur.
Now you'll notice that the interface
| | 00:57 |
changes.
We've got a Field Blur, Iris Blur, and
| | 01:00 |
Tilt Shift, so you can apply these blurs
to video.
| | 01:04 |
Now understand, these are not progressive
things.
| | 01:07 |
Just, you know, you can't add this at one
time and have it expand.
| | 01:11 |
It goes right across the whole clip.
So the first thing we want to do is apply
| | 01:16 |
an Iris Blur, make sure it's selected,
and then we're going to make it look like
| | 01:19 |
it's almost like a rounded corners of a
window that we're looking out.
| | 01:24 |
So you click on this handle here and just
bring it out so it looks sort of rounded,
| | 01:28 |
and then you grab this handle.
Just pull it out to the side, just like
| | 01:33 |
that.
And you can see that as you're pulling it
| | 01:36 |
across, you're also affecting the blur.
Now, if you want to change the blur
| | 01:42 |
amount, you just use this slider here.
And we're going to set it to about 19,
| | 01:47 |
right about there.
You can do it by the numbers as well.
| | 01:51 |
And once you're happy with it.
You can just click OK.
| | 01:55 |
And if you press the space bar, you can
see,(MUSIC) that this area in here is in
| | 02:00 |
focus, but there's a lot of blur going on
around the edges here.
| | 02:07 |
Which is kind of the effect that we
wanted.
| | 02:10 |
Now how do you get this out of Photoshop?
Well, you don't export.
| | 02:13 |
What you do, is you do File.
Export > Render video.
| | 02:17 |
And the video dialog box will open, it's
going to ask you what type of file you
| | 02:22 |
want, we're going to use the Adobe media
encoder, it's going to give me H264, this
| | 02:27 |
is what we need for video for animate.
We have a high quality preset, yeah let's
| | 02:36 |
keep the quality high.
Notice it's 400 by 226, no big deal
| | 02:40 |
there.
30 frames per second frame rate, perfect.
| | 02:44 |
Field order progressive, yeah we'll use
that.
| | 02:47 |
we're going to render all the frames and
there are no render options here, so
| | 02:51 |
we're happy.
Now, the other thing is, is you can
| | 02:54 |
either go to H264 Quicktime, but if
you're going to the web, you're going
| | 02:58 |
H264, and that's all there is to it.
The other thing that you're going to do
| | 03:03 |
is you're going to select the folder to
save it to, so we're going to go to the
| | 03:07 |
Chapter Three Exercise folder.
And we'll put it in the Photoshop folder,
| | 03:12 |
and we're going to choose that.
And we'll save that as Stockhorn.pf so
| | 03:17 |
that we don't affect the original.
And you click the Render button.
| | 03:23 |
And this will take a couple of minutes,
so we'll pick it up when it finishes.
| | 03:28 |
And we're almost there.
We are done.
| | 03:31 |
And the file is complete.
And we've got a video sitting in our
| | 03:36 |
folder.
So in this exercise, what I've done is
| | 03:40 |
I've shown you how you can actually use
Photoshop to play with video.
| | 03:47 |
What you do is you bring the video in, it
just comes in almost like an image, just
| | 03:50 |
File > Open.
And then you just convert the video to a
| | 03:54 |
Smart object, and then you can apply the,
blurs, by selecting Filter and then Blur.
| | 04:01 |
And it will open up the Blur Gallery,
this is a feature that's new.
| | 04:04 |
To CS6 creative cloud subscribers, and
apply the filter some blur.
| | 04:10 |
So you can also apply others filters from
Photoshop to your work, and then File,
| | 04:15 |
Export, Render as video.
Choose H264 and you're good to go if
| | 04:21 |
you're going to the web.
| | 04:24 |
| | Collapse this transcript |
| Embedding your video into your Animate project| 00:02 |
Though animate does not have the
capability to add video or audio directly
| | 00:05 |
to the timeline.
This does not mean you can't use Animate
| | 00:09 |
to play video or audio media types in
your animate compositions.
| | 00:14 |
In fact you can play video and audio
files.
| | 00:18 |
All you need to do is to inject the HTML
for these media types and then use the
| | 00:22 |
Code Panel to add the HTML.
To the selected elements, which is
| | 00:27 |
exactly what we're going to do in this
exercise.
| | 00:30 |
And to get yourself started open the
videoplayer.an file located in your
| | 00:35 |
Exercise folder.
And when the file opens you'll see that
| | 00:39 |
I've pretty well assembled the project
for you.
| | 00:42 |
The background image is one of the ones
that was done in Fireworks.
| | 00:46 |
There's that little button that we did in
Illustrator.
| | 00:50 |
And if we scrub over to this video here
you can see there's that container for
| | 00:54 |
the video.
There's the background image that was
| | 00:57 |
done in Fireworks and what I've added
here is a rectangle.
| | 01:01 |
And you'll notice that the rectangle is
400 by 225, which is precisely the size
| | 01:05 |
of the video that is going to play.
And we're actually going to replace this
| | 01:11 |
rectangle with the video from the
Photoshop exercise.
| | 01:15 |
Now, let's take a look at the project
files, just so we can be really clear on
| | 01:19 |
where things are.
If you open up the Project folder you'll
| | 01:24 |
see that the images are all where they're
supposed to be and in the Images folder
| | 01:28 |
but there's now a Video folder.
And inside the Video folder is a file
| | 01:34 |
stark1.jpg, this is going to be used as a
poster image for the file and of course
| | 01:38 |
here is the mp4 that was created.
Now if we come back to Animate you'll see
| | 01:44 |
that the button is active here.
There's been a little code added to it
| | 01:49 |
right here if I open the actions for it
you can see that it basically says Play
| | 01:53 |
video.
So that means when the button is clicked
| | 01:58 |
go to that label.
And I'll close the code window here.
| | 02:03 |
And if I keep this selected, you'll
notice too that I've added a cursor to
| | 02:08 |
this button simply to make sure that the
user knows it is interactive.
| | 02:14 |
Now, the magic all happens over here in
the video.
| | 02:18 |
So let's get started.
The first step in the process is to
| | 02:22 |
actually add a trigger for this frame.
So make sure that your play head is
| | 02:28 |
directly over the Video label, click once
to insert a trigger and let's go to work.
| | 02:36 |
Now, the first thing we want to do here,
is get this element.
| | 02:40 |
So, we're going to use a snippet to do
that.
| | 02:43 |
So, we're going to get the element.
And the element that we want is this one
| | 02:48 |
right here, it's called rectangle, so
we're going to change to that, to the
| | 02:53 |
rectangle.
Okay?
| | 02:56 |
So we change the Element name to
Rectangle.
| | 02:58 |
And while we're at it, let's change the
variable from Element, which doesn't make
| | 03:02 |
much sense.
We'll change it to VID.
| | 03:06 |
So what we're saying here is, when the
play head reaches this trigger, it's
| | 03:10 |
going to open up the symbol called
rectangle and give it the name video.
| | 03:16 |
Now we've got to do something with it.
So, let's hit the return key.
| | 03:21 |
And we're going to be using jQuery to
inject the HTML into our project, here.
| | 03:27 |
So here's how you do that.
The first thing you do is just vid.html
| | 03:31 |
bracket bracket semi colon.
What we're doing is using jquery and
| | 03:36 |
we're using jquery to inject HTML.
What, what HTML are we going to add.
| | 03:43 |
Well we're going to need to string
literal so it's just single quote single
| | 03:47 |
quote.
And the tags that we're going to use, go
| | 03:51 |
between those single quotes.
Those are going to be between the video
| | 03:57 |
tags, user html5.
So there's the opening video tag.
| | 04:01 |
And there is the closing video tag.
Now we can start adding the code.
| | 04:07 |
The first thing we're going to do is to
add some, add the width.
| | 04:12 |
So its width equals quotation mark 400.
That's the width of the video.
| | 04:18 |
Space.
And of course there's a height associated
| | 04:23 |
with it.
Height equals 225.
| | 04:26 |
And now that we've got the height and the
width set, we can now identify the
| | 04:31 |
source.
These are all attributes that are part of
| | 04:37 |
the HTML 5 code, so source equals
quotation mark, video.
| | 04:43 |
So, we are going to enter the Video
folder, backslash, and we're going to
| | 04:48 |
grab the Stockhorn.mp4.
You can see that's right there.
| | 04:57 |
And of course there's a poster frame
associated with this now the poster frame
| | 05:01 |
will show up instead of a white space so
if you don't have a poster frame before
| | 05:04 |
the video loads that symbol that we're
changing, the rectangle will change will
| | 05:08 |
turn white so there'll just be this white
blank area, let's fill it with.
| | 05:14 |
That image, so we're going to go back
into the video folder.
| | 05:21 |
So we're going to say poster equals,
quotation mark, video, backslash,
| | 05:29 |
Stockhorn.jpg.
So now we've added the poster frame.
| | 05:37 |
The other attribute that you need to give
this, is the type.
| | 05:43 |
So, we're going to add type equals
quotation mark video backslash MP4.
| | 05:50 |
Add another space.
And finally, we're going to add some
| | 05:55 |
controls to it.
Controls > equals > quotation mark >
| | 06:00 |
controls.
So lets go through this just one more
| | 06:04 |
time just to be sure we've got everything
correct.
| | 06:07 |
We're using the html5 video tag and the
attributes are the width and the height
| | 06:12 |
of the video.
We're identifying where the video is
| | 06:15 |
located, its source.
We're seeing that there is a poster frame
| | 06:19 |
associated with the video.
And it's located in the Video folder.
| | 06:23 |
We have to tell HTML 5 what type it is.
Video MP4.
| | 06:29 |
And we also want to add the controls.
And if we close the code, notice there's
| | 06:35 |
a little message here.
And we don't need to worry about SVG.
| | 06:42 |
And if we test the movie, Cmd + Return or
CTRL + Enter, we click this.
| | 06:50 |
There's the cable car, there are the
controls.
| | 06:55 |
And if we click the Play button.
(MUSIC)(MUSIC) The video plays.
| | 07:02 |
Let's go back to Animate.
We're going to click Chrome and there you
| | 07:07 |
go.
All you need to do now is to save or
| | 07:09 |
publish the project and you have now
injected video into it.
| | 07:14 |
Notice that the key to this whole thing
is creating a rectangle or holder, you
| | 07:18 |
can call it whatever you want.
I just went with rectangle but it is the
| | 07:23 |
exact size as the video.
That way, when it's replaced using the
| | 07:28 |
HTML.
We don't have to worry about sizing or
| | 07:31 |
anything like that.
Now if we go through the HTML just one
| | 07:35 |
more time.
We started by identifying where the
| | 07:39 |
video's going to go.
It's going to go into the rectangle
| | 07:43 |
element.
And then we used the video tag from HTML5
| | 07:46 |
to identify the width.
Add height.
| | 07:50 |
The source where it was located.
Notice it's in that folder called Video.
| | 07:54 |
And that's a good habit to get into.
Put this stuff in a folder.
| | 07:58 |
They needed a poster Image.
The poster Image will avoid empty space
| | 08:03 |
before the video loads.
And we have to identify the type of video
| | 08:08 |
it is.
That's an attribute from HTML5 and the
| | 08:13 |
controls that we wanted to incorporate.
So there you go.
| | 08:19 |
That's how you can use external video
inside of Edge Animate.
| | 08:25 |
| | Collapse this transcript |
|
|
3. Creating an Interactive, Responsive Banner AdOverview| 00:02 |
In this chapter, we're going to create a
responsive banner ad in Edge Animate.
| | 00:07 |
The Apple via content rotator, about the
size of a common hero unit, that talks
| | 00:11 |
about winter in Ontario.
And, we'll use a number of images that
| | 00:16 |
focus on winter.
Including a little tent that comes
| | 00:19 |
sliding in here.
Now the focus of the chapter will not be
| | 00:24 |
the content rotator, it'll actually be
the responsiveness features that are
| | 00:29 |
built into Edge Animate.
We'll also take a close look at the Save
| | 00:35 |
for Web feature of Photoshop, and how it
works with animate images.
| | 00:41 |
We'll talk about coding up the content
rotator.
| | 00:45 |
And finally, I will review how to create
an animated GIF preloader using After
| | 00:53 |
Effects CS6, Photoshop CS6, and Edge
Animate.
| | 01:00 |
| | Collapse this transcript |
| Workflow: Photoshop to Animate| 00:02 |
One of the great features of Photoshop is
its ability to basically do a lot of
| | 00:06 |
image manipulation at a very high level
and then output it for usage in Animate.
| | 00:13 |
And one of the ways you do that is to
apply filters and things like that and
| | 00:17 |
then use the Save for Web dialog box in
Photoshop CS6.
| | 00:21 |
So let's take a look at that.
And to get yourself started, open the
| | 00:24 |
cover jpg image located in your exercise
folder.
| | 00:27 |
And when it opens you'll see a little
path in the woods in the winter.
| | 00:31 |
Some footprints going off so it's going
somewhere.
| | 00:33 |
And what we're going to we're just
going to fuzz out this picture.
| | 00:37 |
We're going to apply a bit of a Gaussian
blur to it.
| | 00:40 |
We want this to sort of be the cover
photo for the content rotator, but we
| | 00:43 |
don't want it to be overpowering, so
we're just going to blue it back.
| | 00:48 |
So the first step is to right click on
the background layer here, convert it to
| | 00:51 |
a smart object.
And then just go to the Filter menu >
| | 00:55 |
Blur > Gaussian Blur.
And we'll apply a blur of about seven to
| | 01:00 |
eight pixels, I'll go with eight.
And it's nicely blurry, and that way it
| | 01:06 |
will just sort of give us a nice
background for some text.
| | 01:11 |
Click OK.
Now what we want to do is prepare this
| | 01:14 |
image for use in Animate.
To do that, you go to file.
| | 01:19 |
Save for web, and the save for web
dialogue box opens.
| | 01:23 |
When this dialogue box opens, you've got
a lot of choice here.
| | 01:28 |
So let's take a look at some of the
choices available to you.
| | 01:32 |
The first choice you make is the file
format.
| | 01:35 |
GIF, JPEG, PNG8, or Windows Bitmap.
Nobody I know of uses WBMP.
| | 01:40 |
So these are your choices right here.
GIF, I would use GIF if it was image with
| | 01:45 |
solid colors, no gradations through it.
JPEG of course will give you a nicely
| | 01:51 |
compressed image but it does tend to
introduce artifacts but makes small
| | 01:54 |
images.
PNG 8 is pretty neat, especially for
| | 01:58 |
smaller images that need transparency.
Not only will you get a limited color
| | 02:03 |
palette but you also get a alpha channel
and pink 24 not only gives you the full
| | 02:07 |
24 bit color but it also gives you an
alpha channel on the side.
| | 02:13 |
What we're going to choose here is a
jpeg.
| | 02:15 |
And as you make your selection you can
pay attention down here.
| | 02:20 |
And this is a rough approximation of how
long it will take to load.
| | 02:24 |
You can select your download speed here.
So if you're looking at, you know, cable
| | 02:29 |
modem here, we'll just say 768.
It's going to take about a second to
| | 02:34 |
download.
And you can adjust the quality, and one
| | 02:38 |
of the neat things about that is if you
select the magnifying glass and hold down
| | 02:43 |
your Option or Alt key, and sort of just
zoom in in.
| | 02:49 |
You can reduce the quality and sort of
jam down the image a little bit, and keep
| | 02:53 |
an eye on the image for artifacts.
'Kay, so we're going to take the quality
| | 02:59 |
back up to 70%.
Progressive means that it's, starts
| | 03:02 |
downloading with a very blurred out
image, and then just starts getting
| | 03:06 |
better and better and better.
With a cable modem, especially at 768
| | 03:11 |
kilobits per second, eh, you don't need
to worry about progressive all that much.
| | 03:16 |
If you're in a wireless situation you
might want to think about it.
| | 03:20 |
The color space, don't worry about that,
you can change the image size here or the
| | 03:25 |
width and the height.
Or you can even just change it by a
| | 03:29 |
percentage and then you get one of two
choices here.
| | 03:32 |
You can either save the image or Click
Done.
| | 03:35 |
If you Click Save you get to save the
image to the folder.
| | 03:40 |
So, I'm going to go to the folder that
we're working with, the Exercise folder.
| | 03:47 |
And I'm going to Save this as Cover P
Shop.
| | 03:50 |
Click Save and it's done.
And you're back in Photoshop and then all
| | 03:55 |
you need to do is go to animate and
Import the image.
| | 04:00 |
So, in this exercise, basically what I've
covered off is how to use the Save for
| | 04:06 |
Web feature.
We covered off a lot of the features in
| | 04:12 |
here, specifically File Format which you
would choose, Progressive Optimize,
| | 04:19 |
Quality Sizing and then Outputting for
Animate.
| | 04:25 |
| | Collapse this transcript |
| Adding Edge web fonts to an Animate composition| 00:02 |
In the latest update to the Creative
Cloud, Adobe has managed to make the use
| | 00:06 |
of the Edge Web Font service much more
easier to use inside of Edge Animate.
| | 00:14 |
And that's what we're going to take a
look at in this chapter.
| | 00:16 |
To get yourself started up on the
webfonts.an file located in your Exercise
| | 00:20 |
folder, and when it opens, you'll see
there's that little fuzzy image created
| | 00:24 |
in Photoshop, and there's a headline and
a subhead.
| | 00:29 |
As a matter of fact, let's select that
subhead and name it subhead, so we know
| | 00:33 |
exactly what we're dealing with here.
Okay, so, it's the same process that you
| | 00:39 |
would use to add any other web font now,
you don't have to open the HTML and
| | 00:43 |
actually add it to the head.
So let's take a look at that.
| | 00:49 |
So flame open a browser and login into
your Creative Cloud account, and when
| | 00:53 |
your Creative Cloud account opens, I want
you to go to Edge Web Fonts and click
| | 00:57 |
Learn More.
And if you scroll down, you can see all
| | 01:03 |
the fonts that are available to you, and
they're in this little pop down.
| | 01:08 |
And, we're going to use a couple of them,
let's just use the Droid Serif and we use
| | 01:12 |
that for the subhead.
That looks kind of nice.
| | 01:16 |
And we use the Droid Sans for the actual
headline.
| | 01:19 |
Now, to use the Droid Sans, what you do
is you copy and paste the script tag
| | 01:24 |
right here, just like that, and then you
just pop back over to Animate.
| | 01:32 |
And, give yourself a new font and paste
in the embed code, which we normally do.
| | 01:37 |
And, then, we're going to go back to the
browser and we're going to add the
| | 01:43 |
font-family right there.
Just copy and paste it, so back to
| | 01:50 |
Animate.
Paste and you click Add Font, and now
| | 01:55 |
what we're going to do is use the Serif,
so we'll just go back.
| | 02:04 |
When I come to Droid Serif, and again,
we're going to grab that source code,
| | 02:12 |
copy, back to Animate, new font in the
Font menu, embed code.
| | 02:22 |
Back to the browser, grab the name,
always grab the fallback as well, copy
| | 02:29 |
it, back to Animate, paste, Add Font.
And, now, we've got Droid Sans and the
| | 02:38 |
Droid Serif.
So let's apply the Droid Serif or the
| | 02:42 |
Droid Sans to the headline.
There it is.
| | 02:47 |
And we'll make it bold so it stands out,
and we'll take the subhead here, and
| | 02:53 |
we'll apply the Droid Serif.
See?
| | 02:58 |
Right there.
And, we'll take down a little bit in
| | 02:59 |
size.
We'll take it to say 36, and we'll just
| | 03:05 |
leave it like that.
So there you go, there's using web font,
| | 03:11 |
the Edge Web Font service inside of
Animate.
| | 03:14 |
Basically, it launch your Creative Cloud
account or just go to html.adobe.com
| | 03:19 |
right there, and then look for the Edge
Web Fonts.
| | 03:23 |
And, all you have to do is just copy and
paste the source code directly into Edge
| | 03:29 |
Animate and you can use the fonts.
| | 03:34 |
| | Collapse this transcript |
| "Wiring up" the ad| 00:02 |
In this exercise, what we're going to do
is take a look at some of the coding
| | 00:05 |
features of Edge Animate and rather than
give you a typing lesson I thought I
| | 00:08 |
would include much of the code.
And I'll just sort of go through it with
| | 00:13 |
you.
But I'm also going to show you a really
| | 00:15 |
cool thing and to get you started open up
the winter.an file located in your
| | 00:19 |
exercise folder.
And when it opens, if you press the
| | 00:23 |
spacebar, you can see that it's just got
a little bit of text in it.
| | 00:28 |
And images slide in and slide out.
There are a couple of buttons in here.
| | 00:33 |
There's a forward button.
And if you scroll along to here you can
| | 00:38 |
see that there's a back button that shows
up.
| | 00:41 |
Now, if you test this movie.
Cmd or Ctrl Return.
| | 00:45 |
It will open up in the browser, and we
can see exactly what the movie does.
| | 00:49 |
You see, roll over.
Changes color and roll over and we'll
| | 00:52 |
show you how that's done.
And then as you click, you'll notice a
| | 00:57 |
little tent comes in.
And when you go backwards, it reverses.
| | 01:01 |
One of the issues that a lot of people
ask about, and I'm sure that you've been
| | 01:04 |
asking as well is when you open it up in
the preview, can you not center the anime
| | 01:08 |
composition in the browser window?
Well, the answer is, absolutely, yes you
| | 01:13 |
can.
Here's how you do that.
| | 01:15 |
Close your browser.
Let's come back to Animate, select the
| | 01:18 |
Stage element and we're going to open the
actions for the stage.
| | 01:23 |
And you're going to choose Composition
Ready, so when the composition is ready
| | 01:26 |
to go, you're going to open up this
little code window here.
| | 01:31 |
And I've got this code sitting on my
clipboard.
| | 01:33 |
It's only one line and there's not that
much to it.
| | 01:37 |
And what you're going to do is you're
going to is a little J-query to get at
| | 01:39 |
the stage and you're going to look for
the CSS stage and what property we're
| | 01:42 |
going to work with.
We're going to work with the margin.
| | 01:46 |
And what are we going to do?
We're going to set the margin to auto for
| | 01:49 |
the stage, and by doing that you center
the Stage in the browser window at all
| | 01:53 |
times.
You can close the code window and then
| | 01:57 |
we'll just test it.
And there it is centered in the browser.
| | 02:02 |
Okay, let's go take a look at a couple
other things.
| | 02:05 |
Notice I've got a bunch of triggers here
on the timeline.
| | 02:09 |
Just little stops.
So that means that when the play hit
| | 02:11 |
moves across, it will stop dead at that
point.
| | 02:14 |
And then I have to click one of these
buttons.
| | 02:17 |
Now these buttons are actually symbols,
back and forward.
| | 02:20 |
This is the forward symbol, so if I
double click it and(UNKNOWN) in place,
| | 02:24 |
you can see that it's just that(UNKNOWN)
.
| | 02:27 |
So it's an angle bracket.
And I've given it two markers, over and
| | 02:33 |
up.
And notice there's a stop trigger at each
| | 02:36 |
of the color changes, there's the over
which is red, there's the up.
| | 02:41 |
And what we can, do is we can use code to
get at it and here's how you do that.
| | 02:45 |
If you click on the Open Actions for the
right arrow.
| | 02:49 |
You can see that there are three events
here.
| | 02:54 |
There's a click event, so when it's
clicked it's simplay.
| | 02:58 |
Now what that means is that when I click
on this and the play had us stopped right
| | 03:02 |
here with this trigger.
It's released, so it just goes zooming
| | 03:07 |
across until it hits the next stop
trigger.
| | 03:10 |
No sound?
Well, this is where we actually dig into
| | 03:13 |
the symbol.
So we go into the right arrow symbol,
| | 03:16 |
that's what this good symbol means.
And when we get the right arrow symbol,
| | 03:20 |
what do we do?
Well we're going to play the up state.
| | 03:24 |
Okay?
So that's the up state which is white.
| | 03:28 |
And if we're over the symbol, we play the
over marker.
| | 03:35 |
And again, just to remind you of what
that is, up and over.
| | 03:40 |
There's up.
That's white.
| | 03:43 |
And there's over.
Okay let's go back to the stage.
| | 03:50 |
Now let's come over the the two second
mark.
| | 03:52 |
To this next trigger because we've got
this symbol.
| | 03:54 |
Now this symbol's a little bit different.
If you click once on it, and open up the
| | 04:00 |
code which is Open Actions.
you can see that, on click it's simply
| | 04:06 |
reversed.
So what I did there.
| | 04:10 |
Was basically, just select click, the
click Event from the pop down menu here.
| | 04:20 |
And selected Play Reverse.
Now what this does, I'm just going to
| | 04:24 |
make this a little bit smaller, is
instead of going that way.
| | 04:25 |
It goes this way and stops.
So you can actually control the motion
| | 04:30 |
just by playing backwards and forwards,
using play and play reverse.
| | 04:35 |
And again, it's the same code for the
mouse over and the same code for the
| | 04:40 |
mouse out.
As for the right arrow.
| | 04:44 |
So there you go.
In this lesson, I've showed you how to,
| | 04:47 |
center the stage, it's not that hard to
do, when, you create your animate
| | 04:52 |
composition.
you use the composition ready event, and
| | 04:57 |
then just add this little snippet of code
which uses Jquery to get to this stage
| | 05:02 |
and look at CSS for the margin and set
the margin to auto.
| | 05:07 |
And that will center it in the browser.
I also showed you how to create little
| | 05:14 |
navigation arrows using markers, right
here and actions.
| | 05:20 |
| | Collapse this transcript |
| Responsive features of Animate| 00:02 |
Responsive web design is all the rage
these days the ability to actually have
| | 00:05 |
your contents scaled to the view port of
the device you're looking at is one of
| | 00:08 |
its big advantages.
And it should come as no surpise that
| | 00:12 |
this feature is built into edge animate.
And that's what we're going to take a
| | 00:16 |
look at in this exercise.
To get yourself started, open up the
| | 00:20 |
responsive.am file located in your
exercise folder.
| | 00:24 |
Now the first thing you want to do is
just test the movie.
| | 00:26 |
Cmd Return or Ctrl Enter.
And you can see that everything is there,
| | 00:30 |
but it's not exactly responsive.
It's just sort of locked into the stage.
| | 00:35 |
So let's fix that right now.
The first thing you want to do is just
| | 00:40 |
make the stage responsive.
And you do that by saying instead of
| | 00:45 |
making the stage 960 pixels wide and 500
pixels high, let's fill it to 100% of the
| | 00:51 |
browser window.
And just by doing that, you can see that
| | 00:57 |
it now fills up.
That black area is the stage and it's
| | 01:02 |
filling up the browser window.
Now, you'll notice that you've lost the
| | 01:08 |
centering.
And that's fine because we can deal with
| | 01:12 |
that in a couple minutes.
Close the browser.
| | 01:15 |
Okay, so let's start working our way
through here.
| | 01:21 |
This image here sitting in the
background, really should scale up and
| | 01:25 |
down when the stage is made larger or
smaller.
| | 01:29 |
Now we can do that by simply using a
preset, so you just come over here to
| | 01:32 |
position and size, is presets for
responsive layer, and though you've got a
| | 01:36 |
bunch of them here.
The one you really want is to scale the
| | 01:41 |
background image because that's what it
is, it's the background image, so I'll
| | 01:45 |
select scale the background image It
tells me that it's not only going to set
| | 01:50 |
the width and height of the container to
percent values.
| | 01:57 |
It's also going to set the position,
width, and height to responsive values,
| | 02:00 |
Click OK, and you don't see much of a
change.
| | 02:04 |
But if you take a look at the ruler area
up here, and you move across, you can see
| | 02:07 |
that you don't need to browser test, all
you need to do is just move the image in
| | 02:11 |
and out, on the x and the y axis, do the
same thing on y, see?
| | 02:17 |
So we've got the background image dealt
with, now let's deal with the little box
| | 02:23 |
here.
So we select that and what you're going
| | 02:30 |
to do here is you're going to say look, I
want this to stay put.
| | 02:34 |
I want this to stay at the bottom of the
image.
| | 02:36 |
So I'm going to set it's registration
point right here relative to the bottom
| | 02:41 |
left corner.
So it's going to just keep it right in
| | 02:45 |
there.
And not only that, as I make the window
| | 02:49 |
bigger or smaller I want it to expand.
So I'm going to make the width 100%.
| | 02:57 |
Now watch what happens.
Notice?
| | 03:00 |
The width moves, and if I move this up
the box moves with it.
| | 03:05 |
Now let's deal with the text.
By the way, when you move these little
| | 03:09 |
handles in, you'll notice that there's a
little carried up there.
| | 03:13 |
That tells you your starting position.
So, it's always a good idea once you get
| | 03:17 |
going with this, to sort of get yourself
back to the starting position, so you
| | 03:20 |
know everything is where it's supposed to
be.
| | 03:24 |
Okay, so the next thing we're going to
deal with is this text right here.
| | 03:29 |
And what we want to do is keep it
relative to the bottom right corner.
| | 03:33 |
So we're just going to Click on that.
And we're going to want to move it up and
| | 03:38 |
down in the text box.
So that's on the Y axis.
| | 03:42 |
So we'll move it to percentage value on
the Y axis.
| | 03:45 |
So when we move this up and down, you
notice it moves.
| | 03:49 |
As the image gets smaller.
So that's good.
| | 03:53 |
Okay, then the next thing we're going to
deal with.
| | 03:58 |
And we're just going to come over to the
end of the timeline.
| | 04:03 |
Are the two little navigation.
So now the navigation arrows are no big
| | 04:06 |
deal.
What we're going to do is we're going to
| | 04:08 |
take this nav arrow here, going from the
width and the height alone.
| | 04:13 |
But what we're going to do is make it
relative to the right side.
| | 04:17 |
Okay, so this forward arrow is relative
to the right side of the stage, right
| | 04:21 |
there.
We'll just keep it in the upper right.
| | 04:24 |
And we'l take this arrow here and just
leave it alone.
| | 04:28 |
And now what we do, you see.
They move in and out, as needed.
| | 04:32 |
Okay, so let's deal with this little text
box at the bottom here.
| | 04:38 |
And what we're going to do here is make
it relative to the bottom left corner,
| | 04:43 |
right there.
And we're going to change the x to a
| | 04:49 |
percentage value and the width to a
percentage value, so as this comes in,
| | 04:53 |
it's going to move in and out on the
axis.
| | 04:58 |
So if we move it in and out, you can see
that's exactly what it does.
| | 05:03 |
Now one of the things that you'll notice
here is that it just stays put.
| | 05:07 |
Take it down to 600, but it stops right
there at 720 pixels, which is just about
| | 05:12 |
the size that you would use for a tablet.
And where does that value come from?
| | 05:19 |
Well, let's take it back out to our
starting value, which is 960.
| | 05:23 |
If you Click on the stage, you can see
that there is a minimum width there.
| | 05:28 |
And you can also have a max width, so if
you want to, you just Click on max width,
| | 05:33 |
Deselect none from the Popdown, and you
can set the max width to whatever.
| | 05:40 |
So let's just say we'll take it out to
1260 pixels.
| | 05:44 |
And you'll notice that as I scrub across
here it will actually stop.
| | 05:53 |
See, It stops at 1260.
So there you go.
| | 05:59 |
There's working with many of the
responsive features inside of animate.
| | 06:04 |
The key to working with the responsive
features in animate is to start with the
| | 06:07 |
stage, set it to percentage values.
Then work your way through the content
| | 06:13 |
and then finally set your minimum width
and maximum width for the browser.
| | 06:19 |
| | Collapse this transcript |
| Assembly and coding in Animate| 00:00 |
In this exercise, we're going to create a
preloader and if it's winter in Ontario,
| | 00:04 |
it's playtime, but you know, winter has
snow and we would like to make a
| | 00:09 |
preloader that uses this image, but snow
falls.
| | 00:14 |
And the way you're going to do that is to
create an animated gif now what we're
| | 00:18 |
going to do here is have a rather
interesting workflow.
| | 00:23 |
We're going to move from After Effects
CS6 to Photoshop CS6 and back to Animate.
| | 00:28 |
So let's get started.
Now if you have After Effects CS6, I want
| | 00:32 |
you to open up the winter.aep file
located in your exercise folder.
| | 00:37 |
And when it opens, you'll see there's
that little path animation.
| | 00:41 |
Now, to create the snow is really quite
simple if you've never done this before.
| | 00:45 |
What you do is you just select the
composition window, that's this right
| | 00:48 |
here.
And you're going to add a New, Solid.
| | 00:52 |
And don't worry about the name, don't
worry about the size, just make sure it's
| | 00:55 |
the comp size.
Click OK and we've got this black solid
| | 00:59 |
and it hides the image.
No big deal.
| | 01:02 |
We're going to go to Effect > Simulation,
and look at this, CC snowfall.
| | 01:07 |
And we've got some snow here, but you
can't see it, and if you scrub across,
| | 01:11 |
you're not going to see much either.
So what we're going to do is going to
| | 01:15 |
increase the opacity on this, and now you
can see snowflakes start to appear.
| | 01:21 |
See the snowflakes?
And of course we should make the
| | 01:24 |
snowflakes a little bit bigger, shouldn't
we?
| | 01:28 |
There we go.
So we just scrub across the size value
| | 01:31 |
here, we got some bigger snowflakes And,
of course, black over an image is not
| | 01:35 |
good.
So, what you're going to do is you're
| | 01:39 |
going to right click on the solid and
you're going to select Blending Mode and
| | 01:44 |
you're going to select the Add Blending
Mode.
| | 01:48 |
And now, if you scrub across, we've now
got a wonderful snowfall.
| | 01:53 |
In the Ontario woods.
And if you press the space bar you can
| | 01:57 |
see there's the snow falling.
Okay so we've got the snow falling and
| | 02:02 |
it's now time to get this out.
Now we're going to export this as a
| | 02:07 |
Quicktime movie.
Now the work flow that Adobe recommends
| | 02:11 |
is After Effects to Photoshop to Animate,
so let's follow that work flow.
| | 02:16 |
So we're going to render the
compositions, we'll go to Composition,
| | 02:19 |
Add to Render Queue.
I've already input this once, so I'm
| | 02:22 |
going to just get rid of it.
And we've got this thing called snow,
| | 02:26 |
we're going to go with an output module
called(UNKNOWN) .
| | 02:30 |
All that does is it actually sets it up
as a quicktime movie.
| | 02:33 |
That's what you want.
Just straight Quicktime.
| | 02:36 |
So we'll just come to here, Quicktime.
There we go.
| | 02:39 |
Now we don't need to worry about output
or anything like that.
| | 02:45 |
Just click OK.
And we're going to give it a name and
| | 02:48 |
we're going to output this in the
exercise folder, to the Photoshop folder.
| | 02:54 |
We're going to call it Snow.
And I've already got a copy in there.
| | 03:00 |
So I'm just going to just call this
Snow01.
| | 03:03 |
And it's a QuickTime movie.
Click Save.
| | 03:07 |
And then to output it, all you do is you
just click Render.
| | 03:11 |
Boom, done.
That quick.
| | 03:13 |
Because it's only two seconds.
Okay, we can get out of After Effects.
| | 03:23 |
And, so we quit After Effects.
And we don't need to save the changes.
| | 03:30 |
And let's frame up Photoshop and bring
that in.
| | 03:35 |
And File Open there's the snow movie, and
I've already got this inside the folder,
| | 03:40 |
so we'll just open up the snow mov, click
Open.
| | 03:46 |
It'll take a second to open, but it'll
open in the timeline, and there it is.
| | 03:52 |
And if you click the Play button you can
see we've got snowfall.
| | 03:58 |
Okay, we're going to have to output this
as an Animated gif.
| | 04:03 |
No problem.
What we do is we go to File, Save for Web
| | 04:07 |
and we're going to set this up as a gif
file.
| | 04:12 |
And this'll take a second.
Now the color pallate is created.
| | 04:17 |
And you can see that we've got
transparency here if you want it.
| | 04:21 |
We don't need transparency.
We really don't need transparancy in
| | 04:25 |
animated gif anyway.
We don't need it to be interlanced.
| | 04:29 |
But we do want it to loop.
And we can ask it to loop forever.
| | 04:32 |
So it will just keep looping through.
Now notice this is 80 frames, so it's
| | 04:36 |
going to be somewhat large.
And we can just click Save.
| | 04:41 |
And we're going to save this in the
exercise folder to Edge Animate.
| | 04:48 |
And we're going to put it in the images
folder.
| | 04:52 |
And we're going to save it as snow gif.
And it's creating the animated gif.
| | 04:59 |
And it's done.
And if we go back to Animate, and we come
| | 05:08 |
to our Images folder, we can import it
in.
| | 05:20 |
File, Import.
So, there's the gif image.
| | 05:29 |
Open, and you can see there it is right
there.
| | 05:30 |
It comes in.
We're going to Delete it and we're
| | 05:31 |
going to come to Preloader and we're
going to select Edit and we haven't set
| | 05:33 |
up a Preloader yet.
Well a Preloader is, right here.
| | 05:50 |
So we've got snow gif in place.
As a preloader, click on Stage, and there
| | 05:56 |
we go.
And we'll briefly see, that's if you test
| | 06:00 |
it, there it is, boom, gone and if we
needed, the time, to load this thing,
| | 06:06 |
other than locally.
You would see the Preloader in play.
| | 06:13 |
So there you go.
There say, an animated gif created After
| | 06:17 |
Effects with the gif created in
Photoshop.
| | 06:21 |
And then placed into Animate.
It's a cute little technique.
| | 06:26 |
Lots of fun.
Knock yourself out.
| | 06:29 |
| | Collapse this transcript |
|
|
4. Creating Animate Content for Adobe MuseProject overview| 00:02 |
In this chapter we're going to create a
travel page that lets visitors to Paris
| | 00:05 |
explore some of the hidden gems of the
city.
| | 00:09 |
Though Paris may be neat, even neater is
the workflow involved in creating this
| | 00:13 |
site.
We start in Fireworks, go to Edge
| | 00:16 |
Animate, and then assemble in Adobe Muse.
Oh yeah, did I mention, we're going to be
| | 00:21 |
creating tablet and phone versions of the
project?
| | 00:25 |
These features are new to the Creative
Cloud version of Muse and they're pretty
| | 00:29 |
fascinating.
The workflow process is really quite
| | 00:32 |
straightforward.
We start with in a design in Fireworks
| | 00:35 |
where we just lay out the whole thing,
and, what we're going to do with the
| | 00:38 |
Fireworks portion is just a look at a
couple of the features that make it an
| | 00:41 |
obvious choice for this step.
Then we're going to pop over to Animate,
| | 00:47 |
to create the content rotator, which is
in the design, and then the project is
| | 00:52 |
going to be assembled in Adobe Muse.
Now this is what it looks like when it's
| | 00:58 |
assembled.
Now there are two things to keep in mind
| | 01:01 |
as we move through this chapter.
The focus in this chapter is adding
| | 01:06 |
content to Muse.
If you can add something simple, you can
| | 01:11 |
just as easily add something complex.
It is all about technique and workflow.
| | 01:17 |
Second, the mobile features of Muse are
new, so don't expect mobile wonders.
| | 01:22 |
What many designers tend to overlook, is
that Muse is not aimed at clients who are
| | 01:27 |
looking for complicated websites.
They are the hairdressers and restaurants
| | 01:33 |
on the main street of your town.
Muse gives them the opportunity to have a
| | 01:38 |
web and mobile presence.
With that in mind, let's get started.
| | 01:46 |
| | Collapse this transcript |
| Creating Animate and Muse assets in Fireworks| 00:02 |
When it comes to becoming creative with
Animate, and Muse, for that matter, one
| | 00:06 |
of my must have digital imaging tools is
Fireworks CS6.
| | 00:10 |
Whether it be creating a simple icon, or
a full board click through, I find myself
| | 00:14 |
reaching for Fireworks.
It isn't because, as many people seem to
| | 00:18 |
think, I'm a Fireworks fan boy, I'm not.
What I am though, is a firm believer in
| | 00:23 |
the concept of using the right tool at
the right time for the right job which
| | 00:27 |
makes me more efficient and takes less
time.
| | 00:31 |
And when it comes to creating content for
Animate and Muse, to me, the right tool
| | 00:35 |
is fireworks, let's see why.
To get started, open the parisbkg.png
| | 00:40 |
file located in your exercise folder, and
when it opens, you'll see that there's
| | 00:45 |
that homepage for the Paris travel site.
Now knowing this page was eventually
| | 00:52 |
going to have desktop, tablet and phone
versions, I decided to base this design
| | 00:56 |
on a 960 grid.
That meant for me the first step was a
| | 01:00 |
no-brainer.
File > New from Template and I want you
| | 01:03 |
to open up the grid systems and there's a
960 grid right there.
| | 01:09 |
So I could build right on top of this
template and go to work.
| | 01:14 |
And if you open the Layers panel, which
is right here, you can see that there's a
| | 01:18 |
baseline grid, there are the sidebars,
and there are even the columns.
| | 01:24 |
And if I zoom in a little bit here and go
to View > Guides > Show guides, you can
| | 01:28 |
see that I've even got the columns guides
in here, so if I turn off the sidebars
| | 01:32 |
and turn off the visibility of the
columns.
| | 01:37 |
I've still got my grid in play here.
So I'm going to turn off the guides.
| | 01:44 |
And now, let's turn our attention to that
background image.
| | 01:48 |
Now if I come back to here, this is a big
ol background image.
| | 01:52 |
It is aimed at approximately 1200 by 950.
So let's see how this was created.
| | 01:58 |
To get yourself started with that one,
open the DSCN2057.JPEG file located in
| | 02:03 |
your exercise folder.
And when it opens, the first thing you
| | 02:08 |
should notice is, it's huge.
3872 by 2592.
| | 02:12 |
That's not the size I want.
Now, to quickly get this into place, all
| | 02:17 |
I did was I selected the image using the
Selection tool, went to Modify, Canvas,
| | 02:22 |
Image Size.
And I can choose to change either the
| | 02:27 |
width or the height.
I'm going to try the height first.
| | 02:31 |
950.
That's fine, I can trim off a couple
| | 02:33 |
hundred pixels.
Click OK, and you can see that the image
| | 02:36 |
immediately shrinks to those dimensions.
So, now that I've got the height handled.
| | 02:41 |
I can now concentrate on getting the
width done and I'm going to turm off the
| | 02:44 |
pixels using the Crop tool.
So, you select the Crop tool, just draw
| | 02:49 |
out a little crop area.
Now, I'm a firm believer in doing it by
| | 02:53 |
the numbers, because you can't get much
more accurate than that.
| | 02:57 |
So, I need a crop area that's 1,200
pixels wide.
| | 03:00 |
So, I come to the Properties panel, type
in 1,200, press the Tab key and set the
| | 03:05 |
height to 950.
Press the Return key, and now I've got
| | 03:09 |
it.
And I can now move this crop area around
| | 03:12 |
the image, to determine my crop area.
So I've got this done, zero zero, press
| | 03:17 |
the return key, uncropped.
Next step, apply the blur.
| | 03:22 |
Again, select the image.
That blue box around it tells you it's
| | 03:26 |
selected.
Over to the Filters menu, blur, Gaussian
| | 03:29 |
blur.
And I put a 4.6 to 5 Gaussian blur on the
| | 03:33 |
image.
You'll notice that there's a Filters menu
| | 03:37 |
up here.
Don't use it.
| | 03:39 |
These filters here, if you notice, have
the little eye there so I can actually
| | 03:42 |
click on that eye and change it.
So if the blur is too strong or whatever
| | 03:47 |
I can change it.
If I select the filter and put the blur
| | 03:50 |
on, it's there.
It's going to take.
| | 03:53 |
So use the live filters instead.
Now that we've got the blur under
| | 03:56 |
control, let's return to our layout.
Now you can't simply decide to take this
| | 04:01 |
layout and apply it to a smart phone,
which would be like 480 by 800.
| | 04:06 |
It just won't work.
In fact, in Muse, a smartphone layout is
| | 04:10 |
a separate document.
This is where another great fireworks
| | 04:13 |
picture becomes an invaluable aid to the
creative process.
| | 04:17 |
If you click the Pages panel which is
right here.
| | 04:20 |
See where it says pages.
You can see that I've got three pages.
| | 04:23 |
Web, mobile and animate.
Let's stay with the web.
| | 04:27 |
This means you can.
Not only design the look of the webpage.
| | 04:30 |
But you can also design the look of the
pages in the phone and tablet versions of
| | 04:34 |
a Muse site.
And even prepare content for Animate.
| | 04:39 |
And that's exactly what I've done here.
I've created a web version.
| | 04:43 |
That's, the assets I need for the mobile
version in Muse.
| | 04:47 |
And here are the assets I need for the
content rotator inside of Animate.
| | 04:52 |
So how do I get all of this stuff out of
here?
| | 04:55 |
Well the ability to export graphics out
of Fireworks, and have them immediately
| | 04:59 |
available in Muse and Animate, is a huge
creative time saver.
| | 05:04 |
The first step in the process is to use
the Optimize panel, so I'm just going to
| | 05:09 |
close this panel here, and use the
Optimize panel, which is this little TV
| | 05:13 |
set.
Click it and I can choose to output
| | 05:17 |
everything that's on this page is a JPEG
image.
| | 05:21 |
Now we don't need a lot of this stuff.
We don't need the text and we don't need
| | 05:24 |
this little content background here.
Simply because of the fact that we can
| | 05:28 |
create that in Muse.
Data with the Animate, this is more of a
| | 05:31 |
place holder then anything else.
So I want to output the objects, so I
| | 05:36 |
just click on the Layers panel, and I
just turn off the visibility of the
| | 05:40 |
layers I don't want.
Now with the little selections here,
| | 05:45 |
there's some text in there, so I'm
going to have to turn that text off
| | 05:48 |
manually, just like that, because the
text will be added inside of Muse.
| | 05:54 |
And I'm going to turn off the overlay.
There we go, so we've got all our little
| | 05:59 |
bits and pieces ready to go.
And to export it, it's File > Export.
| | 06:04 |
Now navigate to the fireworks output
folder located in your exercise folder,
| | 06:09 |
and you're not going to choose images
only.
| | 06:13 |
Your going to chose layers to file, so
you can output each layer to a JPEG file.
| | 06:18 |
And not only that, by selecting trim
images, it will trim it to the precise
| | 06:22 |
size of the content in that layer.
Click the Export button, and it's all
| | 06:27 |
gone.
Now, here's the really cool thing.
| | 06:30 |
If you go back to the Pages panel, you
can do the same thing with Mobile and
| | 06:34 |
Animate.
Now, with Mobile, what I did was, I just
| | 06:37 |
simply changed them all to PNG 32 images.
So I've got transparency and output the
| | 06:42 |
PNG 32s.
Now we go back to the Pages panel, and
| | 06:45 |
with the Animate Content, I just, output
each of those layers as a JPEG image.
| | 06:51 |
So in this lesson, we've looked at using
Fireworks as part of a creative imaging
| | 06:55 |
workflow, I showed you how to use a grid
to start the process, right here.
| | 07:01 |
And how quickly images can be prepared
for use in Muse and other projects.
| | 07:06 |
We then reviewed the page's feature of
Fireworks, which gives you the ability to
| | 07:10 |
design comprehensives or assets for a
variety of pages.
| | 07:15 |
Sizes or even devices.
And finally we looked at how you can
| | 07:19 |
quickly and efficiently export images out
of a Fireworks project and have them
| | 07:25 |
ready to go in Animate and Muse.
| | 07:29 |
| | Collapse this transcript |
| Preparing Animate content for Muse| 00:02 |
In this exercise what we're going to do
is prepare an animate composition for use
| | 00:05 |
in Muse.
Now remember in Muse we're going to go to
| | 00:08 |
desktop.
We're going to set it up to go on a
| | 00:10 |
tablet and it's also going to have to
work on a smart phone so let's get
| | 00:13 |
started.
And to get yourself started open up the
| | 00:16 |
contentrotate.AM file located in your
exercise folder.
| | 00:20 |
AM, when it opens I've set up the
timeline for you, so basically the images
| | 00:23 |
are just going to slide in automatically.
And the first thing we want to do is just
| | 00:28 |
sort of control the play hits.
Let's come to the 0 point.
| | 00:31 |
Double-click on the insert trigger here,
and we're just going to add the play
| | 00:34 |
snippet, so we'll just put a play in
there.
| | 00:37 |
Now, the reason we're going to put play
in here is cause at the end of the
| | 00:40 |
animation we're going to say Go
backwards.
| | 00:44 |
And to do that, we're going to drag right
out to the five second mark, you know,
| | 00:47 |
so, this wok also comes in at the four
second mark.
| | 00:51 |
So we want to stay put for about a
second.
| | 00:53 |
So we're going to add another trigger,
just click.
| | 00:56 |
And this time, we're going to say, play
reverse.
| | 00:58 |
And that's exactly what it will do, it'll
play reverse.
| | 01:01 |
So when it hits this, it starts going
backwards.
| | 01:05 |
And then when it comes back to the start
It's going to hit that Play trigger and
| | 01:09 |
go back forward.
So it's going to loop back and forth.
| | 01:13 |
Okay, so now that we've got that down,
we're going to now have to set this thing
| | 01:17 |
up to accommodate changing sizes.
Remember, the tablet is a little bit
| | 01:22 |
smaller than a desktop.
And a smart phone is a ton smaller than
| | 01:26 |
tablet.
So let's get set up for that.
| | 01:29 |
And the way you do that is to work with
the responsive features of animate.
| | 01:34 |
Responsive features basically work around
percentages instead of fixed width,
| | 01:38 |
hard-wired numbers, we're going to use
with percentages.
| | 01:42 |
So the first place you want to start is
right here with the stage.
| | 01:46 |
You select the stage element, and you
come up here and you say, now look, I
| | 01:50 |
want the stage to always be 100%.
The height and the width of the window.
| | 01:56 |
So that's where we're going with that
one.
| | 01:58 |
And then we're going to now deal with the
contents.
| | 02:01 |
So if we click on the first image, we can
do a number of things here.
| | 02:05 |
We can set the width of this to be always
100 percent of the, window.
| | 02:10 |
So we can just do that.
And, when you change these percentage
| | 02:14 |
values, you can pin them to whatever area
is not really going to move.
| | 02:18 |
Now, in this case here, we've got three
images that are sort of locked in.
| | 02:23 |
They fill up the screen.
So we can pin them to the top left
| | 02:26 |
corner, instead of doing that, why don't
we apply a preset, and those are right
| | 02:30 |
here.
And you get a number of presets, you can
| | 02:34 |
scale the position of the selection, you
can scale the size of the selection, you
| | 02:38 |
can scale the position and size of
background image, see right there.
| | 02:44 |
So it's a width and height percentage
background to percentage.
| | 02:48 |
The width to percentage and the
background height to auto, this is
| | 02:51 |
kind of what we're looking for so we're
going to go with apply.
| | 02:55 |
Click apply there and then we come across
to the next image which is pray.
| | 03:00 |
And we'll apply the same thing to it.
Click Apply.
| | 03:05 |
And then we come to the walk image.
Select it and again, we will apply scale
| | 03:10 |
the background image.
Apply.
| | 03:14 |
And you can see this at work.
So we scale across it.
| | 03:18 |
Starts to scale as we move in.
And it scales as we move up as well.
| | 03:23 |
So now, what we need to do is say, look.
What happens if we come to a smartphone?
| | 03:30 |
Well, the smartphone that we're going to
be going for pretty well has a width of
| | 03:34 |
about four hundred forty pixels.
So we're going to say, look.
| | 03:40 |
The maximum width will be 100% but the
minimum width is going to be, let's say
| | 03:45 |
four four forty.
and the other thing you can do is if you
| | 03:51 |
put in a none in here, there is no
maximum width.
| | 03:56 |
So watch what happens, it just keeps
stretching out and scaling.
| | 04:02 |
So we're going to give it a maximum
width.
| | 04:05 |
We're going to take a maximum width of,
let's say twelve hundred.
| | 04:09 |
Or Click on max width, De-select none,
add twelve hundred.
| | 04:17 |
So this twelve hundred would be the
maximum of the composition.
| | 04:20 |
Now to get this into Muse, we're not
going to be able to inject the HTML,
| | 04:23 |
we've got to prepare an OAM file.
To do that, what you do is you file.
| | 04:27 |
Publish settings, and you're going to
choose, animate deployment package, which
| | 04:31 |
gives me the OAM.
And we're going to put the OAM right in
| | 04:34 |
the Rotate folder.
which is where Content Rotate is located.
| | 04:38 |
So we'll just Click OK, Click Choose.
And we're going to give it a poster
| | 04:43 |
frame.
So that when it's sitting in the Muse
| | 04:45 |
Composition, it can see the image.
But we can choose various images here
| | 04:50 |
that are in the library but We've already
taken a poster, and instead of Clicking
| | 04:54 |
Save, what you do is you Click Publish.
And now it goes into that folder, and you
| | 05:00 |
will see an OAM file in there.
Now, I want to show you where the poster
| | 05:04 |
frame came from, right here.
What you can do is you can just put the
| | 05:08 |
cursor anywhere in the movie or in the
composition.
| | 05:12 |
And right here, you can just Click the
little camera beside poster and determine
| | 05:16 |
whether you want to capture an image
because where the current play head is
| | 05:20 |
and overwrite the current poster image.
So if you don't like the poster image
| | 05:25 |
you've got, you can always overwrite it.
So there you go.
| | 05:28 |
There's preparing the animate composition
for placement and use.
| | 05:33 |
I showed you how to get this thing to
loop by using the triggers.
| | 05:37 |
I showed you how to get this thing to fit
into the various browsers that are going
| | 05:41 |
to appear.
The desktop, the tablet, and the
| | 05:44 |
smartphone.
By using the responsive features, the
| | 05:47 |
first step.
Of course let's make stage responsive by
| | 05:51 |
changing it to a percentage.
We set the minimum width, of this
| | 05:55 |
composition, we also set the maximum
width, so it can only expand or contract
| | 05:59 |
into those two areas.
Anything larger or smaller won't show.
| | 06:04 |
And finally, I showed you how to export
your animate composition for this.
| | 06:09 |
What you do is you create an animate
deployment package which will create an
| | 06:13 |
OAM file.
Just save it to a folder, and you can
| | 06:17 |
place it in your Muse project.
| | 06:21 |
| | Collapse this transcript |
| Adding Animate content to Muse documents| 00:02 |
In this exercise we're going to take a
look at moving from Animate to Muse.
| | 00:07 |
And we created the assets and fireworks
and we've also created our animate
| | 00:11 |
composition with a straight content
rotator as we move through here.
| | 00:17 |
And remember that the key to getting this
project into Muse is not the published
| | 00:21 |
HTML but to go to the public settings,
create and animate deployment pack and
| | 00:25 |
save it to the same folder as the Muse
document.
| | 00:32 |
Now that we've got everything in place
let's take a look at getting this
| | 00:34 |
together in Muse.
Now to get yourself started I want you to
| | 00:38 |
open the paris.muse file located in your
exercise folder and when it opens you're
| | 00:42 |
actually going to see this.
You're going to see a master page and
| | 00:46 |
then you're going to see a home page.
Now the master page basically contains
| | 00:50 |
all the elements that are common to every
page and if you double-click it you can
| | 00:53 |
see that there's all kind of stuff that
you can put on it.
| | 00:57 |
And one of the things that I really like
is this browser fill option here.
| | 01:01 |
I can actually choose an image and then
tell it scale to fill the area and the
| | 01:06 |
image will scale.
Now the other thing I want you to be
| | 01:10 |
aware of, I'm just going to zoom out here
a little bit If you remember the
| | 01:13 |
fireworks, this was sort of the opaque
area, that we were putting all the
| | 01:17 |
content in.
In Muse, this is the actual page, so I
| | 01:22 |
can apply opacity to the page, so if I go
to fill, you can see that I've put a
| | 01:26 |
white fill in here but I've also given it
50% opacity, and all I have to do to pull
| | 01:31 |
the page together is to click on the plan
again, open up the home page, and it's
| | 01:35 |
got all the stuff on it.
And now I'm ready to insert the Animate
| | 01:44 |
content, and that's not that hard to do,
it's just File > Place, and if you
| | 01:48 |
navigate to the Exersise Folder, you'll
see an Animate Folder.
| | 01:55 |
Notice, the OAM file.
Click open and you'll see this little
| | 02:00 |
icon here which tells me there's my
content.
| | 02:04 |
And I'm going to put it right there.
And you notice it's a little bit big so
| | 02:10 |
all I have to do is just put the cursor
over it, hold the Shift key, click and
| | 02:14 |
drag and it is in place.
And if I want to see what it looks like
| | 02:19 |
just click Preview and it will actually
do a Browser Preview for me.
| | 02:24 |
And as you can see our Animate content is
working inside of Muse.
| | 02:30 |
So the key here is not to worry about the
HTML.
| | 02:35 |
The key here is to get the master page
together.
| | 02:38 |
Make sure that it's the size you want and
then put your content on your page and
| | 02:44 |
then Simply File > Place, and go locate
the OAM file and drop it into place.
| | 02:53 |
| | Collapse this transcript |
| Adding Animate content for smartphones and tablets in Muse| 00:00 |
One of the neatest new features in Adobe
Muse, is the ability to add tablet and
| | 00:04 |
phone layouts to your web work.
And to get yourself started, just open up
| | 00:10 |
a blank Muse document or just a Muse
document, File > Muse site.
| | 00:16 |
And when it opens you'll see.
In the planned view, there's desktop,
| | 00:21 |
tablet,and phone.
Now, this site only has a desktop, so if
| | 00:24 |
I'm going to add a phone version, we just
come over here and we click.
| | 00:28 |
And the first thing it's going to ask you
is, how do you want to handle this.
| | 00:32 |
And you can copy from the desktop, okay,
so whatever the desktop looks like.
| | 00:37 |
And including the film.
You can add that.
| | 00:40 |
Or if you don't want to do it, and just
start from scratch, just click no then
| | 00:44 |
click OK.
And this works with both tablet and phone
| | 00:47 |
layouts.
Okay.
| | 00:49 |
We can close this.
Don't save the changes.
| | 00:52 |
Now let's go over to the Paris Mobile
site.
| | 00:54 |
That's in your exercise folder.
So feel free to open it up.
| | 00:59 |
Now what I've done with the Paris Mobile
site is actually created tablet and phone
| | 01:04 |
versions of the site.
Now I want to show you how to bring
| | 01:08 |
animate content into the phone version.
And it's the same thing for the tablet
| | 01:12 |
version.
But for the phone version, what you do is
| | 01:14 |
to just set it up by clip .
The little header at the top there.
| | 01:18 |
So if we double-click the home button,
you can see how I've set this up.
| | 01:22 |
Little bit of tabs and we're going to put
the Animate Content down on the bottom
| | 01:25 |
here.
These are the little slices that I
| | 01:28 |
created.
The little buttons I created in
| | 01:31 |
Fireworks.
And if I want to insert the content from
| | 01:34 |
Animate, I just go to Place, find the
Content Rotate OM, click open and we're
| | 01:39 |
just going to run it right across the
page and then again we're just going to
| | 01:43 |
scale it down to fit.
There we go.
| | 01:49 |
Edge to edge.
And let's just take a look at what it
| | 01:52 |
looks like, preview.
And you can see it's working, but now I
| | 01:57 |
want you to pay attention up here.
This is where it gets kind of neat.
| | 02:02 |
There's the iPhone 4.
The iPhone 5, notice how it changes.
| | 02:07 |
Samsung Galaxy S3, and the Nokia Lumina,
which is the Windows version.
| | 02:15 |
So, you can see how this design will work
on various iterations of the phone.
| | 02:23 |
So there are common iterations out there.
iPhone.
| | 02:25 |
Four, five.
The Samsung Galaxy S which is a slightly
| | 02:28 |
bigger screen.
And a longer screen actually.
| | 02:32 |
And of course, good old Windows Phone
from Nokia.
| | 02:35 |
Now if you really want to test these
things, what you can do is click Publish.
| | 02:40 |
Now what publish will do, is it will
setup a business catalyst site for you.
| | 02:46 |
Just temporary business catalyst site.
I've already got one here.
| | 02:51 |
And you just give it a name, and you can
add your options to it.
| | 02:55 |
And it'll give you the link to it, and
then if you click the link It opens up in
| | 03:00 |
the browser and if you take this link and
open it up on your tablet or your phone
| | 03:05 |
it will also appear on your phone.
I think this is a pretty cool idea.
| | 03:14 |
So now it's uploading everything and it's
now showing me the desktop version.
| | 03:21 |
Notice it's not responsive, so that's not
going to work.
| | 03:25 |
So if you want to take a look at your
work, what you have to do is upload it to
| | 03:29 |
Business Catalyst and then test it on the
device that you choose.
| | 03:35 |
So on this exercise what we've done is
we've taken a very quick look at the
| | 03:40 |
mobile features of Muse.
These are new to the creative cloud
| | 03:45 |
version of Muse.
You can choose to work from the desktop
| | 03:49 |
version.
You can add a tablet and a phone.
| | 03:52 |
By the way, with the tablet version, you
don't choose your tablet.
| | 03:57 |
If you go to preview, you're just
going to look at it.
| | 04:00 |
There's the preview size.
There's the Nexus 7.
| | 04:04 |
Kindle Fire surface, okay so there's the
Windows device.
| | 04:08 |
So you get all kinds of choices here.
You can choose the tablet size that you
| | 04:12 |
want to preview it on, you also get a
number of common tablet sizes including
| | 04:17 |
the new Microsoft tablet.
You can also go to the phone and choose
| | 04:24 |
your Phone View and then what you do is
upload the site to Temporary Business
| | 04:29 |
Catalyst site and you can preview it and
work out your little bugs and things like
| | 04:35 |
that inside of Muse.
| | 04:41 |
| | Collapse this transcript |
|
|
