ባነር HTML5- የዘፈቀደ HTML ይዘት ወይም ምስል የሚያሳይ ባነር። የኤችቲኤምኤል ኮድ ከቅጦች እና ስክሪፕቶች ጋር መደበኛ የኤችቲኤምኤል ገጽ ሊሆን ይችላል። በ iframe ውስጥ የተቀመጠ እና የጣቢያው ይዘት የተወሰነ መዳረሻ አለው.

የ"ባነር HTML5" አብነት በመጠቀም ባነር በሁለት መንገዶች መጨመር ይቻላል፡-
1. ምስሉን ብቻ በማዘጋጀት. በባነር መለኪያዎች ውስጥ የሚሄድ አገናኝ መኖሩ የምስሉን ጠቅታ ይቆጣጠራል።
2. በመመሪያው መሰረት የኤችቲኤምኤል ፈጠራን በአርታዒው ውስጥ በማዘጋጀት: ወይም.
ሁለቱም HTML ኮድ እና ምስል ወደ ባነር ከተጨመሩ የኤችቲኤምኤል ኮድ ይታያል።

ወደ ADFOX ሲታከል መለኪያዎች ተዋቅረዋል፡-
- ስፋት ፣ የሰንደቅ ዓላማው ቁመት።
- ለባነር መያዣው የራስ css ቅጦች።

የኤችቲኤምኤል ፈጠራ ልማት

1. እራስዎን በደንብ ያስተዋውቁ HTML ኮድ መስፈርቶች

• የሚፈቀደው ከፍተኛው የኤችቲኤምኤል ፋይል መጠን 65,000 ባይት ነው።
• በባነር HTML ኮድ ውስጥ ጃቫ ስክሪፕት እና ሲኤስኤስ ማስቀመጥ ተመራጭ ነው። የተገኘው የኤችቲኤምኤል ኮድ ከሚፈቀደው ከፍተኛ መጠን በላይ ከሆነ ጃቫስክሪፕት እና ሲኤስኤስን ወደ ተለያዩ ፋይሎች በማንቀሳቀስ ኮዱን መቀነስ ያስፈልግዎታል።
  - js እና css ኮድ ከቅጥያው .js ወይም .css ጋር ወደ ተለያዩ ፋይሎች ያስቀምጡ;
  - የፋይሎች ክብደት ከ 300 ኪባ መብለጥ የለበትም;
  - ፋይሎቹን ወደ የማስታወቂያ ዘመቻው "ፋይሎች" ትር ይስቀሉ እና የተገኙትን አገናኞች በኤችቲኤምኤል ኮድ ውስጥ ወደ ፋይሎች ያካትቱ።

  js እና css ፋይሎችን የማገናኘት ምሳሌ፡-

  የኤችቲኤምኤል ኮድ አንጻራዊ የፋይል መንገዶችን መጠቀም አይፈቅድም።

• አንድ ፕሮጀክት የ.html ቅጥያ ያለው አንድ ፋይል ብቻ ነው ሊይዝ የሚችለው።
• በፕሮጀክት ውስጥ የሚፈቀደው ከፍተኛው የፋይሎች ብዛት 50 ነው።
• በፕሮጀክቱ ውስጥ የተፈቀዱ የፋይል አይነቶች፡- css፣ js፣ HTML፣ gif፣ png፣ jpg፣ jpeg፣ svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• የእያንዳንዱ ፋይል ከፍተኛ መጠን (በማህደሩ ውስጥ ባሉ ፋይሎች ላይም ይሠራል)
  - 300 ኪ.ባ;
  - ለቪዲዮ ፋይሎች 1 ሜባ.
• የፋይል ስሞች የእንግሊዘኛ ፊደላት ቁጥሮች ወይም ፊደሎች እና የስር ቁምፊ ብቻ መያዝ አለባቸው። በፋይል ስም ውስጥ የሩሲያ ፊደላትን, ቦታዎችን, ጥቅሶችን እና ልዩ ቁምፊዎችን መጠቀም አይፈቀድም;
• በተለዋዋጮች እና ነገሮች ስም የሩሲያ ፊደላትን መጠቀም አይችሉም.
  ልዩነቱ በባነር ላይ ያለው ጽሑፍ ነው።
• የተጠናቀቀው ፕሮጀክት ቅርጸት - ዚፕማህደር.

የምስል መስፈርቶች

ከፍተኛ ጥራት ያላቸውን ምስሎች ተጠቀም፣ ይህ ባነር የመጫኛ ፍጥነትን የሚቀንስ ቢሆንም በሞባይል መሳሪያ ላይ ያለውን የሰንደቅ አላማ ጥራት በእጅጉ ያሻሽላል።

የ SVG ምስሎችን መጠቀም ይችላሉ. እነሱ ቬክተር ናቸው, ይህም ማለት በሁሉም መሳሪያዎች ላይ የተሻሉ ሆነው ይታያሉ - ሞባይል እና ዴስክቶፕ. እንዲሁም ትንሽ የፋይል መጠን አላቸው እና ሊነሙ ይችላሉ።

ተቀባይነት ያላቸው የምስል ቅርጸቶች፡ png፣ gif፣ jpg፣ svg.
የአንድ ፋይል ከፍተኛ ክብደት፡ 300 ኪባ

2. የእርስዎን ኤችቲኤምኤል ፈጠራ የሚያዳብሩበትን አርታኢ ይምረጡ እና ተገቢውን አገናኝ ጠቅ ያድርጉ። በመመሪያው መሰረት የኤችቲኤምኤል ፈጠራ ያለው ማህደር ያዘጋጁ፡-

አዶቤ አኒሜት ሲሲ አርታዒ - ነጠላ አዝራር ባነር

አዶቤ አኒሜት ሲሲ አርታዒ - ባለብዙ አዝራሮች ባነር

1. ከበርካታ አዝራሮች ጋር ለባነር አብነት ያውርዱ

2. በAdobe Animate ውስጥ HTML5 የሸራ ፕሮጄክት ይፍጠሩ (ወይም ያለውን ይክፈቱ)

3. በአንድ ትዕይንት ውስጥ የተካተቱ አዝራሮችን ወይም የፊልም ቅንጥቦችን ሲጨምሩ ለእነሱ መስጠት አስፈላጊ ነው። ምሳሌ ስም, ከዚያም በተፈለጉት አዝራሮች ላይ ጠቅ ማድረግ እንዲችሉ. ስሞችን እንዲጠቀሙ እንመክራለን አዝራር 1 - አዝራር9.

በተጨማሪ ይመልከቱ፡

አዝራር ለማከል እና የአብነት ስም ለመመደብ መመሪያዎች

በዋናው መድረክ ላይ ያለው አዝራር

1. በቦታው ላይ አንዳንድ ነገሮችን ይፍጠሩ፣ ለምሳሌ፣ የሬክታንግል መሳሪያን በመጠቀም።
ከዚያ ይምረጡት እና ከአውድ ምናሌው "ወደ ምልክት ቀይር..." ን ይምረጡ

2. በሚታየው የንግግር ሳጥን ውስጥ ይተይቡ: አዝራርን ይምረጡ, ስም ሳይለወጥ ሊቀር ይችላል, እሺን ጠቅ ያድርጉ.

3. ጠቅታው እንዲሰራ ለዚህ አዝራር ምሳሌ ስም ይስጡት።

4. በድርጊት ውስጥ የዚህን ቁልፍ ኮድ ይፃፉ፡-

