Who's got the first (I think) fully flash banner in Yola? This Bear...

  • 4
  • Idea
  • Updated 8 years ago
  • Not Planned
Who was it long ago that said that it couldn't be done? (can't remember)

With Yola everything is possible. ;)

Check it out...

http://www.honeybearplayhomes.com/

I think that it really is freakin awesome. I needed something behind the house and boy for action and what better than some soft fluffy clouds.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 8 years ago

  • 4
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
So holiday friendly...

Snowing

Fall

Halloween

Easter

Fourth of July
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Cool! I love it!
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
I really like this Ed.

The design of your site is amazing.

Do you make the graphics yourself? What program do you use?

I'm loving your work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I think he probably uses Adobe Flash Maker (Pro?).
Photo of Nathan Lloyd

Nathan Lloyd

  • 3 Posts
  • 0 Reply Likes
how do you put the google search box in the banner of your site?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Nathan,
I'll let Ed share his expertise on this one!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome job Ed! This is amazing! But how did you make it work? Did you use CSS positioning or did you upload it through Yola? (I don't know how you would do that) Or did you use JavaScript .innerHTML on the #sys_banner?

Thanks,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also Ed, how did you make that little image at the bottom with the different characters on your site? Here is a screen shot of what I am talking about:



It is cool with the little things that pop up when you hover over one thing in that whole image. How did you do that, its neat!

Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
While I am creative and was once an artist I did in fact spend several hundred dollars for an assortment of vector images which include all the furry critters that you see. Putting them all together to make it work was all me.

I used in most part (30 day free trial) Adobe Fireworks to do the graphic editing but when the trial was over used the ever faithful GIMP (not as good as Fireworks though)

To do the animation or interactive features on the site I used "Aleo Flash Banner Maker" and Adobe flash pro. By the way Aleo created a customer created page after they saw my site 2 years ago. http://www.aleosoft.com/flash-intro-b...

The banner was a tricky one as it entailed using Fireworks to create two actual banner images. One with a blue background to upload to the banner in the sitebuilder so that if the user did not have flash enabled they could still see the banner and one image with the blue sky removed and a transparent one in its place to use in my Aleosoft flash banner maker and set as the top image with the animated clouds in the background behind the house, grass and flowers thereby creating a backdrop for the bear shield in the middle and the boy chasing the bee to the left.

The following thread was used to overlay all the content over the actual banner which included the images of the honey on both top corners, the bear shield in the middle, the image of the boy with the net, the interactive flash bee and the Google custom search over the left bottom corner of the banner. It truly was an experience and challenge putting them all together and as I usually share my knowledge with other I did so here.

How to layer objects over the banner in Yola

A video which shows some of the steps but for another tutorial.

To do the imagemap at the bottom with the talking animals I used Meracl ImageMap Generator and with 6 individual images with the movement on each of the animals and their speech bubbles was able to create the (somewhat) animation. I did it as more of a fun interaction and unless you know that they are there it would take an accidental mouse over to catch them.

I am glad that you all liked it because I was getting a little worried that everyone didn’t and was the reason that they were not posting screen captures of what they saw on the thread I started the other day. So... I signed up for a free Clicktale account and was able to see what each of your screens saw as you moved your mouse across the screen and interacted with the features on my site. It is pretty cool of a program they have there.

More to come...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, yeah thats cool how you did the image rollover thing! Before you said this I was looking at the image closer as I moved over the little creatures and I saw that the image at the bottom changes just a little and then I remembered about "image maps" so then I knew how you did it, but it is cool! At the bottom where the flowers are the little pebbles that are out of the grass disappear when I mouse over the images, and that is how I knew that you are using the image maps.

Great job!

Best Regards,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
LOL I just realized that someone at Yola marked this as "Not planned" LOL

Well at least the reps can now link to this thread whenever they get asked if a true flash banner can be done with the Yola toolset.

Not planned... LOL too funny...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Okay what do you think about the site with the little addition to the background?

Wait for it to appear...

Kinda like a website within a website if you have your computer set to 1920x1200 resolution.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thank you to whoever visited from South Africa 40 minutes ago... I used Click Tale and was able to see the screen as you did and noticed the branch on the right not all the way to the right of the screen. That is being remedied as I type... Thanks to the anonymous surfer from SA...

