Tonight we covered making buttons and programming "Click to Go To Webpage"
Here is a refresher tutorial on creating buttons:
And this tutorial goes over linking a button to a website, such as sfoutsidelands.com:
We also learned how to use Masks and Motion Tweens together to create a magnifying effect.
Here is a link to download the Masking Tweens file:
http://www.mediafire.com/?73qmr0xujbm9w5n
There is no class next Monday and so we will be having a make-up class on Wednesday from 7-10. The room may change and so I will email you the room number and reminder on Wednesday.
I expect to see your 10-second banner completed on Wednesday and a vector pack for your 15-second animation for Thursday. Keep in mind your midterm banner campaign is due a week from Monday and so consider beginning to program your 15-second ad as well. Also, bring music suggestions from Outside Lands bands that don't already have a music video. Otherwise, we will be animating a portion of HP Lovecraft's "The Outsider" as a group project.
Thursday, June 30, 2011
Monday, June 27, 2011
Module 3 Wrap-up
For Thursday's class, please bring a new vector pack and storyboard for your 10-second banner ad.
Also, finish up programming your 5-second banner ad, complete with Mask layer, so that we can program a button inside of it during Thursday's class.
Here is a great piece Outside Lands Flash inspiration that Welson shared with us in class:
In class, we went over learning how to Mask and also learned a trick on using Split Motion. Here are two tutorials reviewing these lessons:
Masking a banner ad:
360 degree spin and Split Motion:
This is an intermediate visual tutorial on making a 3D box spin.
The Split Motion we talked about is covered after Step 16.
However, be sure to check out the tutorial anyways and click on the 3D box! You will be able to make this on your own before you know it, and here is how.
As another tip, here is a list of additional ways you can manipulate a Motion Tween to your fullest advantage:
http://www.adobe.com/devnet/flash/learning_guide/animation/part06.html#splitting
It's also a good resource if you have forgotten how to select or move a specific Keyframe, or any other Keyframe tips we covered in class.
Also, finish up programming your 5-second banner ad, complete with Mask layer, so that we can program a button inside of it during Thursday's class.
Here is a great piece Outside Lands Flash inspiration that Welson shared with us in class:
In class, we went over learning how to Mask and also learned a trick on using Split Motion. Here are two tutorials reviewing these lessons:
Masking a banner ad:
360 degree spin and Split Motion:
This is an intermediate visual tutorial on making a 3D box spin.
The Split Motion we talked about is covered after Step 16.
However, be sure to check out the tutorial anyways and click on the 3D box! You will be able to make this on your own before you know it, and here is how.
As another tip, here is a list of additional ways you can manipulate a Motion Tween to your fullest advantage:
http://www.adobe.com/devnet/flash/learning_guide/animation/part06.html#splitting
It's also a good resource if you have forgotten how to select or move a specific Keyframe, or any other Keyframe tips we covered in class.
Thursday, June 23, 2011
Module 2 Wrap-up
For next Monday, please make a vector pack of all of the assets of your first 5-second banner ad. Use Flash or Illustrator to draw.
There are free vector pack .eps files out there for you to use and download, however I encourage you to modify them a lot to ensure you have a strong look-and-feel to your ad; each artist creating vector packs has their own style that don't always mesh well together. Here are some to look at for inspiration.
Vector packs can end up being a great way to have your portfolio discovered online. Several artists such as Johnny Doomsday have been discovered by simply offering up their vector work for free as a sort of "virtual business card" and hired to work on other projects.
Then, storyboard five or six animation cels (in Illustrator or Flash) using your vector pack characters.
Please remember, each cel represents one second of time passing, and lots can happen in one second! Look how much happens in 5 seconds of these flash animations. Ross Phillips has over 10 character changes in these 5 seconds.
And finally, here is a refresher tutorial on Motion Tweening. Skip the first 1 minute, he starts out a little slow.
There are free vector pack .eps files out there for you to use and download, however I encourage you to modify them a lot to ensure you have a strong look-and-feel to your ad; each artist creating vector packs has their own style that don't always mesh well together. Here are some to look at for inspiration.
Vector packs can end up being a great way to have your portfolio discovered online. Several artists such as Johnny Doomsday have been discovered by simply offering up their vector work for free as a sort of "virtual business card" and hired to work on other projects.
Then, storyboard five or six animation cels (in Illustrator or Flash) using your vector pack characters.
Please remember, each cel represents one second of time passing, and lots can happen in one second! Look how much happens in 5 seconds of these flash animations. Ross Phillips has over 10 character changes in these 5 seconds.
5 Second Project - Reverse from Ross Phillips on Vimeo.
5 Second Project - Fail from Ross Phillips on Vimeo.
And finally, here is a refresher tutorial on Motion Tweening. Skip the first 1 minute, he starts out a little slow.
Monday, June 20, 2011
Overview of Monday 6/20
If you would like a refresher on tonights class, please watch the short (1-2) minute Adobe videos listed as 02 through 07 below this video link found here:
http://tv.adobe.com/watch/learn-flash-professional-cs4/getting-started-02-understanding-flash-file-types/
Refresher tutorials should NEVER be used as a substitute for participating in class, as class participation and weekly assignments are worth 30% of your final grade (that's 2% of your grade accomplished during every class!)
http://tv.adobe.com/watch/learn-flash-professional-cs4/getting-started-02-understanding-flash-file-types/
Refresher tutorials should NEVER be used as a substitute for participating in class, as class participation and weekly assignments are worth 30% of your final grade (that's 2% of your grade accomplished during every class!)
Web Mood Boards
Once done, by hand, as cut-and-paste wall collages, a virtual mood board is a smart way to start a campaign for several reasons.
Here are some great ones, from 404 Creative:
What are the benefits?
Faster mockup production
Some clients will argue that they don’t want to pay for mood boards and would rather go straight to mockups, but a few short hours spent up front can save countless hours down the line. With a visual guide created and a clear vision of where you’re headed it’s much easier to jump right in to the visual prototyping process. There is no blank-canvas syndrome to deal with, and no gnawing feeling that you are wasting your time on a concept they might not like. Best of all, there are no big surprises. Since using mood boards I have yet to run into a project that was a complete do-over.
Smoother client buy-in
Additionally, early client participation makes them a bigger part of the project. When clients feel involved they are more likely to trust you. Mood boards make it clear that you are listening to them and considering their input. They also gain insight into the thinking behind your decisions, dispelling the all-too-common notion that designers choose everything on a whim. Knowing why you picked something will often keep personal preferences (ie/ the client’s favorite color is purple so she would like to see that as a background) from creeping in as change requests.
Less frustration, more fun
Mood boards are so much fun, they hardly feel like work. Designing loosely lets you brainstorm, explore and play with different styles without all the limitations a layout (and coding realities) will later impose. They also keep revision cycles to a minimum, something every designer can appreciate.
Examples
Here are some great ones, from 404 Creative:
What are the benefits?
Faster mockup production
Some clients will argue that they don’t want to pay for mood boards and would rather go straight to mockups, but a few short hours spent up front can save countless hours down the line. With a visual guide created and a clear vision of where you’re headed it’s much easier to jump right in to the visual prototyping process. There is no blank-canvas syndrome to deal with, and no gnawing feeling that you are wasting your time on a concept they might not like. Best of all, there are no big surprises. Since using mood boards I have yet to run into a project that was a complete do-over.
Smoother client buy-in
Additionally, early client participation makes them a bigger part of the project. When clients feel involved they are more likely to trust you. Mood boards make it clear that you are listening to them and considering their input. They also gain insight into the thinking behind your decisions, dispelling the all-too-common notion that designers choose everything on a whim. Knowing why you picked something will often keep personal preferences (ie/ the client’s favorite color is purple so she would like to see that as a background) from creeping in as change requests.
Less frustration, more fun
Mood boards are so much fun, they hardly feel like work. Designing loosely lets you brainstorm, explore and play with different styles without all the limitations a layout (and coding realities) will later impose. They also keep revision cycles to a minimum, something every designer can appreciate.
Examples
Hello and Welcome
We're going to get a lot of fun thing accomplished this summer, so let's get started!
First, please make your ZooTool account and post your URL and user name as a reply to this blog post. Please consult this link for 10 tips on how to maximize your ZooTool account, as well as these twelve tips right from the makers of ZooTool.
Next, please visit http://www.bannerblog.com.au/ and also post here two banner ads that you wish you knew how to make, along with a third banner ad from the Webby Award winners and nominees
http://www.webbyawards.com/webbys/current.php
For Thursday's class, create a mood board for Outside Lands 2011. Also, bring to class five campaign ideas for your midterm Outside Lands 2011 banner campaign. Each of the 5 ideas will include a pencil sketch of all three ad sizes below. This means you will be showing in class 15 total sketches (five each of the three sizes.)
Most banner ads come in standard sizes. Canned Banners currently offers the most common ad sizes (width x height in pixels):
728×90 “leaderboards”
300×250 “medium rectangles”
160×600 “skyscrapers”
There are a lot more banner ad sizes than just the three sizes above. You can find more details at the Interactive Advertising Bureau (IAB).
I will remind you:
For the midterm campaign,
-One of the three ads must be a minimum of 5 seconds long
-One of the three ads must be a minimum of 10 seconds long
-One of the three ads must be a minimum of 15 seconds long in total AND ALSO have a stop/play "click to play more" type of interaction with the audience, much like this award-winning Pringles banner ad:
http://www.bannerblog.com.au/2009/06/pringles.php
First, please make your ZooTool account and post your URL and user name as a reply to this blog post. Please consult this link for 10 tips on how to maximize your ZooTool account, as well as these twelve tips right from the makers of ZooTool.
Next, please visit http://www.bannerblog.com.au/ and also post here two banner ads that you wish you knew how to make, along with a third banner ad from the Webby Award winners and nominees
http://www.webbyawards.com/webbys/current.php
For Thursday's class, create a mood board for Outside Lands 2011. Also, bring to class five campaign ideas for your midterm Outside Lands 2011 banner campaign. Each of the 5 ideas will include a pencil sketch of all three ad sizes below. This means you will be showing in class 15 total sketches (five each of the three sizes.)
Most banner ads come in standard sizes. Canned Banners currently offers the most common ad sizes (width x height in pixels):
728×90 “leaderboards”
300×250 “medium rectangles”
160×600 “skyscrapers”
There are a lot more banner ad sizes than just the three sizes above. You can find more details at the Interactive Advertising Bureau (IAB).
I will remind you:
For the midterm campaign,
-One of the three ads must be a minimum of 5 seconds long
-One of the three ads must be a minimum of 10 seconds long
-One of the three ads must be a minimum of 15 seconds long in total AND ALSO have a stop/play "click to play more" type of interaction with the audience, much like this award-winning Pringles banner ad:
http://www.bannerblog.com.au/2009/06/pringles.php
Subscribe to:
Posts (Atom)