Wrath – Hutton

December 12, 2013 |  by  |  Inspiration, Project Three, Student Edge Projects, Student Work, Tutorials  |  Comments Off on Wrath – Hutton

Screen Shot 2013-12-11 at 5.42.45 PMScreen Shot 2013-12-11 at 5.42.53 PMScreen Shot 2013-12-11 at 5.42.58 PM

Knife is displayed on screen and is animated to move up and down.

Click it and the stage animates in blood, first slowly, then quickly. The screen fills with blood until the whole thing is covered. And then WRATH appears. You can click the white knife to replay the animation.

Tweenmax Reverse Animation Example

April 24, 2012 |  by  |  Project Three, Tutorials  |   |  Comments Off on Tweenmax Reverse Animation Example

tweenMax ReverseTween Example | ZIP

onComplete Play MP3 Example

April 24, 2012 |  by  |  Project Three, Tutorials  |  ,  |  Comments Off on onComplete Play MP3 Example

TweenMax Timed Animation onComplete Audio Example | ZIP

Video Basics

April 18, 2012 |  by  |  Project Three, Tutorials  |  Comments Off on Video Basics

 

Download this! ZIP

BasicFlashVideoPlayer PDF

FlashEncodingVideoBasics PDF

FLA Video Examples | ZIP

Student Example FLA Files

April 4, 2012 |  by  |  Project Three, Project Two, Student Work, Student Work, Tutorials, Tutorials  |  Comments Off on Student Example FLA Files

Student Examples | ZIP

Tween a Bunch of Stuff! AS3 Greensocks “allTo” TweenMax Ticks

April 4, 2012 |  by  |  Tutorials  |  , ,  |  Comments Off on Tween a Bunch of Stuff! AS3 Greensocks “allTo” TweenMax Ticks

allTO Greensocks Ticks | ZIP

Exporting Out of FCP | Before Compressing

April 26, 2010 |  by  |  Project Three, Tutorials  |  , ,  |  Comments Off on Exporting Out of FCP | Before Compressing

STEP 1 | Render any Changes You’ve Made to the Timeline

STEP 2 | With the Timeline Selected Export the File

Step 3 | File > Export > Quicktime > Settings > Apple ProRez 422 (HQ) 1440×1080 30p 48khz

Make a XML Slideshow the easy way

March 24, 2010 |  by  |  Project Three, Project Two, Tutorials, Tutorials  |  , , , ,  |  Comments Off on Make a XML Slideshow the easy way

EXAMPLE OF FINAL

OVERVIEW

So you want to make a slide show all by yourself eh? You want to be able to do all the normal stuff a slideshow player does, play, pause fade images, offer captions and credits, how about play videos, let’s throw that one on there too. How about having total control of all your content through an external XML file?  Ok you got your actionscript window up? Now you got about a million hours? I would love (I’m totally lying right now) to build my own custom slideshow player for each project from scratch. Why? Let me ask you, you drive a car? Every time you needed a new car would you start ordering parts on eBay and assembling it bit by bit? Hell no. Sure that car would bend to your will, but at what cost? For most projects in Flash there’s already a solution out in the wild, all you need to do is find it and make it your own, go Picasso on that fla.

Enter Stage right, let me introduce SlideShow Pro [SSP].  A great base for all your slideshow needs and it also does a bit of video as well (all bit it with some restrictions). We’ll be able to save 95% of AS3 production time with this component. In future tutorials we’ll be adding a thumbnail view and full screen functionality. Did i mention SSP is crazy cheap?

GOALS

  • Create a slideshowpro player with external navigation buttons, captions, image counter and credit fields
  • Create an External XML file
  • Implement SWFobject for Flash embedding and dynamic XML path assignment
  • Not want to kill yourself and the end of the process

STEPS

1. Setting the stage, What is What

2. SSP Basics

3. Flickr Up, SSP Integration

4. It’s Custom baby, Customizing SSP

5. Setting up your SSP XML

6. SWFobject for SSP

RESOURCES


STEP ONE | SETTING THE STAGE, WHAT IS WHAT

Slideshowpro

According to the Slideshowpro site, “SSP is a Flash-based slideshow application for displaying photos and videos on any web site. It’s available as an ActionScript 2 & 3 component for Flash, as a gallery extension for Adobe Lightroom, and in standalone form for embedding yourself, SlideShowPro was built to meet the demands of photographers and web designers looking for an elegant, highly customizable utility for displaying photo and video slideshows.” That’s great but be sure to check out the full explication in the SSP user guide.

  • Flash components are basically pre-built widgets to help you make things faster.are basically pre-built widgets to help you make things faster.
  • Can use an dynamically assigned external XML file to load images, elminatiing the need to open flash to create a new slideshow
  • Total customizable look
  • Displays videos and photos in the same player
  • Display titles and captions
  • Can be used as a component inside of flash or as a standalone player (no need to own flash)