Boy is that program cool.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
I think that I might be done with my edit for now. Do you think that I am done? LOL
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, I think those clouds look great! Here is what I see when I view your site (I have a big screen so I think it looks like it should look right to you):



But all of a sudden I refreshed the page and now this is what I see:



Just wanted to let you know, you probably already know about it.

Thanks,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks a bunch for the sceenshots Nathan. They are a big help.

The disappearance of the menu and the footer is because there was too much flash action loading at the same time. I was kinda working on that problem but decided to take a step back. That was until your screenshots.

I have been debating the flash menu on the left with the images because it was almost 300kb (and the reason for the slowness) but at the time I had no way to lock a mouseover menu in to the left of the screen without a flash file. Yesterday I began the graphic work on an imagemap menu with mouseovers which took me hours to design and then hours to get it just working in all browsers where it is on the left of the screen and then hours more trying to get every object from the following image positioned perfectly (in all browsers) Don't want to go through that again anytime soon. It truly is amazing to sit here and think to myself... Did I do that? LOL I have to chuckle because I was saying to myself often "That's hot" and That's awesome" a lot.



So I got rid of the flash menu to the left and in its place have a fun and interactive sign menu that is amazingly an imagemap and once loaded does not flicker like the flash one.

Then again it's amazing what this one line of code can accomplish in the right place.

style="display:block; position:absolute; width:210px; height:926px; top:100px; left:-5px;"

Heck, I even went so far as to make an imagemap pop-up bear in the shield banner which was a pain to get right but a joy to see work right.

Making the transparent honey really was fun and adds that that realistic touch. LOL, I can watch the clouds go behind the honey for hours... Okay not hours but it is cool to watch.

Try left clicking on the bee up top to catch him. It's almost like it's poking fun at the kid being in his face and so close to the net. Way cool...

The flash banner background I reduced the number of clouds to free up resources and the big fluffy cloud background got down to under 5KB... That's crazy... Only 5KB.

All in all, I created some 2 GIG of files today with just the little bit that I did. Crazy amount of graphic an flash work.

Take a look at the picture and realize that all that is in one Text Widget... LOL imagine how fast I can add that to my other pages when I need to update next.

Thanks again for the screenshot and when I recover (mouse hand hurts) I might share some info on how I did some stuff.

Oh and by the way... LOL I knew about the little disturbance of the grass being a tell that the images were different. I was in a rush at the time to edit the copyright date and knew that I was gonna redo them soon anyway so I didn't think that anyone would notice. Who knew that it would be you. LOL Funny... I took it off the site and it is in the shop for repairs.

And to think, I only got one vote in the HP laptop Facebook voting and that was me... LOL

Gonna take a quick nap before I start my day...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, no problem. And that is amazing the way you changed that menu into a non-flash one! It looks great!

Your new design you just did is GREAT! I like how the logo for your site gets bigger when you hover over it!

I just wanted to point out a problem (just a small CSS positioning problem) on your site. That flash bee hive on the side of your site is positioned to far to the right and it makes an extra scroll bar at the bottom of the page. Here I will shoe you 2 screen shots, one of how the page look when it loads, one after I scroll over on the scroll bar at the bottom so you can see how the flash bee hive is over a little too far.

How it looks when the page loads


How it looks after I scroll to the right all the way (at the bottom)


You see it? The branch to it is over too far and thats why it causes a scroll bar to appear at the bottom.

If you raised the number of pixels/percentage it is over from the right it will be fixed.

I also like how there is now honey dripping too! It looks nice :)

One more thing, I like that new image that you made for the man at the bottom-right side of the screen with the chat box saying "These bees like to play games..."

And I just noticed how when you click on the tips of the grass at the bottom it moves, great job!

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
It had to be you pointing out that as well. LOL That was on my to do list after getting back from the hospital but seeing as how you pointed it out I cannot have anyone else see it. LOL If it were as simple as just changing positioning I would have done it earlier. It had to do with a number of variables and the branch was in fact (as of the other day) not as long but as I could not repair the other problems so soon I extended the length and filled in the gap. Thus is why it was wider than the page.

