Photoshop and Flash Integration
Introduction
Welcome from Colin Smith. Tells you what you can expect to learn.
Flash Basics
Splash page
The splash page in Flash. Choosing the documents and getting started.
User Interface
Tour of the interface in Flash CS4. Learn the new layout and how to make it look like earlier versions of Flash. Create workspaces.
Symbols explained
Building blocks in Flash are symbols. Learn what they are, how to work with them and understand the 3 types of symbols.
Basic motion
What is motion? Tweens explained as well as traditional tweens and the new CS4 tweens.
Easing motion
Changing the velocity of motion. Easing adds realism to movement by using acceleration and decceleration.
Nested movieclips
Movie clips within movie clips. Essential for any complex or logical animation. All explained in the tutorial.
Flash sniffer
When you publish your site, you can have Flash check for the latest version of the player. It can download and install on the users computer automatically. All without a piece of code written by you.
DESIGN IN PHOTOSHOP
Photoshop Design 1
Lay out the basic webpage. Learn about documents, importing photos and alignment and distribution.
Logo In Photoshop
Design a basic logo. Special Skill: Free transform
Final Touches
Add some design elements to make the page look better. Special skill: Repeating patterns.
Contact page
Design the contact page. Special Skill: Creating a box with rounded corners and fades to transparent.
Info Page
Design the info page. Special skill: Create a dimmed wash effect on the photo. Paragraph text
Gallery page
Design the gallery page. Special skill: Vignette borders on the photo with masks. Duplicating thumbnails.
Prep for export
Walk through and clean up of the project. Inspect the layers and strategize.
Organizing in Flash
Import PSD
Using the PSD importer. Understand how Flash imports and set it up for maximum flexibility. Bring all the assets into Flash.
Flash Navigation structure and setup.
Go over the project in Flash. Set up the navigation framework. Redo the logo.
Site Overview
Sort through the layers and begin to organize them into pages.
Site Setup
Organize the layers. Group into key frames and set up the page structure. Set up a clean and efficient timeline. Linear navigation.
Buttons
Set up the buttons. Create different states for the buttons. Make basic roll over effects.
Buttons ActionScript
Create the Actions to control the page navigation. Click the buttons to change pages on the site.
Frame Labels
Learn a more flexible way of navigating the timeline with frame labels.
Animated Page Fades
Create a fade in from Black transition effect for each page.
Image Gallery
Gallery 1 - Setup
Import and design the gallery. Optimize images.
Gallery 2 – Load Photos
Create action script to load images dynamically. Loading images from your computer/website.
Gallery 3 - Captions
Adding captions with dynamic text.
Gallery 4 - Arrays
Create an array to make it easier to update the site easily.
Integrate Gallery 1
Take the gallery page and place it inside the site we are building.
Integrate Gallery 2
Word of warning about external images, and the advantages of using dynamic image loading.
Info page: Dynamic Text
Dynamic Text
Basic dynamic text with actionScript. It’s easier than you think.
Markup text formats
Using basic markup to add line breaks, bold and italic formatting.
Scrolling text
Add a scroller for large bodies of text. Use the component and it’s easy!
Scrolling text style sheet
Create a style sheet to control the text component. Also learn to modify the skin on the component.
Contact page: Forms
Invisible button
Use the invisible button trick to create hotspots that turn anything into a button.
Email links and hyperlinks
Add hyperlinks in Flash that allow you to go to any web page. Also learn how to make a simple link that launches an email program, inserts your email address and subject line.
Creating a form
Use Components to create a form in Flash.
Scripting the form
Cut and paste the supplied ActionScript to finish setting up the form. All the code is explained as well as letting you know exactly what needs to be change to fully customize the form.
Test for PHP
Upload the supplied script to test your server for PHP. Don’t worry, this takes about 10 seconds
Finish contact form
Find out how to modify the supplied PHP script to send you the emails. Upload and test the form.
Home page: Finishing touches
Photoshop Video
Bring video into Photoshop. Stylize the video, distort it and prepare it for export to Flash.
Export Video from Photoshop
Export the cropped video from Photoshop. See how to encode into a format Flash can use.
Converting video to FLV
Use Adobe Media Encoder that comes with Flash to convert anything to an FLV.
Integrate video in Flash
Bring video into Flash. Learn how to add to the time line as well as link to external video clips.
Animate the Navigation
Create an animated Page build to polish the load up of the site.
Publishing to the Web
Everything you need to know about having Flash generate the html page you need to add your flash project to the web.
Upload site
Upload everything to the web and enjoy your new website.
Goodbye
Colin wraps it up and gives advice on where to go from here.
Colin Smith is an award winning digital artist, best-selling author, and trainer. Colin is founder of the #1 PhotoshopCAFE online
community which has received over 20 million visitors. He’s a
rarity, being an expert in both Photoshop and Flash.