Basic SSP definitions

Albums: A single set of images or videos

Galleries: A collection of 2 or more Albums

Events: An object can trigger a function when certain conditions are met, by creating a special kind of object called an Event.

Methods: Functionality actions that the object can perform and they end in ().

Properties: Attributes which can be configured

SSP Examples in the Wild

XML

eXtensible Markup Language.

According to the W3C XML achieves the following:

  • XML is designed to transport and easily store data
  • XML is a markup language much like HTML
  • XML was designed to carry data, not to display data
  • XML tags are not predefined. You must define your own tags
  • XML is designed to be self-descriptive
  • XML separates data from HTML

Examples of XML is use

  • XHTML the latest version of HTML
  • WAP and WML as markup languages for handheld devices
  • RSS languages for news feeds

Basic XML Structure









Basic SSP XML Structure |  Single Album with 3 images inside



	
	
	
		
		
		
		
		
		
		
	
	
	




SWFobject

According to Wiki, SWFobject is an open-source JavaScript library used to embed Adobe Flash content onto Web pages, which is supplied as one small JavaScript file. The library can also detect the installed Adobe Flash Player plug-in in all major web browsers, on all major operating systems (OS), and can redirect the visitor to another webpage or show alternate HTML content if the installed plug-in is not suitable.The library is independent, although related external libraries often integrate with it, such as SWFAddress and SWFFit.

  • Simple to use
  • Web standards compliant
  • Displays alternate content for users with out the proper flash player (can you say iPhone users)
  • Can assign a dynamic link to a XML file file

EXAMPLES

STEP TWO | THE SSP BASICS

I’m sure by now you’ve read all of the SSP documentation from the resource links provided above right?  Well good. If we’ll all do our best to keep up. Don’t forget to play and try other property setting in the component inspector. Variety is the spice of life right?

Make sure you have the SSP component installed before you start this tutorial.

EDUCATE YOURSELF

Let’s follow the great documentation on the SSP Wiki to get started here to get a firm idea of all the options. Have your SSP Naked FLA open to play along.

Test Drive

Let’s give this mother a quick test drive.

a. Drag the component to the stage area

b. Using your window > info window use X and Y to set the component to 0 0

c. Using the component window size the component to the size of the stage (located in the properties window if you select the stage first)

d. In the Window > Component Inspector select “default” for XML type and place this in the path field

[html]
http://stories.mountainworkshops.org/workshop/2009/slideshow/1277/headline/slides.xml
[/html]

e. Publish the FLA by hitting Command + Return

f. Be amazed

g. Go back to your FLA, select the SSP component and change at least 4 SSP properties in the component inspector.  Reference the SSP Wiki for help.

h. Now with your vast SSP experience try and reproduce the functionality seen at The Beauty of Things

STEP THREE | FLICKR UP, SSP INTEGRATION

EXAMPLE


How about bringing in some automation? Flickr is a powerful image and video service that implements RSS to help distribute peoples images. The above example is just the SSP default way of displaying this RSS feed.

EDUCATE YOURSELF

Everything you’ll need to know is detailed in the SSP Wiki post on using this component to suck in Media RSS feeds like a Flickr feed.

Why

  • Automate your media workflow
  • Eliminates need to write your own XML file

How to

Basic Facts

  • Media RSS is used for syndicating multimedia such as audio, video and images
  • Designed by Yahoo
  • Not all feeds can use used by the SSP component
  • Flickr has a usable Media RSS format for use with SSP


STEP FOUR | IT’S CUSTOM BABY

As you saw in the first example we want to have complete graphical control over the basic slideshow controls, plus some image meta data

WHAT WE WANT TO SEX UP

  • play
  • pause
  • forward and previous
  • total image count
  • title (we’re using the title field to display an image credit)

RESOURCES

SSP Parameter API | Link

SSP Naked | ZIP

SETTING UP THE SSP COMPONENT

Within the SSP component we got a ton of parameters (164 to be exact). We’ll want to turn some options off, like the built in visible nav bar at the bottom, plus we want to make some adjustments, like moving the caption to the bottom.

We could go all old-school analog and use the physical Component Inspector (window > component inspector). We have the knowledge, we have the power, let’s use Actionscript and the SSP API to achieve the first goals.

One question we need to ask ourselves is, what media are we trying to display and what proportions does that media have? In our case we will be formatting our SSP instance for a full-frame image from a Canon 5D or a Nikon D3. The base size is 600×400, we’ll be adding some room for navigation too.

a. Set the stage to a width of 600 and a height of 450