The beehive is in fact wider than it appears and is so because of the back and forth movement when moused over. Trying to hide the unseen was but one problem the others were more in depth.

Thanks for being the ever perfectionist and pointing them to lite a fire under my rear end. It is corrected as of now... LOL

Really good eye you have there young man...Thanks for the fire...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Ed. Did you know you can just hide the whole bottom scroll bar all together? If you want the CSS for that let me know.

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks but your match lit my fire and I don't require the need anymore.

Okay Nathan some of the very last steps to building any fun and good kid friendly website is to add a little cartoony sound effects and a few games for them to play. While I haven't got the games entirely figured out the sounds are there... ;) What do you think? I only wish that the load was a little quicker but they are good enough for me...

http://www.honeybearplayhomes.com/
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, I think that those new branches looks very good. Awesome job, your site is so professional!

I am linking to your site on mine deffinitely! Do you have a specific image for the image-ad for my site? I think it is a bear head, just I need the HTML code for it. I am creating a new website (It's called Free Scripts & HTML Codes) and right now it looks great. I have a nice feedback that pops up from the bottom and it uses JS to verify it, and it is really, really cool. I will post a URL here on the Yola Forum when I get it done because it will have lots of HTML Codes, Scripts, CSS, and Tutorials and I am hoping it will help lots of people out! If you want to request a code to be put on there or suggest a code you can do that too! I have a form that pops up in a modal box to request a code. I will be putting a link to your site on there! It will be towards the bottom and it will have other websites too. I will also have a link to your site on the Credits page because of all of the other codes you have provided (even though they aren't on this new site I am still putting your site on there!).

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Nathan... Long story on the branches. I had spent the last week looking through every paid and free clip art company out there and couldn't find a one only to remember the trees that I found for my animated footer were still on my computer from last year. Same goes for the speech bubble. I wasted 4 hours until I found the very ones I used for the footer.

I turned some trees into branches and they look truly cartoon-like which is the look that I was going for the whole time. A site that any parent would show to their children and any child would spend more than a few minutes on before getting bored.

LOL, I added some sound effects and even lent my voice to the ranger. Once I get over this cold I will re-record to make him sound better. He kinda sounds like Forest Gump right now but I will work on it. LOL

I tossed him on the new "home" sign to get him into view more and give him the appearance of going after the honey. Man do I love layering objects...

Truthfully, I have been looking at the site so much so that I don't or cannot tell if it looks professional enough to fool people into thinking that it wasn't done by a pro.

I am glad that you like it. It is always a good thing to hear.

If you give me the week, I will have an animated flash banner (no larger than 200x200px) done by the end of the weekend. Shouldn't be any larger than 30-50KB

I cannot wait to see your new site. Sounds very interesting...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed! I like the sound effects when you hover over the elements on your page! Great job!

Did you use flash for the voices?

LOL, you're right, the voice does kind of sound like Forrest Gump! (I hope you get better soon, though)

You really do a good job on your site! Keep up the terrific work on your site! That bee hive on the side makes me laugh every time I hover over it. It is funny.

I like all of the cartoon images on your site, I think they go with your site and style you are using. It looks and goes great together.

I am also excited to get my site done. I still have to add more HTML tutorials and stuff but I have some cool jQuery fading effects on there and the feedback form really will catch your attention because it slides up from the bottom of the screen into view and then it says how do you like the fading effect and stuff like that.

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Actually those were under ten dollars worth of wav files set to go off as a mouseover on the imagemaps. Wish they were going off at the same time as the image change but no matter if I edit the sound to delete dead space or load them before the image switch it still comes out as after the image. I won't bother with that though as it is not a huge issue right now.

I just added a $1 dollar sun to top it all off. Crazy effect... Maybe I will put a smiling face on it tonight. I will just do a png overlay of eyes and a mouth like the sun in the footer to tie it all together.

Let me know if you ever need any creative flash work done.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
A flash banner with an imagemap house which light up when moused over you say? How cool is that??? LOL

Looks way cool if you asked me... I am still grinning at the sight of it. I think that it looks best at max resolution to see the entire site at once.