Window.buttons.push (// በነጠላ ሰረዞች የሚለያዩትን የአዝራሮች መንገዶችን ይፃፉ ፣ ይህንን መጀመሪያ ላይ ይጨምሩ ። አዝራር 1 // ለአዝራሮች የቦታ መጨረሻ);

የተከተተ አዝራር

1. አዝራሩ በሌላ ምልክት ውስጥ ነው፣ ለምሳሌ በፊልም ክሊፕ ውስጥ ነው እንበል።
በዚህ ምሳሌ፣ ይህ የፊልም ክሊፕ “ስም” የሚል ምሳሌ ተሰጥቶታል።

2. ሁለቴ ጠቅ በማድረግ፣ ወደ ውስጥ ስም ግባ፣ የተከተተ አዝራር ይኖራል።

3. በድርጊት ውስጥ ወደ እንደዚህ ያለ ቁልፍ የሚወስደውን መንገድ ሲገልጹ ፣ ከተሰቀለበት ነገር በኋላ የነገሩን ምሳሌ ስም ማከል ያስፈልግዎታል ።

Window.buttons.push (// በነጠላ ሰረዞች የሚለያዩትን የአዝራሮች መንገዶችን ይፃፉ ፣ ይህንን መጀመሪያ ላይ ይህ ስም.አዝራር1 // ለአዝራሮች የቦታ መጨረሻ) ይጨምሩ ።

ግልጽ አዝራሮችን ለመፍጠር መመሪያዎች

1. የሚፈልጉትን አካል ይምረጡ እና ወደ ምልክት ይለውጡት።

2. ስም አስገባ እና አይነት፡ የሚለውን ምረጥ

3. ወደ እሱ ለመሄድ ምልክት ላይ ሁለቴ ጠቅ ያድርጉ፡-

4. በተመታ ፍሬም ውስጥ የቁልፍ ክፈፍ አስገባ

5. የላይ፣ በላይ፣ የታች ክፈፎች ይዘቶችን ያስወግዱ

6. ግልጽነት ያለው አዝራር ዝግጁ ነው፡-

4. በፕሮጀክቱ ላይ የእርምጃዎች ንብርብር ያክሉ (ለእሱ የአዝራሮች ኮድ እንጨምራለን)

5. ኮድ ለመጻፍ መስኮት ይክፈቱ

Window.buttons.push (// በነጠላ ሰረዝ የተከፋፈሉ የአዝራሮች መንገዶችን ይፃፉ ፣ ይህንን በመጀመርያ // ለአዝራሮች የቦታው መጨረሻ ላይ ይጨምሩ); setAdfox ();

ቁልፉ በዋናው ትዕይንት ውስጥ ከሆነ ፣ ከዚያ በኋላ ወዲያውኑ የምሳሌውን ስም ይፃፉ ፣ ለምሳሌ

ይህ.አዝራር1

ቁልፉ በተሸፈነ ትዕይንት ውስጥ የሚገኝ ከሆነ ከዚያ በኋላ በመጀመሪያ የትእይንቱን ምሳሌ ስም እና ከዚያ የአዝራሩን ምሳሌ ስም ይፃፉ፡-

ይህ.ትዕይንት_አጋጣሚ_ስም.አዝራር2

በድርጊት ንብርብር ውስጥ ያለው የመጨረሻ ኮድ ምሳሌ፡-

Window.buttons.push (// በነጠላ ሰረዞች የሚለያዩትን የአዝራሮች መንገዶችን ይፃፉ ፣ ይህንን ያክሉ ። አዝራር 1 ፣ ይህ. ትዕይንት_ኢንስታንስ_ስም.button2 // መጀመሪያ ላይ ለአዝራሮች የቦታ መጨረሻ); setAdfox ();

7. በኮዱ መስመር ላይ ያለው የመጀመሪያው አዝራር የመጀመሪያውን አገናኝ ከ ADFOX ይደውላል, ሁለተኛው ሁለተኛውን ይደውላል, ወዘተ.

ከኤችቲኤምኤል ፈጠራ ጋር፣ ባነርን ወደ ADFOX የሚያክል አስተዳዳሪ ስለ አዝራሮች እና የአገናኝ ቁጥሮች ግንኙነት መረጃ ያቅርቡ።

8. የሕትመት አማራጮችን ይክፈቱ እና አብነቱን ከመጀመሪያው ነጥብ ያገናኙ እና የተፈለገውን ማውጫ በመምረጥ ፕሮጀክቱን ያትሙ.

9. ፕሮጀክትዎን ካተሙ በኋላ በዚፕ ቅርጸት ያስቀምጡት። ፈጠራዎ ወደ ADFOX ባነር ለመሰቀል ዝግጁ ነው።

ጎግል ድር ዲዛይነር አርታኢ

በአርታዒው ውስጥ ፈጠራዎችን ሲፈጥሩ የዚህ ሰንደቅ ኮድ እንደ መሰረት ሊሆን ይችላል.

አብነት ስክሪፕት ይዟል adfox_HTML5.jsእና ለሽግግሮች እና ለክስተቶች ቆጠራ ትክክለኛ አሠራር መለኪያዎች ስብስብ፡-
% ዋቢ%፣ %ተጠቃሚ1%፣ %ክስተትN%፣ N ከ 1 እስከ 30 ያለው የክስተት ቁጥር ነው።

2. ሂደቱን ጠቅ ያድርጉ።

ሁሉም ክስተቶች በክስተቶች ትር በኩል ለተወሰኑ አኒሜሽን ክፍሎች ተመድበዋል።

በይነተገናኝ አካባቢ አካል ድርጊቶችን ለመጥራት ጥቅም ላይ ይውላል።
ያክሉት እና አንድ ክስተት ይምረጡ በይነተገናኝ አካባቢ → መታ ያድርጉ/ጠቅ ያድርጉ(ወይንም በእንግሊዘኛ እትም "የመታ አካባቢ> ንካ/ጠቅ"።

በ "ብጁ ኮድ" ትር ውስጥ ወደ ጠቅታ ተግባር ጥሪ ይግለጹ.

2.1 አንድ ዝላይ ቁልፍ የሚጠቀሙ ከሆነ፡-

ጥሪ ክሊክ ();

2.2 ብዙ የሽግግር አዝራሮች ካሉ:

CallClick(n);

የት n

2.3 ከአኒሜሽን ያለ ሽግግር ክስተት ማስጀመር ከፈለጉ የሚከተለውን ኮድ ይጠቀሙ፡-

የጥሪ ክስተት (n);

የት n- መጠራት ያለበት የክስተቱ ቁጥር.

የመለጠጥ (የላስቲክ) ባነር አተገባበር ባህሪ.

ስለዚህ ባነር በጣቢያው ላይ በሚገኝበት የእቃ መያዣው ስፋት ላይ በፓነሉ ላይ ይዘረጋል ንብረቶችለቦታ እና ልኬቶች፣ ከፒክሰሎች ይልቅ መቶኛዎችን ይግለጹ።

እንዲሁም አማራጮችን ይጠቀሙ "ወደ መያዣ አሰልፍ"እና "የላስቲክ አቀማመጥ"በላይኛው የመሳሪያ አሞሌ ላይ.
ማንኛውንም የአሰላለፍ መሳሪያዎችን ከመጠቀምዎ በፊት የፈሳሽ አቀማመጥን ካነቁ የወላጅ መያዣውን መጠን ሲቀይሩ ሁሉም ንጥረ ነገሮች እርስ በእርሳቸው እና ከመያዣው ልኬቶች ጋር ይጣጣማሉ።
በዚህ አጋጣሚ ሁለቱንም አንጻራዊ የንጥረ ነገሮች መጠን በመቶኛ እና ፍጹም መጠኖች በፒክሰሎች በአንድ ጊዜ መጠቀም ይችላሉ።

4. የፕሮጀክቱ ህትመት.

ባነር ወደ ADFOX ሲጨምር፣ አስተዳዳሪው የአዝራሮችን እና የክስተት ቁጥሮችን ግንኙነት ማወቅ አለበት። ለእያንዳንዱ ክስተት ሥራ አስኪያጁ ለማሰስ የራሱን አገናኝ ይጽፋል, ከዚያም ተለዋዋጭ በመጠቀም ወደ ባነር ኮድ ይተላለፋል.

ፕሮጀክቱን ካተሙ በኋላ, በቅርጸቱ ውስጥ ያስቀምጡት .ዚፕ. ፈጠራዎ ወደ ADFOX ባነር ለመሰቀል ዝግጁ ነው።

ሌሎች አዘጋጆች

1. በሰንደቅ ላይ ጠቅታዎችን በመቁጠር ላይ

ADFOX ለሰንደቅ በጠቅታዎች ላይ ስታቲስቲክስን ለማስላት በመለያው ላይ ባለው የኤችቲኤምኤል ኮድ እና ለ href ባህሪው ተለዋዋጭ መፃፍ ያስፈልግዎታል።

%banner.reference_user1%

እንዲሁም ለግንኙነቶች፣ በባህሪው እሴት ውስጥ ካለው %banner.target% ተለዋዋጭ ጋር የታለመውን አይነታ ይጠቀሙ።
ባህሪው ከጠፋ፣ አገናኙ በ iframe ውስጥ ይከፈታል፣ ማለትም፣ የማስታወቂያው ጣቢያ በባነር ቦታ ላይ ይከፈታል።

የሰንደቅ ጠቅታዎችን ለመቁጠር የኤችቲኤምኤል ኮድ ምሳሌ፡

የአስተዋዋቂው ድር ጣቢያ

በሞባይል አፕሊኬሽኖች ውስጥ በሚቀመጡ የኤችቲኤምኤል ባነር ኮድ ውስጥ ጠቅታዎችን ለመቁጠር ማክሮውን ይጠቀሙ፡%ማጣቀሻ%@%banner.user1%

2. በባነር ውስጥ ከብዙ አገናኞች ጠቅታዎችን በመቁጠር ላይ

እንበል ባነር የሚከተላቸው በርካታ አገናኞች አሉት፣ ወደ ማስታወቂያው ጣቢያ ወደተለያዩ ገፆች ይመራል፣ እና ለእያንዳንዳቸው የጠቅታዎችን ብዛት ማግኘት ያስፈልግዎታል።

የመጀመሪያ አገናኝ ሁለተኛ አገናኝ

የhref ባህሪ እሴቶችን በተለዋዋጮች ይተኩ %request.ማጣቀሻ%@%banner.eventN%, ከ N ይልቅ የክስተት ቁጥር ከ 1 እስከ 28 መሆን አለበት.
ለምሳሌ፡-

የመጀመሪያ አገናኝ ሁለተኛ አገናኝ

የአገናኞች እና የተለዋዋጮች ደብዳቤዎች ባነርን ወደ ADFOX ለሚጨምር አስተዳዳሪ ሪፖርት መደረግ አለባቸው። ባነር ሲያክሉ የመጀመሪያውን ሊንክ ለዝግጅት 1፣ ሁለተኛውን ደግሞ ለዝግጅት 2 መጥቀስ ያስፈልግዎታል።

በ ADFOX ውስጥ ባነር በማከል ላይ

በ ADFOX ውስጥ ሰንደቅ ለመጨመር የሚፈልጉትን የሰንደቅ አይነት እና አብነት ይምረጡ "ሰንደቅ HTML5".

የሰንደቅ መለኪያዎችን ይግለጹ፡

በ HTML5 ፈጠራ ያከማቹ- ከፕሮጀክቱ ፣ መስክ ጋር የዚፕ ማህደርን ይስቀሉ። "HTML5 የፈጠራ ኮድ"ባዶ መሆን አለበት (ባነር ከጨመረ በኋላ በፕሮጀክትዎ .html ፋይል ይዘቶች ይሞላል)።

HTML5 የፈጠራ ኮድ- በኤችቲኤምኤል አርታዒዎች ውስጥ ከተዘጋጀ ፕሮጀክት ጋር ዚፕ መዝገብ ያውርዱ ወይም የኤችቲኤምኤል ኮድ ይለጥፉ።

በባነር ውስጥ ብዙ አገናኞች ካሉ በትሩ ውስጥ ያክሏቸው ክስተቶችበባነር አቅራቢያ፣ በሽግግር ዩአርኤል መስኮች።
እባክዎ የአገናኞችን ቁጥሮች እና ክስተቶችን ደብዳቤ ለማግኘት ከኤችቲኤምኤል የፈጠራ ገንቢዎች ጋር ያረጋግጡ።

ፒክስልን ለመለካት አገናኝ- ADFOX ፒክሰል በነባሪነት ጥቅም ላይ ይውላል //banners.adfox.ru/transparent.gif, በሶስተኛ ወገን ስርዓት ውስጥ ግንዛቤዎችን መከታተል ከፈለጉ, ADFOX ፒክሰል ይሰርዙ እና የተለየ አገናኝ ይጥቀሱ.

የፈጠራ ስፋት (ፒክሰል ወይም%)- የሰንደቅ አላማውን ስፋት ይግለጹ.

የፈጠራ ቁመት (ፒክሰል ወይም%)- የሰንደቅ አላማውን ቁመት ይግለጹ.

ምስል- ምስል ይስቀሉ.
ፈጠራዎችን ለማሳየት ሁኔታዎች፡-
- HTML ኮድ እና ምስል ታክሏል - HTML ኮድ ይታያል.
- ምስል ታክሏል - ምስሉ ይታያል.
- HTML ኮድ ታክሏል - HTML ኮድ ይታያል.

ባነር መያዣ ክፍል አይነታ ስም- ለባነር መያዣው ክፍል ባህሪ ስም (ወይም በቦታ የተለዩ ብዙ ስሞች) ይግለጹ።

SafeFrame ተጠቀም (አዎ|አይ)- safeFrame ጥብቅ ኤፒአይ ባለው ልዩ iframe ውስጥ ማስታወቂያዎችን የሚያጠቃልል ቴክኖሎጂ ነው። SafeFrame በውስጡ የሚደረጉ ማስታወቂያዎች መረጃን እንዳይሰበስቡ እና ከሴፍሬም ውጭ ከተቀረው ገጽ ጋር እንዳይገናኙ ይከለክላል።
አዎ - የ safeFrame አጠቃቀምን ማንቃት እና የድረ-ገጹን መዳረሻ መከልከል;
አይ - safeFrameን አያንቁ። የሰንደቅ ኮድ ወደ ድረ-ገጹ መዳረሻ አለው።

ባነር የማገጃ ቅጦች- በአንድ መስመር ውስጥ ለባነር መያዣ ብጁ ቅጦች. ከቅጥ በተጨማሪ፡ ማሳያ። ለምሳሌ "ድንበር: 1 ፒክስል ጠንካራ ቀይ;" ልክ ያልሆኑ እሴቶች በአሳሹ ይጣላሉ።

ጓደኞች ፣ ሰላም ለሁላችሁ። ዛሬ በጎግል ድር ዲዛይነር ውስጥ ባነሮችን በ HTML5 ቅርጸት በ3-ል ውጤት መፍጠር እንቀጥላለን።

እና ይሄ ለመረዳት የሚቻል ነው፣ በhtml5 እና css3 የተፈጠሩ ባነሮች በማንኛውም ስክሪን ላይ በኮምፒውተሮች፣ ቴሌቪዥኖች እና ተንቀሳቃሽ መሳሪያዎች ላይ ይታያሉ። ስለ ፍላሽ ባነሮች ተመሳሳይ ነገር ሊባል አይችልም.

በተጨማሪም, እነዚህ ባነሮች በቀላሉ ጥቅም ላይ ሊውሉ ይችላሉ እና ባነር በማንኛውም ስክሪን ላይ ምርጥ ሆኖ ይታያል.

እና የሞባይል መሳሪያዎች የበይነመረብ ሀብቶችን ለማየት ከጊዜ ወደ ጊዜ ጥቅም ላይ የሚውሉ ከመሆናቸው እውነታ አንጻር ይህ በጣም አስፈላጊ ነው.

ቀደም ባለው ርዕስ ውስጥ ዋናውን እና በጣቢያው ላይ ያለውን አቀማመጥ አስቀድሜ ገለጽኩ. ስለዚህ ዛሬ የ 3-ል ተፅእኖ እና የሳይክል (ተደጋጋሚ) ቅንብሮችን ለመፍጠር ትኩረት እሰጣለሁ. እንዲሁም ለ "ክስተቶች" በርካታ ቅንብሮችን እንመለከታለን.

ይህንን አጠቃላይ ሂደት በዝርዝር ለመግለጽ በጣም ከባድ ነው ፣ ስለሆነም የቪዲዮ አጋዥ ስልጠና እሰጥዎታለሁ ። ይህ ቁሳቁሱን ለመቆጣጠር በጣም ቀላል ያደርገዋል. እንዲሁም ማህደሩን በባነር ፕሮጄክቴ እንደ ምስላዊ ምሳሌ አውርድ።

የ3-ል ውጤት ያለው ባነር ለመፍጠር በመዘጋጀት ላይ።

የሰንደቅ ዓላማው የመጨረሻው ገጽታ በዝግጅቱ ላይ የተመሰረተ ነው. የጉግል ድር ዲዛይነር አርታኢ እውነተኛ የ 3-ል ተፅእኖዎችን እንዲፈጥሩ ይፈቅድልዎታል እና ይህ ሁሉ በ html ኮድ ውስጥ ይፃፋል ፣ ሁሉንም ነገር በምስላዊ አርታኢ ውስጥ በትክክል መሰብሰብ ያስፈልግዎታል ።

ከፍተኛ ጥራት ያለው 3D ውጤት ለመፍጠር በመጀመሪያ በፎቶሾፕ ውስጥ ባዶዎችን መቁረጥ ያስፈልግዎታል ፣ ይህም በኋላ ወደ ጎግል ድር ዲዛይነር ውስጥ መቀላቀል አለበት።

እንደ ምሳሌ፣ የሚከተሉትን ባዶዎች አዘጋጅቻለሁ፡-

እነዚህን ባዶ ቦታዎች በፎቶሾፕ ውስጥ አድርጌአለሁ፣ ግን በይነመረብ ላይ ብዙ ተመሳሳይ ምስሎች አሉ። እራስዎን መጫን የለብዎትም, ነገር ግን ዝግጁ የሆኑ አማራጮችን ይውሰዱ.

ማሳሰቢያ: እንደዚህ አይነት ባዶዎችን በመፍጠር ሂደት ላይ ፍላጎት ካሎት በአስተያየቶቹ ውስጥ ስለ እሱ ይፃፉ.

እንዲሁም ስለ አጠቃላይ ባነር ቅንብር እና ስክሪፕት ማሰብ አስፈላጊ ነው. ይህ ባነር በአጠቃላይ እንዴት እንደሚታይ ይወስናል.

በጎግል ድር ዲዛይነር ውስጥ የ3-ል ነገር መፍጠር።

ስለዚህ, ከቀዳሚው ጽሑፍ ጋር በማመሳሰል, አርታዒውን ያስጀምሩ እና አዲስ ፕሮጀክት ይፍጠሩ.

የ3-ል ተፅዕኖው የተዋሃደ ምስልን ማለትም በተፈለገው ትንበያ ውስጥ የሚገኙ በርካታ ቁርጥራጮችን የያዘ ምስልን ያመለክታል።

እነዚህ በርካታ ምስሎች በቡድን ሊጣመሩ ወይም በ DIV ብሎክ ውስጥ መቀመጥ አለባቸው። እና ስለዚህ እና እንዲሁ ትክክል ይሆናሉ. ነገር ግን፣ ከዲአይቪ ጎን ጋር መስራት ለእኔ የበለጠ አመቺ ነው።

ደረጃ 1፡ DIV ብሎክ ይፍጠሩ።

ስለዚህ, DIV ብሎክ ለመፍጠር በግራ ፓነል ውስጥ ይምረጡ "መለያ መስጠት መሣሪያ (መ)".

መታወቂያ መመደብዎን እርግጠኛ ይሁኑ። እና ክፍሉን በመጠቀም መጠኖቹን ያስተካክሉ "Properties"በትክክለኛው ፓነል ውስጥ.

አሁን እገዳውን መምረጥ ያስፈልግዎታል. ይህንን ለማድረግ በግራ ፓነል ውስጥ ይምረጡ "የመምረጫ መሳሪያ (ቪ)"እና በ DIV እገዳው ፍሬም ላይ ያለውን የግራ መዳፊት አዘራር ሁለቴ ጠቅ ያድርጉ። ቀለሙ ወደ ቀይ ይለወጣል.

ደረጃ 2. ምስሎችን ማዘጋጀት.

እና አሁን በጣም አሰልቺው ሂደት ይጀምራል. የአንድ ነጠላ ምስል ሁሉንም አካላት ማጋለጥ ያስፈልግዎታል.

የሚከተሉት እቃዎች አሉኝ፡-

- የላይኛው ጎን.

- ጎን (ሦስት የተለያዩ ክፍሎችን ያካትታል).

በመጀመሪያ የምስሉን ተቃራኒ (የኋላ) ጎን ያስቀምጡ እና ከሰንደቁ መሃል እና የላይኛው ጫፍ ጋር ያስተካክሉት.

የፊት ጎን በተመሳሳይ መንገድ ይጨምሩ. በZ ዘንግ ላይ አሰልፍ እና ቀይር።

የጎን ስፋት 4 ፒክስል (ፒክስል) ስለሆነ የፊት እና የኋላ ጎኖቹን በZ ዘንግ በኩል በ2 ፒክስል እና -2 ፒክስል ቀይሬያለሁ። ይህ በምስሎቹ መካከል ያለውን ክፍተት ያቀርባል.

ማስታወሻ፡ ለትክክለኛው የመፈናቀያ ቁጥሮች ቅጽበታዊ ገጽ እይታውን ይመልከቱ።

በመቀጠል ጎን ለጎን, ሁሉንም ክፍሎች በተናጠል ይጨምሩ. ለቦታ አቀማመጥ ቀላልነት, መሳሪያዎቹን ይጠቀሙ "3D የሥራ ቦታ ማሽከርከር"እና "መጠን". ሁሉንም ዝርዝሮች በትክክል ለማስተካከል ይረዳሉ.

ለመጀመር, ሁሉንም ምስሎች በአንድ በኩል እንዲሰለፉ እጠቁማለሁ, እና ከዚያ ቀድተው በሌላኛው በኩል በመስታወት ትንበያ ውስጥ ያስቀምጧቸዋል.

ቀጣዩ ደረጃ የላይኛው ግራ ጥግ ላይ መደርደር ነው.

አሁን የጎን ማዕከላዊ ክፍል.

እና የታችኛው ጥግ በግራ በኩል.

ሁሉንም የጎን ክፍሎችን በ 90 0 በ Y ዘንግ በኩል ማመጣጠንዎን ያረጋግጡ።

አሁን የተፈለገውን ንብርብር መገልበጥ እና እንደገና መለጠፍ, እንደገና መሰየም እና የአካባቢ መለኪያዎችን መለወጥ ያስፈልግዎታል, ስለዚህ ለትክክለኛው ጎን ንጥረ ነገሮችን እናገኛለን.

ይህንን ለማድረግ ከታች ባለው ፓነል ውስጥ ያለውን ምስል ይምረጡ - የቁልፍ ጥምርን CTRL + C (ቅጂ) ይጫኑ እና የተባዛውን CTRL + V ይለጥፉ.

ልክ እንደ ሜዳው ከላይ ወደ ታች በተመሳሳይ መንገድ እንጀምር, ግን ለትክክለኛው ብቻ.

የላይኛው ቀኝ ሽፋን.

በምስሉ ላይ ስለማይታይ የታችኛውን ክፍል አላደረግኩም.

በጣም አስቸጋሪው ስራ አልቋል. አሁን እነማውን ማዋቀር መጀመር ይችላሉ። እንደ ምስላዊ ማሳያ, ምስሉን እናዞረው.

በጎግል ድር ዲዛይነር ውስጥ የማዞሪያ ውጤት መፍጠር።

የመጀመሪያው እርምጃ ሁሉንም የምስል ክፍሎች ከያዘው DIV ብሎክ መውጣት ነው። ማለትም፣ የተወሰኑ ምስሎችን የያዘ ብሎክ ውስጥ ሰርተናል፣ እና አሁን ከሁሉም ምስሎች ጋር በአንድ ጊዜ የ DIV ብሎክን በማስተዳደር መስራት አለብን።

ለመጀመር ከታች ፓነል ላይ ያለውን የ DIV ቁልፍን ጠቅ ያድርጉ።

ስለዚህ በጊዜው chalet ላይ የቀኝ መዳፊት ቁልፍን ጠቅ በማድረግ ሁለት ቁልፍ ፍሬሞችን ይፈጥራሉ። ይህን መምሰል አለበት።

በ Y ልኬት ላይ ያለው የመጀመሪያው ፍሬም የሚገኝበት ቦታ -90 0 ተቀናብሯል.

የመጀመሪያውን የቁልፍ ፍሬም (ሁለተኛውን) በ Y ሚዛን ወደ 0 0 እናስቀምጣለን.

የሁለተኛውን ቁልፍ ፍሬም (በተከታታይ ሶስተኛ) ወደ 90 0 በ Y ሚዛን ያዘጋጁ።

ውጤቱን ማረጋገጥ ይችላሉ. ይህንን ለማድረግ አዝራሩን ጠቅ ያድርጉ ይጫወቱ.

እውነት ነው፣ የእኛ ምስል አንድ አብዮት ብቻ ያደርጋል። ምስሉ ያለማቋረጥ እንዲሽከረከር ወይም ብዙ አብዮቶችን እንዲያደርግ, የብስክሌት መለኪያዎችን ማዋቀር ያስፈልግዎታል.

በጎግል ድር ዲዛይነር ውስጥ ብስክሌት መንዳትን ማዋቀር።

ፕሮግራሙ በርካታ የሳይክል (ድግግሞሽ) አማራጮችን እንዲያዋቅሩ ይፈቅድልዎታል. በዚህ መንገድ ለሁሉም ባነር ኤለመንቶች ወይም ለእያንዳንዱ አካል መድገምን ለየብቻ ማዘጋጀት ይችላሉ።

እንዲሁም ዑደቱን ወደ ድግግሞሽ ብዛት መወሰን ወይም ማለቂያ የሌለው ማድረግ ይችላሉ።

ከታች ባለው ፓነል ላይ ከእያንዳንዱ ኤለመንት ቀጥሎ ምልክቶች አሉ "ቤተመንግስት"፣ "አይን"፣ "ተገላቢጦሽ ቀስት".

ስለዚህ, ዑደቱን ለማዋቀር ምልክቱን ጠቅ ማድረግ ያስፈልግዎታል "ተገላቢጦሽ ቀስት".እና ወይ የተወሰነ ድግግሞሽ ወይም ማለቂያ የሌለው አማራጭ ይምረጡ።

አኒሜሽኑን ያለማቋረጥ መድገም መረጥኩ። ምክንያቱም ወደፊት ማዋቀር እፈልጋለሁ "ክስተቶች"ስለዚህ ማዞሩ አይጥ ሲያንዣብብ ይቆማል እና ጠቋሚው ከተወገደ በኋላ ይቀጥላል።

አይጤውን በባነር ላይ ሲያንዣብቡ ማሽከርከር ያቆማል።

በመጀመሪያ ደረጃ, በመጀመሪያው ቁልፍ ፍሬም ላይ አቋራጭ እናዘጋጃለን (በተከታታይ ሁለተኛው). ይህንን ለማድረግ ከክፈፉ በላይ በቀኝ ጠቅ ያድርጉ እና የምናሌውን ንጥል ይምረጡ "አቋራጭ ጨምር". የአቋራጩን ስም አስገባ እና አስገባን ተጫን።

እና በሚቀጥለው ደረጃ እንደ ተቀባይ ይመርጣሉ « ገጽ1". እዚያ ሌሎች አማራጮች አይኖሩም.

እና የመጨረሻው ደረጃ, በመጀመሪያ ደረጃ ላይ የፈጠሩትን አቋራጭ ይምረጡ.

ክስተቶችን ያስቀምጡ እና ያረጋግጡ. ማውዙን አቋራጩ በተሰራበት ፍሬም ላይ ሲያንዣብቡ የባነር ማሽከርከር ይቆማል።

የመዳፊት ጠቋሚውን ካነሱ በኋላ የማዞሪያው ዳግም መጀመር።

ጠቋሚውን ወደ ጎን ካዘዋወሩ በኋላ ማዞሩ እንዲቀጥል ለማድረግ, ሌላ ክስተት ያዘጋጁ.

እሱ ከቀዳሚው ጋር በተመሳሳይ መልኩ የተዋቀረ ነው ፣ በሁለት ልዩነቶች ብቻ።

ክስተቱ ተመርጧል "አይጥ"— « ማውዙ".

ክስተት - የመዳፊት መመለስ

እና እንደ ተግባር "የጊዜ መስመር" — « ተጫወት".

እርምጃ - ቀጥል

አሁን የእኛ ባነር በ3-ል ውጤት ዝግጁ ነው። እና የፈለጉትን ያህል የተለያዩ ተፅእኖዎችን ይዘው መምጣት ይችላሉ።

ለመዳፊት ጠቅታ እና አገናኝ ለመክፈት አንድ ክስተት ማዘጋጀትዎን አይርሱ። ባነር የተፈጠረው ለውበት ሲባል አይደለም አይደል?

መጀመሪያ ላይ, ይህ ሂደት የተወሳሰበ ሊመስል ይችላል, ነገር ግን ከሁለት ባነሮች በኋላ, ከእንግዲህ አያስቡም.

ዛሬ ለኔ ያ ብቻ ነው ወዳጆች። ሁላችሁንም ስኬት እመኛለሁ, አስተያየቶችዎን በጉጉት እጠብቃለሁ እና በአዲስ መጣጥፎች እና የቪዲዮ ትምህርቶች ውስጥ እንገናኝ.

ከሠላምታ ጋር, Maxim Zaitsev.

በይነመረቡ በማስታወቂያ ተሞልቷል። በብዙ ድረ-ገጾች ላይ ይህ ለቅጥነት ብሩሽዎች ለዓይን የሚስብ ማስታወቂያ ነው፣ በሌሎች ላይ Yandex.Direct ወይም Google AdSense ነው። እና በአንዳንዶቹ ላይ ብቻ በመልካቸው ተጠቃሚዎችን የማያናድዱ ውብ ባነሮችን ማየት ይችላሉ። ከግምገማዬ ያለምንም የመጀመሪያ ችሎታ እራስዎ የሚያምር HTML5 ባነር እንዴት መፍጠር እንደሚችሉ ይማራሉ ።

bannersnack ኤችቲኤምኤል 5 እና ፍላሽ ባነር የተለያዩ ቅርፀቶችን ለመፍጠር የመስመር ላይ አገልግሎት ሲሆን ይህም ከምስል አርታዒዎች ጋር ለመስራት የኮድ እውቀት ወይም ክህሎት አያስፈልገውም።

አገልግሎቱ ሁለት አይነት ባነሮችን ለመፍጠር ያቀርባል፡ መደበኛ ባነር ወይም ገጹ ሲጫን የዘፈቀደ ባነር። እንዲሁም banernackን በመጠቀም የማስታወቂያ ዘመቻዎን በጎግል ወይም ፌስቡክ ላይ ማስጀመር ይችላሉ። ግን መጀመሪያ ነገሮች መጀመሪያ።

ባነር ሰሪ

የመጀመሪያዎን ባነር መፍጠር የሚችሉት በዚህ ክፍል ውስጥ ነው። አገልግሎቱ በኤችቲኤምኤል 5 ወይም በፍላሽ ቅርጸት ባነር ያቀርባል። ሁሉም ሰው ፍላሽ ለመግደል እየሞከረ ስለሆነ፣ HTML5 አርታዒን እገልጻለሁ።

ጠንቋዩን ሲጀምሩ ብዙ ዝግጁ የሆኑ አብነቶች ወዲያውኑ ይቀርባሉ፡-

እርግጥ ነው, ከባነር ላይ ባነር ለመፍጠር እድሉ ፈጽሞ አይጠፋም. በጠንቋዩ አናት ላይ የወደፊቱ ባነር መጠን ይጠቁማል-

አንድ መጠን በሚመርጡበት ጊዜ, ንድፎቹም ይለወጣሉ. የእራስዎን ከመግለጽ ይልቅ ለተወሰነ መጠን ቅድሚያ መስጠት የተሻለ ነው, ምክንያቱም በመጨረሻ ባነር መክሰስ እንደዚህ አይነት ባነር ለመፍጠር እምቢተኛ ሊሆን ይችላል.

ባነርዎን ሲፈጥሩ የሚከተለው አርታኢ ይከፈታል፡-

በግራ በኩል የሁሉም ባነር ስላይዶች ዝርዝር አለ, እያንዳንዱም የራሱ የሆነ ምስል እና ጽሑፍ ይኖረዋል. ከላይ በኩል ሰንደቅ ለመፍጠር የሚረዱ መሳሪያዎች ናቸው, በቀኝ በኩል ደግሞ የንብርብሮች ባህሪያት ናቸው.

እንደ ባነር የራስዎን ስዕል ፣ ጽሑፍ ፣ ቁልፍ ፣ ቅርፅ ወይም ቪዲዮ ማከል ይችላሉ ። ምስል እና አዝራር ጨምሬያለሁ፡-

ማንኛውንም አካል ሲመርጡ ብዙ አብነቶች ይቀርባሉ፣ ነገር ግን፣ እንደ ሁልጊዜው፣ የመጨረሻው አባባል የእርስዎ ነው፡-

እያንዳንዱ ንብርብር ሦስት የንብረት ትሮች አሉት። በገጹ ላይ ያለው አቀማመጥ ፣ ቀለም ፣ ቅርፅ ፣ ወዘተ.

ንብርብር ላይ ጠቅ በማድረግ እርምጃ ይውሰዱ፡-

ወደ ቀጣዩ ስላይድ ወይም አገናኝ ሽግግርን መግለጽ ይችላሉ.

ስላይድ ሲቀይሩ እነማ ባህሪያት፡-

ባነርህን አርትኦት እንደጨረስክ በቀላሉ አስቀምጥን ጠቅ አድርግና ለባነርህ ስም ምረጥ፡-

ከዚያ ወደ ጣቢያው ለማስገባት ኮድ ያላቸው ሁሉም ባነሮችዎ ዝርዝር ይከፈታል፡

በባነር መክሰስ ጣቢያ ላይ ባነር ሲቀይሩ በጣቢያዎ ላይም እንደሚዘምን ልብ ሊባል ይገባል። የተከተተ ኮድ እንደገና መቅዳት አያስፈልግም።

ባነር ሮታተር

እዚህ፣ ገጹ ሲጫን በዘፈቀደ የሚጫኑ የማይንቀሳቀሱ ባነሮች ተፈጥረዋል።

ጠንቋዩ አስቀድሞ ከተፈጠሩ ባነሮች ለመምረጥ ወይም አዲስ ለመፍጠር ያቀርባል፡-

የራስዎን ምስል ሲያክሉ፣ የሽግግሩን ዩአርኤል ብቻ ነው መግለጽ የሚችሉት፡-

ከዚያ የቀረው ሁሉ የተክተተውን ኮድ በጣቢያው ላይ እንደገና ማግኘት ነው፡-

እንደዚህ ነው, በባነር መክሰስ እርዳታ, ልምድ የሌለው ተጠቃሚ እንኳን የራሱን የሚያምር የአሳሽ ባነር መፍጠር ይችላል.

HTML5 ባነሮች

ከ RUB 2,299

RUB

እዘዝ

በአሁኑ ጊዜ HTML5 ባነሮች ለሙሉ አኒሜሽን ባነር ማስታወቂያ ብቸኛው የአሁን ቅርጸት ናቸው። ይህ ሁለንተናዊ የመድረክ-መድረክ ፎርማት በርካታ ገደቦች እና ጉዳቶች የነበሩትን የፍላሽ ባነር ተክቷል።

የዚህ እምቢታ ዋና ምክንያቶች የሚከተሉት ናቸው፡-

• የይገባኛል ጥያቄዎች በፍላሽ ቴክኖሎጂ በኮምፒዩተር ደህንነት መስክ እና በተንቀሳቃሽ መሳሪያዎች የማቀነባበሪያ ኃይል ፍጆታ መጨመር;
• አንዳንድ አሳሾች ፍላሽ በነባሪ ማገድ ጀምረዋል;
• በ iOS ተንቀሳቃሽ መሳሪያዎች (iPhone, iPad), ፍላሽ ማሳያ በአምራቹ አልተሰጠም;
• የፍላሽ ባነር ማስታወቂያ ማገድ ፕሮግራሞች ታዋቂነት;
• በባለቤቱ አዶቤ የፍላሽ ቴክኖሎጂን ተጨማሪ ድጋፍ እና ልማት አለመቀበል።

አኒሜሽን ኤችቲኤምኤል 5 ባነር ያለ ገደብ በማንኛውም አሳሽ ላይ በማንኛውም መሳሪያ ስክሪን ላይ ስማርት ፎኖች፣ ታብሌቶች እና የሚዲያ ቲቪዎችን ጨምሮ ሊታዩ ይችላሉ። ይህ የእነሱ መድረክ እና ሁለገብነት ነው.

ለደንበኛው የኤችቲኤምኤል 5 ባነር መጠቀም ማለት በመጀመሪያ ደረጃ የታዳሚ ሽፋንን ያለምንም ኪሳራ ማስፋፋት ማለት ነው።

HTML5 ባነር ምን ማድረግ ይችላል?

ብዙ። ከሁሉም በላይ, ይህ የተጠቃሚውን ትኩረት የሚስብ እና ከእሱ ጋር እንኳን የሚገናኝ በጣም የላቀ ቅርጸት ነው (በይነተገናኝ ባነር).

ከአኒሜሽን አንፃር፣ እንዲህ ያለው ባነር የቬክተር እነማ (ያለ ስክሊት ኪሳራ)፣ የገጸ-ባህሪያት እነማ፣ ፎቶዎች፣ አርማዎች፣ ግራፎች እና ንድፎች፣ ጽሁፍ እና የ3-ል አኒሜሽን እንኳን ማሳየት ይችላል። በይነተገናኝ እይታ፣ HTML5 ባነር ለተጠቃሚ እርምጃዎች ምላሽ መስጠት እና ተጨማሪ ይዘት እና ባህሪያትን ሊያቀርብ ይችላል። በሚዲያ እይታ፣ HTML5 ባነር ቪዲዮ፣ ስላይዶች እና የድምጽ ቅጂዎችን ማጫወት ይችላል። ምላሽ ሰጪነት፣ HTML5 ባነር በገጹ አጠቃላይ ስፋት ላይ ሊዘረጋ፣ ተጨማሪ ፓነሎችን ሊያሰፋ ወይም ሙሉውን ማያ ገጽ ለመሙላት ሊሰፋ ይችላል።

ዋናዎቹን የኤችቲኤምኤል 5 ባነር ዓይነቶች እንይ።

የታነመ HTML5 ቋሚ መጠን ያለው ባነር።
በአብዛኛዎቹ የማስታወቂያ አውታረ መረቦች ውስጥ በጣም ታዋቂው ቅርጸት። የሚፈለጉት ባነሮች ስፋት እና ቁመት ለምደባ ከተቀበሉት ዝርዝር ውስጥ ተመርጠዋል። በጣም የተለመዱትን መጠኖች ሁልጊዜ እንጠቁማለን.

HTML5 ባነር በመዘርጋት (ምላሽ ሰጭ፣ ላስቲክ)።
ይህ የስክሪኑን አጠቃላይ ስፋት (አንዳንድ ጊዜ ቁመት) ለመያዝ ሊዘረጋ የሚችል ባነር ነው። (ተጨማሪ ዝርዝሮች በዚህ ጽሑፍ ውስጥ ይገኛሉ)

ባለሙሉ ማያ HTML5 ባነር።
ሙሉ ስክሪን የሚከፍት ባነር። እንደ ደንቡ, የማሳያ ሰዓት ቆጣሪ እና "ዝጋ" ቁልፍን ይዟል. በተለይ በሞባይል መሳሪያዎች ላይ ለእይታ ታዋቂ.

ብዙውን ጊዜ እንዲህ ዓይነቱ ባነር የተለያዩ አቅጣጫዎችን እና የተንቀሳቃሽ መሣሪያውን ጥራቶች ግምት ውስጥ በማስገባት ተስማሚ መሆን አለበት.

ሊሰፋ የሚችል HTML5 ባነር (ሊሰፋ የሚችል)።
መጀመሪያ ላይ እንደዚህ ያለ ባነር (ቲዘር) የመነሻ ፓነል ብቻ በስክሪኑ ላይ ይገኛል. የተሰጠው ስልተ-ቀመር ሲተገበር (የመዳፊት ማንዣበብ ወይም ጠቅ ማድረግ ፣ በገጹ ላይ የሰዓት ቆጣሪ ወይም ሌሎች ክስተቶች) የሰንደቅ ዓላማው ሁለተኛ ክፍል ተጨማሪ በተስፋፋ መረጃ ይከፈታል።

HTML5 ቪዲዮ ባነር

በማስታወቂያው መድረክ ቅንጅቶች እና መስፈርቶች ላይ በመመስረት ቪዲዮን በራስ-ሰር ማስጀመር ወይም "አጫውት" ቁልፍን ከተጫኑ በኋላ ማሳየት ይችላል። መቆጣጠሪያ እና ድምጸ-ከል አዝራሮችን ሊይዝ ይችላል። የቪዲዮ ፋይሉ ብዙውን ጊዜ በውጫዊ አስተናጋጅ ላይ የሚገኝ ሲሆን በሚታይበት ጊዜ ይወርዳል።

የጨዋታ መስተጋብራዊ ባነሮች።
ቀላል ተግባራትን በማከናወን ተጠቃሚው ጨዋታውን እንዲቀላቀል የሚያበረታቱ ባነሮች።

እንደነዚህ ያሉት ባነሮች የተመልካቾችን ትኩረት ይስባሉ, ከፍተኛ ፍላጎት ያነሳሉ, ግን በተመሳሳይ ጊዜ በርካታ ገደቦች አሏቸው (ለምሳሌ በሞባይል መሳሪያዎች ላይ የመዳፊት ክስተት አለመኖር ወይም ተጨማሪ ስክሪፕቶችን መጠቀም ላይ ገደቦች). የጨዋታ HTML5 ባነር ለመፍጠር ካሰቡ ስለእነዚህ ባህሪያት ሁልጊዜ እንነግራችኋለን።

“ብልጥ” HTML5 ባነሮች (ካልኩሌተሮች)።
ከተጠቃሚው ጋር ለመገናኘት እና ለመግባባት ጥቅም ላይ ይውላሉ, እንደ አስፈላጊዎቹ መለኪያዎች እና በውስጣዊ ስልተ ቀመር (ለምሳሌ ብድርን በማስላት, ብድርን በማስላት, የግንባታ ቁሳቁሶችን እና ሌሎች ቀላል ስራዎችን) አፋጣኝ ስሌት በማቅረብ.

ሊስተካከል የሚችል HTML5 ባነሮች- በአንዳንድ ሁኔታዎች ደንበኛው የገንቢውን እገዛ ሳይጠቀም በፍጥነት በሰንደቅ ዓላማዎች ላይ ለውጦችን ማድረግ አለበት (ለምሳሌ ፣ ዋጋዎችን ፣ በመቶኛ ወይም ጥቅሶችን በተደጋጋሚ መለወጥ)። ይህንን ተግባር መቋቋም እና አስፈላጊዎቹን መለኪያዎች በቀጥታ ወደ ባነር HTML ኮድ ማውጣት እንችላለን ፣ ደንበኛው በተናጥል ለውጦችን ማድረግ ይችላል። በባነር ጥቅም ላይ የዋለውን ውሂብ ወደ ውጫዊ ፋይሎች ለማውጣት ለእርስዎ ምቹ የሆነ ሌላ መፍትሄ ማቅረብ ይችላሉ.

ውጫዊ ውሂብን እና ኤፒአይን ከመጫን ጋር የሚሰሩ HTML5 ባነሮች።
በአሁኑ ጊዜ ብዙ የማስታወቂያ አውታሮች ባነሮች ወደ ውጫዊ ምንጮች እንዳይደርሱ ይከለክላሉ. ነገር ግን፣ ባነር እንደዚህ አይነት እድል በሚሰጥ ጣቢያ ላይ ከተቀመጠ፣ HTML5 ባነር አስፈላጊውን መረጃ (ጽሁፍ፣ ቁጥሮች፣ ጥቅሶች) በጣቢያው ኤፒአይ መጠየቅ እና በተሰጠው ስልተ-ቀመር መሰረት ከተሰራ በኋላ ለ ተጠቃሚ።

3D HTML5 ባነሮች።
እንደዚህ ያሉ ባነሮች በገጹ ላይ ባለ ሶስት አቅጣጫዊ ምስል ሞዴሎችን በመፍጠር የተጠቃሚውን ትኩረት ይስባሉ.

HTML5 3D ባነር ጫፎቹ ባነር ፍሬሞችን እንደያዙ፣ እንደ ተቆልቋይ መፅሃፍ ወይም ሌሎች የ3-ል ተፅእኖዎችን በመጠቀም እንደ ተዘዋዋሪ ነገር ሊተገበር ይችላል።

HTML5 ባነር ብዙ የተገለጹትን ባህሪያት በአንድ ጊዜ ሊያካትት እንደሚችል ልብ ይበሉ። ለምሳሌ፣ የቪዲዮ ባነር በገጹ አጠቃላይ ስፋት ላይ ሊዘረጋ ይችላል፣ እና ባለ 3-ል አኒሜሽን በተጠቃሚ እርምጃዎች ላይ በመመስረት በገጹ ላይ ሊሰፋ ይችላል።

በድረ-ገፃችን ላይ HTML5 ባነር ማዘዝ ከፈለጉ እና የፈጠራ ሀሳብዎ የተለያዩ ቅርጸቶችን ማጣመርን የሚፈልግ ከሆነ የእኛ ልዩ ባለሙያዎች ሁልጊዜ ይህንን ማድረግ ይችላሉ.

HTML5 ባነር - ቴክኒካል ምንድን ነው?

የኤችቲኤምኤል 5 ባነር እንደ ሚኒ ድህረ ገጽ ማሰብ ጥሩ ነው። ምንም ማጋነን.

ኤችቲኤምኤል 5፣ ለዚህ ​​ባነር ፎርማት ስሙን የሚሰጠው፣ የድረ-ገጽ ማርክ ማድረጊያ ቋንቋ ወይም፣ በሌላ አነጋገር፣ የአቀማመጥ ቋንቋ ነው። እና እንደ ማንኛውም ዘመናዊ ድህረ ገጽ በተመሳሳይ ህጎች መሰረት ተዘርግቷል. የዲቪ ኮንቴይነሮች፣ ተሰኪ ቅርጸ-ቁምፊዎች፣ css styles እና js ስክሪፕቶችን ሊይዝ ይችላል። ዋናው ንጥረ ነገር የሸራ አኒሜሽን መያዣ ነው. አኒሜሽኑ ራሱ የጃቫ ስክሪፕት በመጠቀም ነው የሚተገበረው፣ ብዙ ጊዜ በተለይ ለአኒሜሽን የተነደፉ js ላይብረሪዎችን ይጠቀማል።

ውስጥ ምን አለ? ለምን በማህደር ውስጥ? ለምንድነው ብዙ ፋይሎች ያሉት?

ትክክል ነው፣ ምክንያቱም ሰንደቅ አንድ JPG ምስል ፋይል ወይም “gif” ወይም “ፍላሽ አንፃፊ” መሆኑን ስለምንጠቀምበት ነው። ነገር ግን ያስታውሱ፣ ከላይ እንደጻፍነው፣ HTML5 ባነር፣ በእውነቱ፣ ሚኒ ጣቢያ ነው። ብዙ ፋይሎችን ይዟል እና በዚፕ ማህደር ውስጥ ለማስታወቂያ መድረክ ይቀርባል። በማህደሩ ውስጥ ዋና የኤችቲኤምኤል ፋይል ፣ የጃቫ ስክሪፕት ፋይሎች ፣ ቤተ-መጽሐፍት ፣ የቅጥ ሉሆች እና ያገለገሉ ምስሎች አሉ።

ማስታወሻ. በአንዳንድ ሁኔታዎች፣ የማስታወቂያ መድረክ ሁሉንም ያገለገሉ ስክሪፕቶችን እና ምስሎችን በቤዝ-64 ቅርጸት ጨምሮ ባነርን በአንድ ፋይል እንዲያቀርቡ ሊፈልግ ይችላል። ይህ ልምድ ላለው ገንቢ ችግር አይደለም. ይሁን እንጂ እንዲህ ያለው መስፈርት ባነር ለማምረት እና በእሱ ላይ ለውጦችን ለማድረግ የሚፈጀውን ጊዜ ይጨምራል. እንደ እድል ሆኖ, ይህ መስፈርት አልፎ አልፎ ነው.

የተላከውን HTML5 ባነር በኮምፒውተሬ ላይ እንዴት ማየት እችላለሁ?

በጣም ቀላል። የዚፕ ማህደሩን ይክፈቱ እና በውስጡ ያለውን የኤችቲኤምኤል ፋይል በአሳሽዎ ውስጥ ይክፈቱ።

ትክክለኛውን HTML5 ባነር እንደተቀበልኩ እንዴት ማረጋገጥ እችላለሁ?

ለጉግል ማስታወቂያ አገልግሎቶች ሰንደቅ ከተፈጠረ የዲዛይነርን ስራ ጥራት ለመፈተሽ በጣም ጥሩ መሳሪያ በእርስዎ አገልግሎት ላይ ነው - የ Google የመስመር ላይ HTML5 አረጋጋጭ። ለመጠቀም ቀላል ነው፡ የእርስዎን ዚፕ ማህደር በባነር ይስቀሉ እና የማረጋገጫ ዝርዝሩን ካለፉ ይመልከቱ። ስህተቶች በቀይ አዶዎች ምልክት ይደረግባቸዋል። እዚያ ከሌሉ የገንቢዎ ስራ በከንቱ አልነበረም እና ባነር በGoogle adWords ወይም Double Click ላይ ለመመደብ ዝግጁ ነው።

በማስታወቂያ አውታሮች ውስጥ Yandex, Mail.ru, Rambler, adFox, adRiver እና ሌሎችም, ባነር ወደ ስርዓቱ ድህረ ገጽ ከተሰቀለ በኋላ የቴክኒካዊ መስፈርቶችን ስለማሟላት ምልክት ይደረግበታል. በችግሮች ጊዜ ስህተቱን የሚገልጽ አስተያየት ከአወያይ መቀበል ይችላሉ። አንዳንድ ድረ-ገጾች የማስታወቂያ ደንበኞቹን በሙከራ ገጽ ላይ ያለውን ባነር አስቀድሞ ለማየት እድሉን ይሰጣሉ።

አሁንም ቢሆን የኤችቲኤምኤል 5 ባነር ትክክለኛ የማምረት ምርጡ ዋስትና የገንቢው ልምድ፣ የማስታወቂያ መድረኮች ቴክኒካዊ መስፈርቶች እውቀቱ እና ስህተቶችን በፍጥነት ለማረም ያለው ፍላጎት ነው።

በጃቫ ስክሪፕት ውስጥ እነማ ያለው ባነር የተለየ ነው?

ግራ አትጋቡ። “ጃቫ ስክሪፕት ባነር”፣ “የሸራ ባነር” - በትክክል የምንናገረው በተለምዶ “HTML5 ባነር” ተብሎ ስለሚጠራው ነው። በገንቢው መሣሪያ ላይ በመመስረት፣ js ቤተ-መጻሕፍት ወይም የአቀማመጥ ደንቦች ሊለወጡ ይችላሉ፣ ነገር ግን የአጠቃላይ ጉባኤው እቅድ ተመሳሳይ ነው።

HTML5 ባነር እንዴት መፍጠር ይቻላል?

HTML5 እነማዎችን ለመፍጠር በዲዛይነሮች መካከል በጣም ታዋቂው አርታኢ አዶቤ አኒሜት ፕሮግራም ነው።

ጎግል የራሱን የልማት መሳሪያ ያቀርባል - ጎግል ድር ዲዛይነር። ከጥቅሞቹ መካከል ብዙ አብሮገነብ አብነቶች መኖራቸው እና ለጉግል ማስታወቂያ አገልግሎቶች ባነርን በቀጥታ የማተም ችሎታ፡ adWords እና Double Click። ከጉዳቶቹ መካከል የአኒሜሽን ችሎታዎች ውስን ናቸው።

አንዳንድ ዲዛይነሮች፣ ብዙ ጊዜ አሜሪካዊ፣ አረንጓዴ ሶክ አኒሜሽን ፕላትፎርም አርታዒ እና ቤተ መጻሕፍት ይጠቀማሉ። ነገር ግን በአገራችን ከፍተኛ ስርጭት አላገኙም።

ሁሉም አስፈላጊ አካላት ክፍት ምንጭ መሆናቸውን ከግምት ውስጥ በማስገባት አንድ ጥሩ ስፔሻሊስት በቀላል የጽሑፍ አርታኢ ውስጥ እንኳን HTML5 ባነር መፍጠር ይችላል። ይሁን እንጂ ይህ ዘዴ ሙያዊ አኒሜሽን ፕሮግራሞችን ከመጠቀም ጋር ሲነጻጸር ውጤታማ አይደለም.

ለ HTML5 ባነሮች ቴክኒካዊ መስፈርቶች።

መስፈርቶቹ ከ፡-

• የ HTML5 ባነር አጠቃላይ ክብደት በ kb.;
• የዚፕ ማህደር መዋቅር, የአቃፊዎች እና የፋይሎች ብዛት;
• የተፈቀዱ የፋይል ቅርጸቶች ዝርዝር;
• ባነር (ባነር firmware) ላይ ጠቅ በማድረግ የዩአርኤል አገናኞችን የማንቃት መንገድ;
• በውጫዊ ማስተናገጃ ላይ የተፈቀዱ js ቤተ-መጻሕፍት ዝርዝር;
• የቪዲዮ እና የድምጽ ፋይሎችን ለማገናኘት ሂደት እና ገደቦች;
• የፍሬም ንድፍ መስፈርቶች, የኃላፊዎች, ድግግሞሽ እና የአኒሜሽን ዑደቶች ብዛት, በመሳሪያው ፕሮሰሰር ላይ መጫን.

ይህ ደግሞ ለደንበኞቻችን ለምደባ ዝግጁ የሆነ HTML5 ባነር እና የማስታወቂያ ዘመቻ ሳይዘገይ ለመጀመር የኛ ገንቢዎች ከግምት ውስጥ ማስገባት ያለባቸው ሙሉ መስፈርቶች ዝርዝር አይደለም።

ከዚህ ቀደም በተፈጠሩት የፍላሽ ባነርዎቼ ምን ማድረግ አለብኝ?

እራስዎን ይመልከቱ - ትልቁ የማስታወቂያ አውታረ መረቦች ለምደባ የፍላሽ ባነር አይቀበሉም ፣ የፍላሽ አካላት በአሳሽ እና በ iOS መሳሪያዎች ላይ ታግደዋል ፣ Swiffy (ብቸኛው በቂ የመስመር ላይ የፍላሽ ባነር ወደ HTML5 መቀየሪያ) መስራት አቁሟል።

የፍላሽ ፎርማትን ወደ HTML5 በራስ ሰር መለወጥ ፈጽሞ የማይቻል ነው - በእርግጥ በ HTML5 አርታኢ ውስጥ ሙሉ በሙሉ በእጅ እንደገና መገንባት ይፈልጋል። በእንደዚህ ዓይነት ሁኔታ ውስጥ ትክክለኛው ውሳኔ በዘመናዊ እና ሁለንተናዊ HTML5 ቅርጸት አዲስ የታነሙ ባነሮች እንዲፈጠሩ ማዘዝ ነው።

ስለ “gifs”ስ?

ማንኛውም የጂአይኤፍ አኒሜሽን ልክ በቪዲዮ ፋይሎች ውስጥ እንዳለ የፍሬም ምስሎች ተከታታይ ስብስብ መሆኑን መረዳት አለቦት። የጂአይኤፍ ፋይሉ ስለ ፍሬም መልሶ ማጫወት ፍጥነት እና የድግግሞሽ ብዛት መረጃ ሊይዝ ይችላል። ይህ አቅሙን ይገድባል።

የጂአይኤፍ ባነር ከቬክተር ግራፊክስ ጋር አብሮ መስራት፣ ፕሮግራማዊ አኒሜሽን መፍጠር፣ ከተፈለገው መጠን ጋር መላመድ እና ሌሎችም አይችልም፣ ይህም አኒሜሽን HTML5 ባነር በቀላሉ ሊይዝ ይችላል።

ይህ ለአስተዋዋቂው ምን ማለት ነው?

ከመጠን በላይ ክብደት ያለው ችግር. አዎ ፣ ባነሮች እንኳን ለእሱ የተጋለጡ ናቸው። ሁሉም ዋና የማስታወቂያ መድረኮች በሰንደቅ ዓላማ ክብደት ላይ ጥብቅ ገደቦችን በኪሎባይት ያዘጋጃሉ።

የጂአይኤፍ ባነር ጥቂት የማይንቀሳቀሱ ፍሬሞችን ለማሳየት ጥሩ ነው፣ ምናልባትም በትንሽ የጽሑፍ አኒሜሽን፣ በአዝራር ወይም ፎቶዎችን በመቀየር። በዚህ አጋጣሚ የጂአይኤፍ ባነር አጠቃላይ ክብደት ከማስታወቂያ መድረኮች መስፈርቶች አይበልጥም።

አኒሜሽኑ የበርካታ መቶ ክፈፎች ለውጥን የሚያካትት ከሆነ የጂአይኤፍ ባነር ክብደት ይጨምራል፣ በእንግሊዝኛ እንደሚሉት፣ “በአስደናቂ” ማለትም በሚያስደንቅ ሁኔታ። ብዙ ሜጋባይት የሚመዝን የ20 ሰከንድ ጂአይኤፍ የተለመደ ነው። እና ይሄ ባነርን ለማየት ተጠቃሚው ምን ያህል ትራፊክ ማውረድ እንዳለበት በትክክል የሚያሳስባቸው የማስታወቂያ ኔትወርኮች በጣም የተጠላ ነው።

ስለዚህ፣ ብዙ የአኒሜሽን ውጤቶች፣ የቁምፊ አኒሜሽን፣ መስተጋብራዊ፣ መላመድ ወይም ቪዲዮ ባነር ያለው ሰንደቅ ከፈለጉ፣ ምርጫው የተደረገው HTML5 ባነር ለማዘዝ ነው።