b. Place your SSP component on the stage

c. Name your SSP instance “my_ssp”

d. Name your layer “my_ssp”

e. Open up the Actions Panel window > Actions

f. First let’s tell our SSP instance to call in a XML file and set the XML type, as always pay close attention to the comments

/*
Set our Media RSS feed file path
and XML File Type
*/
//Import the XML file
my_ssp.xmlFilePath = "http://establishareconnect.org/wp-content/blogs.dir/2/files/2010/03/sspExample/xml/images.xml";

g. Now Let’s add in the changes to our SSP instance the hardcore way (haha) through Actionscript

/*
Set our Media RSS feed file path
and XML File Type
*/

//Import the XML file
my_ssp.xmlFilePath = "http://establishareconnect.org/wp-content/blogs.dir/2/files/2010/03/sspExample/xml/images.xml";

/*
set up our basic SSP
component visual parameters
*/

//CAPTION

//When you mouse over the image area it will display the caption
my_ssp.captionAppearance = "Overlay on Rollover (if Available)";

//Tell SSP to only display the caption inside the component
my_ssp.captionElements = "Caption Only";

//Place Caption at bottom
my_ssp.captionPosition = "Bottom";

//Caption padding
my_ssp.captionPadding = [15,15,15,15];

//Set text size
my_ssp.captionTextSize = 14;

//CONTENT AREA

//Align all images to the bottom Right
my_ssp.contentAlign = "Top Center";

//When you click on the image area it will go to full screen
my_ssp.contentAreaAction = "Toggle Full Screen";

//Set the background of the component to zero
my_ssp.contentAreaBackgroundAlpha = 0;

//We don't need no stinking strokes
my_ssp.contentAreaStrokeAppearance = "Hidden";

//We don't need no stinking strokes
my_ssp.contentFrameStrokeAppearance = "Hidden";

//content will proportionally downscale or upscale to fit the dimensions of the component
my_ssp.contentScale = "Proportional";

//Set to manu play, user will have to click play button
my_ssp.displayMode = "Manual";

//Set feedback timer to off
my_ssp.feedbackTimerAppearance = "Hidden";

//Set default naigation bar to off
my_ssp.navAppearance = "Hidden";

//Display the tooltip so the user knows they can click to go full screen
my_ssp.toolAppearanceContentArea = "Visable";

//TYPOGRAPHY

//Set font family
my_ssp.typeface = "Helvetica,Arial,Lucida Sans,Verdana,Arial,_sans";

//Make the font nice and readble
my_ssp.typefaceAntiAlias = "Advanced";

MID-POINT EXAMPLE

ADDING THE GOODS

We all want to make this as easy as possible. Thankfully SSP has done most of the heavy lifting for us. In this final section of the tutorial we’ll be addding the following elements to our SSP player.

  • Play/Pause toggle
  • Forward
  • Back
  • Credit
  • Total image number
  • Current image number

a. Make the following buttons and give instance names according to the code below

1. Play Button 1 48×48

2. Play Button two 136×136 (see final example above and use a webding number 4)

3. Back button

4. Forward button

b. Make the following text fields with the property setting of “dynamic text” give instance names according to the code below

1. Title (we’ll be using it for a credit)

2. Current image number

3. Total image number

c. The notorious BIG i mean AS3, make sure you have the greensocks com folder!

import net.slideshowpro.slideshowpro.*;
import com.greensock.*;

/*
Set our Media RSS feed file path
and XML File Type
*/

//Import the XML file
my_ssp.xmlFilePath = "http://establishareconnect.org/wp-content/blogs.dir/2/files/2010/03/sspExample/xml/images.xml";

/*
set up our basic SSP
component visual parameters
*/

//CAPTION

//When you mouse over the image area it will display the caption
my_ssp.captionAppearance = "Overlay on Rollover (if Available)";

//Tell SSP to only display the caption inside the component
my_ssp.captionElements = "Caption Only";

//Place Caption at bottom
my_ssp.captionPosition = "Bottom";

//Caption padding
my_ssp.captionPadding = [15,15,15,15];

//Set text size
my_ssp.captionTextSize = 14;

//CONTENT AREA

//Align all images to the bottom Right
my_ssp.contentAlign = "Top Center";

//When you click on the image area it will go to full screen
my_ssp.contentAreaAction = "Toggle Full Screen";

//Set the background of the component to zero
my_ssp.contentAreaBackgroundAlpha = 0;

//We don't need no stinking strokes
my_ssp.contentAreaStrokeAppearance = "Hidden";

//We don't need no stinking strokes
my_ssp.contentFrameStrokeAppearance = "Hidden";

//content will proportionally downscale or upscale to fit the dimensions of the component
my_ssp.contentScale = "Proportional";