I did a smile and added it to the flash sun and now he is smiling too...

http://www.honeybearplayhomes.com/

I jeep tryin to think of how I can make a dark mass walk around inside the house. I could do it with a few different coordinates and images but maybe that would be too freaky looking.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
What do you call an imagemap mouseover under a website?

I call it done...

Scroll all the way to the bottom and then some. ;) Man, that bear sure has some crazy plans.

It's like a website under a website. Hmmm, I think that could be next for me... LOL

I can sit and watch the clouds move between the sun and foreground objects for hours. Man did everything turn out far better than I ever expected. Like a baby's daddy, I couldn't be prouder. There are mouseovers and interaction everywhere which I hope will keep the visitors occupied and interested. This has truly been a great update.

I should enter a contest or something. LOL Got one vote and that was mine... LOL

That's all folks...

Thanks everybody for all your input and opinions. It surely helped me a great deal along the way. ;)
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Wow! It looks excellent - well done :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow Ed! Nice job! :) That is totally awesome the way you put that under the website!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Justine and Nathan... I will look back at this in six or more months and because my brain doesn't retain info/memories like it once did (seizures) I will have to relearn how to do it all again. Kinda like that movie "50 first dates"

Makes it new every time ;) Harder, but new.

LOL I updates since you last looked Nathan to add a honeypot to Mr. Honeypot...

I think that I set the record for new stuff done with Yola for some time but my fav still has got to be the house lights. Stuff that makes you go "Huh"
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Six months time!... what's that supposed to mean? Does that mean you are doing the disappearing act again? You think your site is finished? You may as well put a "under construction" sign up ;-) What's with the Bear in a Bee outfit?
C'mon, get real... you've still got lots to do ;-)))
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
What? I just meant that in six months I will only remember doing 20% of what I did today and if I rebuild my site again it will be with a clean hard drive so to speak.

This update I had to reteach myself to do imagemaps and you of all people know how fun that can be to get right. Especially when you have 12 separate maps on one page and the coding has to be spot on or they conflict with each other.

I basically had to learn all over again how to do flash and even object positioning. Man did the margin settings rock though and save a bunch of time.

Bear in the bee outfit? What's that crazy bear up to now? I gotta see this... ;)

Boomer I got one vote... Wonder if I am in the running? LOL
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Phew! ... You almost gave me another heart attack! As far as imagemaps go, I used to dream in "imagemaps". They were nice dreams though, LOL. Haven't done any for a while. Guess I'll also have to relearn them from scratch when I do.

Your site is looking fantastic as usual. Don't worry about the one vote man. You would have got mine if I didn't waste it on some other site when I was playing around. Besides, if it were a real website building contest (as opposed to a popularity contest), you would have had thousands of votes by now.

On a more serious note.. since you added the Bear (in the bee outfit) your site does not load fully for me. The progress bar hangs at about 99% (FF). I've tried it several times with the same result. Maybe some other users can confirm this?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Sorry chief writing an email so I cannot reply in detail... The other day I reduced the size of the beehive and both images of the bear to be half the width of the site (around 400px) so if it is any wider then you might have to clear your cache and reload as it might have the older and much larger one although I tend to think that it might be the "Addthis" buttons or "Getclicky" as their JS files get hung up more times than I would like. I plan to revert back to the "Sharethis" buttons later if they can get the bug worked out of the one that I like.

Thanks and I will take a closer look at the bears code once more.

Gotta finish the email... Sorry...

Oh and after I realized that the sharing with my friends button on FB failed it was too late to even try to get a vote. So here I sit with a 10 year old notebook that melts batteries if you put one in (literally burned my lap once ouch) so I have to keep it plugged in all the time which killed 2 fans as well as killed the bargain basement hard drive. Funny thing is, that I seldom use the eight key anymore because it seldom works and the backspace key has been re-tasked to the "page up" button as well I will wake up to a ringing and have to slide my hand accross the keyboard to unstick one of the other keys. But... I did build one cool website on a computer that is on life support so there is that. ;)

Okay, hours later I took it outside and used the compressor on the keyboard and the 8 key got unstuck so I'm all good for now. ;) See, happy thoughts. ;)