Part 4: Embedding video into your website

Unfortunately i am having trouble getting 'VideoDownloadHelper', an add on for firefox. With this add on i'd be able to download any FLV video straight off of the internet (Youtube).
I was planning on downloading one of my own videos off of youtube (youtube.com/TheDailyCrumb). Then i'd be able to embed it into my own flash player for my front page. Or my moving image pages.

So basically the add on was having trouble installing, some sort of error with my firefox pack. But that did not stop me. I remembered a program that comes with the CS3 pack. The Flash Video Encoder, i presumed this could tranform video or flash to FLV. I was correct!

I 'added' the video file of my latest animation (Final Major Project). As this is the video i want on my front page. (As a test before i move onto doing it for the rest of my 'avi' films.
I've always wanted my own video player, rather than embedding other websites.

Now once you've got your video exported to this new FLV format it is ready to be brought into flash.
But first!
Make sure when you create the new document you choose 'Actionscript 2'. This may or may not be important. But as the flash player would have originally been created for actionscript 2 it would be the best option.


Go to 'Window' and then 'Components'. A new window should pop up with a selection of premade components.
You want to go down to 'video'. Under that select FLV Playback and drag it onto your stage.
You can then resize to whatever dimensions you choose.

Once the player is in your stage select it and go down to 'Parametres'. You'll find this in the tabs above 'Properties'. If you cannot see it look under 'Window'.
You will find a list of different adjustable options. One of them will be 'Content Path'. There will be a little icon next to it.



Then press ok and your video should be in the player!
You can test it out by pressing control enter and watching a preview back. Now i'll be putting on my website. With this i have to make sure both the flash and the video are in the same files on the FTP site.
Fingers crossed it works.


As you can see from above it did not work out to my liking. Basicalli asked others what their views were. They said it was laggy and terrible quality.
A problem i found was that the play button and timeline were not appearing on my website. It looks like i'll continue to use embedded videos for the moment. But it was a good test and I may use this technique for other things. Like posting videos in SWF form.

I'm going to leave it like this for the next few days just to see what other people think. But i am planning to remove and replace as an embedded Vimeo.com video.

My website is at http://www.nathanviney.com/

Part 1: Research

Before i do anything, i want to be inspired. I also want to know what other people are doing out there. In my industry.
A long time ago when i first got a website it was just to show the flash animations i was doing, to entertain the viewers if there ever was any.
But now, whilst hopefully still entertaining i want to gather work. Impress clients for freelance or workers at animation companies.
I am quite lucky to have quite a few contacts at the moment in the work world. But for them to stay on my side, and for them to suggest me to others. I need an 'easy to use', professional looking website.
Original site design

I found this design very bland. Extremely simple to use but could possibly scare people away when visiting.
I've always wanted to do FLASH BUTTONS. And.. for a while i did have them. A long time ago i had flash buttons linking to pop up windows. These ended up being difficult to edit. Because getting the actionscript to make the right size pop up was very hard. They also seemed to be different shapes and sizes on different browsers.

It is quite important to create something that should work and look the same on most browsers. I have both Internet Explorer and Firefox on my computer. I feel like they speak for most other browsers avaliable. If it does not work on one of them i will not use it.
My design was so simple, and it still is. But flash buttons DO make it look quite professional. Working on some at the moment, some simple designs. Will most likely come back when i have time and change them a bit.
I could possibly go completely flashsite one day. I was looking around and found some very impressive ones.
This would be if i had the time. At the moment i am working on exploring these new site concepts, coursework paperwork and some new freelance work. The last being quite demanding.
So one day i may possibly go full flash site. But until then it may just be flash elements on an HTML site.

Just so you know, i create my website on Adobe Dreamweaver. Then upload the files onto my ftp site using FILEZILLA. The site is hosted by my uncles company.

Below is a fantastic website. This designer and animator, Will Arbuckle has two websites. This is his completely professional portfolio website. Clients will flock here to discover his best freelance works.
As you can see the website shows off the wide variety of skills he has. As well as a classy looking site. A bit too simple for my liking but you can tell there is a good method to pull in the work with it.
Click on the image to see his animated intro and brilliantly made/designed flashsite.


As i said, Will has another website. It is for all of his FOR FUN animations and stuff. Fun games and cartoons that the basic non paying internet viewer can enjoy.

Seperates two directions i could go in. Or two things I could do. Professional freelance website and fun, free web series to enjoy.
The other website is so different! The first one was so professional and simplistic, where as the other site is so colourful and complicated!
There is more to do! It is not as much a portfolio as the other one. Difference is the whole thing is not flash, like mine (But more complicated and detailed) it has a heap of flash elements.
Click on the image below to visit the site


OR!
Go in another direction for portfolio?
Erik Westlund, animator and model maker has quite a basic site. A really nice design actually. I've seen quite a few with this simple structure of links and logo.
All of it is HTML but all of it is brilliant.
He has chosen some good colours on his site, faded blues and greys. It is not colourful but seems to work once again in that professional sense.
His links include
Home
Bio
Animation
Models
Art
Resume
Tutorial
Contact
Links
Click on the image to visit the site.

A great selection. Everything is easy to find and simple to understand. Pages are not hidden behind a maze of links. They are there, clear and his galleries are all simple. They are, like mine, thumbnails. If you like you will click, if you do not, you will not.
I think maybe my problem is that i have both my WORK and my fun time stuff on my site. Maybe i should do what Will Arbuckle did and seperate the two into two seperate sites. Or one seperate site connected to another on the same site.
This will be something to think about for the future.

Arthur Larsen
Amazing look and feel to his portfolio site. It is all about the banner and links. Even the banner occasionally has a little animated character running on. Then does some very impressive movement before jumping back off screen. Showing off your work without the viewer even clicking anything! Brilliant. This goes back to the 'animated logo' or animated character on logo idea.
Click on the image to visit the site

The main problems i can see with this site are 1, the name. No client is going to search up 'comlock' for animation work or your personal portfolio. this is one of the reasons why my website has such a boring name, nathanviney.com

The other problem i see is that almost everything is hosted somewhere else. The animation page for instance all links to his blog pages. It is not so bad, but might annoy me if i were a client.

http://okaydave.com/ is a portfolio site by David Werner. Released in 2006 David actually has quite a complicated looking site.
That is what you think when you first see it. But then, when you click the links you realise how simple it really is.
Almost every buttons links to a unique creative skill. Each page with an emotional video narrated by the creator himself. Mostly talking about his inspirations and life love for his art projects.
Click the image to visit his site

Showing that love for your work on your website will convince the clients that you are not just playing around. You are serious. He also shows off a lot of talents on this one site, a true online portfolio.

There is a lot to be learnt from all of these sites. I think i have picked out my favourite bits and the bits that i do not think work. Or would not work with my own.


- Nathan Viney

Part 2: Online Progress & how to make a button

Over the last week i've been playing around with the information i'd picked up from the lesson. We basically ran through the whole procedure of creating a simple flash website.
It was surprisingly quite simple and after such instruction the possibilities are endless. Once you have grasped the simple 'Go to' actionscript commands the rest is up to you. To design and play with as much as you want.

I am going to start off with 'How to make a button' and link it up to other frames for your own website.

Let us begin!

We can start off nice and quick! You know flash. Remember when you create the new document, make sure it is 'actionscript 2'. This is what i'll be using.

You've opened up, go to the tools and create a circle shape, or a square. Or even just squiggle a funny line with the brush tool! Anything can be a button (If you believe it to be!)

That is presuming you are using Adobe Flash Cs3. If not your tool bar may be somewhere else. I know CS4 went a bit crazy with it's layout. Maybe i'm just old fashioned.
Anyway!

So you've clicked on the image you've drawn? So all the little dots are appearing all over your circle? Next up right click the circle and select 'Convert to Symbol...'. This will be in the drop down menu.
Once you've done that this window will come up. You can name the button whatever you like. Select 'button'! How predictable.

Thats all 'OK' then.
So now your circle is officially a button. What next?

Well first off we're going to go back to the beginning and have a look at the flash timeline.

Imagine a website like you know one. A homepage, then a load of different selections for different pages. Galleries, showreel, contact information.

So imagining those seperate pages create 4 'keyframes' on your layer.
Image below to help. Right click timeline frames you like and then select 'Insert Keyframe.'


Then you name the layer by double clicking 'layer 1' on the left. I'd rename it 'Buttons' or 'Button'.

If you have ever used photoshop the rules of layers apply exactly the same. The below layers will be the behind ones (Backgrounds).
This is why i've created a layer below 'Buttons' called...


As you can see i've created keyframes on the bottom layer too. In the exact same places. This is so we can see that our buttons get us to our destinations.

When we click our buttons they will go to the individual frames. I've created these at frames 10, 20, 30 and 40.

Ok for the next step make sure you are back on frame 1.

So the flash does not play right through to the end without stopping when you create the SWF you will need to stop the frames.
As you can see from the image you want to click on the first frame and then find the 'actions panel'. This may already be up for you in properties, if not you'll be able to find it under 'window.'

Then you can select timeline control and double click 'stop'. The little 'a' will appear on the frame in the timeline. You can see this on the image below.


You then want to do this to every keyframe you created.

Now i've drawn/written 'Gallery' on frame ten bottom layer. (Below)



So our button is going to take us to the Gallery.

Now lets go back to the beginning!
Frame one.

Click on the button and go to it's actions.

This time instead of 'stop' you want to go to 'goto'. Double click this and you should have the on(release) code from the image above.

You can choose the frame by writing it into the code or clicking on the 'Script Assist' button which looks a bit like a magic wand and can be found on the right of the screen.

Now press ctrl enter straight away! TEST THAT MOVIE!

You should have the button on the first frame. Click on it! It should take you to the GALLERY page now.

Then you can create multiple buttons and design multiple pages and such. Make sure to play around with layers and seperate your content.




I'm going to be talking about how to add text and a scroll bar in on a different post. But before i do this i must mention what i have achieved myself.

As i already have a working website (That originally had no flash content, apart from my flash movies.) I did not want to create a whole flash site . It seemed quite unnecessary. But incorporating random parts of what i've learnt is proving a brilliant tool.

Here is what i've done.
Using the power of the internet i've got actionscript to make my 'flash buttons' link to other pages on my website.

(My new site Navi for the moment.)
In this image i've put the mouse over the 'Moving Image' button.

So these are new buttons.
The codes are similar but different. I searched for help online (Google) to find out what to do to create a button linking to a URL.

The information told me to put the actionscript in the keyframe and give the buttons individual instance names.

This was the result of actionscript

"button1.onRelease = function() { getURL("http://www.nathanviney.com/moving%20image.html"); }; button3.onRelease = function() { getURL("http://www.nathanviney.com/Webworks.html"); }; button2.onRelease = function() { getURL("http://www.nathanviney.com/Webworks.html"); }; button3.onRelease = function() { getURL("http://www.nathanviney.com/Contact.html"); };
"

Now if i want to update the buttons looks i can easily do so inside the button without starting the actionscript again. It is full proof! And you can do it too.
Research
http://www.ehow.com/how_4503049_button-url-actionscript-flash.html

*

Go to my website at
http://www.nathanviney.com

- Nathan Viney

Part 3: Text in Box

I've created working buttons. I'm hoping they'll make my site feel a little bit more professional.
My site still has a lot to fix and work on. But for now i have settled on a design. A blue on white design with a touch of glowing green.

I used my CONTACT page as the place for my 'Flash text in a box' work.
There is something about a list in a scroll bar that is so much more professional than just a list of text that you have to scroll down the whole page to read.
I'm hoping to wave this over my pages, especially moving image. Which remains a mess and links up to my old White on Black design. Which was getting old and seemed quite depressing. I had the black design for quite a while. It did seem a bit professional but it is time for a more joyful change. This is it!

My contact box is a scroll text box under my main logo and navi.
It contains every way of getting in contact from Email to Youtube. As well as some of my skills at the bottom.

Click on image to visit the page

Now, HOW to make a scroll text box to put on your flash site.
This is extremely simple and quick. Something you'll be able to pick up more as you go and just drop into your site pages.

Remember first off make sure your Flash Document is using 'actionscript 2'. If you didnt select this when you created the page you can change it using the Publish: Settings button at the bottom of the screen (In Properties).

You know how to create a text box. It is as simple as clicking the T icon and dragging a square onto the STAGE (White background).
BUT in this case before you draw the square make sure you go to properties and select DYNAMIC TEXT

and while you're there...


Excellent!
Now create your square text shape and write whatever you want in it, make it a lot so the scroll works!

Once you've done that go to
WINDOW
and click 'Components'.
You should get a pop up with a list already coded adobe content.
Click on the UI Scroll bar

and drag it to the position you want the scroll bar to work
Add more text if you need to.

Then ctrl enter! (Preview)

My final version had a background image (Devil face). You can put any image there if you want by creating a layer below.

To export your final SWF you can go to file - export then choose your preferences.


I hope to do this some more on other pages.

you can visit my 'construction site' at http://www.nathanviney.com


- Nathan Viney