//Set to manu play, user will have to click play button
my_ssp.displayMode = "Manual";

//Set feedback timer to off
my_ssp.feedbackTimerAppearance = "Hidden";

//Set default naigation bar to off
my_ssp.navAppearance = "Hidden";

//Display the tooltip so the user know they can click to go full screen
my_ssp.toolAppearanceContentArea = "Visable";

//TYPOGRAPHY

//Set font family
my_ssp.typeface = "Helvetica,Arial,Lucida Sans,Verdana,Arial,_sans";

//Make the font nice and readble
my_ssp.typefaceAntiAlias = "Advanced";

//Navigation Button
//TweenMax.to(overImagePlay_btn, 1, {autoAlpha:0});

// setup listeners for buttons
overImagePlay_btn.addEventListener("click",togglePlay);
back_btn.addEventListener("click",onBackClick);
play_btn.addEventListener("click",togglePlay);
pause_btn.addEventListener("click",togglePlay);
forward_btn.addEventListener("click",onNextClick);

// setup event listeners for image data
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, albumStuff);
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, imageStuff);
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA,onImageData);

/*
functions
*/

//Button functions
function togglePlay(e:MouseEvent):void {

if (play_btn.alpha == 0) {

//play slideshow if paused, pause slideshow if playing
my_ssp.toggleDisplayMode();

//set play over the imagebutton alpha to 0 over 1 second
TweenMax.to(overImagePlay_btn, 1, {autoAlpha:1});

//
TweenMax.to(play_btn, 1, {autoAlpha:1});

//Set pause button alpha to zero
TweenMax.to(pause_btn, 1, {autoAlpha:0});

} else {
//play slideshow if paused, pause slideshow if playing
my_ssp.toggleDisplayMode();

//set play over the imagebutton alpha to 0 over 1 second
TweenMax.to(overImagePlay_btn, 1, {autoAlpha:0});

//Set Nav bar Play button alpha to zero
TweenMax.to(play_btn, 1, {autoAlpha:0});

//Set pause button alpha to zero
TweenMax.to(pause_btn, 1, {autoAlpha:1});

}

}

function onNextClick(e:MouseEvent):void {

//Advance to next image
my_ssp.nextImage();

//set play over the imagebutton alpha to 0 over 1 second
TweenMax.to(overImagePlay_btn, 1, {autoAlpha:0});

//Make sure the player is paused
my_ssp.pauseMedia();

}

function onBackClick(e:MouseEvent):void {

//Go to previous image
my_ssp.previousImage();

//set play over the imagebutton alpha to 0 over 1 second
TweenMax.to(overImagePlay_btn, 1, {autoAlpha:0});

//Make sure the player is paused
my_ssp.pauseMedia();

}

//image total
function albumStuff(event:SSPDataEvent) {
if (event.type=="albumData") {
TEXTBOX1.text = event.data.totalImages;
}
}

function imageStuff(event:SSPDataEvent) {
if (event.type=="imageData") {
trace(event.data.caption);
TEXTBOX2.text = event.data.number;
//my_ssp_title.htmlText=event.data.title;

}
}

//Image title
function onImageData(event:SSPDataEvent) {
if (event.type=="imageData") {
my_ssp_title.htmlText=event.data.title;
}
}

Download Video From Youtube or Other Sites

March 22, 2010 |  by  |  Project Three, Tutorials  |  1 Comment

Download videos from Youtube for your project

Read More

Random Number Generator

March 1, 2010 |  by  |  Project Three, Tutorials  |  1 Comment

I wanted to get something to play at a random delay time, so I found a function to generate a random number:

//To call the function, define lowest, and highest numbers you want to get (in this case it will return a random number between 1, and 5)

randomNumber(1, 5)

//Random Number Generator
function randomNumber(low:Number=NaN, high:Number=NaN):Number
{
var low:Number = low;
var high:Number = high;

if(isNaN(low))
{
throw new Error(“low must be defined”);
}
if(isNaN(high))
{
throw new Error(“high must be defined”);
}
return Math.round(Math.random() * (1+high – low)) + low;}

Want to make an “mp3 player” ?

February 24, 2010 |  by  |  Project Three, Tutorials  |  Comments Off on Want to make an “mp3 player” ?

I found this great tutorial explaining how to turn a button into a music player…. It was really easy, you just need a button made for “stop” and a button for “start” and the code itself is pretty self explanatory.

…If you click on Tom in “biography” a song plays, if you click the wheat the song stops.

…If you go to “Discography”, by clicking on the bottom song it starts playing music, clicking on the middle song stops the music.

____

DOWNLOAD >> Here are my files, probably mostly for Chris? But for anyone too! sorry if they’re a mess.